/** navbar.css **
Styling for navbar, on top of each page
 */

/*Let navbar span entire page*/
body {
    margin: 0;
}

#header_navbar_wrapper {
    z-index: 8900;
}

.header_navbar_menu_container div {
    line-height: 0;
}

#header_navbar_logo {
    padding-right: 0;
    margin: 0 0 0 0;
    width: 17%;
    height: 100%;
    /*height: 0;*/
}

/*Determines size of navbar, to leave space for logo*/
.header_navbar_menu_container {
    position: absolute;
    left: 17%;
    width: 66%;
    height: 100%;
/*    flex-flow: row wrap;
    justify-content: center;*/
}

/*The wrapper and the navbar have to be the same height, or the page will jump when the nav bar sticks.*/
#header_navbar_wrapper, .header_navbar_ul {
    /*min-height: 10vh;*/
    min-height: 5em;
}

#header_navbar_wrapper, #header-nav-anchor {
    height: 100%;
}

.header_navbar_ul {
    position: relative;
    list-style-type: none; /*No bullet points*/
    padding: 0 0 0 0;
    margin: 0;
    background-repeat: repeat;
    background-color: #3D5A80;
    /*background-color: #292974;*/
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 -8px 16px 0 rgba(0, 0, 0, 0.3);
    z-index: 8980;
}

/*Make the navbar stick to the top of the screen*/
.header-nav_stick {
    position: fixed;
    width: 100%;
    height: 0;
    z-index: 8000;
}

#navbar_main_content {
    margin-right: 10%
}

/*Current page header highlight*/
.home #home_link,
.team #team_link,
.achievements #achievements_link,
.HP #HP_link,
.modelling #modelling_link,
.notebook #notebook_link,
.parts #parts_link,
.project #project_link,
.safety #safety_link {
    color: white;
}

.dropbtn {
    background-color: transparent;
    color: white;
    padding: 8px;
    /*font-size: 16px;*/
    border: none;
    cursor: pointer;
}

.dropdown {
    margin: 1em 0.5em 0em 0.5em;
    padding-bottom: 1em;
    height: 3em;
    /*margin-left: 0.75vw;
    margin-right: 0.75vw;
    margin-top: 3vh;
    margin-bottom: 0vh;*/
    /*padding-bottom: 3vh;*/ /*Padding needed to allow the user to move the menu to the dropdown menu, without it disappearing*/
    position: relative;
    display: inline-block;
    /*font-size: 1.5vw;*/
}

/*div needed to apply styling for 'selected' class*/
.dropdown div {
    padding-left: 0.4vw;
    padding-right: 0.4vw;
}
.dropdown div, .dropdown {
    border-radius: 0.8vw;
}

.dropdown_content {
    display: flex;
    flex-flow: column;
    justify-items: center;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.dropdown_content div {
    padding-bottom: 1em;
}

/*Want different margins for social media icons*/
.social_media {
    margin: 0 0 0 0;
    /*width: 2vw;*/
}
/*
#first_social_media {
    margin-left: 10%;
    margin-right: 0.2%;
}*/

#nav-logo-img {
    float:left;
    position: relative;
    /*margin-left: 3vw;
    margin-right: 4vw;
    margin-top: 2.5vw;
    max-width: 13vw;
    max-height: 17vh;
    top: 10%;*/
    width: 17%;
    padding-right: 1em;
    /*margin: 0 4vw 0 0;
    max-width: 13vw;
    max-height: 18vh;*/
    z-index: 8998;
}

.arrow_navbar {
    display: inline-block;
    position: relative;
    margin-left: 7px;
    margin-right: 0;
    z-index: 8998;
}

.dropdown a {
    position: relative;
    /*display: block;*/
    color: white;
    text-align: left;
    text-decoration: none;
    margin: 0;
    padding: 0.005%;
    /*padding-bottom: 5vh;
    padding-bottom: 3.1vh;*/
    font-size: 18pt;
    font-size: 1.5vw;
    /*font-weight:bold;*/
    line-height: 4vh;
    z-index: 8997;
    height: 100%;
}

/* Change the link color on hover over either dropdown button, or the dropdown menu items.
.header_navbar_ul div:hover > a {
    background-color: #91B7C7;
    color: white;
    border-radius: 0 0 0 0;
}*/

