/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Global Institute for Water Security | Global Water Futures
 * Copyright (c) 2020 All Rights Reserved
 * Author: Stephen O'Hearn
 *
 * Style sheet for the ultra lightweight menu system called STEPHENS-menu I wrote to replace Bootstrap's menu
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

html, body, #header {
    margin: 0 !important;
    padding: 0 !important;
}

.STEPHENS-menu-item-level1 span span img,
.STEPHENS-menu-item-compact-navigation span span img,
.STEPHENS-dropdown-menu-level1 a img {
    width: 24px;
    height: 24px;
    opacity: 0.4;
}

.STEPHENS-menu-item-level1 span span img {
    margin-left: 2px;
    margin-right: -1px;
}

.STEPHENS-menu-item-compact-navigation span span img {
    margin-right: 5px;
}

.STEPHENS-dropdown-menu-level1 a img {
    margin-left: 3px;
    margin-right: 0px;
    transform: translateY(5px);
}


.STEPHENS-navigation-container {
    /*do not set height of this */
    border: 0px solid red; /*howto.where*/
    /*Use position=relative to have menuing move up when page is scrolled (Set STEPHENS-reserved-top-space height to zero )*/
    /*Use position=fixed    to have menuing stay visble at the top all the time (Set STEPHENS-reserved-top-space height to, say, height:60px or so so content does not slide underneath menu and logo)*/
    /*position: relative;*/
    position: fixed;
    left: 0;
    top: 0;
    /* BRING WHOLE THING DOWN!! padding is the only way to margin from the top!! yay, it works!!! */
    padding: 0px;
    padding-top: 0px;
    width: 100vw;
    background-color: transparent; /*important statement*/
    margin-left: 0px;
    z-index: 999; /*important statement*/
    margin: 0;
}

/* 
    Used to colorize the menu bar
*/
.STEPHENS-menu-backing-bar-special,
.STEPHENS-menu-backing-bar,
.STEPHENS-reserved-top-space {
    height: 108px;
}

.STEPHENS-menu-backing-bar {
    border: 0px solid blue; /*howto.where*/
    background-color: rgba(255,255,255,.96);
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    z-index: 200;
}

/* 
   Used with .STEPHENS-menu-backing-bar to do the actual pushing of the content down and 
   to control scrolled content to not appear under the menu, logo image, and logo text. 
*/
.STEPHENS-reserved-top-space {
    border: 0px solid purple; /*howto.where*/
    color: transparent;
    clear: both;
}

/* 
    A special backing bar used example to retain color of image underneath and above the menu bar (e.g., the snowmobile image on GWFNet home page) 
    Just override, for example, just the backgorund-color of this special backing bar 
*/
.STEPHENS-menu-backing-bar-special {
    color: transparent;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    z-index: 200;
}

.STEPHENS-compact-menu-container {
    position: absolute;
    display: block;
    left: 0px;
}
.STEPHENS-logo-panel {
    border: 0px solid orange; /*howto.where*/
    position: fixed;
    left: 0;
    top: 0;
}

    .STEPHENS-logo-panel img {
        position: relative;
        z-index: 1000;
        /* POSITION THE LOGO IMAGE RELATIVE TO THE MENU */
        margin-top: 6px;
        margin-left: 15px;
        height: 44px;
        width: 44px;
    }

.STEPHENS-navigation-bar {
    /* T H E   M E N U   B A R     e.g.,   Home   About Us   News   Whatever */
    border: 0px solid green;
    padding: 5px 5px;
    height: 44px;
    font-size: 14px; /* menu item text size (keep in pixels!!) */
    min-width: 280px;
    margin-left: 0px;
    overflow: hidden;
    display: block;
    margin-top: 54px;
    background-color: rgba(214,214,212, 0.97);
    color: #222;
    font-weight: 600;
    font-family: "open sans","Helvetica Neue",Arial, Helvetica, sans-serif,Arial,sans-serif;
    width: 100%;
    z-index: 1000;
    /***************************************************************************************************/
    height: auto;
    overflow: scroll;
    -ms-overflow-style: none; /*ie-like*/
    scrollbar-width: none; /*firefox-like*/
    clear:both;
}

    .STEPHENS-navigation-bar::-webkit-scrollbar {
        display: none; /*chrome-like*/
    }

.STEPHENS-compact-menu {
    /* COLOR OF COMPACT MENU FOR MOBILE DEVICES */
    background-color: white;
    min-width: 220px;
    max-width: 220px;
    left: calc(50vw - 110px);
    min-height: 10vh;
    margin-top: 10px;
    border-radius: 5px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
    border: 1px solid #cccccc;
    z-index: 2000;
    position:fixed;
    padding-bottom: 8px;
}

.STEPHENS-compact-navigation-button {
    /* BUTTON THING WITH THREE (three) 3 LINES ON IT OR THE WORD MENU */
    background-color: #e9e9e9;
    width: 50px;
    height: 34px;
    line-height: 34px;
    padding: 0px 0px;
    display: none;
    border-radius: 5px;
    text-align: center;
    position: fixed;
    left: calc(100vw - 85px);
    top: 10px;
    border:1px solid rgba(0,0,0,0.3);
    border-radius:7px;
}

    .STEPHENS-compact-navigation-button:hover {
        /*background-color: transparent;*/
        background-color:lightgray;
    }

    .STEPHENS-compact-navigation-button span {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
        cursor: default;
    }

        .STEPHENS-compact-navigation-button span img {
            border-radius:10px;
            width: 50px;
            height: 34px;
            opacity: 1;
        }

            .STEPHENS-compact-navigation-button span img:hover {
                opacity: 1;
            }

.STEPHENS-menu-left-spanner {
    float: left;
    height: 5px;
    line-height: 5px;
    min-height: 5px;
    background-color: transparent;
    width: calc(50vw - 500px);
    min-width:2px;
    max-width:120px;
}


