/* Mini reset */
.weatherForecast * {
  margin: 0;
  padding: 0;
}

/* Weather -------------------------------------------------------------------- */
#weather {
  font-weight: bold;
  left: 625px;
  padding-right: 15px; /* Need room for the down arrow */
  position: absolute;
  top: 12px;
}

#weather a {
  color: #000;
  text-decoration: none;
}

#weather a:hover, #weather a:focus {
  color: #f50004;
}

#weather a:after { /* Down arrow */
  content: "";
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid;
  width: 0;
  height: 0;
  position: absolute;
  right: 1px;
  top: 5px;
}

/* Forecast popup div --------------------------------------------------------- */
.weatherForecast {
  /* Accessibility "contrast" error fix */
  background-color: #fff;
  border-radius: 3px;
  display: none;

  position: absolute;
  z-index: 999;
}

#weather a:hover + .weatherForecast,
.weatherForecast.open {
  display: block;
}

.wForecast, .wForecastNight {
  border-radius: 3px;
  box-shadow: 3px 3px 10px rgba(0,0,0,.3);
  font-size: 93%;
  font-weight: normal;
  padding: 1px;
  width: 275px;
}

.wForecast {
  background: #cce1ff;
  background: linear-gradient(to bottom, #92bbf6 0%,#cce1ff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92bbf6', endColorstr='#cce1ff',GradientType=0 );
}

.wForecastNight {
  background: #dfdde2;
  background: linear-gradient(to bottom, #b5b2c0 0%,#dfdde2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5b2c0', endColorstr='#dfdde2',GradientType=0 );
}

.wFBorder, .wFBorderNight {
  padding: 0 10px;
}

.wFBorder > div, .wFBorderNight > div {
  margin-bottom: .5em;
}

.weatherForecast em {
  display: block;
  font-size: 93%;
  font-style: normal;
  padding-top: 10px;
}

.weatherForecast h3 {
  font-size: 153.9%;
  font-weight: bold;
  padding: 5px 0;
}


.weatherForecast .stats {
  float: left;
  width: 135px;
}

.weatherForecast dl {
  font-size: 93%;
  padding: 0 0 10px;
}

.weatherForecast dt {
  float: left;
  width: 60px;
}

.weatherForecast .weatherForecastGraphic, .weatherForecast .todayGraphic, .weatherForecast .tomorrowGraphic {
  float: left;
  width: 58px; /* PNG width */
}

.weatherForecast .weatherForecastTemp {
  float: left;
  font-weight: bold;
  font-size: 197%;
  padding: 10px 0 0 10px;
}

.weatherForecast div.today, .weatherForecast div.todayNight,
.weatherForecast div.tomorrow, .weatherForecast div.tomorrowNight {
  clear: left;
  padding: 5px;
}

.weatherForecast div.today, .weatherForecast div.tomorrow {
  background-color: #cce1ff;
  border: 1px solid #5182ce;
  border-radius: 3px;
  margin-bottom: 5px;
}

.weatherForecast div.todayNight, .weatherForecast div.tomorrowNight {
  background-color: #dfdde2;
  border: 1px solid #8e8e8e;
  border-radius: 3px;
  margin-bottom: 5px;
}

.weatherForecast .todayStats p, .weatherForecast .tomorrowStats p {
  font-weight: bold;
  margin-bottom: 4px;
}

.weatherForecast div.hilo {
  font-weight: bold;
  margin: 4px 0;
}

.weatherForecast span.high {
  color: #f46227;
}

.weatherForecast span.low {
  color: #00b2eb;
  padding-left: 5px;
}

.weatherForecast div.provider {
  font-size: 93%;
  padding: 0 0 5px;
  text-align: center;
}

#weather .weatherForecast .provider a {
  color: #000;
  text-decoration: underline;
}