#StyleSwitcher {
    top: 100px;
    right: -192px;
    width: 192px;
    height: auto;
    z-index: 9999;
    position: fixed;
    text-align: left;
    min-height: 200px;
    background-color: #f6f7f9;
    padding: 15px 10px 15px 15px;

    -webkit-border: 1px solid #f1f1f1;
    -moz-border: 1px solid #f1f1f1;
    -o-border: 1px solid #f1f1f1;
    border: 1px solid #f1f1f1;

    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    -o-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;

    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#StyleSwitcher.open { right: -1px; }

#StyleSwitcher a.switcher-btn {
    top: 30px;
    width: 50px;
    height: 50px;
    left: -50px;
    font-size: 30px;
    cursor: pointer;
    line-height: 47px;
    position: absolute;
    text-align: center;
    background-color: #f6f7f9;

    -webkit-border: 1px solid #f1f1f1;
    -moz-border: 1px solid #f1f1f1;
    -o-border: 1px solid #f1f1f1;
    border: 1px solid #f1f1f1;

    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    -o-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
}
#StyleSwitcher a.switcher-btn:focus,
#StyleSwitcher a.switcher-btn:hover { color: #000000; }

.switcher-style {
    width: 100%;
    margin: 10px 0;
    padding: 10px 0;

    -webkit-border-top: 1px solid #dee2e9;
    -moz-border-top: 1px solid #dee2e9;
    -o-border-top: 1px solid #dee2e9;
    border-top: 1px solid #dee2e9;

    -webkit-border-bottom: 1px solid #dee2e9;
    -moz-border-bottom: 1px solid #dee2e9;
    -o-border-bottom: 1px solid #dee2e9;
    border-bottom: 1px solid #dee2e9;
}
.switcher-style a {
    width: 100%;
    display: block;
    text-align: left;
    line-height: 28px;
}
.switcher-style a:focus,
.switcher-style a:hover { color: #000000; }

.switcher-colors {
    width: 100%;
    overflow: hidden;
    margin: 0 0 10px;
    padding: 0 0 15px;

    -webkit-border-bottom: 1px solid #dee2e9;
    -moz-border-bottom: 1px solid #dee2e9;
    -o-border-bottom: 1px solid #dee2e9;
    border-bottom: 1px solid #dee2e9;
}
.switcher-colors a.color-switch {
    float: left;
    width: 36px;
    height: 36px;
    margin-top: 5px;
    cursor: pointer;
    margin-right: 5px;
    display: inline-block;
}


.main-color { background-color: #ff3131; }

.red-1 { background-color: #d80018; }
.red-2 { background-color: #ed4a43; }
.orange-1 { background-color: #e47911; }
.orange-2 { background-color: #e48f4c; }
.yellow-1 { background-color: #f1be03; }
.yellow-2 { background-color: #e3c552; }
.green-1 { background-color: #2e9063; }
.green-2 { background-color: #89c144; }
.blue-1 { background-color: #386090; }
.blue-2 { background-color: #4478b2; }
.purple-1 { background-color: #563d7c; }
.purple-2 { background-color: #685ab1; }
.pink { background-color: #ec005f; }
.cumin { background-color: #b8a279; }

.switcher-page { width: 100%; }
.switcher-page a {
    width: 100%;
    display: block;
    text-align: left;
    line-height: 28px;
}
.switcher-page a:hover,
.switcher-page a:focus { color: #000000; }

@media only screen and (max-width: 1024px) { #StyleSwitcher { display: none;} }