/*
Title:      Coastal Creek Condominium styles for screen media
Author:     Jon Livingston, jon@livingstonandpartners.com
Company:	Livingston and Partners of Jacksonville, Florida
Updated:    June 11 2006
*/

/* ----- global default/initial styles ----- */

* {padding: 0; margin: 0;}

html body {font: 75%/1.5em Georgia, "Times New Roman", Times, serif; color:#333;}
html>body {font: 75%/1.5em Georgia, "Times New Roman", Times, serif; color:#333;}

a {outline: none;}

body {

	font-size: small;
	text-align: center;
	line-height: 1.5em;
	color: #333;
	background: #D7CDBC url(/assets/img/bg-weave.jpg) repeat top left;
	}
	
#wrapper {
	margin: 20px auto 20px auto;
	width: 760px;
	border: 9px solid #659D84;
	background: #E3EAFB;
	}

#content {
	float: right;
	width: 500px;
	text-align:left;
	margin:20px 10px 0 0;
	}

#sidebar {
	float: left;
	width: 210px;

	}

#left {
	float: left;
	margin:20px 0 0 2px;
	width: 245px;
	}

#right {
	float: right;
	margin-top:20px;
	width: 245px;
	}

#logo { 
	width:199px;
	height: 125px;
	margin: 0 0 30px 0;
	padding-left:15px;
	}

#logo a { 
	margin: 20px 0px 0px 0px;
	display:block;
	text-indent: -9000px;
	width:199px;
	height:125px;
	text-decoration:none;
	background: url(/assets/img/coastal-creek.gif);
	}

.intro strong { 
	margin: 0px;
	display:block;
	text-indent: -9000px;
	width:475px;
	height:91px;
	text-decoration:none;
	background: url(/assets/img/intro.gif);
	}

.features strong, .shoppes strong, .amenities strong, .floorplans strong, .siteplan strong, .viewamodel strong, .contact strong, .mapanddirections strong, .thanks strong, .photos strong, .development strong, .marina strong, .pricing strong {
	margin-top: 10px;
	display:block;
	text-indent: -9000px;
	width:425px;
	height:33px;
	text-decoration:none;
	}

.shoppes-title strong {
	margin: 0 0 -20px 6px;
	display:block;
	text-indent: -9000px;
	width:186px;
	height:31px;
	text-decoration:none;
	}

#shoppes {
	font-size: 90%;
	line-height: 1.5em;
	}
	
.features strong 	{ background: url(/assets/img/condo-features.gif) no-repeat;}
.amenities strong 	{ background: url(/assets/img/community-amenities.gif) no-repeat;}
.floorplans strong 	{ background: url(/assets/img/floorplans.gif) no-repeat;}
.siteplan strong	{ background: url(/assets/img/site-plan.gif) no-repeat;}
.photos strong		{ background: url(/assets/img/photos.gif) no-repeat;}
.siteplan strong		{ background: url(/assets/img/siteplan.gif) no-repeat;}
.contact strong		{ background: url(/assets/img/contact-coastal-creek.gif) no-repeat;}
.mapanddirections strong	{ background: url(/assets/img/map-and-directions.gif) no-repeat;}
.thanks strong		{ background: url(/assets/img/thanks.gif) no-repeat;}
.development strong		{ background: url(/assets/img/development.gif) no-repeat;}
.marina strong		{ background: url(/assets/img/marina.gif) no-repeat;}
.shoppes strong		{ background: url(/assets/img/shoppes.gif) no-repeat;}
.shoppes-title strong		{ background: url(/assets/img/shoppes-title.gif) no-repeat;}
.pricing strong		{ background: url(/assets/img/pricing.gif) no-repeat;}

.featuresamenities strong, .viewfloorplans strong {
	margin-top: 5px;
	display:block;
	text-indent: -9000px;
	width:220px;
	height:33px;
	text-decoration:none;
	}
	
.featuresamenities strong	{ background: url(/assets/img/features-amenities.gif) no-repeat;}
.viewfloorplans strong		{ background: url(/assets/img/viewfloorplans.gif) no-repeat;}

