/* ==================================================
Style Selector
================================================== */

#style_selector{
	position:fixed;
	width:200px;
	top:20%;
	left:-200px;
	z-index:199;
	font-family:Helvetica, Arial, sans-serif;
	color:#111 !important;
	font-size:12px;
	font-weight:bold;

	-moz-border-radius:0 0 3px 0;
	-webkit-border-radius:0 0 3px 0;
	border-radius:0 0 3px 0;
}

#style_selector #ss_head{
	padding:0 20px;
	background:url(../images/style_selector/bg_head.png);
	color:#fff;
	font-size:12px;
	line-height:34px;
	height:32px;
	font-weight:bold;
	border-top:1px solid #1e1f20;  
	border-bottom:1px solid #1e1f20;  
	border-right:1px solid #1e1f20;  
	
	position:relative;
	text-shadow: 0 -1px 0 #000;

	box-shadow: -1px 0 0 rgba(255, 255, 255, 0.09) inset;
}

#style_selector #ss_head #ss_trigger{
	width:32px;
	height:32px;
	position:absolute;
	top:-1px;
	right:-34px;
	background:url(../images/style_selector/bg_head.png);

	border-top:1px solid #1e1f20;  
	border-right:1px solid #1e1f20;  
	border-bottom:1px solid #1e1f20;  
	

	-moz-border-radius:0 3px 3px 0;
	-webkit-border-radius:0 3px 3px 0;
	border-radius:0 3px 3px 0;
}

#style_selector #ss_head #ss_trigger span{
	background:url(../images/style_selector/switch_icon.png);
	width:24px;
	height:24px;
	position:absolute;
	left:4px;
	top:4px;
	text-indent:-9999px;
}

#style_selector.active #ss_head #ss_trigger span,
#style_selector #ss_head #ss_trigger span:hover{
	background-position:bottom;
}

#style_selector #ss_body{
	background:#fff;
	overflow:hidden;
	border-bottom:1px solid #efefef;  
	border-right:1px solid #efefef;  

	-moz-border-radius:0 0 3px 0;
	-webkit-border-radius:0 0 3px 0;
	border-radius:0 0 3px 0;
}

#style_selector #ss_body .ss_box{
	border-bottom:1px solid #e6e6e6;
	overflow:hidden;
	padding:20px 0 20px 20px;

}

#style_selector #ss_body .ss_box h4{
	color:#111 !important;
}

#style_selector #ss_body .ss_box.skins{
	padding:20px 0 12px 20px;
}

#style_selector #ss_body .ss_box.last{
	border:none;
	-moz-border-radius:0 0 3px 0;
	-webkit-border-radius:0 0 3px 0;
	border-radius:0 0 3px 0;
}

#style_selector #ss_body .ss_box h4{
	font-size:12px;
	margin:0 0 10px 0;
}

#style_selector #ss_body .ss_box .btn_ss{
	position: relative;
    display: inline-block;
    padding: 0;
	margin:0;
	width: 82px;
    height: 24px;
    border: 1px solid #a9a9a9;
	color:#111;	
	background: #f8f8f8;
	background: -moz-linear-gradient(top,  #f8f8f8 0%, #f2f2f2 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#f2f2f2));
	background: -webkit-linear-gradient(top,  #f8f8f8 0%,#f2f2f2 100%);
	background: -o-linear-gradient(top,  #f8f8f8 0%,#f2f2f2 100%);
	background: -ms-linear-gradient(top,  #f8f8f8 0%,#f2f2f2 100%);
	background: linear-gradient(to bottom,  #f8f8f8 0%,#f2f2f2 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
	text-align: center;
	text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    white-space: nowrap;
	font-weight: bold;
	font-size: 11px;
    line-height: 24px;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f2f2f2',GradientType=0 );
    cursor: pointer;

	-moz-border-radius: 3px 0 0 3px;
	-webkit-border-radius: 3px 0 0 3px;
	border-radius: 3px 0 0 3px;

	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

#style_selector #ss_body .ss_box .btn_ss:hover {
	border: 1px solid #C7C7C7;
	background: #f2f2f2;
	color:#111 !important;
}

#style_selector #ss_body .ss_box .btn_ss:active {}

#style_selector #ss_body .ss_box .btn_ss.active{
	color:#fff !important;
	background-color: #0af; -webkit-box-shadow: inset 0 2px 5px rgba(0,0,0,.15);
	-moz-box-shadow: inset 0 2px 5px rgba(0,0,0,.15);
	box-shadow: inset 0 2px 5px rgba(0,0,0,.15);
	border: solid 1px #008dd4;

	background-color:#0af;
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,.25), rgba(255,255,255,.25));
	background-image: -moz-linear-gradient(top, rgba(0,0,0,.25), rgba(255,255,255,.25));
	background-image: -o-linear-gradient(top, rgba(0,0,0,.25), rgba(255,255,255,.25));
	background-image: -ms-linear-gradient(top, rgba(0,0,0,.25), rgba(255,255,255,.25));
	background-image: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(255,255,255,.25));
	filter:none;
	text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

#style_selector #ss_body .ss_box .btn_ss.right{
	-moz-border-radius: 0 3px 3px 0;
	-webkit-border-radius: 0 3px 3px 0;
	border-radius: 0 3px 3px 0;
	left:-4px;
}

#style_selector #ss_body .ss_box ul{
	margin:0;
	padding:0;
}

#style_selector #ss_body .ss_box ul li{
	margin:0 8px 8px 0;
	padding:0;
	width:24px;
	height:24px;
	float:left;
	border: 1px solid #efefef;
	position:relative;        

	-moz-border-radius:3px 3px 3px 3px;
	-webkit-border-radius:3px 3px 3px 3px;
	border-radius:3px 3px 3px 3px;
}

#style_selector #ss_body .ss_box ul li.last{
	margin:0 0 8px 0;
}

#style_selector #ss_body .ss_box ul li a{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;

	-moz-border-radius:3px 3px 3px 3px;
	-webkit-border-radius:3px 3px 3px 3px;
	border-radius:3px 3px 3px 3px;
	
	background-position:center;
	background-repeat:no-repeat;
	
	-moz-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

#style_selector #ss_body .ss_box ul li a:hover,
#style_selector #ss_body .ss_box ul li a.active{
	-moz-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1) inset;
	-webkit-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1) inset;
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1) inset;
}

#style_selector #ss_body .ss_box ul li a.active{
	background-image:url(../images/style_selector/checked.png);
	
	-moz-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1) inset;
	-webkit-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1) inset;
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1) inset;
}

#style_selector #ss_body .ss_box ul li {
	border: 1px solid #858585;
	
	-moz-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05) inset;
	-webkit-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05) inset;
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05) inset;	
}

#style_selector #ss_body .ss_box ul li.light-orange{
	background-color: #ec8365;
}

#style_selector #ss_body .ss_box ul li.light-cyan{
	background-color: #65cbec;
}

#style_selector #ss_body .ss_box ul li.aqua{
	background-color: #28d3bd;
}

#style_selector #ss_body .ss_box ul li.light-green{
	background-color: #54cf74;
}

#style_selector #ss_body .ss_box ul li.lemon{
	background-color: #99cf54;
}

#style_selector #ss_body .ss_box ul li.red{
	background-color: #c82813;
}

#style_selector #ss_body .ss_box ul li.purple{
	background-color: #d32888;
}


/* --- All Mobile Devices --- */
@media only screen and (max-width: 767px) {
	#style_selector{
		top:3%;
		position:absolute;
	}
}


/* --- Retina Display --- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5){
	#style_selector{
		display:none;
	}
}