@charset "utf-8";
/* 
    Document   : layout
    Created on : 30.11.2012, 09:07:13
    Author     : Jansen
    Description:
        Layout of Erdal page
*/

.clearfix {
    clear: both;
}

body {
    width: 100%;
    text-align: center;
}

#page-wrapper {
    position: relative;
    margin: 0 auto;
    padding: 0 124px;
    width: 1010px;
    text-align: center;
}

#background-image {
    position: absolute;
    padding: 0;
    top: 0;
    left: 0;
    width: 1258px;
    height: 950px;
    -webkit-box-shadow: 0px 0px 35px 0px #000;
    box-shadow: 0px 0px 55px 0px #000;
    overflow: hidden;
}

#page {
    position: relative;
    margin: 0 auto;
    padding: 0 55px;
    width: 900px;
    height: 896px;
    text-align: left;
}


/* header */
#header-wrapper {
    position: relative;
    height: 195px;
    overflow: visible;
    z-index: 3000;
}
#logo-wrapper {
    float: left;
}


#main-menu-wrapper,
#main-menu-wrapper ul {
    float: right;
}

#main-menu-wrapper ul.menu {
    position: relative;
    margin-top: 28px;
    right: -18px;
    list-style: none;
}

#main-menu-wrapper ul.menu li {
    float: left;
}

/* content */
#content-wrapper {
    position: relative;
    padding-top: 68px;
    width: 900px;
}

#content {
    position: relative;
    height: 685px;
}

/* teaser boxes */
.row.teaser div {
    position: relative;
    float: left;
    width: 276px;
    height: 91px;
    margin-right: 36px;
    margin-bottom: 53px;
}
.row.teaser div.nthChild {
    margin-right: 0;
}
.row.teaser div:first-child + div + div {
    margin-right: 0;
}
.row.teaser div:first-child + div + div + div + div + div {
    margin-right: 0;
}
.row.teaser div:nth-child(3n+3) {
    float: right;
    margin-right: 0;
}
.row.teaser {
    position: absolute;
    bottom: 127px;
}

/* product teaser boxes */
body.page-product-overview .row.teaser div {
    height: 115px;
}
body.page-product-overview .row.teaser {
    bottom: 72px;
}

/* footer */
#footer-wrapper {
    margin: 0px auto 0;
    padding-top: 54px;
    padding-bottom: 30px;
    width: 100%;
    min-width: 1024px;
    position: relative;
    z-index: 4;
}
#footer {
    position: relative;
    padding-top: 35px;
    width: 100%;
    text-align: center;
}
#footer-menu-wrapper {
    display: inline-block;
    margin: 0 auto;
    text-align: left;
}

.scale-btn {
    display: block;
    position: absolute;
    width: 14px;
    height: 14px;
}
#btn-none {
    top: 90px;
    left: 40px;
}
#btn-express {
    top: 35px;
    left: 65px;
}
#btn-standard {
    top: 35px;
    left: 130px;
}
#btn-intensive {
    top: 90px;
    left: 155px;
}

#view-port {
    position: absolute;
    top: 0;
    left: 390px;
    width: 530px;
    height: 680px;
    text-align: center;
}

#view-port > a {
    display: block;
}

#view-port > a img {
    position: relative;
    /*left: -50%;*/
}

.level-0 {
    position: absolute;
    bottom: 89px;
    z-index: 500;
}
.level-1 {
    position: absolute;
    bottom: 150px;
    z-index: 400;
}
.level-2 {
    position: absolute;
    bottom: 220px;
    z-index: 300;
}
.level-3 {
    position: absolute;
    bottom: 310px;
    z-index: 200;
}
.level-4 {
    position: absolute;
    bottom: 360px;
    z-index: 100;
}

#product-1 { left: 10px; }
#product-2 { left: 80px; }
#product-3 { left: 190px; }
#product-4 { left: 300px; }
#product-5 { left: 400px; }
#product-6 { left: 455px; }

.count-1 #product-1 { left: 97px; top: 0; bottom: auto; }

.count-2 #product-1 { left: 80px; }
.count-2 #product-2 { left: 240px; }

.count-3 #product-1 { left: 100px; }
.count-3 #product-2 { left: 220px; }
.count-3 #product-3 { left: 340px; }


.cta-bubble {
    position: absolute;
    top: -77px;
    height: 68px;
    display: none;
}

.cta-bubble p {
    height: 55px;
}

