﻿/* CSS Document */

.colors {
    color: #13576B; /* HEADER BACKGROUND */
}

/* HEADER */
#headercontainer {
    /**/width: 100%;
    /**/background-color: #FFF;
}

body.NEW #headercontainer {
    /**/width: 100%;
    font-size:1.6em;
    /***/background-color: #13576B;
}

    #headercontainer header {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }



/* STATE IFRAME */
#stateiframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 0px;
    height: 0px;
    visibility: hidden;
    /* DEBUG /border:#F00 solid 1px;/* END DEBUG */
}
/* END STATE IFRAME */

#topstrip {
    position: relative;
    text-align: right;
    width: 100%;
    height: 20px;
    background-image: url('../images/_bg01.png');
    background-repeat: repeat-y;
    background-size: 100% 100%;
    border-bottom: #FFF solid 1px;
}

body.NEW #topstrip {
    position: relative;
    text-align: right;
    width: 100%;
    height: 30px;
    background:none;
    border:none;
}

    #topstrip .content {
        max-width: 1260px;
        text-align: right;
        margin: 0 auto;
    }

/* NAV */

nav {
    position: relative;
    width: 1260px;
    min-height: 90px;
    margin: auto;
    /* DEBUG /border-bottom:#F00 solid 1px;/* END DEBUG */
}

body.NEW nav {
    position: relative;
    width: 1580px;
    min-height: 100px;
    margin: auto;
    /* DEBUG /border-bottom:#F00 solid 1px;/* END DEBUG */
}

body.NEW nav .BREAKFORMENU {
    display:block;
}

@media only screen and (max-width: 1600px) {
    body.NEW nav {
        width: 1260px;
    }
}

