/* 1997 called, it wants its homepage back. */
body {
  margin: 0; padding: 8px;
  background: #008080 repeating-linear-gradient(45deg, #008080 0 6px, #007070 6px 12px);
  color: #000; font: 16px "Times New Roman", Times, serif;
}
.page { max-width: 900px; margin: 0 auto; background: #c0c0c0; padding: 12px 16px;
  border: 3px outset #fff; }
.banner { text-align: center; margin: 0; padding: 6px; color: #ff0; background: #000080;
  font: bold 28px "Comic Sans MS", "Comic Sans", cursive; letter-spacing: 2px; border: 3px ridge #fff;
  text-shadow: 2px 2px #f0f; }
.tagline { text-align: center; font-style: italic; color: #800000; margin: 4px 0 10px; }
.blink { animation: blink 1s steps(2, start) infinite; color: #f00; font-weight: bold; }
@keyframes blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .blink { animation: none; } }
a { color: #0000ee; } a:visited { color: #551a8b; } a:active { color: #f00; }
h2 { color: #000080; border-bottom: 2px solid #800000; } h3 { color: #800000; }
hr.rainbow { border: 0; height: 6px; background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
table.nav { margin: 8px auto; border: 2px outset #fff; background: #d8d8d8; }
table.nav td { padding: 3px 8px; border-right: 1px solid #808080; font-size: 15px; }
table.doc { border-collapse: separate; border-spacing: 2px; width: 100%; border: 2px inset #808080; background: #fff; }
table.doc th { background: #000080; color: #fff; text-align: left; padding: 3px 6px; }
table.doc td { padding: 3px 6px; vertical-align: top; border-bottom: 1px dotted #808080; word-break: break-word; }
table.form td.label { text-align: right; padding-right: 8px; font-weight: bold; }
div.doc { background: #fffff0; border: 2px inset #808080; padding: 4px 14px; overflow-x: auto; }
div.doc table.doc { font-size: 14px; }
code, pre { font: 14px "Courier New", Courier, monospace; background: #eee; }
pre { padding: 6px; border: 1px solid #808080; overflow-x: auto; }
input { font: 14px "Courier New", monospace; border: 2px inset #fff; background: #fff; padding: 2px; max-width: 100%; }
button { font: bold 14px Arial, sans-serif; background: #c0c0c0; border: 2px outset #fff; padding: 2px 10px; cursor: pointer; }
button:active { border-style: inset; } button.danger { color: #800000; }
form.inline { display: inline; margin: 0; }
.flash { padding: 6px 10px; border: 2px solid; font-weight: bold; }
.flash.good { background: #c0ffc0; border-color: #008000; } .flash.bad { background: #ffc0c0; border-color: #c00000; }
.counter { text-align: center; } .counter b { background: #000; color: #0f0; padding: 2px 8px; font: bold 18px "Courier New", monospace; letter-spacing: 3px; border: 2px inset #808080; }
.ai { background: #800080; color: #fff; font: bold 11px Arial, sans-serif; padding: 1px 5px; }
.small { font-size: 13px; color: #404040; }
.foot { text-align: center; font-size: 12px; color: #404040; }
@media (max-width: 600px) { .banner { font-size: 20px; } table.nav td { display: block; border: 0; } }
/* animated bits (driven by app.js) */
.ticker { overflow: hidden; white-space: nowrap; background: #000; color: #0f0; border: 2px inset #808080; font: bold 15px "Courier New", monospace; padding: 3px 0; margin: 8px 0; }
.ticker span { display: inline-block; }
.sparkle { position: fixed; pointer-events: none; z-index: 9; font-size: 14px; color: #ff0; text-shadow: 1px 1px #f0f; }
.bar { display: inline-block; width: 120px; height: 12px; border: 2px inset #808080; background: #fff; vertical-align: middle; margin-left: 8px; }
.bar i { display: block; height: 100%; width: 0; background: #000080; }
.termbox { height: 60vh; min-height: 300px; background: #000; padding: 6px; border: 3px inset #808080; }

ul.tree { list-style: none; margin: 0; padding-left: 1.4em; }
ul.tree li { margin: 2px 0; }
ul.tree summary { cursor: pointer; }