/************************** BASIC HTML ELEMENTS *************************/

* 						{border-collapse:collapse; margin:0; padding:0; border:0; outline-style:none; outline-width:0px; color:#333333;}/*all html elements default to no padding, borders, etc. */
body 					{font-family:"Trebuchet MS",Tahoma,Arial,Helvetica,sans-serif; font-size:12px ;font-style: normal; line-height:150%;font-weight: normal; font-variant:normal; color:#000000; background-color:#FFF;}
a:link 					{color: #0477B7;text-decoration: underline;}
a:visited 				{text-decoration: underline;	color: #0477B7;}
a:hover 				{text-decoration: none; color: #0477B7;}
a:active 				{text-decoration: none;	color: #0477B7;}	
abbr					{}
acronym 				{}
blockquote 				{padding:6px 40px 14px 40px;}
code, kbd 				{font-family:monaco, courier, monospace; color:#777777;}
dd, dt 					{cursor:help;}
h1 						{color:#FF4400; margin:0 0 0 0; font:normal 22px; font-size:22px; letter-spacing:0.6px;}
h2 						{color:#FF4400; margin:0 0 0 0; font:normal 18px; font-size:18px;}
h3 						{color:#FF4400; margin:0 0 0 0; font:bold 18px; font-size:18px;}
h3.h3b					{color:#0477b7;}
h4 						{color:#0477B7; margin:0 0 0 0; font:bold 18px; font-size:18px; height:18px; line-height:22px;}
h4.a:link, h4.a:hover, h4.a:visited
						{padding-bottom:2px;}
h5 						{color:#0477b7; margin:0 0 0 0;  font:bold 14px; font-size:14px; display:inline-block;}
h6 						{color:#0477b7; margin:0 0 0 0;  font:bold 12px; font-size:12px; display:inline-block;}
hr 						{height:2px; font-size:0; line-height:0; width:100%; margin:0 0 10px 0; padding:0; border-bottom:solid 1px #DCDCDC;}
img 					{border:none; padding:0; behavior:url(http://www.beachlive.com/'/css/iepngfix.htc');} /* 'behavior" allows IE6 to properly display transparent .png files - requires 2 files in /css folder 'iepngfix.htc', and 'blank.gif'*/
ins 					{}
strong 					{font-weight:bold;}
a strong:hover 			{font-weight:bold; color:#0477B7;}  /* rollover color for "strong" OUTSIDE anchor tag (both should behave same)*/
a:hover strong			{color:#0477B7;}				/* rollover color for "strong" INSDIE  anchor tag (both should behave same)*/
table					{}
tbody 					{}
td 						{text-align:left; vertical-align:top;}
th 						{text-align:center; vertical-align:bottom;}
li 						{}
ol 						{padding:6px 0 14px 24px; list-style-type:decimal;}
p 						{margin-top:0px; margin-bottom:20px;}
pre 					{}
ul 						{padding:6px 0 6px 24px; list-style-type:none; }
var						{}
input, select, checkbox, radio, textarea					
						{border:solid 1px #AAAAAA; height:20px; margin:2px; padding:2px;}
.button 				{border:solid 1px #AAAAAA; height:20px; margin:2px; padding:2px; background-color:#D9D9D9;}
.button:hover 			{background-color:#666;}

input[type="image"]{border:0 none;}

#search-box input {border:0 none;}

/*************************** BODY CONTENT/STRUCTURE **********************/

#outterContainer {
	 margin-left:auto; 
	 margin-right:auto;  
	 padding-left:0px; 
	 width:1200px;
}

/**
#outterContainer {
	 background-image:url(../../images/bg_main.jpg); 
	 background-repeat:repeat-y; 
	 margin-left:auto; 
	 margin-right:auto;  
	 padding-left:0px; 
	 width:1200px;
}
**/

#container {
	width:988px;
	text-align:left;
	background-color: #FFFFFF;
	/* cross-browser hack to center div */
	margin-left:auto; 
	margin-right:auto; 
	/**/
	font-family: Arial, Helvetica, sans-serif; 
	font-size:12px;
	font-style: normal;	
	line-height:150%;
	font-weight: normal; 
	font-variant: normal; 
	color:#000000;
}
#header {
	height:120px;
	background-color: #FFF;
	background-repeat: repeat-x;
}
#headerHeader {
	background-color:#0477B7;
	color:#FFFFFF;
	height:3px;
	overflow:hidden;
	padding: 3px 10px 3px;
}

#headerContent {
	display:block;
}
#headerContent div.left {
	float:left;
}
#headerContent div.right {
	padding: 10px 0pt 0pt; float: right;
	padding-right:4px;
}

#pageBody {
	margin:10px;
	background-color:#FFFFFF;
	/*border:dashed 1px #DDD;*/
	/* cross-browser hack to set minimum height for page body */
	min-height:360px;
	height:auto !important;
	height:360px;
}
#footer {
	width:988px;
	background-color: #FFFFFF;
	background-repeat: no-repeat;
	background-position:top;
	/* cross-browser hack to center div */
	margin-left:auto; 
	margin-right:auto; 
}
#footerContent {
	padding:3px 48px 3px 48px;
	color:#999999;
	font:normal 11px/100% Arial, Helvetica, sans-serif; 
	text-align:center;
}

/************* PAGE LAYOUT V.2 ************/
.left {float:left;} /* Never append styles to .left */
.right {float:right;} /* Never append styles to .right */

.pageLeft {
	width:642px;
	float:left;
}
.pageRight {
	width:316px;
	float:right;
	padding-left:10px;
}

.leftContainer { /* Primary Content Container */
	padding:10px;
	min-height:200px;
	height:auto !important;
	height:200px;
	background: transparent url(../../images/bg_642px.gif) no-repeat 0% 0%;
	margin-top:10px;
}

/* -- ADD 0 to each Width when Border Removed -- */
.leftContainer div.sub100 {width:622px; display:inline-block;}
.leftContainer div.sub50 {width:311px; display:inline-block;}
/* -- ADD 0 to each Width when Border Removed -- */
.leftContainer div.sub60 {width:331px; display:inline-block;}
.leftContainer div.sub40 {width:290px; display:inline-block;}
/* -- WDITH (414/207) on each Width when Border Removed -- */
.leftContainer div.sub66 {width:414px; display:inline-block;}
.leftContainer div.sub33 {width:207px; display:inline-block;}

.leftContainer .addition {margin:5px 0 5px 0;}

.rightContainer { /* Primary Content Container */

}

/* -------- */

.leftContainer .sub66 .weather {
	margin: 10px 0px 10px 0px;
	background:transparent url(../../images/bg_beach-report-partCloudy.gif) no-repeat scroll 0 0;
	height:159px;
	padding-top:10px;
}
.leftContainer .sub66 .weather .forcast_title {
	padding:25px 0 0 10px; 
	color:#333333;
	text-align:left;
	font-weight:bold;
}
.leftContainer .sub66 .weather .updated {
	padding-left:10px; font-size:10px;
}
.leftContainer .sub66 .weather h4.degree {font-size:25px;}

.leftContainer .sub66 .surf {
	margin: 10px 0px 0pt 0pt;
	background:transparent url(../../images/bg_beach-report-wave2.gif) no-repeat scroll 0 0;
	height:159px;
	padding-top:10px;
}
.leftContainer .sub66 .surf h4.feet {font-size:25px; margin:20px 0 0 0;}
.leftContainer .sub66 .surf p {margin:25px 0 0 0; color:#FFFFFF; font-weight:bold;}

.leftContainer .todo {
	margin:10px 0 0 0; line-height:17px; font-size:11px; color:#333;
	background:transparent url(../../images/bg_beach-report-box.gif) no-repeat;
	height:159px;
}

/************* END PAGE LAYOUT V.2 ************/

/************* PAGE LAYOUT V.3 ************/
/************* PAGE MODULES ************/

/* ----Right---- */

.rightColumn h3 {
	background:transparent url(../../images/bg_column-right-topCap.gif) no-repeat scroll center top;
	padding:0px 0px 4px;
}

.rightColumn {
	border-left:1px solid #E7E7E7;
	border-right:1px solid #E7E7E7;
	padding:10px 10px 5px;
	background:transparent url(../../images/bg_column-right-botCap.gif) no-repeat center bottom;
	margin-bottom:10px;
}

.rightColumn .rightFooter {clear: both; height: 3px; background:url(../../images/bg_column-right-botCap.gif);}

#rightAd {
	background:transparent url(../../images/bg_column-right-topCap.gif) no-repeat scroll center top;
	margin:0 0 10px;
	padding:8px 0 0;
}
#rightAd .adCage {
	border-left:1px solid #E7E7E7;
	border-right:1px solid #E7E7E7;
	padding:0 0 5px;
}
#rightAd .adFooter {
	background:transparent url(../../images/bg_column-right-botCap.gif) no-repeat scroll center bottom;
	clear:both;
	height:5px;
}
/************* END PAGE LAYOUT V.3 ************/
/************* PAGE LAYOUT ************/

.left {float:left;}
.right {float:right;}

.pageLeft {
	width:642px;
	float:left;
}
.pageRight {
	width:316px;
	float:right;
	padding-left:10px;
}

.innerPageLeft {
	width:316px; 
	float:left; 
}
.innerPageRight {
	width:316px; 
	float:right; 
	padding-left:10px;
}

.clear {clear:both;}

#container1Left { min-height:200px; padding-top:4px;}

#containerLeft-WTW {	
	background-color:#FFFFFF;
	background:url(../../images/bg_642px-box-top.gif) top no-repeat;
	width:642px;
	margin-top:10px;
	padding-top:8px;
	
}
/* -- WEATHER ICONS -- */
.weather_unknown {background:transparent url(../../images/icons/weather/unknown.gif) no-repeat 0 0;}

.weather_clear {background:transparent url(../../images/icons/weather/clear.gif) no-repeat 0 0;}
.weather_partlyCloudy {background:transparent url(http://www.beachlive.com/images/icons/weather/partlycloudy.gif) no-repeat 0 0;}



#container1Left .left .weather {
	margin: 10px 8px 10px 0pt;
	/*background:transparent url(../../images/bg_beach-report-partCloudy.gif) no-repeat scroll 0 0;*/
	height:149px;
	width:201px;
	padding-top:10px;
}
#container1Left .left .surf {
	margin: 10px 4px 0pt 0pt;
	height:149px;
	width:201px;
	padding-top:10px;
}
#container1Left .left h4 {padding-right:25px; padding-left:10px;}
#container1Left .left .weather h4.degree {font-size:25px; color:#666666; margin-top:15px; padding-top:5px;}
#container1Left .left .surf h4.feet {font-size:25px; margin:10px 0 0 0; color:#666666;}
#container1Left .left .surf p {margin:35px 0 0 0; color:#FFFFFF;}
#container1Left .left .surf p strong {color:#FFFFFF; font-weight:bold;}

#container1Left .left .weather .forcast_title {
	padding:50px 80px 5px 0px; 
	color:#666666;
	font-weight:bold;
	width:120px;
	text-align:center;
	font-size:13px;
}
#container1Left .left .weather .updated {
	font-size:10px; text-align:center; /*position:relative; bottom:-20px;*/
}

#container1Left .nearby_beaches h3 {margin:10px 0 5px 0;}


/* - Surf - */

#container1Left .surfleft {float:left; width:404px; height:207px;
	background:transparent url(../../images/3-5wave_big.jpg) no-repeat scroll bottom ;
}
#container1Left .surfright {
	margin:0px 0 0 0; line-height:17px; font-size:11px; color:#333;
	float:right;
	height:159px;
	width:202px;
}

/* --- Row 2 --- */
#container2Left {margin:10px 0 0 0;}

#container2Left .left {width:331px;}
#container2Left .right {text-align:left; width:290px;}
#container2Left .right h3 {font-size:16px;}

#container2Left .right .camLocation {padding-left:10px;}


/* --- Row 2.5 --- */
#container2-5Left div {border:1px red solid;}
#container2-5Left .outerLeft {width:405px;}

#container2-5Left .innerLeft {width:190px; padding-left:5px; padding-right:5px;}
#container2-5Left .innerLeft .innerInnerLeft {width:110px;}
#container2-5Left .innerLeft .innerInnerRight {width:70px;}

#container2-5Left .outerLeft .innerRight {width:190px; padding-left:5px; padding-right:5px;}

#container2-5Left .right {width:210px;}

/* --- Row 3 --- */

#container3Left {margin-top:20px;}
#container3Left .left {width:306px;}
#container3Left .left.advertisement {margin-bottom:10px;}
#container3Left .left ul {padding-left:0px;}
#container3Left .left .innerLeft {margin:0 0 0 0; font-size:11px; padding:6px 0 6px 0; display:inline-block; width:153px;}

#container3Left .left .innerRight {margin:0px 3px 0 0; font-size:11px; display:inline-block; width:153px;}

#container3Left .right {width:316px; /*font-size:11px;*/}
#container3Left .right ul {padding-left:0px;}
#container3Left .right li {display:block; padding:0;}


/** 06. Top Photos
****************************************/
#top-photos{
	width:306px;
	overflow:hidden;
	float:left;
	font-size:11px;
}
#top-photos ul{
	width:316px;
}
#top-photos li{
	float:left; 
	text-align:center;
	margin:0 7px 7px 0;
	padding:0 0 5px 0;
}
#top-photos img{
	margin:0 0 3px 0;
}
#top-photos a img{
	border:#FFF solid 1px;
}
#top-photos a:hover img{
	border:#ff4400 solid 1px;
}