@media only screen and (max-width: 1280px) {
    body.NEW nav {
        width:93.7%;
    }

        body.NEW nav .BREAKFORMENU {
            display: none;
        }
}

    nav a.LINKHOME {
        position: absolute;
        left: 0px;
        width: 225px;
        height: 114px;
        background-image: url(../images/logoCBAEDUCAmargin.png);
        background-repeat: no-repeat;
        background-size: contain;
        margin-top: 0px;
        margin-left: 0px;
        /* DEBUG /border:#F00 solid 1px;/* END DEBUG */
    }

    body.NEW nav a.LINKHOME {
        position: absolute;
        left: 0px;
        width: 260px;
        height: 70px;
        background-image: url(../Images/uxImages/NEW/logoCBAEDUCA_white.png);
        background-repeat: no-repeat;
        background-size: contain;
        margin-top: 0px;
        margin-left: 0px;
        /* DEBUG /border:#F00 solid 1px;/* END DEBUG */
    }



    nav .menuitems {
        position: relative;
        margin-left: 220px;
        text-align: center;
        /* DEBUG /border-bottom:#F00 solid 1px;/* END DEBUG */
    }

        body.NEW nav .menuitems {
            position: relative;
            margin-left: 300px;
            text-align: right;
            padding-top:40px;
            margin-top: 0px;
            margin-bottom: 0px;
            vertical-align:middle;
            /* DEBUG /border-bottom:#F00 solid 1px;/* END DEBUG */
        }

    nav a {
        color: #005432;
        display: inline-block;
    }

        nav a.first {
            /* DEBUG /border:#F00 solid 1px;/* END DEBUG */
        }

        nav a.last {
            margin-bottom: 17px;
        }

    nav .break {
        display: none;
    }

    nav .nolomitko {
        display: block;
    }

    nav .lomitko {
        display: none;
    }

    nav a.textlink {
        position: relative;
        /*width: 7%;*/
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 0.8em;
        font-weight: normal;
        vertical-align: top;
        padding: 2em 0.8em 1em 0.8em;
        background-color: #FFF;
        border: #ccc dotted 1px;
        border-top: none;
        -moz-border-radius: 0em 0em 1em 1em;
        -khtml-border-radius: 0em 0em 1em 1em;
        -webkit-border-radius: 0em 0em 1em 1em;
        border-radius: 0em 0em 1em 1em;
        white-space: nowrap;
        margin-bottom: 2px;
    }

    body.NEW nav a.textlink {
        position: relative;
        /*width: 7%;*/
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 0.7em;
        font-weight: normal;
        vertical-align: top;
        padding: 0.6em 1.4em 0.4em 1.4em;
        background-color: #FFF;
        border: none;
        border-top: none;
        -moz-border-radius: 0.8em;
        -webkit-border-radius: 0.8em;
        border-radius: 0.8em;
        white-space: nowrap;
        margin-bottom: 2px;
    }

        body.NEW nav a.textlink.LINKEDUCATION {
            font-size: 0.7em;
            line-height:1em;
            padding: 0.4em 1.4em 0.2em 1.4em;
        }

        nav a.textlink.LINKLOGIN {
            color: #FFF;
            font-size: 0.675em;
            white-space: normal;
            background-color: #68B876;
        }

            body.NEW nav a.textlink.LINKLOGIN {
                color: #FFF;
                font-size: 0.675em;
                line-height:1em;
                padding: 0.35em 0.75em 0.2em 1.5em;
                white-space: normal;
                background-color: transparent;
            }

        nav a.textlink.LINKLOGOUT {
            color: #FFF;
            white-space: normal;
            background-color: #68B876;
        }

        body.NEW nav a.textlink.LINKLOGOUT {
            color: #FFF;
            white-space: normal;
            background-color: transparent;
        }

        nav a.textlink:hover {
            border: #00592E solid 1px;
            border-top: none;
        }

        nav a.textlink.active {
            color: #FFF;
            border: #00592E solid 1px;
            border-top: none;
            background-color: #00592E;
        }

        body.NEW nav a.textlink.active {
            color: #FFF;
            border: none;
            border-top: none;
            background-color: #A9936D;
        }

        body.NEW nav a.textlink.LINKLOGIN.active {
            color: #A9936D;
            padding: 0.35em 0.75em 0.2em 1.5em;
            border: none;
            border-top: none;
            background-color: transparent;
        }

    nav #MenuOpener {
        position: absolute;
        top: 5px;
        right: 35px;
        width: 30px;
        height: 30px;
        background-image: url(../images/menuOpener30x30.png);
        background-repeat: no-repeat;
        background-size: contain;
        cursor: pointer;
        display: none;
    }

    body.NEW nav #MenuOpener {
        position: absolute;
        top: 75px;
        right: 0px;
        width: 30px;
        height: 30px;
        background-image: url(../images/uxImages/NEW/menuOpener30x30.png);
        background-repeat: no-repeat;
        background-size: 80% 70%;
        background-position:center center;
        cursor: pointer;
        display: none;
    }

    nav #LanguageSwitch {
        font-size:0.7em;
        vertical-align:top;
        display:inline-block;
    }

        nav #LanguageSwitch .lang {
            color: #00592E;
            padding: 3px 1em 2px 1em;
            border-left: #FFF solid 0px;
            border-right: #FFF solid 0px;
            -moz-border-radius: 0.4em;
            -webkit-border-radius: 0.4em;
            border-radius: 0.4em;
            background-color: #FFF;
            cursor:pointer;
            display:none;
        }

        nav #LanguageSwitch .lang:hover {
            color: #FFF;
            background-color: #A9936D;
        }

        body[data-language="CZ"] nav #LanguageSwitch .lang.EN {
            display: block;
        }

        body[data-language="EN"] nav #LanguageSwitch .lang.CZ {
            display: block;
        }

    nav #loggedcontainer {
        position: absolute;
        top: -21px;
        right: 0px;
        text-align: right;
        white-space: nowrap;
        /* DEBUG /border:#F00 solid 1px;/* END DEBUG */
    }

        body.NEW nav #loggedcontainer {
            /**/position: absolute;
            /***/top: -26px;
            /**/right: 0px;
            /**/text-align: right;
            /**/white-space: nowrap;
            /* DEBUG /border:#F00 solid 1px;/* END DEBUG */
        }

#loggedcontainer .fblabel {
    color: #FFF;
    display: inline-block;
    white-space: nowrap;
}

body.NEW #loggedcontainer .fblabel {
    display:none;
}

#loggedcontainer .logged + .fblabel {
    display: none;
}

#loggedcontainer .facebook_link {
    height: 18px;
    color: #FFF;
    font-size: 14px;
    vertical-align: top;
    background-image: url(../images/facebook30x30.png);
    background-size: contain;
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 24px;
    margin-right: 0px;
    white-space: nowrap;
    display: inline-block;
}

body.NEW #loggedcontainer .facebook_link {
    height: 18px;
    color: #FFF;
    font-size: 14px;
    vertical-align: top;
    background-image: url(../images/facebook30x30.png);
    background-size: contain;
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 24px;
    margin-right: 0px;
    white-space: nowrap;
    display: none;
}

nav #loggedcontainer .logged {
    vertical-align: top;
    display: inline-block;
}

nav .USERNAME {
    color: #FFF;
    font-size: 0.9em;
    padding: 2px 0 0 0;
    display: inline-block;
}

.USERNAME .NAME {
    font-weight: bold;
}

nav a.LINKADMIN {
    height: 18px;
    font-size: 0.9em;
    font-weight: normal;
    padding: 2px 1em 0 1em;
    color: #FFF;
    border-left: #FFF solid 1px;
    border-right: #FFF solid 1px;
    background-color: #68B876;
    margin-left: 1em;
    vertical-align: top;
}

