/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : May 3, 2015, 8:18:33 PM
    Author     : Irwan
*/

.color-switcher {
	position: fixed;
	width: 110px;
	padding: 10px;
	z-index: 100;
	top: 40%;
	left: -110px;
	margin-top: -152px;
	background-color: #2f343b;
	-webkit-border-radius: 0 0 5px 0;
	-moz-border-radius: 0 0 5px 0;
	border-radius: 0 0 5px 0;
	-webkit-transition: left 300ms ease-out;
	-moz-transition: left 300ms ease-out;
	transition: left 300ms ease-out;
}
.color-switcher.open {
	left: 0px;
}
.color-switcher .color {
	margin: 4px auto 2px auto;
	text-align: center;
}
.color-switcher .color a {
	display: inline-block;
	width: 67px;
	height: 42px;
	border: 2px solid transparent;
	background-repeat: no-repeat;
	margin-bottom: 3px;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	transition: all 300ms ease;
}
.color-switcher .color span {
	display: block;
	width: 100%;
	text-align: center;
	color: #ffffff;
	font-size: 13px;
	font-weight: normal;
}
.color-switcher .color a:hover {
	opacity: 0.7;
}
.color-switcher .color a.current {
	border: 2px solid #fff;
	opacity: 1;
}
.color-switcher .toggle {
	position: absolute;
	width: 60px;
	padding: 7px 0;
	color: #fff;
	font-size: 1.9em;
	text-align: center;
	top: 0;
	right: -60px;
	background-color: #2f343b;
	-webkit-border-radius: 0 4px 4px 0;
	-moz-border-radius: 0 4px 4px 0;
	border-radius: 0 4px 4px 0;
	cursor: pointer;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	transition: all 300ms ease;
}
.color-switcher .toggle:hover {
  background-color: #4f555e;
}
.color-switcher .toggle i {
	-webkit-animation: spin 4s infinite linear;
	-moz-animation: spin 4s infinite linear;
	-ms-animation: spin 4s infinite linear;
	animation: spin 4s infinite linear;
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}
@media screen and (max-width: 991px) {
	.color-switcher { display: none; }
}