/*

Styling retrieved by Steve Beeston on 18th August 2015 from
http://responsivenavigation.net/examples/multi-toggle/index.html
by Erick Arbe

This style sheet is based on DESKTOP FIRST, as opposed to MOBILE FIRST

*/

#nav-container {
   text-align: left;
}

.menu-link {
   display: none;
}

.menu { 
   /* float: left; 
   margin-left: 33.6%;*/
   -webkit-transition: all 0.3s ease;  
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   transition: all 0.3s ease; 
}

.menu ul { 
   padding: 0px;
   margin: 0px;
   list-style: none;
   position: relative;
   /* display: inline-table; Why is this being used SRB 28/12/15 */
   display: inline-table;
   /* line below added by SRB 28/12/15 to remove mysterious space below block (see https://www.sitepoint.com/community/t/space-below-inline-elements-inside-a-block-element/10355 */
   vertical-align: top;
}

.menu > li > ul.sub-menu {
   width: 20%;
	min-width: 10em;
	background-color: #822;
	border: 1px solid #CCC;
   /* SRB 28/12/15 added 2 lines below */
   z-index: 1;
   opacity: 0.9;
}

.menu ul li {
   padding: 0px;
}

.menu > ul > li {
   display: inline-block; 
}

.menu ul li a {
   display: block; 
   text-decoration: none; 
}

.menu ul li > a {
   /* padding: 0 12px; replaced with line below by SRB 28/12/15 */
   padding: 2px 12px;
   text-decoration: none;
   border-bottom-width: 0;
   line-height: 31px;
}

.menu ul ul { 
   display: none; 
   position: absolute; 
   top:100%;
   min-width: 160px;
   background-color: #f4f4f4;
   border: 1px solid #CCC;
}

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

.menu ul ul > li {
   position: relative; 
}

.menu ul ul > li a {
   height: auto; 
   color: white;
   border-bottom: 1px solid #A44;
}

.menu ul ul > li a:hover {
   background-color: #a44; 
   color: #fff;
}

.menu ul ul ul { 
   position: absolute; 
   left: 100%; 
   top:0;
}

.menu ul li > a {
   color: #FFF;
}

.menu ul li > a:hover {
   color: white;
}

.menu ul li:hover,
.menu ul ul > li:hover {
   color: #fff;
   background: #A44;
}

.menu ul {
   width: 100%;
}

.menu > ul > li {
   float: left;
   width: 14%;
   text-align: center;
}


/* =================================*/
   @media all and (max-width: 850px) {
/* =================================*/

#nav-container {
   text-align: center;
   padding-left: 0px;
}
}

/* =================================*/
   @media all and (max-width: 850px) {
/* =================================*/

   a.menu-link {
      display: block; 
      color: #fff; 
      /* float: right;  SRB 8/5/17 */
      text-decoration: none; 
      padding: 5px 10px;
   }

   .menu { clear: both; min-width: inherit; float: none;}

   .menu, .menu > ul ul {
      overflow: hidden; 
      max-height: 0; 
      background-color: #822;
   }

   .menu > li > ul.sub-menu {
      width: 100%;
      padding: 0px; 
      border: none;
   }

   .menu.active, .menu > ul ul.active {
      max-height: 55em; 
   }

   .menu ul {
      display: inline;
   }

   .menu > ul {
      border-top: 1px solid #808080;
   }

   .menu li, .menu > ul > li {
      display: block; 
      border-bottom: 1px solid #ddd;
      width: 100%;
   }

   .menu li a {
      color: #000; 
      display: block; 
      padding: 0.8em; 
      border-bottom: 1px solid #808080; 
      position: relative;
      line-height: 40px !important;
   }

   .menu li.has-submenu > a:after {
      content: '+';
      position: absolute;
      top: 0;
      right: 0;
      display: block;
      font-size: 1.5em;
   }

   .menu li.has-submenu > a.active:after {
      content: "-";
   }

  .menu ul ul > li a {
      background-color: #611; 
   }

  .menu ul ul, .menu ul ul ul {
      display: inherit; 
      position: relative; 
      left: auto; 
      top: auto; 
      border: none; 
   }

   .menu ul li > a,
   .menu li.has-submenu > a:after {
      padding: 10px 12px;
   }

}


/*
   =========
   HAMBURGER
   =========
*/



a.menu-link {
	padding-right: 10px;
	/* margin-top: -0.15em; --- why? SRB 8/5/17 */
	line-height: 1.2;
	font-size: 18px;
	font-weight: 200;
	vertical-align: middle;
	z-index: 99;
   color: white;
}

.menu-link span {
	display: block;
	width: 19px;
	height: 3px;
	margin: 4px 0;
	background: #444; /* Edit this to change the hamburger colour */
	z-index: 99;
}