/**
  * core.css
  * @author Jon Zuck <jon.zuck@resiteonline.com>
  * @version $Id$
  * 
  * contents:
  * 1. RESET
  * 2. PRESETS
  * 3. STRUCTURE (with sections for individual pgs)
  * 4. TYPOGRAPHY & COLOR (with sections for individual pgs)
  * 
  * The order of pgs in the Structure and Typography sections is:
  * a. General 
  * b. index.php
  * c. floorplans.php
  * d. photos.php
  * e. directions.php
  * f. neighborhood.php
  * g. events.php
  * h. resservices.php
  * i. contact.php
  * j. emailafriend.php
  * k. emailcommunity.php
  * l. brochure.php
  **/

/************************************************* 
 * 1. RESET blocks and other containing elements */

html, body, div, span, h1, h2, h3, h4, h5, h6, 
applet, object, iframe,p, blockquote, pre, 
dl, dt, dd, ol, ul, li, a,
fieldset, form, label, legend, button,
table, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
}

/*************************************************
 * 2. PRESETS--generally desirable global settings 
 *
 * a. Links and images ***************************/

img   { display: block;} /* remove descender gap in IE */
a img {
    border: none;
    cursor: pointer;
}
.imgReplace {
	font-size:   0; /* IE6 */
	line-height: 0; /* IE7 */
    text-indent: -3000em;
}
a, object, button 
	{ outline: 0;} /* removes FF's outlining on active state */
a 	{ text-decoration: none;
}
/* separate block elements */  
dl, ul, ol, p, address, form {
	padding: 0 0 1em 0; /* table requires margin */
}	
ol  { list-style: decimal;}
ul  { list-style: none; /* change as desired */
}
blockquote { padding: 1em 3em;   /* change as desired */
}

/* b. Typical Table defaults -- adjust as desired. *******/

table {
	border-collapse: collapse;
	margin-bottom: 1em;
}
td {
    text-align: left;
    vertical-align: top;
}
.center {text-align: center;
}
 
/* c. clearfix class to enclose floats painlessly. Put on elements 
 * that contain floated elements.  This is the "robust" form of 
 * clearfix. All but IE6 use generated content to create a clearing 
 * element:
*/
.clearfix:after {
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
/* If not using Dean Edwards ie7-squish.js script,
 * IE6 requires a height directly on the container: 
 * .clearfix {	height: 1%;}
**/

/* End Presets **********************************/

/************************************************ 
 * 3. STRUCTURE, Positioning, Layout
 *
 * a. general structure *************************/

a, h3 	{color: #1d6166;}


h3 {width: 396px; 
	height: 31px;
	line-height: 28px;
	background:url(../images/long-subheader-trans.png) no-repeat;	
	padding: 0 0 .5em 12px; /* eff. width is 408px */
	clear: left;
}
#wrapper {
	width: 894px; 
	margin: 0 auto;
	position: relative;
}
#header {
	height: 143px;
}
h1#logo {
	width: 457px;
	height: 50px;
	position: absolute;
	top:52px;
	left: 21px;
}
#header .vcard { 
	width: 410px; 
	height: 50px;
	position: absolute;
	top: 62px;
	left: 470px;
}
#header .vcard .adr {
	float: left;
	width: 240px;
}
#header .vcard .street-address { display: block;}
#header .vcard .tel{
	float: right;
	margin-right: 20px;
	width: 150px;
}
#topNav, #lowerNav {
	position: absolute;	
	left: 35px;	
	width: 829px;
}
#topNav 	{ top: 27px; }
#lowerNav 	{ top: 108px; }

#topNav li, 
#lowerNav li, 
#subNav li { float: left;}

#contentArea {
	width: 854px;
	padding:0 8px 0 9px; /* width of white area is 872px */
	margin: 0 12px 0 12px;
}
h2 {	
	padding:0 0 0 14px;
}
#subNav {
	padding:0 0 0 14px;
	height: 30px;
	position: relative;
}
#stage {
	min-height: 220px;
	padding: 22px 14px 0 14px;
}
#mainSide, 
#secondarySide {
	width: 408px;
	float: left;
}
#mainSide { 
	margin:0 10px 0 0;
	clear: left;
}
#mainSide img {
	width: 402px;
	height: 300px;	
	border: 3px solid #583202;
	margin: 0 0 8px 0;
}
#secondarySide table { width: 100%;}
#secondarySide ul 	 { list-style-type: disc;}
#secondarySide ul li { margin: 0 0 0 25px;
}
#footer {
	height: 50px;	
	padding: 20px 0 0 0; /* eff. ht. is 70px */
	position: relative;
}
#wonders,
#azama, 
#realprop, 
#powered, 
#ehlogo { position: absolute;}

