/* mainMenuBar.css
 *
 * Added style for main menu bar, to achieve pop-ups.
 *
 * See http://stackoverflow.com/questions/22800818
 * Expected structure:
 *     <div class="mainMenuBar">
 *       <ul>
 *         <li><a>HOME</a>
 *           <ul>
 *             <li><a>What's new</a></li>
 *             <li><a>Recommended</a></li>
 *             ...
 * An old container, div class="nav-top", used to surround most of the
 * mainMenuBar, and applied a lot of CSS. No longer there.
 */
div.mainMenuBar {
  /* background-color: var(--ccel-red); */
  padding-top: 0pt;
  padding-bottom: 14pt;
}
.mainMenuBar span.hamburger {
  width: 30px;
}
.mainMenuBar ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin-top: 0pt;
}
.mainMenuBar ul li {
  position: relative;
}
.mainMenuBar > ul > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  color: white;
  padding-left: 5%;
  padding-right: 5%;
}
.mainMenuBar ul ul {
  display: none;
  position: absolute;
  top: 100%;
  background-color: #999999;
}
.mainMenuBar.hoverShow ul li:hover > ul {
  display: block;
}
.mainMenuBar.hoverShow ul li:hover > div {
  display: block;
}
.mainMenuBar ul ul ul {
  top: 0;
  left: 100%;
  background-color: #999999;
}
.mainMenuBar a {
  text-decoration: none;
  font-family: Arial;
  font-size: 12pt;
}
.mainMenuBar ul ul a {
  color: white;
  text-decoration: none;
  font-family: Arial;
  font-size: smaller;
}
.mainMenuBar ul li ul li:hover {
  background-color: #cfbe44;
}
.mainMenuBar ul li ul li {
  text-align: center;
  border-top: thin #333333 solid;
  padding-top: 6pt;
  padding-bottom: 6pt;
  width: 100pt;
}

/* Style for multi-level bootstrap dropdowns */
.dropdown-submenu {
  position: relative;
}
.dropdown-submenu > .dropdown-menu {
  height: auto;
  max-height: 80vw;
  overflow-y: auto;
}
.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

/* Force dropdown flex-wrap elements to display flex*/
.dropdown-menu.flex-wrap.show {
  display: flex !important;
}

@media only screen and (max-width: 1200px) {
  .mainMenuBar.navbar {
    padding: .5rem .5rem;
  }
  .mainMenuBar a {
    font-size: 10pt;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: .4em;
    padding-left: .3em;
  }
}