/* ------ STYLES FOR TYPOGRAPHY ------ */
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
}
h1 {
	font-family: "High Tower Text", Garamond, "Perpetua Titling MT", Georgia, "Times New Roman", serif;
	text-transform: uppercase;
	font-size: 16pt;
	color: #333333;
	font-weight: bold;
}

h2{
	font-family: "High Tower Text", Garamond, "Perpetua Titling MT", Georgia, "Times New Roman", serif;
	font-size: 14pt;
	font-weight: normal;
	display: inline;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	width: 250px;
}
h3{
	font-family: "High Tower Text", Garamond, "Perpetua Titling MT", Georgia, "Times New Roman", serif;
	font-size: 12pt;
	width: 200px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	font-weight: normal;
	letter-spacing: 2pt;
}

h4{
	font-family: "High Tower Text", Garamond, "Perpetua Titling MT", Georgia, "Times New Roman", serif;
	font-size: 9pt;
	font-weight: bold;
	margin: 0px;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
	text-transform: uppercase;


}
.caption {
	font-size: 9pt;
	font-weight: normal;
	color: #666666;
	font-style: italic;
    padding: 0 1em 0 1em;
}

a{	color:#4784C3;
}

a:visited{
	color:#3E72A9;
}
a:hover, a:visited:hover{
	color:#C03F45;
	text-decoration: none	
}


/* ------ STYLES FOR LAYOUT AND NAVIGATION ------ */
.header {
	width: 100%;
	left: 0px;
	top: 0px;
	height: 85px;
	background-image: url(../images/interface/header.jpg);
	background-repeat: repeat-x;
}

.mainBody {
	clear: left;
	font-size: 10pt;
	margin: 0px;
	padding: 0px;

}

.mainColumn {
	margin: 20px;
}

.noSpacing {
	margin: 0px;
	padding: 0px;
}

.mainColumn .reservationAd {
	background-color: #CCDEA7;
	padding: 5px 10px;
	margin: 0px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #C03F45;
	width: 400px;
	}
.mainColumn ul{
	list-style-image: url(../images/interface/misc/bullet.gif);
	list-style-position: outside;
}

.sideColumn {
	margin: 0px 0px 0px 10px;
	padding: 10px;
	background-color: #E7E7E7;
	width: 280px;	
/*	position: absolute;
	top: 111px;
	right: 1px;
	visibility: visible;
		Tryusing float instead: */
	float: right;
}
.sideColumn .content{
	margin: 0px;
	padding: 0px 10px;
	font-size: 8pt;

}
.sideColumn .mailListAd {
	background-color: #E9D9B9;
	padding: 0px;
	margin: 10px 0px;
	width: 258px;
}

.sideColumn .reservationAd {
	background-color: #96A2ED;
	padding: 0px;
	margin: 10px 0px;
	width: 258px;
	border-top-color: #E7E7E7;

}
.subNavHead {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12pt;
	font-weight: bold;
	text-transform: uppercase;
	background-color: #C03F45;
	margin: 10px 10px 0px;
	color: #000000;
	padding: 5px;
	width: 400px;

}
.subNav {
	margin: 0px 10px 10px;
	padding: 5px;
	background-color: #CCCCCC;
	width: 400px;

}

/*FOOTER AND FOOTER NAVIGATION STYLES*/
.footer {
	font-size: 70%;
	color: #666666;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #E5E5E5;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 20px;
	clear: both;


}
.footer ul {
	list-style-type: none;
	width:100%;
	margin:0px;
	padding:0px
}
.footer ul li {
	display: block;
	float: left;
	margin: 0px;
	padding: 2px;
	text-transform: lowercase;

}
/* HMMM - MIGHT NOT NEED THESE!

.footer ul li a{
	color:#4784C3;
	text-decoration: none	
}
.footer ul li a:hover{
	color:#000099;
	text-decoration: underline	
} */

/* HEADER NAVIGATION STYLES */
.headerNav {
	background-color: #C03F45;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #E5E5E5;
	width: 100%;
	height: 25px;
	padding-left: 10px;
	z-index: 1;



}

.headerNav ul {
	list-style-type: none;
	float:none;
	margin: 0px;
	padding: 0px;
	list-style-position: inside;
	font-family: "Lucida Sans", Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;/* This should be 10 but was lowered to fit all of the text on one line */
	color: #E9D9B9;
	width: 100%;
	background-color: #C03F45;
	text-transform: lowercase;


}
.headerNav ul li {
	display: block;
	float: left;
	margin: 2px 0px 0px;
	padding: 2px;
	background-color: #C03F45;
}

.headerNav ul li a, .headernav ul li a:visited {
	color: #E9D9B9;
	text-decoration: none;
	padding: 2px
}
.headerNav ul li a:hover {
	color: #E9D9B9;
	text-decoration:none;
	background-color:#8B2E32;
}
/*NOW FOR THE CRAZY CONTEXT HIGHLIGHTING */
body.home .headernav ul li a.home,
body.overview .headernav ul li a.overview,
body.accommodations .headernav ul li a.accommodations,
body.gallery .headernav ul li a.gallery,
body.reservations .headernav ul li a.reservations,
body.packages .headernav ul li a.packages,
body.dining .headernav ul li a.dining,
body.activities .headernav ul li a.activities,
body.meetings .headernav ul li a.meetings,
body.weddings .headernav ul li a.weddings,
body.tennis .headernav ul li a.tennis,
body.contact .headernav ul li a.contact,
body.villas .headernav ul li a.villas
{
color: #4784C3;
background-color: #D7D6ED;
}
/* FORM FORMATTING */
form.rfp input, textarea{
	color: #999999;
	border: 1px solid #333333;
	margin: 2px;
	background-color: #E7E7E7;
}
form input.changed{
	color: #000000;
	border: 1px solid #CCCCCC;
	margin: 2px;
	background-color: #FFFFFF;
}
form.rfp input.required {
	color: #666666;
	border: 2px solid #990033;
}
 form input.noBorder{
 border: none;
 }

#lightbox{
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	}

#imageData{
	padding:0 10px;
	}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	}
	

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}

* html>body .clearfix {
	display: inline-block; 
	width: 100%;
	}

* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
	}