/* Common styles */

main {
  max-width: 800px;
  margin: auto;
}

#copyright {
  text-align: center;
  margin-top: 10px;
}

/* Visual styles */

/* Underlined "link here" # symbols next to headings look quite odd, don't they? */
a.here { text-decoration: none; }


/* Make it clear that the expand/collapse triangle symbol is clickable */
summary { cursor: pointer; }

hr {
  height: 1px;
  background-color: #aaaaaa;
  border: 0 none;
  margin: 0;
}

a { color: #09F; }

pre, code, kbd { color: green; }

/* ToC hardly needs list bullets. */
ul.toc { list-style: none; }
ul.toc li { margin-top: 0.5em; }

/* Striped background is helpful on screen,
   undesirable in print,
   and has no effect for non-visual media. */
@media only screen {
  .subsection:nth-child(even) {
    background-color: #ededed;
    padding: 20px 14px;
    margin: 0 -14px;
  }
}

/* Typography */

body {
  font-family: Helvetica, sans-serif;
  color: #444;
  background-color: #ffffff;
}

/* For some reason on most system the default monospace font looks smaller.
   Even if not, commands is the most important information here,
   making it look more prominent won't harm. ;)
 */
pre, code, kbd { font-size: 110%; }

@supports (hyphens: auto) {
  main {
    text-align: justify;
    hyphens: auto;
  }
}

pre, code, sample {
  white-space: pre-wrap;
  hyphens: none;
}

/* Use a side pane ToC on screens that are wider than they are tall. */

@media (pointer: fine), (orientation: landscape) {
  #sidebar {
    width: 26em;
    overflow: scroll;

    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;

    padding-right: 1em;
  }

  #content-container {
    /* Margin wider than the sidebar is intentional,
       so that there's always some space between the sidebar and the content block.
     */
    margin-left: 27em;
  }
}