#wonders,
#azama, 
#realprop { display: block;}

#wonders	{ left: 21px;  top: 25px; width: 91px; height: 50px;}
#azama 		{ left: 113px; top: 25px; width: 137px; height: 50px;}
#realprop	{ left: 248px; top: 25px; width: 155px; height: 50px;}

#powered	{ right: 21px;  top: 37px;}	
#ehlogo		{ right: 175px; top: 37px;}

/* b. index.php structure ************************/

#hmImageArea object, 
#hmImageArea img { 
	width: 854px;
	height: 315px;
	float: left; /* removes FF gap */
	margin-bottom: 10px;
}
#hmWelcomeImage {
	width: 250px;
	float: left;
}
#hmWelcomeArea {
	width: 342px;
	padding: 0 20px 0 20px; /* effective width: 382px */
	float: left;
	min-height: 170px;
}
#hmWelcomeArea h2 { padding: 0;}
#hmSpecial {
	float: left;
	width: 221px;
}
h2#hmSpecialTop  { padding: 0;}
#hmSpecialTile * { margin: 0 12px 0 12px;}
#hmSpecialBtm 	 { height: 17px;
}
a#printcoupon {
	margin: 0px auto;
	display: block;
	width: 212px;
	height: 44px;
}

/* c. floorplans.php Structure *******************/
#mainSideFp {
	float: left;
	margin:0 10px 0 0;
	clear: left;
	width: 408px;
}
#mainSideFp #floorPlanImage{
	width: 402px;
	border: 3px solid #583202;
	margin: 0 0 8px 0;
}
a#sitePlanBtn {
	width: 199px;
	height: 32px;
	display: block;
	float: right;
}
*+html #secondarySide #fpTable {
	width: 409px;
	padding-top: 200px;
	border-collapse: collapse;
}
.fp td, 
.fp th { border: 1px solid #000;}
.fp td { padding: 0 0 0 3px;}

#fpBtns { position: relative; }
a#printFpBtn, 
a#checkAvailBtn {
	position: absolute;
	width: 202px;
	height: 44px;
	top: 0;
}
a#printFpBtn 	{ left: 0;}
a#checkAvailBtn { left: 206px;}

/* d. photos.php Structure ***********************/

a#back, 
a#next {
	width: 200px;
	height: 32px;
	float: left;
	margin-bottom: 12px;
}
a#back {margin-right: 8px;
}
#playVideo {
	background: url(../images/play-video.png) no-repeat;
	width: 413px;
	height: 47px;
	margin-top: 50px;
	display: block;
}
#playVideo:hover {
	background: url(../images/play-video2.png) no-repeat;
}
#thumbs td img{
	cursor: pointer;
	width: 96px;
	height: 72px;
	border:3px solid #e0d2ab;	 
}

/* e. directions.php structure *******************/

.dir #mainSide { width: 568px;}
.dir #mainSide #mapSpace{ 
	border:3px solid #583202;
	height:460px;
	margin-bottom:10px;
	width:560px;
}
/* so the google map doesn't explode */
.dir #mainSide img{ border:0; height:100%; width:100%; }
.dir #secondarySide { width: 248px;}
.dir #stage h3{ width: 236px;}
.dir #secondarySide p { width: 225px; }

a#dirBtn {
	width: 247px;
	height: 32px;
	display: block;
	float: right;	
}

/* f. neighborhood.php structure *****************/

.neigh #subNav a {
	
}
.neigh #stage {
	width: 824px;
	padding: 22px 15px 0 15px;
}
.neigh #stage h3  {
	width: 802px;
	margin:0 auto;
	float: left;
	background: url(../images/longLong_header-trans.png) no-repeat;
}
.neigh #stage li{ 
	float:left; 
	margin-bottom:10px;
}
.neigh #stage p {
	width: 233px;
	padding: 0 17px 0 17px;
	
}

.neigh #stage .row {
	clear: left;
	margin-bottom: 1em;
}
.neigh #stage li.firstCol{
	clear:left;	
}
.neigh #stage li.firstCol, 
.neigh #stage li.secondCol { 
	 background: url(../images/dotNieghborhood-trans.gif) 100% top repeat-y;
}
/*
.neigh h3 {	background: url(../images/longLong_header-trans.png) no-repeat;
}
*/
/* g. events.php structure ***********************/

