﻿.inputXS
{
    width: 47px;
}
.inputS
{
    width: 103px;
}
.inputM {
    width: 113px;
}
.inputL
{
    width: 215px;
}
.inputFullWidth
{
    width: 100%;   
}
.inputHalfWidth
{
    width: 186px;   
}
.inputXS, .inputS, .inputM, .inputL, .inputFullWidth
{
    box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}


input.inputXS, input.inputS, input.inputM, input.inputL, input.inputFullWidth
{
    padding-left: 5px;
    height: 21px;
}
select.inputXS, select.inputS, select.inputM, select.inputL, select.inputFullWidth
{
    padding-left: 2px;
    height: 21px;
}

select.inputXS option, select.inputS option, select.inputM option, select.inputL option, select.inputFullWidth option
{
    text-indent: 4px;
}

.inputPrefilled
{
    background-color: #FDF6E9;
}

/* Browser hack to target webkit browsers (e.g. Safari and Chrome) */
@media screen and (-webkit-min-device-pixel-ratio:0) 
{    
    select.inputXS, select.inputS, select.inputM, select.inputL, select.inputFullWidth
    {
        padding-left: 0;
        text-indent: 3px;
    }
    
    .inputPrefilled
    {
        /* Safari removes the arrow icon on dropdowns when 
           using a background color other than #FFF */        
        background-color: #FFF;
    }
}

/* IE7 */
.ie7 input[type=text].inputXS
{
    width: 37px;
}
.ie7 input[type=text].inputS
{
    width: 93px;
}
.ie7 input[type=text].inputL
{
    width: 204px;
}
.ie7 input.inputFullWidth
{
    /* IE7 doesn´t support border-box box model.
    In CSS you can cannot substract pixel values from percentages. The only possible solution is a CSS expression (= JavaScript).
    Native JavaScript to determine to parent´s height is not possible. Therefore jQuery is required. 
    One time evaluated expression: http://developer.yahoo.com/performance/rules.html#css_expressions */    
    width: expression((function(element) { if (window.jQuery && jQuery(element).is(":visible")) element.style.width = (jQuery(element).parent().width() - 10) + "px";})(this));
}
.ie7 .inputXS, .ie7 .inputS, .ie7 .inputL, .ie7 .inputFullWidth 
{
    height: auto;    
}