/*
** Master style sheet for NIVEA - Phoenix
** @media screen, print
*/
/*
** Expertise modal style sheet for NIVEA - Phoenix
** @media screen
*/

.default-modal {
    width: 1022px;
    height: 577px;
    top: 50px;
}

    .default-modal img,
    .default-modal object {
        display: block;
    }

    .default-modal h1,
    .default-modal h2,
    .default-modal h3,
    .default-modal h4,
    .default-modal h5,
    .default-modal h6 {
        margin: 1em 0;
        color: #273C69;
        font-size: 1em;
    }

    .default-modal h2,
    .default-modal h5,
    .default-modal h6 {
        font-size: 1em;
        color: #6999CA;
    }

        .default-modal h4:first-child,
        .default-modal h5:first-child,
        .default-modal h6:first-child {
            margin-top: 0;
        }

    .default-modal .simplemodal-wrap {
        height: 100%;
    }

    .default-modal .simplemodal-data {
        height: 100%;
        width: 100%;
    }

    .default-modal .simplemodal-close {
        width: 15px;
        height: 15px;
        position: absolute;
        z-index: 10;
        right: 35px;
        top: 35px;
        cursor: pointer;
        background: url(../img/presentation/modal-close.png) no-repeat center;
    }

    .default-modal .wrapper {
        height: 100%;
        padding: 19px;
        position: relative;
    }

        .default-modal .wrapper .body {
            height: 100%;
            background: #102F81 no-repeat center;
            position: relative;
            z-index: 1;
        }

    .default-modal.loading .wrapper .body {
        background-image: url(../img/presentation/throbber.gif);
    }

    .default-modal .content {
        height: 469px;
    }

    .default-modal .body > h2 {
        margin: 0 0 -35px;
        padding: 30px 35px;
        height: 48px;
        line-height: 1;
        color: #fff;
        font-size: 2em;
        font-weight: normal;
        background: url(../img/presentation/expertise-bg.png) repeat-x;
    }

    .default-modal .media-wrapper {
        float: left;
        height: 100%;
        color: #000;
        background: url(../img/presentation/expertise-bg-media.png) repeat-x;
    }

    .default-modal .text-wrapper {
        color: #000;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background: #fff url(../img/presentation/expertise-bg-text.png) repeat-x;
    }

    .default-modal .text {
        padding: 30px;
        min-width: 266px;
    }

        .default-modal .text a {
            color: #273C69;
            text-decoration: underline;
        }

            .default-modal .text a:hover,
            .default-modal .text a:focus,
            .default-modal .text a:active {
                text-decoration: none;
            }

        .default-modal .text p,
        .default-modal .text ul,
        .default-modal .text ol {
            margin: 1em 0;
        }

        .default-modal .text ul,
        .default-modal .text ol {
            margin-left: 1.5em;
        }

            .default-modal .text ul li {
                list-style: disc;
            }

            .default-modal .text ol li {
                list-style: decimal;
            }

    .default-modal .header {
        position: absolute;
    }

    /* gallery */

    .default-modal .media-gallery .pagination {
        height: 39px;
        line-height: 39px;
    }

    .default-modal .media-gallery .gallery {
        width: 658px;
        height: 370px;
    }

    /* product carousel */

    .default-modal .product-gallery {
        background: #042b82 url('/img/presentation/bg-product-carousel.png') repeat-x 0 0;
    }

        .default-modal .product-gallery .pagination {
            background-color: transparent;
            padding-bottom: 10px;
            height: 39px;
            line-height: 39px;
            position: relative;
            z-index: 5;
        }

        .default-modal .product-gallery .gallery {
            width: 984px;
            height: 412px;
        }

    /* tabs */

    .default-modal.has-tabs .content,
    .default-modal.has-tabs .media-wrapper,
    .default-modal.has-tabs .text-wrapper {
        height: auto;
    }

    .default-modal .tabcontainer {
        height: 35px;
        white-space: nowrap;
        font-size: 11.5px;
        position: relative;
    }

        .default-modal .tabcontainer.has-controls {
            margin: 0 35px;
        }

    .default-modal .tabs {
        width: 100%;
        overflow: hidden;
    }

        .default-modal .tabs li {
            padding: 0 2px 0 0;
            margin: 0;
            background: none;
        }

            .default-modal .tabs li span {
                padding: 0;
                background: none;
            }

            .default-modal .tabs li > span {
                padding: 0 2px 0 0;
                background: url(../img/presentation/expertise-tabs-sprite.png) no-repeat right -140px !important;
            }

                .default-modal .tabs li > span > span {
                    background: url(../img/presentation/expertise-tabs-sprite.png) repeat-x 0 -70px;
                }

                    .default-modal .tabs li > span > span > span {
                        height: 35px;
                        line-height: 35px;
                        padding: 0 10px !important;
                        background: none !important;
                    }

            .default-modal .tabs li.active {
                margin-left: 0;
                margin-right: 0;
                background: none !important;
            }

                .default-modal .tabs li.active > span > span {
                    padding-left: 0;
                    padding-right: 0;
                    padding-top: 0;
                    color: #fff;
                    background: url(../img/presentation/expertise-tabs-sprite.png) repeat-x 0 -105px;
                }

            .default-modal .tabs li:hover {
                color: #fff;
            }

    .default-modal .tabcontrol {
        position: absolute;
        width: 39px;
        height: 35px;
        top: 0;
        z-index: 10;
        background: no-repeat;
        cursor: pointer;
    }

        .default-modal .tabcontrol.prev {
            left: -35px;
            background: url(../img/presentation/expertise-tabs-sprite.png) no-repeat left 0;
        }

        .default-modal .tabcontrol.next {
            right: -35px;
            background: url(../img/presentation/expertise-tabs-sprite.png) no-repeat left -35px;
        }

        .default-modal .tabcontrol.disabled {
            cursor: default;
        }

    /* decoration */

    .default-modal .decoration-nw,
    .default-modal .decoration-ne,
    .default-modal .decoration-se,
    .default-modal .decoration-sw {
        width: 35px;
        height: 35px;
        background: url(../img/presentation/expertise-decoration-horiz-sprite.png) no-repeat;
    }

    .default-modal .decoration-n,
    .default-modal .decoration-s {
        left: 35px;
        right: 35px;
        height: 19px;
        background: url(../img/presentation/expertise-decoration-horiz-sprite.png) repeat-x;
    }

    .default-modal .decoration-e,
    .default-modal .decoration-w {
        top: 35px;
        bottom: 35px;
        width: 19px;
        background: url(../img/presentation/expertise-decoration-vert-sprite.png) repeat-y;
    }

    .default-modal .decoration-nw {
        background-position: 0 0;
    }

    .default-modal .decoration-ne {
        background-position: -35px 0;
    }

    .default-modal .decoration-se {
        background-position: -35px -35px;
    }

    .default-modal .decoration-sw {
        background-position: 0 -35px;
    }

    .default-modal .decoration-n {
        background-position: 0 -70px;
    }

    .default-modal .decoration-s {
        background-position: 0 -89px;
    }

    .default-modal .decoration-w {
        background-position: 0 0;
    }

    .default-modal .decoration-e {
        background-position: -19px 0;
    }

    /* MODAL-IN-MODAL =========================================================== */

    .default-modal .modal-in-modal-overlay {
        position: absolute;
        top: 19px;
        left: 19px;
        right: 19px;
        bottom: 19px;
        z-index: 20;
    }

    .default-modal .modal-in-modal {
        position: absolute;
        top: 19px;
        left: 19px;
        right: 19px;
        bottom: 19px;
        z-index: 21;
        max-height: 100%;
        max-width: 100%;
    }

    /* LOCALE SELECT MODAL ====================================================== */

    .default-modal.locale-select {
        font-size: 1.1em;
    }

        .default-modal.locale-select a {
            text-decoration: underline;
            color: #fff;
        }

            .default-modal.locale-select a:hover,
            .default-modal.locale-select a:active,
            .default-modal.locale-select a:focus {
                text-decoration: none;
            }

        .default-modal.locale-select .content {
            height: auto;
            border: 1px solid #fff;
        }

        .default-modal.locale-select .simplemodal-close {
            width: 11px;
            height: 11px;
            right: 35px;
            top: 30px;
            background: url(../img/presentation/locale-select-modal-close.png) no-repeat center;
        }

        .default-modal.locale-select .body > h2 {
            padding: 10px 20px;
            font-size: 1em;
            background: #fff;
            color: #273C69;
        }

        .default-modal.locale-select .text-wrapper {
            color: #fff;
            background: url(../img/presentation/locale-select-modal-bg.png) repeat-x;
        }

        .default-modal.locale-select .text {
            padding: 20px;
            min-height: 175px;
            color: #fff;
            background: #326AAD url(../img/presentation/locale-select-modal-bg.png) repeat-x;
        }

        .default-modal.locale-select label,
        .default-modal.locale-select .international {
            display: block;
            margin: 2em 0 1em;
            text-transform: uppercase;
            font-size: .8em;
            color: #ADCDFF;
        }

        .default-modal.locale-select select {
            width: 260px;
            float: left;
            margin: 0 0 2em;
        }

        .default-modal.locale-select .buttons { /* IE7- helper element */
            float: right;
        }

        .default-modal.locale-select [type="image"] {
            float: right;
        }

        .default-modal.locale-select .international {
            clear: both;
        }

            .default-modal.locale-select .international a {
                text-decoration: none;
            }

/*** Campaing MySkin ***/

#myskin {
    width: 984px;
    height: 470px;
    margin: 0 auto;
}

    #myskin .media-wrapper {
        float: right;
        width: 327px;
        background-color: #a6bcd4;
    }

        #myskin .media-wrapper .media {
            height: 470px;
        }

    #myskin .text-wrapper {
        float: left;
        width: 657px;
        background: #fff url(../../../img/presentation/campaigns/myskin/bg.png) repeat-x 0 0;
    }

        #myskin .text-wrapper .text {
            position: relative;
            height: 470px;
            padding: 0;
        }

            #myskin .text-wrapper .text h1 {
                padding: 30px 0 34px 30px;
                margin: 0;
                font-family: NiveaLight, Arial, Helvetica, sans-serif;
                font-size: 2.7em;
                font-weight: normal;
                line-height: 1.1em;
                color: #00136f;
            }

                #myskin .text-wrapper .text h1 strong {
                    display: inline-block;
                    font-family: NiveaBook, Arial, Helvetica, sans-serif;
                    font-weight: bold;
                    white-space: nowrap;
                }

                #myskin .text-wrapper .text h1 span {
                    display: inline-block;
                    white-space: nowrap;
                }

    #myskin table.myskin-chart tr:nth-child(odd) {
        background-color: #f5f9fe;
    }

    #myskin table.myskin-chart td {
        font-family: NiveaMedium;
        font-weight: normal;
        text-transform: uppercase;
        vertical-align: top;
    }

        #myskin table.myskin-chart td.info {
            padding: 13px 19px 10px 35px;
            width: 284px;
            font-size: 1.1em;
            line-height: 1.2em;
            color: #043586;
        }

        #myskin table.myskin-chart td.img {
            padding: 6px 0 0 0;
            width: 236px;
        }

            #myskin table.myskin-chart td.img span {
                display: block;
                width: 235px;
                height: 25px;
                background: transparent no-repeat 0 0;
            }

                #myskin table.myskin-chart td.img span.percentage-92 {
                    background-image: url(../../../img/presentation/campaigns/myskin/drops-92.png);
                }

                #myskin table.myskin-chart td.img span.percentage-85 {
                    background-image: url(../../../img/presentation/campaigns/myskin/drops-85.png);
                }

                #myskin table.myskin-chart td.img span.percentage-84 {
                    background-image: url(../../../img/presentation/campaigns/myskin/drops-84.png);
                }

        #myskin table.myskin-chart td.percent {
            padding: 9px 20px 9px 15px;
            width: 48px;
            font-size: 1.2em;
            color: #00136f;
        }


    #myskin .myskin-legal {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 655px;
        height: 80px;
    }

        #myskin .myskin-legal li {
            position: absolute;
            font-size: 9px;
            color: #666;
        }

            #myskin .myskin-legal li.legal-txt {
                bottom: 24px;
                left: 35px;
                width: 530px;
            }

            #myskin .myskin-legal li.legal-logo {
                bottom: 15px;
                right: 18px;
            }

                #myskin .myskin-legal li.legal-logo a {
                    display: block;
                    width: 57px;
                    height: 47px;
                    background: url(../../../img/presentation/campaigns/myskin/logo-hydraiq.png) no-repeat 0 0;
                    overflow: hidden;
                    text-indent: -999em;
                }

                #myskin .myskin-legal li.legal-logo span {
                    text-indent: -999em;
                }

li[data-tracking-name="beautiful-intense-tan-video"] {
    height: auto !important;
}

    li[data-tracking-name="beautiful-intense-tan-video"] .video {
        height: 469px;
        width: 784px;
    }
/* Webkit.css content */
html {
    -webkit-font-smoothing: antialiased;
}

.pagination {
    -webkit-user-select: none; /* prevent selection artifacts */
}
/* BASE ===================================================================== */

html {
    margin: 0;
    padding: 0;
    font-size: 76%;
    line-height: 1.5;
    color: #fff;
    background: #fff url(../img/presentation/page-bg.png) repeat-x;
    cursor: default;
    overflow-y: scroll;
}

body {
    margin: 0;
    padding: 0;
    font-size: .9em;
}

input, select, textarea {
    font-size: 1em;
}

h1, h2, h3, h4, h5, h6,
.scfTitleBorder {
    margin: 0;
    text-transform: uppercase;
}

h1 {
    font-size: 1.9em;
    font-weight: normal;
}

h2 {
    font-size: 1.6em;
}

h3 {
    font-size: 1em;
}

h4, h5, h6 {
    font-size: 1em;
}

ul, ol, li, p {
    list-style: none;
    margin: 0;
    padding: 0;
}

object:focus {
    outline: 0 !important;
}

[hidden="true"] {
    display: none !important;
}

button {
    overflow: visible;
}


/* Link styles -------------------------------------------------------------- */

a[href] {
    color: #fff;
    text-decoration: none;
    cursor: pointer !important; /* catch-all fix for IE7 issue where it sometimes does not show the proper cursor */
}

a img {
    border: 0;
}

a:active {
    outline: 0;
}

[role="navigation"] a[href],
[role="navigation"] a {
    color: #C3D3EE;
}

    [role="navigation"] a:hover,
    [role="navigation"] a:focus,
    [role="navigation"] a:active {
        color: #fff;
        outline: 0;
    }


/* Fonts -------------------------------------------------------------------- */

html, input, select, textarea,
html[data-page-type="searchResults"] #product-lineup.no-results .content h2,
[role="navigation"].select-menu,
.button.light {
    font-family: Arial, Helvetica, sans-serif;
}

    h2, h3, h4, h5, h6,
    #primary-menu > li > a,
    #footer .branding,
    #language-select-wrapper .international a,
    #language-select-wrapper .inner .enter,
    #language-select-wrapper .inner h1,
    #language-select-header .header .languages,
    #product-lineup .section > ul > li .type,
    #product-stage-top .header > h1,
    #product-stage-top .browse-range .top .title,
    #introduction-component .browse-range .top .title,
    #product-stage-bottom .tabcontainer,
    #landing-stage-bottom h1,
    #landing-stage-bottom .scfTitleBorder,
    html[data-page-type="productsOverview"] #product-stage-top .header .more,
    dl.product-specs dt,
    .header h1, .header h2, .header h3, .header h4, .header h5, .header h6,
    .find-store,
    .buy-button,
    .learn-more,
    .button,
    .pagination,
    .default-modal .share li,
    .default-modal h1,
    .default-modal.locale-select .body > h2,
    #language-select-header .header .international a,
    #product-lineup .promo > span,
    .scfForm legend,
    .scfForm input[type="submit"],
    .nivea {
        font-family: NiveaBold, Arial, Helvetica, sans-serif;
        /*	font-weight: bold; */
    }

#product-lineup .header,
#breadcrumbs ul,
#language-select-header .header .international,
#language-select-wrapper p {
    font-family: NiveaBook, Arial, Helvetica, sans-serif;
}

h1,
html[data-page-type="searchResults"] #product-lineup h1,
#language-select-wrapper .international,
#language-select-wrapper .inner h2,
#language-select-main h2,
#language-select-header .header h2,
.header .subtitle,
#experience-index h2,
.default-modal .body > h2 {
    font-family: NiveaLight, Arial, Helvetica, sans-serif;
}

#primary-menu > li > div > div > ul,
#primary-menu > li.products > div > div div.categories > ul,
#primary-menu > li.products div.highlights,
.tree-menu,
.menu .select-menu-wrapper > p,
#product-lineup .section > ul > li .type-icon,
.default-modal .tabcontainer,
#error .content li,
.product-tag,
.tooltip.intro,
.two-col .main h2,
.two-col .main .scfTitleBorder,
#product-lineup .section > ul > li.more-results a > .packshot > p,
#product-lineup .section > ul > li.no-results a > .packshot > p,
.default-modal.locale-select label,
.default-modal.locale-select .international,
html[data-page-type="product"] #product-stage-top .header a.product-page,
dl.faq dt {
    font-family: NiveaMedium, Arial, Helvetica, sans-serif;
}


.flir-image {
    display: inline-block !important;
    vertical-align: middle !important;
}

.learn-more .flir-image, .button .flir-image {
    vertical-align: text-top !important;
}



/* GLOBAL STYLES ============================================================ */

.hideme {
    display: none !important;
}

/* Titles ------------------------------------------------------------------- */

.header h1,
.header h2,
.header h3,
.header h4,
.header h5,
.header h6,
.header .subtitle {
    line-height: 1.1;
    text-transform: uppercase;
}


/* Tables ------------------------------------------------------------------- */

table {
    width: 100%;
    border-collapse: collapse;
}

td, th {
    text-align: left;
}


/* forms -------------------------------------------------------------------- */

.form .fieldset {
    padding: 20px;
    border: 1px solid #ddd;
    background: #EEF2FB;
}

.form input,
.form button,
.form select,
.form textarea,
.scfForm input,
.scfForm button,
.scfForm select,
.scfForm textarea {
    /*	border: 0;*/
    /*	padding: 0;*/
    /*	background: transparent;*/
}

.form input,
.form select,
.form textarea,
.scfForm input,
.scfForm select,
.scfForm textarea {
    width: 97%;
    /*	background: #fff;*/
}

.scfForm input,
.scfForm select,
.scfForm textarea {
    width: 20em;
    margin: 0 .5em 0 0;
    padding: .1em .2em;
    background: #F1F5FC;
    border: .1em solid #c3d5f0;
}

    .scfForm input[type="text"] {
        margin-bottom: 0.5em;
    }

.scfForm select {
    width: 20.6em;
}

.scfForm textarea {
    display: block;
    clear: left;
    width: 36em;
}

.scfForm input[type="radio"],
.scfForm input[type="checkbox"] {
    border: 0;
    background: none;
    margin-right: 5px !important;
}

[type="submit"] {
    cursor: pointer;
}

.scfForm input[type="submit"] {
    margin: 0;
    width: auto;
    padding: 0 20px 0 0;
    text-transform: uppercase;
    font-size: 1.3em;
    color: #fff;
    border: 0;
    background: url(../img/presentation/arrow-right-medium-white.png) right center no-repeat;
}

.scfForm .scfSubmitButtonBorder {
    float: right;
    padding: 3px 8px;
    background: #132F7C;
}

.form .row,
.scfForm .scfDropListBorder,
.scfForm .scfMultipleLineTextBorder,
.scfForm .scfSingleLineGeneralPanel,
.scfForm .scfEmailGeneralPanel,
.scfForm .scfDropList,
.scfForm .scfRadioButtonListGeneralPanel,
.scfForm .scfDateSelectorGeneralPanel {
    overflow: hidden;
    margin: 2px 0;
    /*	float: left;*/
}

    .form .row.buttons,
    .scfForm .scfSubmitButtonBorder {
        margin: 2em 0 0;
        width: auto !important;
        text-align: right;
        font-size: .9em;
    }

        .form .row.buttons input,
        .form .row.buttons button {
            background: none;
            border: 0;
            overflow: visible;
            font-family: NiveaBold;
            color: #fff;
            text-transform: uppercase;
        }

.form label,
.form .label,
.scfForm label,
.scfForm .label {
    float: left;
    clear: left;
    width: 12em;
    font-weight: bold;
}

.scfForm label,
.scfForm .scfDateSelectorLabel,
.scfForm .scfRadioButtonListLabel {
    width: 16em;
    line-height: 2em;
    font-weight: bold;
}

.form .field,
.scfForm .scfDropListGeneralPanel,
.scfForm .scfMultipleLineTextBorder,
.scfForm .scfSingleLineGeneralPanel,
.scfForm .scfEmailGeneralPanel,
.scfForm .scfDropList,
.scfForm .scfRadioButtonListGeneralPanel,
.scfForm .scfDateSelectorGeneralPanel {
    overflow: hidden;
}

.form .control {
    overflow: hidden;
    float: left;
    margin: 0 1em;
}

.scfForm [id$="_fieldContainer"] > div {
    margin: 20px 0 0;
    padding: 20px 0 0;
    border: dotted #999;
    border-width: 1px 0 0;
}

.scfForm .scfSectionContent > * {
    overflow: hidden;
}

.scfForm fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.scfForm legend {
    float: left;
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-size: 1em;
    text-transform: uppercase;
    color: #132F7C;
}

    .scfForm legend + * {
        float: left;
    }

.scfRequired {
    display: none;
}

.scfForm .scfDateSelectorGeneralPanel select {
    margin: 0 0 0 .5em;
    width: 6.5em;
    float: left;
}

.scfForm .scfDateSelectorGeneralPanel label + select {
    margin: 0;
}

.scfForm .scfCheckboxBorder input,
.scfForm .scfCheckboxBorder label,
.scfForm .scfRadioButtonListGeneralPanel input,
.scfForm .scfRadioButtonListGeneralPanel label,
.scfForm .select-all-checkbox input,
.scfForm .select-all-checkbox label {
    width: auto;
    float: none;
    clear: none;
    vertical-align: middle;
    font-weight: normal;
    margin: 0;
}

.scfForm .scfCheckboxBorder,
.scfForm .select-all-checkbox {
    width: auto;
    margin: 2em 0 !important;
}

    .scfForm .scfCheckboxBorder input,
    .scfForm .select-all-checkbox input {
        float: left;
    }

    .scfForm .scfCheckboxBorder label,
    .scfForm .select-all-checkbox label {
        display: block;
        overflow: hidden;
        margin-left: 2em;
        line-height: 1.3;
    }

.scfForm .scfRadioButtonList {
    width: auto;
}

    .scfForm .scfRadioButtonList td input[type="radio"],
    .scfForm .scfRadioButtonList td input[type="checkbox"] {
        margin-left: 25px !important;
    }

    .scfForm .scfRadioButtonList td:first-child input[type="radio"],
    .scfForm .scfRadioButtonList td:first-child input[type="checkbox"] {
        margin-left: 0 !important;
    }

.scfForm .scfDateSelectorShortLabelDay,
.scfForm .scfDateSelectorShortLabelMonth,
.scfForm .scfDateSelectorShortLabelYear {
    display: none;
}

.scfForm .scfMultipleLineGeneralPanel {
    clear: left;
}

.scfForm p.charcount {
    margin: 0;
}

.scfForm .scfValidationSummary,
.scfForm .scfError-js {
    display: inline-block;
    margin: 10px 0;
    padding: 10px 15px;
    border: 1px solid red;
}

    .scfForm .scfValidationSummary ul {
        margin: 0;
    }

.form .error {
    color: red;
}

input.placeholder {
    color: #999;
}

.scfForm .name\.Streetnumber input {
    width: 4em;
}

.form .control.radio,
.form .control.checkbox {
    width: auto !important;
    margin-left: 0;
}

.form .field.radios .radio input,
.form .field.checkboxes .checkbox input {
    width: auto;
    vertical-align: middle;
    margin: 0;
}

.form .field.radios label,
.form .field.checkboxes label {
    float: none;
}

.form .field.checkboxes label {
    display: block;
    width: auto;
    overflow: hidden;
    clear: none;
}

.form .field.radios input,
.form .field.checkboxes input {
    margin: 0 1em !important;
    vertical-align: middle;
}

/* Scroll Areas (Styling for vertical scrolling only) ----------------------- */

.scroll-pane-container {
    background: url(/img/presentation/scroll-pane/scroll_pane_bg_repeat.png) 0 0 repeat;
}

.jspScrollable * {
    padding: 0;
    margin: 0;
}

.jspContainer {
    overflow: hidden;
    position: relative;
}

.jspPane {
    position: absolute;
    overflow: hidden;
}

.jspVerticalBar {
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    height: 100%;
}

.jspCap {
    display: none;
}

.jspTrack {
    background: transparent;
    position: relative;
    right: -5px;
}

.jspDrag {
    position: relative;
    top: 0;
    left: 0;
    width: 9px;
    cursor: pointer;
}

.jspDragTop,
.jspDragBottom {
    display: block;
    height: 50%;
    width: 9px;
    background: url(/img/presentation/scroll-pane/scroll_pane_bar.png) 0 0 no-repeat;
}

.jspDragBottom {
    background: url(/img/presentation/scroll-pane/scroll_pane_bar.png) bottom left no-repeat;
}



/* jCarousel ---------------------------------------------------------------- */

.jcarousel-clip-horizontal,
.jcarousel-clip-vertical {
    overflow: hidden;
}



/* Two-column content area template ----------------------------------------- */

.two-col {
    width: 984px;
    margin: 0 0 0 -30px;
}

    .two-col .main {
        float: left;
        width: 605px;
        padding: 25px 0 0 30px;
    }

        .two-col .main h2,
        .two-col .main .scfTitleBorder {
            font-size: 1.06em;
            color: #6999CA;
            font-weight: normal;
        }

        .two-col .main a[href] {
            color: #132F7C;
        }

    .two-col .sidebar {
        float: right;
        min-height: 190px;
        width: 285px;
        padding: 25px 25px 0 25px;
        background: url(../img/presentation/two-col-sidebar-bg.png) repeat-x;
    }

    .two-col p,
    .two-col ol,
    .two-col ul {
        margin: 0 0 1.5em 0;
    }

    .two-col h2,
    .two-col h3 {
        margin: 0 0 1em 0;
    }

    .two-col .sidebar a {
        color: #183E9E;
    }

    .two-col .sidebar h2 {
        font-size: 1.1em;
        color: #132F7C;
    }

    .two-col .sidebar h3 {
        font-size: 1em;
        color: #6999CA;
    }

    .two-col .sidebar p {
        color: #2c3b61;
        font-style: italic;
    }

    /* common elements */

    .two-col li {
        margin: 0 0 0 2em;
    }

    .two-col ul li {
        list-style: disc;
    }

    .two-col ol li {
        list-style: decimal;
    }

    .two-col .main .reference {
        font-family: monospace;
    }

/* page overrides */

html[data-page-type="Webforms"] .two-col .sidebar {
    background-image: none;
    min-height: 0;
}

html[data-page-type="Webforms"] #small-teasers,
html[data-page-type="Thank You"] #small-teasers,
html[data-page-type="ConditionsOfUse"] #small-teasers,
html[data-page-type="Imprint"] #small-teasers,
html[data-page-type="Sustainability"] #small-teasers,
html[data-page-type="Beiersdorf"] #small-teasers,
html[data-page-type="LegalPolicy"] #small-teasers,
html[data-page-type="Career"] #small-teasers {
    padding-top: 0;
}

html[data-page-type="Webforms"] .two-col a[href],
html[data-page-type="Thank You"] .two-col a[href],
html[data-page-type="ConditionsOfUse"] .two-col a[href],
html[data-page-type="Imprint"] .two-col a[href],
html[data-page-type="Sustainability"] .two-col a[href],
html[data-page-type="Beiersdorf"] .two-col a[href],
html[data-page-type="LegalPolicy"] .two-col a[href],
html[data-page-type="Career"] .two-col a[href] {
    text-decoration: underline;
}

    html[data-page-type="Webforms"] .two-col a[href]:hover,
    html[data-page-type="Thank You"] .two-col a[href]:hover,
    html[data-page-type="ConditionsOfUse"] .two-col a[href]:hover,
    html[data-page-type="Imprint"] .two-col a[href]:hover,
    html[data-page-type="Sustainability"] .two-col a[href]:hover,
    html[data-page-type="Beiersdorf"] .two-col a[href]:hover,
    html[data-page-type="LegalPolicy"] .two-col a[href]:hover,
    html[data-page-type="Career"] .two-col a[href]:hover {
        text-decoration: none;
    }


