html {padding: 1em 1em 4em 1em; background: #ddd; color: #000;
  /*background: linear-gradient(to right, hsla(0,0%,0%,0.07), hsla(0,0%,0%,0.0),
      hsla(0,0%,0%,0.07)),
    linear-gradient(hsla(0,0%,87%,0.0), hsla(0,0%,87%,1.0)),
    repeating-linear-gradient(to right, hsl(0,0%,84%), hsl(0,0%,88%) 0.3em,
      hsl(0,0%,84%) 0.6em);*/
  background: linear-gradient(to right, hsla(0,0%,0%,0.07), hsla(0,0%,0%,0.0),
      hsla(0,0%,0%,0.07)),
    linear-gradient(hsla(0,0%,87%,0.0), hsla(0,0%,87%,1.0)),
    url(../Background/FineWhite.jpg);
  box-sizing: border-box; min-height: 100%; /* Make gradient cover the viewport */
  font-family: sans-serif; line-height: 1.3}
html:lang(zh), html:lang(ja) {line-height: 1.5}
body {background: none; margin: auto; max-width: 50em}
h1 {font-size: 1.6em; line-height: 1.2}
h1, h3 {font-family: Charter, Bitstream Charter, DejaVu Serif,
  Bitstream Vera Serif, Verana, Noto serif, Chaparral Pro, "Serif",
  Roboto Slab, serif; font-weight: normal}
#meeting {clear: both; counter-reset: h3; margin: 3em 0}
dt {font-weight: bold; clear: left; float: left; width: 4.5em;
  margin-right: 1em; text-align: right}
dd {margin-left: 5.5em}
dd::after {content: "​\FEFF"}	/* Make sure there is at least one line */
details, summary {display: inline} /* Long list of participants */
summary::after {content: "…"; margin: 0 0.2em; border: thin solid;
  padding: 0 0.2em; border-radius: 0.3em;
  box-shadow: 0 0.1em 0.1em hsla(0,0%,0%,0.2)}
[open] > summary::after {content: none}
ul, ol {padding-left: 1em}
ol ol {font-size: smaller}
a {overflow-wrap: break-word}
.app {list-style: square}
.phone cite {font-weight: bold; font-style: normal}
.irc cite {font-style: normal}
p.summary {font-style: italic}
p, pre {margin: 0.65em 0 0 0}
code {white-space: pre}
p.summary + p.summary, p.summary + p.anchor + p.summary,
p.summary + p.bot + p.summary, p.irc + p.irc, p.irc + p.anchor + p.irc,
p.irc + p.bot + p.irc {margin-top: 0}
.irc {margin-left: 2em; margin-right: 2em; color: hsl(0,0%,35%)}
header, header + *, section, .action, .resolution, .issue, .issue-update,
h3::before {border-radius: 0.3rem}
.resolution, .action, .issue, .issue-update {padding: 0.3em calc(2em - 1px);
  border: 1px solid}