body.NEW nav a.LINKADMIN {
    height: 17px;
    font-size: 0.7em;
    font-weight: normal;
    padding: 3px 1em 2px 1em;
    color: #00592E;
    border-left: #FFF solid 0px;
    border-right: #FFF solid 0px;
    -moz-border-radius: 0.4em;
    -webkit-border-radius: 0.4em;
    border-radius: 0.4em;
    background-color: #FFF;
    margin-left: 1em;
    vertical-align: top;
}

    nav a.LINKADMIN:hover {
        background-color: #008248;
    }

    nav a.LINKADMIN.active {
        background-color: #008248;
    }

body.NEW nav a.LINKADMIN:hover {
    color: #FFF;
    background-color: #A9936D;
}

body.NEW nav a.LINKADMIN.active {
    color: #FFF;
    background-color: #A9936D;
}

/* END NAV */

/* ESHOP */

.GLOBALESHOPBASKETSHORTCUTCONTAINER {
    position: absolute;
    right: 0px;
    top: 5px;
    min-width: 1em;
    min-height: 1em;
    /* DEBUG / border: #F00 solid 1px; /* END DEBUG */
}

body.NEW .GLOBALESHOPBASKETSHORTCUTCONTAINER {
    position: absolute;
    right: 0px;
    top: -5px;
    min-width: 1em;
    min-height: 1em;
    /* DEBUG / border: #F00 solid 1px; /* END DEBUG */
}

@media only screen and (max-width: 480px) {
    .GLOBALESHOPBASKETSHORTCUTCONTAINER {
        top: 0px;
    }

    body.NEW .GLOBALESHOPBASKETSHORTCUTCONTAINER {
        top: -5px;
    }
}

/* END ESHOP */

/* TITLE STRIP */

#titlestrip {
    position: relative;
    text-align: center;
    width: 100%;
    border-bottom: #00592E solid 1px;
}

body.NEW #titlestrip {
    /**/position: absolute;
    bottom:-2em;
    /**/text-align: center;
    /**/width: 100%;
    /**/border-bottom: #00592E solid 0px;
}

    #titlestrip .text {
        position: relative;
        width: 1260px;
        color: #00592E;
        text-align: right;
        font-size: 0.9em;
        font-style: italic;
        margin-top: 4px;
        margin-bottom: 4px;
        /* DEBUG /border:#F00 solid 1px;/* END DEBUG */
        display: inline-block;
    }

    body.NEW #titlestrip .text {
        /**/position: relative;
        /***/width: 1580px;
        /***/color: #13576B;
        /***/text-align: left;
        /**/font-size: 0.9em;
        /***/font-style: normal;
        font-weight:300;
        /**/margin-top: 4px;
        /**/margin-bottom: 4px;
        /* DEBUG /border:#F00 solid 1px;/* END DEBUG */
        /**/display: inline-block;
    }

@media only screen and (max-width: 1600px) {
    body.NEW #titlestrip .text {
        width: 1260px;
    }
}

@media only screen and (max-width: 1280px) {
    body.NEW #titlestrip .text {
        width: 93.75%;
    }
}

/* END TITLE STRIP */

/* IMAGER */
#imager {
    position: relative;
    font-size: 0;
    min-height: 1px;
    border-bottom: #00592E solid 3px;
}

    #imager #SlidesPlayerContainer {
        position: relative;
        width: 100%;
        text-align: center;
        /* DEBUG /border-bottom:#F00 solid 1px;/* END DEBUG */
    }

#SlidesPlayerContainer .slidesPlayer {
    position: relative;
    width: 800px; /*800px;*/
    height: 360px; /*300px;*/
    display: inline-block;
    /* DEBUG /border-bottom:#F00 solid 1px;/* END DEBUG */
}
/* END IMAGER */

@media only screen and (max-width: 1280px) {
    nav {
        width: 93.75%;
    }

        nav a.textlink {
            width: auto; /* 23%;*/
        }

    #titlestrip .text {
        width: 93.75%;
    }

    .GLOBALESHOPBASKETSHORTCUTCONTAINER {
        right: -20px;
    }

    body.NEW .GLOBALESHOPBASKETSHORTCUTCONTAINER {
        right: 0px;
    }
}

@media only screen and (max-width: 1024px) {
    nav a.textlink {
        width: auto; /* 23%;*/
        padding: 0.7em 1em 0.7em 1em;
    }

    nav .break { /* .logged */
        display: block;
        border: #F00 solid 0px;
    }

    body.NEW nav .break { /* .logged */
        display: none;
        border: #F00 solid 0px;
    }

    nav a.textlink.LINKLOGIN {
        font-size: 0.875em;
    }

    nav .nolomitko {
        display: none;
    }

    nav .lomitko {
        display: inline-block;
    }

    nav a.first2 {
        margin-left: 120px;
    }

    nav a.last {
        margin-bottom: 4px;
    }
}