/* Dropdowns ---------------------------------------------------------------- */

[role="navigation"] [aria-haspopup="true"] {
    position: relative;
    list-style: none;
    margin: 0;
}

    [role="navigation"] [aria-haspopup="true"] > ul,
    [role="navigation"] [aria-haspopup="true"] > div {
        position: absolute;
        left: -9999px;
    }

    [role="navigation"] [aria-haspopup="true"]:hover > ul,
    [role="navigation"] [aria-haspopup="true"].hover > ul,
    [role="navigation"] [aria-haspopup="true"]:hover > div,
    [role="navigation"] [aria-haspopup="true"].hover > div,
    [role="navigation"] [aria-haspopup="true"] > [aria-hidden="false"] { /* assumption: the popup container element will always be a UL or DIV */
        left: 0;
    }

/* Dropdown decoration ------------------------------------------------------ */

/* general case + primary menu specifics // other types (below) override these */

[class*="decoration-"] {
    position: absolute;
}

.decoration-nw,
.decoration-ne,
.decoration-se,
.decoration-sw {
    width: 16px;
    height: 16px;
    background: url(../img/presentation/decoration-main-horiz-sprite.png) no-repeat;
}

.decoration-n,
.decoration-s {
    left: 16px;
    right: 16px;
    height: 9px;
    background: url(../img/presentation/decoration-main-horiz-sprite.png) repeat-x;
}

.decoration-e,
.decoration-w {
    top: 16px;
    bottom: 16px;
    width: 9px;
    background: url(../img/presentation/decoration-main-vert-sprite.png) repeat-y;
}

.decoration-nw {
    left: 0;
    top: 0;
    background-position: 0 0;
}

.decoration-ne {
    right: 0;
    top: 0;
    background-position: -16px 0;
}

.decoration-se {
    right: 0;
    bottom: 0;
    background-position: -16px -16px;
}

.decoration-sw {
    left: 0;
    bottom: 0;
    background-position: 0 -16px;
}

.decoration-n {
    top: 0;
    background-position: 0 -32px;
}

.decoration-s {
    bottom: 0;
    background-position: 0 -41px;
}

.decoration-w {
    left: 0;
    background-position: 0 0;
}

.decoration-e {
    right: 0;
    background-position: -9px 0;
}

/* "related links" listboxes */

[role="navigation"].select-menu > li {
    padding: 2px !important;
}

    [role="navigation"].select-menu > li > a {
        height: 13px;
        line-height: 13px;
        padding: 5px 10px;
        background: url(../img/presentation/related-listbox-horiz-sprite.png) repeat-x 0 -14px;
    }

        [role="navigation"].select-menu > li > a > span {
            display: block;
            padding: 0 15px 0 0;
            background: url(../img/presentation/listbox-arrow.png) no-repeat right center;
        }

[role="navigation"].select-menu ul,
[role="navigation"].select-menu li {
    list-style: none;
    margin: 0;
}

[role="navigation"].select-menu a {
    color: #000 !important;
    display: block;
}

[role="navigation"].select-menu > li:hover > div,
[role="navigation"].select-menu > li.hover > div {
    padding: 2px;
    top: 24px;
    right: 0;
}

    [role="navigation"].select-menu > li:hover > div > ul,
    [role="navigation"].select-menu > li.hover > div > ul {
        padding: 2px 10px;
        background: #D7E2ED;
    }


[role="navigation"].select-menu > li > div a:hover,
[role="navigation"].select-menu > li > div a:active,
[role="navigation"].select-menu > li > div a:focus {
    color: #2D5C9C !important;
}

[role="navigation"].select-menu > li > div a.label {
    font-weight: bold;
    cursor: default !important;
}

[role="navigation"].select-menu li > div a.label:hover {
    color: #000 !important;
}

[role="navigation"].select-menu .decoration-nw,
[role="navigation"].select-menu .decoration-ne,
[role="navigation"].select-menu .decoration-se,
[role="navigation"].select-menu .decoration-sw {
    width: 5px;
    height: 5px;
    background: url(../img/presentation/related-listbox-horiz-sprite.png) no-repeat;
}

[role="navigation"].select-menu .decoration-n,
[role="navigation"].select-menu .decoration-s {
    left: 5px;
    right: 5px;
    height: 2px;
    background: url(../img/presentation/related-listbox-horiz-sprite.png) repeat-x;
}

[role="navigation"].select-menu .decoration-e,
[role="navigation"].select-menu .decoration-w {
    top: 5px;
    bottom: 5px;
    width: 2px;
    background: url(../img/presentation/related-listbox-vert-sprite.png) repeat-y;
}

[role="navigation"].select-menu .decoration-nw {
    background-position: 0 0;
}

[role="navigation"].select-menu .decoration-ne {
    background-position: -5px 0;
}

[role="navigation"].select-menu .decoration-sw {
    background-position: 0 -5px;
}

[role="navigation"].select-menu .decoration-se {
    background-position: -5px -5px;
}

[role="navigation"].select-menu .decoration-n {
    background-position: 0 -10px;
}

[role="navigation"].select-menu .decoration-s {
    background-position: 0 -12px;
}

[role="navigation"].select-menu .decoration-w {
    background-position: 0 0;
}

[role="navigation"].select-menu .decoration-e {
    background-position: -2px 0;
}

/* side menu decoration */

.decoration-top,
.decoration-middle,
.decoration-bottom {
    background: url(../img/presentation/tree-menu-vert-sprite.png) no-repeat;
}

.decoration-top {
    top: 0;
    left: 0;
    right: 0;
    height: 10px;
    background-position: -209px 0;
}

.decoration-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    height: 10px;
    background-position: -418px 0;
}

.decoration-middle {
    top: 10px;
    bottom: 10px;
    left: 0;
    right: 0;
    background-position: 0 0;
    background-repeat: repeat-y;
}


/* Tree menu ---------------------------------------------------------------- */

.menu { /* wrapper defaults */
    width: 197px;
    margin: -6px 34px 0 -6px;
    padding: 6px;
    float: left;
    position: relative;
}

    .menu .tree-menu {
        position: relative;
        z-index: 1; /* elevate above decoration boxes */
        background: #0B277C url(../img/presentation/tree-menu-bg.png) repeat-x;
    }

        .menu .tree-menu a {
            display: block;
            cursor: pointer;
        }

        .menu .tree-menu > li {
            padding: 4px 12px;
            border-top: 1px solid #36569B;
            border-bottom: 1px solid #081D5D;
            background: url(../img/presentation/tree-menu-bg-short.png) repeat-x;
        }

            .menu .tree-menu > li:first-child {
                border-top: 0;
            }

            .menu .tree-menu > li.active {
                background: none;
            }

            .menu .tree-menu > li > a {
                padding: 3px 15px 3px 0;
                font-size: .9em;
                color: #fff;
                text-transform: uppercase;
                background: url(../img/presentation/arrow-right-medium-circle-dark.png) no-repeat right center;
            }

            .menu .tree-menu > li.active > a {
                background: url(../img/presentation/arrow-down-medium-circle-dark.png) no-repeat right center;
            }

            .menu .tree-menu > li.active li.active > a {
                color: #fff;
            }

        /* "static" tree-menu overrides */

        .menu .tree-menu.static {
            padding: 6px 0;
        }

            .menu .tree-menu.static > li {
                border: 0;
                padding-top: 2px;
                padding-bottom: 2px;
                background: none;
            }

                .menu .tree-menu.static > li > a {
                    padding: 1px 0;
                    background: none;
                }

                .menu .tree-menu.static > li:hover {
                    background: #326AAD;
                }

                    .menu .tree-menu.static > li:hover a {
                        background: url(../img/presentation/arrow-right-medium-circle-dark.png) no-repeat right center;
                    }

    /* "select-menu" listbox */

    .menu .select-menu-wrapper {
        padding: 15px;
        position: relative;
        z-index: 1; /* elevate above decoration boxes */
        background: #E3EAF6 url(../img/presentation/related-wrapper-bg.png) repeat-x;
    }

        .menu .select-menu-wrapper a {
            color: #000;
        }

        .menu .select-menu-wrapper > p {
            margin: 0 0 10px 0;
            color: #346CAE;
            font-size: .9em;
            text-transform: uppercase;
        }

        .menu .select-menu-wrapper .select-menu {
            margin: 10px 0 0;
        }

    /* decoration */

    .menu .decoration-top,
    .menu .decoration-middle,
    .menu .decoration-bottom {
        background: url(../img/presentation/tree-menu-vert-sprite.png) no-repeat;
    }

    .menu .decoration-top {
        top: 0;
        left: 0;
        right: 0;
        height: 10px;
        background-position: -209px 0;
    }

    .menu .decoration-bottom {
        bottom: 0;
        left: 0;
        right: 0;
        height: 10px;
        background-position: -418px 0;
    }

    .menu .decoration-middle {
        top: 10px;
        bottom: 10px;
        left: 0;
        right: 0;
        background-position: 0 0;
        background-repeat: repeat-y;
    }


/* Tabs controls ------------------------------------------------------------ */

/*.tabcontainer {
	text-transform: uppercase;
	font-size: 1.4em;
	background: url(../img/presentation/tabs-shadow-n.png) repeat-x bottom;
}

.tabcontainer li {
	float: left;
	margin: 0 1px;
	cursor: pointer;
	color: #8DABD0;
	background: #EBF1FA url(../img/presentation/tabs-shadow-n.png) repeat-x bottom;
}

.tabcontainer li:first-child > span > span > span {
	padding-left: 30px;
}

.tabcontainer li span {
	display: block;
}

.tabcontainer li > span > span > span {
	padding: 10px 20px;
}

.tabcontainer li.active {
	margin-top: -5px;
	padding-left: 10px;
	cursor: default;
	background: url(../img/presentation/tabs-shadow-w.png) no-repeat;
}

.tabcontainer li.active > span {
	padding-right: 10px;
	background: url(../img/presentation/tabs-shadow-e.png) no-repeat right top;
}

.tabcontainer li.active > span > span {
	padding-top: 5px;
	background: url(../img/presentation/tabs-shadow-n.png) repeat-x;
}

.tabcontainer li.active > span > span > span {
	background: #fff;
}

.tabcontainer li.active:first-child {
	margin-left: 0;
	padding-left: 0;
	background: none;
}

.tabcontainer li:hover,
.tabcontainer li.active {
	color: #273C69;
}*/

.tabcontainer {
    font-size: 1.4em;
    background: url(../img/presentation/tabs-shadow-n.png) repeat-x bottom;
}

    .tabcontainer ul {
        margin: 0;
    }

    .tabcontainer li {
        display: inline-block;
        margin: 0 1px 0 1px;
        padding: 0 0 0 10px;
        list-style: none;
        cursor: pointer;
        color: #8DABD0;
        background: #EBF1FA url(../img/presentation/tabs-shadow-n.png) repeat-x bottom;
    }

        .tabcontainer li span {
            display: block;
        }

        .tabcontainer li > span {
            padding-right: 10px;
        }

            .tabcontainer li > span > span > span {
                padding: 10px 20px;
                text-transform: uppercase;
            }

        /* active */

        .tabcontainer li.active {
            margin-top: -5px;
            margin-left: -4px;
            margin-right: -4px;
            cursor: default;
            background: url(../img/presentation/tabs-sprite.png) no-repeat;
        }

            .tabcontainer li.active > span {
                background: url(../img/presentation/tabs-sprite.png) no-repeat right -55px;
            }

                .tabcontainer li.active > span > span {
                    padding-top: 5px;
                    background: url(../img/presentation/tabs-shadow-n.png) repeat-x;
                }

                    .tabcontainer li.active > span > span > span {
                        padding-left: 25px;
                        padding-right: 25px;
                        background: #fff;
                    }

        /* hover, active */

        .tabcontainer li:hover,
        .tabcontainer li:focus,
        .tabcontainer li.active {
            color: #273C69;
            outline: 0;
        }

/* tabcontent */

.tabcontent {
    overflow: hidden;
}

    .tabcontent > li {
        overflow: hidden;
        list-style: none;
        margin: 0;
        position: relative;
    }

        .tabcontent > li > :first-child {
            margin-top: 0 !important;
        }


/* Pagination --------------------------------------------------------------- */

.pagination {
    background: #03368A;
    text-align: center;
    font-size: 1.2em;
    clear: both;
}

    .pagination * {
        display: inline-block;
        vertical-align: middle;
        line-height: 25px;
    }

    .pagination a {
        cursor: pointer; /* pointers on anchors without href (js-injected) */
    }

    .pagination ol {
        margin: 0 1.5em;
    }

        .pagination ol > li {
            margin: 0 .2em;
        }

            .pagination ol > li > a {
                width: 25px;
                height: 25px;
                background: url(../img/presentation/pagination-sprite.png) no-repeat;
                background-position: -25px 0;
                vertical-align: top;
                color: #fff !important;
            }

            .pagination ol > li.active > a {
                background-position: 0 0;
                color: #355EA1 !important;
            }

    .pagination a.prev,
    .pagination a.next {
        text-indent: -9999px;
        width: 11px;
        height: 25px;
        background: url(../img/presentation/pagination-sprite.png) no-repeat center;
        overflow: hidden;
    }

    .pagination a.prev {
        background-position: -150px 0;
    }

    .pagination a.next {
        background-position: -161px 0;
    }

        .pagination a.prev.disabled,
        .pagination a.next.disabled {
            cursor: default;
        }

/* media gallery overrides */

.media-gallery .pagination {
    background: transparent;
}

    .media-gallery .pagination > div,
    .product-gallery .pagination > div {
        display: inline-block;
    }

        .media-gallery .pagination > div *,
        .product-gallery .pagination > div * {
            float: left;
        }

    .media-gallery .pagination ol > li > a,
    .product-gallery .pagination ol > li > a {
        text-indent: -99999px;
        background-image: url(../img/presentation/pagination-sprite.png);
        background-position: -125px 0;
    }

    .media-gallery .pagination ol > li.active > a,
    .product-gallery .pagination ol > li.active > a {
        background-position: -100px 0;
    }

    .media-gallery .pagination a.prev, .media-gallery .pagination a.next,
    .product-gallery .pagination a.prev, .media-gallery .pagination a.next {
        background: url(../img/presentation/pagination-sprite.png) no-repeat;
    }

    .media-gallery .pagination a.prev,
    .product-gallery .pagination a.prev {
        background-position: -150px 0;
    }

    .media-gallery .pagination a.next,
    .product-gallery .pagination a.next {
        background-position: -161px 0;
    }

/* teaser overrides */

.teaser .pagination {
    background: #fff;
}

    .teaser .pagination > div {
        display: inline-block;
    }

        .teaser .pagination > div * {
            float: left;
            height: 25px;
        }

    .teaser .pagination ol > li > a {
        width: 25px;
        text-indent: -9999px;
        background-image: url(../img/presentation/pagination-sprite.png);
        background-position: -125px 0;
    }

    .teaser .pagination ol > li.active > a {
        background-position: -100px 0;
    }


/* Media gallery ------------------------------------------------------------ */

.media-gallery .gallery > li {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 658px;
    height: 370px;
}

    .media-gallery .gallery > li:first-child {
        z-index: 3;
    }

.media-gallery .gallery .details {
    display: none;
}



/* Product listing ---------------------------------------------------------- */
/* This is just a generic subset of the #product-lineup of the main website   */

.product-listing ul > li {
    float: left;
    width: 211px;
}

    .product-listing ul > li > div {
        height: 384px;
        margin: 0;
        overflow: hidden;
    }

    .product-listing ul > li .packshot {
        height: 190px;
        /*width: 211px;*/
        width: 100%;
        text-align: center;
        position: relative;
    }

        .product-listing ul > li .packshot > div {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
        }

            .product-listing ul > li .packshot > div > .product-tag {
                position: absolute;
                top: -12px;
                left: -4px;
            }

            .product-listing ul > li .packshot > div img {
                vertical-align: bottom;
                margin: 0 0 -45px;
            }

    .product-listing ul > li h3 {
        margin: 30px 0 5px;
        padding: 0 20px 0 0;
        min-height: 13px;
        background: url(/img/presentation/arrow-right-medium-circle.png) no-repeat right .35em;
    }


/* Product Range ------------------------------------------------------------ */

.product-gallery .gallery > li {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 984px;
    height: 370px;
}

    .product-gallery .gallery > li:first-child {
        z-index: 3;
    }

.product-gallery .gallery .details {
}

.product-gallery .gallery li > ul {
    padding-top: 15px;
    text-align: center;
}

    .product-gallery .gallery li > ul > li {
        background: transparent url('/img/presentation/bg-product-carousel-item.png') no-repeat 0 0;
        display: inline-block;
        overflow: hidden;
        margin: 0 9px;
        padding: 0 20px;
        width: 252px;
        height: 468px;
    }

        .product-gallery .gallery li > ul > li > div {
            text-align: left;
        }

            .product-gallery .gallery li > ul > li > div h3,
            .product-gallery .gallery li > ul > li > div h4 {
                color: #043586;
            }

            .product-gallery .gallery li > ul > li > div h3 {
                position: absolute;
                margin: 0;
                top: 25px;
                left: 0;
                width: 134px;
                font-size: 1.4em;
                line-height: 1.2em;
            }

            .product-gallery .gallery li > ul > li > div h4 {
                margin: 8px 0 4px 0;
                font-size: 1.1em;
            }

                .product-gallery .gallery li > ul > li > div h4:first-child {
                    margin-top: 0;
                }

            .product-gallery .gallery li > ul > li > div:first-child {
                position: relative;
                overflow: hidden;
                padding: 4px 0 0 134px;
                height: 120px;
            }

                .product-gallery .gallery li > ul > li > div:first-child img {
                    float: right;
                    margin-right: 7px;
                }

            .product-gallery .gallery li > ul > li > div.details {
                background-image: none;
                width: 252px;
                font-size: 1.1em;
                line-height: 1.4em;
                color: #24325e;
            }

.product-gallery .gallery .details .scroll-pane {
    height: 270px;
}

.product-gallery .gallery .details .jspDragTop, .product-gallery .gallery .details .jspDragBottom {
    background-image: url('/img/presentation/scroll-pane/scroll_pane_bar_blue.png');
}


/* Product tags ------------------------------------------------------------- */

.product-tag,
.product-tag span {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    font-size: .96em;
    text-transform: uppercase;
    vertical-align: bottom;
    /*	text-shadow: 1px 1px 5px #555;*/ /* fucks up chrome */
}

.product-tag {
    padding-left: 10px;
    background: url(../img/presentation/product-tag-sprite.png) no-repeat left 0;
}

    .product-tag > span {
        padding-right: 15px;
        background: url(../img/presentation/product-tag-sprite.png) no-repeat right -75px;
    }

        .product-tag > span > span {
            background: url(../img/presentation/product-tag-sprite.png) repeat-x 0 -100px;
        }

    /* reverse */

    .product-tag.reverse {
        padding-left: 15px;
        background: url(../img/presentation/product-tag-sprite.png) no-repeat left -50px;
    }

        .product-tag.reverse > span {
            padding-right: 10px;
            background: url(../img/presentation/product-tag-sprite.png) no-repeat right -25px;
        }


/* Find a store button ------------------------------------------------------ */

.find-store,
.buy-button,
.find-store span,
.buy-button span {
    display: inline-block;
    line-height: 25px;
    height: 25px;
}

.find-store,
.buy-button {
    padding-left: 12px;
    background: url(../img/presentation/find-store-sprite.png) no-repeat left 0;
}

    .find-store > span,
    .buy-button > span {
        padding-right: 12px;
        background: url(../img/presentation/find-store-sprite.png) no-repeat right -25px;
    }

        .find-store > span > span,
        .buy-button > span > span {
            background: url(../img/presentation/find-store-sprite.png) repeat-x 0 -50px;
        }

            .find-store > span > span > span {
                text-transform: uppercase;
                padding: 0 25px 0 0;
                background: url(../img/presentation/icon-cart.png) no-repeat right center;
            }

            .buy-button > span > span > span {
                text-transform: uppercase;
            }
/* Buttons ------------------------------------------------------------------ */

.button,
.button span,
.learn-more,
.learn-more span {
    display: inline-block;
    line-height: 29px;
    height: 31px;
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
    border: 0;
    padding: 0;
    background: url(../img/presentation/learn-more-sprite.png) no-repeat left 0;
}

    .button::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

.button,
.learn-more {
    font-size: .94em;
    padding-left: 20px;
}

    .button > span,
    .learn-more > span {
        padding-right: 20px;
        background-position: right -31px;
    }

        .button > span > span,
        .learn-more > span > span {
            text-transform: uppercase;
            background-repeat: repeat-x;
            background-position: 0 -62px;
        }

            .button > span > span > span,
            .learn-more > span > span > span {
                padding: 0 15px 0 0;
                background: url(../img/presentation/arrow-right-small-white.png) no-repeat right center;
            }

.template-module .button span {
    pointer-events: none;
}
/* big */

.button.big,
.button.big span,
.learn-more.big,
.learn-more.big span {
    display: inline-block;
    min-height: 37px;
    line-height: 37px;
    background: url(../img/presentation/learn-more-big-sprite.png) no-repeat left 0;
}

html a.button.big[href] {
    text-decoration: none;
}

.button.big,
.learn-more.big {
    font-size: 1.1em;
    padding-left: 25px;
}

    .button.big > span,
    .learn-more.big > span {
        padding-right: 25px;
        background-position: right -37px;
    }

        .button.big > span > span,
        .learn-more.big > span > span {
            background-repeat: repeat-x;
            background-position: 0 -74px;
        }

            .button.big > span > span > span,
            .learn-more.big > span > span > span {
                text-transform: uppercase;
                padding: 0 20px 0 0;
                background: url(../img/presentation/arrow-right-medium-white.png) no-repeat right center;
            }

/* light */

.button.light,
.button.light span {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    text-transform: none;
    color: #00136f;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    background: url(../img/presentation/button-light-sprite.png) no-repeat left 0;
}

.button.light {
    font-size: 1.1em;
    padding-left: 12px;
}

    .button.light > span {
        padding-right: 12px;
        background-position: right -24px;
    }

        .button.light > span > span {
            background-repeat: repeat-x;
            background-position: 0 -48px;
        }

            .button.light > span > span > span {
                padding: 0;
                background: none;
            }

/* lightblue */

.button.lightblue,
.button.lightblue span {
    display: inline-block;
    height: 23px;
    line-height: 23px;
    text-transform: none;
    color: #00136f;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    background: url(../img/presentation/button-lightblue-sprite.png) no-repeat left 0;
}

.button.lightblue {
    font-size: 1.1em;
    padding-left: 12px;
}

    .button.lightblue > span {
        padding-right: 12px;
        background-position: right -23px;
    }

        .button.lightblue > span > span {
            background-repeat: repeat-x;
            background-position: 0 -92px;
        }

            .button.lightblue > span > span > span {
                padding: 0;
                background: none;
            }

.bar .button.lightblue {
    background-position: left -46px;
}

    .bar .button.lightblue > span {
        background-position: right -69px;
    }

.bar li:first-child .button.lightblue {
    background-position: 0 0;
}

.bar li.last .button.lightblue > span {
    background-position: right -23px;
}

.bar li {
    display: inline-block;
}

/* mediumblue */

.button.mediumblue,
.button.mediumblue span {
    display: inline-block;
    height: 21px;
    line-height: 21px;
    text-transform: none;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    background: url(/img/presentation/button-mediumblue-sprite.png) no-repeat left 0;
}

.button.mediumblue {
    font-size: 1.1em;
    padding-left: 15px;
}

    .button.mediumblue > span {
        padding-right: 15px;
        background-position: right -21px;
    }

        .button.mediumblue > span > span {
            background-repeat: repeat-x;
            background-position: 0 -42px;
        }

            .button.mediumblue > span > span > span {
                padding: 0;
                background: none;
            }

/* darkblue */

.button.darkblue,
.button.darkblue span {
    display: inline-block;
    height: 21px;
    line-height: 21px;
    text-transform: none;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    background: url(/img/presentation/button-darkblue-sprite.png) no-repeat left 0;
}

.button.darkblue {
    font-size: 1.1em;
    padding-left: 15px;
}

    .button.darkblue > span {
        padding-right: 15px;
        background-position: right -21px;
    }

        .button.darkblue > span > span {
            background-repeat: repeat-x;
            background-position: 0 -42px;
        }

.button.button.darkblue > span > span > span {
    text-transform: uppercase;
    padding: 0 20px 0 0;
    background: url(../img/presentation/arrow-right-small-white.png) no-repeat right center;
}

/* gold, big */

.button.gold.big,
.button.gold.big span {
    display: inline-block;
    height: 68px;
    line-height: 68px;
    color: #00136f;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-family: NiveaBold;
    background: url(../img/presentation/button-gold-big-sprite.png) no-repeat left 0;
}

.button.gold.big {
    font-size: 1.7em;
    padding-left: 35px;
}

    .button.gold.big > span {
        padding-right: 35px;
        background-position: right -68px;
    }

        .button.gold.big > span > span {
            background-repeat: repeat-x;
            background-position: 0 -136px;
        }

            .button.gold.big > span > span > span {
                padding: 0 30px 0 0;
                background: url(/img/presentation/arrow-right-medium-blue.png) no-repeat right center;
            }


/* gold, small */

.button.gold.small,
.button.gold.small span {
    display: inline-block;
    height: 48px;
    line-height: 48px;
    color: #00136f;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-family: NiveaBold;
    background: url(../img/presentation/button-gold-small-sprite.png) no-repeat left -2px;
}

.button.gold.small {
    font-size: 1.2em;
    padding-left: 30px;
}

    .button.gold.small > span {
        padding-right: 30px;
        background-position: right -51px;
    }

        .button.gold.small > span > span {
            background-repeat: repeat-x;
            background-position: 0 -100px;
        }

            .button.gold.small > span > span > span {
                padding: 0 25px 0 0;
                background: url(/img/presentation/arrow-right-medium-blue.png) no-repeat right center;
            }


/* herp-a-derp */

.button.no-uppercase,
.button.no-uppercase span {
    text-transform: none !important;
}

.button input, .button button {
    text-transform: uppercase;
}

/* .buttons with <input>s/<button>s */

.button input, .button button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    padding: 0;
    background: none;
    overflow: visible; /* IE fix */
    font-family: NiveaMedium;
    color: #fff;
}

    .button input::-moz-focus-inner, .button button::-moz-focus-inner {
        padding: 0;
        border: 0;
    }




/* Teaser boxes ------------------------------------------------------------- */

.teaser {
    width: 195px;
    padding: 9px;
}

    .teaser,
    .teaser a {
        color: #000;
        line-height: 1.3;
    }

        .teaser h2,
        .teaser h3,
        .teaser h4,
        .teaser h5,
        .teaser h6 {
            margin: .5em 0;
            font-size: 1em;
            color: #21498F;
        }

        .teaser h2 {
            min-height: 13px;
            padding: 0 25px 0 0;
            background: url(../img/presentation/arrow-right-medium-circle-dark.png) no-repeat right top;
        }

        .teaser .jcarousel-container .jcarousel-list {
            display: inline-block;
        }

        .teaser > div:first-child {
            padding: 12px;
            background: #BFD0EA url(../img/presentation/teaser-bg.png) repeat-x;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
        }

            .teaser > div:first-child a {
                display: block;
            }

            .teaser > div:first-child li {
                display: inline-block;
                width: 171px;
                margin: 0 12px 0 0;
                white-space: normal;
                overflow: hidden;
            }

        .teaser .pagination {
            padding: 3px 10px;
            font-size: .9em;
        }

        /* carousel controls */

        .teaser .jcarousel-prev,
        .teaser .jcarousel-next {
            position: absolute;
            width: 25px;
            height: 50px;
            top: 23px;
            cursor: pointer;
        }

        .teaser .jcarousel-prev {
            left: -10px;
            background: url(../img/presentation/carousel-sprite-small.png) no-repeat 0 0;
        }

        .teaser .jcarousel-prev-disabled {
            cursor: default;
            background: url(../img/presentation/carousel-sprite-small.png) no-repeat 0 -50px;
        }

        .teaser .jcarousel-next {
            right: -10px;
            background: url(../img/presentation/carousel-sprite-small.png) no-repeat -25px 0;
        }

        .teaser .jcarousel-next-disabled {
            cursor: default;
            background: url(../img/presentation/carousel-sprite-small.png) no-repeat -25px -50px;
        }


