/* 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;

.container {
    float: left;
    margin-bottom: 30px;
}

.gridFull {
    width: 980px;
}
.gridHalf {
    width: 482px;
}
.gridThird {
    margin-right: 30px;
    width: 306px;
}

/* ********************************************************************************************************************* FULL */
.gridFull {
    .fringe.grey {
        background: url('/static/img/css/container/full/fringeGrey.png') left top no-repeat;
    }
    .fringeBottom.grey {
        background: url('/static/img/css/container/full/fringeGreyBottom.png') left bottom no-repeat;
    }
    .fringe.blue {
        background: url('/static/img/css/container/full/fringeBlue.png') left top no-repeat;
    }
    .fringeBottom.blue {
        background: url('/static/img/css/container/full/fringeBlueBottom.png') left bottom no-repeat;
    }

    .teaser.blue {
        background: @midblue url('/static/img/css/container/full/logoSmall.png') right bottom no-repeat;
        bottom: 30px;
        padding: 31px;
        position: absolute;
        right: 30px;
        width: 264px; /* padding - 306px */
    }
    .teaser.blue {
        color: @light;
        font-size: 14px;
    }
    .teaser.blue h3 {
        color: @light;
        font-family: 'VAGRoundRegular', sans-serif;
        font-size: 40px;
    }
    .teaser.blue .more {
        color: @turquoise;
        font-size: 22px;
        font-weight: bold;
        text-decoration: none;
    }

    &.productMenu {
        background: url('/static/img/css/container/full/productMenu.png') left top no-repeat;
        overflow: hidden;
        a {
            color: @light;
            padding: 2px 4px;
            text-decoration: none;
        }
        a:hover {
            background-color: @midblue;
            color: @turquoise
        }
        li {
            background: none;
            margin: 0;
            padding: 0;
        }
        .headlines {
            float: left;
            height: 100%;
            position: absolute;
            width: 332px;
        }
        h2 {
            color: @light;
            font-family: VAGRoundRegular;
            font-size: 21px;
            font-weight: normal;
            margin: 27px 29px 7px;
            text-transform: uppercase;
        }
        h2.category {
            font-size: 62px;
            margin: 7px 29px;
        }
        .products {
            overflow: hidden;
            margin-left: 332px;
            padding-top: 20px;
            ul {
                float: left;
                margin: 0 20px 10px 0;
                width: 138px;
            }
            ul.last {
                margin-right: 0px;
            }
            li {
                line-height: 25px;
            }
            li.headline {
                border-bottom: 1px solid @midblue;
                line-height: 21px;
                margin-bottom: 5px;
                padding-bottom: 11px;
            }
            li.headline a {
                color: @light;
                font-family: VAGRoundRegular;
                font-size: 21px;
                font-weight: normal;
                text-transform: uppercase;
            }
        }
    }
}

/* ********************************************************************************************************************* HALF */
.gridHalf {
    margin-right: 5px;
    margin-left: 5px;
}
.gridHalf.left {
    float: left;
    /* margin-right: 10px; */
}
.gridHalf.right {
    float: right;
}
.gridHalf .fringe {
    background: url('/static/img/css/container/half/fringeTop.png') left top no-repeat;
}
.gridHalf .fringeBottom {
    background: url('/static/img/css/container/half/fringeBottom.png') left bottom no-repeat;
}

.gridHalf .grey.fringe {
    background: url('/static/img/css/container/half/fringeLeftGreyTop.png') left top no-repeat;
}
.gridHalf .grey.fringeBottom {
    background: url('/static/img/css/container/half/fringeLeftGreyBottom.png') left bottom no-repeat;
}
/*
.gridHalf.right .grey.fringe {
    background: url('/static/img/css/container/half/fringeRightGreyTop.png') left top no-repeat;
}
.gridHalf.right .grey.fringeBottom {
    background: url('/static/img/css/container/half/fringeRightGreyBottom.png') left bottom no-repeat;
}
*/