@media only screen and (max-width: 768px) {
    nav a.textlink {
        font-size: 0.7em;
        padding: 0.95em 0.9em 0.95em 0.9em;
    }

        nav a.textlink.LINKLOGIN {
            font-size: 0.725em;
        }
}

@media only screen and (max-width: 640px) { /* MAX_WIDTH_A */
    nav {
        min-height: 50px;
        /* DEBUG /border-bottom:#F00 solid 1px;/* END DEBUG */
    }

        nav .menuitems {
            position: absolute; /* checked property for MAX_WIDTH_A */
            width: 220px;
            right: 70px;
            border: #00592E solid 1px;
            border-top: none;
            -moz-border-radius: 0em 0em 1em 1em;
            -khtml-border-radius: 0em 0em 1em 1em;
            -webkit-border-radius: 0em 0em 1em 1em;
            border-radius: 0em 0em 1em 1em;
            background-color: #FFF;
            padding: 4px 4px 2px 4px;
            z-index: 100;
        }

        body.NEW nav .menuitems {
            position: absolute; /* checked property for MAX_WIDTH_A */
            width: 50%;
            top:75px;
            right: 40px;
            font-size:1em;
            border: #00592E solid 1px;
            border-top: none;
            -moz-border-radius: 0.8em;
            -webkit-border-radius: 0.8em;
            border-radius:0.8em;
            background-color: #FFF;
            padding:0.1em 0.1em 0.2em 0.1em;
            margin-left:0;
            z-index: 100;
        }


        nav a.LINKHOME {
            width: 132px;
            height: 67px;
            margin-top: 0px;
            /* DEBUG /border:#F00 solid 1px;/* END DEBUG */
        }

        nav .menuitems a.textlink {
            width: auto;
            font-size: 1em;
            padding: 0.5em 0.4em 0.4em 0.4em;
            display: none;
        }

        body.NEW nav .menuitems a.textlink {
            width: auto;
            font-size: 0.8em;
            padding: 0.25em 0.24em 0.24em 0.24em;
            display: none;
        }

        nav .menuitems a.active {
            display: block;
        }

        nav .menuitems a.last {
            margin-bottom: 10px;
        }

        nav .menuitems a.textlink.LINKLOGIN {
            left: 0px;
            font-size: 1em;
        }

    body.NEW nav .menuitems a.textlink.LINKLOGOUT,
    body.NEW nav .menuitems a.textlink.LINKLOGIN {
        color: #00592E;
    }

        nav #MenuOpener {
            display: block;
        }

        body.NEW nav #MenuOpener {
            display: block;
        }

    #titlestrip {
        text-align: left;
    }

        #titlestrip .text {
            font-size: 0.8125em;
            margin-top: 1px;
            margin-bottom: 2px;
            margin-left: 3.75%;
            margin-right: 0%;
        }
}

@media only screen and (max-width: 480px) {
    nav {
        min-height: 40px;
        /* DEBUG /border-bottom:#F00 solid 1px;/* END DEBUG */
    }

        nav a.LINKHOME {
            width: 105px;
            height: 53px;
            margin-top: 0px;
            /* DEBUG /border:#F00 solid 1px;/* END DEBUG */
        }

        nav .menuitems {
            width: 180px;
        }

            nav .menuitems a.textlink {
                font-size: 0.8em;
            }

                nav .menuitems a.textlink.LINKLOGIN {
                    font-size: 0.8em;
                }

    body.NEW #titlestrip {
        bottom: -1.5em;
    }

    #titlestrip .text {
        font-size: 0.65em;
    }

    body.NEW #titlestrip .text {
        font-size: 0.65em;
    }
}

@media only screen and (max-width: 410px) {
    nav .menuitems {
        right: 60px;
        width: 160px;
        padding: 3px 3px 1px 3px;
    }

    nav #MenuOpener {
        width: 20px;
        height: 20px;
    }

    body.NEW nav #MenuOpener {
        width: 30px;
        height: 30px;
    }

    nav .menuitems a.textlink {
        font-size: 0.7125em;
        padding: 0.35em 0.1em 0.2em 0.1em;
    }

        nav .menuitems a.textlink.LINKLOGIN {
            font-size: 0.7125em;
        }
}

@media only screen and (max-width: 380px) {
    nav a.LINKHOME {
        width: 94px;
        height: 48px;
        margin-top: 0px;
        /* DEBUG /border:#F00 solid 1px;/* END DEBUG */
    }

    nav .menuitems {
        width: 140px;
    }

        nav .menuitems a.textlink {
            font-size: 0.7em;
        }

            nav .menuitems a.textlink.LINKLOGIN {
                font-size: 0.7em;
            }
}

/* END HEADER */