/** 07. Box Right Column
****************************************/
.box-right-column{
	background:url(../../images/bg_column-right-botCap.gif) bottom no-repeat;
	margin:0 0 10px 0;
}
.box-right-column p{
	margin:13px 0 0 0;
	padding:0 0 0 0;
}
.box-right-column h3{
	background:url(../../images/bg_column-right-topCap.gif) top no-repeat; 
	padding:10px 10px 4px 10px; 
}
.box-right-column-content{
	border-left:#E7E7E7 solid 1px; 
	border-right:#E7E7E7 solid 1px; 
	padding:0 10px 5px 10px;
}

/** 08. Seasrch Box
****************************************/
#search-box{
	float:right;
	background-color:#0477B7;
	padding-top:6px; padding-bottom:5px; padding-right:5px;
	height:25px;
	
}

#search-box input[type="image"]{
	padding:0;
	margin-left:0px;
}
#search-box input[type="text"]{
	width:175px;
	height:25px;
	padding:3px 0 0 5px;
	overflow:hidden;
	margin-right:0px;
	background:url(../../images/bg_search-input.gif) no-repeat;
	border:none;
	color:#666666;
}

/** 09. banner-box
****************************************/
#banner-box{
	background:url(../../images/bg_column-right-topCap.gif) top no-repeat; 
	margin:0 0 10px 0; 
	padding:8px 0 0 0;
}
#banner-box .banner-cage{
	border-left:#E7E7E7 solid 1px; 
	border-right:#E7E7E7 solid 1px;
	padding:0 0 5px 0;
	overflow:hidden;
}