.events #mainSide { min-height: 440px; }
.events #mainSide p { margin: 333px 20px 0 20px; }
.events a#facebook {
	display: block;
	margin: -5px auto 0;
	width: 285px;
	height: 48px;
}
.events #secondarySide p {
	padding: .5em 1em;
	margin-bottom: 1em;
}
.events #secondarySide b a{
	color:#000;
	font-weight:normal;
	margin-left:10px;
	text-decoration:underline;	
}
.events #secondarySide div{
	font-weight:bold;
	margin-left:10px;
	margin-top:20px;	
}

/* h. resservices.php structure ******************/

.resservices #stage	{ padding: 22px 30px 0 30px;
}
#resHubForm {
	width:215px;
	margin: 0 30px 0 0;
	float: left;
	text-align: center;	
}
#resHubForm h4 	{ margin: 0 0 10px 0;
}
#resHubForm .rh-login-box {
	border: 1px solid #000;		
}
#resHubForm li 	 {
	height: 20px;
	margin: 0 0 10px 0;
}
#resHubForm label{
	width: 75px;
	padding-right: 10px;
}
#resHubForm input {
	width: 100px;
	border:1px solid  #1d6166;
}
#resHubForm .links { padding: 20px 0 0 0;
}
#resHubForm input.button {
	width: 136px;
	height: 25px;
	float: none;
	border:0;
	margin: 15px auto 15px auto;	
}
.resservices #description {
	width: 549px;
	float: right;
}
/* i. contact.php structure **********************/

.contact #mainSide { width: 520px;
}
.contact #secondarySide {
	width: 296px;
	float: right;
}
.contact h3 { width: 283px;
}
#stage .vcard { 
	margin:  0 0 1em 0;
	padding: 0 0 0 12px;	
}
#stage .vcard .fn, 
#stage .vcard .adr { margin: 0 0 .75em 0;
}
#stage .vcard .street-address { display: block;
}
#stage .vcard .type {
	width: 75px;
	display: block;
	float: left;
	clear: left;
}
#stage .vcard .tel { margin: 0 20px 0 0;
}
#hours { padding: 0 0 0 12px;}
.value { float: left; }
#header .value { float: none; }
/* j. emailafriend.php structure *****************/

table.sendToFriend {
	margin: 0 auto  0 auto;
	border-collapse: separate;
	border-spacing: 3px;
	
	}
.right { 
	padding: 0 10px 0 0;
	color: #000; /* For IE8. Don't ask. */
}

/* k. emailcommunity.php structure ***************/

.ecommunity #mainSide {
	width: 518px;
	min-height: 240px;
	position: relative;
	border: 1px solid #000; /* eff. width 520px */
}
.ecommunity #secondarySide {
	width: 296px;
	float: right;
}
.ecommunity h3 { width: 283px;
}
#legend {
	display: block;
	padding: 0;
	height: 20px;
}
.ecommunity form label,
.ecommunity form input, 
.ecommunity form select,
.ecommunity form fieldset { position: absolute;
}
.ecommunity #fnameLbl 	{ top: 30px; left: 12px; width: 100px;}
.ecommunity #lnameLbl 	{ top: 30px; left: 265px; width: 100px;}
.ecommunity #fname	  	{ top: 50px; left: 12px; width: 238px;}	
.ecommunity #lname	  	{ top: 50px; left: 265px; width: 238px;}	
.ecommunity #emailadrLbl{ top: 85px; left: 12px; width: 100px;}
.ecommunity #emailadr   { top: 80px; left: 120px; width: 383px;}
.ecommunity #propLbl  	{ top: 115px; left: 12px; width:300px;}
.ecommunity #prop     	{ top: 112px; left: 245px; width: 260px;}
.ecommunity #currResLbl { top: 142px; left: 12px; width: 170px;}
.ecommunity #yes		{ top: 142px; left: 200px; width: 15px;}
.ecommunity #yesLbl		{ top: 142px; left: 225px; width: 35px;}
.ecommunity #no			{ top: 142px; left: 275px; width: 15px;}
.ecommunity #noLbl		{ top: 142px; left: 300px; width: 35px;}
.ecommunity #submit		{ top: 185px; left: 227px;}

/* l. brochure.php *******************************/

