body {
  display: block;
  font-family: calibri, arial;
}

.wrapper {
  margin-top: 5px;
  padding: 2px;
}

.divider{
  float: left;
  height: 70px;
  width: 2px;
  margin: 20px 0 0 0;
  border-left:1px solid #ccc;
}

article {
  background: #ffffff;
  padding: 30px;
  float: left;
  width: 1050px;
  display: inline-flex;
}
.state {
  width: 150px;
  text-align: center;
  position: absolute;
  left: -60px !important;
  top: 80px !important;
  z-index: 2;

}.noLabel{
  font-size: 0;
}
.header, .header-horizontal {
  float: left;
  font-size: 15px;
  font-style: italic;
  text-align: center;
  height: 16px;
  width: 50px;
  margin-top: 10px;
  line-height: 16px;
}

.header-horizontal {
  height: 32px;
}

.content {
  width: 155px;
  margin-top: 20px;
}

.content-horizontal {
  float: left;
  width: 75px;
  height: 60px;
  margin: 0px 0 10px 15px;
}


.frame, .frame-horizontal {
  width: 155px;
  margin-right: 10px;
  float: left;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 5px;
  overflow: hidden;
}

.frame-horizontal {
  width: auto;
  height: auto;
}

.image-frame, .image-frame-top {
    float: left;
    width: 50px;
}
.image-frame-top {
  height: 50px;
  margin: 5px 0 0 5px;
}
.image-frame-top-horizontal {
  float: left;
  width: 100px;
  margin: 10px 0 0 0px;
}
.icon-actual {
  width: 40px;
  float: left;
}

.temperature, #temperature-now, #temperature-now-horizontal {
  float: left;
  width: 35px;
  margin: auto;
  font-size: 15px;
  font-weight: bold;
  font-style: italic;
  margin-top: 10px;
  padding-left: 10px;
}
.temperature-horizontal {
  float: left;
  width: 65px;
  font-size: 15px;
  font-weight: bold;
  font-style: italic;
  margin-top: 10px;
}
#temperature-now-horizontal {
  width: 45px;
}
#temperature-now{
  padding-left: 10px;
}
.temperature-min
{
  font-weight: normal;
  display: inline;
}
div.area {
  text-align: center;
  font-size: 10pt;
  height: 20px;
  line-height: 20px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 3px;
}
select, input {
  width: 160px;
  background: #ffffff;
}
input[type=radio] {
  width: auto;
}
div.link {
  margin: 0 0 5px 0;
  text-align: center;
  font-size: 13px;
}
div.link a {
  color: blue;
  text-decoration: underline;
  overflow: hidden;
}
.wind {
  text-align: center;
}
.today {

}
.today-horizontal {
  float: left;
  width: 100px;
}
.area-today, .area-today-horizontal {
  float: right;
  width: 80px;
  height: 30px;
  margin-top: 15px;
  font-size: 15px;
  font-style: italic;
  text-align: center;
}
.area-today-horizontal {
  float: left;
}
.forecast-time, .forecast-time-vertical {
  width: 65px;
  font-size: 11px;
  color: #999;
  font-style: italic;
  float: left;
  margin: 5px 0 0 70px;
}
.forecast-time-vertical {
  margin: 5px 0 0 15px;
}
.forecast-date {
  width: 50px;
  font-size: 11px;
  color: #999;
  font-style: italic;
}

/*  Icons - weather
      -------------------------------------------------------------------------- */
.wi,
.wi--white,
.wi--blue {
  display: block;
  width: 40px;
  height: 35px;
  position: relative;
  margin: 0 auto;
}
.wi:after,
.wi--white:after,
.wi--blue:after {
  display: block;
  width: 40px;
  height: 35px;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  background: url("../../images/ico/weather.png") 0 -2px;
}

