.spinner-sprite, .spinner .decrease, .spinner .decrease[disabled], .spinner .increase, .spinner .value, .spinner .value.passive {
    background: url('../images/spinner.png') no-repeat
}
inner {
    height: 100%;
    width: 100%;
    overflow: hidden;
    *zoom:1;
    float: left;
}
.spinner{
    position: relative;
    float: left;
}
.spinner button, .spinner .value {
    text-align: center;
    display: block;
    float: left;
    height: 45px;
    line-height: 45px;
    margin: 0
}
.spinner button {
    border: none;
    width: 33px;
    color: #e5312a;
    font: 22px Arial bold;
    padding: 0;
    outline: none
}
.spinner .decrease {
    background-position: -1px -25px;
    cursor: pointer;
    text-indent: -10000px;
    width: 19px;
    height: 23px;
    position: absolute;
    right: -18px;
    bottom: 0;
    border: 2px solid #000;
}
.spinner .decrease:hover{
    background-position: -2px -71px;
}
.spinner .decrease[disabled] {
    background-position: -1px -25px;
    cursor: default
}
.spinner .increase {
    background-position: -1px 0;
    cursor: pointer;
    text-indent: -10000px;
    width: 19px;
    height: 23px;
    position: absolute;
    right: -18px;
    top: 0;
    border: 2px solid #000;
}
.spinner .increase:hover{
    background-position: -2px -46px;
}
.spinner .value {
    background-position: 0 -56px;
    background-repeat: repeat-x;
    width: 42px;
    height: 45px;
    border: none;
    font: 500 20px/38px "Roboto";
    color: #000;
    padding: 0px;
    border: 2px solid #000;
    background: none;
}
.spinner .value.passive {
    background-position: 0 -224px;
    background-repeat: repeat-x;
    font: 500 24px/38px "Roboto";
    color: #898989;
}
.spinner .error, .spinner .invalid {
    background: #aa0000
}