/*
 * The Hobbit's pages, dressed as the game is: black ink on the Spectrum's
 * white paper -- white without BRIGHT, #D7D7D7, the colour of the game's own
 * screen -- and the wavy line the game draws between the story and the input
 * window as the divider under the header and every box.
 *
 * Loaded after SkoolKit's skoolkit.css (see StyleSheet in hobbit.ref), so it
 * only overrides colours and adds the divider. images/divider.png is drawn
 * from the game's own bytes at DIVIDER ($6DCC) by hobbit_pages.py on every
 * build: a 16x5 tile at twice the size, black on transparent.
 */

body {
  background-color: #d7d7d7;
  color: #000000;
}

/* The header, with the divider under it the width of the page: the table
   is drawn as a block, so its cells keep their own widths inside it. */
table.header {
  display: block;
  padding-bottom: 18px;
  background: url(images/divider.png) repeat-x left bottom;
}

/* Boxes and list entries: the paper, and the divider under each. */
div.box, div.list-entry {
  background: url(images/divider.png) repeat-x left bottom;
  padding-bottom: 22px;
  margin-bottom: 8px;
  border-radius: 0;
}
div.box-1, div.box-2, div.list-entry-1, div.list-entry-2 {
  background-color: #d7d7d7;
}

/* Tables: the paper, with a black rule between cells. */
table table.default th, table.default th,
table.map th {
  background-color: #d7d7d7;
  border-bottom: 2px solid #000000;
}
table table.default td, table.default td,
table.map td, td.comment-1,
table.asm-navigation td {
  background-color: #d7d7d7;
}
table.default, table.map {
  border-collapse: collapse;
}
table.default td, table.map td {
  border-bottom: 1px solid #a0a0a0;
}


/* The Locations page: the divider under each location. Its table is drawn
   as a block, as the header's is, so the line runs the width of the page. */
table.hobbit-entry {
  display: block;
  padding-bottom: 22px;
  margin-bottom: 8px;
  background: url(images/divider.png) repeat-x left bottom;
}

/* Layers over the map: a checkbox per layer, before the map, shows or hides a
   group of markers in its SVG. No script: the boxes are the map's earlier
   siblings, so a selector can reach it. */
svg g.hb-layer { display: none; }
#hb-layer-score:checked ~ div.hb-map g.hb-layer-score,
#hb-layer-dark:checked ~ div.hb-map g.hb-layer-dark,
#hb-layer-hook:checked ~ div.hb-map g.hb-layer-hook,
#hb-layer-road:checked ~ div.hb-map g.hb-layer-road,
#hb-layer-objects:checked ~ div.hb-map g.hb-layer-objects,
#hb-layer-characters:checked ~ div.hb-map g.hb-layer-characters { display: inline; }
input.hb-toggle { margin-left: 1em; }
input.hb-toggle:first-child { margin-left: 0; }
span.hb-key {
  display: inline-block; width: 0.8em; height: 0.8em; border-radius: 50%;
  border: 1px solid #fff; margin: 0 0.35em 0 0.2em; vertical-align: -0.05em;
}