/*NOTE: use page width 960px*/

/*** GENERAL ***/
html,body{margin:0;padding:0;background:white url(../../../img/bg_800x150.jpg) repeat-x;font-family:Tahoma, Verdana, Arial, sans-serif;font-size:11px;width:100%;height:100%;position:absolute;}
a {color:black;}
p {margin:0;}
h3 {font-size:14px;font-weight:bold;margin:5px 0 5px 0;}
h4 {font-size:12px;font-variant:normal;font-weight:bold;margin:3px 0 3px 0;}
h5 {font-size:11px;font-variant:normal;font-weight:bold;font-style:italic;margin:3px 0 3px 0;}
button, input, textarea, select {font-family:Tahoma,Verdana,Arial,sans-serif;font-size:11px;vertical-align:bottom;margin:1px 0;padding:0 3px;height:15px;}
input[type="text"], input[type="password"], textarea {width:190px;}
select {width:174px;} /*at least in Firefox select width behaves differently*/
button, input[type="button"], input[type="submit"], input[type="reset"], select {box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing: content-box;}
fieldset {-moz-border-radius-topleft:6px;-webkit-border-top-left-radius:6px;-moz-border-radius-topright:6px;-webkit-border-top-right-radius:6px;}
.ui-autocomplete {width:190px;margin:0;padding:0 2px;list-style-type:none;}
.ui-autocomplete li {margin:0;padding:0;}
.brightColor {color:white;}
.disabledStyle {color:#888;cursor:default;}
.inlineLeft {display:inline;float:left;}
.marginRightLittle {margin-right:5px;}
.marginRight {margin-right:11px;}
.marginLeft {margin-left:11px;}
.marginTop {margin-top:11px;}
.marginBottom {margin-bottom:11px;}
.notShown {display:none;}
.clearBoth {clear:both;}
.noBorder {border:none;}
.infoTxt {font-variant:normal;font-style:italic;}
.error {display:block;margin:0 0 5px 0;padding:0;color:red;/*for validation*/}
ul.linkList {list-style-type:none;padding:0;margin:0;}
ul.linkList li {padding:0 8px 0 0;display:inline;}
/* JQuery tools:in scrollablesta, mikä se tekee ???? */
:focus {-moz-outline-style:none;}

/*** HEADER & CONTAINER & FOOTER ***/
div#header a img{border:none;display:block;float:left;margin:1% 0;}
div#loginNavi {float:right;display:inline;text-align:right;margin-top:27px;}
div#loginNavi ul {margin:0 34px 0 0;}
div#container {text-align:left;height:100%;width:960px;margin:0 auto;}
div#dataContainer {border:solid #333 5px;-moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-box-shadow:0 0 30px 5px #333;-webkit-box-shadow:0 0 30px #333;clear:both;height:80.5%;min-height:460px;position:relative;overflow:hidden}
div#footer {clear:both;background:white;width:100%;text-align:right;margin-bottom:0;}
div#footer ul {margin:5px 34px 0 0;} /*right margin takes into account 11px from linkList right padding -> 45px*/

/*** MAPCOLUMN ***/
div#mapColumn {position:relative;width:400px;height:100%;float:left;overflow:hidden/*to avoid e.g. overflowing copyright if map is small*/}
div#mapHeading {height:45px;padding:5px 5px 0 5px;}
ul#mapTabs {top:25px;}
ul#iconLegend {margin:0;padding:5px 0 0 0;float:right;list-style-type:none;}
ul#iconLegend li {padding:0 0 0 3px;display:inline;}
.mapForm {height:25px;float:left;}
ul#mapLinkList {float:right;padding-right:0;margin-right:0;}
ul#mapLinkList li {padding:0 0 0 8px;/*override linkList padding style*/}
div#mapArea {position:absolute;top:50px;width:399px;bottom:0px;border-top:1px solid black;border-right:1px solid black;}
.zoomIn {float:left;cursor:pointer}
.infoWindow {width:250px;max-height:210px;overflow:auto;}
.infoWindow textarea {height:60px;}
div.infoWindowUrl {width:150px;word-wrap: break-word;}
/* since php generates the checkbox groups, we need to add styling in a bit complicated manner instead of using classes */
span#windDirCheckboxes label {min-width:35px;display:inline-block;}
span#windDirCheckboxes input[type="checkbox"], span#sportsCheckboxes input[type="checkbox"] {margin-right:3px;}

/*** DATACOLUMN HEADING & GENERAL ***/
div#dataColumn {width:546px;padding-left:4px;height:100%;float:left;}
div#dataHeading {height:45px;padding:5px 5px 0 5px;}
div#search {float:right;}
input#searchBox {margin:0 2px;width:100px;}
.searchBoxNoMatch {color:red}
div#scrollableNavigation {width:380px;}
a.prev, a.next, a.prevPage, a.nextPage, a.nextSearch, a.prevSearch {display:inline;width:18px;height:18px;background:url(../../../img/left_navigate_18x18.png) no-repeat;float:left;margin:2px 0px;cursor:pointer;font-size:1px;}
a.prev, a.next {margin-top:18px;}
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover, a.prevSearch:hover, a.nextSearch:hover {background-position:0px -18px;}
a.disabled {visibility:hidden !important;}
a.next, a.nextPage, a.nextSearch {background-image:url(../../../img/right_navigate_18x18.png);clear:right;}
div.navi a {width:10px;height:10px;float:left;margin:6px 2px 2px 2px;background:url(../../../img/navigator_10x10.png) 0 0 no-repeat;display:block;font-size:1px;}
div.navi a:hover {background-position:0 -10px;}
div.navi a.active {background-position:0 -20px;}

/*** DATACOLUMN SCROLLABLE & SLIDER ***/
div.scrollable {position:relative;overflow:hidden;width:546px;height:142px;}
div#items {position:absolute;width:20000em;clear:both;}
#items .scrollableItem {float:left;width:181px;height:142px;background:#777 url(../../../img/h142.png) repeat-x;text-align:left;border-left:1px solid #333;border-top:1px solid #333;cursor:pointer;}
#items .scrollableItem.hover {background-color:#555;}
#items .scrollableItem.active {background-color:#404b55;}
.weatherOverlayCmd {text-decoration:underline;text-align:center;}
table.scrollableHeadTable {width:100%;}
table.scrollableHeadTable {margin:0;padding:0;}
table.scrollableHeadTable h4 {margin-bottom:0;}
table.scrollableHeadTable td {margin:0;padding:0;}
table.scrollableHeadTable td.pieChart {width:27px;} /* piechart is 24px, so 27px adds some room to it */
table.fcastTable {text-align:center;border-collapse:collapse}
table.fcastTable td {border:0px;height:18px;}
table.fcastTable td.badWindDir {color:gray;}
table.fcastTable td.windSpeedDefault {color:#c738da;font-weight:900;} /* default, used for very high winds */
table.fcastTable td.windSpeed0, table.fcastTable td.windSpeed1 {color:#b3b3b3;font-weight:100;}
table.fcastTable td.windSpeed2, table.fcastTable td.windSpeed3 {color:#bcdad8;font-weight:200;}
table.fcastTable td.windSpeed4, table.fcastTable td.windSpeed5 {color:#81d87e;font-weight:400;}
table.fcastTable td.windSpeed6, table.fcastTable td.windSpeed7, table.fcastTable td.windSpeed8 {color:#dacf56;font-weight:600;}
table.fcastTable td.windSpeed9, table.fcastTable td.windSpeed10, table.fcastTable td.windSpeed11, table.fcastTable td.windSpeed12 {color:#db5f53;font-weight:800;}
tr.fcastTime td {height:34px;border-bottom:1px solid gray;}

div#scrollableCmds {padding:6px 5px 5px 5px;background:#777 url(../../../img/h142_flipped.png) repeat-x;-moz-border-radius-bottomleft:6px;-webkit-border-bottom-left-radius:6px;position:relative;}
div#tagSlider {width:220px;position:absolute;left:230px;top:8px;}
div#tagSlider .ui-slider-handle {width:60px;margin-left:-30px;} /* wider than default slider handle */
input#tagSubmit {position:absolute;right:5px;top:2px;}
div#tagSlider a {font-family:Tahoma, Verdana, Arial, sans-serif;font-size:11px;font-weight:normal;text-decoration:none;color:black;text-align:center}
form#tagForm {margin-bottom:5px}

/*** OVERLAYS ***/
div.overlay {display:none;z-index:10000;width:605px;min-height:350px;background:white url(../../../img/bg_800x150.jpg) repeat-x;border:solid #333 5px;-moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px;-moz-box-shadow:0 0 10px 2px #333;-webkit-box-shadow: 0 0 10px #333;padding:0px 10px;}
div.overlay .close {background-image:url(../../../img/close.png);position:absolute;right:-15px;top:-15px;cursor:pointer;height:35px;width:35px;}
div#addSessionOverlay textarea {width:267px;height:30px;}
div#addCommentOverlay textarea {width:500px;height:190px;}
div#addReportOverlay textarea {width:500px;height:80px;}
div.overlay form {margin-top:10px;}
div.overlay .equipmentYear {width:auto;} /* this field is too narrow in IE & Chrome if we use width 40 which would be good in Firefox*/
div.overlay .equipmentSize {width:56px;}
div.overlayWidth25 .ui-autocomplete {width:56px;} /*in practice this is equipment size field, but there is no coupling, only div is known*/
.ui-datepicker {font-size:11px !important;width:190px !important;}
.ui-datepicker .ui-state-active {background:#FCEFA1 url(images/ui-bg_glass_65_ffffff_1x400.png) repeat-x scroll 50% 50% !important;} /* a bit more visible */
div#weatherOverlay {height:510px;}
div#weatherOverlayContent {position:absolute;margin-left:31px;top:46px;}
h4#weatherOverlayHead {margin:3px 31px 0px 31px;display:inline}
p#worldWildWeather {float:right;margin-right:31px}
ul#weatherOverlayTabs {top:20px;padding-left:30px}
div#sessionSlider {width:320px;}
div#sessionSlider .ui-slider-handle {width:40px;margin-left:-20px;} /* wider than default slider handle */
div#sessionSlider a {font-family:Tahoma, Verdana, Arial, sans-serif;font-size:11px;font-weight:normal;text-decoration:none;color:black;text-align:center}
div.overlayLeft {clear:both;float:left;margin:5px 0;}
div.overlayRight {float:left;margin:5px 0;}
div.overlayWidth25 {width:25%;}
div.overlayWidth40 {width:40%;}
div.overlayWidth50 {width:50%;}
div.overlayWidth60 {width:60%;}
div.overlayWidth75 {width:75%;}
div.overlayWidth100 {width:100%;}
div.overlay fieldset {margin:0 2px;padding:0 6px;}
div.overlay legend {font-weight:bold;}

/*** DATACOLUMN MSGS **/
div#msgs {position:absolute;top:242px;bottom:0px;padding-left:5px;width:541px;overflow:auto;background:#eee;border-left:solid black 1px;border-top:solid black 1px;-moz-border-radius-topleft:6px;-webkit-border-top-left-radius:6px;}
div#msgsHeader {width:506px;}
form#msgsForm {width:100%;margin-bottom:5px;}
#msgTxt {width:500px;height:15px;}
#msgCancel, #msgSubmit {float:right;}
table#msgTable {border-collapse:collapse;border-spacing:5px;clear:both;width:100%;}
.msgHead td {background:#eee url(../../../img/h15.png) repeat-x;font-style:italic;padding-right:5px;vertical-align:baseline;}
.msgHead .firstTd {-moz-border-radius-topleft:6px;-webkit-border-top-left-radius:6px;}
.msgBody td {background:#eee;}
.msgBody a {display:inline;}
div#msgs h3 {width:50%;float:left;}
a#myMsgsCmd {float:right;margin-top:5px;}

/*** OTHER PAGES ***/
.boxedDiv {border:solid #333 5px;-moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-box-shadow:0 0 30px 5px #333;-webkit-box-shadow:0 0 30px #333;clear:both;padding:5px 30px 5px 30px;position:relative;min-height:400px;background:transparent url(../../../img/bgwaves_600x150.jpg) repeat-x;background-position:bottom;}
.linkRight {float:right;}
.boxedDivLeftContent {clear:both;float:left;width:420px;margin-right:30px;}
.boxedDivRightContent {float:left;width:420px;}
.boxedDiv .infoTxt, .boxedDiv form {margin-bottom:10px;}
.boxedDiv input[type="submit"] {vertical-align:bottom;}
.boxedDiv ul {margin:2px 0 10px 0;}
#dummy {clear:both;}
#rootPageBody .boxedDiv {background-color:white;} /* hack since S60 browser can't handle simulteneous top/bottom backgrounds but shows black */
#rootPageBody h3 {font-size:16px;}
a.rootPageNavigate {display:inline;float:left;margin:40px 40px 0 0;position:relative;}
a.rootPageNavigate img {border:solid #333 1px;-moz-box-shadow:0 0 10px 2px #333;-webkit-box-shadow:0 0 15px #333;}
#rootPageQuote {clear:both;padding:60px 80px 0 0;}
#rootPageQuoteRef {padding:10px 0 0 10px;}
#rootPageQuote, #rootPageQuoteRef, #rootPageQuoteRef a {color:#999;font-family:"Times New Roman", serif;font-size:22px;font-style:italic;letter-spacing:4px;font-weight:100;}
/* my msgs view */
table#myMsgsTable th {vertical-align:top;}
#myMsgsTable .row_selected td {color:#5353ff;}
tr.odd {background-color:#e2e6e9 !important;} /* override default color*/
div.msgtoolbar {float:left;height:30px;margin-bottom:1em;padding:8px 3px 0 3px;}
input#deleteMsg {margin-left:300px;}
.TableTools, .TableTools_button {border:none !important;background-color:transparent !important;}
/* add equipment form */
#addSailForm .equipmentSize, #addBoardForm .equipmentSize {width:30px;display:inline;float:left;margin-right:5px;}
/* spot change view */
form#changeSpotForm textarea {width:500px;height:190px;}

.inlineform {display:inline;}
.inlinep {display:inline;}
.headcellstyle {font-weight:bold;}
.tablecellstyle {font-variant:normal;}
.tablestyle {text-align:left;border-spacing:5px;}
.caption {font-weight:bold;text-align:left;}
.enclosingtd {width:100%;padding:0 0 11px 0;}
.innertd {width:100%;}

/*********** start tabs ***********/

ul.tabs {clear:both;list-style:none;margin:0 !important;padding:0;height:25px;position:absolute;}
ul.tabs li {float:left;text-indent:0;padding:0;margin:0 !important;list-style-image:none !important;}
ul.tabs a {background: url(../../../img/tabs.png) no-repeat 0 0;font-size:11px;display:block;height:20px;line-height:20px;width:134px;text-align:center;text-decoration:none;color:#333;padding:0;margin:0;position:relative;top:5px;}
ul.tabs a:active {outline:none;}
ul.tabs a:hover {background-position:0 -31px;color:#fff;}
/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {background-position: 0 -62px;cursor:default !important;color:#000 !important;}
ul.tabs a.s 		{ background-position:-133px 0;width:81px;}
ul.tabs a.s:hover 	{ background-position:-133px -31px;}
ul.tabs a.s.current { background-position:-133px -62px;}
ul.tabs a.xs 		{ background-position:-213px 0;width:57px;}
ul.tabs a.xs:hover 	{ background-position:-213px -31px;}
ul.tabs a.xs.current { background-position:-213px -62px;}

/*********** end tabs ***********/