/* ==================== Sprite Base ==================== */

.input-text-wrapper div,
.textarea-wrapper div,
.select-wrapper .fake-select .fake-select-left,
.select-wrapper .fake-select .fake-select-right {
    background: transparent url('../../images/sprite-forms.png') no-repeat top left;
}

/* ==================== Text inputs ==================== */
.input-text-wrapper {
    position: relative;
    /*display: -moz-inline-box;*/
    display: inline-block;
    /*zoom: 1;*/
    /*display: inline;*/

}
.input-text-wrapper input {
    margin: 0 !important;
    padding: 6px;
    height: 18px;
    padding: 5px 4px 0 10px;
}

.input-text-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 */
}

.input-text-wrapper .textfield-corner-tl { background-position:  0px  0px;} /* #TODO */
.input-text-wrapper .textfield-corner-tr { background-position: -6px  0px;} /* #TODO */
.input-text-wrapper .textfield-corner-br { background-position: -6px -6px;} /* #TODO */
.input-text-wrapper .textfield-corner-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-corner-tl { background-position:  0px  0px;} /* #TODO */
.textarea-wrapper .textfield-corner-tr { background-position: -6px  0px;} /* #TODO */
.textarea-wrapper .textfield-corner-br { background-position: -6px -6px;} /* #TODO */
.textarea-wrapper .textfield-corner-bl { background-position:  0px -6px;} /* #TODO */

/* ==================== Select ==================== */
.select-wrapper {
    /* width: 180px; */
    position: relative;
}

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

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

/*
.select-wrapper .fake-select .fake-select-left,
.select-wrapper .fake-select .fake-select-right,
.select-wrapper .fake-select .select-active-item {
*/
.select-wrapper .fake-select div {
    float: left;
    height: 28px;
}

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

.select-wrapper .fake-select .fake-select-right {
    width: 24px;
    background-position: 0 -88px;
}

.select-wrapper .fake-select .select-active-item {
    /* TODO: Set the size for the select element */
    padding: 0px 0px 7px 4px;
    height: 16px;
    
    font-size: 11px;
    /* border-top: solid 1px #d7d3c7; */
    /* border-bottom: solid 1px #d7d3c7; */
    background-color: #fff;
    overflow: hidden;
    line-height: 23px;
}