/*==============================================================================

	GRC multi-level script-free pure-CSS menuing system stylesheet.
   This code is hereby placed into the public domain by its author
   Steve Gibson. It may be freely used for any purpose whatsoever.


                      PUBLIC DOMAIN CONTRIBUTION NOTICE							 
   This work has been explicitly placed into the Public Domain for the
	benefit of anyone who may find it useful for any purpose whatsoever.
	
==============================================================================*/
/* Adapted by Lawrence Johnstone 2014-08-22, converted to SCSS mainly for color variable substitution */
/* a light red */
/* a slightly grayer shade of light red */
/*========================= TOP OF THE MENU CASCADE =========================*/
.menu {
  position: relative;
  /* establish a menu-relative positioning context */
  float: left;
  /* play nicely with others */
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  /* we always want our menu to fill the available space */
  background: #ff6666;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12pt;
  /* this (and also below) sets the menu's font size */
  border-bottom: 1px solid black;
  /* give us a black border underneath */
  border-top: 1px solid black;
  /* this must be 1.0 or 1.5 or 2.0 for Mozilla */
}
.menu ul {
  margin: 0;
  list-style-type: none;
  /* we don't want to view the list as a list */
  /*line-height:1.5em; lojmod remove line-height          /* globally set the menu's item spacing. note */
}
.menu li {
  float: left;
  /* this creates the side-by-side array of top-level buttons */
  position: relative;
  /* create local positioning contexts for each button */
  margin: 0;
}
.menu ul li table {
  margin: -1px 0;
  /* IE5 needs -1px top and bottom table margins */
  m\argin: 0;
  /* re-zero the table margins for everyone but IE5 */
  border-collapse: collapse;
  /* IE5 needs this for the sub-menus to work */
  font-size: 12pt;
  /* this sets the base font size for our entire menu */
}

/* lojmod apply this to .menu -- suppress our whole menu when not an interactive mode (when printing, etc.) */
@media print, projection {
  .menu {
    d\isplay: none;
  }
}
.drop {
  display: block;
  padding: 0;
  /* lojmod remove extra padding from item */
  margin: 0;
  text-align: right;
  /* this right alignment goes with the float:left below */
  cursor: pointer;
  /* IE tries to switch back to an I-beam, don't let it */
  cursor: hand;
  /* IE5 only knows about "hand", so set it both ways */
  /* L3 (fly-out) submenus                           */
}
.drop span {
  /* this simultaneously left and right aligns the text and */
  float: left;
  /* the >> in the drop-down menus which link to sub-menus */
}
.drop:after {
  /* lojmod make menu system insert the right arrows */
  content: "\bb";
  /* automatically for L2 (drop-down) menus with     */
}

.rightmenu {
  position: relative;
  /* establish a local positioning context for YAH label */
  float: right;
  /* and right-align it at the top of our page */
}

/* LOJmod remove GRC-site-specific definitions for #research and #other */
/*======================== TOP LEVEL MENU DEFINITIONS ========================*/
.menu ul li ul {
  display: none;
  /* initially hide the entire list hierarchy */
  padding: 1px;
  /* this is our box border width */
}
.menu ul li a, .menu ul li a:visited {
  /* unselected top-level menu items */
  display: block;
  float: left;
  text-decoration: none;
  /* lojmod height:18px; */
  color: white;
  padding: 0.25em 1em;
  /*lojmod for top-level menu item spacing*/
  font-weight: bold;
}
.menu ul li:hover a,
.menu ul li a:hover {
  /* selected top-level menu items */
  /*border-top:1px solid #000;    /* these 2 lines create the push-in illusion */
  /*height:16px;*/
  /* LOJmod -- change the "push-in illusion" (doesn't work with text) to background color change */
  background-color: red;
  color: white;
}
.menu ul li.current, .menu ul li.current a, .menu ul li.current a:visited {
  /* lojmod -- highlight "current" page's top-level menu item */
  background-color: #c86666;
}
.menu ul li.current ul li, .menu ul li.current ul li a, .menu ul li.current ul li a:visited, .menu ul li.current a ul li, .menu ul li.current a ul li a, .menu ul li.current a ul li a:visited, .menu ul li.current a:visited ul li, .menu ul li.current a:visited ul li a, .menu ul li.current a:visited ul li a:visited {
  background-color: red;
}
.menu ul li.current a:hover, .menu ul li.current:hover a {
  background-color: red;
}