#wrapper.brochure {
	width: 652px;
}
.brochure #header {
	width: 650px;
	height: 129px;
	position: relative;
}
.brochure #logo {
	position: absolute;
	top: 47px;
	left: 0px;
}
a#printBrochureLink {
	display: block;
	width: 217px;
	height: 50px;
	position: absolute;
	top: 47px;
	right: 0;
}
.brochure #contentArea {
	min-height:600px;
	width: 610px;
	margin:10px auto 20px;
	padding: 20px; /* eff. width = 650px; */
	border-top: 1px solid;
	border-left: 1px solid;
	border-right: 1px solid;		
	border-bottom: 8px solid;
}
.brochure #brochurePic {
	float: left;
	width: 311px;
	height: 232px;
	border: 3px solid;
	margin: 0 10px 10px 0;
}
.brochure .vcard { padding: 0 0 1em 0;
}
.brochure .vcard div,
.brochure .vcard .street-address { padding: 0 0 .25em 0;
}
.brochure .vcard .street-address { display: block;
}
.brochure .vcard .adr { padding: 0 0 2em 0;
}
.brochure .vcard .type {
	display: block;
	width: 55px;
	height: auto;
	float: left;
}
.brochure #description { clear: left;
}
.brochure h2,
.brochure h3 {
	height: auto;
	padding: 0 0 6px 0;
}
.brochure table {
	width: 100%;
}
.brochure td { text-align: center; }
.brochure .features ul 	 { list-style-type: disc;}
.brochure .features ul li { margin: 0 0 0 25px; }

/*************************************************
 *  4. TYPOGRAPHY and Color 
 *  
 * a. General ************************************/

body {
	background: #1d1000 url(../images/tile-bkg.jpg) repeat-x;
	font: 12px/1.5 Arial, sans-serif;	
}
#header { background: url(../images/nav-bkg.gif) no-repeat;}
#header .vcard {
	font: 11px Verdana,Arial, Helvetica, sans-serif;
	color: #763;
	text-align: right;
}
#header .vcard .type { color: #000;}	
#topNav li, #lowerNav li {
	float: left;
	color: #fff;
}
#topNav li a, 
#lowerNav li a,
#subNav li a { color: #fff;}
#topNav li a:hover,
#topNav li.current a 	{ color: #e0d2ab;}

#lowerNav li a:hover,
#lowerNav li.current a, 
#subNav li a:hover,
#subNav li a.current { color: #000;}

h2 {
	color: #fff;
	line-height: 30px;
	background: url(../images/page-header.jpg) no-repeat;
}
#subNav {
	background: #a6800f;
	color: #fff;
}
#subNav li { line-height: 28px; }
#contentArea { background: #fff;}
#stage 		 { background: url(../images/stage-bkg.gif) repeat-x !important;
}
#footer 	{ background: url(../images/bottom-tile-trans.png) no-repeat;}
#footer a 		{ color: #82796f;}
#footer a:hover	{ color: #fff9d1;
}
#wonders	{ background: url(../images/8wonders-trans.png) no-repeat;}
#azama 		{ background: url(../images/ama-trans.png) no-repeat;}
#realprop	{ background: url(../images/realprop.gif) no-repeat;}

#wonders:hover,
#azama:hover,
#realprop:hover { 
	cursor: pointer;
}
#wonders:hover	{ background: url(../images/8wonders2-trans.png) no-repeat;}
#azama:hover 	{ background: url(../images/ama2-trans.png) no-repeat;}
#realprop:hover	{ background: url(../images/realprop2.gif) no-repeat;}

/* b. index.php type & colors ********************/

#hmWelcomeArea {background: url(../images/welcomeBrackets.jpg) repeat-y;}
#hmWelcomeArea h2 {
	background: none;
	color: #1d6166;	
	font-size: 18px;
	line-height:22px;
}
h2#hmSpecialTop {
	background: url(../images/coupon-head.gif) no-repeat;
	color: #f4da90;
	text-align: center;
	line-height:35px;
}
#hmSpecialTile 	{ background: url(../images/coupon-tile.gif) repeat-y;}
#hmSpecialBtm 	{ background: url(../images/coupon-footer.gif) left bottom no-repeat;}
a#printcoupon 		{ background: url(../images/coupon-print.gif) no-repeat;}
a#printcoupon:hover { background: url(../images/coupon-print2.gif) no-repeat;}

/* c. floorplans.php type & colors ***************/

