/* GENERAL CSS STYLES

Client: Evolution Environmental
Website Version: 1.0

CSS Version: 1.0
Author: Thomas Prior - www.thomasprior.co.uk

*/

/************* NOTES! ***************/

/* A sticky footer solution has been used in this project, and selectors
required to make this work are commented. For more info visit http://www.cssstickyfooter.com - TP*/

* {margin:0;padding:0;} /* Ye olde holy hack - TP */

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

/* MAIN STRUCTURE */

body
{
	font-size:62.5%; 
	font-family:Arial, Helvetica, sans-serif;
	background:url(../assets/mainBodyBgRepeater.gif) repeat-x top;
}

html{overflow: -moz-scrollbars-vertical;}

html, body, #wrapper {height: 100%;}

#mainWrapper {min-height: 100%; width:940px; margin:0 auto; font-size:1.2em; letter-spacing:-0.003em;}

#main {overflow:auto;
	padding-bottom: 150px;}  /* must be same height as the footer */

#mainFocusArea{
	width:940px;
	margin:0 auto;
}

#mainContent{
width:940px;
min-height:400px;
float:left;
background:url(../assets/mainContentTopLine.gif) no-repeat top center;
padding:12px 0 40px 0;
}

#mainColumn{
width:640px;
float:left;
}

#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;
	background: url(../assets/footerBgRepeater.gif) repeat-x top #2b2b2b;
}

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

/* MAIN FONT STYLES */

p{font-size:1.2em;}

h1{}

h2{letter-spacing:-0.04em;}

/* MAIN LINK STYLES */

a{text-decoration:none; color:#353535;}

a:focus {
    outline:0;
}

/* BRANDING AREA */

#branding{
width:940px;
float:left;
}

#branding #mainNav{
width:500px;
float:left;
margin:0;
padding:0;
font-size:1.2em;
}

#branding #mainNav li{
display:inline;
width:auto;
float:left;
}

#branding #mainNav li a{
display:block;
height:56px;
color:#FFF;
letter-spacing:-0.036em;
text-indent:-9999px;
}

#branding #mainNav .home a{
width:60px;
background: url(../assets/mainNavSprite.gif) no-repeat 0 0;
}

#branding #mainNav .home a:hover, #branding #mainNav .home .active{
background:url(../assets/mainNavSprite.gif) no-repeat 0 -56px;
}

#branding #mainNav .about a{
width:77px;
background: url(../assets/mainNavSprite.gif) no-repeat -60px 0;
}

#branding #mainNav .about a:hover, #branding #mainNav .about .active{
background:url(../assets/mainNavSprite.gif) no-repeat -60px -56px;
}

#branding #mainNav .asbestos a{
width:120px;
background: url(../assets/mainNavSprite.gif) no-repeat -137px 0;
}

#branding #mainNav .asbestos a:hover, #branding #mainNav .asbestos .active{
background:url(../assets/mainNavSprite.gif) no-repeat -137px -56px;
}

#branding #mainNav .services a{
width:97px;
background: url(../assets/mainNavSprite.gif) no-repeat -256px 0;
}

#branding #mainNav .services a:hover, #branding #mainNav .services .active{
background:url(../assets/mainNavSprite.gif) no-repeat -256px -56px;
}

#branding #mainNav .contact a{
width:110px;
background: url(../assets/mainNavSprite.gif) no-repeat -353px 0;
}

#branding #mainNav .contact a:hover, #branding #mainNav .contact .active{
background:url(../assets/mainNavSprite.gif) no-repeat -353px -56px;
}

#branding #mainLogo{
width:350px;
height:99px;
float:left;
background:url(../assets/mainLogo.gif) no-repeat top left;
text-indent:-9999px;
clear:both;
}

#branding .vcard{
width:440px;
float:right;
margin:11px 0 0 0;
padding:0;
text-align:right;
color:#FFF;
text-shadow:0 1px 0 #000;
}

