/* FONTS */
@font-face {
    font-family: 'VAGRoundRegular';
    src: url('/static/fonts/vag_round-webfont.eot');
    src: url('/static/fonts/vag_round-webfont.eot?#iefix') format('embedded-opentype'),
         url('/static/fonts/vag_round-webfont.woff') format('woff'),
         url('/static/fonts/vag_round-webfont.ttf') format('truetype'),
         url('/static/fonts/vag_round-webfont.svg#VAGRoundRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* COLORS */
@dark: #000000;
@light: #ffffff;
@lightgrey: #a2a2a2;
@darkgrey: #333333;

@turquoise: #00e3fb;
@lightblue: #008ac9;
@midblue: #006ab3;
@darkblue: #003079;

/* ********************************************************************************************************************* FILTER */
.gridThird.productFilter {
    background: url('/static/img/css/container/third/filterBg.png') left 14px no-repeat;
    color: @light;
    margin: 13px 10px 20px 0px;
    width: 230px;
    h3 {
        color: @lightblue;
        font-family: VAGRoundRegular;
        font-size: 26px;
        font-weight: normal;
        margin: -14px 0 0 5px;
        text-transform: uppercase;
    }
    .filter {
        background: url('/static/img/css/sprite.png') right -380px no-repeat;
        cursor: pointer;
        height: 40px;
        padding: 0px 4px 10px 4px;
        width: 218px;
        &.opened {
            background: url('/static/img/css/sprite.png') right -226px no-repeat;
            height: auto;
        }
        h4, h5 {
            font-size: 16px;
            margin-left: 20px;
        }
        h5 {
            color: @turquoise;
            font-weight: normal;
            margin-bottom: 0px;
        }
        h4 {
            font-weight: bold;
            margin-top: -5px;
            text-transform: uppercase;
        }
        &.opened h4 {
            margin-bottom: 10px;
        }
        ul {
            background: #006ab3 url('/static/img/css/container/third/filterUl.gif') left top no-repeat;
            border-bottom: 1px solid #00c7ed;
            display: none;
            padding: 14px 20px 3px 19px;
            width: 182px; /* padding - 255px */
        }
        &.opened ul {
            display: block;
        }
        li {
            background: none;
            margin-bottom: 9px;
            padding: 0;
        }
        li a.multiselect {
            background: url('/static/img/css/sprite.png') -350px -150px no-repeat;
            color: @light;
            display: block;
            height: 21px;
            padding: 0 20px 0 30px;
            text-decoration: none;
            width: 135px; /* padding: 185px */
            &.active {
                background-position: -350px -200px;
            }
        }
        li a.select {
            background: url('/static/img/css/sprite.png') -350px -350px no-repeat;
            color: @light;
            display: block;
            height: 21px;
            padding: 0 20px 0 30px;
            text-decoration: none;
            width: 135px; /* padding: 185px */
            &.active {
                background-position: -350px -400px;
            }
        }
        li.sliderRangeContainer {
            .sliderRange {
                background: @lightblue;
                margin-bottom: 10px;
            }
            .sliderMin,
            .sliderMax {
                display: none;
            }
            .sliderRangeAmountMin,
            .sliderRangeAmountMax {
                background: none;
                border: 0 none;
                color: @light;
                width: 50px;

                position: absolute;
            }
        }
    }
}