/*
  ..\wsys\webhyd.wsys.css
  Core style sheet for HYDSTRA web portal application

  May be overridden by settings in ..\wini\webhyd.wini.css
  Supersedes ..\wini\webhyd.css

***keyword-flag***     "Version %v  %f"
"Version 2  24-Nov-16,12:39:42"

*/
html, body {
  width:99%;
  height:99%;
}
html {
  overflow:hidden;
  padding:0px;
  margin:0px;
}
body {
  overflow:auto;
  position:fixed;
  margin:0px;
  /* trbl  note settings in webhyd.js::renderXML() to adjust padding */
  padding:5px 0 0 5px;
  -webkit-backface-visibility: hidden; /* Chrome37 workaround for layer squashing bug */
  transform:translate3d(0,0,0);        /* fixes weird scrollbar/zIndex interaction bug - lightbox was not at the front */
}
body, input, button, .menu {
  font-family:Verdana,Tahoma,Arial,MS Sans Serif;
  font-size:100.01%;
  color:black;
}
iframe, select {
  background-color:white;
}
iframe {
  vertical-align:top;
  margin-top:2px;
  overflow-x:scroll;
  overflow-y:scroll;
  -webkit-overflow-scrolling:touch;
}
hr {
  color:lightgray;
  background-color:lightgray;
}
#languagesdiv {
  text-align:right;
  margin-top:5px;
}
.language {
  margin-right:3px;
  padding:1px 3px;
  border:1px solid lightblue;
  background-color:#eee;
  border-radius:3px;
  font-weight:bold;
  cursor:pointer;
}
/* DSE styles */
/* GW tabs header styles */
.gwpadleft1 { padding-left:10px; }
.gwpadleft2 { padding-left:20px; }
.gwpadleft3 { padding-left:30px; }
.gwtabhead {
  font-size:85%;
  margin-bottom:20px;
  white-space:nowrap;
  color:darkgray;
}

/* Webkit scroll bars - esp for Safari on iPad/iPod/iPhone */
::-webkit-scrollbar {
  width:10px;
  height:10px;
  border-bottom:1px solid #eee; 
  border-top:1px solid #eee;
}
::-webkit-scrollbar-thumb {
  -webkit-border-radius:5px;
  border-radius:5px;
  background-color:#c3c3c3;
  border:2px solid #eee;
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);
}

::-webkit-scrollbar-track {
  -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
  -webkit-border-radius:5px;
  border-radius:5px;
}

#wrapper {
  margin:0 5px 0 5px;
}
#dark { /* 'dark' overlay (under lightbox) */
  position:fixed;
  top:0;
  left:0;
  display:none;
  background-color:white;
  width:100%;
  height:100%;
  z-index:9998;
  opacity:0.7;
  overflow:hidden;
}
#light { /* lightbox div */
  position:fixed;
  display:none;
  text-align:right;
  padding:6px;
  background-color:gainsboro;
  z-index:9999;
  overflow:hidden;
}
#light img {
  float:none;
  margin:2px;
  border:none;
  vertical-align:middle;
  cursor:pointer;
}
#lbdiv {
  text-align:center;
  white-space:nowrap;
}
#lbcaption {
  font-weight:bold;
}
#lbbuttons {
  left:12px;
  top:12px;
  padding:10px 2px 2px 2px;
  margin:2px;
  text-align:left
}

/* latest values tab extra table */
.lv_extratable {
  margin:5px 20px 15px 20px;
  width:1%;
  font-size:90%;
}

.prn {
  font-family:"Courier New";
  padding:5px;
  white-space:nowrap;
}
.code {
  font-family:courier new;
  margin:5px;
  padding:3px;
  background-color:gainsboro;
  border:1px solid #808080;
}
.msgbox,
.helpbox,
#map,
#legendimg,
.dpTable,
#image {
  border:1px solid #808080;
}
.site_loading {
  color:blue;
}