#branding .vcard li{
display:inline;
border-left:1px solid #666;
padding-left:10px;
}

#branding .vcard li:first-child{
border-left:none;
}

#branding .vcard li a{
color:#FFF;
border-bottom:1px solid #666;
}

#branding .vcard li a:hover{
border:0;
}

#branding .vcard li a:first-child{
margin:0 8px 0 0;
}

#branding .vcard li a.email{
margin:0 8px 0 0;
}

#branding .strapline{
width:440px;
float:left;
text-align:right;
font-size:1.4em;
margin:70px 0 0 150px;
padding:0 0 8px 0;
overflow:hidden;
}

/* BREADCRUMB */

#breadcrumb{
	width:940px;
	float:left;
	font-size:0.95em;
	color:#696969;
	margin:1px 0 0 0;
	padding:0 0 13px 0;
}

#breadcrumb li{
	display:inline;
	margin:0 3px;
	padding:0 0 0 10px;
	background: url(../assets/breadcrumbSeparator.gif) no-repeat left;
}

#breadcrumb li:first-child{
	color:#093d39;
	margin:0 3px 0 0;
	padding:0;
	font-weight:bold;
	background:none;
}

#breadcrumb li a{
border-bottom:1px solid #CCC;
}

#breadcrumb li a:hover{
border:none;
}

/* SERVICES COLUMN */

#servicesColumn{
width:300px;
float:right;
}

#servicesColumn h2{
width:282px;
float:right;
background:url(../assets/servicesColumnHeaderBg.gif) no-repeat top right;
text-align:center;
font-size:1.8em;
font-weight:normal;
padding:26px 0 0 0;
}

#servicesColumn dl{
width:282px;
float:right;
margin:0;
text-align:center;
background: url(../assets/servicesTitleSeparator.gif) no-repeat top center;
}

#servicesColumn dl:hover{
background: #999;
background:url(../assets/servicesTitleSeparatorHover.gif) no-repeat top center;
color:#000;
}

#servicesColumn dl:hover a{
color:#000;
}

#servicesColumn dl a:hover{
color:#000;
}

#servicesColumn dl dt a{
width:282px;
display:block;
padding:10px 0 0 0;
font-size:1.36em;
}

#servicesColumn dl dd a{
width:258px;
padding:16px 12px 14px 12px;
display:block;
font-size:0.96em;
}

#servicesColumn dl dd a span{
color:#0b3e3a;
font-weight:bold;
text-decoration:underline;
}

#servicesColumn .first-child{
background:url(../assets/firstServiceBg.gif) no-repeat top center;
}

#servicesColumn .first-child:hover{
background:url(../assets/firstServiceBgHover.gif) no-repeat top center;
}

#servicesColumn .first-child dt a{
padding:42px 0 0 0;
}

#servicesColumn .last-child{
background:url(../assets/lastServiceBg.gif) no-repeat bottom center;
}

#servicesColumn .last-child dd a{
padding-bottom:27px;
} 

#servicesColumn .last-child:hover{
background:url(../assets/lastServiceBgHover.gif) no-repeat bottom center;
}

#servicesColumn .last-child.active{
background: url(../assets/lastServiceBg_active.gif) repeat-x bottom right !important;
}

#servicesColumn .last-child.active, #servicesColumn .last-child.active:hover{
background:url(../assets/lastServiceBg_active.gif) repeat-x bottom right !important;
}

#servicesColumn dl.active{
background: url(../assets/servicesTitleSeparator_active.gif) no-repeat top right #141411;
padding:0 0 0 18px;
color:#FFF;
}

#servicesColumn dl.active a{
color:#FFF;
}

#servicesColumn dl.active dd a span{
color:#FFF;
}

#servicesColumn .first-child.active{
background:url(../assets/firstServiceBg_active.gif) repeat-x top right !important;
}