/*======================== 2ND LEVEL MENU DEFINITIONS ========================*/
.menu ul li:hover ul,
.menu ul li a:hover ul {
  /* 2nd level drop-down box */
  display: block;
  position: absolute;
  margin: 0;
  top: 19.2pt;
  /* lojmod adjust for font size & 0.25em bottom padding on menu bar */
  left: -1px;
  /* left-align our drop-down to the previous button border */
  height: auto;
  /* the drop-down height will be determiend by line count */
  width: 15.5em;
  color: white;
  /* this sets the unselected-text color */
  background: black;
  /* this sets our menu's effective "border" color */
}
.menu ul li:hover ul.leftbutton,
.menu ul li a:hover ul.leftbutton {
  /* our first dropdown should not be skewed */
  left: 0px;
}
.menu ul li:hover ul.skinny,
.menu ul li a:hover ul.skinny {
  /* 2nd level skinny drop-down box */
  width: 9em;
  /* lojmod to account for 1em left padding in menu items */
}
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {
  /* 2nd level unselected items */
  border: 0;
  margin: 0;
  padding: 1px 0 1px 1em;
  /* lojmod top right bottom left */
  height: auto;
  color: white;
  /* this sets the unselected drop-down text color */
  background: red;
  /* this sets the drop-down menu background color */
  font-weight: normal;
  width: 14.5em;
}
.menu ul li:hover ul li:hover a,
.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li:hover a,
.menu ul li a:hover ul li a:hover {
  /* 2nd level selected item */
  color: red;
  background: white;
}
.menu ul li:hover ul.skinny li,
.menu ul li a:hover ul.skinny li {
  /* 2nd level un+selected items */
}
.menu ul li:hover ul.skinny li a, .menu ul li:hover ul.skinny li a:hover,
.menu ul li a:hover ul.skinny li a,
.menu ul li a:hover ul.skinny li a:hover {
  width: 8em;
}

.menu ul.rightmenu li:hover ul,
.menu ul.rightmenu li a:hover ul {
  /* 2nd level neighborhood drop-down box */
  left: auto;
  right: 0;
  /* nudge the right menu right to line up under the border */
  width: 14.5em;
}

* html .menu ul.rightmenu li a:hover ul {
  /* IE5/6 needs a tweak here */
  right: -1px;
}

/*======================== 3RD LEVEL MENU DEFINITIONS ========================*/
.menu ul li:hover ul li ul, .menu ul li:hover ul li a ul,
.menu ul li a:hover ul li ul,
.menu ul li a:hover ul li a ul {
  visibility: hidden;
  /* hide inactive 3rd-level menus */
}
.menu ul li:hover ul li:hover ul, .menu ul li:hover ul li a:hover ul,
.menu ul li a:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul {
  /* 3rd level drop-down (fly-out) box */
  visibility: visible;
  position: absolute;
  margin-top: -1px;
  /* bring the top edge of the 3rd level menu up one */
  top: 0;
  left: 15.5em;
  /*lojmod -- allow fly pos'n use drop-down variable width*/
  width: 14.5em;
  /*lojmod -- allow fly width to be set by variable */
}
.menu ul li:hover ul li:hover ul li a, .menu ul li:hover ul li a:hover ul li a,
.menu ul li a:hover ul li:hover ul li a,
.menu ul li a:hover ul li a:hover ul li a {
  /* 3rd level unselected items */
  width: 14.5em;
  background: white;
  color: red;
  font-weight: normal;
}
.menu ul li:hover ul li:hover ul li a:hover, .menu ul li:hover ul li a:hover ul li a:hover,
.menu ul li a:hover ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover ul li a:hover {
  /* level3 selected items */
  width: 14.5em;
  color: white;
  background: #ff6666;
}
.menu ul li:hover ul.skinny li:hover ul, .menu ul li:hover ul.skinny li a:hover ul,
.menu ul li a:hover ul.skinny li:hover ul,
.menu ul li a:hover ul.skinny li a:hover ul {
  left: 9em;
  width: 9em;
}
.menu ul li:hover ul.skinny li:hover ul li a, .menu ul li:hover ul.skinny li a:hover ul li a,
.menu ul li a:hover ul.skinny li:hover ul li a,
.menu ul li a:hover ul.skinny li a:hover ul li a {
  width: 8em;
}
.menu ul li:hover ul.skinny li:hover ul li a:hover, .menu ul li:hover ul.skinny li a:hover ul li a:hover,
.menu ul li a:hover ul.skinny li:hover ul li a:hover,
.menu ul li a:hover ul.skinny li a:hover ul li a:hover {
  width: 8em;
}