/*
 * Navigation.
 *
 * Its own file because noweats runs on Bootstrap and cannot load style.css --
 * that file sets body{max-width:800px} and styles .main, #table-art and the
 * applet boxes, none of which noweats uses. Every page links this alongside
 * its own stylesheet, so the bar looks the same everywhere, including which
 * item is marked as the current page.
 */

#nav {
  font-family:sans-serif;
  /* Set explicitly so the bar is the same size on every page. noweats runs on
     Bootstrap, whose body sets font-size:14px and line-height:1.4286, and
     whose html sets font-size:62.5%, which would make 1rem equal 10px. */
  font-size:16px;
  line-height:normal;
  /* Translucent background, not opacity on the bar: opacity fades the link
     text along with it, putting #111 on #e0e0eb at 3.78:1. */
  background-color:rgba(204, 204, 221, 0.6);
  color:white;
  margin:0px;
  overflow:hidden;
}
#nav a {
  padding:0px 10px 0px 10px;
}
#nav div {
  display:table-cell;
  padding:10px 0px 10px 0px;
  margin:0px;
}
#nav a:link {
  color:#111111;
  text-decoration:none;
}
#nav a:visited {
  color:#111111;
  text-decoration:none;
}
/* Current page: underline, not bold. Bold would make this cell wider than the
   other labels and push every label after it to the right, so the bar would
   line up differently on each page. CSS has no way to reserve the width bold
   would take before it applies, so the font weight is left alone.
   text-decoration does not change layout, and the white background is kept for
   hover, so the current page and the item under the pointer stay easy to tell
   apart. */
#nav a[aria-current="page"] {
  text-decoration:underline;
}
#nav a:hover, #nav a:focus, #nav a:active {
  background-color:white;
  color:#555555;
  text-decoration:underline;
  padding: 10px;
}