/* Lists -------------------------------------------------------------------- */

/* fancy styled lists */

.stylized {
    font-size: .9em;
}

    .stylized > li {
        border-top: 1px dotted #5173AA;
    }

        .stylized > li:first-child {
            border: 0;
        }

        .stylized > li > a {
            margin: .2em 0;
            padding: .2em 0;
            color: #fff;
        }

            .stylized > li > a:hover,
            .stylized > li > a:focus,
            .stylized > li > a:active {
                color: #C3D3EE;
                outline: 0;
            }


/* Product type icons ------------------------------------------------------- */

.type-icon,
.type-icon span {
    display: inline-block;
    height: 12px;
    line-height: 12px;
    background: url(../img/presentation/product-type-sprite.png) no-repeat;
}

.type-icon {
    display: inline-block;
    color: #1A1860;
    font-size: .8em;
    padding-left: 6px;
}

    .type-icon > span {
        padding-right: 6px;
    }

        .type-icon > span > span {
            background-repeat: repeat-x;
        }

    /* repair */

    .type-icon.repair {
        background-position: 0 0;
    }

        .type-icon.repair > span {
            background-position: right -12px;
        }

            .type-icon.repair > span > span {
                background-position: 0 -24px;
            }

    /* shine */

    .type-icon.shine {
        background-position: 0 -36px;
    }

        .type-icon.shine > span {
            background-position: right -48px;
        }

            .type-icon.shine > span > span {
                background-position: 0 -60px;
            }

    /* protect */

    .type-icon.protect {
        background-position: 0 -72px;
    }

        .type-icon.protect > span {
            background-position: right -84px;
        }

            .type-icon.protect > span > span {
                background-position: 0 -96px;
            }

    /* strengthen */

    .type-icon.strengthen {
        background-position: 0 -108px;
    }

        .type-icon.strengthen > span {
            background-position: right -120px;
        }

            .type-icon.strengthen > span > span {
                background-position: 0 -132px;
            }


/* Product specs ------------------------------------------------------------ */

dl.product-specs {
    margin: 0 0 10px 0;
    overflow: hidden;
    color: #666;
}

    dl.product-specs dt,
    dl.product-specs dd {
        margin: 0;
        padding: 10px 0;
    }

    dl.product-specs dt {
        float: left;
        clear: left;
        line-height: 22px;
        text-transform: uppercase;
    }

    dl.product-specs dd {
        text-align: right;
        border: dotted #666;
        border-width: 0 0 1px 0;
    }

    dl.product-specs dt:first-child + dd {
        border-top-width: 1px;
    }

    dl.product-specs ol {
        margin: 0;
    }

    dl.product-specs .colors > li,
    dl.product-specs .spf > li {
        margin: 0 0 0 5px;
        display: inline-block;
        width: 22px;
        height: 22px;
        line-height: 22px;
        background: no-repeat center center;
        overflow: hidden;
        text-align: center;
        color: #fff;
        vertical-align: bottom;
        list-style: none;
    }

    dl.product-specs .spf .spf-uv {
        background-image: url(../img/product-info/uv.png);
    }

    dl.product-specs .colors > li {
        text-indent: -9999px;
        text-align: left;
        background-image: url(../img/presentation/color-swatch-overlay.png);
    }

    /* spf */

    dl.product-specs ol.spf > li.spf-0,
    dl.product-specs ol.spf > li.spf-1,
    dl.product-specs ol.spf > li.spf-2,
    dl.product-specs ol.spf > li.spf-3,
    dl.product-specs ol.spf > li.spf-4,
    dl.product-specs ol.spf > li.spf-5 {
        background-image: url(../img/product-info/spf-0-5.png);
    }

    dl.product-specs ol.spf > li.spf-6,
    dl.product-specs ol.spf > li.spf-7,
    dl.product-specs ol.spf > li.spf-8,
    dl.product-specs ol.spf > li.spf-9,
    dl.product-specs ol.spf > li.spf-10,
    dl.product-specs ol.spf > li.spf-11,
    dl.product-specs ol.spf > li.spf-12,
    dl.product-specs ol.spf > li.spf-13,
    dl.product-specs ol.spf > li.spf-14 {
        background-image: url(../img/product-info/spf-5-10.png);
    }

    dl.product-specs ol.spf > li.spf-15,
    dl.product-specs ol.spf > li.spf-16,
    dl.product-specs ol.spf > li.spf-17,
    dl.product-specs ol.spf > li.spf-18,
    dl.product-specs ol.spf > li.spf-19,
    dl.product-specs ol.spf > li.spf-20,
    dl.product-specs ol.spf > li.spf-21,
    dl.product-specs ol.spf > li.spf-22,
    dl.product-specs ol.spf > li.spf-23,
    dl.product-specs ol.spf > li.spf-24,
    dl.product-specs ol.spf > li.spf-25,
    dl.product-specs ol.spf > li.spf-26,
    dl.product-specs ol.spf > li.spf-27,
    dl.product-specs ol.spf > li.spf-28,
    dl.product-specs ol.spf > li.spf-29 {
        background-image: url(../img/product-info/spf-15-25.png);
    }

    dl.product-specs ol.spf > li.spf-30,
    dl.product-specs ol.spf > li.spf-31,
    dl.product-specs ol.spf > li.spf-32,
    dl.product-specs ol.spf > li.spf-33,
    dl.product-specs ol.spf > li.spf-34,
    dl.product-specs ol.spf > li.spf-35,
    dl.product-specs ol.spf > li.spf-36,
    dl.product-specs ol.spf > li.spf-37,
    dl.product-specs ol.spf > li.spf-38,
    dl.product-specs ol.spf > li.spf-39,
    dl.product-specs ol.spf > li.spf-40,
    dl.product-specs ol.spf > li.spf-41,
    dl.product-specs ol.spf > li.spf-42,
    dl.product-specs ol.spf > li.spf-43,
    dl.product-specs ol.spf > li.spf-44,
    dl.product-specs ol.spf > li.spf-45,
    dl.product-specs ol.spf > li.spf-46,
    dl.product-specs ol.spf > li.spf-47,
    dl.product-specs ol.spf > li.spf-48,
    dl.product-specs ol.spf > li.spf-49,
    dl.product-specs ol.spf > li.spf-50 {
        background-image: url(../img/product-info/spf-30-50.png);
    }

    dl.product-specs ol.spf > li.spf-50-plus,
    dl.product-specs ol.spf > li.spf-30-plus,
    dl.product-specs ol.spf > li.spf-60,
    dl.product-specs ol.spf > li.spf-70 {
        background-image: url(../img/product-info/spf-50-plus.png);
    }


/* FAQ ---------------------------------------------------------------------- */

dl.faq {
    margin: 1em 0 0 0;
}

    dl.faq dt {
        display: block;
        width: 100%; /* IE fix */
        min-height: 13px;
        padding: .8em 0;
        color: #666;
        font-size: .9em;
        text-transform: uppercase;
        border-top: 1px dotted #666;
        cursor: pointer;
        background: url(../img/presentation/arrow-right-medium-lightblue.png) no-repeat right center;
    }

        dl.faq dt span.index {
            float: left;
            color: #6999CA;
            width: 3em;
        }

        dl.faq dt span.heading {
            display: block;
            overflow: hidden;
            margin: 0 30px 0 0;
        }

        dl.faq dt.active {
            background: url(../img/presentation/arrow-down-medium-circle-trans.png) no-repeat right center;
        }

        dl.faq dt:hover {
            color: #273C69;
        }

        dl.faq dt:first-child {
            border: 0;
        }

    dl.faq dd {
        margin: 0 0 0 3em;
        padding: 0 0 .8em;
    }

    dl.faq dt.active + dd {
        display: block;
    }

.faq dt .sub-heading {
    display: block;
    font-size: 12px;
    font-family: NiveaLight, Arial, Helvetica, sans-serif;
    line-height: 17px;
    padding: 0 61px 0 41px;
    margin-top: 4px;
}


/* Modal overlay ------------------------------------------------------------ */

.simplemodal-overlay {
    /*	background: #0D297D;*/
    background: #fff;
}


/* Print stuff -------------------------------------------------------------- */

.media-print {
    display: none;
}


/* Nonvisual stuff */

.offscreen {
    position: absolute;
    left: -9999px;
}



/* PAGE TYPE OVERRIDES ====================================================== */

/* horizon placement */

html[data-page-type="ContentRoot"] #introduction-component-wrapper + div,
html[data-page-type="ConditionsOfUse"] #introduction-component-wrapper + div,
html[data-page-type="Imprint"] #introduction-component-wrapper + div,
html[data-page-type="Beiersdorf"] #introduction-component-wrapper + div,
html[data-page-type="Sustainability"] #introduction-component-wrapper + div,
html[data-page-type="LegalPolicy"] #introduction-component-wrapper + div,
html[data-page-type="Career"] #introduction-component-wrapper + div,
html[data-page-type="Topic"] #introduction-component-wrapper + div,
html[data-page-type="experienceIndex"] #introduction-component-wrapper + div,
html[data-page-type="PlanLanding"] #introduction-component-wrapper + div,
html[data-page-type="SurroundingPage"] #container-wrapper + div,
html[data-page-type="Page Not Found"] #error-wrapper + div,
html[data-page-type="product"] #product-stage-top-wrapper + div,
html[data-page-type="productsOverview"] #product-stage-top-wrapper + div,
html[data-page-type="landing"] #landing-stage-top-wrapper + div,
html[data-page-type="searchResults"] #small-teasers-wrapper,
html[data-page-type="searchResultsCategory"] #small-teasers-wrapper,
html[data-page-type="productSet"] #small-teasers-wrapper,
html[data-page-type="productRange"] #small-teasers-wrapper,
html[data-page-type="parentRange"] #small-teasers-wrapper,
html[data-page-type="subRange"] #small-teasers-wrapper,
html[data-page-type="productCategory"] #product-stage-top-wrapper + div,
html[data-page-type="facetValue"] #small-teasers-wrapper {
    background: url(../img/presentation/horizon.png) repeat-x;
}



/* FRAME ==================================================================== */

#outer {
    background: url(../img/presentation/page-shadow.png) repeat-y center;
}

    #outer > div > div { /* generically selects main building blocks within their wrappers, e.g. div#header-wrapper > div#header */
        width: 984px;
        margin: 0 auto;
    }



/* GRID ===================================================================== */

#header {
    width: 929px !important; /* override for main building blocks that need padding: 984 - (2*30) */
    padding: 15px 30px 10px 25px;
}

#small-teasers,
#fat-footer,
#footer,
.pagination,
#language-select-header,
#language-select-main,
#product-lineup .listing,
#product-lineup h1,
#product-lineup .header,
#product-stage-top,
#product-stage-bottom,
#landing-stage-top,
#landing-stage-bottom,
#error,
#experience-index,
#campaign,
#campaign-bottom {
    padding: 30px;
}

#small-teasers,
#fat-footer,
#footer,
#language-select-header,
#language-select-main,
#product-stage-top,
#product-stage-bottom,
#landing-stage-top,
#landing-stage-bottom,
#error,
#experience-index,
#campaign,
#campaign-bottom,
.thank-you-message {
    width: 924px !important; /* override for main building blocks that need padding: 984 - (2*30) */
}

    #header:after,
    #header .secondary-nav:after,
    #introduction-component:after,
    #small-teasers:after,
    #fat-footer:after,
    #footer:after,
    #experience-index:after,
    .pagination:after,
    .tabcontainer:after,
    .two-col:after,
    #language-select-header:after,
    #language-select-main:after,
    #primary-menu > li > div > div:after,
    #landing-stage-bottom:after,
    #product-stage-bottom:after,
    #container:after,
    #error:after,
    .product-details-wrapper:after,
    .product-gallery .gallery li > ul > li > div:after,
    .product-gallery .gallery li > ul:after,
    #campaign:after,
    #campaign-bottom:after,
    .template-block:after,
    .template-section:after,
    .thank-you-message:after { /* float contain for modern browsers, IE is taken care of in ie7.css */
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }



/* HEADER =================================================================== */

#header {
    background: #000b7e url(../img/presentation/header-bg.png) repeat-x 0 0;
    position: relative;
    z-index: 990;
    zoom: 1;
}

/* Fullwidth header */

.fullwidth #header {
    background: none;
    /*padding-left: 0;
	padding-right: 0;
	width: 984px !important;*/
}


.fullwidth #header-wrapper {
    background: #000b7e url(../img/presentation/header-bg.png) repeat-x 0 0;
    position: relative;
    z-index: 990;
    zoom: 1;
}


#header-wrapper {
    z-index: 990;
}

/**/

#header .branding {
    float: left;
    max-width: 260px;
    height: 80px;
    overflow: hidden;
    display: inline-block;
}

    #header .branding img {
        vertical-align: bottom;
    }

/**/

#header .secondary-nav {
    margin: 0 -24px 0 0;
    position: relative;
    text-align: right;
    float: right;
    z-index: 100;
}

#secondary-menu {
    /*	margin: -20px -24px 0 0;  top: whatever makes it look good, right: `padding-right` value of LIs and As */
    margin: 0;
    font-size: .9em;
    font-weight: bold;
    text-align: right;
    position: relative;
    display: inline-block;
    float: right;
    z-index: 100;
}

    #secondary-menu img { /* flag images */
        margin: 0 5px 0 0;
        vertical-align: middle;
    }

    #secondary-menu > li {
        display: inline-block;
        padding: 9px 8px 0;
        vertical-align: middle;
        z-index: 20;
        background: url(../img/presentation/divider-small.png) no-repeat left 2em;
    }

        #secondary-menu > li:first-child {
            background: none;
        }

        #secondary-menu > li[aria-haspopup="true"]:hover,
        #secondary-menu > li[aria-haspopup="true"].hover {
            /*	background: #396EAC;*/
        }

        #secondary-menu > li > a {
            display: inline-block;
            padding: .5em 6px;
        }

        #secondary-menu > li[aria-haspopup="true"] > a > span {
            padding-right: 15px;
            background: url(../img/presentation/arrow-down-small-white.png) no-repeat right center;
        }

        #secondary-menu > li > div {
            width: 180px;
            top: 2.5em !important;
            /*	background: #396EAC;*/
            text-align: left;
        }

            #secondary-menu > li > div > div > ul > li {
                margin: 0 0 .6em 0;
            }

                #secondary-menu > li > div > div > ul > li.international {
                    margin: .6em 0 0;
                    padding: .6em 15px 0 0;
                    border-top: 1px dotted #4075CC;
                    /*	text-align: right;*/
                    background: url(../img/presentation/arrow-right-small-white.png) no-repeat right 1.1em;
                }

                    #secondary-menu > li > div > div > ul > li.international:first-child {
                        margin: 0;
                        padding: 0 15px 0 0;
                        border: 0;
                        background-position: right center;
                    }

/**/

#nav {
    margin: 5px -17px -10px;
    text-align: right;
}

/**/

#primary-menu {
    display: inline-block;
    margin: 0;
    padding: 0;
    min-width: 663px;
    word-wrap: break-word;
}

    #primary-menu > li > a {
        display: inline-block;
        height: 1.5em;
        padding: .3em 8px;
        text-transform: uppercase;
        font-size: 1.2em;
        /*	text-shadow: 0 0 6px rgba(0, 0, 0, .3);*/ /* fucks up chrome */
    }

html[data-page-type="ContentRoot"] #primary-menu > li > a {
    color: #fff;
}

#primary-menu > li {
    display: inline-block;
    margin: 0;
    padding: 9px 9px 0;
    z-index: 10;
    vertical-align: middle;
    position: relative;
    z-index: 10;
    /* pos rel and z-index: used to elevate the main LIs above the dropdowns — otherwise, the dropdown decoration overlaps these LIs and makes them un-hoverable until the dropdown is closed. */
}

    #primary-menu > li.active > a {
        color: #fff;
    }

#primary-menu > [aria-haspopup="true"]:hover,
#primary-menu > [aria-haspopup="true"].hover,
#secondary-menu > [aria-haspopup="true"]:hover,
#secondary-menu > [aria-haspopup="true"].hover {
    z-index: 5;
    /* the hovered LI will need to be positioned below the non-hovered LIs; also see comment above */
}

    #primary-menu > [aria-haspopup="true"]:hover > a,
    #primary-menu > [aria-haspopup="true"].hover > a,
    #secondary-menu > [aria-haspopup="true"]:hover > a,
    #secondary-menu > [aria-haspopup="true"].hover > a {
        border-color: #728AB6;
        background: #2E5C9E;
        color: #fff;
        outline: 0;
    }

html[data-disable-overlays="true"] #primary-menu > [aria-haspopup="true"]:hover > a,
html[data-disable-overlays="true"] #primary-menu > [aria-haspopup="true"].hover > a {
    border: 0;
    background: none;
    color: #fff;
    outline: 0;
}

#primary-menu > li.last {
    margin: 0;
}

/* dropdowns */

#primary-menu > li > div,
#secondary-menu > li > div {
    top: 2.5em;
    margin: 0;
    padding: 9px;
    text-align: left;
    z-index: -1;
}

    #primary-menu > li > div > div,
    #secondary-menu > li > div > div {
        padding: 15px;
        white-space: nowrap;
        background: #1A3D86 url(../img/presentation/dropdown-bg.png) repeat-x top center;
    }

        /* make columns */
        #primary-menu > li > div > div ul {
            width: 135px;
            display: inline-block;
            vertical-align: top;
            margin: 0 0 0 20px;
        }

        #primary-menu > li > div > div > * {
            white-space: normal;
        }

        #primary-menu > li > div > div ul:first-child,
        #primary-menu > li > div > div h3:first-child + ul {
            margin: 0;
        }

    #primary-menu > li > div li {
        overflow: hidden;
    }

        #primary-menu > li > div li > a {
            width: 135px;
            float: left;
        }

    /*OVERRIDE "stylized" class for inner dropdown*/
    #primary-menu > li > div > div > ul > li a {
        color: #C3D3EE;
    }

    /**/

    #primary-menu > li > div h3 {
        margin: 0 0 10px 0;
        color: #85AAD7;
    }

/* tab & dropdown decoration */

#primary-menu [class*="decoration-"],
#secondary-menu [class*="decoration-"] {
    display: none;
}

#primary-menu > li:hover [class*="decoration-"],
#primary-menu > li.hover [class*="decoration-"],
#secondary-menu > li:hover [class*="decoration-"],
#secondary-menu > li.hover [class*="decoration-"] {
    display: block;
}

html[data-disable-overlays="true"] #primary-menu > li:hover [class*="decoration-"],
html[data-disable-overlays="true"] #primary-menu > li.hover [class*="decoration-"] {
    display: none;
}

#primary-menu > li:hover > .decoration-e,
#primary-menu > li.hover > .decoration-e,
#primary-menu > li:hover > .decoration-w,
#primary-menu > li.hover > .decoration-w,
#secondary-menu > li:hover > .decoration-e,
#secondary-menu > li.hover > .decoration-e,
#secondary-menu > li:hover > .decoration-w,
#secondary-menu > li.hover > .decoration-w {
    bottom: 1px;
}

#primary-menu > li .wrapper,
#primary-menu > li .wrapper > * {
    width: 135px;
}

/* submenus with "promo" column */

#primary-menu > li.has-promo .wrapper {
    width: 293px;
    padding: 15px;
    white-space: nowrap;
    background: url(../img/presentation/dropdown-teaser-bg.png) repeat-y right center;
}
/* no-promo */
#primary-menu > li.has-promo .no-promo {
    background: none !important;
}

#primary-menu > li.products .no-promo {
    width: 450px !important;
}
/******/
#primary-menu > li.has-promo .wrapper > * {
    display: inline-block;
    vertical-align: top;
    white-space: normal;
}

#primary-menu > li.has-promo > div > div {
    padding: 0;
    width: auto;
}

#primary-menu > li div.promo,
#primary-menu > li div.promo a,
#primary-menu > li div.promo h3 {
    color: #21498F;
}

#primary-menu > li div.promo {
    width: 123px;
    margin: 0 0 0 35px;
}

    #primary-menu > li div.promo > div {
        padding: 0;
        background: none;
    }

        #primary-menu > li div.promo > div > a {
            padding: 0 0 20px 0;
            display: block;
            background: url(../img/presentation/arrow-right-medium-circle-dark.png) no-repeat bottom right;
        }


/* "products" submenu */
#primary-menu > li.products.hover > div,
#primary-menu > li.products:hover > div {
    /*left: -430px;*/
}

/* last submenu */
#primary-menu > li.item-last.hover > div,
#primary-menu > li.item-last:hover > div {
    left: auto;
    right: 0;
}

html[data-disable-overlays="true"] #primary-menu > li.hover > div,
html[data-disable-overlays="true"] #primary-menu > li:hover > div {
    left: -9999px;
    right: auto;
}

#primary-menu > li.products > div > div ul {
    margin: 0;
}

#primary-menu > li.products .wrapper {
    width: 603px;
}

    #primary-menu > li.products .wrapper > div {
        display: inline-block;
        vertical-align: top;
    }

#primary-menu > li.products div.categories {
    width: 310px;
}

    #primary-menu > li.products div.categories > ul {
        margin: 0 20px 0 0;
    }

#primary-menu > li.products div.highlights {
    width: 135px;
}

/* search */
#search {
    display: inline-block;
    text-align: right;
    margin: 9px 24px 0 0;
    vertical-align: middle;
    float: right;
}

    #search label {
        position: absolute;
        left: -9999%;
    }

    #search input {
        width: 135px;
    }

        #search [type="submit"],
        #search input[type="button"] { /* Lucene... */
            background: url(/img/presentation/search-icon.png) no-repeat top left;
            border: none;
            width: 17px;
            height: 17px;
            margin-left: 1px;
            cursor: pointer;
            /*display:none;*/
        }



/* BREADCRUMBS ============================================================== */

#breadcrumbs-wrapper {
    position: absolute;
    width: 984px;
    left: 50%;
    margin: 0 0 0 -492px !important;
    z-index: 985;
}

#breadcrumbs {
    line-height: 1;
    position: relative;
    top: -1px;
    width: 984px;
}

    #breadcrumbs ul {
        font-size: 1.1em;
        white-space: nowrap;
        overflow: hidden;
        height: 24px;
    }

        #breadcrumbs ul * {
            vertical-align: top;
            display: inline-block;
        }

        #breadcrumbs ul > li {
            margin: 0 0 0 -10px;
            padding: 0 0 0 10px;
            height: 24px;
            display: inline-block;
        }

            #breadcrumbs ul > li:first-child {
                margin-left: 0;
                padding-left: 0;
                background: none !important;
            }

                #breadcrumbs ul > li:first-child a > span {
                    padding-left: 15px;
                    background: url(../img/presentation/arrow-left-small-white.png) no-repeat left center;
                }

            #breadcrumbs ul > li > span {
                padding: 0 10px 0 0;
                height: 24px;
            }

                #breadcrumbs ul > li > span > a {
                    height: 24px;
                    padding: 7px 10px;
                }


                    #breadcrumbs ul > li > span > a[href] {
                        color: #C3D3EE;
                    }

                    #breadcrumbs ul > li > span > a > span {
                        background: none;
                        text-transform: uppercase;
                    }

                    #breadcrumbs ul > li > span > a[href]:hover,
                    #breadcrumbs ul > li > span > a[href]:active,
                    #breadcrumbs ul > li > span > a[href]:focus {
                        color: #fff;
                        outline: 0;
                    }

        #breadcrumbs ul * {
            background: url(../img/presentation/breadcrumbs-sprite.png) no-repeat;
        }

        /* LIs */
        #breadcrumbs ul > li.level-8 {
            background-position: left -480px;
        }

        #breadcrumbs ul > li.level-7 {
            background-position: left -408px;
        }

        #breadcrumbs ul > li.level-6 {
            background-position: left -336px;
        }

        #breadcrumbs ul > li.level-5 {
            background-position: left -264px;
        }

        #breadcrumbs ul > li.level-4 {
            background-position: left -192px;
        }

        #breadcrumbs ul > li.level-3 {
            background-position: left -120px;
        }

        #breadcrumbs ul > li.level-2 {
            background-position: left -48px;
        }

        #breadcrumbs ul > li.level-1 {
            background-position: left 24px; /* doesn't exist */
        }

        /* SPANs */
        #breadcrumbs ul > li.level-8 > span {
            background-position: right -528px; /* doesn't exist */
        }

        #breadcrumbs ul > li.level-7 > span {
            background-position: right -456px;
        }

        #breadcrumbs ul > li.level-6 > span {
            background-position: right -384px;
        }

        #breadcrumbs ul > li.level-5 > span {
            background-position: right -312px;
        }

        #breadcrumbs ul > li.level-4 > span {
            background-position: right -240px;
        }

        #breadcrumbs ul > li.level-3 > span {
            background-position: right -168px;
        }

        #breadcrumbs ul > li.level-2 > span {
            background-position: right -96px;
        }

        #breadcrumbs ul > li.level-1 > span {
            background-position: right -24px;
        }

        /* Anchors */
        #breadcrumbs ul > li > span > a {
            background-repeat: repeat-x;
        }

        #breadcrumbs ul > li.level-8 > span > a {
            background-position: left -504px;
        }

        #breadcrumbs ul > li.level-7 > span > a {
            background-position: left -432px;
        }

        #breadcrumbs ul > li.level-6 > span > a {
            background-position: left -360px;
        }

        #breadcrumbs ul > li.level-5 > span > a {
            background-position: left -288px;
        }

        #breadcrumbs ul > li.level-4 > span > a {
            background-position: left -216px;
        }

        #breadcrumbs ul > li.level-3 > span > a {
            background-position: left -144px;
        }

        #breadcrumbs ul > li.level-2 > span > a {
            background-position: left -72px;
        }

        #breadcrumbs ul > li.level-1 > span > a {
            background-position: left 0;
        }

    /* Shadow */

    #breadcrumbs .shadow.top {
        height: 8px;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: url(../img/presentation/breadcrumbs-shadow-top.png) repeat-x;
        z-index: 10;
    }

/* Fullwidth
   Hide shadow for now, it's hard to get it to go fullwidth */

.fullwidth #breadcrumbs .shadow.top {
    display: none;
}



/* FOOTER =================================================================== */

#footer {
    background: #000b7e url(../img/presentation/header-bg.png) repeat-x 0 0;
    padding-top: 5px;
    padding-bottom: 5px;
    overflow: hidden;
    position: relative;
}

/* Fullwidth */

.fullwidth #footer {
    background: none;
}

.fullwidth #footer-wrapper {
    background: #000b7e url(../img/presentation/header-bg.png) repeat-x 0 0;
}

/**/

#footer ul,
#footer li {
    margin: 0;
    padding: 0;
}

/**/

#footer .branding {
    float: left;
    margin: 0.5em 0;
    font-size: 1.1em;
}

    #footer .branding img {
        vertical-align: bottom;
    }

/**/

#footer-menu {
    text-align: right;
    font-size: .9em;
    font-weight: bold;
}

    #footer-menu > li {
        display: inline-block;
        line-height: 21px; /* height of BDF logo */
        margin: 0 0 0 1em;
        padding: .5em 0 .5em 1.5em;
        background: url(../img/presentation/divider-small.png) no-repeat left center;
    }

        #footer-menu > li:first-child {
            margin-left: 0;
            padding-left: 0;
            background: none;
        }



/* FAT FOOTER =============================================================== */

#fat-footer {
    background: #C0D1EE;
    color: #273c69;
    position: relative; /* for social-bookmarks positioning */
    min-height: 12em;
}

/* Fullwidth */

.fullwidth #fat-footer-wrapper {
    background: #C0D1EE;
}

.fullwidth #fat-footer {
    background: none;
}

/**/

#fat-footer a {
    color: #273c69;
}

    #fat-footer a:hover,
    #fat-footer a:focus,
    #fat-footer a:active {
        color: #000;
        outline: 0;
    }

#fat-footer h3,
#fat-footer h4,
#fat-footer ul,
#fat-footer li {
    margin: 0;
    padding: 0;
}

