/* ---------------------------------------------------------------------------

	Custom Select v1.0
	by Edward Smith
	3/9/10

   -------------------------------------------------------------------------*/

select {
	display: none;
}

/* This is the primary container of all the re-rendered select elements */
.customSelect {
	cursor: pointer;
	font-size: 11px;
	text-align: left;	
	outline: none;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;	
	font-family: Arial, Helvetica, sans-serif;
	/*---Include font family and font size in div and ul to avoid pixelation and non comformity of rendered font ---*/
	height: 24px !important;
}

.customSelect iframe {
    position: absolute;
    z-index: -1;
    filter: mask();
    border: 0;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    overflow: hidden;	
}

/* ensure all divs within the custom select container are showing the same font */
.customSelect div {
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
}

/* The container for the selected item text. The 2 different height specifications are for differences in how IE and Firefox renders borders.  
   Firefox adds border px as extra pixels while IE uses the existing height/width pixels to add in the border. 
   Please note that this is primarily an issue because there is no doctype specified.  Once a doctype is specified, IE will conform to the standard of adding border px as extra pixels as well. 
   IE is the only browser that will recognize the # sign. */
.customSelectTextContainer {
	float: left;
	background-color: #FFFFFF;	
	border-top: 1px solid #BDBDBD;
	border-left: 1px solid #BDBDBD;
	border-bottom: 1px solid #e4e4e4;
	height: 22px;
	#height: 24px !important;
}

/* This is the actual area where the text exists and is written to.  The margins have been adjusted to give the impression that the text is vertically middle aligned */
.customSelectTextSpan {
	line-height: normal;
	margin: 4px 0px 0px 3px;
}

/* The following pertains to the drop down options box.  It has been rewritten as an UL with absolute positioning and should open up just below the select box */
.customSelect ul {
	position: absolute;
	display: none;
	list-style:none;
	border:1px solid #BDBDBD;
	margin: 1px 0px 0px 0px;
	padding: 0px;
	cursor: default;
	background-color: #FFFFFF;
	overflow: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}

.customSelect li {
	padding-left: 3px;
	line-height: 14px;
}

.customSelect li.selected {
	background-color: #CCC;
}

.customSelect bold {
	font-weight: bold;
}