.STEPHENS-menu-item-level1 {
    float: left;
    color: #222;
    height: 50px;
    line-height: 50px;
    min-height: 50px;
    padding: 1px 8px;
    background-color: transparent;
    text-decoration: none;
    text-align: center;
    margin: 1px;
    margin-top: -4px;
    margin-bottom: -4px;
    vertical-align: middle;
}
    .STEPHENS-menu-item-level1.dd:after {
        color: #222;
        content: "▼";
        margin-left: -1px;
        font-size: 7pt;
    }
    .STEPHENS-menu-item-level1 span {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
        cursor: default;
        pointer-events: none;
        border:0px solid green;
        text-align:center;
    }

    .STEPHENS-menu-item-level1:hover {
        background-color: rgb(0, 114, 188);
        color: white;
    }
    .STEPHENS-menu-item-level1.dd:hover:after {
        color: white;
        content: "▼";
    }

    .STEPHENS-menu-item-level1 span span {
        height: 100%;
        border:0px solid red;
    }


.STEPHENS-dropdown-menu-level1 {
    font-weight: 300;
    padding-bottom: 8px;
    transform: translateX(-8px) translateY(-2px);
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
}

    .STEPHENS-dropdown-menu-level1 a {
        float: none;
        color: black;
        text-decoration: none;
        display: block;
        text-align: left;
        cursor: default;
        line-height: 1.5;
        padding: 5px 12px;
    }

        .STEPHENS-dropdown-menu-level1 a:hover {
            background-color: rgb(0, 114, 188);      
            color: white;
            overflow: hidden;
        }



.STEPHENS-menu-item-level2 {
    /*DO NOT FLOATLEFT ON LEVEL2 (differs from LEVEL1, XXfloat: leftwrong;*/
    color: #222;
    padding: 1px 8px;
    background-color: transparent;
    text-decoration: none;
    text-align: left;
    margin: 1px;
    height: 18px;
    line-height: 18px;
    min-height: 18px;
    padding: 5px 2px;
}
    .STEPHENS-menu-item-level2.dd:after {
        color: #222;
        content: "▶";
        margin-left: 0px;
        font-size:8pt;
    }
    .STEPHENS-menu-item-level2.dd:hover:after {
        color: white;
        content: "▶";
    }

    .STEPHENS-menu-item-level2 span {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
        cursor: default;
        pointer-events: none;

    }

    .STEPHENS-menu-item-level2:hover {
        background-color: rgb(0, 114, 188);
        color: white;
    }


    .STEPHENS-menu-item-level2 span span {
        height: 100%;
    }

        .STEPHENS-menu-item-level2 span span img {
            width: 28px;
            height: 28px;
        }

.STEPHENS-dropdown-menu-level2 {
    transform: translateX(10px);
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1001;
}

    .STEPHENS-dropdown-menu-level2 a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
        cursor: default;
        line-height: 1.5;
        padding: 5px 2px;
    }

        .STEPHENS-dropdown-menu-level2 a:hover {
            /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
            background-color: rgb(0, 114, 188);
            color: white;
            overflow: hidden;
        }

.SHOWN {
    display: block;
}

.STEPHENS-menu-item-compact-navigation {
    width: 88%;
    float: left;
    color: black;
    background-color: transparent;
    text-decoration: none;
    text-align: left;
    clear: both;
    margin-left: 5px;
    margin-right: 5px;
    height: 38px;
    line-height: 38px;
    min-height: 38px;
    padding: 1px 8px;
}
    .STEPHENS-menu-item-compact-navigation.dd:after {
        color: #222;
        content: "▼";
        margin-left: 0px;
        font-size: 8pt;
    }

    .STEPHENS-menu-item-compact-navigation.dd:hover:after {
        color: white;
        content: "▼";
    }

    .STEPHENS-menu-item-compact-navigation span {
        border: 0px solid red;
        /*overflow: hidden;*/
        text-align: left;
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
        cursor: default;
        pointer-events: none;
    }

    .STEPHENS-menu-item-compact-navigation:hover {
        /*border: 1px solid green;*/
        /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
        /*margin: 1px;*/
        background-color: rgb(0, 114, 188);
        color: white;
    }

    .STEPHENS-menu-item-compact-navigation span span {
        height: 100%;
    }

        .STEPHENS-menu-item-compact-navigation span span img {
            width: 28px;
            height: 28px;
        }

.STEPHENS-logo-text-part1 {
    color: #444;
    white-space: nowrap;
    position: fixed;
    left: 110px;
    top: 18px;
    font-family: Arial;
    font-size: 18pt
}
    .STEPHENS-logo-text-part1 hr {
        color: #888;
        margin: auto 0;
        width: 100%;
        margin-top: 0;
        line-height: 0.75px;
        overflow: hidden;
    }

.STEPHENS-logo-text-part2 {
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    position: fixed;
    left: 128px;
    top: 48px;
    font-family: Arial;
    font-size: 24pt;
}



/*
@media only screen and (max-width: 970px) {
}

@media only screen and (max-width: 880px) {
}

@media only screen and (max-width: 800px) {
}

@media only screen and (max-width: 768px) {
}
*/


@media only screen and (max-width: 480px) {
    .STEPHENS-navigation-bar {
        position:fixed;
        display: none;
    }
    .STEPHENS-compact-navigation-button {
        display: block;
    }

    .STEPHENS-menu-backing-bar-special,
    .STEPHENS-reserved-top-space,
    .STEPHENS-menu-backing-bar {
        height: 54px;
        clear: both;
        margin-top: 0px;
    }
    .STEPHENS-menu-backing-bar {
        clear: both;
        margin-top: 0px;
    }
}