img { behavior:url(/visitors/css/iepngfix.htc); }

/* ---------------------------------- /
/   TOP SECTION OF THE PAGE
/ ----------------------------------- */
body{ margin-top: 0px;}

#topArea { /* the top area of the page that has the big picture in the background */

	background-repeat:no-repeat;
	background-position:top left;
	width:620px;
	height:160px;
	padding-top:200px;
	padding-left:0px;
	position:relative;
	z-index:5;
}

#topAreaTitleOverhang { /* this is the part of the title that sticks off the left side of the page */
display:none;
 	width:20px;
	height:50px;
	position:absolute;
	left:-19px;
	top:200px;
	background-color:#006699;
}

#topAreaVBTag {
display:none;
	width:110px;
	height:99px;
	background-image:url(/visitors/images/vb07Tag.gif);
	position:absolute;
	top:175px;
	left:0px;
}

#topAreaCopy { /* div to hold the promo content that lives in the top area */
	width:475px;
	margin-top:80px;
	margin-left:40px;
	line-height:1.3em;
}

#topArticleLeft {
	position:relative;
	margin-left:-15px;
	width:300px;
	float:left;
}

#topArticleRight {
	width:300px;
	float:right;
}








/* ---------------------------------- /
/   CONTENT ROWS 
/ ----------------------------------- */


.contentRow {
/* This is A horizontal row that is visually implied by the arrangement of the content on the page.
    Elements that appear side by side on the page are likely grouped in a div with a contentRow class. */
	background-position:top left;
	background-repeat:no-repeat;
	clear:both; /* to compensate for floated interior content */
	display: inline-table;  /* see clearfix.css - to compensate for floated interior content */

}
.contentRow:after { /* see clearfix.css - to compensate for floated interior content */
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}


/* Hides from IE-mac (see clearfix.css - to compensate for floated interior content) \*/
* html .contentRow {height: 1%;}
.contentRow {display: block;}
/* End hide from IE-mac */


#contentRow1 { /* the first roqw */
	background-image:url(/visitors/images/bkg/sandbridgeBeachSunset2.jpg);
	position:relative;
	height:500px;
	/*z-index:1;*/
	}
	
	
#contentRow2 {
position:relative;
	/*background-image:url(/visitors/images/bkg/sandbridgeBeachSunset.jpg);*/
	height:340px;
	width:745px;
	position:relative;
	margin-top:-200px;
	padding-top:100px;
	margin-bottom:-100px;
	clear:none;
	/*z-index:2;*/

	}

#stayEatPlaySlot{
background-image:url(/visitors/images/beaches/getSettledInBG.jpg);
background-position: 0px 100px;
background-repeat:no-repeat;
position:relative;
padding-top:100px;
height:297px;
}
#settle_in_txt{
margin-top:25px;	
position:relative;
margin-left:160px;
width:525px;

}
.beach_pic1{
position:relative;
float:left;
margin-top:15px;
margin-left:5px;

}

/* ---------------------------------- /
/ SLOTS - these are empty areas where components can be inserted
/ ----------------------------------- /

> slots carve off space in the docuemnt for the component to be inserted,
  so the width and maybe height of the slot will be defined. The background image/color 
  may also be set here. Components themselves are usually devoid of a background.

> Slots speced with IDs (# in front) are intended to only have one per page 

> Slots speced with classes (. in front) can have more than one per page

*/






#articlePromoSlot { /* this is where an interactive flash widget may go, like on fishing */
	width:350px;
	float:left;
	position:relative;
	/*margin-top:-20px;*/
	margin-top:20px;
	margin-left:20px;
}



/* ---------------------------------- /
/   PHOTO GALLERY / VIDEO VIEWER SLOT
/ ----------------------------------- */

#photoGallerySlot {
	position:relative;
	float:right;
	width:300px;
	height:350px;
}
/*
#photoGallerySlotBkg {
	position:absolute;
	top:-90px;
	right:0px;
	background-color:#b0d7a9;
	width:320px;
	height:410px;
	filter:alpha(opacity=20);
	-moz-opacity:.20;
	opacity:.20;

}
*/

#videoGallerySlot {
	position:relative;
	top:30px;
	left:60px;
	float:left;
	width:320px;
	height:340px;
}


/* ---------------------------------- /
/   BEACH INFO ROW
/ ----------------------------------- */

#beachInfoRow {
	position:relative;
	padding-top:50px;
	background-color:#c6e8ee;
	background-image:url(/visitors/images/bkg/BGBeachInsOuts.jpg);
	background-position: 200px 74px;
	z-index:3;
	}

#beachInfoMap {
	padding-top:20px;
	float:left;
}

#beachInfoSubHead {
	margin-left:220px;
	margin-top:40px;
	
}

#beachInfoText {
	margin-right:60px;
	padding-bottom:10px;
	margin-left:220px;
}


#infoPanelSlot {
	float:right;
	width:490px;
	margin-right:20px;
	clear:right;
}

.articlePromoTitle a{
font-size:11px;
}