@import "compass/utilities/general/clearfix";
@import "compass/css3/border-radius";
@import "compass/css3/box-shadow";
@import "compass/css3/transition";
//
@import "../../mixins/paddingbox";
@import "../../mixins/devices";
@import "../../declarations/dimensions";
@import "../../declarations/colors";
@import "../../declarations/fonts";

#settings-window {
  margin-top: $def_margin_unit;

  h2 {
    margin-bottom: $def_margin_unit / 2;
    color: $whiteFull;
  }

  h4 {
    margin-bottom: $def_margin_unit / 2;
    color: $whiteFull;
    font-size: $small;
  }

  .settings-desc, .messaging-desc {
    margin-bottom: $def_margin_unit;
    color: $whiteFull;
    font-family: $font-light;
    font-size: $small;
  }

  #legend {
    @include clearfix;

    margin-bottom: $def_margin_unit;

    .legend-item {
      @include clearfix;
      @include border-radius(4px);
      @include paddingbox(200px, 64px);
      @include rgba-background(rgba(68, 68, 68, 0.8));

      margin-right: $def_margin_unit / 2;
      margin-bottom: $def_margin_unit / 2;
      float: left;
      cursor: pointer;

      //DEVICE
      @include desktopClient {
        @include paddingbox(200px, 64px);
      }

      @include iPodWebappPortrait {
        @include paddingbox(308px, 64px);
      }

      @include iPodSafariPortrait {
        @include paddingbox(308px, 64px);
      }

      @include iPodSafariLandscapeFullscrren {
        @include paddingbox(223px, 64px);
      }

      @include iPodWebappLandscape {
        @include paddingbox(223px, 64px);
      }

      @include iPodSafariLandscape {
        @include paddingbox(223px, 64px);
      }

      img {
        width: 64px;
        height: 64px;
        float: left;
        margin-right: $def_margin_unit;
        margin-left: -1px;
      }

      img.blue {
        @include rgba-background($blue);
      }

      img.turkis {
        @include rgba-background($turkis);
      }

      img.green {
        @include rgba-background($green);
      }

      img.yellow {
        @include rgba-background($yellow);
      }

      img.orange {
        @include rgba-background($orange);
      }

      img.red {
        @include rgba-background($red);
      }

      img.pink {
        @include rgba-background($pink);
      }

      img.grey {
        @include rgba-background($grey);
      }

      img.white {
        @include rgba-background($white);
      }

      span {
        @include paddingbox(110px, 26px, 0, 0, 0, 0);
        display: block;
        margin-top: $def_margin_unit / 2;
        color: $whiteFull;
        font-family: $font-light;
        font-size: $small;
        letter-spacing: 0.06em;
        overflow: hidden;
      }

      input {
        @include paddingbox(110px, 18px, 0, 0, 0, $def_margin_unit / 4);
        display: block;
        font-size: $small;
        color: $white;
        border-color: #555;
      }
    }
  }
}