/* IBM VGA 8x16 webfont (Oldschool PC Font Pack), WOFF only: IE9+ and all modern browsers */
@font-face
{
  font-family: "IBM VGA 8x16";
  src: url("../font/Web437_IBM_VGA_8x16.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

body
{
  font-family: "IBM VGA 8x16", "Courier New", "Liberation Mono", monospace;
  color: #bbbbbb;
  background-color: #000000;
}

hr
{
  margin-bottom: 2em;
  border-style: solid;
  border-width: 2px;
  border-color: #cccccc;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
}

.page-width
{
  border: 0;
  margin: 0 auto;
  /* Centered, but rounded to whole pixels: a half-pixel offset blurs the pixel font.
     56rem = max-width + padding. Browsers without round() keep the line above. */
  margin-left: max(0px, round(down, (100% - 56rem) / 2, 1px));
  margin-right: 0;
  padding-left: 0.5em;
  padding-right: 0.5em;
  max-width: 55rem;
}

.main-color { color: #ffbf00; }

h1 { text-align: center }
h1, h2, h3 { color: #ffffff; }
h1 { text-decoration: underline; }

h2 { text-decoration: underline; }

a:link { color: #ffbf00; }
a:active { color: #ffffff; }
a:visited { color: #aa8f00; }
a:hover { color: #ffcf00; background-color: #403000; }

a.nonvisited:visited { color: #ffbf00; }
a.nonvisited:visited:hover { color: #ffcf00; background-color: #403000; }

/* No hover background behind linked images (e.g. the W3C badges) */
a:has(img):hover { background-color: transparent; }

/* Footer on every page, kept apart from the content above */
.footer { margin-top: 3em; }

p.nineties {
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  font-family: "Comic Sans MS", "Comic Sans", "Comic Neue", "Coming Soon", casual, cursive;
  color: #ffffff;
  background-image: url("../img/bg_stars.gif");
  background-repeat: repeat;
}

.right { text-align: right; }

.centered { text-align: center; }

/* Navigation menu at the top, stays visible while scrolling */
.topnav
{
  position: sticky;
  top: 0;
  padding: 0.5em 0;
  margin-bottom: 1em;
  background-color: #000000;
  border-bottom: 2px solid #ffbf00;
  text-align: center;
}

/* Inline, so the list shares one row with the decoration around it */
.topnav ul
{
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}

.topnav li
{
  display: inline;
  margin: 0 0.75em;
}

/* Menu entry of the page being shown */
.topnav a.current:link,
.topnav a.current:visited,
.topnav a.current:hover { color: #ffffff; }



/* Wrap long <pre> lines on narrow screens instead of scrolling sideways */
pre { white-space: pre-wrap; }

/* DOS listing in <pre class="dir">, continued by <p class="prompt"> with the blinking
   cursor GIF (HTML 4.01 doesn't allow <img> in <pre>), so no gap between them */
pre.dir { margin-bottom: 0; }
p.prompt { margin-top: 0; }

/* Align the 8x16 cursor image with the character cell */
p.prompt img { vertical-align: text-bottom; }

/* Highlighted text, e.g. a headword */
.white { color: #ffffff; }

/* Dimmed text, e.g. side notes */
.midgrey { color: #888888; }

/* Cross-references in the style of MS-DOS 6 HELP: <a class="helplink">◄Topic►</a> */
a.helplink:link,
a.helplink:visited
{
  color: #228822;
  text-decoration: none;
}

/* Underline on hover instead of the usual background */
a.helplink:hover
{
  color: #228822;
  background-color: transparent;
  text-decoration: underline;
}

/* Important notices, e.g. "IMPORTANT: ..." (DOS cyan) */
.notice { color: #00aaaa; }