@charset "UTF-8";
body  {
	background:url(../images/bg-home.jpg) repeat-x center top; font-family:"Century Gothic", Arial, Helvetica; font-size:14px; color:#333333;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}

body.second { background:url(../images/bg-sec.jpg) repeat-x center top; }

#container { 
	width: 976px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
} 
#header { 
height:100px;
	padding: 0px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 
#header h1 {
	margin: 0; background:url(../images/logo.png) no-repeat; height:75px; width:424px; display:block; font-size:20px; margin-left:20px; text-indent:-9999px; 
	
}

#header h1 a { display:block; height:75px;}

#header .phone { float:right; background:url(../images/phone.png) no-repeat; width:301px; height:72px; padding-top:10px; text-indent:-9999px; }

#nav { height:95px;
	padding: 0px; background:url(../images/perfection.jpg) no-repeat right top; }
#nav ul { margin:0; padding:0;  }
#nav ul li { list-style:none; float:left; margin:39px 30px 30px 30px; }
#nav ul li a {   font-family:"Century Gothic", Arial, Helvetica; font-size:19px; color:#FFFFFF; text-transform:uppercase; text-decoration:none; }
#nav ul li a:hover { color:#4d9516; }


#phone { float:right; margin-top:40px; background:url(../images/phone.png) no-repeat; width:240px; height:60px; }


#hero { padding:0 0 49px 15px; }

#hero #grass {
	height: 98px;
	width: 951px;
	z-index: 100;
	position: absolute;
	top: 419px;
	text-align: right; padding-right:10px;
}

#sidebar1 {
	float: right; /* since this element is floated, a width must be given */
	width: 511px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	background: #f3f3f3 url(../images/green-blue.jpg) no-repeat 12px 0px; border-left:#e2e2e2 solid 1px; border-right:#e2e2e2 solid 1px; 
	padding: 15px 0px; margin-right:14px;
}

#sidebar2 {
	float: right; /* since this element is floated, a width must be given */
	width: 302px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	background: #f3f3f3 url(../images/bg-sidebar2.jpg) no-repeat; 
	padding: 15px 20px 0 26px; margin-right:14px;
}

#homeowners-home { margin:0 259px 0 0; padding:0 15px 0 30px; font-size:12px; line-height:18px;  }

#display-home { float:right; width:210px; padding:0 30px 0 7px; font-size:12px; line-height:18px; }
#homeowners-home h1, #display-home h1  { line-height:32px; font-size:22px; font-weight:bold; font-family:Georgia, "Times New Roman", Times, serif; text-shadow:#253c45 1px 1px; color:#FFFFFF; padding-bottom:10px; }

#mainContent { 
	margin: 0 507px 0 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
} 

#mainContent a { color:#009900; text-decoration:none; }
a { color:#009900; text-decoration:none; }

.second #mainContent { 
	margin: 0 357px 0 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
} 

.second #mainContent h1 { text-shadow:#ffffff 1px 1px; text-transform:uppercase; line-height:48px; color:#39351e; } 

#mainContent p { margin:20px 20px 10px 0; }

#mainContent ul { margin:0; padding:0; list-style:none;}

#mainContent ul li { line-height:31px; background:url(../images/bg-li.jpg) no-repeat; }
#mainContent ul li.odd { line-height:31px; background:url(../images/bg-li2.jpg) no-repeat; }

#mainContent ul li.odd a , #mainContent ul li a { padding:0 0 0 30px; text-decoration:none; color:#333333; font-weight:bold; display:block; height:32px;  }
#mainContent ul li a:hover {  background:url(../images/bg-li.jpg) 0px -32px no-repeat; color:#009933; }
#mainContent ul li.odd a:hover {  background:url(../images/bg-li2.jpg) 0px -32px no-repeat; color:#009933; }

#footer-container { margin:0 auto; background:url(../images/bg-footer.jpg) repeat-x; }

#footer { 
	padding: 10px 10px 60px 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	  margin:0 auto; width:936px; color:#FFFFFF; text-align:left; font-size:12px;
} 

#bottom-nav { margin:0; padding:0;  }
#bottom-nav ul { margin:0; padding:0; list-style:none; }
#bottom-nav li { list-style:none; float:left;  float:right; padding:0 10px; border-right:#696658 solid 1px; }
#footer a { color:#FFFFFF; text-decoration:none; }
#footer a:hover { text-decoration:underline; }


#bottom-grass { position:fixed; bottom:0px; width:100%; margin:0 auto; z-index:100; background: url(../images/bottom-grass-sml.png) repeat-x; height:13px; text-align:right; padding:40px 0px 0 0; font-size:12px; color:#FFFFFF; }

.twoColFixRtHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 5px 0 40px 0; font-size:12px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

#testimonial-btn  { background:url(../images/btn-testimonials.gif) no-repeat; width:200px; height:37px; text-align:center; font-size:16px; }
#displayhomes-btn { background:url(../images/btn-displayhomes.gif) no-repeat; width:200px; height:37px; text-align:center; font-size:16px; }
#testimonial-btn a , #displayhomes-btn a { line-height:37px; text-decoration:none; color:#FFFFFF; display:block; text-shadow:#253c45 1px 1px; }
#testimonial-btn a:hover , #displayhomes-btn a:hover { text-decoration:underline; }

img.top-image { padding:17px 0 0 14px; }
img.sml-thumbs { margin:30px 11px 0 2px; border:#ffffff solid 5px; }

#view-gallery {  height:56px; width:292px; line-height:56px; font-size:20px; font-weight:bold; text-align:center; margin:20px 0 0 0;  }
#view-gallery a { display:block; background:url(../images/bg-view-gallery.jpg); text-shadow:#ffffff 1px 1px; color:#39351e; text-decoration:none; }
#view-gallery a:hover { background-position:0px -56px; }

#sidebar2 ul { margin:20px 0 0 0; padding:0; list-style:none;}
#sidebar2 ul li  { line-height:31px; }
#sidebar2 ul li a { padding:0 0 0 30px; background:url(../images/bg-li3.jpg) no-repeat;  text-decoration:none; color:#333333; font-weight:bold; display:block; height:32px;  }
#sidebar2 ul li a:hover {  background:url(../images/bg-li3.jpg) 0px -32px no-repeat; color:#009933; }

#contact-form input.cat_textbox { padding:10px; margin: 0 0 0 20px; border:0; background:url(../images/bg-input.gif) no-repeat; width:390px; height:15px; font-size:12px; font-family:"Century Gothic", Arial, Helvetica; }
#contact-form textarea { padding:10px; margin: 0 0 0 20px; border:0; background:url(../images/bg-textarea.gif) no-repeat; width:390px; height:133px; font-size:12px; font-family:"Century Gothic", Arial, Helvetica; }
#contact-form input.button { width:115px; height:37px; background:url(../images/send.gif); border:0; margin-left:20px; }

input.checkbox { margin:0 20px 0 20px; }
#clip-board { background: url(/images/bg-clipboard.jpg) no-repeat 0px 20px; }