/* site selection popups styling */
.div_site_selection {
  background-color:gainsboro;
  margin-top:2px;
  border:1px solid black;
  padding:5px;
  overflow:auto;
}
.site_selection_left {
  white-space:nowrap;
  vertical-align:top;
  padding-right:5px;
  width:1%;
}
.site_selection_right {
  max-width:80%;
  vertical-align:top;
}
.sitelisttype_radio {  /* sitelist type radio button rows */
  margin-bottom:3px;
}
.ssui_sitecount {
  color:blue;
  font-weight:bold;
}
.heading_site_selection {
  white-space:nowrap;
}
.heading_site_selection, .heading_search, .heading_map_methods, #site_selection_count, .site_selection_filters {
  font-weight:bold;
  margin-bottom:0;
}
.div_notes {
  width:1%;
  padding:3px;
  border:1px solid gray;
}
.site_selection_notes {
  display:none;
  color:gray;
  white-space:nowrap;
}
.site_selection_searchbox {
  padding-right:10px;
}
.site_selection_filters_heading, .site_selection_loadsites_heading {
  font-weight:bold;
}

.site_selection_close,
.site_selection_upload_clear {
  position:relative;
  float:right;
  right:-5px;
  top:-5px;
  width:25px;
  height:25px;
}
.site_selection_upload_clear {
  padding:0px 45px 0 0;
}
.site_selection_close {
  z-index:10000;
}
#siteselection_downloadform .variable_group {
  font-weight:bold;
  color:blue;
}
#siteselection_downloadform .options_heading {
  font-weight:bold;
  color:black;
}

button {
  overflow:visible;
  padding:3px 6px 3px 6px;
  margin:2px 5px 2px 0px;
  width:auto;
  cursor:pointer;
}
.filterslist,
.loadsites {
  white-space:nowrap;
}
.ssui_subheading {
  font-size:120%;
  font-weight:bold;
  line-height:30px;
}
.estimate, .estimate_heading, .extract {
  color:blue;
}
.estimate_heading {
  font-weight:bold;
}
.ssui_extract_button {
  color:gray;
}
.ssui_message_box {
  border:none;
  width:350px;
  margin:5px 0 5px 15px;
  display:none;
  white-space:normal;
}

.ssui_group {
  margin-left:10px;
}
table.ssui_interval_period td {
  padding:4px 3px 0 0;
  vertical-align:top;
}
.tab_message1 {
  color:#a9a9a9;
  font-weight:bold;
}
.tab_message2 {
  color:#a9a9a9;
}
.input_depth { /* styling for custom complex_filter */
  background-color:white;
}
.questionmark { /* styling for question mark image (context help) */
  padding-left:3px;
}
.option_grpkey {
  color:black;
  font-weight:bold; /* only works in FF */
}
.option_grpval {
  color:blue;
}

