/*
Stylish Select 0.3 - jQuery plugin to replace a select drop down box with a stylable unordered list
http://scottdarby.com/

Copyright (c) 2009 Scott Darby

Requires: jQuery 1.3

Licensed under the GPL license:
http://www.gnu.org/licenses/gpl.html
*/

/*
<select style="display: none;" id="id_code-geslacht" name="code-geslacht" class="" tabindex="10">
	<option value=""></option>
	<option value="M">Man</option>
	<option value="V">Vrouw</option>
</select>
<div style="position: static;" class="newListSelected" tabindex="0">
	<div class="selectedTxt"></div>
	<ul style="top: 29px; height: 53px; left: 0pt; display: none;" class="newList">
		<li class="hiLite"></li>
		<li class="">Man</li>
		<li class="">Vrouw</li>
	</ul>
</div>
*/

/*==================================
remove default focus style
====================================*/
:focus {
	outline: none;
}

.js ul.newList {
	left: -9999px;
}

/*==================================
red curvy example
====================================*/
div.left ul.newList * {
	margin: 0; 
	padding: 0;
}
div.left ul.newList {
	margin: 0; 
	padding: 0; 
	list-style: none; 
	color: #000; 
	width: 280px; /* 290px */
	background: #fff; 
	position: absolute;  
	border: 1px solid #ccc; 
	top: 26px; /* 22px */
	left: 0; 
	overflow: auto; 
	z-index: 50;
}

div.left .newListSelected {
	position: relative;
	z-index: 49;
	width: 201px; /* 285px */
	color: #000; 
	height: 23px; /* 19px */
	padding: 3px 0 0 6px; 
	float: left;
	border: none;
	background: url(/css/images/mcg/bg_select.jpg) no-repeat;
}

div.left div.newListSelected.error {
	border: 0;
	background: url(/css/images/mcg/bg_select-error.jpg) no-repeat;
}


div.left .newListSelected span {
	width: 200px; /* 284px */
	display: block;
}

div.left ul.newList li {
	background: 0;
	margin: 0;
	min-height: 23px;
	padding: 3px 8px;
}

* div.left ul.newList li {
	height: 23px;
}

div.left .selectedTxt {
	position: relative;
	z-index: 20;
	width: 171px; 
	overflow: hidden; 
	height: 23px; 
	padding: 0 23px 0 0;
}

div.left .hiLite {
	background: #dadada !important; 
	color: #fff !important;
}

div.left .newListHover {
	background: #f0f0f0 !important; 
	color: #767676 !important; 
	cursor: default;
}

div.left .newListSelHover, .newListSelFocus {
	background-position: 0 -26px; 
	cursor: default;
}

div.left .newListOptionTitle {
	font-weight: bold;
}

div.left .newListOptionTitle ul {
	margin: 3px 0 0;
}

div.left .newListOptionTitle li {
	font-weight: normal; 
	border-left: 1px solid #ccc;
}

/*======================================
windows xp style - div that contains the 
<select> has been given an id of #win-xp
(for the purposes of this example
========================================*/
/**#win-xp .newListSelected {background:#FFF url(dropdown.gif) no-repeat scroll 155px 1px; border:1px solid #A5ACB2; color:#000; height:17px; margin-bottom:10px; padding:0; width:173px;}
#win-xp .newListSelected div {display:block; font-size:0.85em; padding:2px 21px 2px 4px; text-align:left !important; width:149px;}
#win-xp ul.newList {list-style:none; color:#000; width:172px; background:#fff; border:1px solid #000; top:22px; left:0; height:auto; overflow:auto; font-size: 0.85em; text-align:left!important; position:absolute; z-index:9999;}
#win-xp ul.newList li {padding:2px 5px!important; border-bottom: 1px solid #cccccc;}
#win-xp .hiLite {background:#316ac5!important; color:#fff!important;}
#win-xp .newListHover {background:#ccc!important; color:#000!important; cursor:default;}
#win-xp .newListSelHover {cursor:default;}
#win-xp .newListSelHover, #win-xp .newListSelFocus {background-position:auto;}
#win-xp .newListSelHover div, #win-xp .newListSelFocus div {font-weight:bold;}*/