.gridHalf .grey.solid {
    background: url('/static/img/css/container/half/solidGreyTop.png') left top no-repeat;
}
.gridHalf .grey.solidBottom {
    background: url('/static/img/css/container/half/solidGreyBottom.png') left bottom no-repeat;
}

.gridHalf .grey.twisted {
    background: url('/static/img/css/container/half/twistedGreyTop.png') left top no-repeat;
}
.gridHalf .grey.twistedBottom {
    background: url('/static/img/css/container/half/twistedGreyBottom.png') left bottom no-repeat;
}

.gridHalf .grey.skyscraper {
    background: url('/static/img/css/container/half/skyscraperGreyTop.png') left top no-repeat;
}
.gridHalf .grey.skyscraperBottom {
    background: url('/static/img/css/container/half/skyscraperGreyBottom.png') left bottom no-repeat;
}

.gridHalf {
    .slider{
        overflow: hidden;
        position: relative;
        width: 474px;
    }
    .sEl {
        float: left;
    }
    .arrowLeft,
    .arrowRight {
        background: url('/static/img/css/sprite.png');
        background-repeat: no-repeat;
        bottom: 17px;
        display: block;
        height: 21px;
        position: absolute;
        text-indent: -1999px;
        width: 17px;
    }
    .arrowLeft {
        background-position: -150px -150px;
        left: 16px;
    }
    .arrowRight {
        background-position: -200px -150px;
        right: 16px;
    }
    .arrowLeft:hover {
        background-position: -150px -200px;
    }
    .arrowRight:hover {
        background-position: -200px -200px;
    }
}

.gridHalf.lookbook {
    height: 260px;
    overflow: hidden;
    position: relative;
    width: 474px;
    img {
        display: block;
        float: left;
    }
    .lookbookLink {
        background: url('/static/img/css/sprite.png') left -150px no-repeat;
        display: block;
        height: 105px;
        position: absolute;
        right: 15px;
        top: 10px;
        width: 105px;
        text-indent: -1999px;
    }
    .filmstrip {
        overflow: hidden;
    }
    .lookbookNav {
        background: url('/static/img/css/container/lookbook/titleBg.png') left bottom repeat-x;
        bottom: 0px;
        height: 51px;
        left: 0px;
        position: absolute;
        width: 100%;
        .lookbookTitle {
            color: @light;
            display: block;
            font-size: 18px;
            left: 50px;
            margin-top: 14px;
            position: absolute;
            text-align: center;
            width: 374px;
        }
    }
}

/* ********************************************************************************************************************* THIRD */
.gridThird.right {
    margin-right: 0px;
}

.gridThird.simple {
    color: @darkgrey;
    padding: 10px;
    padding-right: 15px;
    width: 281px; /* padding - 306px */
    h3 {
        color: @lightblue;
        font-size: 18px;
        text-transform: uppercase;
    }
    p {
        margin-top: 0px;
    }
    .more {
        color: @lightblue;
        text-decoration: none;
    }
    &.light {
        background-color: @light;
    }
    &.gridThird.medium {
        background-color: #dedede;
    }
    &.gridThird.dark {
        background-color: #bbbbbb;
    }
}

.gridThird.categoryMenu {
    background: url('/static/img/css/container/third/categoryMenu.png') left top no-repeat;
    li {
        background: none;
        float: left;
        margin: 0 30px 30px 0;
        padding: 0;
        &.even {
            margin: 0 0 30px 0;
        }
    }
    a {
        display: block;
        color: @light;
        font-family: VAGRoundRegular;
        font-size: 17px;
        height: 35px; /* padding - 115px */
        padding: 80px 0 0 20px;
        text-decoration: none;
        text-transform: uppercase;
        width: 118px; /* padding - 138px */
    }
}

