/**
* FORMATIERUNG MOBILE-NAVIGATION
*
* Formatierung aller Mobile-Navigationselemente auf der Website
*
* @copyright       Copyright 20012-2013, .hausformat
* @link            http://www.hausformat.com
*/

@media all {

    /*-------------------------------------------------------------------------*/
    /* Mobile Navigation / mobile navigation */


    #mobile-nav {
        /*display: none;*/ /* Defined in nav.css */
        background-color: #FFF;
        border-bottom: 1px solid #444;
    }

    #mobile-nav .ym-grid {
        border-bottom: 1px solid #444;
    }

    #mobile-nav .ym-grid.ym-equalize>[class*="ym-g"] {
        vertical-align: middle;
        text-align: center;
    }

    #mobile-nav .ym-grid.ym-equalize>.ym-g40:first-child {
        border-right: 1px solid #DDD;
    }

    #mobile-nav .ym-grid.ym-equalize>[class*="ym-g"] a,
    #mobile-nav .ym-grid.ym-equalize>[class*="ym-g"] a:hover {
        display: block;
        color: #444;
        font-size: 13px !important;
        padding: 10px 0;
        text-decoration: none;
        border-bottom: none;
    }

    #mobile-nav .ym-grid.ym-equalize>[class*="ym-g"] a:focus,
    #mobile-nav .ym-grid.ym-equalize>[class*="ym-g"] a:active {
        color: #b8c200; /*BRANDCOLOR*/
        border-bottom: none;
    }

    #mobile-menu-button {
        color: #FFF;
        cursor: pointer;
        font-weight: bold;
        padding: 0;
        overflow: hidden;
    }

    #mobile-menu-button #menu-button-icon {
        padding: 10px 0;
        width: 100%;
        float: right;
        background: #333 url('../../gui/icon-responsive-nav.png') no-repeat center;
    }

    #mobile-nav .mobile-mainnav {
        margin-left: 0;
        margin-bottom: 0;
        background-color: #FFF;
    }

    #mobile-nav .mobile-mainnav li {
        list-style-type: none;
        position: relative;
        background: none;
        margin-left: 0;
        padding-left: 0;
    }

    #mobile-nav .mobile-mainnav li a {
        border-bottom: 1px solid #DDD;
        display: block;
        color: #444;
        opacity: 0.8;
        font-weight: bold;
        text-decoration: none;
        padding: 1em 18px 1em 10px;
    }

    #mobile-nav .mobile-mainnav li.active a {
        color: #b8c200; /*BRANDCOLOR*/
        opacity: 1;
    }

    #mobile-nav .mobile-mainnav li.active li {
        background-color: #EEE;
    }

    #mobile-nav .mobile-mainnav li li a {
        font-weight: normal;
    }

    #mobile-nav .mobile-mainnav li.active li a {
        color: #444;
        opacity: 0.8;
    }

    #mobile-nav .mobile-mainnav li.active li.active a {
        color: #b8c200; /*BRANDCOLOR*/
        opacity: 1;
    }

    #mobile-nav .mobile-mainnav li.active li.active li {
        background-color: #FFF;
    }

    #mobile-nav .mobile-mainnav li.active li.active li a {
        color: #323232;
        opacity: 0.8;
        padding: 0.75em 18px 0.75em 23px;
    }

    #mobile-nav .mobile-mainnav li.active li.active li.active a {
        color: #b8c200; /*BRANDCOLOR*/
        opacity: 1;
    }

    #mobile-nav .mobile-mainnav li .mobile-subnav {
        margin-left: 0;
        margin-bottom: 0;
    }

    #mobile-nav .mobile-mainnav li .mobile-subnav a:before {
        padding-left: 12px;
    }

    #mobile-nav .mobile-mainnav li .mobile-subnav a:before {
        content: "–";
        width: 12px;
        display: inline-block;
        margin-left: -12px;
    }

    #mobile-nav .mobile-mainnav li .mobile-subnav.third-level a {
        padding-left: 23px;
    }

    #mobile-nav .mobile-mainnav a.mobile-expand {
        width: 20%;
        border: none !important;
        padding: 11px 0 !important;
        text-align: center;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
        font-weight: bold !important;
        font-size: 20px;
        background: #DDD;
    }

    #mobile-nav .mobile-mainnav a.mobile-expand:before {
        content: none !important;
    }

}