/* Navigation bar styling. */
ul.nav {
    /* Page positioning. */
    position: fixed;    /* Fix navbar to top of page (requires positioning of initial content). */
    top: 0; /* Gives positioning for above directive. */
    margin: 0;
    padding: 0;

    /* Sizing. */
    width: 100%;

    /* Colours/Styling. */
    list-style-type: none;  /* Remove bullets e.c.t. from list. */
    overflow: auto; /* Add scrollbar if content overflows from page width. */
    background-color: #001C6F;  /* Navbar background colour. */
}

ul.nav li{
    float: left;    /* Start list from left of page. */
}

ul.nav li a{
    /* Sizing/Positioning. */
    display: block; /* Whole area click-able. Requires "float: left;" to keep positioning from left of page. */
    padding: 1em;   /* Padding equal to text size. */

    /* Text positioning/styling. (This is defined in shared li/a in case non-link element is added to nav bar. */
    text-align: center;
    color: #FFFFFF;   /* Colour of navbar links/items. */
}

ul.nav a{ 
    text-decoration: none;  /* Remove underlining from links in navbar. */
}

ul.nav li a.active{ /* Specific styling for navigation item for page user is currently on. */
    background-color: #002AA7;  /* Item background colour on navbar. */
}

ul.nav li a:hover:not(.active){ /* Current user hovered navbar item, excluding current page navbar item. */
    background-color: #002289;  /* Item background colour on navbar. */
}

/* Conditional styling for small screen devices. */
@media screen and (max-width: 600px){
    ul.nav{
        position: relative; /* Position navbar at top of page (do not move it as the user scrolls). Allow offsetting (if implemented earlier) to have an effect.*/
        overflow: visible;  /* Do not add scroll bars for content outside the element box - just display it. */
    }
    
    ul.nav li{
        float: none; /* Vertically stack navbar items. */
    }
}