/* ==================== Sprite Base ==================== */
.input-text-wrapper div, 
.textarea-wrapper div,
.select-wrapper .fake-select .fake-select-left,
.select-wrapper .fake-select .fake-select-right,
.select-wrapper .fake-select .select-active-item,
.checkbox-wrapper .fake-checkbox, 
.radio-wrapper .fake-radio {
    background: transparent url('../images/sprite-forms.png') no-repeat top left; /* TODO: define the path to the form sprite */
}

/* ==================== Text inputs ==================== */
.input-text-wrapper {
    position: relative;
    display: inline-block;
}

.input-text-wrapper input {
    margin: 0 !important;
    padding: 6px;
    height: 21px;
    padding: 0px 6px;
    border: 1px solid #bababa;
}

.input-text-wrapper input[type="text"]:focus, 
.input-text-wrapper input.text:focus, 
.input-text-wrapper input[type="password"]:focus, 
.input-text-wrapper input.password:focus, 
.input-text-wrapper textarea:focus, select:focus {
    border-color: #bababa;
    outline: none;
}

.input-text-wrapper div {
    position: absolute;
    background-color: #F4EEE2; /* TODO: Set the background color of the content block */
    width: 6px; /* TODO: This value should be set to the same value as textfield_corner_width */
    height: 6px; /* TODO: This value should be set to the same value as textfield_corner_width */
}

.input-text-wrapper .textfield-tl { background-position:  0px  0px;} /* #TODO */
.input-text-wrapper .textfield-tr { background-position: -6px  0px;} /* #TODO */
.input-text-wrapper .textfield-br { background-position: -6px -6px;} /* #TODO */
.input-text-wrapper .textfield-bl { background-position:  0px -6px;} /* #TODO */


/* ==================== Textarea ==================== */
.textarea-wrapper {
    position: relative;
}

.textarea-wrapper div {
    position: absolute;
    background-color: #F4EEE2; /* TODO: Set the background color of the content block */
    width: 6px; /* TODO: set the size of the corner */
    height: 6px; /* TODO: set the size of the corner */
    margin-top:2px;
}

.textarea-wrapper .textfield-tl { background-position:  0px  0px;} /* #TODO */
.textarea-wrapper .textfield-tr { background-position: -6px  0px;} /* #TODO */
.textarea-wrapper .textfield-br { background-position: -6px -6px;} /* #TODO */
.textarea-wrapper .textfield-bl { background-position:  0px -6px;} /* #TODO */

/* ==================== Select ==================== */
.select-wrapper {
    position: relative;
    /* width: #TODO: Define width */
}

.select-wrapper select {
    border: 0px;
    position: absolute;
    z-index: 10; /* #TODO: Verify */
}

.select-wrapper .fake-select {
    position: absolute;
    top: 0px;
    left: 0px;
}

.select-wrapper .fake-select div {
    float: left;
    height: 29px;
}

.select-wrapper .fake-select .fake-select-left {
    width: 10px;
    background-position: 0 -55px;
}

.select-wrapper .fake-select .fake-select-right {
    width: 27px;
    background-position: 0 -22px;
}

.select-wrapper .fake-select .select-active-item {
    /* TODO: Set the size for the select element */
    padding: 4px 0px 8px 4px;
    height: 18px;
    
    font-size: 11px;
    background-position: 0px -88px;
    background-repeat: repeat-x;
    overflow: hidden;
    line-height: 23px;
}

/* ==================== Checkboxes and Radio Buttons ==================== */

.checkbox-wrapper .fake-checkbox,
.radio-wrapper .fake-radio {
    position: relative;
    display: -moz-inline-box;
    display: inline-block;
    vertical-align: top;
    padding: 0;
}
    
.checkbox-wrapper .fake-checkbox {
    background-position: -64px 0;
    height: 19px;
    width: 19px;
}

.radio-wrapper .fake-radio {
    background-position: -35px 0;
    white-space: nowrap;
    height: 18px;
    width: 18px;
}