#banner-box .banner-cage img{/*position:absolute;*/}

#banner-box .banner-footer{
	clear:both; 
	height:5px; 
	background:url(../../images/bg_column-right-botCap.gif) bottom no-repeat;
}

/** 10. Column-290
****************************************/
.column-290{
	width:290px; 
	/*float:left;*/
}

/** 11. Box-Padding
****************************************/
.box-padding{
	padding:10px;
}

/** 12. Box-290
****************************************/
.box-290{
	background:url(../../images/bg_290px-topCap.gif) top no-repeat; 
	padding:8px 0 0 0;
	background-color:#FFFFFF;
}
.box-290 .cage-290{
	border-left:#E7E7E7 solid 1px; 
	border-right:#E7E7E7 solid 1px; 
	background-color:#FFFFFF;
}
.box-290 .footer-290{
	clear:both; 
	height:5px; 
	background:url(../../images/bg_290px-botCap.gif) bottom no-repeat;
	background-color:#FFFFFF;
}

/** 13. Beach Report Box
****************************************/
.beach-report-box{
	background:url(../../images/bg_beach-report-box.gif) no-repeat; 
	width:202px; 
	height:159px; 
	float:left;
}
.beach-report-box-wave{
	background:url(../../images/bg_beach-report-wave2.gif) no-repeat; 
	width:202px; 
	height:159px; 
	float:left;
}
.beach-report-box-weather{
	background:url(../../images/bg_beach-report-partCloudy.gif) no-repeat; 
	width:202px; 
	height:159px; 
	float:left;
}
h4.beach-report-box-title{
	padding:10px 10px 0 10px;
	color:#0477b7;
	font-size:18px;
}


