.colorswitcher{
    position: fixed;
    top: 200px;
    z-index: 9;
}
.colorswitcher .switcher-content{
    padding: 10px;
    background: #FFF;
    border: 2px solid #222;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    margin-top: -2px;
    width: 200px;
    position: absolute;
    left: -200px;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
#clrswitch{
    padding: 5px 12px;
    display: block;
    background: #FFF;
    font-size: 2em;
    color: #222;
    border: 2px solid #222;
    margin-left: 0px;
    border-top-right-radius: 5px;
    border-left: 0px;
    width: 50px;
}
#clrswitch .fa{
    -webkit-animation: rotation 2s infinite linear;
}
.colorswitcher h6{
    font-size: 16px;
    margin-bottom: 5px;
}
.fontul li{
    margin-top: 10px;
}
.fontul li a{                
    padding-left: 15px;
    color: #666;
    font-weight: 700;
}
.fontul li a.active{
    color: #2196F3;
}
.fontul li a:before{
    font-family: FontAwesome;
    content: "\f00d";
    width: 20px;
    display: inline-block;
    margin-left: -20px;
}
.fontul li a.active:before{
    font-family: FontAwesome;
    content: "\f00c";
}

.switcher-content.show-ul{
    left: 0px;
}
.colorul li a{
    width: 30px;
    height: 30px;
    display: block;                
    border-radius: 100%;
}
.colorul li:nth-child(1) a{
    background: #FFC107;
}
.colorul li:nth-child(2) a{
    background: #5485D2;
}
.colorul li:nth-child(3) a{
    background: #8BC85E;
}
.colorul li:nth-child(4) a{
    background: #CE1241;
}
.colorul li:nth-child(5) a{
    background: #00BCD4;
}
.colorul li:nth-child(6) a{
    background: #ff7246;
}
.colorul li:nth-child(7) a{
    background: #7E57C2;
}
.colorul li:nth-child(8) a{
    background: #1a919e;
}
@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}