#aviators-palette {
  @include box-shadow(0px 1px 1px rgba(1, 1, 2, .20)); @include transition(left .2s ease-in);
  background-color: #ffffff; left: 0px; padding: 20px; position: fixed; top: 130px; z-index: 999999;
  .toggle {
    @include box-shadow(0px 1px 1px rgba(1, 1, 2, .20));
    background-color: #ffffff; background-image: url('../img/arrow-left-black.png'); background-position: center center; background-repeat: no-repeat; background-size: 8px 11px; display: block; position: absolute; height: 40px; line-height: 1; right: -41px; text-indent: -9999px; top: 0px; width: 40px;
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      background-image: url('../img/arrow-left-black@2x.png');
    }
  }

  form { @include box-shadow(none); margin: 0px; padding: 0px; position: relative; top: 0px; width: 175px;
    .control-label { background-image: url('../img/palette-border.png'); background-position: left bottom; background-repeat: repeat-x; color: $black; clear: both; display: block; font-size: 16px; font-weight: normal; margin-bottom: 10px; padding-bottom: 10px; }
    .controls {
      .form-item-background { @include border-radius(1px); border: 1px solid $gray-medium; float: left; margin-bottom: 10px; margin-right: 10px;
        input { display: none; }
        &.fabric-plaid, &.none { margin-right: 0px; }

        label { border: 1px solid #ffffff; height: 23px; margin: 0px; padding: 0px; text-indent: -99999px; width: 23px;
          a { bacground-color: #0a83b6; }
        }
        label[for=edit-background-cloth-alike] { background-image: url('../img/patterns/small/cloth-alike.png'); background-position: center center; background-repeat: repeat; background-size: 23px 23px; 
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/patterns/small/cloth-alike@2x.png');
          }
        }
        label[for=edit-background-corrugation] { background-image: url('../img/patterns/small/corrugation.png'); background-position: center center; background-repeat: repeat; background-size: 8px 5px; 
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/patterns/small/corrugation@2x.png');
          }
        }
        label[for=edit-background-diagonal-noise] { background-image: url('../img/patterns/small/diagonal-noise.png'); background-position: center center; background-repeat: repeat; background-size: 23px 23px; 
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/patterns/small/diagonal-noise@2x.png');
          }
        }
        label[for=edit-background-dust] { background-image: url('../img/patterns/small/dust.png'); background-position: center center; background-repeat: repeat; background-size: 23px 23px; 
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/patterns/small/dust@2x.png');
          }
        }
        label[for=edit-background-fabric-plaid] { background-image: url('../img/patterns/small/fabric-plaid.png'); background-position: center center; background-repeat: repeat; background-size: 23px 23px; 
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/patterns/small/fabric-plaid@2x.png');
          }
        }
        label[for=edit-background-farmer] { background-image: url('../img/patterns/small/farmer.png'); background-position: center center; background-repeat: repeat; background-size: 23px 23px; 
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/patterns/small/farmer@2x.png');
          }
        }
        label[for=edit-background-grid-noise] { background-image: url('../img/patterns/small/grid-noise.png'); background-position: center center; background-repeat: repeat; background-size: 23px 23px; 
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/patterns/small/grid-noise@2x.png');
          }
        }
        label[for=edit-background-lghtmesh] { background-image: url('../img/patterns/small/lghtmesh.png'); background-position: center center; background-repeat: repeat; background-size: 23px 23px; 
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/patterns/small/lghtmesh@2x.png');
          }
        }
        label[for=edit-background-lightpaperfibers] { background-image: url('../img/patterns/small/lightpaperfibers.png'); background-position: center center; background-repeat: repeat; background-size: 23px 23px; 
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/patterns/small/lightpaperfibers@2x.png');
          }
        }
        label[for=edit-background-retina-wood] { background-image: url('../img/patterns/small/retina-wood.png'); background-position: center center; background-repeat: repeat; background-size: 23px 23px; 
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/patterns/small/retina-wood@2x.png');
          }
        }
        label[for=edit-background-pw-maze-white] { background-image: url('../img/patterns/small/pw-maze-white.png'); background-position: center center; background-repeat: repeat; background-size: 46px 23px; 
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/patterns/small/pw-maze-white@2x.png');
          }
        }        
        label[for=edit-background-none] { background-image: url('../img/patterns/small/no-pattern.png'); background-position: center center; background-repeat: repeat; background-size: 23px 23px; 
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/patterns/small/no-pattern@2x.png');
          }
        }                
      }

      .form-item-header { @include border-radius(1px); border: 1px solid $gray-medium; float: left; margin-bottom: 10px; margin-right: 9px; 
        label { border: 1px solid #ffffff; height: 28px; margin: 0px; padding: 0px; text-indent: -99999px; width: 48px;
          a { background-color: #0a83b6; }
        }
        label[for=edit-header-simple] { background-image: url('../img/header-1.png'); background-position: center center; background-repeat: no-repeat; background-size: 48px 28px; 
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/header-1@2x.png')
          }
        }
        label[for=edit-header-normal] { background-image: url('../img/header-2.png'); background-position: center center; background-repeat: no-repeat; background-size: 48px 28px; 
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/header-2@2x.png')
          }
        }
        label[for=edit-header-dark] { background-image: url('../img/header-3.png'); background-position: center center; background-repeat: no-repeat; background-size: 48px 28px; 
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/header-3@2x.png')
          }
        }
        &.dark { margin-right: 0px; }
        &:nth-child(3n) { margin-right: 0px; }

      }

      .form-item-color { @include border-radius(1px); border: 1px solid $gray-medium; float: left; margin-bottom: 10px; margin-right: 10px;
        label { border: 1px solid #ffffff; height: 23px; margin: 0px; padding: 0px; text-indent: -99999px; width: 23px;
          a { bacground-color: #0a83b6; }
        }
        label[for=edit-color-realia-blue] { background-color: #0a83b6; }
        label[for=edit-color-realia-gray-blue] { background-image: url('../img/combinations/gray-blue.png'); background-position: center center; background-repeat: no-repeat; background-size: 23px 23px;
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/combinations/gray-blue@2x.png')
          }
        }
        label[for=edit-color-realia-green] { background-color: #55a747; }
        label[for=edit-color-realia-gray-green] { background-image: url('../img/combinations/gray-green.png'); background-position: center center; background-repeat: no-repeat; background-size: 23px 23px; 
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/combinations/gray-green@2x.png');
          }        
        }
        label[for=edit-color-realia-green-light] { background-color: #419a66; }
        label[for=edit-color-realia-gray-green-light] { background-image: url('../img/combinations/gray-green-light.png'); background-position: center center; background-repeat: no-repeat; background-size: 23px 23px; 
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/combinations/gray-green-light@2x.png');
          }
        }
        label[for=edit-color-realia-brown] { background-color: #bb6733; }
        label[for=edit-color-realia-gray-brown] { background-image: url('../img/combinations/gray-brown.png'); background-position: center center; background-repeat: no-repeat; background-size: 23px 23px; 
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/combinations/gray-brown@2x.png');
          }
        }
        label[for=edit-color-realia-red] { background-color: #bb2a2a; }
        label[for=edit-color-realia-gray-red] { background-image: url('../img/combinations/gray-red.png'); background-position: center center; background-repeat: no-repeat; background-size: 23px 23px; 
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/combinations/gray-red@2x.png');
          }
        }
        label[for=edit-color-realia-magenta] { background-color: #bf224e; }
        label[for=edit-color-realia-gray-magenta] { background-image: url('../img/combinations/gray-magenta.png'); background-position: center center; background-repeat: no-repeat; background-size: 23px 23px; 
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/combinations/gray-magenta@2x.png');
          }
        }
        label[for=edit-color-realia-violet] { background-color: #8e5c90; }
        label[for=edit-color-realia-gray-violet] { background-image: url('../img/combinations/gray-violet.png'); background-position: center center; background-repeat: no-repeat; background-size: 23px 23px; 
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/combinations/gray-violet@2x.png');
          }
        }
        label[for=edit-color-realia-orange] { background-color: #f2944e; }              
        label[for=edit-color-realia-gray-orange] { background-image: url('../img/combinations/gray-orange.png'); background-position: center center; background-repeat: no-repeat; background-size: 23px 23px; 
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/combinations/gray-orange@2x.png');
          }
        }
        label[for=edit-color-realia-turquiose] { background-color: #36b0bb; }              
        label[for=edit-color-realia-gray-turquiose] { background-image: url('../img/combinations/gray-turquiose.png'); background-position: center center; background-repeat: no-repeat; background-size: 23px 23px; 
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/combinations/gray-turquiose@2x.png');
          }
        }
        label[for=edit-color-realia-brown-dark] { background-color: #534741; }                    
        label[for=edit-color-realia-gray-brown-dark] { background-image: url('../img/combinations/gray-brown-dark.png'); background-position: center center; background-repeat: no-repeat; background-size: 23px 23px; 
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/combinations/gray-brown-dark@2x.png');
          }
        }
        input { display: none; }
        &.realia-green, &.realia-gray-green, &.realia-brown-dark, &.realia-gray-brown-dark { margin-right: 0px; } 
        &:nth-child(5n) { margin-right: 0px; }
      }
    }
    .btn { clear: both; float: left; }
  }  
  &.closed { left: -215px;
    .toggle { background-image: url('../img/arrow-right-black.png'); 
      @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
        background-image: url('../img/arrow-right-black@2x.png'); 
      }
    }
  }
}

body.nav-open {
  #aviators-palette { display: none !important; }
}