/*  ==========================================================================
    bs_menubar.css
    by  Philip A. C. Ralph
    for Bergbausammlung Rotthausen
    -----------------------------------------
    menubar at top of page
    Menueleiste oben
    -----------------------------------------
    https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_topnav
    https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar
    ==========================================================================
*/
/*  *****************************
        Menubar     class="menubar"
        contains >=0 link .menubar a
        and      >=0 menu .dropdown

        Menu        class="dropdown"
        contains 1      button      class="dropdown-button"
        and      >=1    menu item   class="dropdown-content"

     *****************************
*/


/*  ==========================================
**    NO SUPPORT FOR variables IN iExplore !!!
**  ==========================================
*/

/*
* -------------------------------------------
    :root {
      --gelsengruen:    #4CAF50;
      --anthrazit:      #333;
      --duenbier_rot:   rgb(128,0,0);
      --duenbier_lila:  rgb(128,0,128);
      --duenbier_grau:  #EEF1F6;
    }
* -------------------------------------------
*/

body {margin:0;}

.menubar {
    overflow: hidden;
    background-color: #333; /*var(--anthrazit);*/
    /* font-family: Arial,Helvetica,sans-serif; */
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: bold;
    /*
    padding: 2px 4px 2px 2px;
    */
}

/*
    =====================
    Menu bar
    =====================
*/
.menubar a {
    font-size: 14px;
    font-weight: bold;
    float: left;
    display: block;
    color: #f2f2f2;
    background-color: #333; /*var(--anthrazit);*/
    text-align: center;
    padding: 12px 14px;
    text-decoration: none;
}

/*
    ===============
    Dropdown menu
    ===============
*/

.dropdown,
.dropdown-active {
    float: left;
    overflow: hidden;
}

.dropdown .dropdown-button,
.dropdown .dropdown-button-active {
    font-size: 14px;
    font-weight: bold;
    border: none;
    outline: none;
    color: white;
    padding: 12px 14px;
    background-color: #333; /* inherit ;*/
}

/*
The padding property is a shorthand property for the following individual padding properties:
    padding-top
    padding-right
    padding-bottom
    padding-left

*/

/*
    ====================================
    Colour active elemnts to show user position
    of the current page within the overall structure
    ====================================
*/
.menubar a.active,
.dropdown-active,
.dropdown .dropdown-button-active,
.dropdown-content a.active {
    background-color: #4CAF50; /* var(--gelsengruen); */
    font-weight: bold;
    color: white;
}
/* ----------------------------------------------------- */

/*
    ====================================
    Highlight on mouse hover
    ====================================
*/

/*
following is original definition from
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar
*/

.menubar a:hover,
.dropdown:hover .dropdown-button,
.dropdown:hover .dropdown-button-active {
    background-color: #ddd;
    color: black;
}

/* alternative colouring
**    .dropdown:hover .dropdown-button {
**        background-color: #3e8e41;
**}
*/

/*
    ===================
    Dropdown menu items
    ===================
*/

.dropdown-content {
    font-size: 14px;
    font-weight: normal;
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    padding: 6px 14px 6px 12px;
    box-shadow: 0px 12px 14px 0px rgba(0,0,0,0.6);
    z-index: 1;
}

.dropdown-content a {
    font-size: 14px;
    font-weight: normal;
    float: none;
    display: block;
    color: black;
    background-color: #f9f9f9;
    padding: 6px 14px 6px 12px;
    /* padding: 6px 0px 0px 0px; */
    /* padding: 12px 14px; */
    text-decoration: none;
    text-align: left;
}
/* unsupported attributes:
    target: "_top";
*/

.dropdown-content a:hover {
    background-color: #ddd;
}

/* alternative colouring
.dropdown-content a:hover {
    background-color: #f1f1f1
}
*/

.dropdown:hover .dropdown-content {
    display: block;
}