/************************************************************************
*************************************************************************
@Name :       	Selectyze - jQuery Plugin CSS
@Revison :    	1.0
@Date : 		19/12/2011
@Author:     	Mickael SURREL - ALPIXEL Agency - (www.myjqueryplugins.com - www.alpixel.fr) 
@License :		 Open Source - MIT License : http://www.opensource.org/licenses/mit-license.php
 
**************************************************************************
*************************************************************************/

/***************************/
/** Common to every theme **/
/***************************/
.DivSelectyze {
	position:relative;
	width:253px;
	float:left;
	margin-top:15px;
}

.DivSelectyze .selectyzeValue {
	position:relative;
	z-index:10;
	display:block;
	text-decoration:none;
}

.DivSelectyze ul {list-style:none;}
.DivSelectyze .UlSelectize {
	position:absolute;
	z-index:9999;
	display:none;
}

.DivSelectyze li a {
	display:block;
	text-decoration:none;
}

.optgroupTitle {
	display:block;
}
/*******************************/
/** END COMMON TO EVERY THEME **/
/*******************************/
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/




/*----------------------------------
 You can add your own theme below !!
 To add your theme, be sure to have 5 CSS elements :
 
 .your_theme .selectyzeValue {} 		-> Appearance of your select element
 .your_theme .UlSelectize {} 			-> Appearance of the dropdown list
 .your_theme li a {} 					-> Appearance of the items into the dropdown list
 .your_theme li a:hover {} 				-> items on hover
 .your_theme .optgroupTitle {} 			-> Appearance of the optgroup label !! only if you have <optgroup> element into your list 
 
 
 that's all ! \o/
----------------------------------*/
	
	
	/****************/
	/** GREY HEME **/
	/*****************/
	.grey .selectyzeValue {
		font:13px/35px Arial;
		color:#797979;
		width:225px;
		height:32px;
/*		background:url('bg_grey.jpg') no-repeat;*/
		padding-left:15px
	}

	.grey .UlSelectize {
		top:36px;
		left:0px;
		width:241px;
		border:1px solid #d2d2d2;
		background-color:#fff
	}

	.grey li a {
		height:28px;
		font:13px/30px Arial;
		background-color:transparent;
		color:#797979;
		padding-left:10px;
		border:1px solid #fff
	}

	.grey li a:hover {
		color:#fff;
		background-color:#858585;/** gradient bgcolors */
		background-image: -webkit-gradient(linear, left top, left bottom, from(#7c7c7c), to(#858585)); /* Saf4+, Chrome */
		background-image: -webkit-linear-gradient(top, #7c7c7c #858585); /* Chrome 10+, Saf5.1+, iOS 5+ */
		background-image:    -moz-linear-gradient(top, #7c7c7c, #858585); /* FF3.6 */
		background-image:     -ms-linear-gradient(top, #7c7c7c, #858585); /* IE10 */
		background-image:      -o-linear-gradient(top, #7c7c7c, #858585); /* Opera 11.10+ */
		background-image:         linear-gradient(top, #7c7c7c, #858585)
	}
	
	.grey .optgroupTitle {
		margin-top:15px;
		font-size:20px;
		padding-left:10px;
		background-color:#858585;
		color:#fff;
	}