/* The Law of the Playground: it's 1999 and everything's fine. */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: #000;
  font: 14px/1.55 Verdana, Geneva, Tahoma, sans-serif;
}
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #f60; }
img { border: 0; }

#wrap { max-width: 800px; margin: 0 auto; padding: 0 12px 24px; }
#head { text-align: center; padding-top: 8px; }
#head img { width: 100%; height: auto; max-width: 800px; display: block; margin: 0 auto; }

/* The alphabet: a row of chunky grey Windows 98 buttons. */
#nav { margin: 6px 0 18px; }
.abc { display: grid; grid-template-columns: repeat(27, 1fr); gap: 3px; }
.abc a, .extras a {
  display: block;
  background: #c0c0c0;
  color: #000;
  text-align: center;
  text-decoration: none;
  font: bold 16px/1 "Courier New", Courier, monospace;
  padding: 6px 0 5px;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf;
}
.abc a:hover, .extras a:hover { background: #ff0; color: #000; }
.abc a:active, .extras a:active, .abc a.on, .extras a.on {
  border-color: #404040 #fff #fff #404040;
  box-shadow: inset 1px 1px #808080;
  background: #a8a8a8;
  padding: 7px 0 4px;
}
.abc a.on, .extras a.on { background: #000080; color: #fff; }
.extras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-top: 3px; }
.extras a { font-size: 14px; text-transform: lowercase; }

/* The Shit Filter */
.filter {
  margin-top: 8px;
  padding: 5px 8px;
  background: #333;
  color: #fff;
  font: 13px/1.6 "Courier New", Courier, monospace;
  text-align: center;
  border: 2px solid #666;
}
.filter a, .filter b { white-space: nowrap; margin: 0 4px; }
.filter a { color: #ff0; text-decoration: none; }
.filter a:hover { color: #f60; text-decoration: underline; }
.filter b { color: #000; background: #ff0; padding: 0 4px; }
.filter .ftitle { font-weight: bold; }
.filter .what { color: #aaa; font-size: 11px; }
.level3 .filter b { background: #fff9ac; }
.level2 .filter b { background: #ffb52c; }
.level1 .filter b { background: #ff5f62; }

/* Words */
h1, h2 {
  font-family: "Arial Black", "Arial Bold", Gadget, Impact, sans-serif;
  font-weight: 900;
  text-transform: lowercase;
  line-height: 1.15;
  margin: 0 0 6px;
}
h1 { font-size: 28px; margin-top: 4px; }
h2 { font-size: 22px; }
h2 a, h2 a:visited { color: #00e; text-decoration: none; }
h2 a:hover { color: #f60; text-decoration: underline; }
p { margin: 0 0 12px; }
hr { border: 0; border-top: 1px dotted #999; margin: 16px 0; }
.count, .jump { color: #555; font-size: 12px; }
.jump a { margin-right: 4px; }

.law { margin-bottom: 26px; }
.story { overflow-wrap: break-word; }
.story ul, .story ol { padding-left: 24px; }
.more { text-align: right; margin: 4px 0 0; }
.credits { font-size: 11px; color: #444; text-align: right; margin: 6px 0 0; }
.back { margin-top: 24px; font-size: 12px; }
.seealso { margin-top: 24px; padding: 8px 10px; background: #ffffcc; border: 1px dashed #cc0; font-size: 13px; }
a.lost { font-size: 12px; font-family: "Courier New", Courier, monospace; }

/* Unapproved things, marked like the old site did */
.st3 { background: #fff9ac; }
.st2 { background: #ffb52c; }
.st1 { background: #ff5f62; }
h1.st3, h1.st2, h1.st1, h2.st3, h2.st2, h2.st1 { padding: 2px 6px; }
div.story.st3, div.story.st2, div.story.st1 { background: none; border-left: 5px solid; padding-left: 10px; color: #444; }
div.story.st3 { border-color: #e6d800; }
div.story.st2 { border-color: orange; }
div.story.st1 { border-color: red; }
.stlabel { font: bold 11px "Courier New", monospace; text-transform: uppercase; color: #888; margin: 0 0 4px; }
.tag { font-size: 13px; font-family: Verdana, sans-serif; font-weight: normal; }

/* Admin chat */
.adminname {
  border: 1px solid #000;
  border-radius: 10px;
  background: #c5f3ff;
  padding: 10px;
  margin: 8px 0;
  font-size: 13px;
  min-height: 50px;
  overflow: hidden;
  max-width: 460px;
}
.adminname img { float: left; width: 50px; height: 50px; margin: 0 12px 4px 0; }
.adminname.big { max-width: none; }
.adminname.big img { width: 100px; height: 100px; }

/* Report cards */
.report { border-collapse: collapse; margin: 0 auto 24px; min-width: 60%; font-family: "Courier New", monospace; background: #fffff0; }
.report caption { font: 900 22px "Arial Black", Impact, sans-serif; text-transform: lowercase; padding-bottom: 6px; }
.report td { border: 1px solid #999; padding: 4px 10px; }
.report td + td { text-align: right; }
.report .sum td { font-weight: bold; background: #eee; }
h2.section { border-bottom: 2px solid #000; padding-bottom: 2px; margin-top: 24px; }
h2.section small { font-size: 12px; font-family: Verdana, sans-serif; font-weight: normal; }
.filthlist { columns: 2; padding-left: 20px; }

#foot {
  margin-top: 30px;
  padding-top: 14px;
  border-top: 2px solid #000;
  text-align: center;
  font-style: italic;
  font-weight: bold;
  font-size: 12px;
  text-transform: lowercase;
}
.badges span {
  display: inline-block;
  margin: 3px;
  padding: 1px 6px;
  font: normal 10px Verdana, sans-serif;
  border: 1px solid #000;
  background: #eee;
  font-style: normal;
}

/* Phones: the alphabet folds into three rows of nine big buttons. */
@media (max-width: 640px) {
  body { font-size: 16px; }
  #wrap { padding: 0 10px 20px; }
  .abc { grid-template-columns: repeat(9, 1fr); gap: 4px; }
  .abc a { font-size: 20px; padding: 10px 0 8px; }
  .abc a.on, .abc a:active { padding: 11px 0 7px; }
  .extras { gap: 4px; margin-top: 4px; }
  .extras a { font-size: 13px; padding: 10px 0 8px; }
  .filter { font-size: 13px; }
  .filter a, .filter b { display: inline-block; margin: 2px; }
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  .adminname { max-width: none; }
  .filthlist { columns: 1; }
  .report { min-width: 100%; }
}