/* IOSSC WeatherCam - J. Bell / Designbell.uk,  Ver: 05 Dec 2021 */

body{width:auto;}
a{text-decoration:none;color:#396DA5;}
a:hover{text-decoration:underline;color:red;}

.nSelected {font-weight:bold;}

.label {display:block;color:#666666;font-family: Arial, Helvetica, sans-serif;font-size:10px;line-height:14px;border:1px solid #eeeeee;margin-top:5px;}

.data {color:black;}
.hdata {color:black;font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:16px;font-weight: bold;}
.hdata2 {font-weight:bold;color:#000;}

.greytext {color:#666666;font-family:Arial, Helvetica, sans-serif;font-size:10px;}
.small_print {font-family:Arial, Helvetica, sans-serif;font-size:9px;color:#444444;}

span.graph_legend {font-family:Verdana, Geneva, sans-serif; font-size: 9px; color: #444444; display:block; margin-top: 10px;}
 
.greybox { position: relative; left: 17px; margin-top: 17px; width: 502px; background-color: #eee; border: 1px solid #bbbbbb; padding: 20px; }

.databox { margin: 5px; padding: 0px; font-family: arial, helvetica, sans-serif; color: #666; font-size: 10px; }
.forecast {display:block; margin-bottom: 5px; line-height:1.1em;/*fixes ipad issue*/}

ul.list_arrow { margin: 0; padding: 0; list-style: none; }
li.arrow { font-family: Arial, Helvetica, sans-serif; font-size: 10px; background-image: url(../imgs/arrow.gif); background-repeat: no-repeat; background-position: 0 4px; padding-left: 7px; line-height: 13px;}

.deg_symbol { font-weight: normal; }

/* LAYOUT COLUMNS */

.cam_column { float: left; width: 510px; height: 461px; border: 1px solid #ccc; background-color: #eee; }

.cam_image {display:block;width:510px;height:383px;}
#wind_graph { position: relative; top: 0; bottom: 50%; height: 200px; border: 1px solid #ccc; }
#data_left_column { position: absolute; width: 146px; left: 0; height: 100%; border: 1px solid #ccc; }
#data_right_column { position: absolute; width: 145px; left: 153px; height: 100%; border: 1px solid #ccc; }
#data_column { float: left; width: 300px; height: 457px; margin-left: 5px; margin-right: 5px;  }
#data_block { position: relative; height: 254px; margin-top: 5px; line-height:0.85em;}
#ads_column { float: left; width: 152px; height: 465px; }

#container { position: relative; margin-left: 17px; margin-top: 11px; height: 457px; width: auto; width: 980px; }

#webcam,#webcam1,#webcam2,#webcam3{cursor:pointer;}

/* cam header area */

.cam_header { height: 48px; background-color: #eee; overflow:hidden; }

.cam_header ul {padding:0;margin:0;list-style:none;}
.cam_header li {padding:0;margin:0;float:left;border:none;line-height: 14px;}
.cam_header li.wind_avg {margin-left:5px;width:115px;}
.cam_header li.force {width:47px;}
.cam_header li.gust {width:47px;}
.cam_header li.temp {width:58px;}
.cam_header li.images {width:149px;}
.cam_header li.created_by {margin-top:10px;}

.imagesTbl {width:125px;border-width:0;border-spacing:1px;}
.imagesTbl td{width:10%;text-align:center;}

#zoomForm {margin:0;padding:0;}
.cam_zoom {display:inline-block;padding-left:9px;}
#zoom_cb {margin:0;margin-left:3px;padding:0;width:14px;height:14px;background-color:#eee;color:#eee; vertical-align:middle;} 

/* cam */

.n-active { font-weight: bold; }
#webcam { cursor: pointer; }

/* cam footer */

.cam_footer { position: relative; height: 28px; background-color: #eee; color: #444; }
.cam_footer1 { position: absolute; left: 6px; font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: 30px;}
.cam_footer2 { width: auto; position: absolute; top: 0; left: auto; right: 6px; font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: 30px; text-align: right; }

/* ads */

#ad-strip {position:relative;height:100px;}
#ads {position: absolute; left: 838px; top: 150px; width: 154px; height: 466px; border: 0px; overflow:hidden; border:none;}
#sponsor-links {visibility:hidden;}

/* other */

#fb_box a { font-size:10px; }
#fb_box p { margin-left:11px;margin-top:9px;line-height:11px; }
#fb_box img { margin-left: 14px; margin-top: 11px; }
#ils_promo img { margin-left: 8px; margin-top: 9px;margin-bottom:3px; }
#ils_promo p { margin:0;padding:0; margin-top:2px; margin-left:7px; width:165px; font-size:10px; }

/* summary */

#summary_box { position: relative; left: 17px; top: 11px; width: 502px; background-color: #eee; /*border: 1px solid #bbbbbb;*/ margin-bottom: 138px; }

/* ais */

#ais_map { margin-left: 16px; margin-top: 9px; border: 1px solid #bbbbbb; width:972px; height:540px; }

/* live wind */

#nav-livewind {font-size:11px;width:600px;color:#444;}
#nav-livewind .active {font-weight:bold;}

/* google ads */

#google_ad_block1 { position: absolute; left: 17px; margin-top: 11px; }
#google_ad_block2 { position: absolute; left: 749px; margin-top: 11px; }
#g_ad_ais { position: absolute; left:1006px; top: 148px; width: 160px; height: 643px; border:1px solid #eee;}

#ils_promo { position: absolute; left: 838px; margin-top: 11px; width:150px; height:90px; border: 1px solid #E6E6E6; }
#triview_filler_block { position: absolute; left: 1482px; width:76px; margin-top: 11px; height: 90px; border: 1px solid #E6E6E6; }

#fb_box { position: absolute; left: 749px; top: 11px; border: 1px solid #e6e6e6; width: 82px; height: 90px; }

/* */

#cam3 { margin-left: 4px; }
#cam1 { margin-left: 4px; }

/* Graphs */

#wind_12h {width:409px;width:fit-content;margin-top:11px;}
#direction_12h {width:409px;width:fit-content;}
#barom_5d {width:409px;width:fit-content;margin-bottom:17px;}

/* Detail Page */


 
/* Lightning */

#lightning { margin-left: 16px; margin-top:11px; }

.lightning #ads {left:1070px;}
#lightning h1 { margin:0; padding:0; margin-bottom:15px; color: #333; }


#stormvue_box { float:left; height: auto; width: 640px; border: 1px solid #ccc; background-color: #eeeeee;  }
#lightning ul { margin:0; padding:0; padding:8px; padding-bottom:0; height:auto; height: 38px; }
#lightning li { list-style:none; display:inline-block; float:left; color: #666; font-size: 11px; height: 30px;}

#sv_label1 { width: 310px; font-size:11px;}
#sv_label2 { width: 90px; border-left: 1px dotted #aaa; padding-left: 5px; font-size:9px !important;  }
#sv_label3 { width: 120px; border-left: 1px dotted #aaa; padding-left: 5px;  font-size:9px !important; }
#sv_label4 { width: 89px; border-left: 1px dotted #aaa; padding-left: 5px; font-size:9px !important; }
#sv_label5 { width: 80px; padding-top:1px;  }

#sv_applet_bg { width: 640px; height: 558px; background-color: #ccc; position: relative; }
#sv_applet { position:absolute; top:0; left:0; z-index: 10 !important; }
#sv_no_java { position:absolute; top:0; left:0; right:0; background-color: #ccc; padding:10px; color: #444; z-index: 0 !important; opacity: 0.7;}

#sv_info { float: left; width: 165px; margin-left: 6px; border: 1px solid #ccc; background-color: #eeeeee; }
#sv_info p { margin-left: 10px; margin-right: 10px; font-size:11px; line-height:13px; color: #666; }

#sv_info ul { margin:0; padding:0; margin-left: 10px; }
#sv_info li { display:block; background-image:url(/imgs/arrow.gif); background-repeat:no-repeat; background-position: 1px 4px; padding-left:8px;  width:auto; height:14px;}
#sv_info li a { margin:0;}

#sv_graph { clear:both; margin-top:0; width: 670px; width:fit-content; background-color: #eeeeee; padding: 10px; position:relative;  }
#sv_graph p { position:absolute; top:8px; left: 350px; margin-top:0; font-size:11px; color: #666; }

#lightning_nav { position:absolute; left: 165px; top:0px; margin:0; padding: 0 0 0 0px; height: 30px;  }
#lightning_nav li { margin-right: 5px;  }
#lightning_nav .active { font-weight:bold;}

/* Weather error/warning */

.weather_error, 
.weather_warning { background: url(../weather/images/caution.png) no-repeat left center; font-family: Arial, Helvetica, sans-serif; color: red; font-size: 11px; line-height:16px; margin-left: 17px; margin-top: 12px; padding-left: 23px; }

/* Prediction */

#predict { margin-left: 17px; margin-top: 14px; min-height:480px; width: 2150px; /*border:1px solid #eee;*/ }
#predict h3 { margin: 10px 0; padding:0; font-size: 14px; color: #fff; }

.forecast table { border-collapse:collapse;}

.forecast .c1 { width: 100px; }
.forecast th { text-align: left; border: 1px dotted #bbb; border-left: 1px dotted #bbb; border-right: 1px dotted #bbb; border-bottom: 1px solid #ccc; font-size:11px;  padding-left:5px; font-weight:bold; color: #555; }
.forecast td { padding: 1px 3px; border-bottom: 1px solid #ccc; border-right: 1px dotted #bbb; font-family:Verdana, Geneva, sans-serif; font-size:9px; text-align:right;  }
.forecast td { font-size: 11px; }
.forecast td:first-child { text-align:left;}
.forecast td.title { border-top:none; border-left:none; border-right:none;  }
.forecast td.location { font-weight: bold; padding-left:4px; border-top: none; border-left: none; }
.forecast td.day { /*border-right: 1px solid #000;*/ }
.forecast tr { line-height:16px;}
.forecast tr.gap { height: 22px; border-bottom: none;}
.forecast td.fh { width: 29px; text-align:right; }
.forecast td.cleft { text-align:left; }
.forecast td.cmid { text-align:center; }

.f0{background-color:#ffffff;}
.f1{background-color:#ccffff;} 
.f2{background-color:#99ccff;}
.f3{background-color:#ccccff;}
.f4{background-color:#cc99ff;}
.f5{background-color:#cc66ff;}
.f6{background-color:#ff99ff;}
.f7{background-color:#ff9900;}
.f8{background-color:#ff6600;}
.f9{background-color:#ff9999;}
.f10{background-color:#ff6666;}
.f11{background-color:#ff3333;}
.f12{background-color:#ff0000;}

.p-wind-arrow {padding:0;margin:0;vertical-align:middle;}
td.rain {background-color:#99ccff;}

/* Tides */
#tides{margin-left:15px;margin-top:15px;width:700px;}

/* QB */
.cam-column-qb {width:681px !important;}
.container-qb {width:1200px !important;}

#qb-note {margin-top: 10px; margin-right:27px; font-size:9px; line-height:14px; color:#777; }

/* GH1 */
.cam-column-gh {width:720px !important;height:auto;}
.cam_image_gh {height:480px;}
.gh1 #ad-strip {margin-top:100px;}
.gh1 #ads {left:auto;margin-left:10px;}
.gh1 #fb_box {display:none;}
.gh1 #ils_promo {left:749px;}

/* Live Wind */

#svg-container {min-height:460px; padding-top:0px;margin-left:17px; margin-top:11px; padding:0px;}

#speed { font-family:Verdana, Geneva, sans-serif; font-size:45px;fill:yellow;}

.compMain {font-size:18px;line-height:18px; font-family:Verdana, Geneva, sans-serif; background-color:#444;  }
.compMinor {font-size:12px;font-family:Arial, Helvetica, sans-serif;}

.hl { background-color: #6cff00; }
.dataBox { box-sizing: border-box; margin: 0; margin-bottom:6px; padding:6px; padding-bottom:2px; width:210px; min-height:55px; font-size:12px; border:1px solid #aaa;}

.dataBox span {font-size:25px;display:inline-block;font-family:Arial, Helvetica, sans-serif;font-weight:bold;}
.dataBox span.left {width:130px;}
.dataBox span.units {font-size:13px;}

#svg {float:left; margin-right:25px; margin-bottom:10px;}

#readOuts {float:left;margin-right:25px; margin-bottom:10px;}

#mph-label {font-size: 14px; fill: #333;}

#lw-beaufort {float:left; margin-right:20px; margin-bottom:10px;width:210px;}
#lw-beaufort {border-collapse: collapse;} 
#lw-beaufort tr, 
#lw-beaufort td {border: 1px solid #aaa;}

#lw-beaufort td {padding:2px;font-size:14px;}
#lw-beaufort .f {text-align:center;}

#lw-google_ad_block1{position:inherit;}
#arrow{display:none;}

/* Live Wind colour tbl */
#f0.hl{background-color:#ffffff;}
#f1.hl{background-color:#ccffff;} 
#f2.hl{background-color:#99ccff;}
#f3.hl{background-color:#ccccff;}
#f4.hl{background-color:#cc99ff;color:#fff;}
#f5.hl{background-color:#cc66ff;color:#fff;}
#f6.hl{background-color:#ff99ff;color:#fff;}
#f7.hl{background-color:#ff9900;color:#fff;}
#f8.hl{background-color:#ff6600;}
#f9.hl{background-color:#ff6666;}
#f10.hl{background-color:#ff3333;}
#f11.hl{background-color:#ff0000;}
#f12.hl{background-color:#cc0000;}

/* DETAIL */
#weather-detail {margin-top:11px; margin-left:17px;} 
#weather-detail th {font-size:12px;text-align:left;}
#weather-detail td {border-bottom:1px solid #aaa;font-size:11px;padding:2px;}
#wd-almanac-data {width:250px;}
#wd-almanac-data td{border:none;vertical-align:top;}

th#wd-current, th#wd-almanac {text-align:center;font-size:14px;}

.wd-col1{width:110px;}
.wd-col2{width:55px;}
.wd-col3{width:55px;}
.wd-col4{width:55px;}
.wd-col5{width:55px;}
.wd-col6{width:55px;}
.wd-col7{width:55px;}
.wd-col8{width:55px;}
.wd-col9{width:55px;}
.wd-col10{width:55px;}
.wd-col11{width:55px;}
.wd-col12{width:55px;}

.tblsmall{font-family:Verdana, Geneva, sans-serif;font-size:10px;color:#555;}
#weather-detail{width:800px;}
#weather-detail table {border-spacing:0;border-collapse:separate;}
#weather-detail th {background-color:#9FB3CD;color:#fff;font-weight:bold;}
.wd-param {font-weight:bold;}
#wd-data{text-align:right;}