/* 
 * 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"> */

a.fancy-select,
div.fancy-select,
div.fancy-select-big {
	display: block; /* Needed to behave like a select element */
	vertical-align: middle;
	margin: 0;
	overflow: hidden; /* For float clearing */
	cursor: pointer;
	background: transparent url(../../images/layout/bg_select.png) no-repeat left center;
	width: 140px;
	height: 36px;
	z-index: 10000;
}

div.fancy-select-big {
	background: transparent url(../../images/layout/bg_select_big.png) no-repeat left center;
	width: 300px
}

a.fancy-select .arrow,
div.fancy-select .arrow,
div.fancy-select-big .arrow {
	display: block;
	float: left;
	height: 26px;
	width: 17px;
	margin: 5px;
}

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

ul.fancy-select,
ul.fancy-select-big {
	display: block;
	margin: 0px 5px; /* Reccomended! */
	margin-top: 0px;
	padding: 0px 0px 0px 0px;
	width: 130px;
	height: 140px;
	overflow: auto;
	overflow-x: hidden;
	border: 1px solid #cccccc;
	background-color: #FFFFFF;
	z-index: 9999;
}

ul.fancy-select-big {
	width: 290px
}

ul.fancy-select li,
ul.fancy-select-big li {
	display: block;
	margin: 0px;
	padding: 0px;
	list-style-type: none; /* We do not need bullets */
	overflow: hidden; /* For float clearing */
	cursor: pointer;
	width: 130px;
	line-height: 30px;
}

ul.fancy-select-big li {
	width: 290px
}

ul.fancy-select li:hover,
ul.fancy-select-big li:hover {
	color: #FFFFFF;
	background-color: #5e2310;
}

ul.fancy-select li:hover .text,
ul.fancy-select-big li:hover .text {
	color: #FFFFFF;
}

/* This is for the currently selected option */

ul.fancy-select li.selected,
ul.fancy-select-big li.selected {
	color: #FFFFFF;
	background-color: #5e2310;
}

ul.fancy-select li.selected .text,
ul.fancy-select-big li.selected .text {
	color: #FFFFFF;
}

/* This is for the disabled options */

ul.fancy-select li.disabled,
ul.fancy-select-big li.disabled {
	color: #cccccc;
	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,
.fancy-select-big .image {
	display: block;
	float: left;
	width: 32px;
	height: 32px;
}

.fancy-select .text,
.fancy-select-big .text {
	display: block;
	float: left;
	line-height: 30px;
	padding: 2px 0px 4px 15px;
	font-size: 16px;
	font-weight: normal;
	text-decoration: none;
	color: #5e2310;
	text-align: left;
}