/* Main navigation: image buttons with rollover + dropdown menus (see _includes/nav.njk).
   Colors/sizes match the original mm_menu.js configuration. */
.xit-nav { display: inline-flex; align-items: flex-start; line-height: 0; text-align: left; }
.xit-nav .item { position: relative; }
.xit-nav img { display: block; border: 0; }

/* image rollover */
.xit-nav .swap .on { display: none; }
.xit-nav .item:hover .swap .off, .xit-nav .swap:focus .off { display: none; }
.xit-nav .item:hover .swap .on,  .xit-nav .swap:focus .on  { display: block; }

/* dropdowns */
.xit-nav .menu {
  display: none; position: absolute; top: 29px; left: 5px; z-index: 100;
  margin: 0; padding: 0; list-style: none;
  border: 1px solid #555; background: #555; line-height: normal;
}
.xit-nav .item:hover .menu, .xit-nav .item:focus-within .menu { display: block; }
.xit-nav .menu li + li { border-top: 1px solid #555; }
.xit-nav .menu a {
  display: block; height: 18px; line-height: 18px; padding: 0 3px;
  font: 12px Arial, Helvetica, sans-serif; color: #0573bc; background: #fff;
  text-decoration: none; white-space: nowrap;
}
.xit-nav .menu a:hover, .xit-nav .menu a:focus { background: #bdd84e; }