/* 	CSS
	Author: Paul Vee Design
	Version: 1.0
	Revision: 2011/3/7
	Description: This theme is designed specifically for The Surrealtors (http://www.thesurrealtors.com).
*/

body{ background: #fff url('../images/bg.jpg') repeat-x 0 0; font-family:  Arial, sans; color: #fff;}

*{ margin: 0; padding: 0;}

a:active, a:visited {outline: none;}

a:focus{-moz-outline-style: none;}

/*** Clearfix ***/
.clearfix:after 	{content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix 			{display: inline-block;}
* html .clearfix 	{height: 1%;}
*+html .clearfix 	{height: 1%;}
.clearfix 			{display: block; clear:both; height:0;}	

/*---------- OPEN HOUSE BANNER ---------------------------------------------------------------------*/

#openHouse{ width: 226px; height: 240px; position: absolute; z-index: 9; top: 0px; background: url('../images/openHouse.png') no-repeat 0 0;}
#openHouse #openHouseText{ margin: 45px 0 0 5px;}
#openHouse p{ font: 12px Arial, sans; color: #000; margin: 0px 0;}
#openHouse #address{ font-size: 17px; font-style: italic; font-weight: 900;}
#openHouse #location{ font-size: 15px; font-style: italic;}
#openHouse p#date, #openHouse p#time{ margin: 5px 0 0 0;}
#openHouse p#quote{ width: 100px; font-style: italic; color: #f00; font-weight: 900; margin: 8px 0 0 0px;}
/*--------------------------------------------------------------------------------------------------*/

#wrapper{ width: 960px; height: auto; background: url('../images/midBgB.jpg') repeat-x 0 0; margin: 0 auto;}

#top{ width: 960px; height: 114px; background: url('../images/topBgB.png') repeat-x 0 0; margin: 0 auto;}
#top h1{ font-size:1px; text-indent: -9999px;}
#top #logo1{ display: block; width: 211px; height: 92px; background: url('../images/logo.png') no-repeat 0 0; border: none; float: left;  margin: 5px 0 0 10px;}
#top a#logoLink{ display: block; width: 211px; height: 92px;}
#top #topHeader{ width: 490px; float: right; margin: 10px 80px 0 0; background: url('../images/headerBg.png') no-repeat 20px 0; }
#top p{  font: 20px Century Gothic, sans-serif; font-style: italic; text-align: center;}

  /* NAV 
----------------------------------------------------------------------------------------------------*/
  #nav				{ background: url('../images/navBg.gif') 0 0; height: 33px; float: right; margin: 60px 10px 0 0;}
  #nav ul				{ margin:0; list-style-position:outside; background: url('../images/navBg.gif') 0 0; list-style:none; float: right;}
  #nav ul li			{ display:block; float:left; margin:0; padding:0; position:relative;}
  #nav ul li a		{ color: #000; display:block; font-size: 14px; font-family:  arial, verdana, sans-serif; font-weight:300; height:32px; line-height:32px;  text-decoration:none; padding:0; text-align:center; white-space:nowrap; text-shadow: 0px 1px 2px #333;}
  #nav ul li a:hover,
  #nav ul li.active a	{ color:#fff; padding-top: 1px;}
/*--------------------------------------------------------------------------------------------------*/

/*---- ADDRESS ----*/
#title{ position: relative; top:0; float: left; margin: 70px 0 0 0px; }
#title span#number{ position: absolute; font: 84px Arial, sans; color: #fff; font-weight: 900; float: left; margin: 0 0 0 35px;text-shadow: 0px 2px 1px #666;}
#title span#address1{ position: absolute; top: 5px;  font: 46px Arial, sans; color: #666; margin: 0 0 0 150px;}
#title span#address2{ position: absolute; top: 45px; font: 40px Arial, sans; color: #999; margin: 0 0 0 150px;}
/*--------------------------------------------------------------------------------------------------*/

#slide{ width: 520px; height: 320px; background-color: #000; border: 4px solid #fff; margin: 20px 20px 0 0; float: right;}

#tourBtn{ position: absolute;  display: block; width: 260px; height: 58px; background:  url('../images/tour_white.png') no-repeat 0 0; margin: 280px 0 0 90px;}
#tourBtn:hover{ background: url('../images/tour_white.png') no-repeat 0 -59px;}
#tourBtn a{ display: block; width: 260px; height: 58px; cursor: pointer;}

#mid{ width: 960px; height: auto; margin: 0 auto;}

#mid  .midBox{ background: url('../images/midBoxB.gif') no-repeat 0 0;}

#midLeft{ width: 453px; height: 580px; float: left; background: blue; margin: 30px 0 0 20px;}
#midLeft h2{ font: 22px Century Gothic, arial, sans-serif; color: #fff; text-shadow: 0px 1px 2px #000; margin: 0; padding: 5px 10px; }
#midLeft p{ font-size: 12px; color: #fff; line-height: 16px; padding: 10px 10px 0 10px;}
#midLeft img{float: left; padding: 10px;}
#midLeft h3{ font: 22px Century Gothic, arial, sans-serif; color: #fff; text-shadow: 0px 1px 2px #000; padding: 5px 10px;}
#midLeft ul{ margin: 0 0 0 20px;}
#midLeft ul li{ font: 12px Arial, sans-serif; color: #fff; text-align: left; list-style-type: none; background: url('../images/arrow.gif') no-repeat 0 5px; margin: 0; padding: 6px 0 6px 40px;}

#midRight{ width: 453px; height: 580px; float: right; background: blue url('../images/textBg2.png') no-repeat 0 0; margin: 30px 20px 0 0;}
#midRight img#house{ float: left; padding: 10px;}
#midRight p{ font-size: 12px; color: #fff; line-height: 16px; padding: 10px 20px 5px 20px; }

#midRight #bottomRightImages{ width: 434px; float: right; margin: 0 auto;}
#midRight #bottomRightImages img{ border: 1px solid #FFF; margin: 4px;}
#midRight #bottomRightImages img.images1{ float: left;}
#midRight #bottomRightImages img.images2{ float: left;}

#bar{ width: 815px; height: 54px; background: url('../images/barB.gif') no-repeat 0 0; margin: 5px auto;}
#bar h4{ font: 20px Arial, sans; color: #fff; text-align: center; padding: 10px 0 0 0;}

#bottom{ width: 940px; height: 563px; background: url('../images/bottomBgB.gif') no-repeat 0 0; margin: 0 auto;}
#bottom #linksWrapper{ width: 390px; float: left; margin: 10px 0 0 20px;}
#bottom #linksWrapper h4{ font: 22px Century Gothic, arial, sans-serif; color: #fff; text-shadow: 0px 1px 2px #000; padding:10px 10px 0 10px;}
#bottom #linksWrapper ul{ margin: 10px 0 0 0;}
#bottom #linksWrapper ul li{ font: 12px Arial, sans-serif; color: #666; text-align: left; list-style-type: none; background: url('../images/bulletC.gif') no-repeat 0 5px; margin: 0; padding: 3px 0 3px 35px;}
#bottom #linksWrapper ul li a{ font: 14px Arial, sans-serif; color: #fff; text-decoration: none; }
#bottom #linksWrapper ul li a:hover{ text-decoration: underline;}

#bottom #showing{ display: block; width: 260px; height: 58px; background: url('../images/showing_white.png') no-repeat 0 0; float: right; margin: 20px 10px 0 0;}
#bottom #showing:hover{ background: url('../images/showing_white.png') no-repeat 0 -58px;}
#bottom #showing a{ display: block; width: 260px; height: 58px; cursor: pointer;}
#bottom #whyBtn{ display: block; width: 260px; height: 58px; background: url('../images/whyBtn_white.png') no-repeat 0 0; float: left; margin: 20px 0 0 0;}
#bottom #whyBtn:hover{ background: url('../images/whyBtn_white.png') no-repeat 0 -58px;}
#bottom #whyBtn a{ display: block; width: 260px; height: 58px; cursor: pointer;}

#bottom img{ float: right; margin: 10px 20px 0 0;}

#bottom #stepsBtn{ display: block; width: 260px; height: 58px; background: url('../images/10steps_white.png') no-repeat 0 0; float: right; margin: 10px 10px 0 0;}
#bottom #stepsBtn:hover{ background: url('../images/10steps_white.png') no-repeat 0 -58px;}
#bottom #stepsBtn a{ display: block; width: 260px; height: 58px; cursor: pointer; }

#contact{ width: 920px; background: #efefef url('../images/bg.jpg') repeat-x 0 0; margin: 10px auto;}
#contact #btmLogos{ width: 203px; float: left; margin: 10px 0 0 10px;}
#contact a#logo2{ display: block;}
#contact #pru{ display: block; margin: 5px 0 0 10px;}

#contact ul{ list-style-type: none; float: left; margin: 20px 0 10px 50px;}
#contact ul li{ width: 105px; font: 12px "Times New Roman", Times, serif; color: #000; text-transform: uppercase; text-align: center; float: left; margin: 0 10px;}


#contact #infoWrapper{ float: right; margin: 15px 10px 0 0; padding: 0;}
#contact #infoWrapper span#mls{ float: right;}
#contact #infoWrapper p{ font: 14px Arial, sans; color: #000; margin: 0 0 5px 0; text-align: right;}
#contact #infoWrapper a{ text-decoration: none;}
#contact #infoWrapper a:hover{ text-decoration: underline;}

#footer{ width: 940px; background: url('../images/shadow.jpg') no-repeat top center; margin: 0 auto;  border-top: 1px solid #ccc;}

#footerNav					{ z-index:2; padding:5px 0;}
#footerNav ul				{ margin:0; list-style-position:outside; list-style:none;}
#footerNav ul li			{display:block; float:left; margin:0; padding:0; position:relative;}
#footerNav ul li a			{display:block; font: 12px Arial, sans; color: #666; font-weight: 100; text-decoration: none; height:25px; line-height:25px; padding: 0; text-align:center; white-space:nowrap;}
#footerNav ul li a:hover,
#footerNav ul li.active a	{  color: #666; text-decoration: underline;}

#footer p#copyright{ width: 235px; font: 12px Arial, sans-serif; color: #666; margin: 10px auto;}

#disclosure{ width: 960px; float: left; margin: 10px auto 0 auto;}
#disclosure p{ width: 900px; font: 10px Arial, sans-serif; color: #333; margin: 0 auto;}
#disclosure p.small{ width: 750px; font: 11px "Trebuchet MS",Arial,Helvetica,sans-serif; float: left; margin:10px 0 0 30px;}