/* http://www.w3schools.com/howto/howto_js_topnav.asp */

/* Remove margins and padding from the list, and add a black background color */
ul.navbar {
    /* styling */
    list-style-type: none;
    overflow: hidden;
    background-color: rgba(90,0,0,1);
    /* text-align: center; */
    /* border-bottom: solid 5px #aa3333; */
    height: 4.2em;
    
    /* position */
    position: fixed;
    width:100%;
    margin: 0;
    padding: 0;
    padding-left: 7%;
    top: 0;
    
    /* always on top */
    z-index: 1;
    
    /* make text unselectable */
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
    cursor: default;
}

/* Float the list items side by side */
ul.navbar li {
    float:left;
    padding-right:2em;
    height: 100%;
}

ul.navbar li a.current_page{
    background-color: rgba(0,0,0,.35);
}

/* Float the list items side by side */
ul.navbar li img {
    height: 0.9em;
    margin-right:0.6em;
}

/* Style the links inside the list items */
ul.navbar li > a {
    display: inline-block;
    padding: 1.2em .5em;
    
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: 0.3s;
    font-size: 1em;
    height: 100%;
}


/* the Esports at Cornell title */
#nav_title{
    display: inline-block;
    padding: 0.6em;
    padding-right: 4em;
    
    /* font-family: "Arial Black", Gadget, sans-serif; */
    font-weight: bold;
    font-size: 110%;
    color: #fff;
}

/* the Esports at Cornell icon */
#nav_title img{
    height: 2.5em;
    padding-right:1em;
    vertical-align: middle;
}

/* Change background color of links on hover */
ul.navbar li a:hover {
    background-color: rgba(0,0,0,.25);
}

/* Hide the list item that contains the link that should open and close the navbar on small screens */
ul.navbar li.icon {
    display: none;
    position: absolute;
    right: 5%;
}

/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the navbar (li.icon) */
@media only screen and (max-width: 1024px) {
    ul.navbar { font-size: 140%; }
    ul.navbar li:not(:first-child) {display: none;}
    ul.navbar li.icon {
        display: inline-block;
    }
}
/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens */
@media only screen and (max-width: 1024px) {
    ul.navbar.responsive {
        /*position: fixed;*/
        overflow: visible;
    }
    ul.navbar li.icon {
        position: absolute;
        top: 0;
    }
    ul.navbar.responsive li {
        float: none;
        display: inline;
    }
    ul.navbar.responsive li a {
        display: block;
        text-align: left;
    }
    
    ul.navbar.responsive li a { margin: 0; height: 1em; background-color: rgba(0,0,0,0.85); }
}





/* Remove margins and padding from the list, and add a black background color */
ul.subnavbar {
    /* styling */
    list-style-type: none;
    overflow: hidden;
    background-color: rgba(170,40,40,1);
    /* border-bottom: solid 5px #aa3333; */
    height: 2em;
    
    /* position */
    position: fixed;
    width:100%;
    margin: 0;
    padding: 0;
    padding-left: 20%;
    top: 4.2em;
    
    /* always on top */
    z-index: 1;
    
    /* make text unselectable */
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
    cursor: default;
    
    /* hidden by default */
    display: none;
    
}

/* Float the list items side by side */
ul.subnavbar li {
    display: inline-block;
    padding-right: 2em;
    height: 100%;
}

ul.subnavbar li a.current_page{
    color: #eeaaaa;
    font-weight: bold;
}

/* Float the list items side by side */
ul.subnavbar li img {
    height: 0.9em;
    padding-right:0.6em;
}

/* Change background color of links on hover */
ul.subnavbar li a:hover {
    color: #eeaaaa;
}

/* Style the links inside the list items */
ul.subnavbar li a {
    display: inline-block;
    color: #000;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
    height: 1em;
}