/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * 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
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


/*
.no-click_NOT_CURRENTLY_USED {
    pointer-events: none;
}
*/

.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;
    width: 26px;
    height: 26px;
    opacity: 0.8;
    padding-right: 2px;
    /*box-shadow: 1px 0px 1px 1px rgba(0,0,0,0.2);*/ /*maybe overdone!*/
    border-radius:50%;
    /*background:lightblue;*/
    background-color:aliceblue;/*perfect*/
    border:0px solid rgba(0,0,0,0.2);
}

.STEPHENS-menu-item-level1 span span img {
    margin-right: -5px; /* position text very against the icon (minus five pixels) */
    padding: 8px;
    margin-top:5px;
    /*display: none;*/ /* hides the menu icons */
}

.STEPHENS-menu-item-compact-navigation span span img {
    margin-right: 5px;
    /*display: none; /* hides the menu icons */
}

.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 green; /*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;
}

.STEPHENS-reserved-top-space {
    background-color: transparent;
}

/* 
    Used to colorize the menu bar, including underneath the logo
*/
.STEPHENS-menu-backing-bar {
    border: 0px solid blue; /*howto.where*/
    /*background-color: rgba(255,255,255,.96);*/
    background-color: rgba(255,255,255,1);
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    /*z-index: 200; to accommodate data centre*/
    z-index: 777; /*BUGFIX 2026-03-15*/
}

/* 
   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 green; /*howto.where*/
    clear: both;
}




.STEPHENS-navigation-bar {
    /* T H E   M E N U   B A R     e.g.,   Home   About Us   News   Whatever */
    margin-top: 82px; /* <--------------------------------------------------------------------- */
    margin-top: 100px; /* <--------------------------------------------------------------------- */
    border: 0px solid green;
    /*padding: 5px 5px;*/
    padding: 0px 5px;
    min-height: 64px;
    /*font-size: 14px; /*menu item text size (keep in pixels!!)*/
    /* font-size: 13pt; /*exp*/
    min-width: 280px;
    overflow: hidden;
    display: block;
    background-color: transparent;
    color: #222;
    /*font-weight: 600; We no longer use heavy fonts in 2026! */
    font-weight: 100; /*exp */
    /*font-family: "open sans","Helvetica Neue",Arial, Helvetica, sans-serif,Arial,sans-serif;*/
    /*font-family: "NotoSans", Arial;*/
    /*width: 100%;*/
    /*margin-left: 90px;*/ /* exp <---------------------- */
    /*width: calc(100% - 120px);*/ /* exp <---------------------- */
    /*margin-left: 5px;*/
    /*use margin-right instead  xxwidth: calc(100% - 30px - 10px ); /* exp <---------------------- */
    /*margin-right:calc(5px + 20px);*/
    margin-left: 8px;
    margin-right: 20px;
    z-index: 1000;
    clear: both;
    height: auto;
    /*
        Fallback method, overflow-scroll can be used (but some very nonstandard browsers do not hide the horizontal scrollbar 
        Sizing/wrapping now handled better by javascript so overflow-hidden can be reliably used on ~all browsers
    */
    overflow: hidden;
    -ms-overflow-style: none; /*ie-like*/
    scrollbar-width: none; /*firefox-like*/
    /*border-top:1px solid gray;*/
    /*background-color: rgba(235, 224, 15, 0.08); yellowwhite overlay*/
    /*box-shadow: 1px 1px 8px #bdc3c7, -1px -1px 8px #f9f9f9; a bit over done*/
    background-color: #F6FAF9; /* offwhite see htxxxtps://htmlcolorcodes.com/colors/off-white/*/
    border-radius:5px;
}

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

.STEPHENS-compact-menu-container {
    position: absolute;
    display: block;
    left: 0px;
}

.STEPHENS-compact-menu {
    margin-top: 75px;
    border-radius: 10px;
    z-index: 2000;
    position: relative;
    /*border:20px solid red;*/
    background-color: #F6FAF9;
    width: calc(100vw - 100px);
    left: 20px;
    /*background-color: #fcfce7;yellowish*/
    box-shadow: inset 4px 4px 8px #bdc3c7, inset -4px -4px 8px #f9f9f9;
    padding: 20px;
    border: 3px solid gray;
}




