/*
Stylish Select 0.4.1 - $ 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 or newer

Dual licensed under the MIT and GPL licenses.

*/


/*==================================
Hide lists on page load
====================================*/

.stylish-select ul.newList {left:-9999px;}

/*==================================
red curvy example
====================================*/
ul.newList * {margin:0; padding:0;}
ul.newList a {color: #000; text-decoration:none; display:block; font-weight:normal;}
ul.newList {margin:0; padding:0; list-style:none; color:#000; background:#fff; position:absolute;  border:1px solid #ccc; top:24px; left:0; z-index:9999;}

.newListSelected {width:265px; color:#000; height:22px; padding:2px 0 0 11px; float:left; background:url(images/select-bg.gif) no-repeat;outline: none;}
.newListSelected span {width:276px; display:block; outline: none;}
.selectedTxt {width:258px; overflow:hidden; height:16px; padding:0 23px 0 0;}
ul.newList { width:276px; }

.newListSelected.select_steps_smaller {width:125px; height:22px; background:url(images/select-bg3.gif) no-repeat;outline: none;}
.newListSelected.select_steps_smaller span {width:136px;}
.select_steps_smaller .selectedTxt {width:102px; overflow:hidden; height:16px; padding:0 23px 0 0;}
.select_steps_smaller ul.newList { width:136px; }

.newListSelected.select_steps_small {width:175px; height:22px; background:url(images/select-bg2.gif) no-repeat;}
.newListSelected.select_steps_small span {width:186px;}
.select_steps_small .selectedTxt {width:163px; overflow:hidden; height:16px; padding:0 23px 0 0;}
.select_steps_small ul.newList { width:186px; }



ul.newList li a {padding:3px 5px; display: block;outline: none;}
ul.newList li a:focus { outline: none;}

.hiLite {background:#fff!important; color:#000!important;}
.hiLite a {background:#fff!important; color:#000!important;}
.newListHover {background:#ccc!important; color:#000!important; cursor:default;}
.newListSelHover, .newListSelFocus {background-position:0 -24px; cursor:default;}
.newListOptionTitle {font-weight:normal;}
.newListOptionTitle ul {margin:3px 0 0;}
.newListOptionTitle li {font-weight:normal; border-left:1px solid #ccc;}


/* 
* The state classes are a little bit complex, because of the doubble class bug in IE6
* The state class looks like this:
* 
* .ui-radio-state[-checked][-disabled][-hover] or .ui-checkbox-state[-checked][-disabled][-hover]
* 
* Examples:
* 
* .ui-radio-state-checked (simply checked) 
* .ui-radio-state-checked-hover (checked and hovered/focused)
* .ui-radio-state-hover (unchecked and hovered/focused)
* 
*/

.ui-radio-state-disabled,
.ui-radio-state-checked-disabled,
.ui-radio-state-disabled-hover,
.ui-radio-state-checked-disabled-hover {
color: #999;
}
span.ui-checkbox,
span.ui-radio {
display: block;
float: left;
width: 16px;
height: 13px;
margin:0 10px 0 0;
background: url(images/icon_checkbox.gif) 0 -36px no-repeat;
}
span.ui-helper-hidden {
display: none;
}
label {
padding:0px;

}
span.ui-radio-state-hover,
span.ui-checkbox-state-hover {
background-position: 0 -108px;
}

span.ui-checkbox-state-checked {
background-position: 0 -0px;
}

span.ui-checkbox-state-checked-hover {
background-position: 0 -72px;
}
span.ui-radio-state-checked-disabled-hover,
span.ui-radio-state-checked-disabled,
span.ui-radio-state-checked {
background-position: 0 -142px;
}


span.ui-radio-state-checked-hover {
background-position: 0 -202px;
}
.ui-helper-hidden-accessible {
position: absolute;
left: -999em;
}

.dropdown1 {
position: relative;
z-index: 10;
}
.dropdown2 {
position: relative;
z-index: 11;
}
.dropdown3 {
position: relative;
z-index: 12;
}
.dropdown4 {
position: relative;
z-index: 13;
}