/*
CSS for Navigation.
Author: Aaron W Jones
Website: aaronwjones.com
Date: 07/12/2020

This file handles the CSS for the navigation menu

It is structured in two parts.

The first part handles the dropdown CSS menu
in a similar way to gwoptics pre 2020.

The second part contains a series of media queries
to move the navigation bar into a left hand menu.
*/

#gwmenu {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    width: 900px;
    height: 32px;
    background: #dbdbdb;
    border: 10px white solid;
}

#gwmenu ul {
    margin: 0;
    padding: 0 0 0 20px;
    list-style: none;
    line-height: normal;
    border: none;
    z-index: 1; /*list should be on top */
}

#gwmenu li:hover {
    background: #bbbbbb;
}

#gwmenu ul ul {
    display: none;
    background: #dbdbdb;
    padding: 0;
}

#gwmenu ul ul li.sep {
    border-top: 3px #FFFFFF solid;
}

#gwmenu a.icon:hover {
    color: #0000EE;
}
#gwmenu li.icon:hover {
    background: #dbdbdb;
}

#gwmenu ul p {
  margin: 0px;
}

@media screen and (min-width: 950px) {

  #gwmenu li {
      float: left;
      text-align: center;
      border: none;
  }

  #gwmenu ul li {
      position: relative;
      float: left;
      margin: 0;
      padding: 6px 0 0 0;
  }

  #gwmenu ul ul {
      position: absolute;
      top: 100%;
      left: 0;
  }

  #gwmenu ul ul li {
      float: none;
      width: 300px;
      color: #000;
  }

  #gwmenu ul ul li.sep {
      border-top: 3px #FFFFFF solid;
  }

  #gwmenu ul ul ul {
      top: 0;
      left: 100%
  }

  #gwmenu ul a,#gwmenu ul p {
      display: block;
      padding: 0 50px;
      text-decoration: none;
      text-transform: uppercase;
      font-size: 15px;
      color: #0F0F0F;
      border: none;
  }

  #gwmenu ul ul a, #gwmenu ul ul p {
      font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
      text-decoration: none;
      text-transform: none;
      text-align: left;
      font-size: 15px;
      line-height: 120%;
      padding: 10px 15px;
      color: #0F0F0F;
      border: none;
  }

  #gwmenu ul li:hover > ul {
      display: block
  }

  #gwmenu:focus,
  :active {
      border: 0;
      text-decoration: none;
  }

  #gwmenu a.icon {
      padding: 0px 10px;
      font-size: 20px;
  }

  #gwmenu .current_page_item a {
      color: #FFFFFF;
  }

  #gwmenu .navhome { display: none; }
}

@media screen and (max-width: 950px) {
  /* The sidebar menu */
  #gwmenu {
    height: 100%; /* Full-height: remove this if you want "auto" height */
    width: 400px; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    overflow: scroll; /* independant scroll */
    z-index: 3; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    /*background-color: #111; /* Black */
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 20px;
    display: none;
    border: none;
  }

  @media screen and (max-width: 550px) {
    #gwmenu {width: 100%;}
  }

  /* remove indent and list style */
  #gwmenu ul {
    padding: 0;
    list-style-type: none;
  }
  
  #gwmenu ul ul li.sep {
    border-top: 1px #FFFFFF solid;
  }

  #gwmenu ul li ul {
    margin-left: 10px;
    list-style-type: none;
  }
  
  #header_menu_close {display: block;}

  /* The navigation menu links */
  #gwmenu a, #gwmenu p {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
  }

  /* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }
}