#fat-footer h3 {
    margin: 0 0 10px 0;
}

#fat-footer .footer-navigation > div {
    float: left;
    width: 293px;
    margin: 0 0 0 19px;
}

    #fat-footer .footer-navigation > div:first-child {
        margin: 0;
    }

    #fat-footer .footer-navigation > div.categories ul {
        float: left;
        width: 49%; /* to prevent running into rounding issues (IE, Opera), don't specify 50% */
    }

    /* newsletter signup */

    #fat-footer .footer-navigation > div.social #newsletter-signup {
        height: 53px;
        padding: 0 10px;
        background: #D1DEF2;
        overflow: hidden;
    }

        #fat-footer .footer-navigation > div.social #newsletter-signup img {
            float: left;
            display: block;
            margin: 0 10px 0 0;
            vertical-align: bottom;
        }

        #fat-footer .footer-navigation > div.social #newsletter-signup h4 {
            margin: 4px 0 5px 0;
        }

            /*for regions (ASIAN) using Flir to substitute the input label text*/
            #fat-footer .footer-navigation > div.social #newsletter-signup h4.flir-replaced {
                float: left !important;
                display: inline-block !important;
                margin: 4px 0 5px 0 !important;
                width: 150px;
            }

        #fat-footer .footer-navigation > div.social #newsletter-signup form {
            width: 100%;
        }

        #fat-footer .footer-navigation > div.social #newsletter-signup label {
            position: absolute;
            left: -9999%;
        }

        #fat-footer .footer-navigation > div.social #newsletter-signup input[type="text"] {
            width: 135px;
            height: 11px;
            padding: 2px;
            border: 1px inset #ccc;
        }

        #fat-footer .footer-navigation > div.social #newsletter-signup input[type="button"] {
            background: url(/img/presentation/button-go.png) no-repeat;
            border: 0;
            width: 17px;
            height: 17px;
            cursor: pointer;
        }

        #fat-footer .footer-navigation > div.social #newsletter-signup input {
            float: left;
        }

    /* follow nivea on the web */

    #fat-footer .footer-navigation > div.social #social-bookmarks,
    .social-bookmarks {
        margin: 1em 0 0;
        font-weight: bold;
        font-size: 1.1em;
        line-height: 28px;
        position: absolute;
        bottom: 30px;
        right: 35px;
        width: 293px;
    }

    #fat-footer .footer-navigation > div.social #social-bookmarks {
        bottom: 0px;
        right: 0px;
    }

#fat-footer > .footer-navigation {
    position: relative;
    min-height: 12em;
}

#fat-footer .footer-navigation > .clear {
    clear: both;
    float: none;
}

#fat-footer .search-engine {
    padding-top: 15px;
}

#fat-footer .footer-navigation > div.social #social-bookmarks .text,
.social-bookmarks .text {
    float: left;
    height: 20px;
    position: relative;
    width: 293px;
    text-align: right;
    margin-bottom: 10px;
}

    #fat-footer .footer-navigation > div.social #social-bookmarks .text > span,
    .social-bookmarks .text > span {
        line-height: normal;
    }

#fat-footer .footer-navigation > div.social #social-bookmarks .share,
.social-bookmarks .share {
    float: right;
}

    #fat-footer .footer-navigation > div.social #social-bookmarks .share a > img,
    .social-bookmarks .share a > img {
        vertical-align: bottom;
        max-width: 28px;
        max-height: 28px;
    }



/* INTRODUCTION COMPONENT =================================================== */

#introduction-component {
    height: 436px;
    position: relative;
    background: #2D5A9D;
    z-index: 15;
    /*	overflow: hidden;*/
}

/* Nivea and Plan Landing (Reduced height hero) */

.plan.plan-landing #introduction-component {
    height: 369px;
}

#introduction-component img,
#introduction-component object,
#introduction-component embed,
#container img,
#container object,
#container embed {
    display: block;
}

#introduction-component-wrapper + div > div {
    z-index: 1;
}

/* variable height: <img> dictates height */

#introduction-component.variable-height {
    height: auto;
    overflow: hidden;
}

/* widget */

#introduction-component .widget {
    overflow: hidden;
    position: relative;
    height: 100%;
}

/* controls */

#introduction-component .controls {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -83px;
    z-index: 10;
    display: none;
}

    #introduction-component .controls .background {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 64px;
        background: #275296;
        opacity: .2;
    }

    #introduction-component .controls ul {
        position: absolute;
        left: 0;
        top: 0;
        width: 64px;
    }

        #introduction-component .controls ul > li {
            padding: 5px;
            height: 39px;
            position: relative;
            outline: 0;
        }

            #introduction-component .controls ul > li > div {
                position: absolute;
                top: 0;
                left: 0;
                width: 64px;
                height: 53px;
                opacity: .4;
                cursor: pointer;
                background: url(../img/presentation/introduction-component-bg.png) repeat-x;
            }

                #introduction-component .controls ul > li > div > div {
                    position: absolute;
                    top: 5px;
                    left: 5px;
                    width: 54px;
                    height: 39px;
                    overflow: hidden;
                }

            #introduction-component .controls ul > li.active > div /*,
#introduction-component .controls ul > li:hover > div*/ {
                width: 83px;
                opacity: 1;
                background: url(../img/presentation/introduction-component-bg-active.png) no-repeat;
            }

                #introduction-component .controls ul > li.active > div > div /*,
#introduction-component .controls ul > li:hover > div > div*/ {
                    overflow: visible;
                }

.tooltip.intro,
.tooltip.intro span {
    display: inline-block;
    line-height: 25px;
    height: 29px;
}

.tooltip.intro {
    color: #273C69;
    font-size: .9em;
    z-index: 100;
    margin-left: -11px;
    padding-left: 10px;
    background: url(../img/presentation/introduction-component-tooltip-sprite.png) no-repeat 0 0;
}

    .tooltip.intro > span {
        padding-right: 10px;
        background: url(../img/presentation/introduction-component-tooltip-sprite.png) no-repeat right -29px;
    }

        .tooltip.intro > span > span {
            text-transform: uppercase;
            background: url(../img/presentation/introduction-component-tooltip-sprite.png) repeat-x 0 -58px;
        }

/* content */

#introduction-component .content {
    position: relative;
    width: 100%;
    height: 100%;
}

    #introduction-component .content > li {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    #introduction-component .content img {
        display: block;
    }

    #introduction-component .content .customflash object {
        position: absolute;
        top: 0;
        left: 0;
    }

/* overlay */

#introduction-component .loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: url(../img/presentation/throbber.gif) no-repeat center;
}

/* experience nivea */

#introduction-component .experience-nivea {
    float: left;
    width: 327px;
    height: 100%;
    text-align: center;
    background: url(../img/presentation/nivea-button-bg-small.png) no-repeat;
}

    #introduction-component .experience-nivea h1 {
        font-size: 1.7em;
    }

    #introduction-component .experience-nivea .subtitle {
        font-size: 1.7em;
        margin: 0 0 .5em;
    }

    #introduction-component .experience-nivea > div {
        padding: 125px 60px 0;
    }

/* Content templates -------------------------------------------------------- */

#introduction-component .main {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#introduction-component .header h1,
#introduction-component .header h2,
#introduction-component .header h3,
#introduction-component .header h4,
#introduction-component .header h5,
#introduction-component .header h6,
#introduction-component .header .subtitle {
    font-size: 2.8em;
}


#introduction-component .widget .main {
    height: 100%;
    position: relative;
    float: left;
}

#introduction-component .main .header {
    position: absolute;
    color: #273C69;
    top: 50px;
    left: 50px;
    width: 315px;
    top: 50px;
    left: 50px;
    color: #273C69;
}

html[data-page-type="GeneralAnnouncement"] #introduction-component .main .header h2,
html[data-page-type="GeneralAnnouncement"] #introduction-component .main .header .subtitle {
    font-size: 2.8em;
}

#introduction-component .main .social {
    position: absolute;
    left: 50px;
    bottom: 40px;
}

    #introduction-component .main .social > .title {
        color: #703D2A;
        font-weight: bold;
    }

    #introduction-component .main .social > ul {
        background: url(/img/presentation/divider-horiz-634.png) no-repeat top left;
        margin: 5px 0 0;
        padding: 5px 0 0;
    }

        #introduction-component .main .social > ul > li {
            display: inline-block;
            vertical-align: bottom;
            background: url(/img/presentation/divider-medium.png) no-repeat left center;
            padding: 0 0 0 1em;
        }

            #introduction-component .main .social > ul > li:first-child {
                background: none;
                padding: 0;
            }

    #introduction-component .main .social .social-bookmarks {
        position: static;
        width: auto;
        margin: 0;
        color: #273C69;
    }

        #introduction-component .main .social .social-bookmarks .text,
        #introduction-component .main .social .social-bookmarks .share {
            width: auto;
            float: none;
            display: inline-block;
            vertical-align: middle;
            white-space: nowrap;
            margin: 0 1em 0 0;
        }

            #introduction-component .main .social .social-bookmarks .text span {
                position: static;
            }

            #introduction-component .main .social .social-bookmarks .share img {
                display: inline;
            }

/* header positioning presets */

#introduction-component .main .header.top-left {
    top: 50px;
    left: 110px;
    bottom: auto !important;
    right: auto !important;
}

#introduction-component .main .header.top-right {
    top: 50px;
    right: 50px;
    bottom: auto !important;
    left: auto !important;
}

#introduction-component .main .header.bottom-left {
    bottom: 50px;
    left: 110px;
    top: auto !important;
    right: auto !important;
}

.plan #introduction-component .main .header.bottom-left { /* Nivea and Plan override */
    left: 50px;
}

#introduction-component .main .header.bottom-right {
    bottom: 50px;
    right: 50px;
    top: auto !important;
    left: auto !important;
}

html[data-page-type="experienceIndex"] #introduction-component .main .header.top-left,
html[data-page-type="experienceIndex"] #introduction-component .main .header.top-right {
    top: 30px;
}

html[data-page-type="experienceIndex"] #introduction-component .main .header.bottom-left,
html[data-page-type="experienceIndex"] #introduction-component .main .header.bottom-right {
    bottom: 30px;
}

html[data-page-type="experienceIndex"] #introduction-component .main .header.top-left,
html[data-page-type="experienceIndex"] #introduction-component .main .header.bottom-left {
    left: 90px;
}

html[data-page-type="experienceIndex"] #introduction-component .main .header.top-right,
html[data-page-type="experienceIndex"] #introduction-component .main .header.bottom-right {
    right: 30px;
}

html[data-page-type="productSet"] #introduction-component .main .header.top-left,
html[data-page-type="productSet"] #introduction-component .main .header.bottom-left,
html[data-page-type="productRange"] #introduction-component .main .header.top-left,
html[data-page-type="productRange"] #introduction-component .main .header.bottom-left,
html[data-page-type="parentRange"] #introduction-component .main .header.top-left,
html[data-page-type="parentRange"] #introduction-component .main .header.bottom-left,
html[data-page-type="subRange"] #introduction-component .main .header.top-left,
html[data-page-type="subRange"] #introduction-component .main .header.bottom-left,
html[data-page-type="Topic"] #introduction-component .main .header.top-left,
html[data-page-type="Topic"] #introduction-component .main .header.bottom-left {
    left: 50px;
}

html[data-page-type="productSet"] #introduction-component .main .header.top-right,
html[data-page-type="productSet"] #introduction-component .main .header.bottom-right,
html[data-page-type="productRange"] #introduction-component .main .header.top-right,
html[data-page-type="productRange"] #introduction-component .main .header.bottom-right,
html[data-page-type="parentRange"] #introduction-component .main .header.top-right,
html[data-page-type="parentRange"] #introduction-component .main .header.bottom-right,
html[data-page-type="subRange"] #introduction-component .main .header.top-right,
html[data-page-type="subRange"] #introduction-component .main .header.bottom-right,
html[data-page-type="Topic"] #introduction-component .main .header.top-right,
html[data-page-type="Topic"] #introduction-component .main .header.bottom-right {
    right: 50px;
}

#introduction-component .main .header.top-right .learn-more,
#introduction-component .main .header.bottom-right .learn-more {
    float: right;
}

/* header color presets */

#introduction-component .header.white {
    color: #fff;
}

#introduction-component .header.blue {
    color: #00136F;
}

/**/

#introduction-component .main .header p {
    font-size: 1.1em;
}

#introduction-component .main .header h2, #introduction-component .main .header h1,
#introduction-component .main .header .subtitle {
    font-size: 2.5em;
}

#introduction-component .main .header h2, #introduction-component .main .header h1 {
    margin: .5em 0 0;
}

#introduction-component .main .header .subtitle {
    margin: 0 0 .5em 0;
    display: block;
    font-weight: normal;
}

#introduction-component .main .header .learn-more {
    margin: 1em 0 0 -6px;
    zoom: 1;
}

    #introduction-component .main .header .learn-more.big {
        margin: 1em 0 0 -9px;
    }

#introduction-component .main .logo {
    position: absolute;
    /* stuff below may be overridden by inline styles */
    left: 50px;
    bottom: 0;
}

#introduction-component .side {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: url(../img/presentation/introduction-component-template-button-bg.png) no-repeat;
}

    #introduction-component .side .header {
        text-align: center;
        padding: 120px 70px 0;
    }

        #introduction-component .side .header h2,
        #introduction-component .side .header .subtitle {
            font-size: 1.7em;
        }

        #introduction-component .side .header .subtitle {
            margin: 0 0 .5em 0;
        }

    #introduction-component .side .packshot {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
    }

        #introduction-component .side .packshot img {
            display: inline-block;
        }

    #introduction-component .side div.more {
        position: absolute;
        bottom: 15px;
        left: 0;
        right: 0;
        text-align: center;
    }

#introduction-component .teaser {
    position: absolute;
    right: 30px;
    top: 30px;
}

#introduction-component .menu {
    float: none;
    left: 30px;
    top: 60px;
    margin: 0;
}

#introduction-component .widget .menu {
    position: absolute;
    bottom: 30px;
    left: 30px;
    top: auto;
    right: auto;
}

/* browse range */

#introduction-component .browse-range {
    bottom: 30px !important;
}

/* page overrides */

html[data-page-type="productSet"] #introduction-component .menu {
    bottom: 30px;
    left: 40px;
    top: auto;
    position: absolute;
}

html[data-page-type="Beiersdorf"] #introduction-component .header {
    /*	left: 260px;*/
}





/* SMALL TEASERS ============================================================ */

#small-teasers {
    background: #fff url(../img/presentation/fat-footer-shadow.png) repeat-x center bottom;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
}

    #small-teasers ul,
    #small-teasers li,
    #small-teasers h3,
    #small-teasers p {
        margin: 0;
        padding: 0;
    }

    #small-teasers li {
        display: inline-block;
        width: 211px;
        margin: 0 26px 0 0;
        vertical-align: top;
    }

    #small-teasers h3 {
        min-height: 13px;
        margin: 10px 0 5px 0;
        padding: 0 15px 0 0;
        background: url(../img/presentation/arrow-right-medium-circle.png) no-repeat right top;
        color: #273c69;
    }

    #small-teasers a {
        display: block;
        color: #000;
        white-space: normal;
    }

    /* carousel stuff */

    #small-teasers .jcarousel-next,
    #small-teasers .jcarousel-prev {
        position: absolute;
        background: url(../img/presentation/carousel-sprite.png) no-repeat;
        width: 40px;
        height: 81px;
        top: 20px;
        cursor: pointer;
    }

    #small-teasers .jcarousel-list.jcarousel-list-horizontal {
        display: inline-block;
    }

    #small-teasers .jcarousel-prev {
        background-position: 0 0;
        left: -20px;
    }

    #small-teasers .jcarousel-prev-disabled {
        background-position: 0 -81px;
        cursor: default;
    }

    #small-teasers .jcarousel-next {
        background-position: -40px 0;
        right: -20px;
    }

    #small-teasers .jcarousel-next-disabled {
        background-position: -40px -81px;
        cursor: default;
    }


/* LANGUAGE SELECT PAGE ===================================================== */

/* NEW */

/* header */

#language-select-header {
    position: relative;
    overflow: hidden;
    height: 369px;
    color: #0A2C7B;
    background: url(/img/presentation/language-select-header.jpg) no-repeat;
}

    #language-select-header span.branding {
        padding-left: 28px;
    }

    #language-select-header .header {
        position: absolute;
        top: 120px;
        left: 60px;
        width: 350px;
    }

        #language-select-header .header.white {
            color: #fff;
        }

        #language-select-header .header h1 {
            font-size: 2.5em;
            padding: 0 0 0.25em;
        }

        #language-select-header .header h2 {
            font-size: 1.8em;
            font-weight: normal;
        }

        #language-select-header .header .international {
            margin: 25px 0 0;
            text-transform: uppercase;
        }

            #language-select-header .header .international a {
                color: #fff;
            }

        #language-select-header .header .languages {
            margin: 25px 0 0;
            width: 290px;
            font-size: 1.5em;
        }

            #language-select-header .header .languages li {
                padding: .5em 0;
            }

        #language-select-header .header.blue .languages li {
            border-top: 1px dotted #0a2c7b;
        }

        #language-select-header .header.white .languages li {
            border-top: 1px dotted #ddd;
        }

        #language-select-header .header .languages li a {
            text-transform: uppercase;
        }

        #language-select-header .header.blue .languages li a {
            color: #0a2c7b;
        }

        #language-select-header .header.white .languages li a {
            color: #fff;
        }

        #language-select-header .header .languages li:first-child {
            border: 0;
        }

        #language-select-header .header.blue .international a {
            text-decoration: underline;
            color: #0a2c7b;
        }

        #language-select-header .header.white .international a {
            text-decoration: underline;
            color: #fff;
        }


/* main */

#language-select-main-wrapper {
    background: url(../img/presentation/backgrounds/language-select-main.jpg) no-repeat bottom center;
}

#language-select-main {
    min-height: 440px;
    color: #fff;
    background: url(../img/presentation/backgrounds/language-select-map.png) no-repeat center;
}

    #language-select-main .column {
        margin: 0 0 0 25px;
        width: 200px;
        float: left;
        display: inline;
        font-weight: bold;
        font-size: 1.1em;
    }

        #language-select-main .column:first-child {
            margin-left: 0;
        }

        #language-select-main .column a {
            color: #fff;
        }

            #language-select-main .column a:hover,
            #language-select-main .column a:focus,
            #language-select-main .column a:active {
                color: #C3D3EE;
            }

        #language-select-main .column h2 {
            margin: 2em 0 .8em;
            font-size: 1.8em;
            font-weight: normal;
        }

            #language-select-main .column h2:first-child {
                margin-top: 0;
            }

        #language-select-main .column ol li {
            margin: .4em 0;
        }


/* PRODUCT RANGE =========================================================== */
#product-feature {
    display: block;
    width: 480px;
    height: 480px;
}

    #product-feature .jcarousel-control {
        /*position: absolute;*/
        z-index: 11;
        /*bottom: -50px;*/
        margin-top: -30px;
        width: 480px;
        text-align: center;
        position: relative;
    }

        #product-feature .jcarousel-control a {
            display: inline-block;
            margin: 6px;
            outline: none;
        }

        #product-feature .jcarousel-control span {
            background: transparent url(../img/presentation/icon-carousel-off.png) no-repeat 2px 2px;
            display: block;
            overflow: hidden;
            width: 14px;
            height: 14px;
            text-indent: -999em;
        }

        #product-feature .jcarousel-control a.hover span {
            background-image: url(../img/presentation/icon-carousel-hover.png);
        }

        #product-feature .jcarousel-control a.active span {
            background-image: url(../img/presentation/icon-carousel-active.png);
        }

        #product-feature .jcarousel-control a.active.hover span {
            background-image: url(../img/presentation/icon-carousel-hover.png);
        }

    #product-feature .jcarousel-container {
        width: 480px;
        height: 480px;
    }

        #product-feature .jcarousel-container .jcarousel-list {
            display: inline-block;
        }

    #product-feature li {
        position: relative;
        display: block;
        width: 480px;
        height: 480px;
    }

        #product-feature li > div, #product-feature li > div > a {
            display: block;
            position: absolute;
            z-index: 1;
            bottom: 0;
            left: 0;
            width: 480px;
        }

        #product-feature li .header {
            display: none;
        }

        #product-feature li > div > img, #product-feature li > div > a > img {
            margin: 0 auto;
            left: 0;
            right: 0;
        }

    #product-feature .jcarousel-prev.jcarousel-prev-horizontal {
        background: transparent url(../img/presentation/arrow-left-mega-white.png) no-repeat 0 0;
        position: absolute;
        top: 290px;
        left: 0px;
        z-index: 10;
        width: 22px;
        height: 43px;
        cursor: pointer;
    }

    #product-feature .jcarousel-next.jcarousel-next-horizontal {
        background: transparent url(../img/presentation/arrow-right-mega-white.png) no-repeat 0 0;
        position: absolute;
        top: 290px;
        right: 0px;
        z-index: 10;
        width: 22px;
        height: 43px;
        cursor: pointer;
    }

    #product-feature .carousel-mask-prev {
        background: transparent url(../img/presentation/product-overview-mask-left.png) no-repeat 0 0;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;
        width: 80px;
        height: 405px;
    }

    #product-feature .carousel-mask-next {
        background: transparent url(../img/presentation/product-overview-mask-right.png) no-repeat 0 0;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 2;
        width: 80px;
        height: 405px;
    }

    #product-feature .carousel-haze {
        margin: 0 auto;
        position: absolute;
        z-index: -1;
        left: -254px;
        top: 0px;
    }

    #product-feature .jcarousel-container .carousel-haze .product-haze {
        background-image: url(../img/presentation/bg-product-haze.png);
        margin: 0 auto;
    }
/* PRODUCT LINEUP =========================================================== */

#product-lineup {
    position: relative;
    z-index: 1;
    background: #3366A5 url(../img/presentation/product-lineup-gradient.png) repeat left 290px;
}

    #product-lineup .outer {
        background: url(../img/presentation/product-lineup-gradient-top.png) repeat-x left top;
        position: relative;
        z-index: 0;
    }

    #product-lineup .inner {
        /*	overflow: hidden;*/
        /*	background: url(../img/presentation/tree-menu-bg.png) no-repeat left 290px;*/ /* no longer needed? */
    }

/* overrides for "range" page */

html[data-page-type="productRange"] #product-lineup,
html[data-page-type="parentRange"] #product-lineup,
html[data-page-type="subRange"] #product-lineup {
    /*	background-image: url(../img/presentation/product-lineup-gradient-short.png);*/
    background-position: left 280px;
}

    html[data-page-type="productRange"] #product-lineup .outer,
    html[data-page-type="parentRange"] #product-lineup .outer,
    html[data-page-type="subRange"] #product-lineup .outer {
        /*	background-image: url(../img/presentation/product-lineup-gradient-top-short.png);*/
    }

    html[data-page-type="productRange"] #product-lineup .inner,
    html[data-page-type="parentRange"] #product-lineup .inner,
    html[data-page-type="subRange"] #product-lineup .inner {
        background: none;
    }

/* overrides for "set" page */

html[data-page-type="productSet"] #product-lineup {
    background-position: left 200px;
}

    html[data-page-type="productSet"] #product-lineup .outer {
        /*	background-image: url(../img/presentation/product-lineup-gradient-top-short.png);*/
        background-position: left -50px;
    }

    html[data-page-type="productSet"] #product-lineup .inner {
        background: none;
    }

/* header type 1 (facet, ...) */

#product-lineup .promo {
    position: absolute;
    right: 32px;
    top: 32px;
    width: 215px;
    height: 49px;
    line-height: 49px;
    overflow: hidden;
    text-align: right;
}

    #product-lineup .promo > img {
        position: absolute;
        left: 0;
        top: 0;
    }

    #product-lineup .promo > span {
        padding: 0 35px 0 0;
        position: relative;
        text-transform: uppercase;
        background: url(../img/presentation/arrow-right-medium-circle-dark.png) no-repeat 90% center;
    }

    #product-lineup .promo.blue > span {
        color: #0b2b7b;
    }

#product-lineup h1 {
    height: 30px;
    padding-bottom: 10px;
    padding-top: 40px;
    color: #7A9ED4;
}

    #product-lineup h1 .sub {
        color: #fff;
    }

    #product-lineup h1 .count {
        color: #416AA5;
    }

/* header type 2 (range, ...) */

#product-lineup .header {
    height: 30px;
    padding-bottom: 10px;
    padding-top: 40px;
    color: #C3D3EE;
}

    #product-lineup .header > .title {
        float: left;
    }

        #product-lineup .header > .title h2 {
            color: #fff;
        }

        #product-lineup .header > .title h2,
        #product-lineup .header > .title .product-count {
            display: inline-block;
            text-transform: uppercase;
        }

        #product-lineup .header > .title .product-count {
            margin: 0 0 0 1em;
        }

    #product-lineup .header > .find-store,
    #product-lineup .header > .buy-button {
        float: right;
    }

/* listing */

#product-lineup .listing {
    padding-top: 10px;
    padding-right: 0;
}

#product-lineup .section h3 {
    margin: 30px 0 5px;
    padding: 0 20px 0 0;
    min-height: 13px;
    background: url(../img/presentation/arrow-right-medium-circle.png) no-repeat right top;
}

#product-lineup .section > ul > li {
    float: left;
    width: 211px;
    padding: 0 26px 0 0;
    /*	border-top: 1px dotted #5173AA;*/
    background: url(../img/presentation/product-lineup-topbar-bg.png) repeat-x;
}

    #product-lineup .section > ul > li > div {
        height: 425px;
        margin: 0;
        overflow: hidden;
        position: relative;
    }

    #product-lineup .section > ul > li.edge > div {
        /*	border-top: 1px dotted #5173AA;*/
        background: url(../img/presentation/product-lineup-topbar-bg.png) repeat-x;
    }

    #product-lineup .section > ul > li.edge {
        border: 0;
        background: none;
    }

        #product-lineup .section > ul > li.edge.last > div {
            background: url(../img/presentation/product-lineup-topbar-bg-last.png) no-repeat right top;
        }

    #product-lineup .section > ul > li .type {
        visibility: hidden;
        height: 30px;
        margin: 0 0 10px 8px;
        line-height: 23px;
        font-size: 1.2em;
        text-transform: uppercase;
    }

    #product-lineup .section > ul > li:first-child .type {
        visibility: visible;
    }

    #product-lineup .section > ul > li.void,
    #product-lineup .section > ul > li.void > div {
        background: none !important;
    }

        #product-lineup .section > ul > li.void .type {
            visibility: hidden;
        }

    #product-lineup .section > ul > li .packshot {
        /*	margin: 35px 0 0;*/
        height: 190px;
        /*width: 100%; https://bravo.blastradius.com/browse/NIVEAG-444, setting explicit width - which we can do, luckily, seems to fix it */
        width: 211px;
        text-align: center;
        position: relative;
        /*	z-index: -1;*/
    }

        #product-lineup .section > ul > li .packshot > div {
            position: absolute;
            /*	position: relative;*/
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
        }

            #product-lineup .section > ul > li .packshot > div > .product-tag {
                position: absolute;
                top: -12px;
                left: -4px;
            }

            #product-lineup .section > ul > li .packshot > div img {
                vertical-align: bottom;
                margin: 0 0 -45px;
            }

    #product-lineup .section > ul > li.more-results .packshot > div > img,
    #product-lineup .section > ul > li.no-results .packshot > div > img {
        margin: 0 0 -45px;
    }

    #product-lineup .section > ul > li.more-results .packshot > div > p,
    #product-lineup .section > ul > li.no-results .packshot > div > p {
        position: absolute;
        left: 0;
        right: 0;
        top: 73px;
        text-transform: uppercase;
        color: #7A9ED4;
    }

    #product-lineup .section > ul > li.no-results .packshot > div > p {
        color: #fff;
    }


#product-lineup .product-title-click {
    margin: 30px 0 5px;
    padding: 0 20px 0 0;
    min-height: 13px;
    font-family: NiveaBold, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    background: url(../img/presentation/arrow-right-medium-circle.png) no-repeat right top;
}

#product-lineup .section .product-image-click {
    cursor: pointer;
}

#product-lineup .section .product-title-click > p {
    font-family: Arial, Helvetica, sans-serif;
    text-transform: none;
}