/** 14. Tab Nav ****************************************/
#tab-nav {
 margin:5px 0 0 10px;
 line-height:normal;
 }

#tab-nav ul {
 margin:0;
 padding:0;
 list-style:none;
 }

#tab-nav li {
 float:left;
 background:url("../../images/left.gif") no-repeat left top;
 margin:0 0 0 3px;
 padding:0 0 0 9px;
 }

#tab-nav a {
 float:left;
 display:block;
 background:url("../../images/right.gif") no-repeat right top;
 padding:5px 15px 5px 6px;
 text-decoration:none;
 font-weight:bold;
 color:#FFF;
 }

/* Commented Backslash Hack
304 hides rule from IE5-Mac \*/
#tab-nav a {float:none;}
/* End IE5-Mac hack */
#tab-nav a:hover {
 color:#FFCC00;
 }

#tab-nav #current {
 background-image:url("../../images/left_on.gif");
 }

#tab-nav #current a {
 background-image:url("../../images/right_on.gif");
 color:#444444;
 padding-bottom:5px;
 }

#tab-nav #current a:hover {
 background-image:url("../../images/right_on.gif");
 color:#FFCC00;
 padding-bottom:5px;
 }
 

/** 17. Box-410
****************************************/
.box-410{
	background:url(../../images/bg_410px-topCap.gif);
	margin:10px 10px 10px 0;
	padding:8px 0 0 0;
	float:left;
	width:410px;
}
.box-410 h4{
	color:#0000FF;
	font-size:18px
}

