/* LAYOUT */
body {
 --body-padding: 8px;
  background: white;
  padding-left: var(--body-padding);
  padding-right: var(--body-padding);
  line-height: 1.7;
}

/* HEADER */
header {
 margin-bottom: var(--body-top-padding);
}

header > hgroup {
 display: flex;
 align-items: center;
}

header > hgroup > * {
 margin: 0;
 font-weight: normal;
}

header > hgroup > h1 {
 font-size: var(--header-main-font-size);
}

header > hgroup > h1 > a {
 display: flex;
 align-items: center;
 text-decoration: none;
}

header > hgroup > h1 > a:link, header > hgroup > h1 > a:visited {
  color: inherit;
}

header > hgroup > p {
 font-size: var(--header-main-font-size);
 color: rgb(40, 40, 40);
 margin-left: 0.3em;
}

header > hgroup > p::before {
  content: ' – ';
}

/* NAVIGATION */
body > nav {
  /* Get the bottom border to stretch out to the edges, past the padding */
  margin: 0 calc(-1 * var(--body-padding));
  padding: 0 var(--body-padding) 20px;
  border-bottom: 1px solid var(--whatwggreen);
}

/* HEADINGS */
h2 { border-bottom: 1px solid #aaa; font: 1.2em sans-serif; margin: 1.2em 0 1.2em; }
h3 { font: bold 1.1em sans-serif; margin: 1.2em 0 1.2em; }
h4, h5, h6 { font: bold 1.0em sans-serif; margin: 1.2em 0 1.2em; }

/* GLOBAL ELEMENT STYLES */
ol, ul, dl, p, address { margin-top: 1.1em; margin-bottom: 1.1em; }
dl ul, dl ol, li { margin-top: 0.2em; margin-bottom: 0.2em; }
dt { margin-top: 1.2em; margin-bottom: 0.4em; font: 1.1em sans-serif; }
abbr, acronym { border: none; text-decoration: none; }
address { font-style: normal; }
form { margin: 0; padding: 0; }
input { font: inherit; }
dfn { font-weight: bold; font-style: normal; }

/* LISTS */
dl > dt { margin: 1em 0 0 0; }
dl > dd { margin: 0.25em 0 0.25em 2em; }
ol.dated { list-style: disc; }

dl.compact > div { margin: 1em 0; }
dl.compact > div > dt { display: inline; margin: 0; font: inherit; font-weight: bold; }
dl.compact > div > dt::after { content: ": "; }
dl.compact > div > dd { display: inline; margin: 0; }
dl.compact > div > dd:not(:last-of-type)::after { content: "; "; }

/* Derived from https://resources.whatwg.org/standard.css below */

.note { position: relative; color: green; background: #DDFFDD; font-style: italic; margin-left: 2em; padding-left: 2em; }
.note em, .note i, .note var { font-style: normal; }
span.note { padding: 0 2em; }
.note::before { content: 'Note'; background: green; color: white; padding: 0.15em 0.25em; font-style: normal; position: absolute; top: -0.2em; left: -1.5em; transform: rotate(-5deg); }
.example { display: block; color: #222222; background: #F7F7F7; margin-left: 2em; padding-left: 3em; position: relative; }
.example::before { font-style: normal; content: 'Example'; background: #222222; color: #F7F7F7; padding: 0.15em 0.25em; font: 1em Helvetica Neue, sans-serif, Droid Sans Fallback; position: absolute; top: 0.2em; left: -2.25em; transform: rotate(-5deg); }

/* SELF LINK STYLES; they assume only inside headings, on this site */
a.self-link {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
  opacity: 0.5;
}

a.self-link:hover {
  opacity: 1;
}

a.self-link::before {
  content: "§";
  display: inline-block;
  width: var(--width);
}

/* Not 600px like elsewhere; this must match the --body-width variable + ~ 2 * the self-link width */
@media (min-width: 960px) {
  h2, h3, h4, h5, h6, td {
    position: relative;
  }

  a.self-link {
    --width: 1em;
    font-size: 83%;
    position: absolute;
    top: 0;
    left: calc(-1 * var(--body-padding) - var(--width) - 6px);
    text-align: right;
  }
}

@media (max-width: 960px) {
  a.self-link {
    padding-left: 0.5em;
  }
}

/* TABLES (on /stages) */

table {
  border-collapse: collapse;
  background-color: white;
}
table thead tr {
  background: rgb(250, 250, 250);
}
table td {
  vertical-align: top;
}
table td, table th {
  border: 1px solid #aaa;
  padding: 0.25em;
}
table td > :first-child {
  margin-top: 0;
}
table td > :last-child {
  margin-bottom: 0;
}