.pagination-link-disabled {
    cursor: default !important;
}

/* overrides for "range" page */

html[data-page-type="productRange"] #product-lineup .listing,
html[data-page-type="parentRange"] #product-lineup .listing,
html[data-page-type="subRange"] #product-lineup .listing {
    padding-top: 0;
}

html[data-page-type="productRange"] #product-lineup .section > ul > li,
html[data-page-type="productRange"] #product-lineup .section > ul > li > div,
html[data-page-type="parentRange"] #product-lineup .section > ul > li,
html[data-page-type="parentRange"] #product-lineup .section > ul > li > div,
html[data-page-type="subRange"] #product-lineup .section > ul > li,
html[data-page-type="subRange"] #product-lineup .section > ul > li > div {
    border-top: 0;
    background: none !important;
}

    html[data-page-type="productRange"] #product-lineup .section > ul > li > div,
    html[data-page-type="parentRange"] #product-lineup .section > ul > li > div,
    html[data-page-type="subRange"] #product-lineup .section > ul > li > div {
        /*	height: 344px;*/
    }

    html[data-page-type="productRange"] #product-lineup .section > ul > li .type,
    html[data-page-type="parentRange"] #product-lineup .section > ul > li .type,
    html[data-page-type="subRange"] #product-lineup .section > ul > li .type {
        visibility: hidden;
    }

/* overrides for "set" page */

html[data-page-type="productSet"] #product-lineup .listing {
    padding-top: 10px;
}

html[data-page-type="productSet"] #product-lineup .section {
    overflow: hidden;
}



/* PRODUCT STAGE BASE ======================================================= */


/* Top area ----------------------------------------------------------------- */

#product-stage-top {
    height: 300px;
    position: relative;
    z-index: 1; /* lift it above #product-stage-bottom */
    background: #326BAE url(../img/presentation/stage-top-bg.png) repeat-x left -110px;
}

    /* header */

    #product-stage-top .header {
        position: absolute;
        z-index: 2;
        top: 80px;
        width: 300px;
        line-height: 1.1;
    }

        #product-stage-top .header h1,
        #product-stage-top .header p.subtitle {
            font-size: 2.4em;
        }

        #product-stage-top .header .intro {
            width: 90%;
            margin: .5em 0;
            font-size: 1.1em;
            line-height: 1.3;
        }

        #product-stage-top .header .tag {
            margin: 0 0 0 -5px;
        }

    /* packshot */

    #product-stage-top img,
    #product-stage-top object,
    #product-stage-top embed {
        vertical-align: bottom;
    }

    #product-stage-top .packshot {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        margin: 0 0 -120px 0;
    }

        #product-stage-top .packshot > div {
            display: inline-block;
            vertical-align: bottom;
            position: relative;
            z-index: 1;
            left: 50px;
        }

#product-carousel {
    /*margin: 0 0 -150px 0;*/
}



    #product-carousel > li {
        display: none;
    }

        #product-carousel > li > div.header {
            display: none;
        }

        #product-carousel > li:first-child {
            display: list-item;
        }

#product-stage-top .packshot .prev,
#product-stage-top .packshot .next {
    position: absolute;
    bottom: 60px;
    width: 22px;
    height: 43px;
    overflow: hidden;
    text-indent: -9999px;
    background: no-repeat center;
}

#product-stage-top .packshot .prev {
    left: -80px;
    background-image: url(../img/presentation/arrow-left-mega-white.png);
}

#product-stage-top .packshot .next {
    right: -80px;
    background-image: url(../img/presentation/arrow-right-mega-white.png);
}

/* find a store */

#product-stage-top .find-store,
#product-stage-top .buy-button {
    position: absolute;
    right: 30px;
    bottom: -50px;
    z-index: 1;
}

/* product badge */

#product-stage-top .product-badge {
    position: absolute;
    right: 100%;
    top: -50px;
    /*	top: 20px;*/
    /*	left: 560px;*/
    /*	z-index: 1;*/
}

/* teaser */

#product-stage-top .teaser {
    position: absolute;
    top: 30px;
    right: 21px;
    z-index: 2;
}

/* browse range */

#product-stage-top .browse-range,
#introduction-component .browse-range {
    position: absolute;
    bottom: -49px;
    left: 50px;
    width: 180px;
    height: 71px;
    padding: 13px;
    background: url(../img/presentation/browse-range-bg.png) no-repeat;
}

    #product-stage-top .browse-range .top,
    #introduction-component .browse-range .top {
        padding: 0 0 13px 0;
        height: 22px;
        position: relative;
    }

        #product-stage-top .browse-range .top .title,
        #introduction-component .browse-range .top .title {
            line-height: 22px;
            text-transform: uppercase;
            background: url(../img/presentation/arrow-right-medium-circle-trans.png) no-repeat right center;
        }

/* no CTA on range pages: https://bravo.blastradius.com/browse/NIVEACAM-573 */
html[data-page-type="parentRange"] #product-stage-top .browse-range .top .title,
html[data-page-type="parentRange"] #introduction-component .browse-range .top .title,
html[data-page-type="subRange"] #product-stage-top .browse-range .top .title,
html[data-page-type="subRange"] #introduction-component .browse-range .top .title {
    background-image: none;
}

#product-stage-top .browse-range .bottom,
#introduction-component .browse-range .bottom {
    height: 36px;
    padding: 10px 0 0;
}


/* Bottom area -------------------------------------------------------------- */

#product-stage-bottom-wrapper {
    position: relative; /* needed for print page horizon positioning */
}

#product-stage-bottom {
    position: relative;
    padding-top: 150px;
    color: #000;
    background: #fff url(../img/presentation/stage-horizon.png) repeat-x;
}

    #product-stage-bottom a {
        color: #273C69;
    }

    #product-stage-bottom h2,
    #product-stage-bottom h3 {
        color: #273C69;
    }



/* PRODUCT DETAILS ========================================================== */


/* Top area ----------------------------------------------------------------- */

/* header */

html[data-page-type="product"] #product-stage-top .header {
    left: 50px;
}

    html[data-page-type="product"] #product-stage-top .header .product-tag {
        margin: 0 0 0 -4px;
    }

    html[data-page-type="product"] #product-stage-top .header .product-badge {
        left: 550px;
    }


/* Bottom area -------------------------------------------------------------- */

html[data-page-type="product"] #product-stage-bottom-wrapper .media-print.horizon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 121px;
    z-index: 0;
}

html[data-page-type="product"] #product-stage-bottom li:first-child h2 {
    margin-top: 0;
}

/* tabs */

html[data-page-type="product"] #product-stage-bottom .tabcontainer li:first-child {
    margin-left: 0;
}

    html[data-page-type="product"] #product-stage-bottom .tabcontainer li:first-child > span > span > span {
        /*	padding-left: 30px;*/
    }

html[data-page-type="product"] #product-stage-bottom .tabcontainer li.active {
    position: relative; /* elevate it above inactive tabs */
}

    html[data-page-type="product"] #product-stage-bottom .tabcontainer li.active:first-child {
        margin-left: 0;
        padding-left: 0;
        background: none;
    }

        html[data-page-type="product"] #product-stage-bottom .tabcontainer li.active:first-child > span > span > span {
            padding-left: 30px;
        }

/* product details */

html[data-page-type="product"] #product-stage-bottom .product-details ul {
    margin: 0 0 15px 0;
}

html[data-page-type="product"] #product-stage-bottom .product-details h2 {
    text-transform: uppercase;
    font-size: 1.4em;
}

html[data-page-type="product"] #product-stage-bottom .product-details h3 {
    font-size: 1em;
}

/* related content */

html[data-page-type="product"] #product-stage-bottom .related-content h2 {
    margin-top: 0;
    font-size: 1.1em;
}

html[data-page-type="product"] #product-stage-bottom .related-content .select-menu {
    margin: 0 0 15px 0;
}

html[data-page-type="product"] #product-stage-bottom .related-content .inner a {
    color: #2D5C9C;
    font-weight: bold;
}

    html[data-page-type="product"] #product-stage-bottom .related-content .inner a:hover,
    html[data-page-type="product"] #product-stage-bottom .related-content .inner a:active,
    html[data-page-type="product"] #product-stage-bottom .related-content .inner a:focus {
        color: #000;
        outline: 0;
    }

html[data-page-type="product"] #product-stage-bottom .related-content .inner ol,
html[data-page-type="product"] #product-stage-bottom .related-content .inner ul {
    margin: 0;
}

html[data-page-type="product"] #product-stage-bottom .related-content .inner li {
    margin: 0;
    font-size: 1.1em;
    padding: .5em 0;
    border-top: 1px dotted #BDC3CC;
    list-style: none;
}

html[data-page-type="product"] #product-stage-bottom .related-content li:first-child {
    border: 0;
}

html[data-page-type="product"] #product-stage-bottom .related-content .flir-span {
    display: none;
}
/* options */

html[data-page-type="product"] #product-stage-bottom .options {
    clear: both;
    font-weight: bold;
}

    html[data-page-type="product"] #product-stage-bottom .options li {
        float: left;
        margin: 0 2em 0 0;
        list-style: none;
    }

    html[data-page-type="product"] #product-stage-bottom .options a {
        padding: 0 0 0 20px;
        background: no-repeat left center;
    }

        html[data-page-type="product"] #product-stage-bottom .options a:hover,
        html[data-page-type="product"] #product-stage-bottom .options a:active,
        html[data-page-type="product"] #product-stage-bottom .options a:focus {
            color: #000;
            outline: 0;
        }

    html[data-page-type="product"] #product-stage-bottom .options li.print a {
        background-image: url(../img/presentation/icon-print.png);
    }

    html[data-page-type="product"] #product-stage-bottom .options li.share a {
        background-image: url(../img/presentation/icon-share.png);
        cursor: pointer;
    }



/* PRODUCTS OVERVIEW ========================================================
/* CATEGORY LANDING ========================================================= */


/* Top area ----------------------------------------------------------------- */

html[data-page-type="productsOverview"] #product-stage-top h1,
html[data-page-type="productCategory"] #product-stage-top h1 {
    margin: 15px 0;
}

html[data-page-type="productsOverview"] #product-stage-top .header,
html[data-page-type="productCategory"] #product-stage-top .header {
    left: auto;
    right: 50px;
    text-align: right;
}

    html[data-page-type="productsOverview"] #product-stage-top .header .subtitle,
    html[data-page-type="productCategory"] #product-stage-top .header .subtitle {
        font-size: 1.6em;
    }

    html[data-page-type="productsOverview"] #product-stage-top .header .product-tag,
    html[data-page-type="productCategory"] #product-stage-top .header .product-tag {
        margin: 0 -6px 0 0;
    }

    html[data-page-type="productsOverview"] #product-stage-top .header h2,
    html[data-page-type="productCategory"] #product-stage-top .header h2 {
        margin: 5px 0 0;
    }

    html[data-page-type="productsOverview"] #product-stage-top .header .intro,
    html[data-page-type="productCategory"] #product-stage-top .header .intro {
        margin-left: auto;
    }

    html[data-page-type="productsOverview"] #product-stage-top .header .more,
    html[data-page-type="productCategory"] #product-stage-top .header .more {
        display: inline-block;
        margin: 1em 0;
        padding: 0 10px 0 0;
        text-transform: uppercase;
        background: url(../img/presentation/arrow-right-small-white.png) no-repeat right center;
    }


/* Bottom area -------------------------------------------------------------- */

html[data-page-type="productsOverview"] #product-stage-bottom {
    padding-top: 90px;
}



/* LANDING PAGE ============================================================= */


/* Top area ----------------------------------------------------------------- */

#landing-stage-top {
    height: 300px;
    position: relative;
    z-index: 1; /* lift it above #landing-stage-bottom */
    background: #3163A2 url(../img/presentation/landing-top-bg.png) repeat-x;
}


/* Bottom area -------------------------------------------------------------- */

#landing-stage-bottom {
    position: relative;
    padding-top: 0;
    color: #000;
    background: #fff;
    overflow: hidden;
}

    #landing-stage-bottom h1, #landing-stage-bottom h2,
    #landing-stage-bottom .scfTitleBorder {
        margin: 0 0 1em 0;
        color: #132F7C;
        font-size: 1.4em;
    }

    #landing-stage-bottom .two-col .sidebar p {
        color: #132F7C;
        font-style: italic;
        font-weight: bold;
    }

        /* specific to the social-responsibility page */
        #landing-stage-bottom .two-col .sidebar p img {
            float: right;
            margin: 0 0 10px 15px;
        }



/* TOPIC LANDING ============================================================ */

html[data-page-type="landing"] #introduction-component .menu {
    position: relative;
    /*	margin-top: 90px;*/
}



/* EXPERIENCE INDEX ========================================================= */

#experience-index {
    color: #000;
    background: #fff url(../img/presentation/fat-footer-shadow.png) repeat-x center bottom;
}

    #experience-index h2,
    #experience-index h3 {
        color: #21498F;
    }

    #experience-index h2 {
        margin: 0 0 1em 0;
        font-weight: normal;
        font-size: 1.9em;
    }

    #experience-index h3 {
        margin: 0 0 .5em 0;
        padding: 0 25px 0 0;
        font-size: 1em;
        background: url(../img/presentation/arrow-right-medium-circle.png) no-repeat right top;
        min-height: 13px;
    }

    #experience-index a {
        display: block;
        color: #000;
    }

    #experience-index .column {
        float: left;
        width: 293px;
        margin: 0 0 0 19px;
    }

        #experience-index .column:first-child {
            margin: 0;
        }

        #experience-index .column .small,
        #experience-index .column .big {
            margin: 19px 0 0;
        }

            #experience-index .column .small:first-child,
            #experience-index .column .big:first-child {
                margin: 0;
            }

        #experience-index .column .big {
            min-height: 261px;
        }

            #experience-index .column .big img {
                margin: 0 0 14px 0;
            }

        #experience-index .column .small {
            min-height: 121px;
        }

            #experience-index .column .small img {
                float: left;
                margin: 0 17px 0 0;
            }

/* intro componenet */

html[data-page-type="experienceIndex"] #introduction-component {
    height: 370px;
}



/* INFO PAGES================================================================ */

html[data-page-type="Webforms"] #introduction-component,
html[data-page-type="Thank You"] #introduction-component,
html[data-page-type="ConditionsOfUse"] #introduction-component,
html[data-page-type="Imprint"] #introduction-component,
html[data-page-type="Beiersdorf"] #introduction-component,
html[data-page-type="Sustainability"] #introduction-component,
html[data-page-type="LegalPolicy"] #introduction-component,
html[data-page-type="Career"] #introduction-component,
html[data-page-type="GeneralAnnouncement"] #introduction-component {
    height: auto;
}

    html[data-page-type="Webforms"] #introduction-component .menu,
    html[data-page-type="Thank You"] #introduction-component .menu,
    html[data-page-type="ConditionsOfUse"] #introduction-component .menu,
    html[data-page-type="Imprint"] #introduction-component .menu,
    html[data-page-type="Beiersdorf"] #introduction-component .menu,
    html[data-page-type="Sustainability"] #introduction-component .menu,
    html[data-page-type="LegalPolicy"] #introduction-component .menu,
    html[data-page-type="Career"] #introduction-component .menu,
    html[data-page-type="GeneralAnnouncement"] #introduction-component .menu {
        position: absolute;
        bottom: auto;
        top: 60px;
    }

    html[data-page-type="Webforms"] #introduction-component .header,
    html[data-page-type="Thank You"] #introduction-component .header,
    html[data-page-type="ConditionsOfUse"] #introduction-component .header,
    html[data-page-type="Imprint"] #introduction-component .header,
    html[data-page-type="Beiersdorf"] #introduction-component .header,
    html[data-page-type="Sustainability"] #introduction-component .header,
    html[data-page-type="LegalPolicy"] #introduction-component .header,
    html[data-page-type="Career"] #introduction-component .header,
    html[data-page-type="GeneralAnnouncement"] #introduction-component .header {
        left: 50px !important;
        width: 450px; /* arbitrary, based on rihanna announcement - may need a more sophisticated system in the future */
    }

    html[data-page-type="Webforms"] #introduction-component .social,
    html[data-page-type="Thank You"] #introduction-component .social,
    html[data-page-type="ConditionsOfUse"] #introduction-component .social,
    html[data-page-type="Imprint"] #introduction-component .social,
    html[data-page-type="Beiersdorf"] #introduction-component .social,
    html[data-page-type="Sustainability"] #introduction-component .social,
    html[data-page-type="LegalPolicy"] #introduction-component .social,
    html[data-page-type="Career"] #introduction-component .social,
    html[data-page-type="GeneralAnnouncement"] #introduction-component .social {
        width: 450px; /* arbitrary, based on rihanna announcement - may need a more sophisticated system in the future */
    }

    html[data-page-type="Webforms"] #introduction-component .main,
    html[data-page-type="Thank You"] #introduction-component .main,
    html[data-page-type="ConditionsOfUse"] #introduction-component .main,
    html[data-page-type="Imprint"] #introduction-component .main,
    html[data-page-type="Beiersdorf"] #introduction-component .main,
    html[data-page-type="Sustainability"] #introduction-component .main,
    html[data-page-type="LegalPolicy"] #introduction-component .main,
    html[data-page-type="Career"] #introduction-component .main,
    html[data-page-type="GeneralAnnouncement"] #introduction-component .main {
        position: relative;
    }



/* 404 PAGE ================================================================= */

#error {
    position: relative;
    z-index: 1;
    height: 376px;
}

    #error > img {
        position: absolute;
        top: 0;
        left: 0;
    }

    #error .content {
        margin: 30px 0 0 20px;
        width: 400px;
        position: relative;
    }

        #error .content .header h1,
        #error .content .header .subtitle {
            font-size: 2.5em;
        }

        #error .content .subtitle {
            margin: 0 0 .5em 0;
        }

        #error .content ul {
            margin: 2em 0 0;
        }

        #error .content li {
            font-size: 1.15em;
            text-transform: uppercase;
            padding: .7em 0;
            border: dotted #456BBA;
            border-width: 0 0 1px 0;
        }

            #error .content li:first-child {
                border-top-width: 1px;
            }

            #error .content li.search {
                color: #C3D3EE;
                overflow: hidden;
            }

                #error .content li.search label {
                    display: block;
                    margin: 0 0 .5em 0;
                }

                #error .content li.search input[type="text"] {
                    float: left;
                    width: 375px;
                }

                #error .content li.search input[type="image"] {
                    float: right;
                }

            #error .content li a:hover,
            #error .content li a:focus,
            #error .content li a:active {
                color: #C3D3EE;
                outline: 0;
            }



/* NO SEARCH RESULTS ======================================================== */

html[data-page-type="searchResults"] #product-lineup.no-results .inner {
    min-height: 290px;
}

html[data-page-type="searchResults"] #product-lineup.no-results .content {
    padding: 15px 30px;
}

    html[data-page-type="searchResults"] #product-lineup.no-results .content h2 {
        padding: 15px 0 0;
        text-transform: none;
        font-weight: normal;
        border-top: 1px dotted #7A9ED4;
    }


/* SHARE MODAL ============================================================== */

.default-modal .share {
    overflow: hidden;
    width: 100%;
}

    .default-modal .share li {
        float: left;
        background: url(../img/presentation/share-modal-item-bg-sprite.png) no-repeat;
        width: 216px;
        height: 43px;
        line-height: 43px;
        line-height: 43px;
        margin: 0 60px 0 0;
        list-style: none !important;
    }

        .default-modal .share li:hover {
            background-position: 0 -43px;
        }

        .default-modal .share li > a {
            display: block;
            padding: 0 40px 0 15px;
            color: #273C69;
            text-transform: uppercase;
            font-size: 1em;
        }

            .default-modal .share li > a > img {
                display: inline;
                vertical-align: middle;
            }

        /* icons */

        .default-modal .share li > a {
            text-decoration: none;
        }

        .default-modal .share li.facebook > a {
            background-position: 4px -5px;
        }

        .default-modal .share li.twitter > a {
            background-position: 4px -49px;
        }

        .default-modal .share li.myspace > a {
            background-position: 4px -93px;
        }

        .default-modal .share li.delicious > a {
            background-position: 4px -137px;
        }

        .default-modal .share li.orkut > a {
            background-position: 4px -181px;
        }

        .default-modal .share li.digg > a {
            background-position: 4px -225px;
        }

        .default-modal .share li.google > a {
            background-position: 4px -269px;
        }

        .default-modal .share li.yahoo > a {
            background-position: 4px -313px;
        }

        .default-modal .share li.live > a {
            background-position: 4px -357px;
        }

        .default-modal .share li.blogger > a {
            background-position: 4px -401px;
        }

        .default-modal .share li.reddit > a {
            background-position: 4px -445px;
        }

        .default-modal .share li.stumbleupon > a {
            background-position: 4px -489px;
        }

.default-modal .share-failure .header,
.default-modal .share-confirmation .header {
    top: 30px;
    right: 50px;
    max-width: 300px;
}

    .default-modal .share-failure .header h4,
    .default-modal .share-confirmation .header h4 {
        font-size: 2.4em;
        margin: 0;
    }

.default-modal .share-failure .button,
.default-modal .share-confirmation .button {
    margin: 15px 0 0 -8px;
}

.default-modal #share-form label,
.default-modal #share-form input,
.default-modal #share-form select,
.default-modal #share-form textarea {
    font-size: 1.1em;
}

.default-modal #share-form .row {
    width: 400px;
}

    .default-modal #share-form .row label {
        width: 15em;
    }

    .default-modal #share-form .row.share-message {
        margin-top: 1em;
        margin-bottom: 1em;
    }

        .default-modal #share-form .row.share-message .field {
            clear: both;
        }

            .default-modal #share-form .row.share-message .field textarea {
                height: 75px;
            }

/*Flash Embeding*/
#NIVEA-HISTORY {
    position: absolute;
    top: -105px;
    left: -1px;
}



/* SURROUNDING PAGES ======================================================== */

html[data-page-type="SurroundingPage"] #fullsizeFlash,
html[data-page-type="SurroundingPage"] iframe,
html[data-page-type="LocalHighlightsPage"] #fullsizeFlash,
html[data-page-type="LocalHighlightsPage"] iframe {
    float: left;
}

    html[data-page-type="SurroundingPage"] #fullsizeFlash.without-teasers + .teaser,
    html[data-page-type="SurroundingPage"] iframe.without-teasers + .teaser,
    html[data-page-type="LocalHighlightsPage"] #fullsizeFlash.without-teasers + .teaser,
    html[data-page-type="LocalHighlightsPage"] iframe.without-teasers + .teaser {
        display: none;
    }

html[data-page-type="LocalHighlightsPage3"] #container,
html[data-page-type="SurroundingPage"] #container,
html[data-page-type="LocalHighlightsPage"] #container {
    position: relative;
    background: #C0D1EB;
}

    html[data-page-type="SurroundingPage"] #container .teaser,
    html[data-page-type="LocalHighlightsPage"] #container .teaser {
        width: auto;
        padding: 0;
        overflow: hidden;
        width: 224px;
        /*	position: relative;*/
    }

        html[data-page-type="SurroundingPage"] #container .teaser > div:first-child,
        html[data-page-type="LocalHighlightsPage"] #container .teaser > div:first-child {
            /*	position: absolute;*/
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            min-height: 211px;
            padding: 21px 21px;
        }

        html[data-page-type="SurroundingPage"] #container .teaser .pagination,
        html[data-page-type="LocalHighlightsPage"] #container .teaser .pagination {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 204px;
        }



/* FORM CONFIRMATION ======================================================== */

html[data-page-type="Thank You"] .button-wrapper {
    float: right;
}


/* FLASH FALLBACK MESSAGES */

.no-flash-fallback {
    position: relative;
    overflow: hidden;
}

    .no-flash-fallback > .no-flash-message {
        position: absolute;
        top: 225px;
        left: 50px;
        width: 550px;
        z-index: 2;
    }

        .no-flash-fallback > .no-flash-message > h4, .no-flash-fallback > .no-flash-message > h2 {
            font-family: NiveaBold, Arial, Helvetica, sans-serif;
            font-size: 33px;
            padding: 0 0 0.25em;
            color: #fff;
            margin-bottom: 0;
            line-height: 1.1em;
            text-transform: uppercase;
        }

        .no-flash-fallback > .no-flash-message > p {
            font-size: 24px;
            font-weight: normal;
            font-family: NiveaLight, Arial, Helvetica, sans-serif;
            line-height: 1.1em;
        }

/** RATINGS AND REVIEWS **/

html[data-page-type="ReviewSubmission"] #introduction-component {
    height: auto;
}

#write-review-content {
    background: url(/img/presentation/horizon.png) repeat-x;
}

.write-review-placeholder {
    background-color: #fff;
}

#BVSubmissionContainer {
    padding: 20px 30px !important;
    width: 924px;
    margin: 0 auto;
}

#BVSubmissionContainerDN {
    height: 1400px;
}

/* --------------------------------------- VIDEO JS Standard CSS --------------------------------------- */

/*
VideoJS Default Styles (http://videojs.com)
Version 3.2.0
*/