.scrollarea { width: 350px; clear: both; margin: 20px 0 10px; position: relative; left: 209px; top:-76px }
.scrollarea .viewport { width: 320px; height: 207px; overflow: hidden; position: relative; }
.scrollarea .overview { list-style: none; position: absolute; left: 0; top: 0; }
.scrollarea .scrollbar { position: relative; float: right; width: 25px; }
.scrollarea .track { background-color: #D8EEFD; height: 100%; width:13px; position: relative; padding: 0 0px; }
.scrollarea .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
.scrollarea .thumb .end { overflow: hidden; height: 5px; width: 13px; }
.scrollarea .disable{ display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }

.viewport .overview { background-image: url('../images/no.gif'); }

#scrollarea1 {
    clear: both;
    margin-top: 22px;
    width: 379px;
    height: 156px;
    overflow: hidden;
}

#scrollarea1 .viewport {
    position: relative;
    width: 353px;
    height: 156px;
    overflow: hidden;
}

body.page-template-localcontent-php #scrollarea1 .viewport {
    height: 116px;
}

body.page-template-localcontent-php .black-button {
    position: relative;
    top: 29px;
}

#scrollarea1 .overview {
    position: absolute;
    left: 0;
    top: 0;
    list-style: none;
}

#scrollarea1 .scrollbar {
    position: relative;
    float: right;
    width: 25px; /*9px;*/
    left: -4px;
}

.scrollarea .track,
#scrollarea1 .track {
    position: absolute;
    top: 0;
    height: 100%;
    width: 25px; /*9px;*/
    cursor: pointer;
    overflow: hidden;
}

.scrollarea .thumb,
#scrollarea1 .thumb {
    position: absolute;
    top: 0;
    height: 20px;
    width: 25px; /*9px;*/
    cursor: pointer;
    overflow: hidden;
}

#pictogram-wrapper {
    margin-top: 64px;
}
#pictogram-wrapper img.pictogram {
    position: relative;
    left: -12px;
}

/* Care Tips */
#care-tips-layer {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 1258px;
    height: 954px;
    z-index: 3001;
}
#care-tips-layer #care-tips-bg {
    position: absolute;
    width: 1258px;
    height: 954px;
}
#care-tips-layer #care-tips-box {
    position: absolute;
    top: 247px;
    left: 327px;
    width: 627px;
    height: 464px;
}
#care-tips-layer #care-tips-box .care-tip {
    margin: 0 34px;
    height: 290px;
    overflow: hidden;
}
#care-tips-layer #care-tips-box .care-tips-nav {
    margin: 0 34px;
    width: 559px;
    height: 90px;
}
#care-tips-layer .btn-close {
    position: absolute;
    top: -7px;
    right: -14px;
    width: 30px;
    height: 31px;
}

/* Care Dictionary */
#care-dictionary-layer {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 1258px;
    height: 954px;
    z-index: 3001;
}
#care-dictionary-layer #care-dictionary-bg {
    position: absolute;
    width: 1258px;
    height: 954px;
}
#care-dictionary-layer #care-dictionary-box {
    position: absolute;
    top: 247px;
    left: 327px;
    width: 627px;
    height: 464px;
}
#care-dictionary-layer .btn-close {
    position: absolute;
    top: -7px;
    right: -14px;
    width: 30px;
    height: 31px;
}

/* Shoe Care Basics */
#shoe-care-basics-layer {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 1258px;
    height: 954px;
    z-index: 3001;
}
#shoe-care-basics-layer #shoe-care-basics-bg {
    position: absolute;
    width: 1258px;
    height: 954px;
}
#shoe-care-basics-layer #shoe-care-basics-box {
    position: absolute;
    top: 237px;
    left: 327px;
    width: 627px;
    height: 484px;
}
#shoe-care-basics-layer .btn-close {
    position: absolute;
    top: -7px;
    right: -14px;
    width: 30px;
    height: 31px;
}

/* paragraphs */
p {
    width: 370px;
}
.overview > p {
    width: auto;
}