.box-410 .cage-410{
	border-left:#E7E7E7 solid 1px; 
	border-right:#E7E7E7 solid 1px; 
	background-color:#FFFFFF;
	padding:0 10px 10px 10px;
}
.box-410 .footer-410{
	clear:both; 
	height:5px;
	background:url(../../images/bg_410px-botCap.gif) bottom no-repeat;
}

/** 17. Box-642
****************************************/

#containerLeft-WTW .cage-642{
	border-left:#E7E7E7 solid 1px; 
	border-right:#E7E7E7 solid 1px; 
	background-color:#FFFFFF;
	padding:10px;
	padding-top:0px;
}
#containerLeft-WTW .box-642-footer{
	clear:both; 
	height:10px;
	background:url(../../images/bg_642px-box-bot.gif) bottom no-repeat;
}

/** 18. Surf Report and Conditions
****************************************/
.surf-report-cond{
	margin:10px 10px 10px 0;
	padding:8px 0 0 0;
	float:left;
	width:410px;
	height:227px;
}
.surf-report-cond h4{
	color:#0477b7;
	font-size:18px;
}

.surf-report-cond .cage-410{
	padding:0 10px 10px 10px;
}
.surf-report-cond .footer-410{
	clear:both; 
	height:5px;
}



.beach-current-weather{
	margin-top:0px;
	padding-top:8px;
}
.beach-current-weather h4{
	color:#0477b7;
	font-size:18px;
}

