/* main menu styles */

@media screen and (min-device-width: 561px) and (min-device-height:561px) {
    /* L A R G E   S C R E E N */

    body {
        background-image: url("../images/tiles/marble.jpg");
    }

    #wideMenuBar {
        background-color: #eee;
        border-top: 1px solid white;
        box-shadow: var(--weakBoxShadow);
        margin-bottom: 15px;
        max-width:100%;
        justify-self:center;
        justify-content:space-evenly;
    }

    #pageTitle img {
        width: 300px;
    }

    .onlySmallScreen {
        /* hide elements, which are marked for only Widescreen usage */
        display: none !important;
    }
}

@media screen and (max-device-width: 560px), (max-device-height: 560px) {
    /* S M A L L   S C R E E N */
    body {
/*     background-color: lightgray;*/
        background-image: url("../images/tiles/marble.jpg");
    }

    #pageTitle img { width: 200px; }

    .onlyWideScreen {
        /* hide elements, which are marked for only Widescreen usage */
        display: none !important;
    }

    .navi:hover {
        width: 150px;
    }

    .navi:hover > div {
        /* this makes the vertical menu items visible */
        display: block;
    }

}

/* ========================================================================
/* EXPERIMENTAL ONLY: use golden menu button                    
/* ========================================================================
.golden-btn {
    /*  display: inline-block; 
    outline: none;
    font-family: Ultra;
    font-size: 1em;
    box-sizing: border-box;
    border: none;
    border-radius: .3em;
    height: 2.75em;
    line-height: 2.5em;
    padding: 0 1em;
    box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4), inset 0 -2px 5px 1px rgba(139,66,8,1), inset 0 -1px 1px 3px rgba(250,227,133,1);
    background-image: linear-gradient(180deg, #b47e11, #fef1a2, #bc881b);
    border: 1px solid #a55d07;
    color: rgb(120,50,5);
    text-shadow: 0 2px 2px rgba(250, 227, 133, 1);
    cursor: pointer;
    transition: all .2s ease-in-out;
    background-size: 100% 100%;
    background-position: center;
}
    .golden-btn:focus,
    .golden-btn:hover {
        background-size: 150% 150%;
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23), inset 0 -2px 5px 1px #b17d10, inset 0 -1px 1px 3px rgba(250,227,133,1);
        border: 1px solid rgba(165,93,7,.6);
        color: rgba(120,50,5,.8);
    }
    .golden-btn:active {
        box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4), inset 0 -2px 5px 1px #b17d10, inset 0 -1px 1px 3px rgba(250,227,133,1);
    }
    */

/* ========================================================================
    Horizontal drowdown for wide screen
===========================================================================*/

/* The container <div> - needed to position the dropdown content */
.dropdownWS { }

/* Style The Dropdown Button */
.btnDropWS {
    background-color: #eee;
    border-top: none;
    border-bottom:none;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
    color: black;
    font-size:1.1em;
    padding: 5px;
    cursor: pointer;
    width: 110px;       /* width of the menu BAR button on top */
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdownWS:hover .btnDropWS {
    background-image: linear-gradient(white, #eee);
}

/* Dropdown Content (Hidden by Default) */
.dropdownWS-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    border-radius: 5px;
    min-width: 120px;                       /* width of the drop down menu items */
    box-shadow: var(--weakBoxShadow);       /* box shadow of drop down menu items */
    z-index: 1;
}

    /* Links inside the dropdown */
    .dropdownWS-content a {
        color: black;
        text-decoration: none;
        display: block;
        padding: 10px;
        border: 1px solid grey;
        float: none;
        margin: 0;
    }

        .dropdownWS-content a:first-child {
            /* this is a single navigation item */
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        .dropdownWS-content a:last-child {
            /* this is a single navigation item */
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        /* Change color of dropdown links on hover */
        .dropdownWS-content a:hover {
            box-shadow: 0 4px 4px rgba(0,0,0, .5);
            font-weight: bold;
            background-color: rgba(255,245,194, 0.5);
            border: 1px solid #a55d07;
            color: var(--myBrownColor);
        }

/* Show the dropdown menu on hover */
.dropdownWS:hover .dropdownWS-content {
    display: block;
}


/* ========================================================================
    Cascading vertical drowdown for small screen
===========================================================================*/
    
.navi {
    /* this is the overall container of all navigation elements */
    position: relative;
    display: inline-block;
    font-family:Arial;
    font-size:14px;
    padding:0; border:0;
    background-color:transparent;
}

    .navi div a {
        /* this is a single navigation item */
        border: 1px solid grey;
        color: black;
        display: block;
        float: none;
        text-decoration: none;
        padding: 15px 10px;
        margin: 0;
    }

            .navi div a:first-child {
                /* this is a single navigation item */
                border-top-left-radius:5px;
                border-top-right-radius:5px;
            }
            .navi div a:last-child {
                /* this is a single navigation item */
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
            }
#aReset {
    border-top:2px solid black;
    color:red;
}

.navi div a:hover, .navi > div > div:hover > a {
    /* item or subitem being hovered over */
    /* also entry item of a submenu while the submenu is oben */
    box-shadow: 0 4px 4px rgba(0,0,0, .5);
    font-weight: bold;
    background-color: rgba(255,245,194, 0.5);
    border: 1px solid #a55d07;
    color: var(--myBrownColor);
}

.navi > div > div > a {
    /* this is the entry item of a submenu */
    border-radius: 0 !important;
    width: 150px;
}

    .dropContent {
        /* this is the main or a sub content container */
        margin: 0;
        float: left;
        position: relative;
        display: none;          /* important to be initially hidden */
        width: 100%;
        position: absolute;
        border: 0;
        z-index: 100;           /* once visible, place dropdown in front of other elements */
        border-radius: 5px;
        box-shadow: 3px 4px 4px black;
        background-color:#fff;
    }

div.navi div div.dropContent {
    /* position of submenu items 130 pixels right of parent */
    left: 130px;
    top: 0px;
}

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