#thinblackborder,
.titlelinkon,
.titlelinkoff,
#light,
.small,
.ptable,
.ptable td {
  border:1px solid black;
}
/*.ptable {
  border-collapse:collapse;
}*/
/*use this instead of border-collapse for FF:works with / without Transitional doctype */
.ptable {
  border-left:1px solid black;
  border-top:1px solid black;
  border-right:none;
  border-bottom:none;
}
.ptable td {
  border-left:none;
  border-top:none;
  border-right:1px solid black;
  border-bottom:1px solid black;
}
p {
  margin:5px 0px 10px 0px;
}
ul,
li {
  margin-top:2px;
  line-height:120%;
}
.small { /* image thumbnails */
  margin:5px;
  width:100px;
  cursor:pointer;
}
#plotsize {
  font-weight:bold;
}
fieldset {
  border:1px inset;
  position:static;
  padding:5px;
  -moz-border-radius:6px;
  border-radius:6px;
}
legend {
  color:#696969;
  font-weight:bold;
  font-style:italic;
}
a,
a:hover,
a:visited,
.anchor,
.stdlink,
.stdmenulink,
.stdmenulinkactive,
.bookmarklink {
  text-decoration:none;
  color:blue;
  cursor:pointer;
  font-weight:normal;
}
.stdmenulink img,
.anchor img {
  border:none;
  vertical-align:middle;
}
.language_icon {
  padding-left:5px;
}
.language_link {
  position:static;
  float:right;
}
.menu a,
.menu a:visited,
.menu span .anchor {
  text-decoration:none;
}
.menu a:hover,
.menu span .anchor:hover {
  text-decoration:none;
}
.divbox, .divhovertip, .divhovertipp {
  position:absolute;
  font-size:80%;
  border:1px solid #808080;
  padding:0px 2px 1px 2px; /*trbl*/
  white-space:nowrap;
}
.divbox, .divhovertipp {
  -webkit-border-radius:3px;
  border-radius:3px;
}
.divhovertip, .divhovertipp {
  display:none;
  background-color:#d3d3d3;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /*first*/
  filter:alpha(opacity=100);                                         /*second*/
  opacity:1.0;
}
.divhovertipp {
  padding:3px 5px 4px 5px; /*trbl*/
}
.shadow {
  -webkit-box-shadow:1px 1px 3px gray;
  box-shadow:1px 1px 3px gray;
  -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='gray')"; /* For IE 8 */
}
.not_opaque {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /*first*/
  filter:alpha(opacity=0);                                         /*second*/
  opacity:0.0;
}
.opaque {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /*first*/
  filter:alpha(opacity=100);                                         /*second*/
  opacity:1.0;
}
.dateformat {
  color:#a9a9a9;
}
.plusminus {
  font-weight:bold;
  width:20px;
}
.plusminus:hover,
.menu_legend:hover {
  cursor:pointer;
}
.imglink:hover {
  cursor:pointer;
}
.dowrap {
  white-space:normal;
}
.msgbox {
  position:absolute;
  display:none;
  background-color:#d3d3d3;
  margin:0 auto;
  margin-top:5%;
  margin-left:40%;
  margin-right:40%;
  width:20%;
  padding:10px;
  z-index:9999;
  font-size:90%;
}
.msgbox_cf {
  position:fixed; /* non IE */
}
.msgbox_ssui {
  background-color:white;
}
.helpbox {
  position:absolute;
  display:none;
  background-color:#d3d3d3;
  margin:0 auto;
  width:auto;
  overflow:auto;
  white-space:nowrap;
  padding:5px;
  z-index:9999;
}
.menubox { /* favourites, search */
  padding:0px;
  white-space:nowrap;
  overflow:hidden;
}
.bookmarklink {
  float:right;
  font-weight:normal;
  padding-right:15px;
  font-size:small;
}
#cattext {
  position:static;
  font-weight:bold;
  font-style:normal;
  color:#a9a9a9;
  width:100%;
}
#titletext,
#coretitletext,
#title2text {
  position:static;
  font-weight:bold;
  text-align:left;
  color:#0083BE;
}
.heading_site_selection, .heading_search, .ssui_subheading {
  color:#0083BE;
}
.ssui_subsubheading {
  color:black;
}
#titletext,
#coretitletext,
.heading_site_selection  {
  font-size:1.5em;
}
#title2text {
  font-size:1.3em;
  padding-top:5px;
}
#tabstext {
  text-align:left;
  padding:10px 0 10px 0;
}
#tabtext_underline {
  border-top:solid black 1px;
  margin-top:3px;
}
/* change trend arrow symbols */
.change {
  color:blue;
  font-family:Times New Roman;
  font-size:140%;
}

#mapdiv {
  position:relative;
  left:5px;
  border-radius:5px;
  border:0.5px solid lightblue;
}

.tip { /* styles for tooltips */
  position:absolute;
  padding:10px;
  z-index:1;
  display:none;
  border:1px solid #eee;
  background-color:white;
  color:black;
  border-bottom:3px solid #eee;
  border-right:3px solid #eee;
}
#gtip { /* Google Maps tooltips */
  position:absolute;
  visibility:hidden;
  z-index:10;
}
.gtip { /* Google Maps tooltip table */
  width:1%;
  padding:0 5px 2px 5px;
  border:1px solid #808080;
  background-color:#eee;
}

#oltip { /* OpenLayers tooltips */
  position:absolute;
  visibility:hidden;
  z-index:10;
}
.oltiptable { /* OpenLayers tooltip table */
  width:1%;
  padding:0 5px 2px 5px;
  border:1px solid #808080;
  background-color:#eee; /* rgb( 211, 211, 211 ) */
}
.oltiptable td { /* OpenLayers tooltip table cell */
  font-size:80%;
  width:1%;
}

