/* Copyright 2019, Sciamble Corp. All Rights Reserved. We will take legal action against those who copy our HTML content, CSS style sheets and JavaScript functions. */

#navbar {
    background-color: black;
    padding-top: 5px;
    padding-bottom: 5px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

    /* All navbar items are white and float to right, except for logo which is overriden later. */
    #navbar * {
        float: right;
        color: white;
    }

.navbar-bar {
    padding: 0px;
    margin: 0px;
}

#navbar-logo {
    float: left;
    margin-left: 5px;
}

@media screen and (min-width: 1001px) {
    /* Navbar list items. unauth are links that everyone can access. auth are links that only authorized users can access */
    #navbar-big-unauth-nav, #navbar-big-auth-nav {
        display: table;
        table-layout: fixed; /* setting allows table elements to be horizontally centered. */
        min-width: 300px;
        max-width: 300px;
        min-height: 100%;
        height: 100%;
    }

        /*  All items in auth unauth links list are set as table cells of auth and unauth list. */
        #navbar-big-unauth-nav *, #navbar-big-auth-nav * {
            float: none;
            display: table-cell;
            vertical-align: middle;
        }

    /* hide small screen layout. */
    #navbar-small {
        display: none;
    }

    #navbar-big {
        border: 0px;
        padding: 0px;
        margin-top: 6px;
        margin-right: 10px;
    }
        /* 
            The menu and close icon, user logged in/logged out and close icon for a radio button pair. Radio buttons do not support images as part of the button. This is worked around embedding it within a label and the radio button linked to the label.
            by using label. This workaround means that anchor tag do not behave as anchor but rather as labels. Hence see cursor to pointer(= hand) so that all elements behave like links when hovered upon, even if they are not links like close icon.
        */
        #navbar-big * {
            cursor: pointer;
        }

    /* Hide the radio button circle. */
    #navbar-big-radio-user, #navbar-big-radio-close {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

        /* If radio button is clicked, hide the immediate following label which contains the image. Ex if Menu radio button is clicked, then it disappears and close radio button become visible. And if it is clicked close disappears and menu becomes visible. */
        #navbar-big-radio-user:checked + label, #navbar-big-radio-close:checked + label {
            display: none;
        }

        /* when menu disappears, so should all the link list items. and when close disappears so does all authorized links list items. Use sibiling operator (~) and not adjacent (+) because, label is adjacent to radio button hence list cannot be. */
        #navbar-big-radio-user:checked ~ #navbar-big-unauth-nav, #navbar-big-radio-close:checked ~ #navbar-big-auth-nav {
            display: none;
        }
}

@media screen and (max-width: 1000px) {
    /* first child of unauth list is a dummy element so that the actual first element lies on the next line of the menu option. Draw a line under each unauth list item except the first item. */
    #navbar-small-unauth-nav > li:not(:first-child) {
        border-bottom: solid 2px white;
    }

    /* 
        Since left and right are floats, this block is set to none to align in middle. But the width 100% will overlap with right element. To occupyremaining space overflow property must be set to hidden. But this will only hide auth list and not unauth  list
        because, unauth list does not actually overflow right floating menu since it is in the bottom. Hence, width is set to 100% - 24px (to account for close/menu icon).
    */
    #navbar-small-unauth-nav, #navbar-small-auth-nav {
        float: none;
        width: calc(100% - 24px);
    }

        /* each list item*/
        #navbar-small-unauth-nav *, #navbar-small-auth-nav * {
            float: none;
            vertical-align: middle;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        /* auth list item icons all appear in a single line */
        #navbar-small-auth-nav > li {
            display: inline;
            padding-right: 30px;
            padding-left: 30px;
        }

    #navbar-big {
        display: none;
    }

    #navbar-small {
        float: none;
        border: 0px;
        margin-bottom: 0px;
        padding-bottom: 0px;
    }

        #navbar-small * {
            cursor: pointer;
        }

    #navbar-small-radio-menu, #navbar-small-radio-close {
        float: right;
        opacity: 0;
        width: 0;
        height: 0;
    }

        #navbar-small-radio-menu:checked + label, #navbar-small-radio-close:checked + label {
            display: none;
        }

        #navbar-small-radio-close:checked ~ ul {
            display: none;
        }
}

/* Depending on user being logged in or not, different menu options are served. Initially all are  */
.navbar-js-hide {
    display: none !important;
}


@media print {
    #navbar {
        display: none;
    }
}