@charset "utf-8";
/* CSS Document */

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/cssplaymenu-dropdown-flyout-ipad7.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */

div#menu {
font-family: 'ff-scala-sans-pro', sans-serif;
font-weight: 300;
font-style: normal;
height:auto;
padding:0;
color: var(--darkgrey);
display:inline-block;
vertical-align: baseline;
margin-left: 1em;
margin-right: 2em;
margin-top:0.15em;
float:right;
line-height: 1.25em;
}

#menu ul{
margin:0;
/*padding:0 0 0 2em;*/
list-style:none;
white-space:nowrap;
text-align:left;
display:inline-block;
background-color:var(--straw);
}

#menu li{
/*margin:0 20px 0 0;*/
padding:0;
list-style:none;
}

#menu > ul > li > ul > li {
padding-right: 0.5em;
}

#menu li{
/*display:inline;*/
/*display:inline-block;*/
}

#menu ul ul{
position:absolute;
/*left: -0.5em;*/
top:1.5em;
display:none;
padding:0.5em 0 0 0;
z-index:0;
background-color: var(--darkstraw);
color: var(--green1);
/*border: 1px solid darkgrey;
box-shadow: 0.1em 0.1em 0.8em 0 #888;*/
}

#menu ul li.rightmost ul {
/* Ensure dropdown items dont disappear off the right edge of the window. */
/* This length will have to be adjusted to suit the length of the longest menu entry. */
left:-3.3em; 
}

#menu ul ul ul{
left:100%;
top:auto;
margin-top:-25px;
}

#menu ul li.left > ul{
left:auto;
right:0;
/*top:70px;*/
top:25px;
}

#menu ul li.left ul li > ul{
left:auto;
right:100%;
top:auto;
/*margin-top:-35px;*/
}

#menu > ul{
margin:0 auto;
}

#menu > ul > li{
float:left;
display:block;
position:relative;
}


/*#menu ul,
#menu ul ul,
#menu ul ul ul,
#menu ul ul ul ul{
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.7) 100%);
background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.7) 100%);
background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.7) 100%);
background-image: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.7) 100%);
background-image: linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.7) 100%);
}*/

#menu a {
display:block;
line-height:1.25em;
text-decoration:none;
padding:0 0.5em 0 0;
color: var(--darkgrey);
}

#menu ul ul a {
line-height:1.75em;
color: var(--green1);
}

#menu > ul > li > a{
position: relative;
top: 0.25em;
float:left;
padding-left: 0.5em;
}

#menu > ul > li > ul > li > a{
padding:0 0 0 0.5em;
}

#menu ul li:hover > ul{
display:block;
}

#menu li:hover > a,
#menu ul li:hover > a.fly{
background-color: var(--darkstraw);
color: var(--green1);
text-shadow: 0px 0px 1px var(--darkgreen); /* bold effect */
}

#menu ul ul,
#menu ul ul ul,
#menu ul li.left > ul,
#menu ul li.left ul li > ul{
*left:-9999px;
*right:auto;
*display:block;
}

#menu ul li:hover{
*direction:ltr;
}

#menu ul li:hover > ul{
*left:0;
}

#menu ul ul li:hover > ul{
*left:100%;
}

#menu ul li.left:hover > ul{
*left:auto;
*right:0;
}

#menu ul li.left ul li:hover > ul{
*left:auto;
*right:100%;
}

/*
 * End of code written by Stu Nicholls
 */

/* ==============================================================
 *
 * Code below is written by David Beasley, derived from
 * https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
 * and
 * https://www.w3schools.com/howto/howto_js_accordion.asp
 *
 * ==============================================================
 */

/* Dont show responsive menu items when screen is wide */
#menu.topnav li.responsive {
  display: none;
}

/*
 * Menu formatting for when the window is narrow.
 *
 * Adjust the max-width to suit the number of top-level menu items.
 * NOTE - if the max-width value is changed here, it should also be changed 
 * in the script in topnav.tt 
 */

@media screen and (max-width: 810px) {
  #menu.topnav {
    float:none;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    position:absolute;
    right:0;
    /*border: 2px solid red;*/
  }

  #menu.topnav > ul {
    margin-top: 2.5em;
  }
  #menu.topnav.responsive {
    width:100%;
    margin-left:0.25em;
  }
  #menu.topnav li {
    /* Hide display of all top-level menu items */
    display: none;
  }
  #menu.topnav ul li.showmenu {
    /* Display the Show/Hide Menu link */
    display: block;
    position: absolute;
    right: 0;
    top:1em;
  }

  #menu.topnav.responsive {
    position: relative;
  }
  #menu.topnav.responsive li.showmenu { 
    position: absolute;
    right: 2.25em;
    top: 0em;
  }
  #menu.topnav.responsive li {
    float: none;
    display: block;
    text-align: left;
  }
  #menu.topnav.responsive ul {
    background-color: var(--darkstraw);
    /*border: 1px solid darkgrey;*/
    box-shadow: none;
  }
  #menu.topnav.responsive ul ul {
    border: none;
  }

/*  #menu li:not(:first-child):not(.showmenu) a {*/
  #menu li:not(.showmenu) a {
    line-height: 2em;
  }

  #menu.topnav.responsive ul {
    padding-bottom: 0.3em;
  }

  #menu.topnav.responsive ul li:hover > ul {
    /* Dont display sub-menu items on hover */
    display: none;
  }

  #menu.topnav.responsive ul li > ul.show {
    /* But DO display sub-menu items if they have the "show" class */
    display: block;
  }

  #menu.topnav.responsive ul ul {
    /* Adjust position of sub menu */
    position: relative;
    top: 0;
    left: 0;
    padding-left: 1em;
  }

  #menu.topnav.responsive ul li > a {
    /* Ensure top-level menu items appear in correct place */
    float: none;
  }

  #menu.topnav ul li.showmenu a.icon:before {
    content: "Show ";
  }
  #menu.topnav.responsive ul li.showmenu a.icon:before {
    content: "Hide ";
  }

  #menu ul {
    padding-left: 1em;
  }    

}

@media screen and (max-width: 500px) {
  #menu ul {
    padding-left: 0.5em;
  }    
}