/* ---------------------------------------------------------------------- * Product Name: Color-Switcher-Plugin* Product URI: http://shariarbd.com/demo/color-switcher-plugin/* Author: Shariar* Author URI: http://shariarbd.com/* Description: Color Switcher plugin is a simple and easy to use plugin used to switch color of a site.* Version: 1.0.0* License: The MIT License (MIT)* Tags: color switcher* ---------------------------------------------------------------------- *//* Color Style Switcher ---------------------------------------------------------------------- */#color-style-switcher div h3 {    color: #ffffff;    font-size: 19px;    margin: 8px 3px 12px;}#color-style-switcher {    background: none repeat scroll 0 0 rgba(0,0,0,.7);    box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.08);    left: -189px;    position: fixed;    top: 230px;    width: 188px;    z-index: 9999;}#color-style-switcher div {    padding: 5px 10px;}#color-style-switcher .bottom {    background: none repeat scroll 0 0 rgba(0,0,0,.7);    color: #252525;    padding: 0;}#color-style-switcher .bottom a.settings {    background-color:rgba(0,0,0,.7);    background-image: url('../../images/colors.png');    box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.08);    display: block;    height: 40px;    position: absolute;    right: -40px;    top: 0;    width: 40px;    padding: 3px;}#color-style-switcher .bottom a.settings {    -webkit-animation-name: spin;    -webkit-animation-duration: 4000ms;    -webkit-animation-iteration-count: infinite;    -webkit-animation-timing-function: linear;    -moz-animation-name: spin;    -moz-animation-duration: 4000ms;    -moz-animation-iteration-count: infinite;    -moz-animation-timing-function: linear;    -ms-animation-name: spin;    -ms-animation-duration: 4000ms;    -ms-animation-iteration-count: infinite;    -ms-animation-timing-function: linear;    animation-name: spin;    animation-duration: 4000ms;    animation-iteration-count: infinite;    animation-timing-function: linear;    @-ms-keyframes spin {         from {             -ms-transform: rotate(0deg);         } to {             -ms-transform: rotate(360deg);         }    }    @-moz-keyframes spin {         from {             -moz-transform: rotate(0deg);         } to {             -moz-transform: rotate(360deg);         }    }    @-webkit-keyframes spin {         from {             -webkit-transform: rotate(0deg);         } to {             -webkit-transform: rotate(360deg);         }    }    @keyframes spin {         from {             transform: rotate(0deg);         } to {             transform: rotate(360deg);         }    }}#color-style-switcher select {    background: none repeat scroll 0 0 #F6F6F6;    border: 1px solid #FFFFFF;    line-height: 1;    margin-bottom: 10px;    padding: 5px 10px;    width: 150px;}ul.colors {    list-style: none outside none;    margin: 0 0 10px;    overflow: hidden;	padding:0;}ul.colors li {    float: left;    margin: 2px;}ul.colors li a {    cursor: pointer;    display: block;    height: 35px;    width: 35px;	border-radius:4px;	-webkit-border-radius:4px;}ul.colors li a.active {    position: relative;}ul.colors li a.active:after {    color: #fff;    content:"\f00c";    font-family: "FontAwesome";    font-size: 10px;    right: 12px;    position: absolute;    top: 9px;}ul.colors li a.color1.active:after {    color:#000000;}@media only screen and (max-width: 500px) {    #color-style-switcher {        display: none;    }}/* Color Style Switcher  End---------------------------------------------------------------------- *//* Colors---------------------------------------------------------------------- */ul.colors .color1 {    background: #FFB606;}ul.colors .color2 {    background: #ff6600;}ul.colors .color3 {     background: #11c0b4;}ul.colors .color4 {     background: #8673d0;}ul.colors .color5 {     background: #f39318;}ul.colors .color6 {     background: #de2e8c;}ul.colors .color7 {     background: #8ec211;}ul.colors .color8 {     background: #6c91c5;}/* Colors End---------------------------------------------------------------------- */