.beach-current-weather .cage-410{
	padding:0 10px 10px 10px;
	
}
.beach-current-weather .footer-410{
	clear:both; 
	height:5px;
}


/** 19. Box 202
****************************************/
.box-202{
	background:url(../../images/bg_202px-box.gif) no-repeat; 
	width:202px; 
	height:235px; 
	float:left;
}


h4.box-202-title{
	padding:10px 10px 0 10px;
	color:#0477b7;
	font-size:18px;
}

/* -============== MODULES ==============- */

.bread_crumb {font-weight:bold; color:#999999;}
.bread_crumb a:link, .bread_crumb a:visited {text-decoration:none;}



div.header {display:block; padding-left:10px; width:100%; margin-top:5px; text-align:left;}
div.header span {padding:0 3px; font-weight:bold; text-align:left; display:inline-block;}

.windStrength10, .surfHeight10, .nearestCams {display:block; color:#333333;}

.windStrength10 span, .surfHeight10 span, .nearestCams span {display:inline-block; padding:0 3px; text-align:center; font-weight:bold;}

.windStrength10 span.direction {width:25px;}
.windStrength10 span.at {width:12px;}
.windStrength10 span.speed {width:50px;}
.windStrength10 span.beachName {text-align:left; font-weight:normal;}

.surfHeight10 span.min {width:18px;}
.surfHeight10 span.to {width:10px; padding:0 0px;}
.surfHeight10 span.max {width:38px;}
.surfHeight10 span.beachName {text-align:left; font-weight:normal;}

.nearestCams {padding-left:10px; margin-bottom:5px;}
div.header span.miles {width:35px;}
div.header span.to {width:10px; padding:0 0px;}
div.header span.camName {}
.nearestCams span.miles {width:35px; text-align:left;}
.nearestCams span.to {width:10px; padding:0 0px; text-align:left;}
.nearestCams span.camName {text-align:left; font-weight:normal;}


#hp_photos-most-view ul {margin-left:0px; padding-left:0px;}
#hp_photos-most-view ul li {display:inline-block;}

 
#containerLeft-WTW div span {display:inline-block;}
#containerLeft-WTW div span.quality {width:250px; vertical-align:top;}
#containerLeft-WTW div span.flag {width:150px; vertical-align:top; margin:5px 5px 0 0;}
#containerLeft-WTW div span.tides {width:185px;}


.Threeday_forecast_backimg {
	margin-top:0px;
	width:300px;
	height:172px;
	vertical-align:top;
}
.Threeday_forecast_backimg p {width:190px; margin-top:15px;}

/* Most Recent Features */

#rss_format_display ul {padding:6px 0 6px 0px;}
#rss_format_display ul li {margin-bottom:5px;}

.mostRecent_img {border:0; text-decoration:none; display:inline-block; width:82px; vertical-align:top;}
.mostRecent_right {display:inline-block; width:208px;}
.mostRecent_right h5 {color:#FF4400;}
.mostRecent_right a:link {text-decoration:none; color:#333333;}
.mostRecent_right a:visited {text-decoration:none; color:#333333;}
.mostRecent_right a:hover {text-decoration:none; color:#333333;}

.beach-current-weather span {padding:5px 0; display:block;}
.beach-current-weather span strong {color:#666666;}

#navigationDisplay {width:635px; margin-top:15px;}
#navigationDisplay span {display:inline-block; vertical-align:top; width:315px; min-height:100px; height:auto; !important height:100px;}
#navigationDisplay span a {display:block; width:300px; padding-left:10px;}
#navigationDisplay span h4 a {padding-left:0px; margin-bottom:3px;}
#navigationDisplay span a:link {text-decoration:none;}
#navigationDisplay span a:visited {text-decoration:none;}
#navigationDisplay span a:hover {text-decoration:underline;}
#navigationContainer h2 {margin-bottom:10px;}