/*

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;}
}