ul#nav{
	margin: 0 0 40px 0;
	padding-left: 15px;
	list-style:none;
	width: 192px;
	}

#nav li,#nav li a {
	height:26px;
	width:192px;
	position:relative;
	display:block;
	overflow:hidden;
	line-height:26px;
	cursor:pointer;
	text-decoration:none;
	color:#E3EAFB;
}

li span {
	position:absolute;
	left:0;top:0;
	display:block;
	height:26px;
	width:192px;
}
li#nwelcome span 		{ background: url(/assets/img/nwelcome.gif) no-repeat 0 0;}
li#nwelcome-on span 	{ background: url(/assets/img/nwelcome-on.gif) no-repeat 0 0;}
li#ncommunity span 		{ background: url(/assets/img/ncommunity.gif) no-repeat 0 0;}
li#ncommunity-on span 	{ background: url(/assets/img/ncommunity-on.gif) no-repeat 0 0;}
li#nfeatures span 		{ background: url(/assets/img/nfeatures.gif) no-repeat 0 0;}
li#nfeatures-on span 	{ background: url(/assets/img/nfeatures-on.gif) no-repeat 0 0;}
li#nfloorplans span 	{ background: url(/assets/img/nfloorplans.gif) no-repeat 0 0;}
li#nfloorplans-on span 	{ background: url(/assets/img/nfloorplans-on.gif) no-repeat 0 0;}
li#nphotos span 		{ background: url(/assets/img/nphotos.gif) no-repeat 0 0;}
li#nphotos-on span 		{ background: url(/assets/img/nphotos-on.gif) no-repeat 0 0;}
li#nsiteplan span 		{ background: url(/assets/img/nsiteplan.gif) no-repeat 0 0;}
li#nsiteplan-on span 	{ background: url(/assets/img/nsiteplan-on.gif) no-repeat 0 0;}
li#ndirections span 	{ background: url(/assets/img/ndirections.gif) no-repeat 0 0;}
li#ndirections-on span 	{ background: url(/assets/img/ndirections-on.gif) no-repeat 0 0;}
li#ncontact span 		{ background: url(/assets/img/ncontact.gif) no-repeat 0 0;}
li#ncontact-on span 	{ background: url(/assets/img/ncontact-on.gif) no-repeat 0 0;}
li#ndevelopment span 	{ background: url(/assets/img/ndevelopment.gif) no-repeat 0 0;}
li#ndevelopment-on span { background: url(/assets/img/ndevelopment-on.gif) no-repeat 0 0;}
li#nmarina span 	{ background: url(/assets/img/nmarina.gif) no-repeat 0 0;}
li#nmarina-on span { background: url(/assets/img/nmarina-on.gif) no-repeat 0 0;}
li#npricing span 		{ background: url(/assets/img/npricing.gif) no-repeat 0 0;}
li#npricing-on span 	{ background: url(/assets/img/npricing-on.gif) no-repeat 0 0;}
ul#nav li a:hover 		{visibility:visible} /* needed for ie to work */
ul#nav li a:hover span 	{background-position:0 -26px}

#clear {
	clear: both;
	text-align: left;
	}

#sidebar p, #sidebar h3 { padding-left:15px;}

#sidebar p, #footer p {
	font-size: 115%;
	margin-bottom:25px;
	line-height: 1.25em;
	}

#highlight p {
	font-size: 100%;
	margin-bottom:25px;
	line-height: 1.25em;
	}
	
#sidebar h3 {
	margin-bottom: .25em;
	font-size: 130%;
	letter-spacing: -1px;
	line-height: 1.25em;
	}

#highlight h3 {
	margin: .5em 0 .25em 0;
	font-size: 130%;
	letter-spacing: -1px;
	line-height: 1.25em;
	}
	
#content p {
	margin-bottom: 1em;
	margin-right: 20px;
	line-height: 1.25em;
	font-size: 120%;
	}

