/* ############## 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;
    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;
}