/* GENERAL SITE SKELETON
---------------------------------------------------- */

body {
	background: url('../img/layout/body-bg.gif') repeat-x 0 0 #fff;
	text-align: right;
	margin: 15px;
	font-family: Georgia, Times New Roman, Times, serif;
	font-size: 12px;
	line-height: 16px;
	color: #323232;
	}

#container {
	position: relative;
	width: 870px;
	margin: 0 auto;
	text-align: left;
	}
	
#content {
	clear: both;
	padding-top: 60px;
	min-height: 350px;
	} 

#content #left-column { 
	float: left; display: inline; 
	width: 515px;
	}

#content #right-column { float: right; }

#footer { clear: both; }

.clear { clear: both; }

a {
	color: #4d9627;
	text-decoration: none;
	}
	
a:hover { text-decoration: underline; }

a img { border: 0; }

h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, sans-serif; }
	h1 { line-height: 1.1em; }	
	h3 {
		color: #4d9627;
		font-weight: normal;
		margin-bottom: 0;
		line-height: 1.5em;
		}
		h3 sup { font-size: 10px; }
	
.thumb {
	padding: 4px;
	border: 1px solid #ccc;
	margin-right: 4px;
	margin-top: 6px;
	cursor: pointer;
	}

.thumb-container {
	margin: 0 auto;
	text-align: center;
	}
	
.full-image {
	display: block;	
	padding: 14px;
	margin: 0 auto;
	width: 466px;
	}
	
#header { 
	float: left; display: inline; width: 870px;
}

/* LOGO
---------------------------------------------------- */
	
#logo {
	width: 177px;
	height: 71px;
	display: block;
	position: relative;
	top: -2px;
	float: left;
	background: url('../img/layout/xeroflor-logo.png') no-repeat;
	}
	* html #logo { behavior: url(/css/iepngfix.htc); }

#logo h1 { display: none; }

strong.tagline {
	position: absolute;
	right: 0; top: 0;
	width: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-transform: uppercase; color: #fff;
	letter-spacing: .2em;
	text-align: right;
	}
	
/* NAVIGATION
---------------------------------------------------- */
	
#nav-wrapper {
	
	position: absolute;
	top: 79px; left: 0;
	float: left; display: inline;
	width: 870px;
	/*
	float: right; display: inline;
	margin-top: 8px;
	width: auto;
	*/
	}

#nav-wrapper ul {
	float: right; display: inline; 
	margin: 0; padding: 0;
	/* width: 759px;*/
	width: auto;
	border: 1px solid #ccc;
	border-width: 0 0 1px 1px;
	/* background: url(/img/layout/nav/bg_nav.gif) #ecf0f3 repeat-x 0 0; */
	list-style-type: none;
	}
	
#nav-wrapper ul li { float: left; display: inline; 
	/* background: url(/img/layout/nav/bg_nav.gif) #ecf0f3 repeat-x 0 0;*/ }
#nav-wrapper ul li a {
	display: block;
	padding: 0 6px;
	border-right: 1px solid #ccc;
	color: #000;
	font: bold 11px/30px Arial, Helvetica, sans-serif;
	}
#nav-wrapper ul li a:hover {
	color: #034794;
	text-decoration: none;
	}