.resolution {background: #FD8; border-color: #E8BB4A}
.issue, .issue-update {background: #E5E5E5; border-color: #888}
.action {background: #E6EEF4; border-color: #005A9C}
.action strong, .resolution strong, .issue strong, .issue-update strong {
  text-transform: uppercase}
.bot {font-size: 80%; width: 55%; float: right; margin: -0.2em -2em 0.5em 1em;
  padding: 0.5em 1em; background: hsl(110,90%,80%);
  background: linear-gradient(-45deg,hsl(110,90%,85%),hsl(110,90%,75%));
  border-color: hsl(110,90%,25%)}
.bot cite {display: none}
.anchor {float: right; margin: 0 0 0 1em}
.anchor:hover::before {color: #000;
  position: absolute; content: attr(id); background: #FF9; padding: 0.1em 0.3em}
h2 {text-align: center}
#links {margin: 1em}
#links img {height: 1.4em}
section {padding: 1em; border: thin solid #999; background: white;
  margin: 2em 0}
section::after {content: " "; display: block; height: 0; clear: both}
section:empty {display: none}
h3 {font-size: 1.5em; margin: 0 0 1.3rem; text-align: center;
  padding: 0 1rem; line-height: 1.2; counter-increment: h3}
h3::before {content: counter(h3); display: block; width: 3em; font-size: medium;
  margin: -1.82em auto 0.5em -1em; background: #005A9C; color: white;
  padding: 0.2em}
address {margin-top: 1em; border-top: dotted; padding-top: 1em}
h4 {text-align: center; padding: 0 1rem}

header, header + * {display: table; margin: 0; table-layout: fixed; width: 100%}
header {text-align: center; border-bottom-right-radius: 0;
  border-bottom-left-radius: 0; border-spacing: 0 0.6em; color: white;
  background: #005A9C; background: linear-gradient(205deg, hsl(205,100%,41%),
    hsl(205,100%,31%) 3em, hsl(205,100%,31%))}
header + * {border-top-left-radius: 0; border-top-right-radius: 0;
  background: #E6EEF4}
header > p, h1, header h2, #links, #attendees, #toc {display: table-cell;
  margin: 0; padding: 0.4rem 0.5rem}
header > p, h1, header h2, #links {vertical-align: middle}
header > p {width: 80px; border-right: 1px solid}
header a:hover, header a:focus {border-bottom: solid orange}
header h2 {width: 6.9em; font-size: 1.1em; font-weight: normal;
  border-right: 1px solid; border-left: 1px solid}
header + * h2 {font-size: 1.1em}
#links {width: 3.5em}
header img {vertical-align: text-bottom}
#attendees, #toc {width: 50%; border: thin solid #005A9C; vertical-align: baseline}
#attendees {border-style: none none solid solid; border-bottom-left-radius: 0.3em}
#toc {border-style: none solid solid none; border-bottom-right-radius: 0.3em}
#attendees h2, #toc h2 {margin-top: 0}
#toc ol ol {list-style: lower-latin}
#ActionSummary, #ResolutionSummary, #IssueSummary {margin: 2em}
header, header + *, section, h3::before, .bot, .anchor:hover::before {
  box-shadow: 1px 6px 5px hsla(0,0%,0%,0.2)}

/* Links to video */
.play, .pause {float: left}
.pause {margin: 0 0.5rem 0 0.2rem}
.recording {float: right; margin-left: 0.5rem}
#recording {background: black; color: white; text-align: center}
#recording a {color: inherit}
.video iframe {width: 100%; margin: 0.65em auto; border-radius: 0.5em}
.video.stuck {position: fixed; bottom: 165px; right: 20px;
  width: 260px; height: 145px; transform: translateY(100%)}

/* Images embedded by the scribe or in IRC text. */
#meeting img {display: block; margin: 1.3em auto; max-width: 80%;
  max-height: 26em}

@media all and (max-width: 33em) {
  #attendees, #toc {width: auto; padding: 0.5em}
  #ActionSummary, #ResolutionSummary, #IssueSummary {margin: 3em 0}
  section {padding: 0.5em}
  h3::before {margin-top: -1.2em}
  header, header + * {display: block}
  header > p, h1, header h2, #links, #attendees, #toc {display: block;
    border: none; width: auto}
  #meeting {margin: 2em 0}
  #toc {border-top: thin solid #005A9C}
  .bot {margin-right: -1.5em}
}

@page {
  margin: 1cm 1cm 1.5cm 1cm;
  @bottom {content: "– " counter(page) " –"}
}

@media print {
  html {padding: 0; background: white}
  header, header + *, section, h3::before, .bot {box-shadow: none}
  section {border-style: solid none none; background: none;
    box-decoration-break: slice}
  h2, h3, h4 {page-break-inside: avoid; page-break-after: avoid}
  .bot {page-break-inside: avoid; page-break-before: avoid}
  .action, .resolution {page-break-inside: avoid}
  dt, dd {margin-top: 0; margin-bottom: 0}
}

i-slide {display: block; height: 23em; width: 40.889em; max-width: 100%;
  box-shadow: 0 0 1px 1px #999, 1px 6px 5px hsla(0,0%,0%,0.2);
  margin: 1.3em auto; border-radius: 0.5em}