#servicesColumn .last-child.active, #servicesColumn .last-child.active:hover{
background:background:url(../assets/lastServiceBg_active.gif) repeat-x top right !important;
}

/* FOOTER */

#footerContent{
width:940px;
margin:0 auto;
padding:27px 0 0 0;
color:#FFF;
}

#footerContent a{
color:#FFF;
}


#footerContent #footerMirrorNav{
width:500px;
float:left;
margin:0;
padding:0;
font-size:1.2em;
}

#footerContent #footerMirrorNav li{
display:inline;
width:auto;
float:left;
}

#footerContent #footerMirrorNav li a{
display:block;
height:27px;
color:#FFF;
letter-spacing:-0.036em;
text-indent:-9999px;
margin:0 4px 0 0;
}

#footerContent #footerMirrorNav .home a{
width:60px;
background: url(../assets/footerNavSprite.gif) no-repeat 0 0;
}

#footerContent #footerMirrorNav .home a:hover, #footerContent #footerMirrorNav .home .active{
background:url(../assets/footerNavSprite.gif) no-repeat 0 -27px;
}

#footerContent #footerMirrorNav .about a{
width:78px;
background: url(../assets/footerNavSprite.gif) no-repeat -58px 0;
}

#footerContent #footerMirrorNav .about a:hover, #footerContent #footerMirrorNav .about .active{
background:url(../assets/footerNavSprite.gif) no-repeat -58px -27px;
}

#footerContent #footerMirrorNav .asbestos a{
width:119px;
background: url(../assets/footerNavSprite.gif) no-repeat -135px 0;
}

#footerContent #footerMirrorNav .asbestos a:hover, #footerContent #footerMirrorNav .asbestos .active{
background:url(../assets/footerNavSprite.gif) no-repeat -135px -27px;
}

#footerContent #footerMirrorNav .services a{
width:97px;
background: url(../assets/footerNavSprite.gif) no-repeat -255px 0;
}

#footerContent #footerMirrorNav .services a:hover, #footerContent #footerMirrorNav .services .active{
background:url(../assets/footerNavSprite.gif) no-repeat -255px -27px;
}

#footerContent #footerMirrorNav .contact a{
width:110px;
background: url(../assets/footerNavSprite.gif) no-repeat -353px 0;
}

#footerContent #footerMirrorNav .contact a:hover, #footerContent #footerMirrorNav .contact .active{
background:url(../assets/footerNavSprite.gif) no-repeat -353px -27px;
}

#footerContent #footnotes{
width:400px;
float:right;
text-align:right;
color:#575757;
text-shadow:0 1px 0 #000;
}

#footerContent #footnotes a{
color:#575757;
border-bottom:1px solid #333;
}

#footerContent #footnotes a:hover{
border-bottom:none;
}

/* HOMEPAGE SPECIFIC STYLES */

#homePresentationArea{
width:640px;
float:left;
margin:26px 0 0 0;
background:url(../assets/homePresentationAreaBottom.gif) no-repeat bottom left;
}

#homeIntro{
width:300px;
padding:0;
float:left;
}

#homeIntro p{
color:#FFF;
padding:12px 18px 2px 18px;
font-size:1.1em;
line-height:1.9em;
}

#homeIntro h3{
background:url(../assets/homeIntroBoxTop.gif) no-repeat top left;
font-size:1.9em;
padding:18px;
}

#homeIntro h3 span{
background:url(../assets/iconOnBlack.gif) no-repeat left top;
padding:0 0 0 30px;
}

#homeIntro .learnMore{
display:block;
width:92px;
float:left;
margin:0 0 18px 12px;
line-height:25px;
font-weight:bold;
color:#FFF;
text-align:center;
background:url(../assets/learnMoreButton.gif) no-repeat top center;
}

#homeIntro .learnMore:hover{
background:url(../assets/learnMoreButton.gif) no-repeat bottom center;
}