/* Google Map legend (true image) */
#legendimg {
  position:relative;
  border-radius:5px;
  top:5px;
  left:5px;
  border:1px solid gray;
  z-index:999;
}
/* Google Map legend (DIV containing HTML) */
div #legendimg {
  background-color:white;
  font-size:80%;
  white-space:nowrap;
  padding:5px;
  display:inline-block;
}
/* dynamic legend circle icons - background-color supplied in style */
.dot {
  height:7px;
  width:7px;
  border-radius:50%;
  display:inline-block;
  border:1px solid darkslategrey;
}

/* Google Map controls */
#zoomcontrol {
  margin:5px;
  background-color:white;
  border:1px solid gray;
  border-radius:5px;
  cursor:pointer;
  width:30px; 
  height:52px;
}
#zoominbuttonimg {
  padding:7px 7px 5px 7px;
}
#zoomoutbuttonimg {
  padding:0px 7px 8px 7px;
}

#fullscreencontrol {
  margin:5px;
  margin-left:6px;
  background-color:white;
  border:1px solid gray;
  border-radius:5px;
  cursor:pointer;
  width:30px;
  height:30px;
  /* for webolmap.htm */
  position:absolute;
  right:0;
  top:145px;
  z-index:999;
}
#fullscreenimg {
  padding:7px;
}

#layerscontrol {
  margin:3px;
  background-color:white;
  border:1px solid gray;
  border-radius:4px;
  display:inline-block;
  box-shadow:rgba(0, 0, 0, 0.398438) 0px 2px 4px;
}
.googlemaplayer {
  font-weight:normal;
  cursor:pointer;
  white-space:nowrap;
  padding:2px 4px 3px 5px;
  border-bottom:1px solid #666;
  font-size:11px;
}

/* Google Map search input box */
#searchinput {
  width:220px;
  height:15px;
  margin-top:5px;
  margin-right:6px;
  opacity:0.5;
  display:none;
}
#searchinput-control { /* container for search input box */
  position:absolute;
  top:3px;
  right:200px;
  z-index:5;
}
#searchInput, #searchImg, #selectBox {
  margin:0;
  padding:0;
}
#searchInput, #selectBox {
  opacity:0.6;
  font-size:80%;
}
#searchInput {  /* search input box - span element */
  float:left;   /* enables search image icon to sit right of this */
  min-width:250px;
  max-width:1000px;
  height:15px;
  border:1px solid gray;
  background-color:white;
}
#searchImg {
  cursor:pointer;
}
#selectBox {
  display:none;
}

/* for webmap */
#homecontrol {
  margin:5px;
  background-color:white;
  border:1px solid gray;
  padding:4px;
  border-radius:5px;
  cursor:pointer;
  text-align:center;
  font-family:Arial,sans-serif;
  font-size:11px;
}

/* for webmap & webolmap */
#base-layer-control,
#home-control {
  position:absolute;
  right:5px;
  background-color:white;
  border:1px solid #666;
  box-shadow:rgba(0, 0, 0, 0.398438) 0px 2px 4px;
  z-index:9999;
  border-bottom:0;
  border-radius:4px;
}
#base-layer-control {
  top:30px;
  display:inline-block;
}
.blc-button,
#home-control {
  cursor:pointer;
  border-bottom:1px solid #666;
  padding:2px 5px 3px 5px;
  font-size:11px;
}
#home-control {
  top:5px;
}
#home-control,
.blc-button.current,
.slc-button.current {
  font-weight:bold;
}
.sites-layer-control {
  position:absolute;
  border-radius:4px;
  right:5px;
  background-color:white;
  border:1px solid #666;
  box-shadow:rgba(0, 0, 0, 0.398438) 0px 2px 4px;
  z-index:9999;
  border-bottom:0;
}
.slc-button {
  cursor:pointer;
  border-bottom:1px solid #666;
  padding:2px 0px 3px 5px;
  font-size:11px;
}
.popup {
  font-family:Verdana,Arial;
  font-size:10px;
}
#mapFoot {
  background-color:#045fa8;
  border:0.5px solid #045fa8;
  margin-left:5px;
  width:90%;
  display:none;
  border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
}
#mapScale,
#mapMousePosition,
#mapMousePositionUTM {
  background-color:#045fa8;
  font-size:9px;
  text-align:center;
  padding:6px 9px 6px 9px;
  margin:0;
  color:white;
  height:13px;
  float:left;
}
#mapMousePosition {
  min-width:100px;
}
#mapMousePositionUTM {
  min-width:120px;
}
#mapScale,
#mapMousePosition,
#mapMousePositionUTM {
  white-space:nowrap;
  border-right:solid 1px #999;
}
#mapScale {
  border-bottom-left-radius:5px;
}