.wi.state-1:after,
.wi--white.state-1:after,
.wi--blue.state-1:after {
  background-position: 0 -2px;
}
.wi.state-2:after,
.wi--white.state-2:after,
.wi--blue.state-2:after {
  background-position: -43px -2px;
}
.wi.state-3:after,
.wi--white.state-3:after,
.wi--blue.state-3:after {
  background-position: -128px -2px;
}
.wi.state-4:after,
.wi--white.state-4:after,
.wi--blue.state-4:after {
  background-position: -213px -2px;
}
.wi.state-5:after,
.wi--white.state-5:after,
.wi--blue.state-5:after {
  background-position: -43px -41px;
}
.wi.state-6:after,
.wi--white.state-6:after,
.wi--blue.state-6:after {
  background-position: -128px -40px;
}
.wi.state-7:after,
.wi--white.state-7:after,
.wi--blue.state-7:after {
  background-position: -214px -40px;
}
.wi.state-8:after,
.wi--white.state-8:after,
.wi--blue.state-8:after {
  background-position: 0 -83px;
}
.wi.state-9:after,
.wi--white.state-9:after,
.wi--blue.state-9:after {
  background-position: -85px -82px;
}
.wi.state-10:after,
.wi--white.state-10:after,
.wi--blue.state-10:after {
  background-position: -128px -82px;
}
.wi.state-11:after,
.wi--white.state-11:after,
.wi--blue.state-11:after {
  background-position: -170px -82px;
}
.wi.state-12:after,
.wi--white.state-12:after,
.wi--blue.state-12:after {
  background-position: -214px -81px;
}
.wi.state-13:after,
.wi--white.state-13:after,
.wi--blue.state-13:after {
  background-position: -85px -123px;
}
.wi.state-14:after,
.wi--white.state-14:after,
.wi--blue.state-14:after {
  background-position: 0px -158px;
}
.wi.state-15:after,
.wi--white.state-15:after,
.wi--blue.state-15:after {
  background-position: -295px -160px;
}
.wi.state-16:after,
.wi--white.state-16:after,
.wi--blue.state-16:after {
  background-position: -128px -162px;
}
.wi.state-17:after,
.wi--white.state-17:after,
.wi--blue.state-17:after {
  background-position: -170px -161px;
}
.wi.state-18:after,
.wi--white.state-18:after,
.wi--blue.state-18:after {
  background-position: -214px -160px;
}
.wi.state-19:after,
.wi--white.state-19:after,
.wi--blue.state-19:after {
  background-position: 0px -203px;
}
.wi.state-20:after,
.wi--white.state-20:after,
.wi--blue.state-20:after {
  background-position: -338px -203px;
}
.wi.state-21:after,
.wi--white.state-21:after,
.wi--blue.state-21:after {
  background-position: -381px -203px;
}
.wi.state-22:after,
.wi--white.state-22:after,
.wi--blue.state-22:after {
  background-position: -423px -203px;
}
.wi.state-23:after,
.wi--white.state-23:after,
.wi--blue.state-23:after {
  background-position: 0px -244px;
}
.wi.state-24:after,
.wi--white.state-24:after,
.wi--blue.state-24:after {
  background-position: -42px -243px;
}
.wi.state-25:after,
.wi--white.state-25:after,
.wi--blue.state-25:after {
  background-position: -128px -243px;
}
.wi.state-26:after,
.wi--white.state-26:after,
.wi--blue.state-26:after {
  background-position: -86px -3px;
}
.wi.state-27:after,
.wi--white.state-27:after,
.wi--blue.state-27:after {
  background-position: -172px -3px;
}
.wi.state-28:after,
.wi--white.state-28:after,
.wi--blue.state-28:after {
  background-position: 0px -41px;
}
.wi.state-29:after,
.wi--white.state-29:after,
.wi--blue.state-29:after {
  background-position: -84px -43px;
}
.wi.state-30:after,
.wi--white.state-30:after,
.wi--blue.state-30:after {
  background-position: -170px -41px;
}
.wi.state-31:after,
.wi--white.state-31:after,
.wi--blue.state-31:after {
  background-position: -42px -83px;
}
.wi.state-32:after,
.wi--white.state-32:after,
.wi--blue.state-32:after {
  background-position: -42px -125px;
}
.wi.state-33:after,
.wi--white.state-33:after,
.wi--blue.state-33:after {
  background-position: -86px -162px;
}
.wi.state-34:after,
.wi--white.state-34:after,
.wi--blue.state-34:after {
  background-position: -42px -204px;
}
.wi.state-35:after,
.wi--white.state-35:after,
.wi--blue.state-35:after {
  background-position: -210px -204px;
}
.wi.state-36:after,
.wi--white.state-36:after,
.wi--blue.state-36:after {
  background-position: -84px -243px;
}
.wi--white:after {
  background: url("../../images/ico/weather--white.png") 0 0;
}
.wi--blue:after {
  background: url("../../images/ico/weather--blue.png") 0 0;
}
/*  Icons for retina
    -------------------------------------------------------------------------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .wi:after {
    background-image: url("../../images/ico/weather@2x.png");
    background-size: 252px;
  }
  .wi--white:after {
    background-image: url("../../images/ico/weather@2x--white.png");
    background-size: 252px;
  }
  .wi--blue:after {
    background-image: url("../../images/ico/weather@2x--blue.png");
    background-size: 252px;
  }
}