/* 
URL: www.surfinside.com 
Description: Report Page screen style sheet
Author: John Przepadlo 
Date: April 28, 2010
*/


/* Set Defaults */
html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input, textarea, label { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, code, em, strong, th { font: normal normal 1em Arial, Helvetica, sans-serif; }
ul, ol { list-style: none; font: normal normal 1em  Arial, Helvetica, sans-serif; }
fieldset, img { border: none; }
caption, th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }


/* Page Layout */
body           { width:100%; background: #000080; }
div#pagelayout { width:825px; margin: 0 auto; }
div#adspacetop { width:100%; margin:2px 0 10px 0; } /* Margin: Top Right Bottom Left; */
div#header 	   { width:824px; margin:0 0 12px 0; }
div#content    { height:880px; position: relative; background:#fff url('img/section_header_pics.gif') top left no-repeat; }
div#gallery    { height:100%; position:absolute; left:28px; right:220px; }
div#report	   { width:200px; position:absolute; right:0; }
div#surfcharts { width:200px; position:absolute; right:0; bottom:0px; display:none; }
div#adspacebtm { width:100%; margin:10px 0; } /* Margin: Top+Bottom Left+Right; */
div#footer     { width:100%; clear:both; margin:10px 0; padding-bottom:25px; }


/* Ad space top */
div#adspacetop { height: 60px; padding:0 0 0 28px; background: url('img/adspace_top_bg.gif') no-repeat; white-space:nowrap; overflow:hidden; }
div#adspacetop img { float:left; margin-left:1px; }


/* Header */
div#header #logo { text-indent: -1000px; width:100%; height:95px; border-bottom:1px solid #369;}

div#header #logo { background:url('http://www.surfinside.com/images/Headers/bmbarrel1.jpg') no-repeat; }
#home div#header #logo { background:url('http://www.surfinside.com/images/Headers/cove.jpg') no-repeat; }
#aboutpage div#header #logo { background:url('http://www.surfinside.com/images/Headers/hwpointbreak.jpg') no-repeat; }

div#header ul { display:block; width:100%; height:3.5em; padding:0 0 1px 6px; font-size:12px; list-style:none; background: url('img/nav_ul_background.gif') left bottom no-repeat; }
div#header li { display:inline; }
div#header a  { display:block; float:left; width:auto; margin:0 0 12px 0; padding:0 12px; font-size: 12px; line-height:3.5em; border-right:1px solid #003; border-left:1px solid #036; letter-spacing:.05em; color:#fff; text-transform:uppercase; text-decoration:none;  }
div#header a:hover,
div#header a:focus,
div#header a:active { background:#001934 url('img/nav_background_fade.gif') repeat-x 0 -150px;}


/* Header individual states */
div#header a#nav1 { border-left: none; }
div#header a#nav7 { border-right:none; }
#shoppage div#header a#nav1      { background:#001934 url('img/nav_background_fade.gif') repeat-x 0 -150px;}
#reportpage div#header a#nav2    { background:#001934 url('img/nav_background_fade.gif') repeat-x 0 -150px;}
#camerapage div#header a#nav3    { background:#001934 url('img/nav_background_fade.gif') repeat-x 0 -150px;}
#forecastpage div#header a#nav4  { background:#001934 url('img/nav_background_fade.gif') repeat-x 0 -150px;}
#travelpage div#header a#nav5    { background:#001934 url('img/nav_background_fade.gif') repeat-x 0 -150px;}
#aboutpage div#header a#nav6     { background:#001934 url('img/nav_background_fade.gif') repeat-x 0 -150px;}
#directorypage div#header a#nav7 { background:#001934 url('img/nav_background_fade.gif') repeat-x 0 -150px;}


/* Ad space bottom */
div#adspacebtm { padding:0 0 0 28px; background: url('img/adspace_btm_bg.gif') no-repeat; white-space:nowrap; overflow:hidden; }
div#adspacebtm div { float:left; width:797px; height:90px; background:#fff; }
div#adspacebtm div ul { padding:8px 0 0 15px; }
div#adspacebtm div li { float:left; display:block; width:175px; white-space: normal; font-size:.7em; color:#33445c; }
div#adspacebtm div h3 { text-transform:uppercase; }
div#adspacebtm div a  { color:#33445c; text-decoration:none; }
div#adspacebtm div a:hover { color:#000080; text-decoration:underline; }
div#adspacebtm div cite { text-transform:uppercase; display:block; }
div#adspacebtm img { float:left; }


/* Content */
div#content { color:#006; }
div#content div.clearfix { position:absolute; bottom:0; width:100%; height:5px; z-index:1; background: url('img/content_bg_footer.gif') bottom left no-repeat; }

/* From Wilfredo */
ul#captions { display:none; border:1px solid lime; }

div#report #searchForm { width: 50%; border: 1px dotted #fff; }
div#report #searchResults { width: 75%; }
div#report table { font-size: .7em; margin: 0 15px 0 0; }
div#report table tr { background:#f0f2f7; }
div#report table tr.alt { background:#fff; }
th { text-align: left; white-space: nowrap; vertical-align:top; padding:6px 12px; color:#069; }
#report td { width: 100%; }
#searchForm td { }
div#report #update { margin-left: 20px; font-size: 10px; }
div#report textarea { width: 90%; }

div#report #reportHeader { white-space: nowrap; margin:8px 15px 10px 0; padding-bottom: 2px; background: url('img/section_header_bg_dots.gif') bottom left repeat-x; }
div#report h1 { display: inline; padding-left:16px; font-size: 12px; text-transform:uppercase; color:#069; background: url('img/arrow_green_diagonal.gif') center left no-repeat; }
div#report h2 { display: inline; margin-left: 40px; font-size: 10px; }
div#report h3, #searchResults h3 { text-align: center; margin-top: 20px; text-transform: uppercase; color: #c00; }

.get { display: inline; }
.set { display: none; }


/* Surf charts */
div#surfcharts h2 { font-size: 12px; text-transform:uppercase; color:#069; margin:0 15px 10px 0; padding:0 0 2px 0; background: url('img/section_header_bg_dots.gif') bottom left repeat-x; }
div#surfcharts h2 span { padding-left:16px; background: url('img/arrow_green_diagonal.gif') center left no-repeat; }

div#surfcharts div#swell { position:relative; width:185px; height:180px; margin-bottom:15px; overflow:hidden; }
div#surfcharts div#tide  { position:relative; width:185px; height:190px; overflow:hidden; }
div#surfcharts div.enlarge { position:absolute; top:0; right:0; z-index:9; padding:0 0 3px 5px; background:url('img/round_crn_backgound.gif') bottom left; }
div#surfcharts div.enlarge a { font-size:.65em; color:#82B7CB; }

div#surfcharts div#swell div.img { position:relative; top:-73px; left:-122px; }
div#surfcharts div#swell div.img img { width:315px; height:315px; }

div#surfcharts div#tide div.img { position:relative; top:0; left:0; z-index:2; }
div#surfcharts div#tide div.img img { width:440px; height:195px; }


div.clearfix { clear:both; }


/* Footer */
div#footer div { padding:3px 0 0 0; background: url('img/footer_top_background.gif') no-repeat; }
div#footer ul#bottomnav  { display:block; width:100%; height:3.5em; padding:0 0 1px 6px; font-size:12px; list-style:none; background: url('img/nav_ul_background.gif') left bottom no-repeat; }
div#footer #bottomnav li { display:inline; }
div#footer #bottomnav a  { display:block; float:left; width:auto; margin:0 0 12px 0; padding:0 12px; font-size: 12px; line-height:3.5em; border-right:1px solid #003; border-left:1px solid #036; letter-spacing:.05em; color:#fff; text-transform:uppercase; text-decoration:none;  }
div#footer #bottomnav a:hover,
div#footer #bottomnav a:focus,
div#footer #bottomnav a:active { background:#001934 url('img/nav_background_fade.gif') repeat-x 0 -150px;}

div#footer a#bnav1 { border-left: none; }
div#footer a#bnav7 { border-right:none; }

div#footer #bottomsubnav { clear:left; }
div#footer #bottomsubnav li { display:inline; color:#fff; font-size:.65em; }
div#footer #bottomsubnav a  { color:#fff; }