/** 
	This file contains the sizes and positions of the grid elements that compose the layout of 
	the website's homepage. 
	
	The general grid is made with blueprint and it is available with the span-x clases, where x
	is the number of columns the element will span on.
	
	Tired, so tired.
	
*/

body {
	background-color: #704E32;
}

/****************************************** HOMEPAGE **********************************************/

#headerHome {
	/* instead of using a useless HTML element, use header for useless imagery */
	/*	background-image: url(../images/index/flash.html); */
	background-position: bottom center;
	background-repeat: no-repeat;
}

#logo {
	height:50px;
	/* hide text from HTML */
	text-indent:-2000px; 
	/* Add the logo in place of the HTML text */
	background-image: url(../images/logoTop.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	
}

#topNavHome li, #sideNavHome li {
	float:left;
	list-style-type: none;
}

#topNavHome {
	height:30px;
}

#topNavHome li a {
	/* make the links clickable area fit the menu button */
	display:block;
	height:30px;
	/* hide the text inside the links */
	text-indent:-2000px; 
}

/** START MAIN NAV MENU ITEMS **/
.tnl1, .tnl2, .tnl3, .tnl4, .tnl5, .tnl6, .tnl7, .tnl8 {
	background-position: center center;
	background-repeat: no-repeat;
}
.tnl1 {background-image: url(../images/navigation/tnl1.jpg); width:90px;}
.tnl2 {background-image: url(../images/navigation/tnl2.jpg); width:90px;}
.tnl3 {background-image: url(../images/navigation/tnl3.jpg); width:90px;}
.tnl4 {background-image: url(../images/navigation/tnl4.jpg); width:90px;}
.tnl5 {background-image: url(../images/navigation/tnl5.jpg); width:110px;}
.tnl6 {background-image: url(../images/navigation/tnl6.jpg); width:210px;}
.tnl7 {background-image: url(../images/navigation/tnl7.jpg); width:110px;}
.tnl8 {background-image: url(../images/navigation/tnl8.jpg); width:110px;}
/** END MAIN NAV MENU ITEMS **/


#sideNavHome {
	height:95px;
	position: relative;
	left:0px;
}

#sideNavHome li a {
	/* make the links clickable area fit the menu button */
	display:block;
	height:95px;
	/* hide the text inside the links */
	text-indent:-2000px; 
}

/** START SIDE NAV MENU ITEMS **/
.snl1, .snl2, .snl3 {
	background-position: center center;
	background-repeat: no-repeat;
}
.snl1 {background-image: url(../images/navigation/snl1.jpg); width:315px;}
.snl2 {background-image: url(../images/navigation/snl2.jpg); width:315px;}
.snl3 {background-image: url(../images/navigation/snl3.jpg); width:315px;}
/** END MAIN NAV MENU ITEMS **/

/* main content decorations */
#mainHome {
	background-image: url(../images/mainHomeBackground.jpg);
	color: white;
	font-family: Verdana, "MS Trebuchet", sans-serif;
	position: relative;
	left:2px;
}

.leftColHome {
	padding-top:30px;
	padding-left:30px;
	padding-right:50px;
}

.rightColHome {
	padding-top:30px;
	padding-right:30px;
}

/* main content heading style */
#mainHome h3 { /* heading in the left side */
	margin-bottom:0px;
	color: #d1b46f;
}

#mainHome h4 { /* heading in the right side */
	margin-bottom:25px;
	color: #D1B46F;
}

/* homepage footer formatting */
#footerHome {
	height:60px;
	background-color: #6B472C;
	margin-left:14px;
	margin-right:15px;
}

/* homepage footer text style */
#footerHome p {
	/* align horizontal and vertical in container */
	text-align:center;
	line-height:60px;
	font-family: Arial, Helvetica, sans-serif;
	color: #A67C52;
}

/**************************************** INNER PAGES *********************************************/

#mainInner {
	position:relative;
	top:-15px;
	/* FAUX COLUMNS - a thin line that repeats until it hits the footer */
	background-image: url(../images/innerColsBackground.jpg);
}

#leftColInner {
	height:500px;
	padding-top:330px;
	background-position: top center;
	background-repeat: no-repeat;
	position:relative;
	top:-5px;
}

/** DECORATIONS **/
.aboutUsDeco { background-image: url(../images/decorations/aboutUs.jpg); }
.deckingDeco { background-image: url(../images/decorations/decking.jpg); }
.screenDeco {	background-image: url(../images/decorations/screen.jpg); }
.carportsDeco { background-image: url(../images/decorations/carport.jpg); }
.ballustradesDeco {	background-image: url(../images/decorations/ballustrades.jpg); }
.pergolasDeco { background-image: url(../images/decorations/pergolas.jpg); }
.contactDeco {	background-image: url(../images/decorations/contact.jpg); }
/** END DECORATIONS **/

#sideNavInner {
	height:350px;
	position: relative;
	left:-20px;
}

#sideNavInner li {
	float:left;
	list-style-type: none;
	width:315px;
}

#sideNavInner li a {
	/* make the links clickable area fit the menu button */
	display:block;
	height:95px;
	/* hide the text inside the links */
	text-indent:-2000px; 
}

/** START SIDE NAV MENU ITEMS **/
.snlIn1, .snlIn2, .snlIn3, .snlIn4, .snlIn5 {
	background-position: center center;
	background-repeat: no-repeat;
	
}
/* for the inner pages the order doesnt corespond because we keep the images used on homepage  */
.snlIn1 {background-image: url(../images/navigation/snl1.jpg);}
.snlIn2 {background-image: url(../images/navigation/snl4.jpg);}
.snlIn3 {background-image: url(../images/navigation/snl5.jpg);}
.snlIn4 {background-image: url(../images/navigation/snl2.jpg);}
.snlIn5 {background-image: url(../images/navigation/snl3.jpg);}
/** END MAIN NAV MENU ITEMS **/