#nav-wrapper ul li a strong { /*display: none;*/ }
/*
#nav-wrapper ul li a.nav_home {
	display: block;
	width: 73px;
	height: 29px;
	background: url('../img/layout/nav/nav_home.gif') no-repeat top left;
}

#nav-wrapper ul li a.nav_whygreenroof {
	display: block;
	width: 113px;
	height: 29px;
	background: url('../img/layout/nav/nav_why.gif') no-repeat top left;
}

#nav-wrapper ul li a.nav_system {
	display: block;
	width: 73px;
	height: 29px;
	background: url('../img/layout/nav/nav_system.gif') no-repeat top left;
}

#nav-wrapper ul li a.nav_projects {
	display: block;
	width: 72px;
	height: 29px;
	background: url('../img/layout/nav/nav_projects.gif') no-repeat top left;
}

#nav-wrapper ul li a.nav_aboutus {
	display: block;
	width: 73px;
	height: 29px;
	background: url('../img/layout/nav/nav_about.gif') no-repeat top left;
}

#nav-wrapper ul li a.nav_resources {
	display: block;
	width: 80px;
	height: 29px;
	background: url('../img/layout/nav/nav_resources.gif') no-repeat top left;
}

#nav-wrapper ul li a.nav_contact {
	display: block;
	width: 74px;
	height: 29px;
	background: url('../img/layout/nav/nav_contact.gif') no-repeat top left;
}

#nav-wrapper ul li a.nav_techsheets {
	display: block;
	width: 89px;
	height: 29px;
	background: url('../img/layout/nav/nav_techsheets.gif') no-repeat top left;
}


body#home #nav-wrapper ul li a.nav_home { background: url('../img/layout/nav/nav_home.gif') top right; }
body#whygreenroof #nav-wrapper ul li a.nav_whygreenroof { background: url('../img/layout/nav/nav_why.gif') top right; }
body#system #nav-wrapper ul li a.nav_system { background: url('../img/layout/nav/nav_system.gif') top right; }
body#projects #nav-wrapper ul li a.nav_projects { background: url('../img/layout/nav/nav_projects.gif') top right; }
body#projectlisting #nav-wrapper ul li a.nav_projects { background: url('../img/layout/nav/nav_projects.gif') top right; }
body#about #nav-wrapper ul li a.nav_aboutus { background: url('../img/layout/nav/nav_about.gif') top right; }
body#resources #nav-wrapper ul li a.nav_resources { background: url('../img/layout/nav/nav_resources.gif') top right; }
body#contact #nav-wrapper ul li a.nav_contact { background: url('../img/layout/nav/nav_contact.gif') top right; }
body#techsheets #nav-wrapper ul li a.nav_techsheets { background: url('../img/layout/nav/nav_techsheets.gif') top right; }


#nav-wrapper ul li a.nav_home:hover { background: url('../img/layout/nav/nav_home.gif') top right; }
#nav-wrapper ul li a.nav_whygreenroof:hover { background: url('../img/layout/nav/nav_why.gif') top right; }
#nav-wrapper ul li a.nav_system:hover { background: url('../img/layout/nav/nav_system.gif') top right; }
#nav-wrapper ul li a.nav_projects:hover { background: url('../img/layout/nav/nav_projects.gif') top right; }
#nav-wrapper ul li a.nav_aboutus:hover { background: url('../img/layout/nav/nav_about.gif') top right; }
#nav-wrapper ul li a.nav_resources:hover { background: url('../img/layout/nav/nav_resources.gif') top right; }
#nav-wrapper ul li a.nav_contact:hover { background: url('../img/layout/nav/nav_contact.gif') top right; }
#nav-wrapper ul li a.nav_techsheets:hover { background: url('../img/layout/nav/nav_techsheets.gif') top right; }

*/
/* FOOTER
---------------------------------------------------- */

#footer {
	border-top: 4px solid #ccc;
	margin-top: 25px;
	padding-top: 10px;
	text-align: center;
	font-family: Arial, Helvetica, Helvetica Neue, Verdana, sans-serif;
	font-size: 10px;
	}

#footer ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: center;
	}

#footer ul li {
	display: inline;
	padding-right: 10px;
	border-right: 1px solid #777;
	margin-right: 10px;
	}
	
#footer ul li.last {
	border: none;
	margin: 0;
	padding: 0;
}
	
#footer p {
	clear: both;
	margin-top: 3px;
	}
	

/* CONTACT FORM
---------------------------------------------------- */

label, input, select, textarea { font: normal 12px Arial, Helvetica, sans-serif; }

label { font-size: 11px; display: block; margin-top: 10px; }
fieldset { border: 1px solid #ddd; padding: 0 0 13px 13px; margin-bottom: 15px; }
fieldset div { float: left; width: 140px; }
input { width: 110px;}
select { width: 110px; }
legend { text-transform: uppercase; letter-spacing: 1px; font-family: Arial, sans-serif; font-weight: bold; font-size: 11px;}
.contact-success { background-color: #ecd86c; margin-bottom: 15px; padding: 4px; }

textarea { width: 269px; height: 75px; }

span.phone-number { }
	input.area-code { width: 25px; }
	input.prefix { width: 25px;}
	input.suffix { width: 32px; }

div.buttons { clear: left; }
input.button { clear: left; }

/* HOME PAGE
---------------------------------------------------- */

body#home #content { float: left; display: inline; width: 100%; }

body#home #content #right-column { width: 305px; }

body#home #content #right-column h3 {/*
	margin: 0;
	background: url('../img/layout/xero-intro.gif') no-repeat;
	display: block;
	width: 301px;
	height: 57px;*/
	}
	
body#home #content #right-column p { margin-left: 35px; }


body#home #content #right-column { border-left: 1px solid #ccc; padding-left: 20px;	}

body#home #left-column { float: left; display: inline; width: 500px; }

	div.image { }

	ul.cycle-images { z-index: 200; }
		ul.cycle-images,
		ul.cycle-images li { margin: 0; padding: 0; list-style: none; }
		
		div.image,
		ul.cycle-images,
		ul.cycle-images li,
		ul.cycle-images li img { float: left; display: inline; width: 500px/*auto*/; height: 375px/*338px*/;  }

	body#home #left-column .image-overlay { clear: both; margin: 0 0 20px; padding: 20px; width: 460px; background: #4D9627; color: #fff; font: bold 13px Arial, Helvetica, sans-serif; }
		.image-overlay p { margin: 0 0 1em; }
		.image-overlay p:last-child { margin: 0; }

/* PROJECTS PAGE
---------------------------------------------------- */

span.sqft { display: block; }

body#projects #content .column, body#projects #content .column-last {
	width: 280px;
	margin-right: 10px;
	float: left;
	}

