/**
 * MVC-Framework by Reichl IT Services GmbH 2014-2018
 * Product-ID 361
 * (c) Copyright in 2014-2018 by Reichl IT Services GmbH, Munich, Germany. All rights reserverd.
 * Erwerb einer Nutzungslizenz unter info.361@reichl-it.de
 */

/**
 * menuline.css
 *
 * provides a menubar with normally hidden and automatic expanding submenues
 */
 

/* mobile devices (all) */
@media only screen and (max-width: 565px) { 
    ul#menu {
        margin: 8px 0px 0px 10px;
    }
    
    ul#menu li {
        width: 100px;
        text-align: center;
        padding: 0.5em;
        margin: 0px 8px 8px 0px;
        background-color: var(--menu_background);  /* standard menu is in headline_bgnd, but mobile menu requires own background  */
    }

    ul#menu li a {
        display: block;
        border-right: 0px !important;
    }

    ul#menu li ul.sub-menu {
        display: block;
        position: relative;
        top: 0;
    }

    ul#menu li ul.sub-menu li {
        font-size: 12px;
        background-color: #4a4c55;
    }
    
    ul#menu li.active ul.sub-menu li {
        background-color: #2C2F3B;
    }

    ul#menu ul.sub-menu {
        padding-bottom: 0;
    }
}

/* non mobile devices (all) */
@media only screen and (min-width: 566px) { 
    ul#menu {
        margin: 0px 0px 0px 10px;
    }

    ul#menu li {
        margin-left: -4px;
    }
    
    .menuline_bgnd {
        background: var(--menu_background);
    }
}

/* whole line, but NOT always at top of screen */
.menuline_bgnd {
    position: absolute;
    left: 0px;
    width: 99.9%;
    height: var(--menu_background_height);
    z-index: -1;
}

ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin-left: 6px; /* increase, if autoleftline should be used */
}

ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}

/* http://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
/* "margin-left: -4px;" media dependent only for menu "line", not for menu "buttons" on mobile devices */
ul#menu li {
    padding: 0px; /* our li uses "padding-bottom: 0.75em;", but we don't want padding in menus */
}

ul#menu li:first-of-type {
    margin-left: -4px;
}

ul#menu ul.sub-menu {
    /*
    padding-top: 12px;
    padding-bottom: 12px;
    */
    padding-top: 5px;
    padding-bottom: 5px;
}

ul#menu ul.sub-menu li {
    margin: 0;
    width: 100%;
    display: list-item;   /* each sub-menu item in one line */
}

/*Link Appearance*/
ul#menu li a {
    /*background: transparent;*/
    color: var(--menu_color);
    text-decoration: none;
    padding: 1px 10px 2px 10px;
    border-right: 1px dotted;
    width: 100%;
}

ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;
    display:inline-block;
    white-space: nowrap; /* prevents line breaks */
}
/*
ul#menu li.active a ul.sub-menu li {
    background-color: #2c2f3b;
    color: #fff;
}
ul#menu li.active a ul.sub-menu li a {
    color: #fff;
}
*/
/* hover menu and sub-menu item */
ul#menu li a:hover {
  background-color: var(--menu_active_background, #BBB);
  color: var(--menu_active_color);
}

/* active menu item */
ul#menu li.active a {
  background-color: var(--menu_active_background, #BBB);
  color: var(--menu_active_color);
}

/* active menu's sub-menu items */
ul#menu li.active ul a {
  color: var(--menu_color);
}

/* active menu's active sub-menu items */
ul#menu li.active ul .active a {
  background-color: var(--menu_active_background, #BBB);
  color: var(--menu_active_color);
}

/* hover sub-menu item */
ul#menu li ul.sub-menu li a:hover {
  background-color: var(--menu_active_background, #BBB);
  color: var(--menu_active_color);
}

/* menu: position relative */
ul#menu li {
    position: relative;
}

/* sub-menu of non-active menu */
ul#menu li ul.sub-menu {
    display: none;
    position: absolute;
    left: -10px;  /* li of main menu has 10px padding, and we want sub-menu to open on the left border of li of main menu */
    background-color: var(--menu_active_background, #BBB);
    z-index: 2; /* otherwise the sub-menu might be visible, but disappear as soon as the mouse cursor leaves the menu line */
}

/* sub menu of active menu*/
ul#menu li.active ul.sub-menu {
    background-color: var(--menu_active_background, #DDF);
}

ul#menu li ul.sub-menu li a {
    padding: 2px 15px 4px 15px;
    font-size: 12px;
    border:  none;
}

ul#menu li:hover ul.sub-menu {
    display: block;
}

ul#menu li ul.sub-menu:hover {
    display: block !important;
}