/*Simple CSS reset for items we will use JUST for this example.
Please use full reset when designing!
Reseting the margin and padding is important for the body tag so the
header and footer will hug the whole screen.*/

h1, p, body, html {
	margin:0;
	padding:0;}

/*Just visual styles*/
body {
	background-image:url(pics/new_background.jpg);
	background-repeat: repeat-y;
	background-position: center;
	font:12px verdana, sans-serif;
	color:#333;
	}

/*Our full length header.
We align the text center so it shows up in the middle.
If you prefer you could right or left align it.*/	
#headerbg {
	background:#fff;
	text-align:center;
	padding:0 0 0 0;
	}
#nav {
	text-align:left;
	background:#34ad48;
	padding:10px;
	background-image:url(pics/nav_background.jpg);
	background-repeat: no-repeat;
	}
#nav_container {
	position:relative;
	margin:0 auto;
	width:800px;
	}
#nav ul {  
 list-style: none;  
 margin: 0;  
 padding: 0;  
 padding-top: 0em;  
}
#nav li {  
 display: inline; 
}
#nav a:link, #nav a:visited {  
 padding: 0.2em 1em 0.2em 1em;  
 color: #FFFFFF;   
 text-decoration: none;  
 border-right: 1px solid #fff;  
}  
#nav a:hover {  
 color: #eee;   
}
/*Center Content*/	
#container {
	position:relative;
	margin:0 auto;
	width:800px;
	}

/*Full width footer*/
#footer {
	background:#000;
	height: 200px;
	padding: 10px 10px 10px 10px;
	color:#FFF;
	font-size: 11px;
	line-height: 14px;
	}
#footer_container {
	text-align:left;
	position:relative;
	margin:0 auto;
	width:800px;
	}
	
.indent{
text-indent: 425px;
}

/*These are just styles used for the example for the content.*/	
.left {
	float:left;
	width:500px;
	background:#ccff66;
	margin: 5px 5px 0 0;
	}

.right {
	float:left;
	width:150px;
	height: 177px;
	clear:right;
	background-image:url(pics/services_background.jpg);
	line-height: 14px;
	color: #fff;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	}

/*If you are going to use floats then you will NEED to clear the
footer so it doesn't bunch the content up*/
.clear {clear:both;}

#main_copy{
float:left;
width:300px;
height:inherit;
padding: 0px 10px 0px 0px;
background-color:#fff;
border-right: 1px solid #ccc;
margin: 5px 0 5px 0;
line-height: 16px;
}
#latest_news{
float:left;
width: 175px;
height: 220px;
padding: 0px 10px 0px 10px;
background-color: #fff;
border-right: 0px solid #333;
margin: 5px 0 30px 0;
line-height: 16px;
}
#testimonials{
float:left;
width:150px;
height: 280px;
padding: 0px 10px 10px 20px;
background-color: #e7e7e7;
margin: 5px 0 30px 0;
}
#logos{
float:left;
width: 366px;
height: 61px;
padding: 10px 0 0 0;
margin: 10px 10px 10px 10px;
border-top: 1px solid #ccc;
}
.h2{
font-family:Arial, Helvetica, sans serif;
font-style: italic;
font-size: 18px;
line-height: 20px;
color: #0c673b;
}
#hr {
height: 0;
border-width: 1px 0 0 0;
border-style: solid;
border-color: #ccc;
}
a:focus { -moz-outline-style: none; }/*this avoids having image replacement sections display a dotted outline*/