.hovervalue { /* hovertip value */
  text-align:right;
  width:1%;
}
.hovervaluedt { /* hovertip value datetime */
  font-style:italic;
  width:1%;
}

#map { /* Google Maps */
  margin-left:5px;
}

.markerlabel {   /* permanent site marker data tip e.g. for weblatest PermVar */
  position:absolute;
  background-color:gainsboro;
  border:1px solid darkgrey;
  padding:1px;
  display:inline-block;
  margin-left:7px;
  margin-top:-5px;
}

.response { /* AJAX text response divs */
  display:block;
  font-weight:bold
}
.textright {
  text-align:right;
}
#floatright {
  float:right;
  padding-right:10px;
  text-align:right;
}
.aligntop td {
  vertical-align:top;
}
.tabledivider {
  line-height:0;
  background-color:#D3D3D3;/* lightgray */
}

/* custom dates datepicker styles */
.cfcustomdatestable {
  border:1px solid gray;
  border-radius:4px;
  padding:3px 0px 6px 8px;
}

/* Style for Custom Outputs Data table heading cells */
.tableheading {
  background-color:#D3D3D3; /* lightgray */
  color:red;
  font-weight:bold;
  vertical-align:top;
  white-space:nowrap;
}
/* Style for Custom Outputs Data table datetime cells */
.tabledtimecells {
  background-color:white;
  vertical-align:top;
  white-space:nowrap;
}
/* Style for Custom Outputs Data table data cells */
.tabledatacells {
  background-color:white;
  vertical-align:top;
}
/* Style for Custom Outputs Data table outside cells */
.tabledata_outsidecells {
  background-color:white;
  vertical-align:top;
  padding-right:10px;
  border:1px solid gainsboro;
}
#datatabletitle {
  color:#585656;
  font-weight:bold;
  padding-bottom:6px;
  padding-left:0px;
}
.data_table {
  display:none;
  cursor:pointer;
}
/* Style for Data table heading cells */
.data_table td {
  padding:3px;
  vertical-align:top;
  text-align:right;
  white-space:nowrap;
}
td .data_tableheading {
  background-color:#D3D3D3;/* lightgray */
  color:red;
  font-weight:bold;
  text-align:left;
}

/* Style for Latest Values Data table date cells */
.data_tabledatecells {
  background-color:white;
  font-weight:bold;
}
/* Style for Latest Values Data table time cells */
.data_tabletimecells {
  background-color:white;
}
/* Style for Latest Values Data table data cells */
.data_tabledatacells {
  background-color:white;
}
/* Style for Latest Values Data table total data cells */
.data_tabletotal {
  background-color:white;
  font-weight:bold;
}

/* standard data table styles */
.block {
  border-collapse:collapse;
  border-spacing:0; /* equivalent to <table cellspacing="0" */
}
.block tbody td {
  border:1px solid lightblue;
  padding:3px 4px; /*tb rl*/  /* analagous to <table cellpadding="3" */
}
.block tr {
  background-color:linen;
}
.block tr:nth-of-type(2n) {
  background-color:gainsboro;
}
.head {
  background-color:dodgerblue;
  color:white;
  white-space:nowrap;
  text-align:left;
  padding:3px 4px;
  vertical-align:bottom;
}
.lv_group {
  font-weight:bold;
}

