body {
  background: white;
  color: #000000;
  font-family: sans-serif;
}

nav {
  margin: 1em auto 1.2em auto;
  max-width: 38em;
}

td { vertical-align: top; }

table.census { border-collapse: collapse; }

table.census tr td {
  border: 1px dashed black;
  font-size: small;
  padding: 3px;
}

table.census tr th { padding: 5px; }

table.side-by-side {
  border-spacing: 1em;
  margin-left: auto;
  margin-right: auto;
}

table.side-by-side th {
  font-style: italic;
  font-weight: normal;
}

table.side-by-side td {
  border: 1px dashed black;
  font-family: "Courier", monospace;
  font-size: small;
  padding: 1em;
}

table.tags {
  border-collapse: collapse;
}

table.tags th, table.tags td {
  padding: .5em;
  vertical-align: top;
}

table.tags th {
  text-align: left;
  font-weight: normal;
}

hr {
  color: gray;
  height: 1px;
}

/* Syntax highlight stuff - I used this somewhere. */

  .num { color:#2928ff; }
  .esc { color:#ff00ff; }
  .str { color:#ff0000; }
  .dstr { color:#818100; }
  .slc { color:#a020f0; font-style:italic; }
  .com { color:#838183; font-style:italic; }
  .dir { color:#008200; }
  .sym { color:black; }
  .lin { color:#555555; }
  .kwa, .kwc { color:#000000; font-weight:bold; }
  .kwb { color:#008b8b; }

  .green { color: green; }
  .yellow { color: yellow; }

/* Footer */

  footer {
    border-top: 1px solid gray;
    margin-top: 1em;
    margin-right: auto;
    margin-left: auto;
    max-width: 38em;
    padding-left: 1em;
    padding-right: 1em;
  }

  footer p {
    color: gray;
    font-size: smaller;
    font-style: italic;
    text-align: center;
  }

  footer p img {
    vertical-align: middle;
  }

/* linkdump column on front page */

  /* container for the header image on the front page */
  #imagehere {
    text-align: center;
  }

  #linkdump {
    clear: none;
    font-size: smaller;
    overflow-x: hidden;
    padding: .5em;
    position: absolute;
    right: 10px;
    top: 2em;
    width: 25%;
    z-index: 0;
  }

  div.linkdump p { margin: 0 0 0.5em 0; }

  div.linkdump ul {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
  }

  div.linkdump blockquote {
    margin-left: .6em;
    margin-right: .6em;
  }

  div.linkdump p.centerpiece img,
  div.linkdump p.centerpiece {
    margin: 0;
    padding: 0;
  }

/* Entry column on front page */

  #entries {
    background: #fff;
    left: 10px;
    margin-top: .5em;
    position: absolute;
    top: .5em;
    width: 70%;
    z-index: 1;
  }

  div.entry {
    border: none;
    line-height: 1.5;
    margin-bottom: 1px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1px;
    max-width: 38em;
    padding-left: 1em;
    padding-right: 1em;
  }

  div.retcon {
    background-color: #6699CC;
    border-style: outset;
    border: 1px;
    margin-bottom: .5em;
    margin-top: .5em;
    max-width: 90%;
    padding: 1em;
  }

  /* Headers */

    h1, h2, h3, h4, h5, h6 {
      font-family: "Georgia", "DejaVu Serif", "Bistream Vera Serif", "Lucida Bright", serif;
    }

    /* For entry date headers and other things... */
    h1 {
      font-size: 1.5em;
      font-weight: normal;
      margin-top: 0em;
      margin-bottom: 0;
    }

    /* <h2> for icons, titles on entries ... */
    h2 {
      font-style: italic;
      font-size: 1.3em;
      font-weight: normal;
      padding-left: 0em;
    }

    h3, .linkdump h1 {
      clear: none;
      font-size: 1.25em;
      font-weight: normal;
      margin-bottom: .5em;
      margin-left: 0em;
      margin-top: .5em;
      text-align: left;
    }

    /* And so on. */
    h4 {
      font-size: 1.1em;
      font-style: italic;
      font-weight: normal;
      margin-top: 0;
      text-indent: 1em;
    }

/* Block level elements */

  pre {
    font-family: monospace;
    margin-left: .5em;
    margin-bottom: 2em;
    margin-top: 2em;
  }

  pre code {
    /* white-space: pre-wrap; */
    background-color: #EEEEF5;
    border-left: 3px solid #D1D1D4;
    display: block;
    font-size: 85%;
    overflow: auto;
    padding-left: .5em;
    padding-top: .5em;
    padding-bottom: .5em;
  }

  /* List items: */
    li { margin-bottom: .3em; }
    dl { margin-left: 2em; }

  /* Paragraph formatting. */
    p {
      margin-bottom: 1em;
      text-indent: 0em;
    }

    p.centerpiece {
      clear: both;
      text-align: center;
    }

    .massive {
      font-size: 6em;
    }

    .bigletters {
      font-size: 2em;
      font-weight: bold;
    }

    p.signature { text-align: right; }

    p.left {
      clear: none;
      float: left;
    }

    p.right {
      clear: none;
      float: right;
    }

    p.code {
      font-family: "Consolas", "Courier", monospace;
      font-size: smaller;
      margin-left: 3em;
      text-indent: -2em;
    }

    p code {
      border: 1px solid #EEEEF5;
      border-radius: 3px;
      padding: 1.5px;
      background-color: #EEEEF5;
    }

    .footnote { font-size: smaller; }

  /* previous / next navigation */

    .datenav {
      max-width: 38em;
      margin-left: auto;
      margin-right: auto;
    }

    .datenav p.datenav-prev {
      float: left;
    }

    .datenav p.datenav-next {
      float: right;
    }

    .datenav::after { 
      content: "";
      display: block; 
      clear: both;
    }

/* Within-paragraph markup: */

    sup {
      line-height: 0;
      vertical-align: text-top;
    }

    em strong, strong em {
       font-style: normal;
       font-variant: small-caps;
       font-weight: bolder;
    }

    /* Link formatting */

      a:link    { color: #3333FF; text-decoration: none;      }
      a:visited { color: #003399; text-decoration: none;      }
      a:active  { color: #FF0000; text-decoration: underline; }
      a:hover   { color: inherit; text-decoration: underline; }

      img, img a { border: none; }

/* Navigation links to dates and topics... */

  p.datelink, p.topiclinks {
     clear: both;
     font-size: smaller;
     text-align: right;
     margin-top: .5em;
     margin-bottom: 2em;
  }

  .datelink a:link   { color: gray; text-decoration: none; }
  .datelink a:hover,
  .datelink a:active { text-decoration: underline; }

  ul.datelink li img { padding: 5px; }

/* Quoting */

  blockquote {
    margin-bottom: 0.5em;
    margin-left: 3em;
    margin-right: 3em;
  }

  blockquote.chat p { text-indent: -.5em; }

  /* A page-like box for wrapping around things quoted from books and such. */
  div.pagebox {
    border: 1px solid black;
    font-size: smaller;
    margin-bottom: .5em;
    margin-left: 2em;
    margin-right: 2em;
    padding: 2em;
  }

  div.pagebox p.number {
    font-size: small;
    text-align: right;
  }

  /* booklike: Initial text indents, no spacing between paragraphs. */

  .booklike {
     padding-bottom: .2em;
     padding-top: .2em;
  }

  .booklike p {
     margin-bottom: 0em;
     margin-top: 0em;
     text-indent: 2.5em;
  }

  /* For poetry and stuff within booklike blockquotes. */
  .booklike p.stanza {
     margin-bottom: 1em;
     margin-top: 0em;
     text-indent: 0em;
  }

  blockquote.booklike {
     padding: .2em 1em .2em 1em;
  }

  blockquote.booklike p {
     margin-bottom: 0em;
     margin-top: 0em;
     text-indent: 2em;
  }

  blockquote.booklike p.stanza {
     margin-bottom: 1em;
     margin-top: 0em;
     text-indent: 0em;
  }

  blockquote.booklike p.cite,
  blockquote p.cite {
    text-align: left;
    text-indent: 3em;
  }

  address {
    font-style: italic;
    font-weight: bolder;
  }

/* Comics */

  .comics img {
    width: 100% !important;
    height: auto !important;
  }

/* Photo gallery stuff - technique from Chris Coyier at:
   https://css-tricks.com/seamless-responsive-photo-grid/ */

  .photos {
    /* Prevent vertical gaps */
    line-height: 0;

    -webkit-column-count: 3;
    -webkit-column-gap:   0px;
    -moz-column-count:    3;
    -moz-column-gap:      0px;
    column-count:         3;
    column-gap:           0px;
    margin-top:           1.5em;
    margin-bottom:        1.5em;
  }

  .photos img {
    /* Just in case there are inline attributes: */
    width: 100% !important;
    height: auto !important;
  }

  @media (max-width: 1000px) {
    .photos {
    -moz-column-count:    2;
    -webkit-column-count: 2;
    column-count:         2;
    }
  }
  @media (max-width: 400px) {
    .photos {
    -moz-column-count:    1;
    -webkit-column-count: 1;
    column-count:         1;
    }
  }

/* collapsible thingies with "show" buttons */

  .details .clicker-button {
    margin-left: 15px;
    vertical-align: middle;
  }

  button.clicker-button {
    background-color: white;
    border: 1.5px solid #ddc;
    border-radius: 3px;
  }

  button.clicker-button:active {
    background-color: #ddc;
    border-left: 1px solid black;
    border-top: 1px solid black;
  }

  .details .full {
    background-color: white;
    border-left: 2px solid #ddc;
    border-bottom: 2px solid #ddc;
    border-right: 2px solid #ddc;
    border-top: 2px solid #ddc;
    border-radius: 3px;
    padding: 1.5em;
  }