/* 
    There are two types of navigation represented in here. The top navigation bar on the site is identified by #nav. The navigation bar that can
    be used in the body of the site is represented by #inPageNav.

    I've combined them where applicable. The differences can be found in the bottom section of this css file.
*/

/* Resets */
#nav, #nav ul, #nav li, #inPageNav, #inPageNav ul, #inPageNav li {
  margin: 0 auto;
  padding: 0;
  border: 0;
  list-style: none;
  box-sizing: border-box; }

#nav {
  position: relative;
  min-height: 2.857142857142857em;
  max-width: 100%;
  background-color: #575757;
  color: #fff;
}
 
  @media screen and (min-width: 650px) {
    #nav {
      display: block;
      margin: 0 auto;
    } }
  @media screen and (max-width: 650px) {
    #nav {
      display: block; } }

#nav li {
  position: relative;
  min-height: 2.857142857142857em;
}

#nav a, #nav button {
  border: none;
  color: #fff;
  line-height: 2em !important;
  text-decoration: none;
  font-size: 1em;
  height: 100%;
  display: block;
  font-size: 1em;
  font-family: 'Dosis', 'Helvetica Neue', 'Arial', sans-serif; 
  padding: .5em 1.1em .5em; 
}

@media screen and (min-width: 650px) {
  #nav a:focus, #nav button:focus {
    outline: none; } }

@media screen and (min-width: 650px) {
  #nav li {
    text-align: left;
    width: 200px; } }
@media screen and (max-width: 650px) {
  #nav li {
    text-align: center;
    /*width: 100%;*/ } }

/* Any sub menu */
@media screen and (min-width: 768px) {
  #nav a + ul {
    position: absolute;
  }
    #nav a + ul:not(.js-showElement) {
      display: none; } }
@media screen and (max-width: 767px) {
    #nav a + ul {
        position: relative; 
    }

    #nav a + ul:not(.js-hideElement) {
        display: block; 
    } 
}

/* The Main Navigation Bar - Navigation Level One */

#nav > ul > li, #inPageNav > ul > li {
  position: relative;
  text-align: center; 

}
  @media screen and (min-width: 650px) {
    #nav > ul > li {
      float: left;
      display: block;
      width: auto; } }
  @media screen and (max-width: 650px) {
    #nav > ul > li {
      float: none;
      display: block;
      width: 100%; } }

#nav > ul > li > button {
  text-transform: uppercase;
  background-color: #575757; }
  #nav > ul > li > button:hover, #nav > ul > li > button:focus, #nav > ul > li > button.js-openSubMenu {
    background-color: #0279b0; 
    color: #fff;
    border-top: inherit;
    border-bottom: inherit;
    border-radius: inherit;
  }

#nav > ul > li:hover > button, #nav > ul > li:focus > button {
  background-color: #0279b0;
  color: #fff;
  border-top: inherit;
  border-bottom: inherit;
  border-radius: inherit;
}

@media screen and (min-width: 1200px) {
    #nav > ul > li a, #nav > ul > li button {
        font-size: 1.285714285714286em;
        line-height: normal !important;
    }
}

@media screen and (min-width: 650px) {
  #nav > ul > li:not(:last-child) {
    border-right: 1px solid #575757;
    border-bottom: none; } }
@media screen and (max-width: 650px) {
  #nav > ul > li:not(:last-child) {
    border-right: none; }
}


@media screen and (min-width: 650px) {
    #nav > ul > li:not(.js-showElement) {
        display: inline-block; 
    } 
}
@media screen and (max-width: 650px) {
    #nav > ul > li:not(.js-showElement) {
        display: none; 
    } 
}


/* Second Level Dropdown */
#nav > ul > li > ul {
  background-color: #666; }
  @media screen and (min-width: 650px) {
    #nav > ul > li > ul {
    position: absolute;
      left: 0; } }
  @media screen and (max-width: 650px) {
    #nav > ul > li > ul {
      width: 100%;
      position: relative; }
      #nav > ul > li > ul:not(.js-showElement) {
        display: none; } }

#nav > ul > li > ul > li > a {
  background-color: #666; 
  white-space: nowrap;
}
  #nav > ul > li > ul > li > a:hover, #nav > ul > li > ul > li > a:focus {
    background-color: #0279b0; 
    color: #fff;
  }

#nav li li {
    width: 100%;
}


/* Javascript classes */
#nav .js-hideElement {
  display: none; }

#nav .js-showElement {
  display: block; 
  overflow: visible;
  position: absolute;
  z-index: 10003;
}

/* Fallback for users without javascript */
html.no-js li:hover > a + ul, html.no-js li:focus > a + ul {
  display: block; }
@media screen and (max-width: 650px) {
  html.no-js #nav:hover > ul > li, html.no-js #nav:focus > ul > li {
    display: block; }
  html.no-js #nav:hover li:hover > a + ul, html.no-js #nav:hover li:focus > a + ul, html.no-js #nav:focus li:hover > a + ul, html.no-js #nav:focus li:focus > a + ul {
    display: block; } }


/*************************************************************************************************/
/* In Page Navigation Bar. This is for a horizontal navigation contained within the page itself. */
/* In page navigation does not allow drop downs. */
/*************************************************************************************************/

.main-subnav-wrapper {
    /*background-color: #0279b0;*/
    margin-top: 10px;
    margin-bottom: 10px;
}

#mobile-sub-nav {
    background-color: #0279b0;
    color: #fff;
    margin-top: 10px;
}

#inPageNav {
  display: table;
  margin: 0 auto;
  position: relative;
  /*min-height: 2.857142857142857em;*/
  max-width: 100%;
  background-color: #0279b0;
  color: #fff;
}

#inPageNav > ul > li:first-child {
    border-left: 2px solid #fff;
}

#inPageNav > ul > li {
    min-width: 125px;
    border-right: 2px solid #fff;
    margin-right: -3px;
}
#inPageNav li {
  position: relative;
  /*min-height: 2.857142857142857em;*/
}



#inPageNav a, #inPageNav button {
  border: none;
  color: #fff;
  /*line-height: 2em !important;*/
  text-decoration: none;
  font-size: .5em;
  height: 100%;
  display: block;
  font-family: 'Dosis', 'Helvetica Neue', 'Arial', sans-serif; 
  padding: .5em .8em .5em; 
}

@media screen and (min-width: 650px) {
  #inPageNav a:focus, #inPageNav button:focus {
    outline: none; } }

@media screen and (min-width: 650px) {
  #inPageNav li {
    text-align: center;
  } 
}


/* The Main Navigation Bar - Navigation Level One */

#inPageNav > ul > li > button {
  text-transform: uppercase;
  background-color: #0279b0; }
  #inPageNav > ul > li > a:hover, #inPageNav > ul > li > a:focus, #inPageNav > ul > li > button.js-openSubMenu {
    background-color: #575757; 
    color: #fff;
    border-top: inherit;
    border-bottom: inherit;
    border-radius: inherit;
  }

#inPageNav > ul > li:hover > a, #inPageNav > ul > li:focus > a {
  background-color: #575757;
  color: #fff;
  border-top: inherit;
  border-bottom: inherit;
  border-radius: inherit;
}

@media screen and (min-width: 1200px) {
    #inPageNav > ul > li a, #inPageNav > ul > li a {
        font-size: 1.15em;
        line-height: normal !important;
    }
}


#inPageNav > ul > li:not(.js-showElement) {
    display: inline-block; 
} 

@media screen and (max-width: 650px) {
    #inPageNav > ul > li:not(.js-showElement) {
        display: none; 
    } 
}

.inPageNavList {
    width: 100%;
}