/* Custom Outputs variable type heading */
.variable_type,
.variable_group {
  color:blue;
  font-weight:bold;
}

/* weblog styles */
.weblogblue {
  color:blue;
}

/* Attributes for tab links */
.titlelinkon {
  /* The link matching the active "tab" */
  background-color:white;
  color:black;
  border-bottom-color:white;
  padding:3px 9px 3px 9px;
  font-weight:bold;
}
.titlelinkoff {
  /* The link matching the inactive "tab" */
  background-color:#EDEDE1; /* pale gold */
  cursor:pointer;
  color:black;
  padding:3px 6px 3px 6px;
  /* top right bottom left */
}

/* styles for webhyd.pl?main body */
#webhydpl_main {
  padding:0;
  margin:0;
  left:0;
}
.variable_message {
  font-weight:normal;
}
/* make button container float if button inside table cell */
.float_button {
  position:fixed;
  top:5px;
  left:10px;
  z-index:9999;
}
.menu, .help, .output, .ws {
  overflow:auto;
}
.ws {
  font-size:80%;
  margin:5px;
}
.menuframe { /* styling for the menu iframe */
  background-color:#cdd6e3;
  border:1px solid gray;
}
#hccontainer {
  margin:5px 5px 5px 20px;
  border:1px solid lightblue;
  text-align:center;
  font-size:80%;
}

.categoryname {
  font-weight:bold;
  margin-top:10px;
}

/* styles for intro frame body */
.intro {}
/* styles for menu frame body */
.menu {}
/* styles for help frame body */
.help {}
/* styles for output frame body */
.output {}

/* styles for weblog body */
.weblog {
  font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size:8pt;
  color:black;
  background-color:gainsboro;
}

/* menu frame styles */
.menu img {
  border:none;
}

/* menu tree */
.treetab {
  table-layout:fixed;
  padding:0;
  border-spacing:0;
}
.treetab td img {
  vertical-align:bottom;
}
.treetab td a {
  vertical-align:top;
}
.treetab,
.treetab td {
  width:100%;
}
.treetab td {
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}

/* datepicker styles */
/* the div that holds the date picker calendar */
.dpDiv {
  position:absolute;
  left:35px;
  bottom:-17px;
  z-index:10000;
  visibility:hidden;
}
.dpTable {
  /* the table (within the div) that holds the date picker calendar */
  background-color:#ece9d8;
  border-radius:4px;
}
.dpTable td {
  text-align:center;
  padding:0px;
}
.dpDayHighlight {
  /* additional style information for the cell that holds a highlighted day */
  background-color:white;
  color:blue;
  font-weight:bold;
  border:1px solid #808080;
}
.dpTDHover {
  /* the date number table cell that the mouse pointer is currently over */
  background-color:white;
  cursor:pointer;
  font-weight:bold;
  color:blue;
}
.dpTitleTR {
  /* the top table row that holds the month, year, and forward/ backward buttons */
  font-weight:bold;
}
.dpDayTD { /* a table cell that holds the short names of days of the week( Mo, Tu, We, etc ) */
  color:white;
  background-color:#a9a9a9;
}

.dpTR {} /* a table row that holds date numbers( either blank or 1 - 31 ) */
.dpDayTR {}/* the second table row, that holds the names of days of the week( Mo, Tu, We, etc ) */
.dpTodayButtonTR {} /* the bottom table row, that has the "This Month" and "Close" buttons */
.dpTD {}/* a table cell that holds a date number( either blank or 1 - 31 ) */
.dpTodayButtonTD {} /* the table cell that holds the "This Month" or "Close" button at the bottom */
.dpTodayButton {} /* the "This Month" and "Close" buttons at the bottom */
.dpTitleText {} /* additional style information for the text that indicates the month and year */
.dpTitleTD {} /* the table cell that holds the name of the month and the year */
.dpButton {} /* the forward / backward buttons at the top */
.dpButtonTD {} /* a table cell that holds one of the forward / backward buttons */
.dpDayHighlightTD {} /* a table cell that holds a highlighted day( either today's date or the current date field value ) */
.tab_message2 { 
  color:blue;
}