#left p, #right p {
	margin:0;
	font-size: 100%;
	line-height: 1.5em;
	}
	
#highlight h3, #highlight p, #content h3, #content p, #left h3, #right h3 {padding-left:6px;}
#left p, #right p  {padding: 0 10px 0 6px;}

#content h2 {
	margin: 5px 20px 0 0;
	padding-left: 6px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 170%;
	letter-spacing: -2px;
	line-height: 1.25em;
	}

#content h3 {
	margin: 0 20px 5px 0;
	padding-left: 6px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 145%;
	letter-spacing: -1px;
	line-height: 1.25em;
	}
	
#footer {
	margin: 20px auto 20px auto;
	padding-top:10px;
	width: 760px;
	border: 9px solid #659D84;
	text-align: left;
	background: #fff url(/assets/img/bg-bluefade.jpg) repeat-x top left;
	}

#incentives {
	margin: 20px auto 20px auto;
	width: 760px;
	border: 9px solid #659D84;
	text-align: left;
	background-color: #FBE99A;
	}

#incentives h1 {
	margin: 15px 0 0 20px;
	padding-bottom:10px;
	font-size: 200%;
	letter-spacing:-1px;
	color:#990000;
	text-align:center;
	}

#incentives h2 {
	margin: 0 0 0 20px;
	padding-bottom:10px;
	font-size: 185%;
	letter-spacing:-1px;
	color:#333;
	text-align:center;
	}
	
#incentives p {
	margin: 0 20px;
	padding-bottom:20px;
	font-size: 120%;
	text-align:center;
	}
	
.floatleft {
	float: left;
	margin: 0 10px 0 0;
	}
	
#footer p {
	margin: 0 20px;
	padding-bottom:20px;
	font-size: 110%;
	}
	
#google {	
	margin:0 0 -13px 0;
	padding: 13px 0 0 20px;
	width: 485px;
	height: 264px;
	background:url(/assets/img/google-map.jpg) no-repeat top left;
	}
	
#map {
	margin:0;
	padding:0;
	width: 448px;
	height: 226px;
	}
	

/************************************************************************************************Links******/

a {outline: none;}

#info a:link, #shoppes a:link, #content a:link, #incentives a:link
	{ color: #1A7158; text-decoration: none; padding-bottom: 0px; border-bottom: 1px solid #1A7158; }
#info a, #shoppes a, #content a, #footer a, #incentives a { }
#info a:visited, #shoppes a:visited, #content a:visited, #incentives a:visited
	{ color: #1A7158; text-decoration: none; padding-bottom: 0px; border-bottom: 1px solid #1A7158;} 
#info a:active, #shoppes a:active, #content a:active, #incentives a:active
	{ color: #1A7158; text-decoration: none; padding-bottom: 0px; border-bottom: 1px solid #1A7158;} 
#info a:hover, #shoppes a:hover, #content a:hover, #incentives a:hover
	{ color: #fff; background: #1A7158; text-decoration: none; padding-bottom: 0px; border-bottom: 1px solid #1A7158;}

#footer a:link { color: #333; text-decoration: none; padding-bottom: 0px; border-bottom: 1px solid #1A7158;}
#footer a:visited { color: #333; text-decoration: none; padding-bottom: 0px; border-bottom: 1px solid #1A7158;}
#footer a:active { color: #1A7158; text-decoration: none; padding-bottom: 0px; border-bottom: 1px solid #1A7158;}
#footer a:hover  { color: #fff; background: #1A7158; text-decoration: none; padding-bottom: 0px; border-bottom: 1px solid #1A7158;}

/************************************************************************************************Lists******/
ul.bullet {margin:20px 0 0 10px;}
ul.bullet li {
	list-style:none;
	margin:-8px 0 10px 5px;
	padding:0 0 0 20px;
	background-repeat:no-repeat;
	font-size: 110%;
}

ul.bullet li.green {
	background-position:1px 5px;
	background-image:url("/assets/img/bullet-green.gif");
}

/************************************************************************************************Form******/

#cc-form {
	margin:10px 0;
	padding-bottom:5px;
	font-family: Georgia, "Times New Roman", Times, serif;
	}

#cc-form label {
	margin-bottom: 5px;
	font-size: 100%;
	vertical-align:top;
	font-weight: bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	}

#cc-form fieldset {
	margin: 10px 0 10px 0;
	padding:5px 10px;
	border: 1px dotted #ccc;
	}

.form175 {
	padding:6px;
	font: 110% Georgia, "Times New Roman", Times, serif;
	width: 175px;
	border:1px solid #ccc;
	border-color:#aaa #eee #eee #aaa;
	color:#333;
	background-color: #FFFFCC;
	}
	
#cc-form p {
	margin-bottom:5px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 110%;
	line-height: 1.5em;	
}