body#projects #content .column-last { margin-right: 0; }

body#projects #content .column ul, body#projects #content .column-last ul {
	list-style: none;
	padding: 0;
	margin: 0;
	}
	
body#projects #content .column ul li, body#projects #content .column-last ul li { line-height: 22px; }

body#projects #content h3 {	color: #004590; }

body#projects #content #featured-left { float: left; }
body#projects #content #featured-right { float: right; }
body#projects #content #featured-left, body#projects #content #featured-right { margin-bottom: 15px; }

body#projects h3 { margin-bottom: 15px; }

body#projects #content .column .project-list li { padding-bottom:1em; line-height:16px; }

/* WHY GREEN ROOF? PAGE
---------------------------------------------------- */

body#whygreenroof #content #left-column {
	float: left;
	width: 210px;
	display: none;
	}
body#inner #content #left-column {
	float: left;
	width: 210px;
	}
	
body#whygreenroof #content #right-column {
	float: right;
	width: 100%;
}
body#inner #content #right-column {
	float: right;
	width: 650px;
}	
body#whygreenroof p { margin: 0; }
body#inner p { margin: 0; }
body#whygreenroof h2.title strong { display: none; }
body#inner h2.title strong { display: none; }
body#whygreenroof h2.title {
	display: block;
	width: 136px;
	height: 17px;
	background: /* url('../img/layout/title-whygreenroof.gif') no-repeat*/ none;
	position: relative;
	top: 2px;
	}
/* SYSTEM PAGE
---------------------------------------------------- */

body#system #content #left-column {
	float: left;
	width: 310px;
	}
	
body#system #content #right-column {
	float: right;
	width: 550px;
	}
	
body#system p {
	margin-top: 0;
	}
	

/* TECH SHEETS PAGE
---------------------------------------------------- */

body#techsheets #right-column { width: 100%; }

body#techsheets #right-column ul {
	list-style: none;
	float: left;
	margin: 0;
	padding: 0;
	}
	
body#techsheets #right-column ul li { margin-bottom: 5px; }
	
body#techsheets .root {
	float: left;
	margin-right: 15px;
	font-family: Arial, Verdana, sans-serif;
	text-transform: uppercase;
	font-size: 90%;
	}
	
body#techsheets #tech-specs {
	float: left;
	width: 320px;
	}

body#techsheets #system-info {
	float: left;
	width: 320px;
	}

body#techsheets #content a {
	font-family: Arial, Verdana, sans-serif;
	color: #323232;
	font-weight: normal;
}

body#techsheets #content a:hover {
	color: #4d9627;
	text-decoration: none;
	}

body#techsheets a img { margin-right: 5px; }

body#techsheets h2.title strong { display: none; }

body#techsheets h2.title {
	display: block;
	width: 91px;
	height: 13px;
	background: /* url('../img/layout/title-techsheets.gif') no-repeat */ none;
	}
	
body#techsheets h3 strong { display: none; }

body#techsheets h3.specs {
	display: block;
	width: 183px;
	height: 17px;
	background: url('../img/layout/title-techspecs.gif') no-repeat;
	}
	
body#techsheets h3.info {
	display: block;
	width: 92px;
	height: 17px;
	background: url('../img/layout/title-systeminfo.gif') no-repeat;
	}


body#contact #right-column h3 { font-size: 1.5em; }

/* RESOURCES
---------------------------------------------------- */

body#resources #right-column { width: 647px; }

body#resources #resources-links {
	float: left;
	width: 320px;
	}

body#resources #installers {
	float: left;
	width: 320px;
	}

body#resources a span { vertical-align: middle; }

body#resources a img { float: left; }

body#resources p { clear: both; }

body#resources h2.title strong { display: none; }

body#resources h2.title {
	display: block;
	width: 77px;
	height: 13px;
	background: url('../img/layout/title-resources.gif') no-repeat;
	}
	
body#resources h3 strong { display: none; }