.gridThird.categoryLink {
    background: url('/static/img/css/container/third/categoryLink01.png') left top no-repeat;
    cursor: pointer;
    height: 266px;
    margin-right: 20px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 312px;
    img {
        margin-bottom: 10px;
    }
    a {
        bottom: 10px;
        color: @lightblue;
        display: block;
        font-family: VAGRoundRegular;
        font-size: 21px;
        left: 20px;
        position: absolute;
        text-decoration: none;
        text-transform: uppercase;
    }
    a.imgContainer {
        top: 20px;
    }
    &.right {
        margin-right: 0px;
    }
    &.type01 {
        background: url('/static/img/css/container/third/categoryLink01.png') left top no-repeat;
    }
    &.type02 {
        background: url('/static/img/css/container/third/categoryLink02.png') left top no-repeat;
    }
}

.gridThird.twoThirds {
    position: relative;
    width: 734px;
    &.right {
        float: right;
    }
    .twisted {
        background: url('/static/img/css/container/third/twoTwisted.png') left top no-repeat;
        overflow: hidden;
        .imgContainer {
            float: left;
            padding: 24px 0 20px 0;
            text-align: center;
            width: 345px;
        }
        .desc {
            float: left;
            padding-top: 120px;
            width: 205px;
            h3 {
                color: @lightblue;
                font-family: VAGRoundRegular;
                font-size: 28px;
                text-transform: uppercase;
            }
            .userrating {
                float: left;
            }
            .gender {
                background-image: url('/static/img/css/sprite.png');
                background-repeat: no-repeat;
                height: 40px;
                margin: -3px 0px 0px 129px;
                width: 40px;

                position: absolute;
            }
            .gender.male,
            .gender.boys {
                background-position: -700px top;
            }
            .gender.female,
            .gender.girls {
                background-position: -750px top;
            }
            .gender.blue {
                background-image: url('/static/img/css/sprite.png');
                background-position: -250px -150px;
                background-repeat: no-repeat;
                display: block;
                float: left;
                height: 25px;
                margin: -2px 5px 45px 125px;
                text-indent: -19999px;
                width: 20px;
            }
            .gender.blue.female,
            .gender.blue.girls {
                background-position: -250px -200px;
            }
            .rememberList {
                bottom: 34px;
                position: absolute;
                right: 34px;
            }
        }
    }
    .twistedBottom {
        background: url('/static/img/css/container/third/twoTwistedBottom.png') left bottom no-repeat;
        height: 14px;
    }
}

.rememberButton.grey {
    background-position: -278px -250px;
    color: @dark;
}
.rememberButton.grey.active {
    background-position: -278px -300px;
}

.relatedProducts {
    h3 {
        bottom: 30px;
        color: @lightgrey;
        font-family: 'VAGRoundRegular', sans-serif;
        font-size: 28px;
        position: absolute;
        text-align: center;
        text-transform: uppercase;
        width: 100%;
    }
    .solidBottom {

    }
}

.heroProduct .ui-stars-star-on a {
    background-position: 0 -32px;
}

.contentblock.gridHalf .blocktop {
    padding: 10px;
}

.gridThird.textWithImage {
    float: left;
    height: 265px;
    position: relative;
    .fringe {
        display: block;
        left: 0px;
        position: absolute;
        top: 0px;
    }
    .textDark {
        background: url('/static/img/css/container/third/textDarkBg.png') left bottom no-repeat;
        bottom: 0px;
        left: 0px;
        height: 41px; /* padding - 71px */
        padding: 20px 20px 10px 20px;
        position: absolute;
        width: 267px; /* padding - 307px */
        h3 a {
            color: #00aadf;
            font-family: VAGRoundRegular;
            font-size: 21px;
            text-decoration: none;
            text-transform: uppercase;

            text-shadow: 0px 2px 0px @darkblue;
            /* filter: dropshadow(color=#003079, offx=0, offy=2); */
        }
        p {
            color: @light;
            margin-top: 0px;
        }
    }
}
.gridThird.text {
    margin-top: 30px;
}
.gridThird.text.simple {
    height: 105px;
}