/* ---------------- */
/* Style Selector	*/
/* ---------------- */

#style_selector {
	background:			#FFFFFF;
	width:				180px;
	position:			fixed;
	right:				0;
	top:				60px;
	z-index:			10000;
}
#style_selector.hideChooser {
	right:				-180px;
}
#style_selector_container {
	border: 1px solid rgba(23,24,26,0.15);
	-webkit-box-shadow: 0 2px 9px 2px rgba(0,0,0,0.14);
	   -moz-box-shadow: 0 2px 9px 2px rgba(0,0,0,0.14);
			box-shadow: 0 2px 9px 2px rgba(0,0,0,0.14);	
	-webkit-border-top-left-radius:		2px;
	-webkit-border-bottom-left-radius:	2px;
	-moz-border-radius-topleft:			2px;
	-moz-border-radius-bottomleft:		2px;
	border-top-left-radius:				2px;
	border-bottom-left-radius:			2px;
}
.style-main-title {
	color:				#000000;
	font-size:			15px;
	height:				44px;
	line-height:		44px;
	text-align:			center;
	border-bottom:		1px solid rgba(23,24,26,0.15);
	background-image:	linear-gradient(top, #FFF 0%, #F7F4F4 100%);
	background-image:	-o-linear-gradient(top, #FFF 0%, #F7F4F4 100%);
	background-image:	-moz-linear-gradient(top, #FFF 0%, #F7F4F4 100%);
	background-image:	-webkit-linear-gradient(top, #FFF 0%, #F7F4F4 100%);
	background-image:	-ms-linear-gradient(top, #FFF 0%, #F7F4F4 100%);
	background-image:	-webkit-gradient( linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #F7F4F4) );
}
#style_selector .images {
	padding-left:		25px;
	margin-top:			15px;
	border-bottom:		1px solid rgba(23,24,26,0.15);
	padding-bottom:		10px;
	position:			relative;
	z-index:			10000;
}
.box-title {
	font-size:			12px;
	height:				41px;
	line-height:		41px;
	text-align:			center;
	border-bottom:		1px solid rgba(23,24,26,0.15);
}
.input-box {
	padding:			10px;
	padding-left:		23px;
	border-bottom:		1px solid rgba(23,24,26,0.15);
}
#style_selector .style-toggle {
	background:			url('../../img/style_arrow.png');
	width:				35px;
	height:				43px;	
	cursor:				pointer;
}
#style_selector .close {
	background-position:top left;
	position:			absolute;
	top:				45px;
	left:				-35px;
	width:				35px;
}
#style_selector .open {
	background-position:bottom left;
	position:			absolute;
	top:				45px;
	left:				-35px;
	width:				35px;
}
#style_selector .colors,
#style_selector .patterns {
	width:				auto;
	height:				auto;
	margin:				0;
	padding:			0px 0px 20px 0px;
	cursor:				pointer;
	z-index:			2;
}
#style_selector ul {
	list-style:			none;
	margin:				0;
	padding:			10px 10px 15px 14px;
	border:				0;
}
#style_selector ul li {
	width:				auto;
	height:				auto;
	margin:				5px 0px 0px 5px;
	padding:			0;
	border:				0;
	display:			block;
	float:				left;
}
#style_selector ul li a {
	width:				100%;
	height:				100%;
	margin:				0;
	padding:			0;
	border:				0;
}
#style_selector ul li a span {
	width:				24px;
	height:				24px;
	display:			inline-block;
	margin:				0;
	padding:			0;
	border:				1px solid #000;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
	-webkit-transition: 0.2s;
	   -moz-transition: 0.2s;
		-ms-transition: 0.2s;
		 -o-transition: 0.2s;
			transition: 0.2s;
}
#style_selector .patterns ul li a span 			{ background-color: #DDDDDD; border: 1px solid #000000; }

#style_selector .colors ul li a span.red		{ background-color: #BB2222; border: 1px solid #DD4444; }
#style_selector .colors ul li a span.yellow		{ background-color: #EE9900; border: 1px solid #FFBB22; }
#style_selector .colors ul li a span.green		{ background-color: #009966; border: 1px solid #22BB88; }
#style_selector .colors ul li a span.skyblue	{ background-color: #2288BB; border: 1px solid #44AADD; }
#style_selector .colors ul li a span.blue		{ background-color: #002244; border: 1px solid #224466; }
#style_selector .colors ul li a span.purple		{ background-color: #440066; border: 1px solid #662288; }
#style_selector .colors ul li a span.pink		{ background-color: #DD2255; border: 1px solid #FF4477; }
#style_selector .colors ul li a span.brown		{ background-color: #331100; border: 1px solid #553322; }
#style_selector .colors ul li a span.gray		{ background-color: #2C2C2C; border: 1px solid #4C4C4C; }
#style_selector .colors ul li a span.black		{ background-color: #000000; border: 1px solid #222222; }

#style_selector ul li a:hover span {
	border:				1px solid #FFFFFF !important;
}