body#resources h3.title-resources {
	display: block;
	width: 172px;
	height: 13px;
	background: url('../img/layout/title-greenroofresources.gif') no-repeat;
}

body#resources h3.title-installers {
	display: block;
	width: 149px;
	height: 13px;
	background: url('../img/layout/title-preferredinstallers.gif') no-repeat;
}

body#resources h3.title-worldwidepartners {
	display: block;
	width: 154px;
	height: 13px;
	background: url('../img/layout/title-worldwidepartners.gif') no-repeat;
}

body#resources table.resources-table h3 { margin-bottom: 10px; }
body#resources table td.list { padding-right: 15px; }


/* CONTACT
---------------------------------------------------- */

body#contact #content #left-column { float: left; }
body#contact #content #right-column { width: 305px; }

/* Map UI */
#location-map { position: relative; margin-bottom:2em; }
#map-regions, #map-regions li, #map-regions li a {
	list-style: none; margin: 0; padding: 0; position: absolute; color: #000;
	font: bold 1em Arial, Helvetica, sans-serif; 
	text-transform:uppercase; text-align: center;
	}
	#map-regions li#r-pnw { top: 48px; left: 21px; }
	#map-regions li#r-npt { top: 72px; left: 148px; }
	#map-regions li#r-nlr { top: 123px; left: 288px; }
	#map-regions li#r-ner { top: 76px; left: 420px; }
	#map-regions li#r-mar { top: 164px; left: 392px; }
	#map-regions li#r-ser { top: 212px; left: 315px; }
	#map-regions li#r-scr { top: 197px; left: 172px; }
	#map-regions li#r-psw { top: 142px; left: 29px; }
	
/* ABOUT US
---------------------------------------------------- */

body#about #content #left-column { float: left; }
body#about #content #right-column { width: 305px; }


/* PROJECT LISTING
---------------------------------------------------- */

body#projectlisting #content #left-column {
	float: left;
	width: 255px;
	margin: 0;
	}
	
body#projectlisting #content #right-column {
	float: right;
	width: 597px;
	padding-right: 0;
	margin: 0;
	}
	
body#projectlisting p {
	margin-top: 5px;
	font-family: Arial, Helvetica, Helvetica Neue, Verdana, sans-serif;
	color: #888;
	}
	
body#projectlisting #content #left-column ul {
	margin-left: 18px;
	padding: 0;
	}


body#projectlisting #content table {
	/* PERIOD MAKES IE ONLY BROWSER TO RENDER THIS. BUG FIX. */
	.margin-top: 0px;
	}

body#projectlisting #content table td {
	vertical-align: top;
	width: 150px;
	}
	
body#projectlisting #content table td.first { width: 265px; }

body#projectlisting #content #left-column ul li { padding-bottom: 5px; }

body#projectlisting .full-image-wrapper { float: left; }

body#projectlisting .thumb-container {
	float: right;
	width: 111px;
	text-align: right;
	}
	
body#projectlisting .thumb-container img {
	margin-top: 2px;
	margin-bottom: 8px;
	}
	
body#projectlisting .full-image {
	float: left;	
	display: inline;
	margin: 0;	
	padding: 10px;
	width: 450px;
	border: 1px solid #ccc;
	}
	
	
/* HOMEPAGE SPLASH
---------------------------------------------------- */

table.splash-table td { padding: 0 10px 10px 0; }

div.splashtext-prop {
	display: block;
	height: 154px;
	width: 318px;
	}
	
div.splashtext-prop strong { display: none; }

div#splashtext { background: url('../img/splash/splash-text-default.gif'); }

a.splash-link {
	display: block;
	width: 154px;
	height: 154px;
	background-position: top left;
	}
	
a.splash-link:hover {
	background-position: top right;
	}
/*	
a#splash-link-1 { background-image: url('../img/splash/splash-pic-1.jpg'); }
a#splash-link-2 { background-image: url('../img/splash/splash-pic-2.jpg'); }
a#splash-link-3 { background-image: url('../img/splash/splash-pic-3.jpg'); }
a#splash-link-4 { background-image: url('../img/splash/splash-pic-4.jpg'); }
a#splash-link-5 { background-image: url('../img/splash/splash-pic-5.jpg'); }
a#splash-link-6 { background-image: url('../img/splash/splash-pic-6.jpg'); }
a#splash-link-7 { background-image: url('../img/splash/splash-pic-7.jpg'); }
*/
div.splash-text-default { background: url('../img/splash/txt_splash-intro.gif') no-repeat #64b13d; }


/* RESOURCES PAGE
---------------------------------------------------- */
	
	body#resources #left-column { display: none; }
	body#resources #right-column { width: 100%; }
	body#resources #right-column table { width: 100%; }