.STEPHENS-compact-navigation-button {
    /* BUTTON THING WITH THREE (three) 3 LINES ON IT OR THE WORD MENU */
    background-color: white;
    width: 70px;
    height: 44px;
    line-height: 44px; /*needed here-immediately-here to vertically center the word Menu */
    padding: 0px 0px;
    display: none;
    border-radius: 5px;
    text-align: center;
    position: fixed;
    left: calc(100vw - 85px);
    top: 18px;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 7px;
    transition: all 0.2s ease;
    cursor: default;
    font-size: 14px;
}

    .STEPHENS-compact-navigation-button:hover {
        color: black;
        box-shadow: inset 1px 1px 1px #bdc3c7, inset -4px -4px 8px #f9f9f9;
    }

    .STEPHENS-compact-navigation-button:active {
        color: black;
        background-color: #fcfce7;
        box-shadow: inset 4px 4px 8px #bdc3c7, inset -4px -4px 8px #f9f9f9;
    }

    .STEPHENS-compact-navigation-button span {
        display: inline-block;
        vertical-align: middle;
        line-height: normal; /* undo the specialized line-height */
        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-item-level1 {
    float: left;
    /* 
    The line-height and min-height control the "droopyness" of the text in the menu item - set too high, and
    the items droop downwards, too low, upwards.
     */
    line-height: 60px; /*needed to vertically center the text */
    min-height: 64px;
    /**/
    padding: 0px 10px;
    background-color: transparent;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    border: 0px solid green; /* howto.whereis the menu item (Home, Data, ... etc.)*/
    /*box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.2); absolutely overdone */
    margin-left: 4px;
    margin-right: 4px;
}

    .STEPHENS-menu-item-level1.dd:after {
        color: #333;
        content: "▼";
        margin-left: -1px;
        font-size: 10pt;
    }

    .STEPHENS-menu-item-level1 span {
        display: inline-block;
        vertical-align: middle;
        line-height: normal; /* undo the specialized line-height */
        cursor: default;
        pointer-events: none;
        border: 0px solid green;
        text-align: center;
    }

    .STEPHENS-menu-item-level1:hover {
        border-radius: 5px;
        transition: all 0.2s;
        box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.2);
        color: #000;
        cursor: default;
    }

    .STEPHENS-menu-item-level1:active {
        box-shadow: inset 4px 4px 4px 4px rgba(0,0,0,0.2);
    }

    .STEPHENS-menu-item-level1.dd:hover:after {
        /*color:#000;*/
        content: "▼";
        /*color: red;*/
        color: #667eea; /* triangle niblet hover cover as "pen blue" */
    }

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


.STEPHENS-dropdown-menu-level1 {
    padding-bottom: 8px;
    /*transform: translateX(-8px) translateY(-2px);*/
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 10px 8px 16px 10px rgba(0,0,0,0.2);
    z-index: 1000;
    min-width: 333px; /*bugfix waternet*/
    width: 333px; /*bugfix waternet*/
    max-width: calc(100vw - 40px);
    border: 0px solid black;
}

    .STEPHENS-dropdown-menu-level1 a {
        float: none;
        text-decoration: none;
        display: block;
        text-align: left;
        cursor: default;
        line-height: 1.5;
        padding: 8px 12px;
        border: 0px solid yellow;
        color: #333;
    }

        .STEPHENS-dropdown-menu-level1 a:hover {
            border-radius: 5px;
            transition: all 0.2s;
            overflow: hidden;
            box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.2);
            color: #000;
        }


.STEPHENS-menu-item-level2 {
    /*DO NOT FLOATLEFT ON LEVEL2 (differs from LEVEL1, XXfloat: leftwrong;*/
    background-color: transparent;
    text-decoration: none;
    text-align: left;
    margin: 1px;
    height: 18px;
    line-height: 18px;
    min-height: 28px;
    padding: 8px 2px;
    padding-left: 8px;
    border: 0px solid purple;
    color: #333;
}

    .STEPHENS-menu-item-level2.dd:after {
        color: #333;
        content: "▶";
        margin-left: 0px;
        font-size: 8pt;
    }

    .STEPHENS-menu-item-level2.dd:hover:after {
        content: "▶";
        /*box-shadow:  2px 2px 1px 1px rgba(0,0,0,0.2);*/
        /*color: #000;*/
        /*color:red;*/
        color: #667eea; /* triangle niblet hover cover as "pen blue" */
    }

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

    .STEPHENS-menu-item-level2:hover {
        border-radius: 5px;
        transition: all 0.2s;
        box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.2);
        color: black;
    }
    .STEPHENS-menu-item-level2:active {
        border-radius: 5px;
        transition: all 0.2s;
        box-shadow: inset 4px 4px 4px 1px rgba(0,0,0,0.2);
        color: black;
    }


    .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: 10px 8px 16px 20px rgba(70,70,70,0.7);
    z-index: 1001;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

    .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: 8px 2px;
        border: 0px solid yellow;
    }

        .STEPHENS-dropdown-menu-level2 a:hover {
            box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.2);
            color: #000;
            overflow: hidden;
        }
        .STEPHENS-dropdown-menu-level2 a:active {
            box-shadow: inset 4px 4px 1px 1px rgba(0,0,0,0.2);
            color: #000;
            overflow: hidden;
        }

.SHOWN {
    display: block;
}

