@import "variables.less";
@import "icon-classes.less";



.iconExamples {
  .clearfix;
  h2 {
    font-family: @hairline;
    font-weight: @ultraLight;
    color: hsl(217, 51%, 47%);
  }
  .example {
    @fontsize: 18px;
    .clearfix;
    text-align: center;
    margin: 10px 3px;
    .icon {
      font-size: @fontsize;
      float: left;
      width: 35px;
      i {
        //background-color: hsl(0, 0%, 97%);
      }
    }
    .class {
      text-align: center;
      font-size: @fontsize;
      float: left;
      margin-top: 0px;
      font-weight: @normal;
      margin-left: 10px;
      color: hsl(0, 0%, 20%);
    }
  }
}


.weatherseparator {
  padding-bottom: 10px;
  border-bottom: 1px solid hsla(0, 0%, 100%, .2);
  margin-bottom: 50px;
  .clearfix;
}

.row-fluid {
  .clearfix;
}

.examples {
  font-family: 'weather';
  font-size: 50px;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}

.weather {
  //width: 400px;
  margin: 0px auto;
  //border: 1px solid hsl(207, 39%, 15%);
  font-family: @hairline;
  .relative {
    position: relative;
  }
  .currently {
    float: left;
    font-size: 30px;
    font-weight: 100;
    margin-top: 5px;
    .opacity(.8);
  }
  .mainTemp {
    float: left;
    .clearfix;
    .temp {
      font-size: 70px;
      line-height: 1em;
      font-weight: @ultraLight;
      float: left;
      margin-right: 5px;
    }
    .highLow {
      float: left;
      font-size: 22px;
      line-height: 1em;
      margin-top: 5px;
      font-weight: @ultraLight;
      text-align: center;
      .opacity(.5);
      .clearfix;
      .high {
        margin-top: 10px;
        margin-bottom: 5px;
      }
      .low {}
    }
  }
  .mainIcon {
    font-size: 110px;
    .opacity(.5);
    line-height: .3em;
    float: right;
  }
  .icon {
    position: absolute;
    top: 0px;
    left: 100px;
    color: hsl(0, 0%, 100%);
    .opacity(.3);
    z-index: 9;
    font-size: 130px;
    line-height: 1em;
    margin-top: -20px;
    text-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.4);
    text-align: right;
  }

  .tomorrow {
    font-size: 18px;
    font-weight: @light;
    line-height: 1em;
    margin-top: 20px;
    .clearfix;
    .day {
      float: left;
      .name {
        .opacity(.5);
        display: inline-block;
        margin-right: 10px;
      }
      .condition {
        display: inline-block;
      }
    }
    .temps {
      float: right;
      .clearfix;
      .tomorrow-icon {
        font-size: 40px;
        margin-right: 5px;
        .opacity(.5);
      }
      .high {
        display: inline-block;
        margin-right: 10px;
      }
      .low {
        display: inline-block;
        margin-right: 0px;
        .opacity(.5);
      }
    }
  }
}

.clearthis {
  .clearfix;
}