#sitePlanBtn 		{ background:url(../images/siteplan_btn.gif) no-repeat;}
#sitePlanBtn:hover  { background:url(../images/siteplan_btn2.gif) no-repeat;}

.fp table th {
	background: #523517; 
	color: #fff;
}
.fp table tr { 
	background: #bfa246;
	cursor:pointer; 
}
.fp table tr.hover { 
	background: #a6800f;
}


#printFpBtn 		{ background: url(../images/printFloorplan_btn-trans.png) no-repeat;}
#checkAvailBtn 		{ background: url(../images/Availability_btn-trans.png) no-repeat;}
#printFpBtn:hover 	{ background: url(../images/printFloorplan_btn2-trans.png) no-repeat;}
#checkAvailBtn:hover{ background: url(../images/Availability_btn2-trans.png) no-repeat;}

/* d. photos.php type & colors *******************/

#back		{ background: url(../images/back_btn.gif) no-repeat;}
#next		{ background: url(../images/next_btn.gif) no-repeat;}
#back:hover { background: url(../images/back_btn2.gif) no-repeat;}
#next:hover { background: url(../images/next_btn2.gif) no-repeat;}

#videoVille td img:hover, 
#thumbs td img:hover {
	border: 3px solid #1d6166;}

/* e. directions.php type & colors ***************/

a#dirBtn { background: url(../images/directions_btn.gif) no-repeat;}
a#dirBtn:hover { background: url(../images/directions_btn2.gif) no-repeat;}
.dir #stage h3 { background: url(../images/shortShort_header-trans.png) no-repeat;}

/* f. neighborhood.php type & colors *************/
/*
.neigh p.firstCol, 
.neigh p.secondCol { background: url(../images/dotNieghborhood-trans.gif) 100% top repeat-y;
}
.neigh h3 {	background: url(../images/longLong_header-trans.png) no-repeat;
}
*/
/* g. events.php type & colors *******************/	

.events #mainSide { background: url(../images/eventsBack.jpg) no-repeat;
}
.events #mainSide p {
	color: #1d6166;
	font-weight: bold;
}
.events a#facebook 		 { background: url(../images/facebookBtn.gif) no-repeat;}
.events a#facebook:hover { background: url(../images/facebookBtn2.gif) no-repeat;}
.events #secondarySide p { background: #b0c5c8;
}
/* h. resservices.php type & colors **************/

#resHubForm { text-align: center;}
#resHubForm h4 {
	background: #a6800f;
	color: #fff;
}
#resHubForm label	{ text-transform: uppercase;}
#resHubForm input 	{ border:1px solid #1d6166;}
#resHubForm input.button {
	background: transparent url(../images/login_btn.gif) no-repeat;
	cursor: pointer;	
}
#resHubForm input.button:hover { background: url(../images/login_btn2.gif) no-repeat;}
#resHubForm .links a { color: #a6800f;}


/* i. contact.php type & colors ******************/

.contact h3 { background: url(../images/short-subheader-trans.png) no-repeat;}
#stage .vcard h4.fn { color: #1d6166;}
#stage .vcard .type	{ color: #763;}

/* j. emailafriend.php type & colors *************/

table.sendToFriend {
	margin:0 auto;
	border-collapse: separate;
	border-spacing: 3px;
}
.right { text-align: right;}

/* k. emailcommunity.php type & colors ***********/

.ecommunity h3 { background: url(../images/short-subheader-trans.png) no-repeat;}
#legend {
	background-color: #a6800f;
	color: #fff;
	font-weight: bold;
	text-align: center;
}

/* m. brochure.php type & colors *****************/

body.noBg {
	background-image: none;
	background-color: #fff;
}
.brochure #header {
	background: url(../images/brochure_head.jpg) no-repeat;
}
a#printBrochureLink {
	background: url(../images/printbrochure.jpg) no-repeat;
}
a#printBrochureLink:hover {
	background: url(../images/printbrochure2.jpg) no-repeat;
}
.brochure #contentArea { border-color: #555;	
}
.brochure img { border-color: #583202;
}
.brochure .vcard {
	font-size: 12px;
	font-weight: bold;	
}
.brochure .vcard h2.fn {
	color: #1d6166;
}
.brochure .vcard .type { color: #763;
}
.brochure h2 { font-size: 16px;}
.brochure h2, 
.brochure h3 {
	line-height: 1em;
	background:none;
	color: #000;
}
.brochure th.name, 
.brochure td.name { text-align: left;
}
.brochure th,
.brochure td { text-align: center;
}