#homeIntro .services{
display:block;
width:169px;
float:left;
margin:0 0 18px 12px;
line-height:25px;
font-weight:bold;
color:#FFF;
text-align:center;
background:url(../assets/servicesButton.gif) no-repeat top center;
}

#homeIntro .services:hover{
background:url(../assets/servicesButton.gif) no-repeat bottom center;
}

#homePresentationArea blockquote{
width:319px;
margin:0;
padding:0;
float:right;
font-size:1.8em;
background:url(../assets/homeQuoteTop.gif) no-repeat top right;
}

#homePresentationArea blockquote p{
padding:29px 18px 110px 18px;
text-align:right;
background:url(../assets/homeQuoteBottom.gif) no-repeat bottom;
}

#homePresentationArea #contactLeader{
width:100%;
float:left;
margin:6px 0 0 0;
padding:0 0 12px 18px;
}

#homePresentationArea #contactLeader p{
width:290px;
float:left;
color:#FFF;
}

#homePresentationArea #contactLeader h2{
width:320px;
float:right;
font-size:2.7em;
font-weight:normal;
text-align:right;
color:#222;
margin:-4px 26px 0 0;
}

/* SERVICE DETAILS PAGE SPECIFIC STYLES */

.serviceDetails{
background: url(../assets/mainContent_servicesFooter.gif) no-repeat bottom left #141414;
color:#FFF;
}

.serviceDetails h1{
background:url(../assets/mainContent_servicesHeadingBg.gif) no-repeat top left;
font-size:2.1em;
line-height:2.7em;
text-indent:46px;
margin:0 0 18px 0;
}

.serviceDetails #serviceDescription{
width:602px;
float:right;
margin:0 20px 30px 0;
padding:0 0 0 0;
font-size:0.9em;
line-height:1.8em;
}

.serviceDetails #serviceDescription img{
width:auto;
float:left;
margin:0 22px 12px 0;
}

.serviceDetails #serviceDescription h2{
line-height:2.3em;
font-size:1.8em;
letter-spacing:normal;
}

.serviceDetails #serviceDescription ul{
font-size:1.2em;
margin:18px 0 18px 0;
}

.serviceDetails #serviceDescription ul li{
padding:0 0 0 18px;
line-height:1.6em;
}

.serviceDetails #serviceDescription a{
color:#FFF;
border-bottom:1px dotted #666;
font-weight:bold;
}

.serviceDetails #serviceDescription a:hover{
border-bottom:none;
text-decoration:none;
}

.serviceDetails #contactLeader{
width:100%;
height:65px;
float:left;
padding:0 0 12px 18px;
}

.serviceDetails #contactLeader p{
width:290px;
float:left;
color:#FFF;
}

.serviceDetails #contactLeader h2{
width:320px;
float:right;
font-size:2.5em;
font-weight:normal;
text-align:left;
text-indent:28px;
color:#FFF;
}

#contactLeader a{
width:261px;
line-height:46px;
margin:-6px 0 0 60px;
padding:0;
float:left;
display:block;
background: url(../assets/contact-button-sprite.png) no-repeat top left;
font-size:1.5em;
font-weight:bold;
text-align:center;
color:#FFF;
text-shadow:0 1px 0 #000;
}

#contactLeader a:hover{
background: url(../assets/contact-button-sprite.png) no-repeat bottom left;
}

/*.serviceDetails #serviceDescription.consultancy{
background:url(../assets/serviceImage_roof.jpg) no-repeat top left;
}*/

/* MISC PAGE SPECIFIC STYLES */

.miscDetails{
background: url(../assets/mainContent_miscFooter.gif) no-repeat bottom left #eef4e9;
color:#171717;
}

.miscDetails h1{
font-size:2.1em;
background:url(../assets/mainContent_miscHeadingBg.gif) no-repeat left;
line-height:2.7em;
text-indent:46px;
margin:0;
}

