/* (horizontal) navigation bar */

/* css/topNav.css  20180515
   20180215  set z-index for li to 401 so it goes on top of leaflet
   20180216  set z-index for li to 10 so it goes on top of google map
   20171025  Fix padding for nav bar
   20171024  Updates to navigation text
 */

#topNav
{ 
  clear: both;
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #336699;
  background: linear-gradient(#3f7fbf, #1f3f5f);
  background: linear-gradient(rgba(63,108,189,1), rgba(85,119,203,1));
/*  background: linear-gradient(rgba(51,102,153,1), rgba(25,51,76,1)); */
}

#navWrapper
{
}

/* topNavMenuHeader is inside the topstuff header */
#topNavMenuHeader
{
  position: absolute;
  z-index: 401;
  right: 3%;
  bottom: 3%;
}

/* hamburger for narrow screens */
#hamburger
{
  border: 1px solid #374C77;
  border-radius: 5px 5px 5px 5px;
  cursor: pointer;
  display: block;
  height: 4ex;
  width: 2em;
  padding: .3ex .4em;
  margin: 0;

  background: #336699;
  background: linear-gradient(#3f7fbf, #1f3f5f);
  background: linear-gradient(rgba(63,108,189,1), rgba(85,119,203,1));
}

/*
   The white stripes in the hamburger button
 */
#hamburger div
{
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 2px 2px 2px 2px;
  height: .4ex;
  margin: 0;
  margin-top: .5ex;
  width: 90%;
}

/*
#topNavMenuHeader h3
{
  margin: 0;
  padding: 0;
  color: #f0f0f0;
}
*/

nav ul li a.dropdownClose,
#topNav ul li a.dropdownClose
{
  display: none;
  float: right;
}


#topNav li,
#topNav a
{
  text-decoration: none;
  font-weight: bold;
  color: #f0f0f0;
  text-shadow: 1px 1px 1px black;
  z-index: 401;
}

#topNav ul li span.dropdownOpen
{
  cursor: pointer;
}

#topNav ul
{
  margin: 0;
  padding: .5ex 0;
  list-style: none;
  position: relative; /* needed because absolute below is relative to first non-fixed
                         ancestor */
  display: inline-table;
}

#topNav ul li
{
  position: relative;
  float: left;
/*  padding: 0 0 .5ex 0; */
  padding: 0 0 .1ex 0;
  margin: .2ex 1em 0 1em; 
  font-size: 110%;
}

@media screen and (max-width: 800px)
{
  #topNav ul li { margin-left: .5em; margin-right: .5em; }
}

#topNav ul li a
{
  display: block;
}

/* navigation dropdown bits */
#topNav ul ul
{
  display: none;
  position: absolute;
  margin-top: 0;
  padding-bottom: .5ex;
  top: 100%;
  left: 0;
  border-radius: 10px; /* round the corners */
  background-color: #336699;
  /* background: linear-gradient(rgba(63,127,191,1), rgba(25,51,76,1)); */
  background: linear-gradient(#3f7fbf, #1f3f5f);
  background: linear-gradient(rgba(63,108,189,1), rgba(85,119,203,1));
}

#topNav ul ul li,
#topNav ul ul ul li
{
  position: relative;
  float: none;
  text-align: left;
  margin: 0 1em .75ex 0; 
  padding: 0 0 0 .5em;
  font-size: 100%; /* don't increase again... */
}

#topNav ul ul li a,
#topNav ul ul ul li a
{
  padding: .25ex 0;
}

#topNav ul:after
{
  content: "";
  clear: both;
  display: block;
}

#topNav ul ul ul
{
  display: none;
  position: absolute;
  top: 0;
  left: 98%;
  margin-top: 0;
  border-radius: 10px; /* round the corners */
}

#topNav ul.dropSubToLeft > li > ul
{
  left: auto;
  right: 95%;
}

/* wide computer / tablet screens */
@media screen and (min-width: 701px)
{
  #topNavMenuHeader { display: none; }
  #topNav .dropArrowNarrow { display: none; }
}

/* narrow phone / iPod etc. screens (700px and under) */
@media screen and (max-width: 700px)
{
  #topNav
  {
    padding: 0;
    width: 100%;
    text-align: left;
    margin-left: 0;
  }

  #navWrapper
  {
    height: auto;
    padding: 0;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  #topNavMenuHeader
  {
  }

  #topNav ul
  {
    position: static;
    display: none;
    float: none;
    clear: both;
    margin: 0;
    padding: 0;
  }

  #topNav ul ul,
  #topNav ul ul ul
  {
    display: none;
    position: static;
    top: 0;
    font-size: 100%;
    margin: 0;
    padding: 0;
  }

  #topNav ul li
  {
    float: none;
    clear: both;
    display: block;
    font-size: 120%;
    padding: .5ex 0;
    margin: 0;
    padding: 0;
  }

  #topNav a,
  #topNav ul li span.dropdownOpen
  {
    padding: 1ex 0 1ex 1em;
  }

  #topNav ul li a,
  /* #topNav ul li a.dropdownOpen, */
  #topNav ul li span.dropdownOpen
  {
    clear: both;
    float: left;
  }

  #topNav ul li a.dropdownClose
  {
    display: none;
    clear: none;
    float: right;
    padding-right: 1em;
  }

  #topNav ul ul li
  {
    clear: both;
    font-size: 100%;
  }

  #topNav ul ul li a,
  #topNav ul ul li span.dropdownOpen
  {
    padding: 1ex 0 1ex 2em;
  }

  #topNav ul ul ul li
  {
    clear: both;
    font-size: 100%;
  }

  #topNav ul ul ul li a,
  #topNav ul ul ul li span.dropdownOpen
  {
    padding: 1ex 0 1ex 3em;
  }

  #topNav .dropArrowWide
  {
    display: none;
  }



/*
  .flyoutmenu > ul > li { font-size: 150%  !important; }
  .flyoutmenu li { background: #f8f8f8 !important; }
  .flyoutmenu li.sub { background: #f8f8f8 !important; }
  .flyoutmenu li.sub > ul > li { background: #efefef !important; text-align: left !important; }
  .flyoutmenu li.sub > ul > li.sub > ul > li { background: #dfdfdf !important; }

  .flyoutmenu li ul {
    left: auto !important;
    bottom: auto !important;
    right: 0% !important;
    top: 100% !important;
    width: 70% !important;
  }
*/
} /* 700px and less */


#bottomOfNav
{
  float: none;
  clear: both;
}