/*
REQUIRED STYLES (be careful overriding)
================================================================================ */
/* When loading the player, the video tag is replaced with a DIV,
   that will hold the video tag or object tag for other playback methods.
   The div contains the video playback element (Flash or HTML5) and controls, and sets the width and height of the video.

   ** If you want to add some kind of border/padding (e.g. a frame), or special positioning, use another containing element.
   Otherwise you risk messing up control positioning and full window mode. **
*/
.video-js {
    background-color: #000;
    position: relative;
    padding: 0;
    /* Start with 10px for base font size so other dimensions can be em based and easily calculable. */
    font-size: 10px;
    /* Allow poster to be vertially aligned. */
    vertical-align: middle;
    /*  display: table-cell; */ /*This works in Safari but not Firefox.*/
}

    /* Playback technology elements expand to the width/height of the containing div. <video> or <object> */
    .video-js .vjs-tech {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when checking fullScreenEnabled. */
    .video-js:-moz-full-screen {
        position: absolute !important;
    }

/* Fullscreen Styles */
body.vjs-full-window {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow-y: auto; /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
}

.video-js.vjs-fullscreen {
    position: fixed;
    overflow: hidden;
    z-index: 1000;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    _position: absolute !important;
    / IE6 Full-window (underscore hack) /;
}

.video-js:-webkit-full-screen {
    width: 100% !important;
    height: 100% !important;
}

/* Poster Styles */
.vjs-poster {
    /* Scale with the size of the player div. Works when poster is vertically shorter, but stretches when it's less wide. */
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    cursor: pointer;
    height: 100%;
}

/* Text Track Styles */
/* Overall track holder for both captions and subtitles */
.video-js .vjs-text-track-display {
    text-align: center;
    position: absolute;
    bottom: 4em;
    left: 1em;
    right: 1em;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Individual tracks */
.video-js .vjs-text-track {
    display: none;
    color: #fff;
    font-size: 1.4em;
    text-align: center;
    margin-bottom: 0.1em;
    /* Transparent black background, or fallback to all black (IE6) */
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.50);
}

.video-js .vjs-subtitles {
    color: #fff;
}

.video-js .vjs-captions {
    color: #fc6;
}

.vjs-tt-cue {
    display: block;
    padding: 5px 43px;
}

/* Fading sytles, used to fade control bar. */
.vjs-fade-in {
    visibility: visible !important; /* Needed to make sure things hide in older browsers too. */
    opacity: 1 !important;
    -webkit-transition: visibility 0s linear 0s, opacity 0.3s linear;
    -moz-transition: visibility 0s linear 0s, opacity 0.3s linear;
    -ms-transition: visibility 0s linear 0s, opacity 0.3s linear;
    -o-transition: visibility 0s linear 0s, opacity 0.3s linear;
    transition: visibility 0s linear 0s, opacity 0.3s linear;
}

.vjs-fade-out {
    visibility: hidden !important;
    opacity: 0 !important;
    -webkit-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
    -moz-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
    -ms-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
    -o-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
    transition: visibility 0s linear 1.5s,opacity 1.5s linear;
}

/* DEFAULT SKIN (override in another file to create new skins)
================================================================================
Instead of editing this file, I recommend creating your own skin CSS file to be included after this file,
so you can upgrade to newer versions easier. You can remove all these styles by removing the 'vjs-default-skin' class from the tag. */

/* The default control bar. Created by bar.js */
.vjs-default-skin .vjs-controls {
    position: absolute;
    bottom: 0; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
    left: 0;
    right: 0; /* 100% width of div */
    margin: 0;
    padding: 0; /* Controls are absolutely position, so no padding necessary */
    height: 23px; /* Including any margin you want above or below control items */
    color: #fff;
    border-top: 1px solid #404040;
    background: url('../img/presentation/videojs/control-panel-bg.png') repeat-x;
    /* Start hidden and with 0 opacity. Opacity is used to fade in modern browsers. */
    /* Can't use display block to hide initially because widths of slider handles aren't calculated and avaialbe for positioning correctly. */
    visibility: hidden;
    opacity: 0;
}

/* General styles for individual controls. */
.vjs-default-skin .vjs-control {
    position: relative;
    float: left;
    text-align: center;
    margin: 0;
    padding: 0;
    height: 2.6em;
    width: 2.6em;
}

    .vjs-default-skin .vjs-control:focus {
        outline: 0;
        /*  background-color: #555;*/
    }

/* Hide control text visually, but have it available for screenreaders: h5bp.com/v */
.vjs-default-skin .vjs-control-text {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}


/* Play/Pause
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-play-control {
    width: 5em;
    cursor: pointer !important;
}
/* Play Icon */
.vjs-default-skin.vjs-paused .vjs-play-control div {
    width: 15px;
    height: 17px;
    background: url('../img/presentation/videojs/video-control-sprite-sheet.png');
    margin: 0.5em auto 0;
    margin-top: 3px;
}

.vjs-default-skin.vjs-playing .vjs-play-control div {
    width: 15px;
    height: 17px;
    background: url('../img/presentation/videojs/video-control-sprite-sheet.png') -25px 0;
    margin: 0.5em auto 0;
    margin-top: 3px;
}

/* Rewind
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-rewind-control {
    width: 5em;
    cursor: pointer !important;
}

    .vjs-default-skin .vjs-rewind-control div {
        width: 19px;
        height: 16px;
        background: url('../img/presentation/videojs/video-control-sprite-sheet.png');
        margin: 0.5em auto 0;
    }

/* Volume/Mute
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-mute-control {
    width: 3.8em;
    cursor: pointer !important;
    float: right;
}

    .vjs-default-skin .vjs-mute-control div {
        width: 22px;
        height: 16px;
        background: url('../img/presentation/videojs/video-control-sprite-sheet.png') -75px -25px;
        margin: 0.5em auto 0;
    }

    .vjs-default-skin .vjs-mute-control.vjs-vol-0 div {
        background: url('../img/presentation/videojs/video-control-sprite-sheet.png') 0 -25px;
    }

    .vjs-default-skin .vjs-mute-control.vjs-vol-1 div {
        background: url('../img/presentation/videojs/video-control-sprite-sheet.png') -25px -25px;
    }

    .vjs-default-skin .vjs-mute-control.vjs-vol-2 div {
        background: url('../img/presentation/videojs/video-control-sprite-sheet.png') -50px -25px;
    }


.vjs-default-skin .vjs-volume-control {
    width: 5em;
    float: right;
}

.vjs-default-skin .vjs-volume-bar {
    position: relative;
    width: 5em;
    height: 0.6em;
    margin: 1em auto 0;
    cursor: pointer !important;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    background: #666;
    background: -moz-linear-gradient(top, #333, #666);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#666));
    background: -webkit-linear-gradient(top, #333, #666);
    background: -o-linear-gradient(top, #333, #666);
    background: -ms-linear-gradient(top, #333, #666);
    background: linear-gradient(top, #333, #666);
}

.vjs-default-skin .vjs-volume-level {
    position: absolute;
    top: 0;
    left: 0;
    height: 0.6em;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    background: #CCC;
}

.vjs-default-skin .vjs-volume-handle {
    position: absolute;
    top: -0.2em;
    width: 0.8em;
    height: 0.8em;
    background: #102974;
    left: 0;
    border: 1px solid #102974;
    -moz-border-radius: 0.6em;
    -webkit-border-radius: 0.6em;
    border-radius: 0.6em;
}

/* Progress
-------------------------------------------------------------------------------- */
.vjs-default-skin div.vjs-progress-control {
    position: absolute;
    left: 4.8em;
    right: 4.8em; /* Leave room for time displays. */
    height: 4px;
    width: auto;
    top: -1.3em; /* Set above the rest of the controls. And leave room for 2px of borders (progress bottom and controls top). */
    border-bottom: 1px solid #1F1F1F;
    border-top: 1px solid #222;
    /* CSS Gradient */
    background: #333;
    background: -moz-linear-gradient(top, #222, #333);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
    background: -webkit-linear-gradient(top, #222, #333);
    background: -o-linear-gradient(top, #333, #222);
    background: -ms-linear-gradient(top, #333, #222);
    background: linear-gradient(top, #333, #222);
    /* 1px top shadow */
    /*  -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15);*/
}

/* Box containing play and load progresses. Also acts as seek scrubber. */
.vjs-default-skin .vjs-progress-holder {
    position: relative;
    cursor: pointer !important; /*overflow: hidden;*/
    padding: 0;
    margin: 0; /* Placement within the progress control item */
    height: 1.0em;
    -moz-border-radius: 0.6em;
    -webkit-border-radius: 0.6em;
    border-radius: 0.6em;
    /* CSS Gradient */
    background: #111;
    background: -moz-linear-gradient(top, #111, #262626);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#111), to(#262626));
    background: -webkit-linear-gradient(top, #111, #262626);
    background: -o-linear-gradient(top, #111, #262626);
    background: -ms-linear-gradient(top, #111, #262626);
    background: linear-gradient(top, #111, #262626);
}

    .vjs-default-skin .vjs-progress-holder .vjs-play-progress,
    .vjs-default-skin .vjs-progress-holder .vjs-load-progress { /* Progress Bars */
        position: absolute;
        display: block;
        height: 1.0em;
        margin: 0;
        padding: 0;
        left: 0;
        top: 0px; /*Needed for IE6*/
        -moz-border-radius: 0.6em;
        -webkit-border-radius: 0.6em;
        border-radius: 0.6em;
        /*width: 0;*/
    }

.vjs-default-skin .vjs-play-progress {
    /* CSS Gradient. */
    background: #a5a8ae; /* Old browsers */
}

.vjs-default-skin .vjs-load-progress {
    opacity: 0.8;
    /* CSS Gradient */
    background: #a5a8ae;
}

.vjs-default-skin div.vjs-seek-handle {
    position: absolute;
    width: 16px;
    height: 16px; /* Match img pixles */
    margin-top: -0.3em;
    left: 0;
    top: 0; /*Needed for IE6*/
    background: url('../img/presentation/videojs/video-control-sprite-sheet.png') 0 -50px;
    /* CSS Curved Corners. Needed to make shadows curved. */
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    border-radius: 0.8em;
    /* CSS Shadows */
    -webkit-box-shadow: 0 2px 4px 0 #000;
    -moz-box-shadow: 0 2px 4px 0 #000;
    box-shadow: 0 2px 4px 0 #000;
}
/* Time Display
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-time-controls {
    position: absolute;
    right: 0;
    height: 1.0em;
    width: 4.8em;
    top: -1.3em;
    border-bottom: 1px solid #1F1F1F;
    border-top: 1px solid #222;
    background-color: #333;
    font-size: 1em;
    line-height: 1.0em;
    font-weight: normal;
    font-family: Helvetica, Arial, sans-serif;
    background: #333;
    background: -moz-linear-gradient(top, #222, #333);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
    background: -webkit-linear-gradient(top, #222, #333);
    background: -o-linear-gradient(top, #333, #222);
    background: -ms-linear-gradient(top, #333, #222);
    background: linear-gradient(top, #333, #222);
    /* 1px top shadow */
    /*  -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15);*/
}

.vjs-default-skin .vjs-current-time {
    left: 0;
}

.vjs-default-skin .vjs-duration {
    right: 0;
    display: none;
}

.vjs-default-skin .vjs-remaining-time {
    right: 0;
}

.vjs-time-divider {
    display: none;
}

.vjs-default-skin .vjs-time-control {
    font-size: 1em;
    line-height: 1;
    font-weight: normal;
    font-family: Helvetica, Arial, sans-serif;
}

    .vjs-default-skin .vjs-time-control span {
        line-height: 25px; /* Centering vertically */
    }

/* Fullscreen
-------------------------------------------------------------------------------- */
.vjs-secondary-controls {
    float: right;
}

.vjs-default-skin .vjs-fullscreen-control {
    width: 3.8em;
    cursor: pointer !important;
    float: right;
}

    .vjs-default-skin .vjs-fullscreen-control div {
        width: 16px;
        height: 16px;
        background: url('../img/presentation/videojs/video-control-sprite-sheet.png') -50px 0;
        margin: 0.5em auto 0;
    }

.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control div {
    background: url('../img/presentation/videojs/video-control-sprite-sheet.png') -75px 0;
}


/* Big Play Button (at start)
---------------------------------------------------------*/
.vjs-default-skin .vjs-big-play-button {
    display: block; /* Start hidden */
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 89px;
    height: 93px;
    margin: -42px 0 0 -42px;
    text-align: center;
    vertical-align: center;
    cursor: pointer !important;
    outline: none;
    background: url('../img/presentation/videojs/vjs-play-button.png');
}

.vjs-default-skin div.vjs-big-play-button:hover {
}

.vjs-default-skin div.vjs-big-play-button span {
}

/* Loading Spinner
---------------------------------------------------------*/
/* CSS Spinners by Kilian Valkhof - http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
.vjs-loading-spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 55px;
    height: 55px;
    margin: -28px 0 0 -28px;
    -webkit-animation-name: rotatethis;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotatethis;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
}

@-webkit-keyframes rotatethis {
    0% {
        -webkit-transform: scale(0.6) rotate(0deg);
    }

    12.5% {
        -webkit-transform: scale(0.6) rotate(0deg);
    }

    12.51% {
        -webkit-transform: scale(0.6) rotate(45deg);
    }

    25% {
        -webkit-transform: scale(0.6) rotate(45deg);
    }

    25.01% {
        -webkit-transform: scale(0.6) rotate(90deg);
    }

    37.5% {
        -webkit-transform: scale(0.6) rotate(90deg);
    }

    37.51% {
        -webkit-transform: scale(0.6) rotate(135deg);
    }

    50% {
        -webkit-transform: scale(0.6) rotate(135deg);
    }

    50.01% {
        -webkit-transform: scale(0.6) rotate(180deg);
    }

    62.5% {
        -webkit-transform: scale(0.6) rotate(180deg);
    }

    62.51% {
        -webkit-transform: scale(0.6) rotate(225deg);
    }

    75% {
        -webkit-transform: scale(0.6) rotate(225deg);
    }

    75.01% {
        -webkit-transform: scale(0.6) rotate(270deg);
    }

    87.5% {
        -webkit-transform: scale(0.6) rotate(270deg);
    }

    87.51% {
        -webkit-transform: scale(0.6) rotate(315deg);
    }

    100% {
        -webkit-transform: scale(0.6) rotate(315deg);
    }
}

@-moz-keyframes rotatethis {
    0% {
        -moz-transform: scale(0.6) rotate(0deg);
    }

    12.5% {
        -moz-transform: scale(0.6) rotate(0deg);
    }

    12.51% {
        -moz-transform: scale(0.6) rotate(45deg);
    }

    25% {
        -moz-transform: scale(0.6) rotate(45deg);
    }

    25.01% {
        -moz-transform: scale(0.6) rotate(90deg);
    }

    37.5% {
        -moz-transform: scale(0.6) rotate(90deg);
    }

    37.51% {
        -moz-transform: scale(0.6) rotate(135deg);
    }

    50% {
        -moz-transform: scale(0.6) rotate(135deg);
    }

    50.01% {
        -moz-transform: scale(0.6) rotate(180deg);
    }

    62.5% {
        -moz-transform: scale(0.6) rotate(180deg);
    }

    62.51% {
        -moz-transform: scale(0.6) rotate(225deg);
    }

    75% {
        -moz-transform: scale(0.6) rotate(225deg);
    }

    75.01% {
        -moz-transform: scale(0.6) rotate(270deg);
    }

    87.5% {
        -moz-transform: scale(0.6) rotate(270deg);
    }

    87.51% {
        -moz-transform: scale(0.6) rotate(315deg);
    }

    100% {
        -moz-transform: scale(0.6) rotate(315deg);
    }
}
/* Each circle */
div.vjs-loading-spinner .ball1 {
    opacity: 0.12;
    position: absolute;
    left: 20px;
    top: 0px;
    width: 13px;
    height: 13px;
    background: #fff;
    border-radius: 13px;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border: 1px solid #ccc;
}

div.vjs-loading-spinner .ball2 {
    opacity: 0.25;
    position: absolute;
    left: 34px;
    top: 6px;
    width: 13px;
    height: 13px;
    background: #fff;
    border-radius: 13px;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border: 1px solid #ccc;
}

div.vjs-loading-spinner .ball3 {
    opacity: 0.37;
    position: absolute;
    left: 40px;
    top: 20px;
    width: 13px;
    height: 13px;
    background: #fff;
    border-radius: 13px;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border: 1px solid #ccc;
}

div.vjs-loading-spinner .ball4 {
    opacity: 0.50;
    position: absolute;
    left: 34px;
    top: 34px;
    width: 13px;
    height: 13px;
    background: #fff;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 15px;
    border: 1px solid #ccc;
}

div.vjs-loading-spinner .ball5 {
    opacity: 0.62;
    position: absolute;
    left: 20px;
    top: 40px;
    width: 13px;
    height: 13px;
    background: #fff;
    border-radius: 13px;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border: 1px solid #ccc;
}

div.vjs-loading-spinner .ball6 {
    opacity: 0.75;
    position: absolute;
    left: 6px;
    top: 34px;
    width: 13px;
    height: 13px;
    background: #fff;
    border-radius: 13px;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border: 1px solid #ccc;
}

div.vjs-loading-spinner .ball7 {
    opacity: 0.87;
    position: absolute;
    left: 0px;
    top: 20px;
    width: 13px;
    height: 13px;
    background: #fff;
    border-radius: 13px;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border: 1px solid #ccc;
}

div.vjs-loading-spinner .ball8 {
    opacity: 1.00;
    position: absolute;
    left: 6px;
    top: 6px;
    width: 13px;
    height: 13px;
    background: #fff;
    border-radius: 13px;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border: 1px solid #ccc;
}

/* Menu Buttons (Captions/Subtitles/etc.)
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-menu-button {
    float: right;
    margin: 0.2em 0.5em 0 0;
    padding: 0;
    width: 3em;
    height: 2em;
    cursor: pointer !important;
}

.vjs-subtitles-button {
    display: none;
}

/* Button Icon */
.vjs-default-skin .vjs-menu-button div {
    background: url('../img/presentation/videojs/video-control-sprite-sheet.png') 0px -75px no-repeat;
    width: 16px;
    height: 16px;
    margin: 0.2em auto 0;
    padding: 0;
}

/* Button Pop-up Menu */
.vjs-default-skin .vjs-menu-button ul {
    display: none; /* Start hidden. Hover will show. */
    opacity: 0.8;
    padding: 0;
    margin: 0;
    position: absolute;
    width: 10em;
    bottom: 2em;
    max-height: 15em;
    left: -3.5em; /* Width of menu - width of button / 2 */
    background-color: #111;
    border: 2px solid #333;
    -moz-border-radius: 0.7em;
    -webkit-border-radius: 1em;
    border-radius: .5em;
    -webkit-box-shadow: 0 2px 4px 0 #000;
    -moz-box-shadow: 0 2px 4px 0 #000;
    box-shadow: 0 2px 4px 0 #000;
    overflow: auto;
}

.vjs-default-skin .vjs-menu-button:focus ul,
.vjs-default-skin .vjs-menu-button:hover ul {
    display: block;
    list-style: none;
}

.vjs-default-skin .vjs-menu-button ul li {
    list-style: none;
    margin: 0;
    padding: 0.3em 0 0.3em 20px;
    line-height: 1.4em;
    font-size: 1.2em;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: left;
}

    .vjs-default-skin .vjs-menu-button ul li.vjs-selected {
        text-decoration: underline;
        background: url('../img/presentation/videojs/video-control-sprite-sheet.png') -125px -50px no-repeat;
    }

        .vjs-default-skin .vjs-menu-button ul li:focus,
        .vjs-default-skin .vjs-menu-button ul li:hover,
        .vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
        .vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover {
            background-color: #ccc;
            color: #111;
            outline: 0;
        }

    .vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
        text-align: center;
        text-transform: uppercase;
        font-size: 1em;
        line-height: 2em;
        padding: 0;
        margin: 0 0 0.3em 0;
        color: #fff;
        font-weight: bold;
        cursor: default;
        background: #4d4d4d;
        background: -moz-linear-gradient(top, #4d4d4d 0%, #3f3f3f 50%, #333333 50%, #252525 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(50%,#3f3f3f), color-stop(50%,#333333), color-stop(100%,#252525));
        background: -webkit-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
        background: -o-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
        background: -ms-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
        background: linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
    }

/* Subtitles Button */
.vjs-default-skin .vjs-captions-button div {
    background-position: -25px -75px;
}

.vjs-default-skin .vjs-chapters-button div {
    background-position: -100px -75px;
}

.vjs-default-skin .vjs-chapters-button ul {
    width: 20em;
    left: -8.5em; /* Width of menu - width of button / 2 */
}


/* --------------------------------------- End VIDEO JS Standard CSS --------------------------------------- */


.vjs-default-skin .vjs-current-time {
    display: none;
}

.vjs-default-skin .vjs-duration {
    display: none;
}

.vjs-default-skin .vjs-remaining-time {
    display: none;
}

.vjs-default-skin div.vjs-progress-control {
    left: 0em;
    right: 0em;
    background: #333;
    top: -4px;
    border-width: 0px;
}

.vjs-default-skin .vjs-progress-holder {
    -moz-border-radius: 0em;
    -webkit-border-radius: 0em;
    border-radius: 0em;
    height: 4px;
}

    .vjs-default-skin .vjs-progress-holder .vjs-play-progress,
    .vjs-default-skin .vjs-progress-holder .vjs-load-progress { /* Progress Bars */
        -moz-border-radius: 0em;
        -webkit-border-radius: 0em;
        border-radius: 0em;
        height: 4px;
    }

.vjs-default-skin .vjs-play-progress {
    /* CSS Gradient. */
    background: #001c70; /* Old browsers */
}

.vjs-default-skin div.vjs-seek-handle {
    display: none;
}


.video-js .vjs-text-track-display {
    text-align: center;
    position: absolute;
    bottom: 26px;
    left: 1em;
    right: 1em;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.video-js .vjs-text-track {
    display: none;
    color: #fff;
    font-size: 13px;
    text-align: center;
    margin-bottom: 0.1em;
    /* Transparent black background, or fallback to all black (IE6) */
    background: rgb(6, 30, 153);
    background: rgba(6, 30, 153, 0.2);
    width: 100%;
    padding: 0;
    padding-right: 20px !important;
    margin-left: -10px;
    line-height: 17px;
}

.fullScreen .video-js .vjs-text-track {
    font-size: 33px;
    padding: 22px;
    line-height: 29px;
}

/** ThreeDots plugin fix for IE & FF (display max_rows instead of max_rows - 1) **/

#product-lineup .section > ul > li a > p {
    line-height: 16px;
    font-size: 11px;
}

/** UK Poll **/

.experience-poll {
    background: url(/img/presentation/experience-poll/poll-box-shadows.png) no-repeat;
    width: 292px;
    height: 217px;
    overflow: hidden;
    position: relative;
    padding: 8px;
    margin-top: -50px;
}

    .experience-poll > .inner {
        background-color: #c7e6ff;
        position: relative;
        padding: 9px 15px 0 15px;
        height: 208px;
    }

        .experience-poll > .inner .row.buttons {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            overflow: hidden;
            margin: 0;
            background: url(/img/presentation/experience-poll/poll-gradient.png) repeat-x left bottom;
            height: 45px;
        }

            .experience-poll > .inner .row.buttons img {
                float: left;
                margin-left: 10px;
            }

            .experience-poll > .inner .row.buttons .btn-vote {
                float: right;
                margin: 8px 10px 0 0;
            }

#experience-index .experience-poll > .inner h2.poll-title {
    background: url(/img/presentation/experience-poll/poll-icon.png) no-repeat;
    text-indent: 35px;
    font-family: NiveaLight, Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: #294a88;
    line-height: 1.1em;
}

    #experience-index .experience-poll > .inner h2.poll-title.results {
        margin-bottom: 5px;
    }

#experience-index .experience-poll > .inner p.poll-question {
    font-family: NiveaBold;
    font-size: 12px;
    color: #294a88;
    margin-bottom: 15px;
}

.experience-poll > .inner .field.radios label {
    display: inline-block;
    font-size: 12px;
    font-weight: normal;
    text-transform: capitalize;
    position: relative;
    padding-left: 15px;
}

    .experience-poll > .inner .field.radios label > input {
        margin: 0 !important;
        position: absolute;
        left: 0;
        top: 2px;
        padding: 0;
        width: 13px;
        height: 13px;
    }

.experience-poll > .inner .percent-bar {
    float: left;
    width: 230px;
    background-color: #aecfee;
    height: 10px;
    overflow: hidden;
    line-height: 1em;
}

.experience-poll > .inner .percent {
    float: right;
    width: 25px;
    text-align: right;
    line-height: 1em;
}

.experience-poll > .inner .results-text {
    font-family: NiveaBold;
    font-size: 12px;
    text-transform: capitalize;
    color: #21498f;
}

.experience-poll > .inner .thank-you {
    margin-bottom: 10px;
}

.experience-poll > .inner .radio.result-chart {
    overflow: hidden;
    margin-bottom: 6px;
}

    .experience-poll > .inner .radio.result-chart > strong {
        color: #21498f;
    }

/** end UK Poll **/

/** Nivea France accessibility icon**/
html[lang="fr"] .secondary-nav #secondary-menu li.accessibility {
    background: url(/img/presentation/icons/nivea-fr-accessibility-icon.png) no-repeat 0 5px;
    padding-left: 14px;
}
/** end Nivea France accessibility icon **/



/** google search **/

#google-search-results {
    padding: 40px 30px 10px 30px;
    min-height: 290px;
    background: #FFFFFF;
}

    #google-search-results h1 {
        color: #00087B;
    }

        #google-search-results h1 .sub {
            color: #7a9ed4;
        }

    #google-search-results .result-list {
        margin: 15px 0 0 40px;
    }

        #google-search-results .result-list li {
            margin-bottom: 25px;
            width: 600px;
        }

            #google-search-results .result-list li a {
                font-weight: bold;
                font-size: 1.4em;
                color: #00087B;
            }

        #google-search-results .result-list .image {
            width: 100px;
            float: left;
            text-align: right;
        }

        #google-search-results .result-list li .description {
            margin-left: 113px;
            line-height: 1.3em;
            color: #00087B;
        }

            #google-search-results .result-list li .description div {
                margin-top: 2px;
            }

        #google-search-results .result-list li .breadcrumb, #google-search-results .result-list li .breadcrumb a {
            text-transform: uppercase;
            color: #00087B;
            margin-bottom: 1px;
        }

        #google-search-results .result-list li .url {
            color: #7a9ed4;
        }

    #google-search-results .pagination {
        background: #FFFFFF;
    }

        #google-search-results .pagination ol > li > span,
        #google-search-results .pagination ol > li > a {
            height: 25px;
            line-height: 1.5;
            font-size: 14px;
            background-image: url("../img/presentation/pagination-sprite-light.png");
            background-attachment: scroll;
            background-clip: border-box;
            background-color: transparent;
            background-origin: padding-box;
            background-position-x: -25px;
            background-position-y: 0px;
            background-repeat: no-repeat;
            background-size: auto;
            vertical-align: top;
            text-decoration: none;
            width: 25px;
        }

        #google-search-results .pagination ol > li.active > span {
            background-position: 0 0;
            color: #355EA1 !important;
        }


    #google-search-results .no-results h2 {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px dotted #7a9ed4;
        font-family: Arial, Helvetica, sans-serif;
        text-transform: none;
        font-size: 1.44em;
        font-weight: normal;
        color: #00087B;
    }

        #google-search-results .no-results h2 a {
            color: #7a9ed4;
        }

.ui-autocomplete {
    position: absolute;
    background-color: #FFFFFF;
    color: #000;
    border-radius: 0 0 2px 2px;
    border: 1px solid #f1f1f1;
    z-index: 1000 !important;
}

    .ui-autocomplete .ui-menu-item a {
        display: block;
        padding: 0 2px;
    }

        .ui-autocomplete .ui-menu-item:hover,
        .ui-autocomplete .ui-menu-item a.ui-state-active {
            background-color: #C0D1EE;
            color: #000;
        }

.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
    background-color: #C0D1EE;
}

* html .ui-autocomplete {
    width: 1px;
}
/* without this, the menu expands to 100% in IE6 */

/** end google search**/

/** background takeover **/
#background-takeover {
    position: absolute;
    width: 100%;
    /*height:100%;*/
    background-position: top center;
    background-repeat: no-repeat;
}

#background-takeover-cover {
    position: absolute;
    left: 50%;
    margin-left: -492px;
    width: 984px;
    /*height:100%;*/
}
/** background takeover end **/

.rich-text ul {
    padding-left: 40px;
}

    .rich-text ul li {
        list-style-type: disc;
    }

.template-section .rich-text ol {
    padding-left: 30px;
}

    .template-section .rich-text ol li {
        list-style: decimal;
    }



/* EU COOKIE POLICY ========================================================= */

#cookie-policy-popup {
    color: #fff;
    display: none;
    background: #4481B8;
    position: relative;
    z-index: 987;
    zoom: 1;
}

    #cookie-policy-popup p {
        margin: 0;
    }

    #cookie-policy-popup > .cookie-policy-popup-wrapper {
        width: 80%;
        padding: 20px 0;
        margin: auto;
    }

        #cookie-policy-popup > .cookie-policy-popup-wrapper > .cookie-policy-popup-header {
            float: left;
            margin: 0 20px 0 0;
            max-width: 130px;
        }

            #cookie-policy-popup > .cookie-policy-popup-wrapper > .cookie-policy-popup-header > .cookie-policy-popup-title {
                font-size: 1.25em;
                text-transform: uppercase;
                line-height: 1.2;
                text-align: right;
            }

        #cookie-policy-popup > .cookie-policy-popup-wrapper > .cookie-policy-popup-controls {
            float: right;
            margin: 0 0 0 20px;
            width: 140px;
            text-align: center;
        }

            #cookie-policy-popup > .cookie-policy-popup-wrapper > .cookie-policy-popup-controls > span {
                display: block;
            }

            #cookie-policy-popup > .cookie-policy-popup-wrapper > .cookie-policy-popup-controls > .cookie-policy-popup-accept {
                margin: 1em 0;
                cursor: pointer;
            }

            #cookie-policy-popup > .cookie-policy-popup-wrapper > .cookie-policy-popup-controls > .cookie-policy-popup-info {
                margin: 5px 0 0;
            }

                #cookie-policy-popup > .cookie-policy-popup-wrapper > .cookie-policy-popup-controls > .cookie-policy-popup-info a {
                    text-decoration: underline;
                }

                    #cookie-policy-popup > .cookie-policy-popup-wrapper > .cookie-policy-popup-controls > .cookie-policy-popup-info a:hover,
                    #cookie-policy-popup > .cookie-policy-popup-wrapper > .cookie-policy-popup-controls > .cookie-policy-popup-info a:focus,
                    #cookie-policy-popup > .cookie-policy-popup-wrapper > .cookie-policy-popup-controls > .cookie-policy-popup-info a:active {
                        text-decoration: none;
                    }

        #cookie-policy-popup > .cookie-policy-popup-wrapper > .cookie-policy-popup-body {
            padding: 0 20px;
            overflow: hidden;
            border-left: 1px solid #fff;
            font-size: 1.2em;
        }

    /* nivea-specific */

    #cookie-policy-popup > .cookie-policy-popup-wrapper {
        width: 840px;
    }

        #cookie-policy-popup > .cookie-policy-popup-wrapper > .cookie-policy-popup-header > .cookie-policy-popup-title {
            font-family: NiveaMedium;
            font-weight: normal;
        }

        #cookie-policy-popup > .cookie-policy-popup-wrapper > .cookie-policy-popup-controls > .cookie-policy-popup-accept {
            margin: 0;
        }

            #cookie-policy-popup > .cookie-policy-popup-wrapper > .cookie-policy-popup-controls > .cookie-policy-popup-accept > span > span > span > span {
                background-image: url(/img/presentation/arrow-right-small-white.png);
                font-family: NiveaMedium;
                font-weight: normal;
            }