#cc-form input.textcontact {
	padding: 6px;
	font-size: 115%;
	width: 300px;
	border:1px solid #ccc;
	border-color:#aaa #eee #eee #aaa;
	color:#333;
	background-color: #fff;
	font-family: Georgia, "Times New Roman", Times, serif;
  }

.form250 {
	font: 115% Georgia, "Times New Roman", Times, serif;
	width: 400px;
	padding: 6px;
	background:#fff;
	border:1px solid #ccc;
	border-color:#aaa #eee #eee #aaa;
	color:#333;
  }

.form300 {
	padding:6px;
	font: 110% Georgia, "Times New Roman", Times, serif;
	width: 400px;
	border:1px solid #ccc;
	border-color:#aaa #eee #eee #aaa;
	color:#333;
	background-color: #fff;
	}
	
#cc-form legend {
	font-weight: bold;
	color: #333;
	padding: 4px 8px;
	background-color:#fff;
}

.form250 p {
	padding:0;
}

/************************************************************************************************Button******/	

#button {
	margin-top: 1px;
	background-color: #fff;
	padding: 5px 0 5px 0;
	}

#button {
	font-size: 110%;
	}

input.button {
	margin-top: 10px;
  	background:#fff;
  	color: #333;
	font-size: 110%;
  	border:1px solid #FFF;
  	border-color:#CCC #666 #666 #CCC;
  	height: 25px;
	font-family: Georgia, "Times New Roman", Times, serif;
	}

/************************************************************************************************Table******/	
table {
	margin: 10px 0 20px 8px;
	padding: 0px;
	border-collapse: collapse;
	width: 476px;
	}
td, th {
	padding: 8px 10px;
	border-bottom: 1px solid #EEE;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 100%;
	text-align:center;
	}
	
th + th {text-align:center;}
td + td {
	color: #333;
	text-align:center;
	}
td + td + td {
	color: #333;
	border-left: none;
	text-align:center;
	}
td a
	{color: #444;
	text-decoration: none;
	text-align: left;
	}
td a, th a { }
td a:hover {background: #444; color: #FFF;}
tfoot th {text-align: left;}
th {text-align: left;}
th + th {text-align: left;}
th + th + th {text-align: left;}
th a {color: #F06; text-decoration: none; font-size: 110%;}
th a:visited {color: #F69;}
th a:hover {color: #F06; text-decoration: underline;}
thead tr, tfoot tr {color: #555; font-size: 110%;}
tr {font: 110% sans-serif; background: url(/assets/img/table-back.jpg) repeat-x #F8F8F8; color: #333;}
tr:hover {background: #FFF;}

/***********************************************************************************************Lightbox******/	

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

#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;
	}
#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(/assets/img/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(/assets/img/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/assets/img/nextlabel.gif) right 15% no-repeat; }


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

#imageData{
	padding:0 10px;
	}
#imageData #imageDetails{ font-family: Georgia, "Times New Roman", Times, serif; width: 85%; float: left; text-align: left; }	
#imageData #caption{ margin: 0 10px 10px 0;	}
#imageData #numberDisplay{ display: block; clear: left; padding-top: 1em; 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: 800px;
	background-color: #000;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	}

.burgandy {
	color:#990000;
}

.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 */
	}