.STEPHENS-menu-item-compact-navigation {
    /*background-color: #F6FAF9;*/ /* the menu item needs to be colo(u)red as the containing div does not size to the content */
    float: left;
    text-decoration: none;
    text-align: left;
    clear: both;
    height:42px;
    line-height: 42px;
    padding: 8px;
    /*set javascript height to 42 + 8 + 8 = 58 */
    border: 0px solid red;
    width:calc(100% - 16px);
    border-radius:10px;
}

    .STEPHENS-menu-item-compact-navigation.dd:after {
        content: "▼";
        margin-left: 0px;
        font-size: 8pt;
        color: #333;
    }

    .STEPHENS-menu-item-compact-navigation.dd:hover:after {
        content: "▼";
        /*box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.2);*/
        color: #000;
    }

    .STEPHENS-menu-item-compact-navigation span {
        border: 0px solid green;
        text-align: left;
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
        cursor: default;
        pointer-events: none;
        width: calc(100%-100px);
        /*background-color:red;*/
    }

    .STEPHENS-menu-item-compact-navigation:hover {
        box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.2);
        color: #000;
    }
    .STEPHENS-menu-item-compact-navigation:active {
        box-shadow: inset 4px 4px 1px 1px rgba(0,0,0,0.2);
        color: #000;
    }

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

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


.STEPHENS-menu-searchbar:hover {
    box-shadow:none;
}

.STEPHENS-menu-searchbar.STEPHENS-menu-item-level1 {
    border-radius:20px;
    white-space: nowrap; /* it works !!!! the niblet does not wrap and become lonely!! */
    border: 0px solid blue;
}

    .STEPHENS-menu-searchbar.STEPHENS-menu-item-level1:hover {
        /* applies to main menu only*/
        background-color:aliceblue;
    }

    .STEPHENS-menu-searchbar.STEPHENS-menu-item-level1.dd:hover:after {
        /*the triangle niblet comes from the STEPHENS-menu-item-level1.dd */
        /*color: #000;*/
        /*color:red;*/
        color: #667eea; /* triangle niblet hover cover as "pen blue" */
    }

.STEPHENS-menu-searchbar.STEPHENS-menu-item-level1.dd:active:after {
    color: #000;
    box-shadow: inset 2px 2px 8px #bdc3c7, inset -2px -2px 8px #f9f9f9;
}

.STEPHENS-menu-searchfield-div {
    position:relative;
    display: inline-block;
    text-align: left;
    width: 280px;
    border:0px solid red;
}
.field {
    display: inline-block;
    width: calc(100% - 42px - 10px);
    border: 0px solid green;
}
.magnifier {
    display: inline-block;
    border:0px solid orange;
}
input.STEPHENS-menu-searchfield {
    color: #667eea; /* pen blue */
    font-weight: bold;
    padding: 0px;
    background: none;
    outline: none;
    border: none;
    padding-top: 0px;
    text-align: left;
    background-color: white;
    padding: 9px;
    border-radius: 50px;
    border: 1px solid rgba(180, 180, 180, 0.30);
    width: calc(100% - 22px);
}

    input.STEPHENS-menu-searchfield:hover {
        box-shadow: inset 2px 2px 8px #bdc3c7, inset -2px -2px 8px #f9f9f9;
    }

    input.STEPHENS-menu-searchfield:focus {
        box-shadow: inset 4px 4px 8px #bdc3c7, inset -4px -4px 8px #f9f9f9;
    }

.STEPHENS-menu-search-button {
    /*position: absolute;*/
    /*position: relative;*/
    height: 24px;
    width: 24px;
    opacity: 0.8;
    padding: 0px;
    border-radius: 50%;
    border: 1px solid #ccc;
    padding: 6px;
    background-color: white;
    transform:  translateY(13px);
}

    .STEPHENS-menu-search-button:hover {
        box-shadow: inset 2px 2px 8px #bdc3c7, inset -2px -2px 8px #f9f9f9;
    }

    .STEPHENS-menu-search-button:active {
        box-shadow: inset 4px 4px 8px #bdc3c7, inset -4px -4px 8px #f9f9f9;
        background: #e0e5ec;
    }

.STEPHENS-mobile-backing-bar {
    position: relative;
    background-color: white;
    display: none;
    z-index: 201;
    height: 60px;
    width: 100vw;
}

.STEPHENS-mobile-backing-bar-reserved-space {
    position: relative;
    height: 80px;
    display: none;
}



/*@media only screen and (max-width: 480px) {*/
@media (pointer: coarse) {

    .STEPHENS-mobile-backing-bar {
        height: 82px; /* <----- this value should match STEPHENS-mobile-backing-bar-reserved-space (below) */
        background-color: white;
        display: block;
        position: fixed; /* do not scroll */
        z-index: 777; /*bugfix*/
    }

    .STEPHENS-mobile-backing-bar-reserved-space {
        height: 82px; /* <----- this value should match STEPHENS-mobile-backing-bar (above) */
        display: block;
    }

    .STEPHENS-compact-navigation-button {
        display: block;
    }

    .STEPHENS-navigation-bar,
    .STEPHENS-reserved-top-space,
    .STEPHENS-menu-backing-bar {
        display: none;
    }

    .STEPHENS-menu-searchfield-div {
        width: calc(100% - 15px);
    }

    input.STEPHENS-menu-searchfield {
        border: 1px solid rgba(180, 180, 180, 0.70);
    }

    .STEPHENS-menu-search-button {
        opacity: 0.8;
        background-color: white;
    }
}