#niveaProfileLoginWrapper {
    /*width:984px;
	min-width: 984px;*/
    height: 0px;
    left: 50%;
    /*top:-283px;*/
    /*top:111px;*/
    /*top:0px;*/
    position: absolute;
    z-index: 986;
    color: #00136F;
    width: 984px;
    margin: 0 0 0 -492px;
    zoom: 1;
}

    #niveaProfileLoginWrapper a {
        color: #00136F;
    }

    #niveaProfileLoginWrapper > div {
        width: 984px;
        position: relative;
        top: -105px;
        /*	position: relative;
	background: red;
	height:400px;*/
    }


    #niveaProfileLoginWrapper .disclaimer-link {
        text-decoration: underline;
        ;
        color: #00136F;
    }

    #niveaProfileLoginWrapper .button.disabled,
    #niveaProfileLoginWrapper .button.disabled span,
    #niveaProfileLoginWrapper .learn-more.disabled,
    #niveaProfileLoginWrapper .learn-more.disabled span {
        background-image: url(/img/presentation/learn-more-sprite-disabled.png);
        cursor: default !important;
    }

        #niveaProfileLoginWrapper .learn-more.disabled > span > span > span {
            padding: 0 15px 0 0;
            background: url(/img/presentation/arrow-right-small-white.png) no-repeat right center;
        }



/*Fix for Touch (iOS devices)*/
html[data-sso-is-touch="true"] #niveaProfileLoginWrapper .learn-more > span > span > span,
html[data-sso-is-touch="true"] #niveaProfileLoginWrapper .learn-more.disabled > span > span > span {
    padding: 0 13px 0 0;
    background: url(/img/presentation/arrow-right-small-white.png) no-repeat right center;
}


#niveaProfileLoginWrapper #register .titleSpacing {
    margin-bottom: 20px;
}

#niveaProfileLoginWrapper .formLabel {
    margin-bottom: 5px;
    color: #8F8F8F;
    font-family: NiveaMedium;
    font-size: 12px;
}

#niveaProfileLoginWrapper #register .formTerms {
    /*padding-top:20px;*/
    margin: 20px 0 0 0;
}

    #niveaProfileLoginWrapper #register .formTerms a {
        text-decoration: underline;
    }

#niveaProfileLoginWrapper #register .formSubmit {
    padding-top: 10px;
}

    #niveaProfileLoginWrapper #register .formSubmit > .submit {
        float: left;
    }

#niveaProfileLoginWrapper li.top-padding {
    padding-top: 20px;
}


#niveaProfileLoginWrapper input[type="checkbox"] {
    position: absolute;
    left: -999em;
}

    #niveaProfileLoginWrapper input[type="checkbox"] + label {
        overflow: hidden;
        padding: 4px 0 0 23px;
        margin-left: -23px;
        left: 23px;
        position: relative;
        display: block;
        max-width: 230px;
        background: url(/img/presentation/sso/checkbox-off.png) no-repeat 0 -4px;
    }


        #niveaProfileLoginWrapper input[type="checkbox"] + label.aria-checked {
            background: url(/img/presentation/sso/checkbox-on.png) no-repeat 0 -4px;
        }

#niveaProfileLoginWrapper .logged-in-divider {
    width: 300px;
    height: 10px;
    position: relative;
    bottom: 0px;
    background: url(/img/presentation/sso/logged-in-menu-divider.png) no-repeat center center;
}

.or-divider {
    width: 250px;
    height: 10px;
    position: relative;
    bottom: -16px;
    background: url(/img/presentation/sso/panel-divider.png) no-repeat -16px 7px;
}

    .or-divider.two {
        bottom: -23px;
    }

    .or-divider .outer {
        position: relative;
        right: 50%;
        float: right;
    }

    .or-divider .inner {
        position: relative;
        left: 50%;
        float: left;
    }

#validateemail .spinner-container,
#niveaProfileLoginWrapper .spinner-container {
    background: url('/img/presentation/spinner-small.gif') no-repeat center center;
    width: 50px;
    height: 31px;
    float: left;
    margin: 9px 0 0 0;
}

#niveaProfileLoginWrapper #loggedout .spinner-container {
    margin-top: 8px;
}

#niveaProfileLoginWrapper #loggedout .gigya-title .spinner-container {
    margin-top: 0px;
    width: 64px;
    height: 22px;
}


#niveaProfileLoginWrapper #register .spinner-container {
    width: 38px;
    float: left;
    margin: 0 0 0 0;
}


#validateemail .cta,
#niveaProfileLoginWrapper .cta {
    cursor: pointer;
    text-decoration: underline;
    color: #00136F;
}

#validateemail .form-error,
#niveaProfileLoginWrapper .form-error {
    display: none;
    clear: both;
    padding: 5px 5px 0 5px;
}

    #validateemail .form-error.enabled,
    #niveaProfileLoginWrapper .form-error.enabled {
        display: block;
    }

#validateemail .form-error,
#niveaProfileLoginWrapper .form-error {
    color: #FF0000;
}


#validateemail .input-container,
#niveaProfileLoginWrapper .input-container {
    clear: both;
}


    #validateemail .input-container.submit,
    #niveaProfileLoginWrapper .input-container.submit {
        padding-top: 10px;
    }

.sso-form-wrapper .textbox span,
.sso-form-wrapper .textbox input,
.sso-form-wrapper .textbox select,
#validateemail .textbox span,
#validateemail .textbox input,
#niveaProfileLoginWrapper .textbox span,
#niveaProfileLoginWrapper .textbox input {
    float: left;
}


.sso-form-wrapper .textbox .left,
#validateemail .textbox .left,
#niveaProfileLoginWrapper .textbox .left {
    width: 11px;
    display: block;
    height: 21px;
    background: url(/img/presentation/campaigns/baby/text-box.png) 0 0 no-repeat;
    display: block;
}

.sso-form-wrapper .right,
#validateemail .textbox .right,
#niveaProfileLoginWrapper .textbox .right {
    width: 11px;
    height: 21px;
    display: block;
    background: url(/img/presentation/campaigns/baby/text-box.png) 0 -21px no-repeat;
}

.sso-form-wrapper .textbox input,
.sso-form-wrapper .textbox select,
#validateemail .textbox input,
#niveaProfileLoginWrapper .textbox input {
    background: url(/img/presentation/campaigns/baby/text-box.png) 0 -42px repeat-x;
    border: none;
    line-height: 20px;
    height: 21px;
    width: 210px;
    outline: 0;
}


#niveaProfileLoginWrapper.open {
    top: 100px;
}

#validateemail h2,
#niveaProfileLoginWrapper h2 {
    font-family: NiveaBold;
    font-size: 24px;
    line-height: 22px;
}

#validateemail h2,
#niveaProfileLoginWrapper h2 {
    font-family: NiveaBold;
    font-size: 20px;
    line-height: 22px;
}

#validateemail h3,
#niveaProfileLoginWrapper h3 {
    font-family: NiveaLight, Arial, Helvetica, sans-serif;
    font-size: 15px;
}


#niveaProfileLoginWrapper h4 {
    font-family: NiveaBold;
    font-size: 14px;
    line-height: 20px;
}

#niveaProfileLoginWrapper > p:first-child {
    padding-bottom: 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-weight: normal;
    font-size: 1.2em;
    line-height: 1.2em;
}

#niveaProfileLoginWrapper .login-display {
    top: -500px;
    /*right: 492px;*/
    position: relative;
    width: 300px;
    height: auto;
    background: #FFF;
    -webkit-border-radius: 0px 0px 10px 10px;
    border-radius: 0px 0px 10px 10px;
    float: right;
}

html[data-sso-is-touch="false"] #niveaProfileLoginWrapper .panel-tab .highlight:hover {
    background: url(/img/presentation/sso/logged-in-menu-highlight.png) repeat-x;
}


#niveaProfileLoginWrapper .panel-tab .highlight > a {
    display: block;
    padding: 4px 0;
    text-decoration: none;
    color: #8F8F8F;
}

html[data-sso-is-touch="false"] #niveaProfileLoginWrapper .panel-tab .highlight:hover > a {
    color: #FFF;
}

#niveaProfileLoginWrapper .panel-tab-container {
    /*width: 100%;*/
    position: absolute;
    right: 0;
}

#niveaProfileLoginWrapper .panel-tab {
    top: -30px;
    max-width: 480px;
    overflow: hidden;
    min-width: 200px;
    position: relative;
    height: 30px;
    margin: 20px auto 0 auto;
    background: url(/img/presentation/html-templates/main-gradient.png) -200px 371px;
    float: right;
    cursor: pointer;
    font-size: 12px;
    -webkit-border-radius: 0px 0px 10px 10px;
    border-radius: 0px 0px 10px 10px;
    -webkit-box-shadow: -1px 4px 10px -3px rgba(0, 0, 0, .2);
    box-shadow: -1px 4px 10px -3px rgba(0, 0, 0, .2);
    zoom: 1;
    z-index: 991;
}

#niveaProfileLoginWrapper.close .panel-tab {
    top: 367px;
    z-index: 1;
    display: block;
}


#niveaProfileLoginWrapper .panel-tab .panel-tab-text {
    text-transform: uppercase;
    padding: 5px 0 3px 0px;
    font-family: NiveaMedium;
    background: url(img/presentation/icon-profile-image.png) no-repeat 0 0;
    float: left;
}

#niveaProfileLoginWrapper .panel-tab .user-email {
    padding: 7px 10px 0 0px;
    white-space: nowrap;
    font-weight: bold;
    position: relative;
    float: left;
}

#niveaProfileLoginWrapper .panel-tab .login-url .user-email {
    float: none;
    margin-right: 40px;
}

#niveaProfileLoginWrapper .top-shadow {
    position: absolute;
    top: -4px;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 30px;
    background: transparent url(/img/presentation/sso/panel-tab-bg.png) repeat-x 0 4px;
}

#niveaProfileLoginWrapper .panel-tab .top-shadow {
    top: 1px;
}


#niveaProfileLoginWrapper .panel-tab-container .panel-tab .title {
    padding: 0 40px 0 40px;
}


#niveaProfileLoginWrapper .panel-tab .outer {
    padding-top: 1px;
    position: relative;
    float: right;
    right: 50%;
}

#niveaProfileLoginWrapper .panel-tab .inner {
    position: relative;
    float: left;
    right: -50%;
}

#niveaProfileLoginWrapper .panel-tab .menu-list {
    position: relative;
    top: 0px;
    padding: 0;
    margin: 0;
}

#niveaProfileLoginWrapper .panel-tab p {
    padding: 0 40px;
}


#niveaProfileLoginWrapper .panel-tab-open {
    width: 40px;
    height: 20px;
    position: absolute;
    margin: 0px auto 0 -25px;
    /*bottom: 0px;*/
    left: 50%;
    cursor: pointer;
    text-align: center;
    bottom: -20px;
    background: url(/img/presentation/sso/nivea-sso-background.jpg) 167px -19px;
    -webkit-border-radius: 0px 0px 55px 55px;
    border-radius: 0px 0px 55px 55px;
    -webkit-box-shadow: -5px 3px 10px 2px rgba(0, 0, 0, .05);
    box-shadow: -5px 3px 10px 2px rgba(0, 0, 0, .05);
    z-index: 2;
}

#niveaProfileLoginWrapper .login-display[data-current-view="register"] .panel-tab-open {
    background: url(/img/presentation/sso/nivea-sso-background.jpg) 168px -142px;
}


#niveaProfileLoginWrapper .panel-tab-logged-in > div {
    width: 40px;
    height: 20px;
    position: absolute;
    margin: 0px auto 0 -25px;
    left: 50%;
    cursor: pointer;
    text-align: center;
    top: 114px;
    /*overflow: hidden;*/
}

    #niveaProfileLoginWrapper .panel-tab-logged-in > div.open {
        overflow: visible;
        z-index: 996;
    }


    #niveaProfileLoginWrapper .panel-tab-logged-in > div > div {
        top: -120px;
        width: 40px;
        height: 20px;
        position: relative;
        display: none;
        background: url(/img/presentation/html-templates/main-gradient.png) 740px 134px;
        z-index: 2;
        overflow: hidden;
        -webkit-border-radius: 0px 0px 55px 55px;
        border-radius: 0px 0px 55px 55px;
        -webkit-box-shadow: -5px 3px 10px 2px rgba(0, 0, 0, .05);
        box-shadow: -5px 3px 10px 2px rgba(0, 0, 0, .05);
    }


#niveaProfileLoginWrapper[data-gigya-enabled="false"] #wrapperContainer[data-current-view="loggedout"] .panel-tab-open {
    background: url(/img/presentation/html-templates/main-gradient.png) 87px -3px;
}

#niveaProfileLoginWrapper[data-gigya-enabled="false"] #wrapperContainer[data-current-view="register"] .panel-tab-open {
    background: url(/img/presentation/html-templates/main-gradient.png) 57px -92px;
}


#niveaProfileLoginWrapper .panel-tab-logged-in > div > div > div,
#niveaProfileLoginWrapper .panel-tab-open > div {
    width: 15px;
    height: 7px;
    background: url(../img/presentation/arrow-up-small-blue.png) no-repeat center center;
    position: relative;
    margin: 0 auto;
    top: 70%;
    margin-top: -11px;
}

#niveaProfileLoginWrapper .panel-tab-logged-in > div {
}

#niveaProfileLoginWrapper .content-container {
    width: 100%;
    height: 100%;
    background: white;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    -webkit-border-radius: 0px 0px 10px 10px;
    border-radius: 0px 0px 10px 10px;
    -webkit-box-shadow: -5px 3px 10px 2px rgba(0, 0, 0, .05);
    box-shadow: -5px 3px 10px 2px rgba(0, 0, 0, .05);
}

#niveaProfileLoginWrapper .view {
    position: relative;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    margin: 0 auto;
    /*padding-bottom: 20px;*/
}

#niveaProfileLoginWrapper #loggedout .password-description {
    padding: 5px 0 0 0;
}

#niveaProfileLoginWrapper .view .group {
    width: 100%;
    background: url(/img/presentation/sso/nivea-sso-background.jpg) repeat-x;
}

#niveaProfileLoginWrapper .view .group1 {
    width: 100%;
    padding-top: 15px;
    background-position: -350px 1px;
}

#niveaProfileLoginWrapper .view .group2 {
    width: 100%;
    background-position: -215px -109px;
    padding: 0 0 2px 0;
}

#niveaProfileLoginWrapper .view .group3 {
    width: 100%;
    background-position: -175px -109px;
    padding: 0 0 26px 0;
    -webkit-border-radius: 0px 0px 10px 10px;
    border-radius: 0px 0px 10px 10px;
}

#niveaProfileLoginWrapper .view .group > div {
    width: 250px;
    margin: 0 auto;
}

#niveaProfileLoginWrapper .view .group.group1 > div {
    padding-bottom: 15px;
}

#niveaProfileLoginWrapper .view .group.group2 > div,
#niveaProfileLoginWrapper .view .group.group3 > div {
    padding-top: 10px;
}

#niveaProfileLoginWrapper .view .group.group2 h4 {
    float: left;
    display: block;
}

#niveaProfileLoginWrapper .view .group > div > ul > li,
#validateemail li,
#niveaProfileLoginWrapper .view > ul > li {
    clear: both;
}


#niveaProfileLoginWrapper .input-container.password {
    position: relative;
    zoom: 1;
    height: 21px;
}

#niveaProfileLoginWrapper #register .input-container.password {
    height: 48px;
}


#niveaProfileLoginWrapper .input-container.password .real-container,
#niveaProfileLoginWrapper .input-container.password .placeholder-container {
    position: absolute;
}

    #niveaProfileLoginWrapper .input-container.password .placeholder-container input {
        color: #A9A9A9;
    }

#niveaProfileLoginWrapper #loggedout {
    z-index: 10;
}

    #niveaProfileLoginWrapper #loggedout .submit-buttons {
        /*padding-top: 25px;*/
    }


    #niveaProfileLoginWrapper #loggedout .input-container.form {
        height: 36px;
        margin-top: 18px;
    }

    #niveaProfileLoginWrapper #loggedout .forgot-password-link {
        padding: 0 0 6px 15px;
        background: url(/img/presentation/icon-key-blue.png) no-repeat 0 0;
    }

    #niveaProfileLoginWrapper #loggedout .no-account {
        padding: 0 0 3px 20px;
        background: url(/img/presentation/icon-profile-image.png) no-repeat 0 0;
        height: 10px;
    }

    #niveaProfileLoginWrapper #loggedout #social-network-carousel-container {
        margin-top: 10px;
    }

    #niveaProfileLoginWrapper #loggedout .log-in {
        float: left;
        margin: 10px 0 0 0;
    }

#niveaProfileLoginWrapper #loggedin {
    padding-top: 238px;
}

    #niveaProfileLoginWrapper #loggedin .group1 {
        background-position: -130px bottom;
        -webkit-border-radius: 0px 0px 10px 10px;
        border-radius: 0px 0px 10px 10px;
    }

    #niveaProfileLoginWrapper #loggedin .group1 {
        background-position: 360px 23px;
        -webkit-border-radius: 0px 0px 10px 10px;
        border-radius: 0px 0px 10px 10px;
    }

        #niveaProfileLoginWrapper #loggedin .group1 > div {
            width: auto;
        }


    #niveaProfileLoginWrapper #loggedin .menu-container {
        padding-top: 15px;
    }

    #niveaProfileLoginWrapper .panel-tab-container .profile-details-container-outer,
    #niveaProfileLoginWrapper #loggedin .profile-details-container-outer {
        position: relative;
    }

    #niveaProfileLoginWrapper .panel-tab-container .profile-image-small,
    #niveaProfileLoginWrapper #loggedin .profile-details-container-inner .profile-image-small {
        width: 13px;
        height: auto;
        position: relative;
        padding: 0 10px;
        top: 9px;
    }



#niveaProfileLoginWrapper .panel-tab-container .profile-image-small {
    float: left;
}

#niveaProfileLoginWrapper .panel-tab-container .profile-details-container-inner .profile-image-small {
    top: 5px;
}

#niveaProfileLoginWrapper #register .group1 {
    background-position: -130px 0;
    -webkit-border-radius: 0px 0px 10px 10px;
    border-radius: 0px 0px 10px 10px;
}

#validateemail {
    width: 100%;
    height: 3000px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999999;
    color: #00136F;
}

    #validateemail .haze {
        background: #FFF;
        opacity: .5;
        filter: alpha(opacity=50);
        width: 100%;
        height: 100%;
        position: fixed;
    }

    #validateemail .panel-container {
        left: 50%;
        top: 250px;
        position: relative;
        width: 400px;
        min-height: 160px;
        background: url(/img/presentation/html-templates/main-gradient.png) -240px 330px;
        margin-left: -200px;
        -webkit-border-radius: 0px 0px 10px 10px;
        border-radius: 0px 0px 10px 10px;
        -webkit-box-shadow: -2px 6px 10px -2px rgba(0, 0, 0, .2);
        box-shadow: -2px 6px 10px -2px rgba(0, 0, 0, .2);
        padding: 20px 0;
    }

        #validateemail .panel-container .close-btn {
            width: 18px;
            height: 18px;
            position: absolute;
            right: -9px;
            top: -9px;
            cursor: pointer;
            background: url(../img/presentation/modal-close-blue-circle.png) no-repeat 0 0;
        }

    #validateemail .content-container {
        width: 340px;
        margin: 0 auto;
        top: 20%;
        position: relative;
    }

    #validateemail .content-container {
        font-size: 12px;
        padding: 5px 0;
        top: 0px !important;
    }

        #validateemail .content-container p {
            font-size: 12px;
            padding: 5px 0;
        }

.sso-form-wrapper {
    width: 421px;
    margin: 100px 0 50px 75px;
    color: #00136F;
    padding-bottom: 50px;
}

    .sso-form-wrapper > h1 {
        font-family: NiveaBold;
        font-size: 30px;
        line-height: 30px;
        margin-bottom: 30px;
    }

    .sso-form-wrapper p.sso-description {
        margin-bottom: 30px;
        font-size: 16px;
        color: #333333;
        line-height: 23px;
    }

html[data-page-type="social-change-password"] .sso-form-wrapper p.sso-form-label,
html[data-page-type="social-change-email"] .sso-form-wrapper p.sso-form-label {
    font-size: 13px;
    margin-bottom: 0px;
    font-family: NiveaMedium;
    color: #8F8F8F;
}

html[data-page-type="social-change-password"] .sso-form-wrapper .input-container > span {
    display: block;
    margin-top: -9px;
}

    html[data-page-type="social-change-password"] .sso-form-wrapper .input-container > span[style*="hidden"] {
        display: none;
    }

html[data-page-type="social-change-password"] .password-note,
html[data-page-type="social-change-email"] .password-note {
    clear: both;
    padding: 10px 0 0 0;
}



html[data-page-type="social-change-email"] .sso-form-wrapper p.sso-description.change-email {
    margin-bottom: 12px;
}

.sso-form-wrapper > p.current-nivea-email {
    /*text-align: center;*/
    font-size: 12px;
    padding: 0 0 31px 20px;
}

#validateemail .content-container .submit,
.sso-change-email-validation,
.sso-form-wrapper .textbox {
    float: left;
}

#validateemail .content-container .submit {
    margin: 10px 0 0 0;
}

.sso-form-wrapper {
    height: 400px;
}

    .sso-form-wrapper .forgot-pass-send {
        float: left;
        margin: -5px 0 0 0;
    }

    .sso-form-wrapper .change-email-send {
        float: left;
        margin: 10px 0 0px 0px;
        clear: both;
    }

.sso-change-email-validation {
    float: left;
    width: 334px;
}

.sso-form-wrapper .change-pass-save {
    float: left;
    margin: 0 0 10px 0px;
}

html[data-page-type="social-change-password"] .sso-form-wrapper .change-pass-save {
    margin: 5px 0 10px 0px;
}

.sso-form-wrapper .input-container {
    display: block;
}

    .sso-form-wrapper .input-container.clear {
        padding: 10px 0;
        clear: both;
    }

    .sso-form-wrapper .input-container.save {
        display: block;
        width: 334px;
    }

html[data-page-type="social-change-email"] .sso-form-wrapper .input-container.save {
    margin-top: -10px;
}

html[data-page-type="social-change-email"] .sso-form-wrapper .input-container.clear {
    padding: 0px 0;
    clear: both;
}


.sso-change-email-textbox {
    padding: 20px 0;
}

.sso-change-email-password-textbox {
    padding: 0px 0;
}

    .sso-change-email-password-textbox .sso-form-label {
        margin-bottom: 10px !important;
    }

.sso-confirmation {
    clear: both;
    padding: 10px 0;
    font-size: 12px;
    /*font-weight: bold;*/
}

.error-message.sso-confirmation,
.error.sso-confirmation {
    color: #FF0000;
}

.cf:before,
.cf:after {
    display: table;
    content: "";
}

.cf:after {
    clear: both;
}

.cf {
    zoom: 1;
}


/*HTML RTL Product Carousel{*/

#product-feature .jcarousel-prev.jcarousel-prev-horizontal {
    left: 43px;
}

#product-feature .jcarousel-next.jcarousel-next-horizontal {
    right: 43px;
}


html[data-page-type="BrowserNotSuported"] #oldBrowser {
    position: relative;
}

    html[data-page-type="BrowserNotSuported"] #oldBrowser .content {
        position: absolute;
        top: 0;
        left: 0;
        padding: 30px;
        color: #061F9C;
    }

/* Product opinion */
.product-opinion {
    margin-bottom: 20px;
}

.product .ellipsis_text {
    font-size: 12.85px;
}

.sidebar > .product-opinion > p, .sidebar > .product-opinion > a {
    font-style: normal;
    /*color: #183E9E !important;*/
}

/* BEGIN GIGYA RATINGS & REVIEWS */
#gigya-rating .gig-rating-stars {
    display: block;
    margin-bottom: 2px;
    margin-right: 2px;
}

#gigya-rating .gig-rating-averageRating,
#gigya-rating .gig-rating-dimensions,
#gigya-comments .gig-composebox-share {
    display: none;
}

#gigya-rating .gig-rating-writeYourReview {
    border: none;
    background: none;
    filter: none;
    box-shadow: none;
    color: #8DABD0;
}

#gigya-ratings .gig-rating-writeYourReview,
#gigya-ratings .gig-rating-writeYourReview:link,
#gigya-ratings .gig-rating-writeYourReview:active,
#gigya-ratings .gig-rating-writeYourReview:visited,
#gigya-comments .gig-composebox-post {
    filter: none !important;
}

#gigya-comments .gig-composebox-post {
    float: right;
}

#gigya-rating .gig-rating-readReviewsLink {
    display: inline-block;
}

#gigya-rating a {
    line-height: 25px;
    text-decoration: none;
    color: #8DABD0;
    font-size: 11px;
    font-weight: bold;
    margin: 0px 3px;
    padding: 0px;
}

#gigya-rating .gig-rating-writeYourReview {
    padding-left: 0px;
}

#gigya-comments .gig-comment-status-pending {
    background: #009f1e;
}

#gigya-rating .gig-rating-writeYourReview:before {
    content: "|";
    padding-right: 4px;
}

#gigya-rating .gig-rating-star-empty {
    background: url('../img/presentation/Product_zone_light_bleu_star_big.png') no-repeat;
}

#gigya-rating .gig-rating-star-full {
    background: url('../img/presentation/Product_zone_white_star_big.png') no-repeat;
}

#gigya-rating .gig-rating-star-half {
    background: url('../img/presentation/Product_zone_half_star_big.png') no-repeat;
}

#gigya-comments {
    width: 600px !important;
}

    #gigya-ratings .gig-rating-button,
    #gigya-comments .gig-comments-more,
    #gigya-comments .gig-comment-summary,
    #gigya-comments .gig-composebox-post {
        font-family: 'NiveaBold','NiveaBold_Sub',Arial,Helvetica,sans-serif;
        text-transform: uppercase;
    }

    #gigya-ratings .gig-rating-button,
    #gigya-comments .gig-comments-more,
    #gigya-comments .gig-composebox-post {
        line-height: 30px;
        border: none;
        color: #fff;
        background: #132F7C;
    }

    #gigya-comments .gig-comments-more,
    #gigya-comments .gig-composebox-data {
        margin-bottom: 10px;
    }

    #gigya-comments .gig-comment-summary {
        color: #132F7C;
        font-size: 12px;
        font-style: normal;
        font-weight: normal;
        line-height: 15px;
        padding-left: 5px;
        word-break: break-word;
    }

    #gigya-comments .gig-comment-img {
        margin-top: 0 !important;
        margin-left: 0 !important;
    }

    #gigya-comments .gig-comment-data,
    #gigya-comments .gig-comment-self-data {
        position: relative;
    }

    #gigya-comments .gig-comment-replies {
        overflow: visible;
    }

    #gigya-comments .gig-comment-time {
        position: absolute;
        bottom: 39px;
        right: 0px;
    }

    #gigya-comments .gig-comments-linksContainer {
        min-height: 13px;
    }

    #gigya-comments .display-message {
        float: left;
        margin-right: 10px;
        width: 475px;
        text-align: right;
        margin-top: 6px;
    }

    #gigya-comments .gig-composebox-follow {
        display: none !important;
    }

#gigya-ratings .gig-rating-writeYourReview {
    max-width: 180px;
    line-height: normal;
    padding: 8px 14px 8px;
    float: right;
    margin-bottom: 10px;
    font-weight: bold;
}

.terms-guides {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    line-height: 30px;
    margin-right: 20px;
    cursor: pointer;
}

    .terms-guides:hover {
        color: #000 !important;
    }
/* star system */
#gigya-ratings .gig-rating-star-half {
    background: url('../img/presentation/List_of_reviews_zone_half_star_big.png') no-repeat;
}

