/*
 * Diese CSS-Datei muss *nach* der aus Magento stammenden CSS-Datei eingebunden werden und gleich die importierten CSS-Regeln
 * so an, dass sie im Drupal-Theme passen, ohne das die originale Magento-CSS-Datei editiert werden muss
 */

/* ==============================================================================
 *
 * Anpassung fuer das Mobile Haupt-Menue
 *
 * ==============================================================================*/

@media (min-width: 992px) {
    .navbar-toggle {
        display:none;
    }
}

#name-and-slogan {
    display:none;
}

#bs-navbar-collapse {
    display:none;
}

#bs-navbar-collapse.row-offcollapse-left {
    width:270px !important;
}

#bs-navbar-collapse.menu_open {
    display:block !important;
}

#bs-navbar-collapse.menu_not_open {
    display:none !important;
}

#bs-navbar-collapse.row-offcollapse-left {
    left:0px;
    padding-left:23px;
    overflow: auto;
}

#bs-navbar-collapse.row-offcollapse-left .navbar-left {
    width:100%;
}


.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: white;
}

.navbar-toggle .icon-bar+.icon-bar {
    margin-top: 4px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.bootstrap-body .navbar-toggle {
    margin-top: 0px;
    position: relative;
    top:-5px;
}

.bootstrap-body .navbar-toggle.menu_open {
    left: 290px;
}

.nav .dropdown-toggle .caret {
    margin-top: 9px !important;
}

.nav .dropdown-toggle .caret,
.nav .dropdown-toggle:hover .caret {
    border-top-color: white !important;
    border-bottom-color: white !important;
}

#bs-navbar-collapse.row-offcollapse-left li.level0 {
    float: none;
    width:100%;
}

#bs-navbar-collapse.row-offcollapse-left li.level0 a {
    padding-left:0px;
}


#bs-navbar-collapse.row-offcollapse-left ul.dnavX {
    display:none !important;
}

.bootstrap-body .navbar-toggle{

    left:0;
    margin-left: 15px;
    margin-top: 13px;
    position: fixed;
    top: 0;
}

#bs-navbar-collapse.row-offcollapse-left{
    z-index:999;
}

#bs-navbar-collapse .nav.navbar-nav .nav-4, #bs-navbar-collapse .nav.navbar-nav .nav-5, #bs-navbar-collapse .nav.navbar-nav .nav-6 {
    display: inline-block !important;
}


/* ==============================================================================
 *
 * Anpassung fuer das Mega Menu
 *
 * ==============================================================================*/

#dnav1 {
    width:224px !important;
}

#dnav1 ul, #dnav1 li {
    list-style: none !important;
}

#dnav1 ul.level1 {
    border-right:1px solid #bfc3c2;
    box-shadow: 0px 1px #3a3a3a;
}

#dnav1 li.level1 a span {
    font-weight: bold !important;
}

#dnav1, #dnav1 li ul {
    height: 503px !important;
}

#dnav1 li ul {
    height: 489px !important;
}

#dnav1 .fa-angle-right:before {
    color: #4f5456 !important;
}

#dnav1 > li.level1:not(first-child) > .fa-angle-right {
    margin-top:12px !important;
}

#dnav1 > li.level1:first-child > .fa-angle-right {
    margin-top:17px !important;
}

#dnav1 > li.level1 > .fa-angle-right {
    margin-left:-20px;
}

#dnav1 li.level1 a {
    width:204px !important;
}

.category-thumb-dummy {
    width:82px;
    height:50px;
}

#dnav1 li.level2 {
    padding-top: 8px !important;
    padding-bottom: 9px !important;
}

#dnav1 li.level2 a span {
    font-weight: normal !important;
}

#bs-navbar-collapse .nav-1 li.level1 li.level2.nav-1-1-0.pre {
    list-style: none;
}

@media (min-width: 992px) {
    .nav.navbar-nav .nav-1 ul.level1 {
        left: 199px !important;
    }
    .nav-1 li.level1 li.level2 {
        width:255px;
    }
    #dnav1 li.level1 li.level2 a {
        width:auto !important;
    }
}

#dnav1 li.berater .fa-angle-right {
    padding-top:5px !important;
}

#dnav1 li.berater li:hover {
    text-decoration: underline;
}

li.berater ul {
    margin-left:0px;
}

.fa-iconfix {
    margin:0px !important;
    margin-left:4px !important;
    padding:0px;
    display:inline-block;
}

/* ==============================================================================
 *
 * Anpassungen fuer bestimmte Sprachen
 *
 * ==============================================================================*/

.i18n-it .nav.navbar-nav .nav-1 ul.level1 li.berater{
    top: 121px;
}

/* ==============================================================================
 *
 * Anpassung fuer das Mobile Sub-Menue (2. und 3. Ebene)
 *
 * ==============================================================================*/

.mobile_submenu {
    display:none;
}

.mobile_submenu a.dropdown-toggle,
.mobile_submenu ul a.dropdown-toggle {
    display:none !important;
    height:0px !important;
    width:0px !important;
}

.mobile_submenu ul {
    margin-left:0px;
}

.mobile_submenu ul li {
    list-style: none;
    float:none;
    padding-left: 0 !important;
    padding-bottom:10px;
}

.mobile_submenu ul li.first {
    padding-top: 6px !important;
}

.mobile_submenu ul li  a {
    padding: 10px 0px 10px 0px;
}