@media screen and (max-width: 1257px) {
    
    #page-wrapper {
        padding: 0 32px;
        width: 960px;

    }
    
    #background-image {
        width: 1024px;
        height: 678px;
        overflow: hidden;
    }
    
    body.page-product-overview #background-image {
        overflow: visible;
    }
    body.page-product-overview #background-image img {
        top: 0px;
    }
    
    body.single-productline #background-image {
        overflow: visible;
    }
    
    body.page-id-12 #background-image img {
        top: 0px;
    }
    
    body.single-productline #background-image img {
        top: 0px;
    }
    body.single-product #background-image img {
        top: 0px;
    }
    
    body.page-id-19 #background-image {
        overflow: visible;
    }
    body.page-id-266 #background-image {
        overflow: visible;
    }
    
    body.page-id-19 #background-image img {
        top: 0px;
    }
    body.page-id-266 #background-image img {
        top: 0px;
    }
    
    body.frog #background-image {
        overflow: visible;
    }
    
    #background-image img {
        width: 1024px;
        position: relative;
        top: -80px;
    }
    
    .page-template-localcontent-php #background-image img {
        top: 0;
    }
    
    #page {
        padding: 0 30px;
        width: 900px;
        height: 616px; /* 630px */
    }
    
    #content {
        height: 412px;
    }
    
    .row.product-finder {
        top: -40px;
    }
    
    .row.teaser {
        bottom: 8px;
    }
    
    body.single-productline #footer-wrapper {
        padding-top: 20px;
    }
    
    body.page-id-19 #footer-wrapper {
        /*padding-top: 170px;*/
        position: absolute;
        top: 806px;
    }
    body.page-id-266 #footer-wrapper {
        /*padding-top: 170px;*/
        position: absolute;
        top: 806px;
    }
    
    #footer-wrapper {
        padding-top: 0px;
        top: 0px;
        z-index: 600;
    }
    
    #footer {
        padding-top: 25px;
    }
    
    body.page-id-19 #footer {
        /*padding-top: 170px;*/
        padding-top: 0;
    }
    body.page-id-266 #footer {
        /*padding-top: 170px;*/
        padding-top: 0;
    }
    
    #view-port {
        top: -45px;
        height: 630px;
    }
    
    #care-tips-layer {
        height: 678px;
        left: 0px;
        width: 1024px;
    }
    
    #care-tips-layer #care-tips-bg {
        width: 1024px;
    }
    
    #care-tips-layer #care-tips-box {
        left: 198px;
        top: 136px;
    }
    
    #care-dictionary-layer {
        left: 0px;
        width: 1024px;
        height: 678px;
    }
    
    #care-dictionary-layer #care-dictionary-bg {
        width: 1024px;
    }
    
    #care-dictionary-layer #care-dictionary-box {
        top: 136px;
        left: 198px;
    }
    
    #shoe-care-basics-layer {
        left: 0px;
        width: 1024px;
        height: 678px;
    }
    
    #shoe-care-basics-layer #shoe-care-basics-bg {
        width: 1024px;
    }
    
    #shoe-care-basics-layer #shoe-care-basics-box {
        position: absolute;
        top: 126px;
        left: 198px;
    }
    
    body.frog #footer-wrapper {
        top: 207px;
    }
    
    body.page-product-overview .row.teaser {
        bottom: -90px;
    }
    
    body.page-product-overview #footer-wrapper {
        top: 100px;
    }
    
}

#footer-menu-wrapper ul.menu > li {
    position: relative;
}

/* language selector */

#menu-language {
    position: relative;
}

#lang-select {
    display: none;
    position: absolute;
    left: -34px;
    bottom: -45px;
}

#lang-select .top {
    display: block;
    height: 39px;
    width: 192px;
}

#lang-select .bottom {
    display: block;
    height: 39px;
    width: 192px;
}

/* end language selector */

/* country selector */

#menu-lander-menu {
    position: relative;
}

#country-select {
    display: none;
    position: absolute;
    left: -34px;
    bottom: -45px;
}

#country-select .top {
    display: block;
    height: 39px;
    width: 192px;
}

#country-select .bottom {
    display: block;
    height: 39px;
    width: 192px;
}

/* end country selector */

/* privacy window */

.layer-content-rows {
    clear: both;
    /*height: 400px;*/
    width: 546px;
    overflow: hidden;
}

#privacy-layer-content {
    clear: both;
    width: 571px;
    height: 400px;
    overflow: hidden;
}

#privacy-layer-content .viewport {
    position: relative;
    width: 546px;
    height: 400px;
    overflow: hidden;
}

#privacy-layer-content .overview {
    position: absolute;
    left: 0;
    top: 0;
    list-style: none;
}

#privacy-layer-content .scrollbar {
    position: relative;
    float: right;
    width: 25px; /*9px;*/
    left: 5px;
}

.scrollarea .track,
#privacy-layer-content .track {
    position: absolute;
    top: 0;
    height: 100%;
    width: 25px; /*9px;*/
    cursor: pointer;
    overflow: hidden;
}

.scrollarea .thumb,
#privacy-layer-content .thumb {
    position: absolute;
    top: 0;
    height: 20px;
    width: 25px; /*9px;*/
    cursor: pointer;
    overflow: hidden;
}