/*STYLES FOR SWITCHER*/

.switcher h3 {
	font-size:13px;
	margin:1px 0 3px 0;
	color:#474646;
}

.switcher {
	background:#fafafa;
	width:207px;
	position:fixed;
	top:105px;
	z-index:9999;
	left:0px;
	border:solid #f1f1f1;
	border-width:0 1px 4px 0;
	font-family:'ExoRegular', Arial, sans-serif;
	-webkit-box-shadow: 0px 0px 4px 0px rgba(51, 51, 51, 0.4);
	box-shadow: 0px 0px 4px 0px rgba(51, 51, 51, 0.4);
}

.switcher h2 {
	background:#222;
	color:#fff;
	padding:0;
	font-size:15px;
	padding:5px 0 6px 15px;
}

.switcher h2 a {
	background:#222;
	display:block;
	height:41px;
	position:absolute;
	right:-39px;
	top:0;
	width:39px;
	text-align:center;
}

.switcher h2 a i {
	font-size:30px;
	color:#fff;
	margin:5px 0 0 0;
	animation:rotate 5s linear 0s infinite normal;
	-moz-animation:rotate 5s linear 0s infinite normal;
	-webkit-animation:rotate 5s linear 0s infinite normal;
	-o-animation:rotate 5s linear 0s infinite normal;
}

@keyframes rotate {
	0% {transform:rotate(0deg);}
	100% {transform:rotate(360deg);}
}

@-moz-keyframes rotate {
	0% {-moz-transform:rotate(0deg);}
	100% {-moz-transform:rotate(360deg);}
}

@-webkit-keyframes rotate {
	0% {-webkit-transform:rotate(0deg);}
	100% {-webkit-transform:rotate(360deg);}
}

@-o-keyframes rotate {
	0% {-o-transform:rotate(0deg);}
	100% {-o-transform:rotate(360deg);}
}

.switcher h2 a:hover i {
	animation-name:rotate;
	animation-play-state:paused;
	-moz-animation-name:rotate;
	-moz-animation-play-state:paused;
	-webkit-animation-name:rotate;
	-webkit-animation-play-state:paused;
	-o-animation-name:rotate;
	-o-animation-play-state:paused;
}

.switcher .content {
	padding:5px 16px 16px 16px;
	overflow:hidden;
}

.hide {
	display:none;
}

/* Layout Box */
.layout-switcher {
	margin:0 0 10px 0;
	overflow:hidden;
}

.layout-switcher a.layout {
	padding:6px 7px;
	color:#797878;
	border:2px solid #eaeaea;
	width:63px;
	cursor:pointer;
	float:left;
	display:block;
	margin:0 6px 0 0;
	text-align:center;
	background:#fff;
	letter-spacing:2px;
}


/* Color Box */
.switcher-box {
	height:auto;
	overflow:hidden;
	margin-bottom:6px;
}

.styleswitch {
	width:21px;
    height:24px;
	display:block;
	cursor:pointer;
	margin:0 4px 4px 0;
	float:left;
	opacity:0.5;
}

.styleswitch:hover {
	opacity:1;
}

.styleswitch#blue   { background-color:#00aadc; }
.styleswitch#dark-blue   { background-color:#0024dc; }
.styleswitch#green  { background-color:#63bd10; }
.styleswitch#light-green  { background-color:#5bdc77; }
.styleswitch#orange { background-color:#e76322; }
.styleswitch#light-orange { background-color:#f69c53; }
.styleswitch#purple { background-color:#5b40b3; }
.styleswitch#red    { background-color:#e2341d; }
.styleswitch#light-red    { background-color:#ff4a32; }
.styleswitch#yellow-c    { background-color:#ebb84b; }
.styleswitch#aqua    { background-color:#1fae92; }
.styleswitch#brown    { background-color:#8a6741; }
.styleswitch#pink    { background-color:#fb565a; }
.styleswitch#gray    { background-color:#b6b6b6; }

/* Background Box */
.bg {
	height:auto;
	overflow:hidden;
	margin-bottom:6px;
}

.pattern {
	width:21px;
    height:24px;
	display:block;
	cursor:pointer;
	margin:0 4px 4px 0;
	float:left;
	box-shadow:0 0 0 1px #D6D2D2 inset;
}

