body {
  font: 12px sans-serif;
}
.axis path {
  fill: none;
  stroke: black;
  shape-rendering: auto;
  stroke-width: 0px;
}

.axis .tick line {
  fill: 0px;
  stroke: #bbb;
  shape-rendering: crispEdges;
  stroke-width: 1px;
}
.axis text { font: 13px sans-serif; }

/* this div is the full left side of the page */
div#dashboard { width:900px;margin:0px;float:left; }
div#dashboard img { float:left;height:30px;margin-left:40px; }

/* this div is the full right side of the page  */
div#map { width:350px;float:left;margin-top:10px; }
div#map button {
    width:150px;
    font-size: 12px;
    margin: 3px;
    padding: 5px 0px 5px 0px;
    border: 1px solid #000;
    background-color: #eee;
    cursor: pointer;
}
div#map button.date { width: 55px}
div#map button.date.missing { opacity: 0.2; }
div#map button.selected {
    background-color: #fee5d9;
    font-weight: bold;
}

div#initdates { font-size:13px; height:150px; margin-top:10px; overflow-y:scroll; }

div#field { width: 100%; float:left;text-align:left;font-size:13px;cursor:pointer;margin:10px 0px 10px 10px; }
div#field div div { padding: 4px; margin: 0px; }
div#field div div:hover { background-color: #ddd; }
div#field div#field-left, div#field-right { width:50%; float:left; text-align:left; }

div#about {
    display: none;
    position: absolute;
    left: 50%;
    margin-left: -500px;
    top: 250px;
    width: 650px;
    font-size: 16px;
    background-color: #ccc;
    border: 2px solid #000;
    padding: 10px 0px 10px 20px;
    z-index: 1000;
}
.member { fill: none; opacity: 1; stroke-width: 2px; }
.temp32 { stroke: #9999ff; stroke-width: 2px; }
.line-p { stroke: gray; stroke-width: 2px; opacity: 0.5; }
.line-t { stroke: gray; stroke-width: 2px; opacity: 0.5; }
.line-t-mean { fill: none; stroke: black; stroke-width: 3px; }
.line-p-mean { fill: none; stroke: black; stroke-width: 3px; }
.highlight { stroke: #8b0000; stroke-width: 5px; opacity: 1;}
.gfs { stroke: #08519c; stroke-width: 4px; opacity:1; fill: none;}

.now { fill: black; opacity: 0.3; }

.box-t, .box-p { fill: black; }

.dot-t { fill: black; }
.dot-ptype-none { fill: #ccc;}
.dot-ptype-rain { fill: green;}
.dot-ptype-snow { fill: blue; }
.dot-ptype-ice  { fill: darkorange; }
.dot-ptype-fzra { fill: red; }

text.pop { font-size: 10px; }
text.pop.small { font-size: 8px; }

.bg { fill: #f1f1f1; }
.bg2 { fill: #ddd; }

.windbarb { stroke: #000; stroke-width: 0.75px; fill: none; }
.flag { fill: #000; }

.boxes { fill: none; stroke: black; stroke-width: 2px; } 
.box { opacity: 1.0; }

.background { fill: #fff;}
.land { fill: #ccc; }
.active { fill: #dadada; }

.state-boundary {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-width: 1.5px;
}

.circle { fill: black; stroke: white; stroke-width: 0.25px; cursor: pointer; }
.dot-selected { fill: green; stroke: white; stroke-width: 0.25px; cursor: pointer; }
.stnhover { fill: red; }

ul.about { margin: 0px; padding-left: 5px; }
ul.about li { margin: 0px; padding-top: 3px; }

text.label { font-size: 16px; }
.activesitetext { float: left; font: 20px sans-serif; font-weight: bold; margin: 5px 0px 0px 10px; text-align: left; }
.forecastinit { float: right; font: 20px sans-serif; font-weight: bold; margin: 5px 40px 0px 40px; text-align: right; }