#NavigationDiv {
    -moz-text-size-adjust: 200%;
    -webkit-text-size-adjust: 200%;
    text-size-adjust: 200%;
}

.FixedNavigationDiv {
    position: fixed;
    top: 0;
    z-index: 99999;
}

#LogoProductLocationDiv {
    margin-left: 20px;
    /* margin-right: 20px; */ /* removing for banner text so that it goes to the edge */
    align-items: center;
}

#LogoProductLocationDiv img {
    /* Going to let these new logos be the size that the customer wants - BUT setting a max just in case... may have to rethink for mobile view */
    max-height: 100px;
    margin: 5px 30px;
}

#ConnectText, #ProductText, #BBoardHeading {
}
#ConnectText, #ProductText {
    margin-top: 2px;
    margin-bottom: 2px;
}

#LogoProductLocationDiv > h2 {
    margin-left: auto;
}
#LogoProductLocationDiv > h2 span {
    color: #F1F1F1;
    background: rgb(70,70,70); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 50px;
}

#NavigationDiv {
    background-color: #686868;
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
}

#NavigationList,
#BurgerList {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #686868;
    font-size: 1rem;
    z-index: 99998;
}
#NavigationList {
    min-width: 1470px; /* Amount of room (with a bit of padding) that the Nav bar needs. JS changes so the fit is better */
    margin-left: 30px;
    margin-right: 30px;
}
#BurgerList {
    margin-left: 30px;
    margin-right: 30px;
}

#NavigationList li,
#BurgerList li,
#NavigationList li.dropdown {
    float: left;
    display: inline-block;
}

#NavigationList li a,
#NavigationList .dropbutton,
#BurgerList li a {
    display: inline-block;
    color: #F1F1F1;
    text-align: center;
    padding: 15px 17px;
    text-decoration: none;
}
#BurgerList li a {
    padding: 10px 15px;
}

#NavigationList li a:active,
#BurgerList li a:active {
    color: #F1F1F1;
    background-color: #444444;
}
#NavigationList li > a.selected {
    font-weight: bold;
    border-left: 1px solid black;
    border-right: 1px solid black;
}

#NavigationList .dropdown-content {
    display: none;
    position: absolute;
    background-color: #E0E0E0;
    border: 1px solid #909090;
    min-width: 180px;
    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
    z-index: 99999;
    white-space: nowrap;
    padding: 4px 0;
}

#NavigationList > li:last-child .dropdown-content {
    left: auto;
    right: auto;
    /* TODO: right alignment not quite working */
    /*right: 65px;*/
}

#NavigationList .dropdown-content a {
    color: black;
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

#NavigationList .dropdown-content a:active {
    color: #F1F1F1;
    background-color: #444444;
}
#NavigationList .dropdown-content a.selected {
    text-decoration: underline;
}

/* Verticle Lines */

#NavigationList li:after {
    /*content: "|";*/
    color: black;
}

#NavigationList li:last-child:after {
    content: none;
}

/* This is to handle the placeholder li defined in the master page*/
#NavigationList li:first-child:after {
    content: none;
}
#NavigationList li:first-child {
    width: 0;
}

.rotate-down {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .3s cubic-bezier(.17,.67,.21,1);
    -moz-transition: .3s cubic-bezier(.17,.67,.21,1);
    -o-transition: .3s cubic-bezier(.17,.67,.21,1);
    transition: .3s cubic-bezier(.17,.67,.21,1);
}

.rotate-up {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg); 
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    -webkit-transition: .3s cubic-bezier(.17,.67,.21,1);
    -moz-transition: .3s cubic-bezier(.17,.67,.21,1);
    -o-transition: .3s cubic-bezier(.17,.67,.21,1);
    transition: .3s cubic-bezier(.17,.67,.21,1);
}




/* Screen too small for horizontal navigation bar */
/* Could use something like @media - ie. @media all and (max-width: 1650px) {} */
#NavigationList.displayVertically {
    display: none;
    position: absolute;
    width: 440px;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    border-right: 1px solid black;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
}

#NavigationList.displayVertically li,
#NavigationList.displayVertically li.dropdown {
    float: none;
    display: list-item;
}

#NavigationList.displayVertically li:after {
    content: none;
}

#NavigationList.displayVertically li > a,
#NavigationList.displayVertically .dropbutton {
    width: 410px;
    text-align: left;
    margin-left: 30px;
}

#NavigationList.displayVertically li > a.selected {
    border-left: none;
    border-right: none;
}

#NavigationList.displayVertically li:first-child {
    height: 0;
    width: 0;
}

#NavigationList.displayVertically > li:last-child .dropdown-content {
    left: auto;
    right: auto;
}

#NavigationList.displayVertically .dropdown-content {
    position: relative;
    background-color: #F1F1F1;
    width: 410px;
    box-shadow: none;
    z-index: 99999;
    white-space: normal;
    margin-left: 30px;
}

#NavigationList.displayVertically .dropdown-content a {
    padding-left: 35px;
}

#BurgerList > li img {
    margin: 0 5px;
    vertical-align: middle;
    border: none;
}