.miscDetails #miscDescription{
width:602px;
float:right;
margin:0 20px 30px 0;
padding:180px 0 0 0;
font-size:0.9em;
line-height:1.8em;
}

.miscDetails #contactLeader{
width:100%;
height:65px;
float:left;
padding:0 0 12px 18px;
}

.miscDetails blockquote{
margin:2px 0 0 0;
padding:0 0 0 16px;
font-size:1.5em;
line-height:1.6em;
color:#595959;
border-left:3px solid #5b9926;
}

.miscDetails .about h2{
line-height:2.3em;
}

.miscDetails ul{
font-size:1.2em;
margin:18px 0 18px 0;
}

.miscDetails ul li{
padding:0 0 0 18px;
line-height:1.6em;
}

.miscDetails #contactLeader p{
width:290px;
float:left;
color:#FFF;
}

.miscDetails #contactLeader h2{
width:320px;
float:right;
font-size:2.5em;
font-weight:normal;
text-align:left;
text-indent:28px;
color:#171717;
}

.miscDetails #miscDescription.about{
background: url(../assets/mainAtDesk_photo.jpg) no-repeat top left;
}

.miscDetails #miscDescription.aboutasbestos{
background: url(../assets/asbestosWarning_photo.jpg) no-repeat top left;
}

.miscDetails #miscDescription.contact{
background: url(../assets/fingerCommunication_photo.jpg) no-repeat top left;
}

/* CONTACT PAGE SPECIFIC STYLES */

.contactDetails{
width:240px;
float:left;
font-size:1.2em;
}

.contactDetails h3{
border-bottom:1px solid #CCC;
}

.contactDetails dl{
margin:10px 0 0 0;
padding:0;
line-height:1.6em;
}

.contactDetails dl dt{
font-weight:bold;
}

.contactDetails dl dd ul{
margin:14px 0 0 0;
padding:0;
font-size:1em;
}

.contactDetails ul li{
margin:0;
padding:0;
}

.contactDetails dl dd ul li a{
border-bottom:1px solid #CCC;
}

.contactDetails dl dd ul li a:hover{
border-bottom:none;
color:#000;
}

.contactDetails .office-listings li{
line-height:2.5em;
}

#contactForm{
width:320px;
float:right;
border-left:1px solid #CCC;
padding:0 0 0 16px;
}

#contactForm label{
	font-size:1.2em;
	font-weight:bold;
	letter-spacing:normal;
	margin:0;
	padding:0;
}

#contactForm dd{
	padding:0;
	margin:4px 0 13px 0;
}

#contactForm .textInputType input{
	width:317px;
	font-size:1.4em;
	padding:4px;
}

#contactForm .textInputType textarea{
	width:317px;
	height:180px;
	padding:4px;
	font-size:1.4em;
}

#contactForm .submit input{
width:auto;
float:left;
margin:0 0 14px 0;
background:#316561;
padding:7px 14px;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
border:none;
-webkit-border-top-right-radius:8px;
-webkit-border-top-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
-webkit-border-bottom-left-radius:8px;
-moz-border-radius: 8px;
-moz-border-radius-topright:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-bottomright:8px;
-moz-border-radius-bottomleft:8px;
border-top-right-radius:8px;
border-top-left-radius:8px;
border-bottom-right-radius:8px;
border-bottom-left-radius:8px;
color:#FFF;
}

#contactForm .submit input:hover{
cursor:pointer;
background:#000;
}

p#success{
	width:584px;
	float:left;
	padding: 4px 10px;
	background:#407116;
	color: #FFF;
	font-size:1.4em;
	margin: 10px 0 4px 0;
	text-align: center;
	border:1px solid #CCC;
}
		
p#bademail, p#badserver{
	width:584px;
	float:left;
	padding: 3px 10px;
	background:#760101;
	border: 1px solid #591515;
	color: #FFF;
	font-weight:bold;
	margin: 10px 0 4px 0;
	text-align: center;
}