.dropdown-content a:first-child:hover {
    border-radius: 0 0 0 0;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #a7c6ce;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    width: auto !important; /*to avoid line breaks*/
    white-space: nowrap; /*to avoid line breaks*/
    min-width: 200px;
    border-radius: 0 0 0 0;
    top: 4em;
    /*top: 5em;*/
    /*margin-top: 7.5em;*/
}

.dropdown-content a {
    position: absolute;
    color: white;
    /*padding: 12px 16px;*/
    padding: 0.25em;
    text-decoration: none;
    /*font-weight: bold;*/
    display: block;
    position: relative;
    /*line-height: 12px;*/
    font-size: 12pt;
    font-size: 1vw;
}

.dropdown-content a:hover {
    color: #3D5A80;
}

/*Previously used to show dropdown when hovering over main titles. Removed when site was made mobile friendly.*/
@media screen and (min-width: 642px) {
    .dropdown:hover .dropdown-content {
        display: block;
    }
}

/*Styling for <hr> between menu itmes in the dropdown menus*/
.header_navbar_ul hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #ccc, rgba(0, 0, 0, 0));
}

.nav_icons {
    position: absolute;
    width: 16%;
    height: 100%;
    margin: 0;
    left: 83%;
    /*float: right;*/
    /*text-align: center;
    max-height: 2vw;*/
    
    /*margin-top: 3vh;
    margin-bottom: 3vh;
    margin-right: 0;
    padding-right: 2vw;*/
}

.nav_icons a {
    margin-left: 0.5em;
    margin-right: 0.5em;
    /*margin: 0 0.4vw 0 0.4vw;*/
}

/*Styling to apply if the user is at specific page on the website. 'Selected' class applied with js*/
.dropdown.selected div {
    background-color: #a7c6ce;
}

/** --Hamburger menu and social media-- */

.mobile_icon,
.nav_icons a {
    margin: 1em 0 1em 0;
    margin-top: 1em;
    margin-bottom: 1em;
/*    margin-left: 0.75vw;
    margin-right: 0.75vw;
    margin-top: 3vh;
    margin-bottom: 0vh;
    padding-bottom: 3vh;*/ /*Padding needed to allow the user to move the menu to the dropdown menu, without it disappearing*/
    display: inline-block;
    /*font-size: 1.5vw;*/
}

.mobile_icon img,
.social_media img {
    height: 3em;
}

.header_navbar_menu_container .mobile_icon {
    display: none;
}

/* When the screen is less than 641 pixels wide, hide all links. Show the link that contains the icon to open and close the topnav (.icon) */
@media screen and (max-width: 641px) {
    .header_navbar_menu_container div.dropdown/*:not(:first-child)*/ {
        display: none;
        margin: 0;
        padding: 0;
    }

    .header_navbar_menu_container a.mobile_icon {
        float: right;
        display: inline-block;
    }
}

@media screen and (max-width: 641px) {
    /*.header_navbar_menu_container.responsive {
        position: relative;
    }*/

    .header_navbar_menu_container.responsive .icon {
        position: absolute;
        /*right: 0;
        top: 0;*/
    }

    .header_navbar_menu_container.responsive {
        flex-flow: column;
        justify-items: normal;
        justify-content: normal;
        align-items: center;
        align-content: center;
        width: 66%;
        left: 17%;
    }

    .header_navbar_menu_container.responsive div.dropdown {
        float: none;
        display: block;
        text-align: left;
        background-color: #3D5A80;
        width: 100%;
        height: auto;

    }

    .dropdown, .dropdown-content {
        border-style: solid;
        border-width: 1px;
        border-color: #ffffff;
    }

    .dropdown-content a {
        border-top-style: solid;
        border-bottom-style: solid;
        border-width: 1px;
    }

    /*Make dropdown appear directly under main title*/
    .dropdown-content {
        position: relative;
        top: 0;
        min-width: 0;
        border-width: 2px;
    }

    .dropdown-content a, .dropdown_content a {
        font-size: 1em;
    }

    .dropdown-content a {
        white-space: pre-wrap; /* CSS3 */    
        white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
        white-space: -pre-wrap; /* Opera 4-6 */    
        white-space: -o-pre-wrap; /* Opera 7 */    
        word-wrap: break-word; /* Internet Explorer 5.5+ */;
    }

    /*Prevent drodowns to open when hovering main titles*/
    .dropdown:hover .dropdown-content {
        display: none;
    }

    #header_navbar_logo img {
        margin-left: 0.5em;
        margin-top: 0.5em;
        height: 4em;
        /*height: 100%;
        width: auto;*/
    }

    #side-nav {
        display: none;
    }
}