Template:PortalNav/styles.css

.portalnav {
  border: 0;
  border-top: 1px solid #888;
  border-bottom: 1px solid #888;
  margin: 0rem 0rem 0.6rem 0rem;
}
.portalnav ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  list-style: none;
  background: #ddd;
  margin: 0;
  padding: 0;
}
.portalnav li {
  padding: 0;
  margin: 0;
}
.portalnav li a, .portalnav-dropdown-btn {
  display: block;
  margin: 0;
  padding: 0.4rem;
  color: #333;
  cursor: pointer;
  font-family: 'Linux Libertine','Georgia','Times', serif;
  font-size: 1rem;
  text-decoration: none;
}
.portalnav-dropdown-btn {
  font-weight: bold;
}
.portalnav li a:hover, .portalnav li a.selflink, .portalnav-dropdown-btn:hover {
  background: #888;
  color: #fff;
}

/* dropdown behavior */
.portalnav-dropdown-container {
  position: relative;
}
.portalnav-dropdown:hover .portalnav-dropdown-menu {
  visibility: visible;
  opacity: 1;
}
.portalnav-dropdown-menu {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  z-index: 999;
  box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
  transition: 100ms ease-in;
}
.portalnav-dropdown-menu ul {
  flex-flow: column;
}
.portalnav-dropdown-menu li a {
  width: 120px;
}
.portalnav-dropdown-menu li:nth-child(odd) a:not(:hover) {
  background: #c1c1c1;
}

/* portalnav sub mobile hide thing */
.portalnav-sub {
  display: none;
  margin: 0rem 0rem 0.6rem 0rem;
  font-family: 'Linux Libertine','Georgia','Times', serif;
}
.portalnav-sub ul {
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
}
.portalnav-sub li {
  margin: 0;
  padding: 0;
}
.portalnav-sub li:not(:last-child)::after {
  content: " • ";
  white-space: pre;
}

/* mobile nonsense */
@media screen and (max-width:960px) {
  .portalnav-dropdown {
    display: none;
  }
  .portalnav-sub {
    display: block;
  }
  .COLUMNS {
    display: flex !important;
    flex-flow: column wrap;
  }
  .LEFT, .RIGHT {
    width: 100% !important;
  }
}