#rightColInner {
	font-family: Verdana, "MS Trebuchet", sans-serif;
	color:#FFFFCC;
	background-color: #BE7D36;
	position:relative;
	left:-10px;
}

.rightColInner {
	padding-top:40px;
	padding-left:25px;
	padding-right:10px;
}



/* hide the heading text */
#rightColInner h1 {
	text-indent:-2000px;
}

.heading {
	background-position: top center;
	background-repeat: no-repeat;
}

/** HEADINGS **/
/* the about page has a gradient background while the other pages have the wood texture */
.aboutRightColInner { background-image: url(../images/headings/aboutUs.jpg); }
.deckingRightColInner { background-image: url(../images/headings/decking.jpg); }
.screenRightColInner { background-image: url(../images/headings/screen.jpg); }
.carportsRightColInner { background-image: url(../images/headings/carports.jpg); }
.ballustradesRightColInner { background-image: url(../images/headings/ballustrades.jpg); }
.pergolasRightColInner { background-image: url(../images/headings/pergolas.jpg); }
.contactRightColInner { background-image: url(../images/headings/contact.jpg); }
/** END HEADINGS **/

/* styling for images with captions */

.imageCaption {
	float:right;
	width:160px;
	margin-left:20px;
	margin-bottom: 0em;
}

table.imageCaption .caption {
	display:block;
	background-color: #BE7D36;
	font-size: 90%;
	font-family: Verdana, Arial, sans-serif;
	font-weight: bold;
	text-align: center; 
	color:#522D16;
	clear:both;
	width:170px;
}

table.imageCaption tr td img {
	border-style: solid;
	border-width: 4px;
	border-color: #855B33;
}

/* body content formatting */

.rightColInner img {
	float:left;
	margin-right:15px;
	margin-bottom:10px;
}

.rightColInner h4 {
	height:25px;
	float:none;
	clear:both;
	margin-bottom:10px;
	color: #7D481C;
	font-family: Arial, "MS Trebuchet", sans-serif;
	font-weight: bold;
	font-size: 130%;
	line-height:25px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #7D481C;
}

.testimonialName {
	display:block;
	clear:both;
	margin-top:30px;
	font-weight:bold;
}

.testimonialFunction {
	display:block;
	clear:both;
}

a {
	color:#1B0E02;
	font-style: normal;
}

blockquote {
	color:#1B0E02;
	font-style: normal;
}

.explanation {
	display:block;
	clear:both;
	color:#E8C55A;
	margin-top:20px;
}

ul.bodyList li {
	list-style-image: url(../images/plus.jpg);
}

.centerPic{
	display:block;
	float:none;
	text-align:center;
	position:relative;
	left:30px;
}

.groupTitle {
	font-family: Verdana, "MS Trebuchet", sans-serif;
	font-size:110%;
	font-weight:bold;
	color:#7D481C;
	margin-top:30px;
}

/** IMAGE GALLERY SETTINGS **/

ul.gallery {
	list-style-type: none;
}

ul.gallery li {
	float:left;
}

a.galleryImage {
	display: block;
	text-decoration: none;
}

a.galleryImage img {
	border: 1px solid #C78E17;
}

.galleryCaption {
	display:block;
	clear:both;
	color:#E8C55A;
	position: relative;
	top:-10px;
}

/** END IMAGE GALLERY SETTINGS **/


/** CONTACT FORM STYLES **/

#contactForm ul {
	margin-left:0px;
}

#contactForm ul li {
	list-style-type: none;
	display:block;
	width:290px;
	height:30px;
}

#contactForm ul li label {
	display:block;
	width:290px;
	font-weight: normal;
	font-style: normal;
}

#contactForm ul li label input {
	width:190px;
	height:17px;
	float:right;
	position:relative;
	top:-20px;

	background-color: #D8B186;
	border: 1px solid #FFFFCC;

}

#contactForm ul li label textarea {
	width:180px;
	height:105px;
	float:right;
	position:relative;
	top:-27px;

	background-color: #D8B186;
	border: 1px solid #FFFFCC;
}

/** this is a small fix for safari  windows **/
body:first-of-type	#contactForm ul li label input {
		top:0px;
	}
	
body:first-of-type	#contactForm ul li label textarea {
		top:-5px;
		width:183px;
	}
/** end fix for safari  windows **/

/* this class can be used on all input of type button on the orange background */
.button {
	background-image: url(../images/button.jpg);
	border:0px;
	margin:0px;
	padding:0px;
	width:52px;
	height:24px;
	color: #7D481C;
	font-family: Verdana, "MS Trebuchet", sans-serif;
	font-size:100%;
	font-weight:bold;
}

/* only the button of this form needs special positioning */
#contactForm input.button {
	position:relative;
	left: 95px;
	top: 80px;
}


/** END CONTACT FORM STYLES **/


/* inner footer formatting */
#footerInner {
	height:60px;
	margin-left:14px;
	margin-right:15px;
	background-image: url(../images/innerFooterBackground.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	position:relative;
	top:-15px;
	left:5px;
}

/* inner footer text style */
#footerInner p {
	/* align horizontal and vertical in container */
	text-align:center;
	text-indent:-5px;
	line-height:60px;
	font-family: Arial, Helvetica, sans-serif;
	color: #A67C52;
}