@charset "UTF-8";
/* CSS Document */

*{
	margin:0px;
	padding:0px;
}

html{
	background:url(images/bg-html.jpg);
}

body{
	background:url(images/body-bg.png) top center no-repeat;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}

a{
	outline:none;
}

body#residential, body#commercial, body#about{
	background:url(images/body-bg-alt.png) top center no-repeat;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}

h1 span, h2 span{
	display:none;
}

a:link, a:visited{
	color:#1276b7;
	text-decoration:underline;
}

a:active, a:hover{
	color:#1276b7;
	text-decoration:none;
}

.clear{
	clear:both;
}

#container{
	width:1024px;
	margin:0px auto;
	padding-bottom:300px;
}

body#residential #container{
	width:1024px;
	margin:0px auto;
	padding-bottom:10px;
}

#pencil{
	background:url(images/pencil.png) 490px 0px no-repeat;
	width:1124px;
	height:240px;
	position:absolute;
	z-index:20;
	top:-58px;
}

#logo-link{
	background:url(images/biz-cards-alt.png) no-repeat;
	display:block;
	width:460px;
	height:302px;
	float:left;
}

#nav{
	background:url(images/nav.jpg) no-repeat;
	width:545px;
	height:53px;
	float:left;
	margin-top:188px;
}

#nav li span { display: none; }

#nav li {
	position:relative;
	float:left;
	list-style:none;
	}

#nav li, #nav a { 
	height:53px;			/* Each button must have the same height, define it here */
	display:block;
	}

#nav-01 {width:75px; } 
#nav-02 {width:128px; } 
#nav-03 {width:145px; } 
#nav-04 {width:77px; } 
#nav-05 {width:114px; }

#nav-01 a:hover { background:url("images/nav.jpg") 0px -53px no-repeat;  }
#nav-02 a:hover { background:url("images/nav.jpg") -75px -53px no-repeat; }
#nav-03 a:hover { background:url("images/nav.jpg") -203px -53px no-repeat; }
#nav-04 a:hover { background:url("images/nav.jpg") -348px -53px no-repeat;}
#nav-05 a:hover { background:url("images/nav.jpg") -425px -53px no-repeat; }

/*-------------- OPTIONAL - Keeps the hover state on each page based on body #id ------------- */


body#index #nav-01 { background:url("images/nav.jpg") -0px  -53px no-repeat; }
body#commercial #nav-02 { background:url("images/nav.jpg") -75px  -53px no-repeat; }
body#residential #nav-03 { background:url("images/nav.jpg") -203px  -53px no-repeat; }
body#about #nav-04 { background:url("images/nav.jpg") -348px  -53px no-repeat; }
body#contact #nav-05 { background:url("images/nav.jpg") -425px  -53px no-repeat; }

#content{
	width:792px;
	margin-left:206px;
}

body#residential #content{
	width:1024px;
	margin-left:0px;
	background:url(images/content-bg.png) repeat-y;
}

.residential-p{
	width:370px;
}

body#commercial #content, body#about #content{
	width:1024px;
	margin-left:0px;
	background:url(images/content-bg.png) repeat-y;
}
	
	#screw-driver{
		background:url(images/screw-driver.png) no-repeat;
		width:195px;
		height:723px;
		position:absolute;
		z-index:20;
	}
	
	#level{
		background:url(images/level-ko-smaller.png) no-repeat;
		width:231px;
		height:917px;
		position:absolute;
		z-index:20;
	}
	
	#razor-knife{
		background:url(images/razor-knife.png) no-repeat;
		width:225px;
		height:571px;
		position:absolute;
		z-index:20;
	}
	
	#pliers{
		background:url(images/pliers.png) no-repeat;
		width:577px;
		height:576px;
		position:relative;
		top:-590px;
		left:420px;
		z-index:20;
	}

	#content p{
		margin:0px 0px 20px 0px;
		line-height:22px;
	}
	
	#content img.beforeafter{
		display:block;
		margin:0px auto;
	}
	
	body#residential #content p{
		margin:0px 0px 20px 52px;
		line-height:22px;
	}
	
	body#commercial #content p, body#about #content p{
		margin:0px 20px 20px 230px;
		line-height:22px;
	}
	
	#content ul{
		margin:0px 0px 15px 0px;
	}
	
		#content li{
			margin:0px 0px 5px 15px;
		}
		
		#content li ul{
			margin:5px 0px 5px 10px; 
		}
	
	body#residential #content ul{
		margin:0px 0px 15px 52px;
	}
	
		body#residential #content li{
			margin:0px 0px 5px 15px;
		}
		
		body#residential #content li ul{
			margin:5px 0px 5px 10px; 
		}
		
	body#commercial #content ul, body#about #content ul{
		margin:0px 0px 15px 230px;
	}
	
		body#commercial #content li, body#about #content li{
			margin:0px 0px 5px 15px;
		}
		
		body#commercial #content li ul, body#about #content li ul{
			margin:5px 0px 5px 10px; 
		}
		
	
	#we-build-green{
		float:right;
		margin:0px 0px 0px 15px;
	}
	
	#we-build-green-alt{
		float:right;
		margin:0px 20px 0px 15px;
	}

h2#index-heading{
	background:url(images/home-page-heading.jpg) no-repeat;
	width:420px;
	height:75px;
}

h2#residential-heading{
	background:url(images/residential-heading.jpg) no-repeat;
	width:420px;
	height:75px;
	margin-left:56px;
}

h2#commercial-heading{
	background:url(images/commercial-heading.jpg) no-repeat;
	width:420px;
	height:75px;
	margin-left:230px;
}

h2#about-heading{
	background:url(images/about-heading.jpg) no-repeat;
	width:420px;
	height:75px;
	margin-left:230px;
}

#footer-home{
	width:404px;
	margin:340px 0px 0px 222px;
}

#footer-residential{
	background:url(images/footer.png) no-repeat;
	width:1024px;
	height:297px;
	margin-top:-576px;
	padding-top:128px;
}

#footer-commercial{
	background:url(images/footer.png) no-repeat;
	width:1024px;
	height:169px;
	padding-top:128px;
	margin-top:-20px;
}

#footer-residential p, #footer-commercial p{
	margin-left:226px;
}