.panel:first-child {
  border-top: 1px solid #DDD;
}
.panel {
  position: relative;
  display: inline-block;
  width: 100%;
  height: auto;
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #DDD;
  cursor: pointer;
  -webkit-transition: transform 0.15s ease-in;
  -moz-transition: transform 0.15s ease-in;
  -o-transition: transform 0.15s ease-in;
  transition: transform 0.15s ease-in;
  -webkit-transition: -o-transform 0.15s ease-in;
  -moz-transition: -o-transform 0.15s ease-in;
  -o-transition: -o-transform 0.15s ease-in;
  transition: -o-transform 0.15s ease-in;
  -webkit-transition: -ms-transform 0.15s ease-in;
  -moz-transition: -ms-transform 0.15s ease-in;
  -o-transition: -ms-transform 0.15s ease-in;
  transition: -ms-transform 0.15s ease-in;
  -webkit-transition: -moz-transform 0.15s ease-in;
  -moz-transition: -moz-transform 0.15s ease-in;
  -o-transition: -moz-transform 0.15s ease-in;
  transition: -moz-transform 0.15s ease-in;
  -webkit-transition: -webkit-transform 0.15s ease-in;
  -moz-transition: -webkit-transform 0.15s ease-in;
  -o-transition: -webkit-transform 0.15s ease-in;
  transition: -webkit-transform 0.15s ease-in;
  background-color: #F8F8F8;
}
.panel:hover {
  background-color: #EEE;
}
.panel.revealed:hover {
  background-color: transparent;
}
body.tablet .panel:hover {
  background-color: transparent;
}
body.tablet .panel:active {
  background-color: #EEE;
}
body.tablet .panel.revealed:hover {
  background-color: transparent;
}
.panel.top_border {
  border-top: 1px solid #DDD;
}
.panel .top {
  height: 60px;
}
.panel .state_color {
  position: absolute;
  display: none;
  top: 28px;
  left: 0;
  width: 10px;
  height: 20px;
  overflow: hidden;
}
.panel .state_color span {
  position: absolute;
  display: block;
  top: 0;
  left: -10px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
}
.panel.rain .state_color span,
.panel.snow .state_color span {
  background: -webkit-gradient(linear, left top, left bottom, from(#51afe0), to(#1f7dae));
}
.day_name {
  position: absolute;
  top: 13px;
  text-transform: uppercase;
  font-family: "AvenirNextCondensed-Medium", "AvenirNextLTW01-MediumC 721311", "Arial Narrow", Verdana, sans-serif;
  font-size: 24px;
  left: 5px;
  width: 75px;
  text-align: right;
}
.day_icon {
  position: absolute;
  top: 9px;
  left: 92px;
  height: 60px;
  line-height: 60px;
  width: 50px;
}
.day_text_wrapper {
  display: table;
  position: absolute;
  top: 0;
  left: 140px;
  width: 375px;
  height: 60px;
}
.day_text {
  display: table-cell;
  height: 60px;
  vertical-align: middle;
  font-size: 18px;
  line-height: 24px;
  font-family: "AvenirNextCondensed-Regular", "AvenirNextLTW01-Condens 721299", "Arial Narrow", Verdana, sans-serif;
  font-weight: 400;
  color: #444;
}
.wind_details {
  position: absolute;
  top: 20px;
  left: 680px;
  width: 100px;
  height: 20px;
}
.temperature_range {
  position: absolute;
  top: 20px;
  left: 540px;
  width: 200px;
  height: 20px;
}
.temperature_range .ranger {
  position: absolute;
  top: 0;
  height: 20px;
  min-width: 25px;
  border-radius: 10px;
  background-color: #5788C7;
}
.temperature_range .ranger span {
  display: inline-block;
  position: absolute;
  top: 0;
  width: 40px;
  height: 20px;
  line-height: 20px;
  font-size: 16px;
  color: #666;
}
.temperature_range .ranger .temperature_min {
  left: -42px;
  text-align: right;
  font-family: "AvenirNextCondensed-Medium", "AvenirNextLTW01-MediumC 721311", "Arial Narrow", Verdana, sans-serif;
}
.temperature_range .ranger .temperature_max {
  right: -43px;
  text-align: left;
  font-family: "AvenirNextCondensed-Bold", "AvenirNextLTW01-BoldCn", "Arial Narrow", Verdana, sans-serif;
}
#WeatherForecastContainer .button {
  position: absolute;
  padding: 5px;
  border: 0px;
  right: 25px;
  top: 18px;
  font-size: 22px;
  color: #BBB;
  font-family: "Pictos";
}
.panel:hover .button {
  color: #888;
}
.panel .button .minus {
  display: none;
}
.panel.revealed .button .plus {
  display: none;
}
.panel.revealed .button .minus {
  display: inline;
}
.panel .loading {
  width: 100%;
  margin-top: 60px;
  font-size: 28px;
  color: #CCC;
  text-align: center;
}
.panel .details {
  position: relative;
display: none;
  width: 100%;
  height: auto;
  cursor: auto;
  background-color: transparent;
  opacity: 1;
  -webkit-transition: opacity 0.15s linear;
  -moz-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.panel .details .text {
  margin: 20px auto 20px;
  font-size: 18px;
  text-align: center;
  color: #222;
}
.panel .details .text .title {
  display: inline-block;
  margin: 0 4px;
  font-family: "AvenirNextCondensed-Medium", "AvenirNextLTW01-MediumC 721311", "Arial Narrow", Verdana, sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  color: #aaa;
}
.panel .details .text .val {
  display: inline-block;
  margin: 0 30px 0 0;
  font-family: "AvenirNextCondensed-Medium", "AvenirNextLTW01-MediumC 721311", "Arial Narrow", Verdana, sans-serif;
  font-size: 20px;
}
.panel .details .text .more {
  display: inline-block;
  font-family: "AvenirNextCondensed-Medium", "AvenirNextLTW01-MediumC 721311", "Arial Narrow", Verdana, sans-serif;
  text-transform: uppercase;
  color: #D15549;
  text-decoration: none;
}
.panel .details .text .more:hover {
  text-decoration: underline;
}
.panel.revealed .details {
  opacity: 1.0;
}

.timeline_container {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  margin-top: 15px;
  border: 0px solid purple;
}
.timeline_container .timeline {
	clear: both;
  position: relative;  
  display: block;
  width: 100%;
  height: 160px;
  overflow: hidden;
  border: 0px solid green;
}
.timeline_container .timeline .hour_ticks {
  position: absolute;
  top: 44px;
  left: 0px;
  width: 100%;
  height: 10px;
  border: 0px solid green;
  overflow: hidden;
}
.timeline_container .timeline .hour_ticks span {
  position: relative;  
  display: inline-block;
  padding: 0px;
  margin: 0px;
  width: 2px;
  height: 8px;
  border-left: 1px solid #999;
  overflow: hidden;
}
.timeline_container .timeline .hour_ticks span.even {
  height: 5px;
}
.timeline_container .timeline .hour_ticks span.second {
  height: 5px;
}
.timeline_container .timeline .hours {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  height: 20px;  
  border: 0px solid red;
  overflow: hidden;
}
.timeline_container .timeline .hours .hour {
  position: relative;
  display: inline-block;
  padding: 0px;
  margin: 0px;
  width: 10px;
  height: 20px;
  border: 0px solid red;
  font-size: 0;
}
.timeline_container .timeline .hours .hour span {
  position: absolute;
  display: block;
  bottom: 0;
  width: 100%;
  left: 0px;
  text-align: center;
  font-family: "AvenirNextCondensed-Medium", "AvenirNextLTW01-MediumC 721311", "Arial Narrow", Verdana, sans-serif;
  font-size: 16px;
  color: #222;
  border: 0px solid green;
}
.timeline_container .timeline .hours .hour.first span {
  text-align: left;
  left: 0;
}
.timeline_container .timeline .stripes {
  z-index: 3;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 40px;
  border: 0px solid red;
  overflow: hidden;
}
.timeline_container .timeline .stripes > span {
  position: relative;  
  display: inline-block;
  padding: 0px;
  margin: 0px;  
  height: 100%;
  color: #fff;
  white-space: nowrap;
  text-transform: capitalize;
  border: 0px solid blue;
  overflow: hidden;
}
.timeline_container .timeline .stripes > span > span {
  display: block;
  height: 100%;
  width: 100%;
  padding: 0 3px;
  line-height: 40px;
  font-size: 13px;
  opacity: 0.9;
  font-family: "AvenirNextCondensed-Medium", "AvenirNextLTW01-MediumC 721311", "Arial Narrow", Verdana, sans-serif;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 0px solid purple;
}
.timeline_container .timeline .stripes > span > span.clear {
  color: rgba(0, 0, 0, 0.7);
}
body .timeline_container .timeline .stripes > span,
body.iphone .timeline_container .timeline .stripes > span {
  background-color: rgba(147, 147, 147, 0.07);
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.05)), to(rgba(0, 0, 0, 0.1)));
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
  background-repeat: repeat-x;
  color: #333;
}
/* Clear */
body .timeline_container .timeline .stripes > span.c0 {
  background-color: #EEEEF5;
  color: #333;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}
body .timeline_container .timeline .stripes > span.p0 {
  background-color: #EEEEF5;
  color: #333;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}
/* Sprinkling / Flurries */
body .timeline_container .timeline .stripes > span.p1 {
  background-color: #96b4da;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15);
}
/* Partly Cloudy / Light Rain */
body .timeline_container .timeline .stripes > span.c1 {
  background-color: #d5dae2;
  color: #333;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}
body .timeline_container .timeline .stripes > span.p2 {
  background-color: #80a5d6;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15);
}
/* Cloudy / Rain */
body .timeline_container .timeline .stripes > span.c2 {
  background-color: #b6bfcb;
  color: #222;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}
body .timeline_container .timeline .stripes > span.p3 {
  background-color: #4a80c7;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.25);
}
/* Heavy Rain */
body .timeline_container .timeline .stripes > span.p4 {
  background-color: #3267ad;
}
body .timeline_container .timeline .stripes > span.p5 {
  background-color: #3267ad;
}
.timeline_container .timeline .temps {
  z-index: 3;
  position: absolute;
  left: 0;
  top: 75px;
  width: 100%;
  height: 20px;
  border: 0px solid red;
  overflow: hidden;
}
.timeline_container .timeline .rain-row {
  z-index: 3;
  position: absolute;
  left: 0;
  top: 100px;
  width: 100%;
  height: 50px;
  border: 0px solid green;
  overflow: hidden;
}
.timeline_container .timeline .temps > span, .timeline_container .timeline .rain-row > span {
  position: relative;
  display: inline-block;
  padding: 0px;
  margin: 0px;
  width: 10px;
  height: 20px;
  border: 0px solid green;
}
.timeline_container .timeline .temps > span > span {
  position: absolute;
  top: 0;
  font-family: "AvenirNextCondensed-Medium", "AvenirNextLTW01-MediumC 721311", "Arial Narrow", Verdana, sans-serif;
  font-size: 20px;
  color: #094574;
  width: 100%;
  left: 0px;
  text-align: center;
}
.timeline_container .timeline .rain-row > span > span {
  position: absolute;
  top: 0;
  left: 0px;
  font-family: "AvenirNextCondensed-Medium", "AvenirNextLTW01-MediumC 721311", "Arial Narrow", Verdana, sans-serif;
  font-size: 20px;
  color: #094574;
  width: 100%;
  text-align: center;
}
.timeline_container .timeline .temps > span.first > span, .timeline_container .timeline .rain-row > span.first > span {
  text-align: left;
  left: 0;
}
.timeline_container .timeline .now {
  position: absolute;
  top: 44px;
  z-index: 4;
  width: 2px;
  height: 51px;
  background-color: #F00;
  opacity: 0.5;
}
.timeline_container .timeline.hide_now .now {
  display: none;
}
/*Currently*/
.date-forecast { margin: 0px; padding: 10px 0px 10px 0xpx; font-weight: bold; }
.cloudy-icon-currently,.fog-icon-currently,.partly-cloudy-day-icon-currently,.partly-cloudy-night-icon-currently,.sleet-icon-currently,.snow-icon-currently{margin:0 10px;}
.currently{display:block}
#current-conditions span{display:inline-block}
#current-conditions .currently-container{display:flex;align-items:center;justify-content:center;text-align:left;line-height:1.1}
#current-conditions .feels-like{font-weight:300;font-size:18px;line-height:1;margin-bottom:-6px}
#current-conditions .currently-skycon-temp{display:flex;align-items:center}
#current-conditions .currently-skycon-temp canvas{width:100%;height:100%;max-width:55px;max-height:55px;margin-right:5px}
#current-conditions .currently-skycon-temp span.temp{font-size:55px}
#current-conditions span.summary-high-low{display:flex;font-weight:300;font-size:16px;line-height:1.5}
#current-conditions span.summary-high-low>span{margin:0 3px}
#current-conditions span.summary-high-low span:first-child{margin-left:0}
#current-conditions span.summary-high-low .high-low-label{font-weight:400}
#current-conditions .summary-high-low p span{font-weight:700}
#current-conditions .currently-icon{width:60px;height:60px;display:inline-block}
#current-conditions .currently-icon img{width:100%;height:100%}
#current-conditions .skycon.swip canvas{width:100%;height:100%}
#current-conditions .currently .desc,#current-conditions .next{position:relative;top:7px;line-height:1.3em;margin-bottom:15px}
#current-conditions .currently{display:flex;align-items:center;justify-content:center}
#current-conditions .currently .desc.swap{font-weight:600;text-align:left}
#current-conditions .next.swap{position:relative;top:0;display:block;font-size:28px;font-weight:300;margin-bottom:6px}
#current-conditions.reversed #title .next{margin-right:6px}
#current-conditions.reversed #title .skycon{margin-left:4px}
#current-conditions.reversed #title .currently .desc .temp{margin-left:4px}

#current-conditions span.summary-sunrise{display:flex;font-weight:300;font-size:16px;line-height:1.5}
#current-conditions span.summary-sunrise>span{margin:0 3px}
#current-conditions span.summary-sunrise span:first-child{margin-left:0}

#weather-forecast-2 {}
.forecast-container.hide-forecast { }
.forecast-container tr.more-forecasts { }