/* ############## SPRITE IMAGE ############## */
.styledInput,
.styledInput > span {
}

/* ############ CHECKBOX & RADIO ############ */
.styledInput.si-checkbox,
.styledInput.si-radio {
	height:24px;
	width:24px;
	vertical-align:-2px;
	margin-right:5px;
	background:#999;
}

/* Checkbox unchecked */
.styledInput.si-checkbox.empty {
}
/* Checkbox checked */
.styledInput.si-checkbox.checked {
	background:#64b742;
}
/* Radio unchecked */
.styledInput.si-radio.empty {
}
/* Radio checked */
.styledInput.si-radio.checked {
	background:#64b742;
}

/* ################# SELECT ################# */

/* Wrapper */
.styledInput.si-select {
	background:#fff;
	border:1px solid #888;
}

/* Hover effect */
.si-select:hover,
.si-select.si-hover {
	background:#f9f9f9;
}

/* Focus effect */
.si-select.si-open,
.si-select.si-focus {
	border:1px solid #fafafa;
	-webkit-box-shadow:0 0 5px #007eff;
	-moz-box-shadow:0 0 5px #007eff;
	box-shadow:0 0 5px #007eff;
	outline: none;
}

/* Label */
.styledInput.si-select > span {
	padding:5px;
	color:#000;
}

/* OPTIONS POPUP CONTAINER (ACTIVATE WITH {styleOptions:true} for all, {styleOptionsTouch:true/false} for touch devices) */
/* main optionscontainer - ONLY for positioning, NO STYLING HERE!*/
.styledInput.si-select .si-options {
	top:100%;
}

/* inner optionscontainer - define here: max-height, transition, background, border, shadow etc */
/* you can use max-height and transition or just display:none/block if no animation needed */ 
.styledInput.si-select .si-options > div {
	max-height:0;
	box-shadow:3px 3px 3px rgba(0,0,0,0.5);
	-moz-transition:max-height .2s ease;
	-webkit-transition:max-height .2s ease;
	transition:max-height .2s ease;
	background:#f9f9f9;
}

/* Options Container when open - define max-height here or display:block */
.styledInput.si-select.si-open .si-options > div,
.styledInput.si-select .si-options > div > div {
	max-height:400px;
}

/* Options */
.styledInput.si-select .si-options a {
	text-decoration:none;
	color:black;
	padding:5px 5px;
	white-space:nowrap;
	color:#000;
}

/* Selected option */
.styledInput.si-select .si-options a.si-selected {
	font-weight:bold;
}

/* Hover option */
.styledInput.si-select .si-options a.si-hover {
	background:#ddd;
}

/* Disabled options */
.styledInput.si-select .si-options a.si-disabled {
	color:grey;
	cursor:default;
}

/* Optgroups */
.styledInput.si-select .si-options .optgroup {
	padding:2px 5px;
	color:#999;
}
/* Optgroups > Options */
.styledInput.si-select .si-options .optgroup a {
	padding-left:15px;
}

/* ################# FILE ################# */

.styledInput.si-file {
	margin-bottom:2px;
	background:#64b742;
}

/* DESCRIPTION */
.styledInput.si-file > span {
	padding-left:5px;
	margin-right:30px;
	height:20px;
	color:#fff;
	padding-top:1px;
}

/* DELETE BUTTON (ACTIVATE WITH {fileDeleteButton:true}) */
.styledInput.si-file > a.si-file-delete {
	background:#d92020;
	display:block;
	padding:2px;
	height:100%;
	position:absolute;
	right:0;
	text-decoration:none;
}

.styledInput.si-file > a.si-file-delete:before {
	content:'X';
	color:#fff;
	font-weight:bold;
}

/* ############# DONT CHANGE THIS (EXCEPT YOU KNOW WHAT YOURE DOING) ############# */

.styledInput {
	display:inline-block;
	zoom: 1;
	*display: inline;
	position:relative;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.styledInput.si-file {
	overflow:hidden;
}
.styledInput.si-select > span,
.styledInput.si-file > span {
	display:block;
	overflow:hidden;
	white-space:nowrap;
}
.styledInput.si-select .si-options {
	position:absolute;
	min-width:100%;
	-webkit-overflow-scrolling:touch;
	z-index:9999;
}
.styledInput.si-select .si-options > div {
	overflow:hidden;
}
.styledInput.si-select .si-options > div > div {
	overflow-y:auto;
	overflow-x:hidden;
}
.styledInput.si-select .si-options.oversize {
}
.styledInput.si-select .si-options a {
	display:block;
	outline:none;
}
.styledInput input,
.styledInput select {
	position:absolute;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	opacity:0;
	filter:alpha(opacity=0);
}
.styledInput.si-styleOptions select {
	z-index:-1;
}
.styledInput select,
.styledInput input[type="file"] {
	width:100%;
}
.styledInput,
.styledInput > span {
	background-repeat:no-repeat;
}
.styledInput > span {
	cursor:default;
}