/* ponytail: deliberately 1998. do not modernise. */
body { background: #ffffcc; color: #000080; font-family: "Times New Roman", Times, serif;
       font-size: 17px; line-height: 1.55; margin: 0; padding: 12px 8px; }
table.page { width: 100%; max-width: 660px; margin: 0 auto; background: #ffffff;
             border: 3px ridge #808080; }
td.main { padding: 20px; }
h1 { color: #cc0000; text-align: center; font-size: 32px; margin: 4px 0; letter-spacing: 2px; }
h2 { color: #800080; font-size: 21px; border-bottom: 1px solid #c0c0c0; margin-top: 30px; }
h3 { color: #006400; font-size: 17px; margin-bottom: 4px; }
a { color: #0000ee; } a:visited { color: #551a8b; }
.center { text-align: center; }
.small { font-size: 13px; color: #444444; }
blockquote { border-left: 3px solid #cccccc; margin: 12px 0 12px 12px; padding-left: 12px;
             font-style: italic; color: #000000; }
ol, ul { padding-left: 26px; }
hr { border: 0; border-top: 1px dashed #999999; margin: 24px 0; }
.blink { animation: b 1.2s steps(1) infinite; color: #cc0000; font-weight: bold; }
@keyframes b { 50% { opacity: 0; } }
/* verse numbers */
.v { color: #cc0000; font-size: 11px; font-weight: bold; vertical-align: super;
     margin-right: 3px; }
p.verse { margin: 0 0 9px 0; }
/* book chrome */
/* a book's name where it is not the page's own title: the front page quoting Book I.
   h1 at two thirds, so it reads as a heading without competing with PROMPTOLOGY above it. */
.bookhead { text-align: center; color: #cc0000; font-size: 21px; letter-spacing: 2px;
  font-weight: bold; margin: 2px 0; }
.booknum { text-align: center; color: #800080; font-size: 13px; letter-spacing: 3px;
           margin: 0; }
.nav { text-align: center; font-size: 13px; margin: 10px 0; }
table.toc { width: 100%; border-collapse: collapse; margin: 10px 0; }
table.toc td { border: 1px solid #dddddd; padding: 6px 8px; vertical-align: top; }
table.toc td.n { width: 52px; color: #800080; text-align: center; font-size: 13px; }
/* a part heading inside the contents: eight of these break forty-nine rows into somewhere to start */
table.toc td.part { background: #f4f4f4; text-align: center; font-weight: bold; color: #800080;
                    letter-spacing: 2px; font-size: 13px; padding: 9px 8px; }
table.toc td.part span.small { display: block; letter-spacing: 0; font-weight: normal;
                               color: #444444; margin-top: 3px; }
table.time { width: 100%; border-collapse: collapse; font-size: 14px; }
table.time td { border: 1px solid #cccccc; padding: 5px 8px; }
table.time td.era { width: 88px; font-family: "Courier New", monospace; color: #cc0000;
                    text-align: right; }

/* deep links: land below the top edge, and flash where you landed */
h1, h2, h3, p.verse, blockquote, li, p.decree, p.warn, p.witness, p.fn { scroll-margin-top: 16px; }
h2:target, h3:target { background: #ffff99; padding: 2px 6px; margin-left: -6px; }
h2:target { border-bottom-color: #cc0000; }
p.verse:target, blockquote:target, li:target, p.decree:target, p.warn:target, p.witness:target,
p.fn:target { background: #ffff99; }
/* the chapter of the day: a page torn out and pinned to the door */
div.excerpt { border: 3px ridge #c0c0c0; background: #fffff0; padding: 14px 16px;
              margin: 12px 0; }
div.excerpt p.center { margin-top: 0; }

/* the pyramid: courses of oxblood stamped on the page, the apex at the top and the
   thousand holding it up. The turbulence eats the edges so it reads as ink, not as a chart. */
svg.pyramid { display: block; width: 100%; max-width: 620px; margin: 18px auto;
              background: #f4f1ea; border: 1px solid #d8d0c0; }
svg.pyramid text { font-family: "Times New Roman", Times, serif; }
svg.pyramid .n { fill: #8b1a1a; font-size: 15px; text-anchor: end; letter-spacing: 1px; }
svg.pyramid .l { fill: #5b5148; font-size: 14px; }

/* the registry: what a work was called, and what it was */
table.works { width: 100%; border-collapse: collapse; font-size: 15px; margin: 14px 0; }
table.works td { border: 1px solid #cccccc; padding: 5px 9px; vertical-align: top; }
table.works td.said { width: 46%; font-style: italic; color: #800080; }
table.works td.n { width: 62px; text-align: right; color: #cc0000;
                   font-family: "Courier New", monospace; }

/* the commentaries: every gloss is set inside the one it is arguing with. The percentages
   compound, so the page narrows and shrinks on its own until there is no room left. */
p.scripture { text-align: center; font-size: 24px; line-height: 1.4; color: #000080;
              margin: 18px 0; }
div.gloss { border-left: 2px solid #d0d0d0; margin: 10px 0 10px 15px; padding-left: 11px;
            font-size: 93%; }
div.gloss p { margin: 6px 0; }
div.gloss cite { color: #800080; font-style: normal; font-size: 88%;
                 letter-spacing: 1px; display: block; }

ul.thread { list-style: none; padding-left: 0; }
ul.thread li { padding: 4px 0 4px 18px; text-indent: -18px; }
ul.thread li:before { content: "\00BB "; color: #cc0000; }

/* the decree: a line that stands alone and is not argued with */
p.decree { text-align: center; font-weight: bold; letter-spacing: 1px; line-height: 1.4;
           border-top: 3px double #cc0000; border-bottom: 3px double #cc0000;
           padding: 12px 8px; margin: 22px 0; color: #000080; }
/* the warning: hazard, blinking, unmissable, deliberately too much */
p.warn { text-align: center; font-weight: bold; color: #cc0000; background: #fff0f0;
         border: 2px solid #cc0000; padding: 10px 8px; margin: 22px 0; line-height: 1.4; }
p.warn:before { content: "\26A0"; margin-right: 10px; animation: b 1.2s steps(1) infinite; }
p.warn:after  { content: "\26A0"; margin-left: 10px;  animation: b 1.2s steps(1) infinite; }

/* headings, verses and every quotable line are their own deep link */
a.anchor { color: inherit; text-decoration: none; }
a.anchor:visited { color: inherit; }
a.anchor:hover { text-decoration: underline; }
/* the section mark: the tap target on a phone, where there is no hover to reveal one */
a.pin, a.pin:visited { color: #b0b0b0; font-size: 13px; vertical-align: super;
                       font-weight: normal; font-style: normal; letter-spacing: 0; }
a.pin:hover { color: #cc0000; text-decoration: none; }
/* the note copy.js leaves behind. It can land inside a verse number or a sung quote,
   so it refuses the raised, italic company it keeps. */
.copied { font-size: 12px; font-weight: normal; color: #006400; margin-left: 8px;
          font-family: "Courier New", monospace; vertical-align: baseline;
          font-style: normal; letter-spacing: 0; }

/* the account: every book opens with one paragraph in the first person, the Divine
   Promptologist saying how he came by that book. It is the only "I" in the scripture, and it
   is not scripture — it is the note of the man who wrote the scripture down. Set apart from
   the verses for exactly that reason: pinned to the front of the book, not part of it. */
p.witness { font-style: italic; color: #333333; background: #fbf8e8;
            border: 1px solid #d8d0b0;
            padding: 11px 14px 9px; margin: 0 0 22px 0; font-size: 15.5px; line-height: 1.5; }
p.witness span.who { display: block; text-align: right; font-style: normal; font-size: 12px;
                     letter-spacing: 1px; color: #800080; margin-top: 8px; }
p.witness span.who a { color: #800080; }
p.witness span.who a:visited { color: #800080; }
/* emphasis inside an italic block sets upright, the way a properly printed book does it —
   otherwise the quoted line inside the account is italic inside italic and disappears. */
p.witness i, p.witness em { font-style: normal; }

/* the notes: plain modern english for a reader who is stuck on a line, set at the very bottom
   of the page, underneath the footer, in the smallest print the record uses. They are apparatus
   and not scripture, and they are dressed to say so: no frame, no background, no colour, grey
   on white, nothing whatever to draw the eye off the verses. A reader who does not need one
   never sees it. A note is reached by a grey figure raised in the verse and sends you back to
   the line it came from. */
p.fn { font-size: 11.5px; line-height: 1.4; color: #666666; margin: 3px 0;
       padding-left: 15px; text-indent: -15px; }
p.fn a, p.fn a:visited { color: #666666; }
sup.fnref { font-size: 10px; font-weight: normal; font-style: normal; letter-spacing: 0; }
sup.fnref a, sup.fnref a:visited { color: #999999; text-decoration: none; }
sup.fnref a:hover { color: #cc0000; }

/* the seal: the sign as it is stamped, on paper the colour of paper. The page under it is white,
   so the image is given the same ridge the page frame has rather than being left to look like a
   rectangle somebody forgot to cut out. A link, and never decoration: it goes to the page that
   says in words what the mark is, because the mark itself cannot be typed into a search box. */
img.seal { border: 1px solid #c0c0c0; }
a img.seal { border-color: #808080; }