/* All <ul> tags in the menu including the first level */
.menulist, .menulist  ul {
 background-color : #ffffff;
 clear            : both;
 margin           : 0;
 padding          : 0;
 list-style       : none;
 font-family      : Arial;
 cursor           : default;
}

/* Open submenu. (Animation doesn't work in IE 9. But, opening the submenu does.) */
ul.menulist > li:hover > ul,
ul.menulist > li > ul > li:hover > ul {
  display           : block;
  -webkit-animation : fadein .2s;
  -moz-animation    : fadein .2s;
  -ms-animation     : fadein .2s;
  animation         : fadein .2s;
}

@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@-moz-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@-ms-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Provide right-pointing triangles on menu items that have sub-menus. */
/* 6/5/2024: disabling due to conflict with DSPLib/runtime library code.*/
/* .menulist ul > li > a:after {
  content : '\0025b6';
  float   : right;
  clear   : both;
} */

.menulist ul > li > a:only-child:after {
  content : '';
  clear   : both;
}

/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */
.menulist ul {
 display    : none;
 position   : absolute;
 /* TODO: Is the following assertion (in the comment) true? */
 top        : 1.0em; margin-top   : 4px; /* I'm using ems and px to allow people to zoom their font */
 left       : -1px;
 width      : 180px;
 border     : solid 1px black;
 box-shadow : 0 2px 2px 1px grey;
}

/* Second and third etc. level submenus - position beside parent, with small overlap */
.menulist ul ul {
 top        : -1px;
 margin-top : 0;
 left       : 174px;
}

/*
 All menu items (<li> tags). 'float: left' lines them up horizontally, and they are
 positioned relatively to correctly offset submenus. Also, they have overlapping borders.
*/
.menulist li {
 float        : left;
 display      : block;
 margin-top   : -5px;
 position     : relative;
 border-right : 1px solid gray;
}

.menulist li:last-child {
  border-right: 0px;
}

/*
 For mobile screens.
 */
@media screen and (max-width: 799px) {
  .menulist ul ul {
    left: -176px;
  }
}

@media screen and (max-width: 610px) {
  ul.menulist {
    display: none;
  }

  ul.menulist a {
    padding: 8px 6px;
  }

  .menulist li {
    background: #e6e8eb;
    float: none;
  }

  .menulist ul {
    box-shadow: unset;
    position: relative;
    top: -4px;
    width: 100%;
    z-index: 500;
  }

  .menulist > li > ul {
    height: 100px;
    overflow-y: scroll;
  }


  .menulist ul ul {
    left: 0px;
    z-index: 1000;
  }

  .menulist ul li {
    background-color: #ffffff;
  }

  ul.menulist > li > ul,
  ul.menulist > li > ul > li > ul {
    display: block;
  }

  label.show-menu {
    display: block;
  }

}


/* Items in submenus - override float/border/margin from above, restoring default vertical style */
.menulist ul li {
 float  : none;
 margin : 0;
 border : none;
}

/* Links inside the menu */
.menulist a {
 display         : block;
 padding         : 2px 6px;
 color           : #000;
 text-decoration : none;
}

/* List items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */
.menulist a:hover,
.menulist a.highlighted:hover,
.menulist a:focus,
.menulist a.highlighted,
ul.menulist > li:hover > a,
ul.menulist > li > ul > li:hover > a {
  background-color : #003768;
  color            : white;
  text-decoration  : none;
}

/*
 If you want per-item background images in your menu items, here's how to do it.
 1) Assign a unique ID tag to each link in your menu, like so: <a id="xyz" href="#">
 2) Copy and paste these next lines for each link you want to have an image:
    .menulist a#xyz {
      background-image: url(out.gif);
    }
    .menulist a#xyz:hover, .menulist a.highlighted#xyz, .menulist a:focus {
     background-image: url(over.gif);
    }
*/

/* Only style submenu indicators within submenus. */
.menulist a .subind {
 display: none;
}
.menulist ul a .subind {
 display: block;
 float: right;
}

.menulist ul li.spaced
{
  border-top: 2px solid #243148;
}

ul.menulist > li.NavYouAreHere {
  font-weight: bold;
}

ul.menulist > li.NavYouAreHere > ul > li {
  font-weight: normal;
}

.show-menu {
  display         : none;
  padding         : 2px;
  text-align      : center;
  text-decoration : none;
}

input#show-menu {
  display: none;
}
input#show-menu:checked ~ ul.menulist {
  display: block;
}
input#show-menu:checked ~ label.show-menu::before {
  content: 'Hide ';
}