/* -----------------------------------------
Stylesheet for Echo Hill - www.echohilltownhouses.com
Author: cdeVision.com
Copyright: (c)2009 cdeVision
Created: June 2009
-------------------------------------------- */

body {background:#333; margin:0; font-family:arial,helvetica,sans-serif; font-size:14px; color:#333;}
body {text-align:center;} /* IE6- hack to center page contents */

h1, h2, h3 {padding:0; margin:0;} 
h1 {font:normal 22px arial,helvetica,sans-serif; color:#000; padding:0 0 10px 0;} /* page titles */
/* sub-titles */
h2 {font:normal 18px arial,helvetica,sans-serif; color:#316099; padding:0 0 10px 0; margin:0;}
/* mid-content area titles */
h3 {font:bold 13px arial,helvetica,sans-serif; color:#036; padding:0 0 10px 0; margin:0; text-transform:uppercase;}

p {margin:0; padding:0 0 16px 0; line-height:19px;}
ul, ol {padding:0; margin:0 0 16px 30px;}
li {line-height:18px; padding:0 0 4px 0; }
ul.nobullets {margin:0; padding-bottom:6px; list-style:none;}

div.rule {height:1px; padding:0; margin:8px auto; color:#4D4D45; background-color:#4D4D45;}
img {border:0;}
label {display:none;}
.clearfloats {clear:both; line-height:0px; height:0px; font-size:0px;}
.skiplink {display:none;}


/* ---- links ----------------------------------------- */
a {color:#036; text-decoration:none;}  
a:visited {color:#036;}
a:hover {color:#333; text-decoration:underline;}
a:active {color:#036;}
a:active, a:focus {outline:none;}
#content a {font-weight:bold;}

a.arrow {padding:0 12px 0 0; background:url(images/arrow-blue.png) 100% 4px no-repeat;}
	a.arrow:hover {background:url(images/arrow-grey.png) 100% 4px no-repeat;}
	
	
/* ---- forms ----------------------------------------- */
form {margin:0;}
input, textarea {font:normal 11px arial,sans-serif; color:#666; background:#f4f4f4; padding:3px; margin:0 0 6px 0;}
input {border:1px solid #ccc; width:250px;}
textarea {border:1px solid #ccc; width:250px; height:50px;}
input.button {background-color:#333; color:#fff; width:90px; border:1px solid #ccc;}
input.nostyle {width:auto;}
p.error {padding:0 0 8px 0; color:#de0000; font-size:11px;} /* for contact form */



/* ---- ids & classes ----------------------------------------- */
/* "wrap" IDs are to stretch colors & backgrounds to 100% width */
#headerwrap, #navmenuwrap, #topcontentwrap, #midcontentwrap, #footerwrap {width:100%;}
#header, #navmenu, #topcontent, #footer {width:895px; margin:0 auto; text-align:left;}

/* Header area --- */
#headerwrap {background:#32619A; border-top:4px solid #B2C0D1;}
#header {height:110px; position:relative; color:#fff;}
	#logo {position:absolute; top:32px; left:12px; width:169px; height:54px; background:url(images/logo.png) no-repeat;}
		#logo h1 {padding:0; margin:0; text-indent:-4000px;}
		#logo a {display:block; width:169px; height:54px;}
	#tagline {position:absolute; top:73px; left:197px; width:251px; height:17px; background:url(images/tagline.png) no-repeat;}
		#tagline h2 {padding:0; margin:0; text-indent:-4000px;}
	#call {position:absolute; top:69px; right:8px; width:237px; height:21px; background:url(images/call.png) no-repeat;} 
		#call p {padding:0; margin:0; text-indent:-4000px;}

#navmenuwrap {background:#333; border-bottom:1px solid #ccc; height:35px;}
#navmenu {text-transform:uppercase; position:relative;}
	#navmenu ul {list-style:none; font-size:13px; font-weight:bold; height:30px; margin:0; position:absolute; left:0; top:6px;}
	#navmenu li {display:block; float:left; line-height:30px; padding:0;}
	#navmenu a {display:block; color:#fff; text-decoration:none; height:30px; line-height:30px; padding:0 10px; margin:0 18px 0 0;}
	#navmenu a:hover  {color:#477AB4;}
	#navmenu a.on {background:white; color:#333;}

#topcontentwrap {background:#fff url(images/bg-topcontent.png) center bottom repeat-x;}
#topcontent {padding:25px 0 15px;}
	#topcontent img {margin:0; display:block; border:1px solid #ccc;}
	#imagearea {float:left; width:575px; margin-bottom:12px;}
	#slideshowarea {border:1px solid #ccc; margin-bottom:12px; float:left; background:transparent;}
	#googlemap {float:left; width:575px; border:1px solid #ccc; margin-bottom:12px;}
	#textarea {float:right; background:transparent; width:295px;}
		a#bannercontact {background:transparent url(images/banner-contact.png) no-repeat;}
		a#bannerdidyouknow {background:transparent url(images/banner-didyouknow.png) no-repeat;}
		a#bannerplans {background:transparent url(images/banner-plans.png) no-repeat;}
			a#bannercontact, a#bannerplans, a#bannerdidyouknow {display:block; width:295px; height:90px; margin-bottom:12px;}
			a#bannerplans h3, a#bannerplans p, a#bannercontact h3, a#bannercontact p, a#bannerdidyouknow h3, a#bannerdidyouknow p {display:none;}
			a#bannerplans:hover, a#bannercontact:hover, a#bannerdidyouknow:hover {filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; -khtml-opacity:0.5;}

#midcontentwrap {background:#ebe8cf; border-top:1px solid #ccc; padding:20px 0;}
#midcontentwrap h2#mid {margin:0 auto; width:895px !important; text-align:left; font:bold 14px arial,helvetica,sans-serif; color:#333; padding:0 0 10px 0;}
#midcontent {margin:0 auto 0; width:895px; text-align:left; background: url(images/bg-midcontent.gif) repeat-y;}
	#midcontent p {font-size:12px; line-height:17px; padding:0 0 8px 0;}
	.column {width:270px; float:left; padding:8px 0 0 0;}
		.column img {display:block; border:1px solid #ccc; margin:0 0 10px 0;}
	.left {margin-right:41px;}
	.middle {margin-right:42px;}
		.box {width:270px; margin:0 0 25px 0;}
		.box p {line-height:15px !important; padding:0 0 6px 0 !important; font-size:11px !important;}
		.box img {width:75px; float:left; margin:0 15px 0 0 !important;}
		.box .text {width:178px; float:left; background:transparent;}
		.box h3 {padding-bottom:5px !important; text-transform:none !important;}
		
		.box2 {width:270px; margin:0 0 25px 0;}
		.box2 p {line-height:15px !important; padding:0 0 6px 0 !important; font-size:11px !important;}
		.box2 img {width:75px; float:left; margin:0 15px 0 0 !important;}
		.box2 .text {width:260px; float:left; background:transparent;}
		.box2 h3 {padding-bottom:5px !important; text-transform:none !important;}

#footerwrap {border-top:1px solid #ccc;}
#footer {padding:15px 0; color:#B8B8B8; font-size:11px; position:relative;}
	#footer p {padding:0 0 8px 0;}
	#footer a {color:#B8B8B8; text-decoration:underline;}
	#footer span {margin:0 4px;}
	#footer a:hover {text-decoration:none;}
	p#props, p#props a {color:#757575;}
	div#eho {position:absolute; top:14px; right:65px; width:29px; height:20px; background:url(images/eho.png) no-repeat;}
		div#eho p {text-indent:-4000px;}
		div#eho a {width:29px; height:20px; display:block;}
	#mediaicons {position:absolute; right:2px; top:6px; width:90px; height:20px; z-index:10;}
		#mediaicons span {display:none;}
		#mediaicons a {float:right; width:20px; height:20px; margin:8px 0 0 12px; text-decoration:none;}
		#mediaicons a.facebook {background:transparent url(images/facebook.png) 0 0 no-repeat;}
		#mediaicons a.twitter {background:transparent url(images/twitter.png) 0 0 no-repeat;}
