@CHARSET "UTF-8";

#navigation {
    background: #f0f0f0;
    padding: 0;
}

#menu {
    float: left;
}

#language_wrapper {
    float: right;
}

#navigation ul {
    list-style: none;
    margin: 0;
    display: flex;
    align-content: stretch;
}

#navigation li {
    display: inline;
    position: relative;
}

#navigation li a,
#navigation li span.wissenschaft {
    padding: 10px;
    display: flex;
    align-items: center;
    color: #333333;
}

#navigation li a:hover,
#navigation li span.wissenschaft:hover,
#language_wrapper:hover #language_icon {
    color: #333333 !important;
    background: #d9d9d9 !important;
    cursor: pointer;
}

#navigation li a.active {
    color: #990000;
}

#navigation li i {
    line-height: 20px;
}

#navigation li i + span {
    margin-left: 4px;
}

#navigation ul ul {
    display: none;
}

#navigation ul li:hover ul {
    display: block;
    position: absolute;
    background: #f0f0f0;
    z-index: 99;
}

#navigation li li {
    padding: 3px 0;
    margin: 0;
}

#navigation li li a {
    display: block;
}

#navigation ul li span.wissenschaft {
    cursor: context-menu;
}

/* --- color of active section --- */
body[class*="Publication"] #navigation li a.profil,
body[class*="Publication"] #navigation li a.publikationen {
    background: #ffcc00;
    color: white;
}

body[class*="Sprachverarbeitung"] #navigation li span.wissenschaft,
body[class*="Sprachverarbeitung"] #navigation li a.sprachverarbeitung {
    background: #009900;
    color: white;
}

body[class*="Programming"] #navigation li span.wissenschaft,
body[class*="Programming"] #navigation li a.programming {
    background: #336699;
    color: white;
}

body[class*="Profil"] #navigation li a.profil {
    background: #797979;
    color: white;
}

body[class*="Fotografie"] #navigation li a.fotografie {
    background: #990000;
    color: white;
}

body[class*="Bastel"] #navigation li a.bastelecke {
    background: #8b32a8;
    color: white;
}

#language_icon {
    display: none;
}

/* --- Mobile Anpassungen --- */
@media screen and (max-width: 730px) {
    #navigation li i + span {
        display: inline-block;
        max-width: 0;
        transition: max-width .6s;
        overflow: hidden;
        margin-left: 0;
    }

    #navigation li:hover i + span {
        margin-left: 4px;
        max-width: 100px;
        transition: max-width 1s;
    }


    #language_icon {
        display: block;
        position: relative;
        padding: 10px;
    }

    #language {
        display: none;
    }

    #language_wrapper:hover #language {
        display: block;
        position: absolute;
        right: 0;
        background: #f0f0f0;
        z-index: 99;
    }

    #language_wrapper #language ul,
    #language_wrapper #language li {
        display: block;
    }
}