/*

THIS ANNOTATED FILE IS IN ACCORDANCE TO script/nav.css
===================================================================================

*/

/*

THE FOLLOWING SECTION IS A BASIC OUTLINE OF THE HTML CODE USED IN z-inc-header.php FOR REFERENCE
===================================================================================

<style>@media all and (min-width: 800px) {
    #nav li {width:calc(<? echo(100/(mysql_num_rows($nav)+2));?>% - <? echo(70/(mysql_num_rows($nav)+2));?>px);}
    #nav li ul li {width:100%}
    #nav li.lang {width:70px}</style>
    
<nav id="nav" class="nav" role="navigation">
    <a href="#nav" title="Show navigation">Show</a><a href="#" title="Hide navigation">Hide</a>
    <ul class="clearfix">
        <li><a href="index.php">Home</a></li>
        <li><a href="something.php">Title</a>
            <ul>
                <li><a href="page.php?p=1">Item 1</a></li>
                <li><a href="page.php?p=2">Item 2</a></li>
            </ul>
        </li>
        <li><a href="something.php">Intranet</a>
            <ul>
                <li><a href="page.php?p=1">Item 1</a></li>
                <li><a href="page.php?p=2">Item 2</a></li>
                <li><a href="page.php?p=2">Logout</a></li>
            </ul>
        </li>
        <li><a href="language.php">Chinese</a>
            <ul>
                <li><a href="page.php?p=1">Simplified Chinese</a></li>
                <li><a href="page.php?p=2">English</a></li>
            </ul>
        </li>
    </ul>
</nav>

*/


/*

CSS SECTION
===================================================================================

*/

/* dont worry about this */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

* html .clearfix {
    zoom: 1;
}

*:first-child + html .clearfix {
    zoom: 1;
}

/* this is in accordance to the banner and MCBC logo */
.banner {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9998;
    width: 100%;
    height: 120px;
    padding: 0;
    line-height: 120px;
    font-size: 300%;
    text-align: center;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.banner::after {
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    z-index: -1;
    width: 100%;
    height: 130px;
    opacity: 1;
    background: rgba(80, 80, 80, .4);
    background-size: 100% 100%;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.banner a, .banner a:hover {
    text-decoration: none;
    color: #662E1C;
    text-shadow: 0 0 2px #EBDCB2;
}

.banner img {
    max-width: 95%;
    max-height: 110px;
    vertical-align: top;
    margin: 0;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

/* the entire navigation bar, maintains the basic position */
.nav {
    position: absolute;
    top: 110px;
}

/* anything you see with .sticky is in reference to the function where when the user scroll down, then the css changes. ie. before scrolling down a certain number of rows, the nav bar is movable, but after a bit of scrolling, the nav bar becomes stuck to the top of the screen, preventing the nav bar from scrolling out of sight */
@media all and (min-width: 800px) {
    .nav.sticky {
        position: fixed;
        top: 0;
    }
}

/* more banner stuff in reference to how it looks in mobile screens */
@media all and (max-width: 799px) {
    .banner {
        position: absolute;
        text-align: left;
        height: 50px;
        line-height: 50px;
        padding: 0;
        font-size: 170%;
        background: rgba(0, 0, 0, .7);
        left: 0;
        right: 0;
        top: 0;
    }

    .banner::after {
        position: absolute;
        height: 50px;
        top: 0;
    }

    .banner img {
        max-width: 75%;
        max-height: 50px;
        margin: 0 0 0 60px;
        vertical-align: middle;
    }

    .banner::after img {
        max-width: 75%;
        max-height: 50px;
    }
}

/* nav bar animations */
#nav li a, #nav li ul a, #nav li ul, #nav li ul li, #nav li ul li a {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* also the entire nav bar, prob dont have to worry about this part */
#nav {
    width: 100%;
    font-weight: 1000;
    left: 0;
    margin: 0;
    padding: 0;
    z-index: 9999;
}

#nav > a {
    display: none;
}

#nav ul {
    margin: 0;
    cursor: pointer;
}

#nav li {
    margin: 0;
    position: relative;
    list-style: none;
}

/* the color of the whole bar, ie. including all the big buttons */
#nav > ul {
    height: 50px;
    background: #EBDCB2;
    border-top: 2px solid #662E1C;
    border-bottom: 2px solid #662E1C;
}

/* big buttons */
#nav li a {
    color: #662E1C;
    display: block;
}

#nav > ul > li:hover > a, #nav > ul:not(:hover) > li.active > a {
    background-color: #662E1C;
    color: #EBDCB2;
}

/* ignore */
#nav > ul > li {
    height: 100%;
    float: left;
    margin-left: 0;
}

#nav > ul > li > a {
    height: 100%;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
}

#nav li a:hover {
    display: block;
    text-decoration: none;
}

/* small buttons */
#nav li ul {
    border-top: 2px solid #662E1C;
    background-color: #C9A66B;
    display: none;
    position: absolute;
    top: 100%;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#nav li ul li:hover {
    background-color: #EBDCB2;
}

/* ignore */
#nav li:hover ul {
    display: block;
    left: 0;
    right: 0;
}

#nav li:not(:first-child):hover ul {
    left: 0 /*-1px*/;
}

#nav li ul a {
    font-size: 16px;
    border-top: 0;
    padding: 6px 8px;
    text-align: center;
}

/* small buttons for intranet stuff */
#nav li ul li.cms {
    background-color: #8F2405;
}

#nav li ul li.cms:hover {
    background-color: #aF4425;
}

#nav li ul li.cms a {
    color: #fff;
}

/* small buttons for intranet logout button */
#nav li ul li.red {
    background-color: #1E1713;
}

#nav li ul li.red:hover {
    background-color: #4E4743;
}

#nav li ul li.red a {
    color: #fff;
}

/* screen fixing for mobile view, only worry about the second item here */
@media only screen and (max-width: 799px) {
    #nav {
        position: absolute;
        top: 0;
    }

    #nav > a { /* change background color for the top left toggle button in mobile view */
        width: 50px;
        height: 50px;
        text-align: left;
        text-indent: -9999px;
        background-color: #662E1C;
        position: absolute;
    }

    #nav > a:before, #nav > a:after {
        position: absolute;
        border: 2px solid #EBDCB2;
        top: 35%;
        left: 25%;
        right: 25%;
        content: '';
    }

    #nav > a:after {
        top: 60%;
    }

    #nav:not(:target) > a:first-of-type, #nav:target > a:last-of-type {
        display: block;
    }

    #nav > ul {
        margin-top: 50px;
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
    }

    #nav:target > ul {
        display: block;
    }

    #nav > ul > li {
        width: 100%;
        float: none;
    }

    #nav > ul > li > a {
        height: 50px;
        line-height: 50px;
        text-align: left;
        padding: 0 20px;
    }

    #nav > ul > li:not(:last-child) > a {
        border-right: none;
        border-bottom: 1px solid #ccc;
    }

    #nav li ul {
        position: static;
        padding: 1.25em;
        padding-top: 0;
    }
}