.tuner { position: fixed; z-index: 1000; top: 142px; left: 0; width: 119px; margin-left: -159px; padding: 0 20px 20px; background: dimgrey; -o-transition: margin 0.3s; -ms-transition: margin 0.3s; -moz-transition: margin 0.3s; -webkit-transition: margin 0.3s; }
.tuner i { position: absolute; top: 0; left: 100%; width: 30px; height: 30px; background: dimgrey; font-size: 18px; line-height: 30px; text-align: center; color: #fff; cursor: pointer; }
.tuner label { font-size: 12px; line-height: 44px; text-transform: uppercase; color: #fff; }
.tuner .colors {margin: -5px;}
.tuner .colors li { position: relative; float: left; width: 33px; height: 33px; margin: 5px; cursor: pointer; }
.tuner .colors li span { position: relative; display: block; width: 25px; height: 25px; margin: 1px; border: 3px solid transparent; cursor: pointer; }
.tuner .colors .active span { border-color: #213540; box-shadow: 0 0 0 1px #fff; }
.tuner .colors .active span:after,
.tuner .colors .active span:before { content: ''; position: absolute; top: 5px; left: 12px; width: 1px; height: 15px; background: #fff; }
.tuner .colors .active span:before { top: 12px; left: 5px; width: 15px; height: 1px; }
.tuner .color-blue {background: #008fd5;}
.tuner .color-green {background: #da2a2d;}
.tuner .color-pink {background: red;}
.tuner .color-cyan {background: #00aba5;}
.tuner .color-orange {background: #f5961d;}
.tuner .color-purple {background: #8560a8;}
.tuner .layouts li { margin-top: 10px; background: #000; font-size: 12px; line-height: 24px; text-align: center; color: #fff; cursor: pointer; }
.tuner .layouts li:first-child {margin-top: 0;}
.tuner .layouts .active { background: #fff; color: #213540; cursor: default; }
.tuner-visible {margin-left: 0;}