/* Main menu font */
a.toggleMenu,
.menuNav > li > a
{
  font-family: Montserrat, sans-serif;
  line-height: 12px;
  padding: 1em;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
  background: #333333;
  color: #dddddd;
  font-weight: 700;
}

.menuOuterContainer {
  width: 100%;
  display: table;
}

.menuInnerContainer {
  display: table-row;
  width: 100%;
}

.menu-table-cell-left {
  display: table-cell;
  vertical-align: top;
  width: 100%;
  text-align: left;
}

.menu-table-cell-right {
  display: none;
  vertical-align: top;
  padding-top: 15px;
  width: 100%;
  padding: 10px;
  text-align: right;
}

/* On mobile, the 'menu' button */
.toggleMenu {
  display: none;
  padding: 11px 15px 11px 15px;
}

.mobile-logo {
  display: none;
}

a.active {
  color: #ffffff;
  background: #666666;
}

/* This background appears around the submenu edges. Lighter on mobile. */
.menuNav {
  list-style: none;
  *zoom: 1;
  background: #333333;
  text-align: center;
}

.menuNav, .menuNav a, .menuNav ul {
  margin: 0;
  padding: 0;
}

.menuNav a, a.toggleMenu {
  text-decoration: none;
}

.menuNav:before, .menuNav:after {
  content: " ";
  display: table;
}

.menuNav:after {
  clear: both;
}

/* child uls, not ul.menuNav */
.menuNav ul {
  list-style: none;
  text-align: left;
}

.menuNav li {
  position: relative;
  z-index: 30; /* highest on page */
}

/* > is immediate children only */
.menuNav > li {
  display: inline-block;
  border-bottom: 1px solid rgba(150, 150, 150, 0.14902);
}

.menuNav > li > a {
  display: block;
}

.menuNav li ul {
  opacity: 0;
  position: absolute;
  left: -9999px;
}

.menuNav > li.hover > ul {
  left: 0; 
  -webkit-transition: opacity 250ms;
  opacity: 1;
}

/* main menu hilight */
.menuNav > li.hover > a {
  color: #aeff70;
}

/* sub menu hilight */
.menuNav > li.hover li a:hover {
  color: #aeff70;
}

.menuNav li li a {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  line-height: 12px;
  background: #333333;
  position: relative;
  z-index: 100;
  border-bottom: 1px solid rgba(150, 150, 150, 0.14902);
  padding: 11px 15px 11px 15px;
  color: #dddddd;
  /* TODO This hard-coded width is not a good idea,
     but I don't know how to make the LI overflow the UL boundaries
     and retain the functionality of the menu. */
  width: 250px;
}

.menuSeparator {
  display: block;
  background: #777777;
  position: relative;
  z-index: 100;
  border-bottom: 1px solid rgba(200, 200, 200, 0.14902);
  padding: 0px 15px 0px 15px;
  color: #dddddd;
  /* TODO This hard-coded width is not a good idea,
     but I don't know how to make the LI overflow the UL boundaries
     and retain the functionality of the menu. */
  width: 250px;
}

@media screen and (max-width: 768px) {
  .active {
    display: block;
  }
  .menu-table-cell-left {
    padding: 10px;
  }
  .menu-table-cell-right {
    display: table-cell;
  }

  /* truncate right side of submenus */
  .menuNav {
    overflow: hidden;
    display: none;
    background: #175e4c;
    text-align: left;
  }
  .menuNav > li {
    display: block;
  }
  .menuNav ul {
    display: block;
    width: 100%;
  }
  .menuNav > li.hover > ul, .menuNav li li.hover ul {
    position: static;
    padding-left: 15px;
    -webkit-transition: opacity 0s;
    /* Undo the hard-coded desktop width above */
    width: 100%;
  }
}