.pattern#p1 { background:url("../../images/pattern-backgrounds/1.png") repeat ; }
.pattern#p2 { background:url("../../images/pattern-backgrounds/2.png") repeat ; }
.pattern#p3 { background:url("../../images/pattern-backgrounds/3.png") repeat ; }
.pattern#p4 { background:url("../../images/pattern-backgrounds/4.png") repeat ; }
.pattern#p5 { background:url("../../images/pattern-backgrounds/5.png") repeat ; }
.pattern#p6 { background:url("../../images/pattern-backgrounds/6.png") repeat ; }
.pattern#p7 { background:url("../../images/pattern-backgrounds/7.png") repeat ; }
.pattern#p8 { background:url("../../images/pattern-backgrounds/8.png") repeat ; }
.pattern#p9 { background:url("../../images/pattern-backgrounds/9.png") repeat ; }
.pattern#p10 { background:url("../../images/pattern-backgrounds/10.png") repeat ; }
.pattern#p11 { background:url("../../images/pattern-backgrounds/11.png") repeat ; }
.pattern#p12 { background:url("../../images/pattern-backgrounds/12.png") repeat ; }
.pattern#p13 { background:url("../../images/pattern-backgrounds/13.png") repeat ; }
.pattern#p14 { background:url("../../images/pattern-backgrounds/14.png") repeat ; }
.pattern#p15 { background:url("../../images/pattern-backgrounds/15.png") repeat ; }
.pattern#p16 { background:url("../../images/pattern-backgrounds/16.png") repeat ; }
.pattern#p17 { background:url("../../images/pattern-backgrounds/17.png") repeat ; }
.pattern#p18 { background:url("../../images/pattern-backgrounds/18.png") repeat ; }
.pattern#p19 { background:url("../../images/pattern-backgrounds/19.png") repeat ; }
.pattern#p20 { background:url("../../images/pattern-backgrounds/20.png") repeat ; }
.pattern#p21 { background:url("../../images/pattern-backgrounds/21.png") repeat ; }
.pattern#p22 { background:url("../../images/pattern-backgrounds/22.png") repeat ; }
.pattern#p23 { background:url("../../images/pattern-backgrounds/23.png") repeat ; }
.pattern#p24 { background:url("../../images/pattern-backgrounds/24.png") repeat ; }
.pattern#p25 { background:url("../../images/pattern-backgrounds/25.png") repeat ; }
.pattern#p26 { background:url("../../images/pattern-backgrounds/26.png") repeat ; }
.pattern#p27 { background:url("../../images/pattern-backgrounds/27.png") repeat ; }
.pattern#p28 { background:url("../../images/pattern-backgrounds/28.png") repeat ; }
.pattern#p29 { background:url("../../images/pattern-backgrounds/29.png") repeat ; }
.pattern#p30 { background:url("../../images/pattern-backgrounds/30.png") repeat ; }
.pattern#p31 { background:url("../../images/pattern-backgrounds/31.png") repeat ; }
.pattern#p32 { background:url("../../images/pattern-backgrounds/32.png") repeat ; }
.pattern#p33 { background:url("../../images/pattern-backgrounds/33.png") repeat ; }
.pattern#p34 { background:url("../../images/pattern-backgrounds/34.png") repeat ; }
.pattern#p35 { background:url("../../images/pattern-backgrounds/35.png") repeat ; }
.pattern#p36 { background:url("../../images/pattern-backgrounds/36.png") repeat ; }
.pattern#p37 { background:url("../../images/pattern-backgrounds/37.png") repeat ; }
.pattern#p38 { background:url("../../images/pattern-backgrounds/38.png") repeat ; }
.pattern#p39 { background:url("../../images/pattern-backgrounds/39.png") repeat ; }
.pattern#p40 { background:url("../../images/pattern-backgrounds/40.png") repeat ; }
.pattern#p41 { background:url("../../images/pattern-backgrounds/41.png") repeat ; }
.pattern#p42 { background:url("../../images/pattern-backgrounds/42.png") repeat ; }


/* Media Queries
================================================== */

/* Smaller than standard 1024px (devices and browsers) */
@media only screen and (max-width:1024px) {

.switcher {
	left:-1000px !important;
}

.switcher-box {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:auto;
	z-index:200;
}

.styleswitch {
	width:7.14%;
	height:10px;
	display:inline-block;
	cursor:pointer;
	margin:0;
	float:left;
	opacity:1;
}
	
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width:768px) and (max-width:959px) {

.switcher {
	left:-1000px !important;
}

.switcher-box {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:auto;
	z-index:200;
}

.styleswitch {
	width:7.14%;
	height:10px;
	display:inline-block;
	cursor:pointer;
	margin:0;
	float:left;
	opacity:1;
}
	

}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width:767px) {
	
.switcher {
	left:-1000px !important;
}

.switcher-box {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:auto;
	z-index:200;
}

.styleswitch {
	width:7.14%;
	height:10px;
	display:inline-block;
	cursor:pointer;
	margin:0;
	float:left;
	opacity:1;
}
	
	
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width:480px) and (max-width:767px) {
	
.switcher {
	left:-1000px !important;
}

.switcher-box {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:auto;
	z-index:200;
}

.styleswitch {
	width:7.14%;
	height:10px;
	display:inline-block;
	cursor:pointer;
	margin:0;
	float:left;
	opacity:1;
}


}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width:479px) {


.switcher {
	left:-1000px !important;
}

.switcher-box {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:auto;
	z-index:200;
}

.styleswitch {
	width:7.14%;
	height:10px;
	display:inline-block;
	cursor:pointer;
	margin:0;
	float:left;
	opacity:1;
}
	

}