/**
 * BASE.CSS
 * 
 * @note		This file holds core styles for layout and overall site design. 
 * 				This document is commented in a method defined by cssDoc: http://cssdoc.net/
 * @author		Tim Stephens / longfilename@gmail.com / longfilename.com
 **/

@import url(reset.css);

@media screen {
	html {
		background: #b28d5b url(../img/bgGradient.gif) top left repeat-x;
	}
	
	body {
		background: url(../img/bgContainerDrill.jpg) center 20px no-repeat;
		min-height: 1200px;
	}
		body.sectionContactUs {
			background-image: url(../img/bgContainerDrillHead.jpg);
		}
		body.sectionTermsOfUse,
		body.sectionDesignIdeas,
		body.sectionMaterialChoicesLumber,
		body.sectionMaterialChoicesComposites {
			background: url(../img/bgContainerDrillLong.jpg) center 20px no-repeat;
			min-height: 1486px;
		}
		body.sectionHome {
			background: url(../img/bgContainerHome.jpg) center 20px no-repeat;
			min-height: 1021px;
		}
	
	#container {
		width: 785px;
		margin: 0 auto;
		padding: 54px 0 0 0;
		position: relative;
	}
	
	#branding {}
	
		#brandingLogo {
			text-align: center;
			padding: 0 0 35px 0;
		}
	
	#nav {
		position: absolute;
		top: 66px;
		right: 49px;
		width: 181px;
	}
	
		#navMain li {
			width: 181px;
			height: 22px;
		}
	
		#navMain a {
			color: #640a11;
			display: block;
			font: normal 13px/13px Arial, Helvetica, sans-serif;
			height: 23px;
			padding: 7px 0 0 0;
			text-align: left;
			text-decoration: none;
			width: 195px;
		}
			#navMain li a:hover { 
				background-position: 0 0 !important;
				text-decoration: underline;
			}
			
			/** 
			 * @note	if the browser has JS enabled, hide the text and show the BG image
			 **/
			body.wjs #navMain li a {
				height: 22px;
				padding: 0;
				text-indent: -999em;
				background-position: 0 -22px;
				background-repeat: no-repeat;
			}
			
			/**
			 * @note	define a unique background image per top level nav
			            since we are using an image replacement technique // cf. Phark Image Replacement
						instead of embedding the images in the HTML
			 **/
			#navMain #navMainLI0   a { background-image: url(../img/nav/aboutUs.gif); }
			#navMain #navMainLI1   a { background-image: url(../img/nav/ourExpertise.gif); }
			#navMain #navMainLI2   a { background-image: url(../img/nav/photoGallery.gif); }
			#navMain #navMainLI20  a { background-image: url(../img/nav/decks.gif); }
			#navMain #navMainLI200 a { background-image: url(../img/nav/gallery1.gif); }
			#navMain #navMainLI201 a { background-image: url(../img/nav/gallery2.gif); }
			#navMain #navMainLI202 a { background-image: url(../img/nav/gallery3.gif); }
			#navMain #navMainLI203 a { background-image: url(../img/nav/gallery4.gif); }
			#navMain #navMainLI204 a { background-image: url(../img/nav/gallery5.gif); }
			#navMain #navMainLI205 a { background-image: url(../img/nav/gallery6.gif); }
			#navMain #navMainLI206 a { background-image: url(../img/nav/gallery7.gif); }
			#navMain #navMainLI207 a { background-image: url(../img/nav/gallery8.gif); }
			#navMain #navMainLI208 a { background-image: url(../img/nav/gallery9.gif); }
			#navMain #navMainLI21  a { background-image: url(../img/nav/porches.gif); }
			#navMain #navMainLI210 a { background-image: url(../img/nav/gallery1.gif); }
			#navMain #navMainLI211 a { background-image: url(../img/nav/gallery2.gif); }
			#navMain #navMainLI212 a { background-image: url(../img/nav/gallery3.gif); }
			#navMain #navMainLI22  a { background-image: url(../img/nav/gazebos.gif); }
			#navMain #navMainLI220 a { background-image: url(../img/nav/gallery1.gif); }
			#navMain #navMainLI221 a { background-image: url(../img/nav/gallery2.gif); }
			#navMain #navMainLI222 a { background-image: url(../img/nav/gallery3.gif); }			
			#navMain #navMainLI223 a { background-image: url(../img/nav/gallery4.gif); }
			#navMain #navMainLI224 a { background-image: url(../img/nav/gallery5.gif); }
			#navMain #navMainLI3   a { background-image: url(../img/nav/trexGold.gif); }
			#navMain #navMainLI4   a { background-image: url(../img/nav/designIdeas.gif); }
			#navMain #navMainLI40  a { background-image: url(../img/nav/decks.gif); }
			#navMain #navMainLI41  a { background-image: url(../img/nav/porches.gif); }
			#navMain #navMainLI42  a { background-image: url(../img/nav/gazebos.gif); }
			#navMain #navMainLI5   a { background-image: url(../img/nav/materialChoices.gif); }
			#navMain #navMainLI50  a { background-image: url(../img/nav/treated.gif); }
			#navMain #navMainLI51  a { background-image: url(../img/nav/composites.gif); }
			#navMain #navMainLI6   a { background-image: url(../img/nav/contactUs.gif); }
			
			/*
			 * @note	turn on level 1 nav with the right body class.
			 */
			#navMain a.on { background-position: 0 0 !important; }
		
		/*
		 * @note	level 2
		 */
			#navMain ul ul {
				position: absolute;
				top: 165px;
				left: -33px;
				width: 250px;
			}
				
			#navMain li li {
				float: left;
				margin-left: 1px;
			}
				#navMainLI20,
				#navMainLI20 a {
					width: 68px !important;
				}
					#navMainLI200,
					#navMainLI200 a,
					#navMainLI201,
					#navMainLI201 a,
					#navMainLI202,
					#navMainLI202 a,
					#navMainLI203,
					#navMainLI203 a,
					#navMainLI204,
					#navMainLI204 a,
					#navMainLI205,
					#navMainLI205 a,
					#navMainLI206,
					#navMainLI206 a,
					#navMainLI207,
					#navMainLI207 a,
					#navMainLI208,
					#navMainLI208 a {
						width: 68px !important;
					}
				#navMainLI21,
				#navMainLI21 a {
					width: 73px !important;
				}
					#navMainLI210,
					#navMainLI210 a,
					#navMainLI211,
					#navMainLI211 a,
					#navMainLI212,
					#navMainLI212 a {
						width: 68px !important;
					}
				#navMainLI22,
				#navMainLI22 a {
					width: 80px !important;
				}
					#navMainLI220,
					#navMainLI220 a,
					#navMainLI221,
					#navMainLI221 a,
					#navMainLI222,
					#navMainLI222 a
					#navMainLI223,
					#navMainLI223 a
					#navMainLI224,
					#navMainLI224 a {
						width: 68px !important;
					}
				
				#navMainLI40,
				#navMainLI40 a {
					width: 68px !important;
				}
				#navMainLI41,
				#navMainLI41 a {
					width: 73px !important;
				}
				#navMainLI42,
				#navMainLI42 a {
					width: 80px !important;
				}
				
				#navMainLI50,
				#navMainLI50 a {
					width: 126px !important;
				}
				#navMainLI51,
				#navMainLI51 a {
					width: 105px !important;
				}

			#navMain ul ul ul {
				position: absolute;
				top: 256px;
				left: 14px;
				width: 250px;
			}
			
	#content {
		padding: 0 0 0 73px;
	}
		body.sectionHome #content {
			position: relative;
		}
		#content #contentHomePhotos {
			position: absolute;
			top: 0;
			left: -5px;
			z-index: 1001;
		}
		#content #contentHomePhotosMore {
			position: absolute;
			top: 210px;
			left: 67px;
			z-index: 1002;
		}
		#content #contentHomeText {
			position: absolute;
			top: 270px;
			left: 277px;
			z-index: 1003;
		}
		#content #contentHomeTrex {
			position: absolute;
			top: 210px;
			left: 552px;
			z-index: 1004;
			height: 159px;
			width: 159px;
		}
	
		#contentGalleryList {
			width: 205px;
			position: absolute;
			top: 268px;
			left: 532px;
		}
			#contentGalleryList li {
				float: left;
				height: 63px;
				width: 63px;
				background: url(../img/bgGalleryThumb.gif) top left no-repeat;
				padding: 2px;
				margin: 0 1px 1px 0;
				position: relative;
			}
	
			#contentGalleryList a {
				cursor: pointer;
			}
				#contentGalleryList span {
					position: absolute;
					height: 63px;
					width: 63px;
					background: url(../img/galleryOn.png) top left no-repeat;
				}
	
		#contentGallery {
			margin-left: -55px;
			width: 505px;
			
			
			float: left;
		}
			#contentGalleryPhoto {
				height: 377px;
				width: 490px;
				background: url(../img/bgGalleryPhoto.png) top left no-repeat;
				padding: 16px 0 0 15px;
			}
			#contentGalleryNav {
				height: 16px;
			}
				#contentGalleryNav ul {
				     text-align: center;
				}
				#contentGalleryNav li {
					display: inline;
					margin: 0 3px 0 0;
				}
				#contentGalleryNav li a {
					cursor: pointer;
				}
				#contentGalleryNav li a {
					display: inline-block;
					text-decoration: none;
					width: 26px;
					height: 16px;
					background: url(../img/bgGalleryStep.gif) top left no-repeat;
				}
				#contentGalleryNav li a.on {
					background-position: 0 -17px;
				}
				#contentGalleryNav #galleryLIprev a {
					width: 50px;
					background: url(../img/bgGalleryPrevious.gif) top left no-repeat;
					cursor: pointer;
				}
				#contentGalleryNav #galleryLInext a {
					width: 50px;
					background: url(../img/bgGalleryNext.gif) top left no-repeat;
					cursor: pointer;
				}
			#contentGalleryDescription {
				margin: 25px 0 0 0;
				clear: both;
				background: url(../img/bgGalleryDescription.png);
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				padding: 5px 10px;
				color: #640a11;
			}
				#contentGalleryDescription h1 {
					font: bold 14px/18px Arial, Helvetica, sans-serif;
				}
				#contentGalleryDescription p {
					font: normal 12px/18px Arial, Helvetica, sans-serif;
				}
	
		
		#contentMain {
			color: #640a11;
			font: 12px/16px Arial, Helvetica, sans-serif;
			float: left;
			width: 425px;
			margin-right: 25px;
			
		}
		
		#contentMain p.textD {height: 200px;}
		
			#contentMain div.callout {
				float: right;
				margin-right: -261px;
				width: 236px;
				text-align: center;
				padding: 0 0 20px 0;
				height: 210px;
			}
				* html #contentMain div.callout {
					position: relative;
				}
		
			#contentMain h1 {
				width: 100%;
				height: 16px;
				font: normal 12px/12px Arial, Helvetica, sans-serif;
				margin: 0 0 20px 0;
				clear: both;
			}
				.sectionAboutUs #contentMain h1 {
					background: url(../img/titles/cherokeeConstruction.gif) top left no-repeat;
					text-indent: -9999px;
				}
				.sectionOurExpertise #contentMain h1 {
					background: url(../img/titles/cherokeeConstructionExpertise.gif) top left no-repeat;
					text-indent: -9999px;
				}
				.sectionTrexGold #contentMain h1 {
					background: url(../img/titles/trexGold.gif) top left no-repeat;
					text-indent: -9999px;
				}
				.sectionDesignIdeas #contentMain h1 {
					background: url(../img/titles/designIdeas.gif) top left no-repeat;
					text-indent: -9999px;
				}
				.sectionContactUs #contentMain h1 {
					background: url(../img/titles/contactUs.gif) top left no-repeat;
					text-indent: -9999px;
				}
				.sectionMaterialChoicesLumber #contentMain h1 {
					background: url(../img/titles/treatedLumber.gif) top left no-repeat;
					text-indent: -9999px;
				}
				.sectionMaterialChoicesComposites #contentMain h1 {
					background: url(../img/titles/compositeDecking.gif) top left no-repeat;
					text-indent: -9999px;
				}
			
			#contentMain h2 {
				font: bold 14px/14px Arial, Helvetica, sans-serif;
				clear: both;
			}
			#contentMain p {
				margin: 0 0 32px 0;
			}
			#contentMain a {
				color: #640a11;
				font-weight: bold;
			}
			#contentMain strong {
				font-weight: bold;
			}
			
			#contentMain div.hr {
				height: 1px;
				font-size: 1px;
				line-height: 1px;
				border-bottom: 1px dotted #640a11;
				clear: both;
				margin: 20px -253px 20px 0;
			}
				#contentMain div.hr hr {
					display: none;
				}
		
		#contentRelated {
			color: #640a11;
			font: 11px/16px Arial, Helvetica, sans-serif;
			float: left;
			width: 210px;
			padding: 32px 0 0 0;
		}
			.gallery #contentRelated {
				padding-top: 320px;
			}
			
			#contentRelated h2 {
				font: bold 12px/12px Arial, Helvetica, sans-serif;
			}
			#contentRelated div.testimonial {
				padding: 20px 0 15px 30px;
				border-bottom: 1px dotted #640a11;
				background: url(../img/bgTestimonial.gif) 0 20px no-repeat;
			}
				#contentRelated div.last {
					border-bottom: 0;
				}
			#contentRelated div.testimonial p {
				padding: 0 0 5px 0;
			}
			#contentRelated div.trex p {
				text-align: center;
			}
	
	#siteinfo {
		clear: both;
		height: 108px;
		position: absolute;
		top: 855px;
		left: 0;
		width: 745px;
		padding: 0 20px;
	}
		#siteinfo #siteinfoTrex {
			height: 108px;
			width: 108px;
			position: absolute;
			top: 0;
			right: 35px;
		}
	
		.sectionTrexGold #siteinfo {
			background-image: none;
		}
		.sectionTermsOfUse                #siteinfo,
		.sectionDesignIdeas               #siteinfo,
		.sectionMaterialChoicesLumber     #siteinfo,
		.sectionMaterialChoicesComposites #siteinfo {
			top: 1141px;
		}
		.sectionHome #siteinfo {
			top: 668px;
			background: none;
		}
		
		#siteinfoLinks {
			padding: 73px 0 0 0;
			text-align: center;
		}
			#siteinfoLinks li {
				display: inline;
				border-left: 1px solid #4e070d;
				padding: 0 3px 0 9px;
			}
				#siteinfoLinks li:first-child {
					border: 0;
				}
			#siteinfoLinks a {
				color: #4e070d;
				font: bold 12px/12px Arial, Helvetica, sans-serif;
				text-decoration: none;
			}
				#siteinfoLinks a:hover {
					text-decoration: underline;
				}
		
		#siteinfoLegal {
			clear: both;
			color: #533211;
			font: bold 12px/12px Arial, Helvetica, sans-serif;
			text-align: center;
			padding: 5px 0 0 0;
		}
}



@media print {

}