.mobile_submenu ul li a span {
    white-space: normal;
    line-height: 1.7;
    min-height: inherit;
    font-family: 'Arial', sans-serif;
    font-size: 15px;
    overflow: hidden;
    font-weight: bold !important;
    padding-bottom: 3px;
    padding-top: 5px;

}

.mobile_submenu ul li a  {
    text-decoration: none;
}

ul.submenu_mobil_third {
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
    list-style: none;
}

ul.submenu_mobil_third li.level2  {
    padding: 0px;
}

ul.submenu_mobil_third li.level2 a {
    padding: 7px 7px 7px 0px;
    font-family: 'Arial', sans-serif;
    font-size: 15px;
    font-weight: normal;
    line-height: 1.7;
}

ul.submenu_mobil_third li.level2 a span {
    font-family: 'Arial', sans-serif;
    font-size: 15px;
    font-weight: normal !important;
    line-height: 1.7;
    padding:0px;
}

ul.submenu_mobil_third li.level2 a:hover span {
    text-decoration: underline;
}

#bs-navbar-collapse .nav-1 li.level1 li.level2 a {
    height: auto !important;
    padding-top:4px;
}

/* ==============================================================================
 *
 * Anpassung fuer den Seitentitel um Alignment mit Menü zu realisieren
 *
 * ==============================================================================*/


#name-and-slogan {
    padding-left:10px;
}

/* ==============================================================================
 *
 * Anpassung fuer das erste Menue-Level im Desktop-Modus
 *
 * ==============================================================================*/
@media (min-width: 992px) {

    #name-and-slogan {
        display:block;
    }

    #firstcontentcontainer {
        z-index: 0;
        position: relative;
    }

    #bs-navbar-collapse {
        display: block;
    }

    #bs-navbar-collapse {
        height: auto;
        position: static;
        top: 0px;
    }

    #bs-navbar-collapse .navbar-left {
        width: auto;
    }

    #bs-navbar-collapse .caret {
        padding: 10px 6px 5px 7px;
    }

    #bs-navbar-collapse li.level0 {
        height: 40px;
        float: left;
        width: auto;
    }

    .handmade_site_megamenu_replacement_dropdown {
        padding-bottom: 6.5px !important;
    }

    .level0.level-top:hover > a {
        height: 100%;
    }

    .level0.level-top:hover > a,
    .level0.level-top.open > a {
        background-color: #4e5255 !important;
    }

    .level0.level-top:hover > a span,
    .level0.level-top.open > a span{
        color: white !important;
    }

    .level0.level-top:hover > a .caret ,
    .level0.level-top.open > a .caret {
        background: transparent url("images/caret_white.png") left top no-repeat !important;
    }

    .nav.navbar-nav .nav-2 ul.level0 > li {
        display: block;
    }
}

/* ==============================================================================
 *
 * Anpassung füuer das zweite Menue-Level  (das erste Submenue-Level)
 *
 * Hier ist im Shop jedes Submenu per ID "dav0...n" bezeichnet und die Styles ueber die
 * ID zugewiesen. In Drupal muss das dynamischer gehandhabt werden, Dazu werden die
 * ID-spezifischen Eigenschaften aus der megamenu.css hier ueber die Klasse ul.dnavX
 * zugewiesen
 *
 * ==============================================================================*/

@media (min-width: 992px) {
    ul.dnavX {
        left:auto !important;
        top:38px;
        border-left:0 solid transparent !important;
        border-bottom:0 solid transparent !important;
        background: #4e5255 !important;
        border: none;
        -webkit-border-radius: 0px !important;
        -moz-border-radius: 0px !important;
        border-radius: 0px !important;
        padding-top: 0px;
        padding-bottom:0px !important;
    }

    ul.dnavX > li > a,
    ul.dnavX > li > a span {
        color: #f6f6f6;
        background: #4e5255;
        font-family: 'Arial', sans-serif !important;
        font-size: 15px !important;
        font-weight: bold;
        line-height: 1.7 !important;
        white-space: normal;
    }

    ul.dnavX > li > a {
        padding: 10px;
    }


    ul.dnavX > li:hover > a > span,
    ul.dnavX > li > a:hover,
    ul.dnavX > li > a:hover > span {
        background: #f6f6f6;
        color: #4b565d;
    }

    ul.dnavX > li.first > a {
        padding-top: 17px !important;
    }
}

/* ==============================================================================
 *
 * Anpassung füer Land/Sprach-Auswahl-Menü
 *

 * ==============================================================================*/

#dnavX_country {
    width: 960px !important;
    left: 0px !important;
}

.countries_select_menu_wide {
    padding-top: 15px !important;
    padding-bottom: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.country_select_row {
    width: 25%;
    float:left;
    margin-bottom:15px;
}

.country_select_row a {
    padding-left:0px !important;
    padding-bottom:8px !important;
    color: #f6f6f6 !important;
    font-family: 'Arial', sans-serif !important;
    font-size: 15px !important;
    font-weight: bold !important;
}

.country_select_row img {
    padding-bottom: 3px;
    margin-right: 8px;
}

.country_select_row a:hover {
    text-decoration: none;
}

#countries_select_menu_mobile_dummy_li {
    padding-top:0px !important;
}

.countries_select_menu_mobile_inner li {
    float:none !important;
}

.countries_select_menu_mobile_inner li a {
    height:auto !important;
    padding-top: 0px !important;
    padding-bottom: 14px !important;
}

.countries_select_menu_mobile_inner li img {
    padding-bottom: 3px;
    margin-right: 8px;
}