#gigya-ratings .gig-rating-dimensions .gig-rating-star-half {
    background: url('../img/presentation/List_of_reviews_zone_half_star_small.png') no-repeat;
}
/* grey */
#gigya-comments .gig-composebox-rating .gig-composebox-rating-star {
    background: url('../img/presentation/Form_zone_gray_star_small.png') no-repeat;
}

#gigya-comments .gig-composebox-rating-_overall .gig-composebox-rating-star {
    background: url('../img/presentation/Form_zone_gray_star_big.png') no-repeat;
}
/* pink */
#gigya-ratings .gig-rating-dimensions .gig-rating-star-empty,
#gigya-comments .gig-comment-rating-star,
#gigya-comments .gig-comments-star-empty,
.gig-comments-container .gig-comment-rating-star {
    background: url('../img/presentation/List_of_reviews_zone_light_blue_star_small.png') no-repeat;
}

#gigya-ratings .gig-rating-star-empty {
    background: url('../img/presentation/List_of_reviews_zone_light_blue_star_big.png') no-repeat;
}
/* blue */
#gigya-comments .gig-composebox-rating-value .gig-composebox-rating-star-full,
#gigya-ratings .gig-rating-dimensions .gig-rating-star-full,
#gigya-comments .gig-comment-rating-star-full,
#gigya-comments .gig-comments-star-full,
.gig-comments-container .gig-comment-rating-star-full,
#gigya-comments .gig-selfreview-rating-star-full {
    background: url('../img/presentation/List_of_reviews_zone_blue_star_small.png') no-repeat;
}

#gigya-ratings .gig-rating-star-full,
#gigya-comments .gig-composebox-rating-_overall .gig-composebox-rating-star-full,
#gigya-comments .gig-selfreview-rating-_overall .gig-selfreview-rating-star-full,
#gigya-comments .gig-comments-star-editable-full {
    background: url('../img/presentation/List_of_reviews_zone_blue_star_big.png') no-repeat;
}
/* red star */
#gigya-comments .gig-composebox-field-error .gig-composebox-rating-star {
    background: url('../img/presentation/Form_zone_red_star_big.png') no-repeat;
}
/* hand thumb up blue */
#gigya-comments .gig-comment-vote-pos-down {
    background: url('../img/presentation/like_thumbs_up_pressed.png') no-repeat;
}

#gigya-comments .gig-composebox-rating-title {
    margin-right: 15px;
}

#gigya-comments .gig-comments-count {
    margin-top: 6px;
}

#gigya-comments .gig-comments-sort,
#gigya-comments .gig-comments-subscribe,
#gigya-comments .gig-comments-rss a {
    color: #273C69;
    text-decoration: underline;
}

#ratings-gigya-tab {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

.display-block {
    display: block !important;
}

#gigya-ratings .gig-rating-dimensions .gig-rating-stars {
    vertical-align: top;
    display: inline-block;
}

#gigya-ratings .gig-rating-dimension-title,
#gigya-ratings .gig-rating-dimension {
    vertical-align: bottom;
}

#gigya-rating .gig-rating-star {
    padding-right: 2px;
}

#gigya-comments .gig-composebox-data {
    position: relative;
}

#gigya-comments .login-modal-group {
    white-space: pre;
    font-weight: normal;
}

#gigya-comments .gig-composebox-site-login {
    white-space: pre;
    background: none;
    border: none;
    text-decoration: underline;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.gig-simpleShareUI .gig-simpleShareUI-buttonText {
    color: #000;
}

#gigya-comments .gig-composebox-summary-input {
    font-size: 12px;
}
/*fix for FF - remove if design changes */
@-moz-document url-prefix() {
    #gigya-comments .gig-comment[data-comment-id^="pending"] .gig-comment-time {
        bottom: 39px;
    }
}
/* END GIGYA RATINGS & REVIEWS */

/* Terms and Conditions & Rating Guidelines */
#terms {
    color: #000;
    padding: 30px;
}

    #terms a, #terms h2 {
        color: #273C69;
    }

    #terms p, #terms li {
        margin: 10px 0;
    }

    #terms li, #terms ul {
        list-style: inherit;
    }

    #terms ul {
        padding-left: 40px;
    }
/* Login Modal SSO */
.modal-SSO .body {
    min-height: 250px !important;
}

.modal-SSO .wrapper {
    height: auto !important;
}

#niveaLoginModal {
    padding-top: 45px;
    color: #00136F;
    z-index: 1200;
}

#social-network-carousel_arrow_right_disable,
#social-network-carousel_arrow_right {
    display: inline;
}

#niveaLoginModal a {
    color: #00136F;
}

#niveaLoginModal .disclaimer-link {
    text-decoration: underline;
    color: #00136F;
}

#niveaLoginModal .button.disabled,
#niveaLoginModal .button.disabled span,
#niveaLoginModal .learn-more.disabled,
#niveaLoginModal .learn-more.disabled span {
    background-image: url(/img/presentation/learn-more-sprite-disabled.png);
    cursor: default !important;
}

    #niveaLoginModal .learn-more.disabled > span > span > span {
        padding: 0 15px 0 0;
        background: url(/img/presentation/arrow-right-small-white.png) no-repeat right center;
    }

/*Fix for Touch (iOS devices)*/
html[data-sso-is-touch="true"] #niveaLoginModal .learn-more > span > span > span,
html[data-sso-is-touch="true"] #niveaLoginModal .learn-more.disabled > span > span > span {
    padding: 0 13px 0 0;
    background: url(/img/presentation/arrow-right-small-white.png) no-repeat right center;
}

#niveaLoginModal #register .titleSpacing {
    margin-bottom: 20px;
}

#niveaLoginModal .formLabel {
    margin-bottom: 5px;
    color: #8F8F8F;
    font-family: NiveaMedium;
    font-size: 12px;
}

#niveaLoginModal #register .formTerms {
    margin: 20px 0 0 0;
}

    #niveaLoginModal #register .formTerms a {
        text-decoration: underline;
    }

#niveaLoginModal #register .formSubmit {
    padding-top: 10px;
}

    #niveaLoginModal #register .formSubmit > .submit {
        float: left;
    }

#niveaLoginModal li.top-padding {
    padding-top: 20px;
}

#niveaLoginModal input[type="checkbox"] {
    position: absolute;
    left: -999em;
}

    #niveaLoginModal input[type="checkbox"] + label {
        overflow: hidden;
        padding: 4px 0 0 23px;
        margin-left: -23px;
        left: 23px;
        position: relative;
        display: block;
        max-width: 230px;
        background: url(/img/presentation/sso/checkbox-off.png) no-repeat 0 -4px;
    }

        #niveaLoginModal input[type="checkbox"] + label.aria-checked {
            background: url(/img/presentation/sso/checkbox-on.png) no-repeat 0 -4px;
        }

#niveaLoginModal .logged-in-divider {
    width: 300px;
    height: 10px;
    position: relative;
    bottom: 0px;
    background: url(/img/presentation/sso/logged-in-menu-divider.png) no-repeat center center;
}

#niveaLoginModal .spinner-container {
    background: url('/img/presentation/spinner-small.gif') no-repeat center center;
    width: 50px;
    height: 31px;
    float: left;
    margin: 9px 0 0 0;
}

#niveaLoginModal #loggedout .spinner-container {
    margin-top: 8px;
}

#niveaLoginModal #loggedout .gigya-title .spinner-container {
    margin-top: 0px;
    width: 64px;
    height: 22px;
}

#niveaLoginModal #register .spinner-container {
    width: 38px;
    float: left;
    margin: 0 0 0 0;
}


#validateemail .cta,
#niveaLoginModal .cta {
    cursor: pointer;
    text-decoration: underline;
    color: #00136F;
}

#niveaLoginModal .form-error {
    display: none;
    clear: both;
    padding: 5px 5px 0 5px;
}

    #niveaLoginModal .form-error.enabled {
        display: block;
    }

#validateemail .form-error,
#niveaLoginModal .form-error {
    color: #FF0000;
}


#validateemail .input-container,
#niveaLoginModal .input-container {
    clear: both;
}

    #niveaLoginModal .input-container.submit {
        padding-top: 10px;
    }

#niveaLoginModal .textbox span,
#niveaLoginModal .textbox input {
    float: left;
}

#niveaLoginModal .textbox .left {
    width: 11px;
    display: block;
    height: 21px;
    background: url(/img/presentation/campaigns/baby/text-box.png) 0 0 no-repeat;
    display: block;
}

.sso-form-wrapper .right,
#validateemail .textbox .right,
#niveaLoginModal .textbox .right {
    width: 11px;
    height: 21px;
    display: block;
    background: url(/img/presentation/campaigns/baby/text-box.png) 0 -21px no-repeat;
}

#niveaLoginModal .textbox input {
    background: url(/img/presentation/campaigns/baby/text-box.png) 0 -42px repeat-x;
    border: none;
    line-height: 20px;
    height: 21px;
    width: 210px;
    outline: 0;
}


#niveaLoginModal.open {
    top: 100px;
}

#niveaLoginModal h2 {
    font-family: NiveaBold;
    font-size: 24px;
    line-height: 22px;
}

#niveaLoginModal h2 {
    font-family: NiveaBold;
    font-size: 20px;
    line-height: 22px;
    color: #00136F;
}

#niveaLoginModal h3 {
    font-family: NiveaLight, Arial, Helvetica, sans-serif;
    font-size: 15px;
}


#niveaLoginModal h4 {
    font-family: NiveaBold;
    font-size: 14px;
    line-height: 20px;
}

#niveaLoginModal > p:first-child {
    padding-bottom: 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-weight: normal;
    font-size: 1.2em;
    line-height: 1.2em;
}

#niveaLoginModal .login-display {
    position: relative;
    width: 300px;
    height: auto;
    background: #FFF;
    -webkit-border-radius: 0px 0px 10px 10px;
    border-radius: 0px 0px 10px 10px;
}

html[data-sso-is-touch="false"] #niveaLoginModal .panel-tab .highlight:hover {
    background: url(/img/presentation/sso/logged-in-menu-highlight.png) repeat-x;
}

#niveaLoginModal .panel-tab .highlight > a {
    display: block;
    padding: 4px 0;
    text-decoration: none;
    color: #8F8F8F;
}

html[data-sso-is-touch="false"] #niveaLoginModal .panel-tab .highlight:hover > a {
    color: #FFF;
}

#niveaLoginModal .panel-tab-container {
    display: none;
    position: absolute;
    right: 0;
}

#niveaLoginModal .panel-tab {
    top: -30px;
    max-width: 480px;
    overflow: hidden;
    min-width: 200px;
    position: relative;
    height: 30px;
    margin: 20px auto 0 auto;
    background: url(/img/presentation/html-templates/main-gradient.png) -200px 371px;
    float: right;
    cursor: pointer;
    font-size: 12px;
    z-index: 991;
}

#niveaLoginModal .top-shadow,
#niveaLoginModal .panel-tab-open,
#niveLoginModal .panel-tab,
#niveaLoginModal.open .panel-tab {
    display: none;
}

#niveaLoginModal.close .panel-tab {
    top: 367px;
    z-index: 1;
    display: block;
}


#niveaLoginModal .panel-tab .panel-tab-text {
    text-transform: uppercase;
    padding: 5px 0 3px 0px;
    font-family: NiveaMedium;
    background: url(img/presentation/icon-profile-image.png) no-repeat 0 0;
    float: left;
}

#niveaLoginModal .panel-tab .user-email {
    padding: 7px 10px 0 0px;
    white-space: nowrap;
    font-weight: bold;
    position: relative;
    float: left;
}

#niveaLoginModal .panel-tab .login-url .user-email {
    float: none;
    margin-right: 40px;
}

#niveaLoginModal .panel-tab .top-shadow {
    top: 1px;
}

#niveaLoginModal .panel-tab-container .panel-tab .title {
    padding: 0 40px 0 40px;
}

#niveaLoginModal .panel-tab .outer {
    padding-top: 1px;
    position: relative;
    float: right;
    right: 50%;
}

#niveaLoginModal .panel-tab .inner {
    position: relative;
    float: left;
    right: -50%;
}

#niveaLoginModal .panel-tab .menu-list {
    position: relative;
    top: 0px;
    padding: 0;
    margin: 0;
}

#niveaLoginModal .panel-tab p {
    padding: 0 40px;
}

#niveaLoginModal .panel-tab-open {
    width: 40px;
    height: 20px;
    position: absolute;
    margin: 0px auto 0 -25px;
    left: 50%;
    cursor: pointer;
    text-align: center;
    bottom: -20px;
    background: url(/img/presentation/sso/nivea-sso-background.jpg) 167px -19px;
    -webkit-border-radius: 0px 0px 55px 55px;
    border-radius: 0px 0px 55px 55px;
    -webkit-box-shadow: -5px 3px 10px 2px rgba(0, 0, 0, .05);
    box-shadow: -5px 3px 10px 2px rgba(0, 0, 0, .05);
    z-index: 2;
}

#niveaLoginModal .login-display[data-current-view="register"] .panel-tab-open {
    background: url(/img/presentation/sso/nivea-sso-background.jpg) 168px -142px;
}

#niveaLoginModal .panel-tab-logged-in > div {
    width: 40px;
    height: 20px;
    position: absolute;
    margin: 0px auto 0 -25px;
    left: 50%;
    cursor: pointer;
    text-align: center;
    top: 114px;
}

    #niveaLoginModal .panel-tab-logged-in > div.open {
        overflow: visible;
        z-index: 996;
    }

    #niveaLoginModal .panel-tab-logged-in > div > div {
        top: -120px;
        width: 40px;
        height: 20px;
        position: relative;
        display: none;
        background: url(/img/presentation/html-templates/main-gradient.png) 740px 134px;
        z-index: 2;
        overflow: hidden;
        -webkit-border-radius: 0px 0px 55px 55px;
        border-radius: 0px 0px 55px 55px;
        -webkit-box-shadow: -5px 3px 10px 2px rgba(0, 0, 0, .05);
        box-shadow: -5px 3px 10px 2px rgba(0, 0, 0, .05);
    }

#wrapperLogin {
    top: 0px !important;
}

#niveaLoginModal[data-gigya-enabled="false"] #wrapperLogin[data-current-view="loggedout"] .panel-tab-open {
    background: url(/img/presentation/html-templates/main-gradient.png) 87px -3px;
}

#niveaLoginModal[data-gigya-enabled="false"] #wrapperLogin[data-current-view="register"] .panel-tab-open {
    background: url(/img/presentation/html-templates/main-gradient.png) 57px -92px;
}


#niveaLoginModal .panel-tab-logged-in > div > div > div,
#niveaLoginModal .panel-tab-open > div {
    width: 15px;
    height: 7px;
    background: url(../img/presentation/arrow-up-small-blue.png) no-repeat center center;
    position: relative;
    margin: 0 auto;
    top: 70%;
    margin-top: -11px;
}

#niveaLoginModal .content-container {
    width: 100%;
    height: 100%;
    background: white;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

#niveaLoginModal .view {
    position: relative;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    margin: 0 auto;
}

#niveaLoginModal #loggedout .password-description {
    padding: 5px 0 0 0;
}

#niveaLoginModal .view .group {
    width: 100%;
    background: url(/img/presentation/sso/nivea-sso-background.jpg) repeat-x;
}

#niveaLoginModal .view .group1 {
    width: 100%;
    padding-top: 15px;
    background-position: -350px 1px;
}

#niveaLoginModal .view .group2 {
    width: 100%;
    background-position: -215px -109px;
    padding: 0 0 2px 0;
}

#niveaLoginModal .view .group3 {
    width: 100%;
    background-position: -175px -109px;
    padding: 0 0 26px 0;
    -webkit-border-radius: 0px 0px 10px 10px;
    border-radius: 0px 0px 10px 10px;
}

#niveaLoginModal .view .group > div {
    width: 250px;
    margin: 0 auto;
}

#niveaLoginModal .view .group.group1 > div {
    padding-bottom: 15px;
}

#niveaLoginModal .view .group.group2 > div,
#niveaLoginModal .view .group.group3 > div {
    padding-top: 10px;
}

#niveaLoginModal .view .group.group2 h4 {
    float: left;
    display: block;
}

#niveaLoginModal .view .group > div > ul > li,
#validateemail li,
#niveaLoginModal .view > ul > li {
    clear: both;
}


#niveaLoginModal .input-container.password {
    position: relative;
    zoom: 1;
    height: 21px;
}

#niveaLoginModal #register .input-container.password {
    height: 48px;
}


#niveaLoginModal .input-container.password .real-container,
#niveaLoginModal .input-container.password .placeholder-container {
    position: absolute;
}

    #niveaLoginModal .input-container.password .placeholder-container input {
        color: #A9A9A9;
    }

#niveaLoginModal #loggedout {
    z-index: 10;
}

    #niveaLoginModal #loggedout .input-container.form {
        height: 36px;
        margin-top: 18px;
    }

    #niveaLoginModal #loggedout .forgot-password-link {
        padding: 0 0 6px 15px;
        background: url(/img/presentation/icon-key-blue.png) no-repeat 0 0;
    }

    #niveaLoginModal #loggedout .no-account {
        padding: 0 0 3px 20px;
        background: url(/img/presentation/icon-profile-image.png) no-repeat 0 0;
        height: 10px;
    }

    #niveaLoginModal #loggedout #social-network-carousel {
        margin-top: 10px;
    }

    #niveaLoginModal #loggedout .log-in {
        float: left;
        margin: 10px 0 0 0;
    }

#niveaLoginModal #loggedin {
    padding-top: 238px;
}

    #niveaLoginModal #loggedin .group1 {
        background-position: -130px bottom;
        -webkit-border-radius: 0px 0px 10px 10px;
        border-radius: 0px 0px 10px 10px;
    }

    #niveaLoginModal #loggedin .group1 {
        background-position: 360px 23px;
        -webkit-border-radius: 0px 0px 10px 10px;
        border-radius: 0px 0px 10px 10px;
    }

        #niveaLoginModal #loggedin .group1 > div {
            width: auto;
        }

    #niveaLoginModal #loggedin .menu-container {
        padding-top: 15px;
    }

    #niveaLoginModal .panel-tab-container .profile-details-container-outer,
    #niveaLoginModal #loggedin .profile-details-container-outer {
        position: relative;
    }

    #niveaLoginModal .panel-tab-container .profile-image-small,
    #niveaLoginModal #loggedin .profile-details-container-inner .profile-image-small {
        width: 13px;
        height: auto;
        position: relative;
        padding: 0 10px;
        top: 9px;
    }

#niveaLoginModal .panel-tab-container .profile-image-small {
    float: left;
}

#niveaLoginModal .panel-tab-container .profile-details-container-inner .profile-image-small {
    top: 5px;
}

#niveaLoginModal #register .group1 {
    background-position: -130px 0;
    -webkit-border-radius: 0px 0px 10px 10px;
    border-radius: 0px 0px 10px 10px;
}

#niveaLoginModal h2,
#niveaLoginModal h3 {
    margin: 0;
}

/* Youtube share bar */
.yt-share-bar {
    font-family: NiveaBold, Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1;
    color: #00136F;
    width: 100%;
    margin-top: 5px;
}

    .yt-share-bar .share-label {
        padding-right: 20px;
        display: inline-block;
        line-height: 28px;
        text-transform: uppercase;
    }

    .yt-share-bar .share-buttons {
        float: right;
    }

        .yt-share-bar .share-buttons > * {
            float: left;
            background-image: url('/img/presentation/html-templates/yt-share-sprite.png');
            background-repeat: no-repeat;
            height: 28px;
            color: transparent;
            cursor: pointer;
            margin-left: 5px;
        }

            .yt-share-bar .share-buttons > *:hover {
                -ms-opacity: 0.7;
                opacity: 0.7;
            }

            .yt-share-bar .share-buttons > *:active {
                -moz-transform: scale(0.97);
                -ms-transform: scale(0.97);
                -o-transform: scale(0.97);
                -webkit-transform: scale(0.97);
                transform: scale(0.97);
            }

    .yt-share-bar .facebook {
        width: 170px;
        background-position: right top;
    }

    .yt-share-bar .twitter {
        width: 153px;
        background-position: left top;
    }

    .yt-share-bar .email {
        width: 142px;
        background-position: -185px 0;
    }

    .yt-share-bar .share-button-text {
        color: white !important;
        text-transform: uppercase;
        text-align: right;
        padding: 6px 10px;
    }
/*channel advisor*/
.buy-button.channel-advisor-button {
    bottom: 15px;
    display: inline-block;
    height: 25px;
    margin-top: 10px;
    position: absolute;
    line-height: 25px;
}


    .buy-button.channel-advisor-button span {
        height: auto;
    }

.buy-now-button {
    margin-top: 15px;
}

    .buy-now-button span {
        height: auto;
    }

    .buy-now-button .icon {
        background-image: url('../img/presentation/cart-icon.png');
        height: 10px;
        margin-right: 5px;
        width: 12px;
    }

.shops .item .button-cart {
    background-position: 0 20px;
    background-image: url('../img/presentation/buttons_blues.png');
    width: 100px;
    line-height: 20px;
    margin: 7px auto 0;
}


    .shops .item .button-cart .end {
        height: 20px;
        width: 16px;
    }


    .shops .item .button-cart .icon {
        background-image: url(../img/presentation/cart-icon.png);
        background-position: 0px 3px;
        height: 20px;
        width: 16px;
    }

.channel-advisor {
    background-color: #fff;
    -webkit-box-shadow: 0 0 12px 0 #a5a8ae;
    -moz-box-shadow: 0 0 12px 0 #a5a8ae;
    box-shadow: 0 0 12px 0 #a5a8ae;
    display: block;
    margin: 0 auto;
    width: 665px;
}

.headings {
    background-color: #f1f0ee;
}

.channel-advisor .headings {
    padding: 40px 0 32px;
    text-align: center;
}

    .channel-advisor .headings h3 {
        font-weight: bold;
        font-size: 25px;
        line-height: 26px;
    }

    .channel-advisor .headings h4 {
        font-size: 13px;
        line-height: 26px;
        margin-top: 25px;
    }

.local-shops {
    padding: 18px 0 30px;
}

    .local-shops a {
        display: inline-block;
        font-weight: bold;
        font-size: 13px;
        line-height: 16px;
        margin-top: 16px;
        width: 155px;
        vertical-align: top;
    }

    .local-shops .items {
        margin-top: 18px;
    }

    .local-shops a span {
        background-image: url('../img/presentation/homepage-rework/link-arrow.png');
        background-repeat: no-repeat;
        display: inline-block;
        height: 8px;
        width: 11px;
    }

.modalClose-advisor {
    background: url(../img/presentation/modal-close-blue.png) no-repeat center;
    cursor: pointer;
    height: 15px;
    position: absolute;
    right: 13px;
    top: 13px;
    width: 15px;
    z-index: 10;
}

.product-variant {
    border: 1px solid #00136f;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    font-weight: bolder;
    margin-top: 11px;
    padding: 7px 0px;
    width: 72px;
}

    .product-variant + .product-variant {
        margin-left: 10px;
    }


.product-variant, .shops .button-cart {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

.shop {
    border: 1px solid #dbd8d3;
    display: inline-block;
    height: 78px;
    position: relative;
    width: 141px;
}

    .shop img {
        left: 50%;
        position: relative;
        top: 50%;
        -webkit-transform: translate3d(-50%, -50%, 0);
        -moz-transform: translate3d(-50%, -50%, 0);
        -ms-transform: translate3d(-50%, -50%, 0);
        -o-transform: translate3d(-50%, -50%, 0);
        width: 70%;
    }

.shops {
    border-bottom: 1px inset;
    display: inline-block;
    padding: 20px 0 25px;
    width: 100%;
}


    .shops .item {
        display: inline-block;
        margin-top: 23px;
    }

    .shops .button-cart {
        color: #fff;
        display: block;
        font-size: 12px;
        font-weight: bold;
        overflow: auto;
        width: 105px;
        line-height: 32px;
        margin: 7px auto 0;
    }

    .shops .no-shops-available .description {
        color: #00136f;
        font-size: 17px;
        padding: 0 0 105px;
        line-height: 28px;
        text-align: center;
        width: inherit;
    }

    .shops .no-shops-available .icon {
        background-image: url(../img/presentation/no-shop.png);
        background-repeat: no-repeat;
        background-position: 0 75px;
        display: block;
        margin: 0 auto;
        height: 150px;
        width: 65px;
    }

    .shops .button-cart .icon {
        background-image: url(../../../img/presentation/cart-icon.png);
        background-position: -1px 9px;
        display: inline-block;
        float: left;
        background-repeat: no-repeat;
        height: 32px;
        width: 16px;
    }

    .shops .button-cart .end {
        display: block;
        background-image: url(../img/presentation/buttons3.png);
        background-repeat: no-repeat;
        height: 32px;
        width: 18px;
    }


    .shops .button-cart .end, .shops .button-cart .text {
        float: left;
    }

        .shops .button-cart .end.left {
            background-position: -44px -196px;
        }

        .shops .button-cart .end.right {
            background-position: -120px -196px;
        }


    .shops .item + .item {
        margin-left: 10px;
    }

    .shops .item:nth-of-type(4n+1) {
        margin-left: 0;
    }

    .shops .item:nth-of-type(-n+5) {
        margin-top: 12px;
    }

.variants-shops {
    margin: 0 25px;
}

    .variants-shops .title {
        font-size: 13px;
        line-height: 26px;
    }

    /* Buttons */
    .variants-shops .item > a {
        display: block;
    }
    /* NOTE - Set max-width in context */
    .variants-shops .item .button-body .text {
        max-width: 100px;
    }

    .variants-shops .button {
        text-align: center;
        width: 100%;
        margin: 10px 0;
        background-image: none;
        padding-left: 0;
        display: block;
    }

    .variants-shops .button-body {
        cursor: pointer;
        display: inline-block;
        height: 35px;
    }

        .variants-shops .button-body .text span {
            position: relative;
            width: auto;
            display: inline-block;
        }

            .variants-shops .button-body .text span:before {
                content: '';
                position: absolute;
                background-image: url('../img/presentation/cart-icon.png');
                background-position: 0px 3px;
                background-repeat: no-repeat;
                height: 20px;
                width: 16px;
                top: 4px;
                left: -16px;
                display: inline-block;
            }

    .variants-shops .text {
        float: left;
        vertical-align: middle;
        padding-left: 4px;
    }

    .variants-shops .button .text {
        background: url("../img/presentation/campaigns/variant-shops/sprite-x.png") repeat-x 0 -164px;
        height: 33px;
        line-height: 33px;
        text-transform: uppercase;
    }

        .variants-shops .button .text,
        .variants-shops .button .text a {
            color: #fff;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 11px;
            font-weight: bold;
        }

    .variants-shops .button-body .text {
        min-width: 50px;
    }

    .variants-shops .button .end.left {
        background-position: -44px -196px;
    }

    .variants-shops .button .end {
        background-image: url("../img/presentation/campaigns/variant-shops/sprite.png");
        background-repeat: no-repeat;
        height: 33px;
        width: 18px;
    }

    .variants-shops .button .end,
    .variants-shops .button .text {
        float: left;
        vertical-align: middle;
    }

        .variants-shops .button .end.right {
            background-position: -120px -196px;
        }
/* IE9 - could not be tested
    .variants-shops .item .shop img {
        margin-left: -50px\9;
    }
    */


.product-variant.active, .product-variant:hover {
    background-color: #00136f;
    color: #fff;
}

.headings,
.local-shops p,
.local-shops a,
.shops p {
    color: #00136f;
    text-transform: uppercase;
}


.thank-you-message {
    margin: 50px auto 25px;
    padding: 0 100px;
    text-align: center;
}

    .thank-you-message > h2 {
        font-size: 32px;
    }

    .thank-you-message > .sub-heading {
        font-family: NiveaLight, Arial, Helvetica, sans-serif;
        font-size: 16px;
        margin-top: 10px;
    }

    .thank-you-message > h2,
    .thank-you-message > h3 {
        color: #001780;
        text-transform: none;
    }

    .thank-you-message > img {
        margin-top: 25px;
    }

    .thank-you-message > p {
        color: #555;
        display: block;
        font-size: 15px;
        margin: 30px auto 0;
        width: 65%;
    }

        .thank-you-message > p a {
            color: #555;
            text-decoration: none;
        }


div#qual_mask.qual_mask {
    background-color: rgba(0, 0, 0,0.99) !important;
    backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
}