/* 
 * This is a sample CSS file for FancySelect.
 * You can easily change styles such as colors, backgrounds, borders, font 
 * and dimensions to customize FancySelect look, but be careful about the
 * layout properties - some of them are essential to make FancySelect works
 * as expected. 
 */

/* The following rules set style for the <select> replacement 
 * Select is replaced by an inline <div class="fancy-select"> */

div.fancy-select {
	display: inline-block; /* Needed to behave like a select element */
	*display: inline; /* IE7 fix */
	*zoom: 1; /* IE7 fix */
	vertical-align: middle;
	margin: 0;
	overflow: hidden; /* For float clearing */
	cursor: pointer;
	/*padding: 1px;*/
	color: #55585b;

	border: 1px solid #bbbbbb;
	/*font-weight: bold;*/
	font-size: 13px;

	border-radius: 3px;

	width: 150px;

	background: #fefefe;
	background: linear-gradient(to bottom,  #fefefe 0%,#ececec 55%,#d7d7d7 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#d7d7d7',GradientType=0 );

	box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2);
}

/* This is the arrow on the right side. The triangle is 
 * rendered using a base64 encoded PNG :)
 * See the magic here: http://ptrn.it/x0Hdzg */

div.fancy-select .arrow {
	display: block;
	float: right;
	height: 11px;
	width: 7px;
	margin: 12px 15px 0 0;
	background: url(/img/fancy/selectbox_arrow.png) no-repeat;
}

/* The following rule set style for the dropdown list,
 * which is a <ul class="fancy-select"> */

ul.fancy-select {
	margin: 0; /* Reccomended! */
	padding: 0;

	border: 1px solid #a3a3a3;
	width: 150px;

	/* Use the folliwing if you want to set a fixed height 
	 * on the dropdown and let user "scroll" options... 
	width: 150px;
	height: 200px;
	overflow: auto;
	*overflow-x: hidden;
	*overflow-y: auto; */
	
}

ul.fancy-select li {
	margin: 0;
	/*padding: 1px;*/
	list-style-type: none; /* We do not need bullets */
	/*border: 1px solid #dddddd;*/
	background-color: #fcfcfc;
	overflow: hidden; /* For float clearing */
	border-top: none; /* Avoid double-borders */
	cursor: pointer;
	*width: 150px; /* IE7 fix, we HAVE TO se fixed with :( */
	*margin-bottom: -3px; /* IE7 fix */

	font-size: 13px;
}

ul.fancy-select li:hover {
	background-color: #3f74ad;
	color: #fff;
}

/* This is for the currently selected option */

ul.fancy-select li.selected {
	/*background-color: #ddeeff;
	font-weight: bold;*/
}

/* This is for the disabled options */

ul.fancy-select li.disabled {
	background-color: #dddddd;
	color: #666666;
	cursor: default;
}

/* The following rules set style for inner content of the <select> 
 * replacement and the dropdown list. Just an image and a text left-floated */

.fancy-select .image {
	display: block;
	float: left;
	width: 32px;
	height: 32px;
}

.fancy-select .text {
	display: block;
	float: left;
	height: 32px;
	line-height: 32px;
	padding: 0 10px;
}

/* Some rules to have bigger images for "fancy-select-big" class */

ul.fancy-select-big li .image {
	display: block;
	float: left;
	width: 64px;
	height: 64px;
}

ul.fancy-select-big li {
	*width: 64px; /* IE7 fix, we HAVE TO se fixed with :( */
}