div.style-switcher {



    background-color: #374250;



    color: #f1f1f1;



    width: 225px;



    position: fixed;



    top: 174px;



    z-index: 1002;



    left: -227px;



}



div.style-switcher .header {



    padding: 13px 30px 10px 13px;



    background: #374250;



    z-index: 2;



    position: relative;



    border: 1px solid #57606d;



    height: 45px;



}



div.style-switcher .body {



    padding: 0 12px 10px;



    top: 0px;



    position: absolute;



    opacity: 0;



    background-color: #374250;



    border: 1px solid #57606d;



    border-top: none;



    -webkit-transition: all 0.6s ease-in-out;



    -moz-transition: all 0.6s ease-in-out;



    -o-transition: all 0.6s ease-in-out;



    -ms-transition: all 0.6s ease-in-out;



    transition: all 0.6s ease-in-out;



}



div.style-switcher.opened .body {



    top: 45px;



    opacity: 1;



}



div.style-switcher .header h2,



div.style-switcher .body h3{



    color: #f1f1f1;



}



div.style-switcher h2 {



    margin: 0 0 0 12px;



    font-size: 17px;



}



div.style-switcher h3 {



    margin: 15px 0 7px 0;



    font-size: 17px;



    text-align: center;



}



div.style-switcher hr {



    margin: 15px 0;



}



div.style-switcher hr + h3 {



    margin-top: 0;



}



div.style-switcher a.trigger {



    display: block;



    height: 45px;



    position: absolute;



    right: -45px;



    top: -1px;



    background: #374250;



    width: 45px;



    font-size: 24px;



    line-height: 44px;



    color: #f1f1f1;



    text-align: center;



    text-decoration: none;



    border: 1px solid #57606d;



    border-left: none;



}



div.style-switcher.opened a.trigger {



    right: -1px;



}



div.style-switcher ul {



    list-style: none;



    margin: 0;



    padding: 5px 0 0 0;



    font-size: 0;



    text-align: center;



}



div.style-switcher ul li {



    width: 25px;



    height: 25px;



    position: relative;



    display: inline-block;



    cursor: pointer;



    margin: 0 5px -5px 0;



    -webkit-transition: all linear 0.3s;



    -moz-transition: all linear 0.3s;



    -o-transition: all linear 0.3s;



    -ms-transition: all linear 0.3s;



    transition: all linear 0.3s;



    -webkit-border-radius: 100%;



    -moz-border-radius: 100%;



    border-radius: 100%;



}



div.style-switcher ul.layoutChange li {



    width: 45%;



    height: 30px;



    margin-right: 5px;



    color: #666666;



    background-color: #f1f1f1;



    border: 1px solid #f3f3f3;



    -webkit-border-radius: 0;



    -moz-border-radius: 0;



    border-radius: 0;



    font-size: 13px;



    text-align: center;



    padding-top: 5px;



}



div.style-switcher ul.layoutChange li i {



    color: #cccccc;



    font-size: 11px;



}



div.style-switcher ul.layoutChange li.selected {



    border: 1px solid #aaaaaa;



}



div.style-switcher ul.layoutChange li.selected i {



    color: #666666;



}



div.style-switcher ul.footerChange li {



    width: 45%;



    height: 30px;



    margin-right: 5px;



    -webkit-border-radius: 0;



    -moz-border-radius: 0;



    border-radius: 0;



    font-size: 13px;



    padding: 6px 14px 0;



}



div.style-switcher ul.footerChange li.dark {



    color: #f1f1f1;



    background-color: #262626;



}



div.style-switcher ul.footerChange li.light {



    color: #333333;



    background-color: #f7f7f7;



}



div.style-switcher ul.footerChange li i {



    width: 20px;



}







div.style-switcher ul.footerChange li.selected i:before {



    content: "\f046";



}



div.style-switcher ul.headerChange li {



    width: 45%;



    height: 30px;



    margin-right: 5px;



    -webkit-border-radius: 0;



    -moz-border-radius: 0;



    border-radius: 0;



    font-size: 13px;



    padding: 6px 14px 0;



}



div.style-switcher ul.headerChange li.dark {



    color: #f1f1f1;



    background-color: #262626;



}



div.style-switcher ul.headerChange li.light {



    color: #333333;



    background-color: #f7f7f7;



}



div.style-switcher ul.headerChange li i {



    width: 20px;



}







div.style-switcher ul.headerChange li.selected i:before {



    content: "\f046";



}



div.style-switcher ul.styleChange li {



    border: 1px solid #ffffff;



}



div.style-switcher ul.styleChange li.selected:after,



div.style-switcher ul.patternChange li.selected:after {



    font-family: "FontAwesome";



    content: "\f00c";



    color: #fff;



    top: -1px;



    left: 0px;



    position: absolute;



    text-align: center;



    line-height: 25px;



    width: 100%;



    font-size: 16px;



}



div.style-switcher ul.patternChange li.pattern-0.selected:after,



div.style-switcher ul.patternChange li.pattern-1.selected:after,



div.style-switcher ul.patternChange li.pattern-2.selected:after,



div.style-switcher ul.patternChange li.pattern-3.selected:after,



div.style-switcher ul.patternChange li.pattern-4.selected:after {



    color: #333333;



}



div.style-switcher ul.patternChange li.selected:after {



    color: #ffffff;



}



div.style-switcher ul.resetAll li {



    -webkit-border-radius: 0px;



    -moz-border-radius: 0px;



    border-radius: 0px;



    width: 50%;



    height: 30px;



    margin: 7px auto;



    display: block;



    padding: 4px 0;



    min-width: 0;



    font-size: 14px;



}



div.style-switcher select {



    width: 100%;



    padding: 5px;



    border: 1px solid #b2bfca;



}



div.style-switcher .blue {



    background: #2c5fb3;



}



div.style-switcher .blue:hover {



    opacity: 0.5;



}



div.style-switcher .green {



    background: #0d8609;



}



div.style-switcher .green:hover {



    opacity: 0.5;



}



div.style-switcher .olive {



    background: #6d8764;



}



div.style-switcher .olive:hover {



    opacity: 0.5;



}



div.style-switcher .teal {



    background: #009798;



}



div.style-switcher .teal:hover {



    opacity: 0.5;



}



div.style-switcher .orange {



    background: #f39c12;



}



div.style-switcher .orange:hover {



    opacity: 0.5;



}



div.style-switcher .pink {



    background: #db7093;



}



div.style-switcher .pink:hover {



    opacity: 0.5;



}



div.style-switcher .purple {



    background: #954db3;



}



div.style-switcher .purple:hover {



    opacity: 0.5;



}



div.style-switcher .red {



    background: #e84c3d;



}



div.style-switcher .red:hover {



    opacity: 0.5;



}



div.style-switcher .brown {



    background: #7a5230;



}



div.style-switcher .brown:hover {



    opacity: 0.5;



}



div.style-switcher .light-blue {



    background: #0da9ef;



}



div.style-switcher .light-blue:hover {



    opacity: 0.5;



}



div.style-switcher .light-green {



    background: #2ecc71;



}



div.style-switcher .light-green:hover {



    opacity: 0.5;



}



div.style-switcher .yellow {



    background: #d3b61c;



}



div.style-switcher .yellow:hover {



    opacity: 0.5;



}