@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.
=================================================================== */

#menu{
/*position:absolute;
top:153px;
left:0px;*/
font-family: 'ff-scala-sans-pro', sans-serif;
/*margin-top:2em;*/
/*width:1000px;*/
width:100%;
height:auto;
z-index:100;
/*padding-bottom:300px;*/
/*padding-bottom:0;*/
padding:0;
margin:0;
/*font-size:1.2em;*/
background-color:#006895 /*dark blue*/;
}

#menu ul{
margin:0;
padding:0 0 0 2em;
list-style:none;
white-space:nowrap;
text-align:left;
}

#menu ul{
display:inline-block;
}

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

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

#menu ul ul{
position:absolute;
left:0;
top:1.4em;
display:none;
padding:0.5em 0 0 0;
z-index:0;
}

#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{
background-color:#006895 /*dark blue*/;
}

#menu ul ul{
background-color:#006895 /*dark blue*/;
}

#menu ul ul ul{
background-color:#006895 /*dark blue*/;
}

#menu ul ul ul ul{
background-color:#006895 /*dark blue*/;
}

/*#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;
color:#fff;
line-height:1.25em;
text-decoration:none;
padding:0 30px 0 0;
}

#menu ul ul a {
line-height:1.5em;
}

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

#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{
color:#c8e5e8 /*light blue*/;
}

#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: 950px) {
  #menu.topnav li:not(:first-child) {
    /* Hide display of all top-level menu items, except the first one */
    display: none;
  }
  #menu.topnav ul li.showmenu {
    /* Display the Show/Hide Menu link */
    display: block;
    position: absolute;
    right: 0;
  }

  #menu.topnav.responsive {
    position: relative;
  }
  #menu.topnav.responsive li.showmenu { 
    position: absolute;
    right: 0;
    top: 0;
  }
  #menu.topnav.responsive li {
    float: none;
    display: block;
    text-align: left;
  }

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

  #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;
    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 ";
  }

}


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

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