/* Deliberately 1996. Browser defaults, written down so they survive every browser. */

html, body { margin: 0; padding: 0; background: #ffffff; }
body { font-family: "Times New Roman", Times, serif; color: #000000; font-size: 16px; }
a { color: #0000ee; text-decoration: underline; }
a:visited { color: #551a8b; }
a:hover { color: #0000ee; text-decoration: underline; }
a:active { color: #ee0000; }
::selection { background: #b4d5fe; }

.page { padding: 8px 8px 60px 8px; line-height: 1.35; max-width: 1400px; }

h1 { font-size: 2em; font-weight: bold; margin: 0.67em 0; }
h2 { font-size: 1.5em; font-weight: bold; margin: 0.83em 0; }
h3 { font-size: 1.17em; font-weight: bold; margin: 1em 0; }
p { margin: 1em 0; }

hr { border: 0; border-top: 1px solid #999; margin: 1em 0; }
hr.foot { margin: 2em 0 1em 0; }

ul { margin: 1em 0; padding-left: 40px; display: flex; flex-direction: column; }
ul.nav { gap: 3px; }
ul.gap4 { gap: 4px; }
ul.gap6 { gap: 6px; }
ul.gap8 { gap: 8px; }
ol { margin: 1em 0; padding-left: 40px; display: flex; flex-direction: column; gap: 6px; }

.figure-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; margin: 1em 0; }
.figure-row img { display: block; border: 1px solid #000; max-width: 100%; height: auto; }
.figure-row .text { flex: 1 1 320px; min-width: 280px; }
.figure-row .text.wide { flex-basis: 340px; }
.figure-row .text p { margin: 0 0 1em 0; }
.figure-row .text p:last-child { margin-bottom: 0; }

pre.map { font-family: "Courier New", Courier, monospace; font-size: 13px; line-height: 1.45; margin: 1em 0; white-space: pre; overflow-x: auto; }

table { border-collapse: collapse; margin: 1em 0; }
table.full { width: 100%; max-width: 960px; }
td, th { border: 1px solid #000; text-align: left; vertical-align: top; padding: 6px; }
.pad8 td, .pad8 th { padding: 8px; }
#idea-rows td:first-child { overflow-wrap: anywhere; }

.ideas-form { margin: 1em 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; max-width: 620px; }
.ideas-form textarea { width: 100%; box-sizing: border-box; font-family: "Times New Roman", Times, serif; font-size: 16px; padding: 3px; border: 1px solid #999; }
.ideas-form input[type="submit"] { font-family: "Times New Roman", Times, serif; font-size: 15px; padding: 3px 10px; }
#bill-finish { font-family: "Times New Roman", Times, serif; font-size: 15px; padding: 3px 10px; }

.disclaimer { font-size: 13px; color: #444; }
.counter { font-family: "Courier New", Courier, monospace; font-size: 12px; color: #444; }

/* The parody notice. Armed by the inline script in <head>, so the page never flashes. */
html.gate-armed, html.gate-armed body { overflow: hidden; }
html.gate-armed body > :not(#nk-gate) { visibility: hidden; }
#nk-gate { position: fixed; inset: 0; z-index: 9999; overflow: auto; background: #ffffff; }
#nk-gate .page { max-width: 620px; }
#nk-gate button { font-family: "Times New Roman", Times, serif; font-size: 16px; padding: 3px 14px; }

/* Skip link. Off-screen until a keyboard reaches it. */
.skip { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip:focus { position: static; width: auto; height: auto; display: inline-block; margin: 8px 8px 0 8px; }
main:focus { outline: none; }

/* Printing. "Please print the whole thing." */
@media print {
  main::after {
    content: "This is the printed copy. By Nancy Kehmeier. Put it on your refrigerator. By Nancy Kehmeier. It is not the official copy. By Nancy Kehmeier. I have the official copies. By Nancy Kehmeier. All of them. By Nancy Kehmeier.";
    display: block;
    margin-top: 2em;
    font-style: italic;
  }
  .skip, button { display: none; }
}