/* "TPAC 2019" style
 *
 * See the user manual https://www.w3.org/2019/09/TPAC-template/README.html
 *
 * Author: Bert Bos <bert@w3.org>
 * Created: 2019-02-07
 */

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: normal;
  src: url(fonts/Gill_Sans.eot) format("embedded-opentype"),
    url(fonts/Gill_Sans.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: bold;
  src: url(fonts/Gill_Sans_Bold.eot) format("embedded-opentype"),
    url(fonts/Gill_Sans_Bold.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: oblique;
  font-weight: bold;
  src: url(fonts/Gill_Sans_Bold_Italic.eot) format("embedded-opentype"),
    url(fonts/Gill_Sans_Bold_Italic.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: oblique;
  font-weight: normal;
  src: url(fonts/Gill_Sans_Italic.eot) format("embedded-opentype"),
    url(fonts/Gill_Sans_Italic.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: 300;
  src: url(fonts/Gill_Sans_Light.eot) format("embedded-opentype"),
    url(fonts/Gill_Sans_Light.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: oblique;
  font-weight: 300;
  src: url(fonts/Gill_Sans_Light_Italic.eot) format("embedded-opentype"),
    url(fonts/Gill_Sans_Light_Italic.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: 600;
  src: url(fonts/Gill_Sans_SemiBold.eot) format("embedded-opentype"),
    url(fonts/Gill_Sans_SemiBold.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: oblique;
  font-weight: 600;
  src: url(fonts/Gill_Sans_SemiBold_Italic.eot) format("embedded-opentype"),
    url(fonts/Gill_Sans_SemiBold_Italic.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: 900 /*1000*/;
  src: url(fonts/Gill_Sans_UltraBold.eot) format("embedded-opentype"),
    url(fonts/Gill_Sans_UltraBold.woff) format("woff")}

/* Defaults for some new HTML5 elements for older browsers */
header, nav, section, aside, main, footer, details {display: block}
summary {display: list-item}
header {font-weight: bold}

/* Fonts */
body {font: 300 1em/1.3 Gill Sans MT, Gill Sans, My Gill Sans,
  Open Sans, Liberation Sans, Helvetica Neue, Arial, Helvetica, sans-serif;
  font-size-adjust: 0.45; hyphens: auto;
  /* Help break long, unbreakable words (URLs, email addresses..) */
  word-break: break-word; overflow-wrap: break-word}
th {word-break: normal}
b, strong {font-weight: bold}	/* Bolder than the default 'bolder' */
table {font-size: 0.9em}
h1, h2 {font: bold 2em/1.1 Helvetica Neue /*0.516*/, Arial /*0.5185*/,
  Helvetica /*0.524*/, Cooper Std /*0.497*/, sans-serif;
  font-size-adjust: 0.516}
header h1 {font-weight: bold; font-size: 2em; line-height: 1.1; hyphens: manual}
@media (min-width: 40em) {
  body {font-size: 1.3em}
  h1, h2 {font-size: 2.8em}
  header h1 {font-size: 3em}
}
@media (min-width: 56em) {
  .main header h1 {font-size: 6em}
  h1, h2 {hyphens: manual}
}

/* Avoid overflowing images and videos */
img {max-width: 100%; max-height: 100%}
iframe {max-width: 100%}

/* Figures by default not indented, but centered. */
figure {margin-left: 0; margin-right: 0; text-align: center}

/* Avoid increasing line height due to superscripts. */
sup, sub {line-height: 0.3}

/* Alternating colored bands, with content centered in the viewport. */
html {overflow-x: hidden}
body {margin: 0; /*scroll-snap-type: y;*/ padding: 0;
  background: #EEE; color: #222}
header::after, section::after, footer::after {content: " "; display: block;
  height: 0; clear: both}
header, section, footer {position: relative; scroll-snap-align: start;
  border: solid transparent; border-width: 3.6rem 0.5rem}
section, footer {border-width: 3.6rem 0.5rem}
header {border-width: 1rem 0.5rem}
section {max-width: 40em; margin: auto} /* For browsers that don't do calc() */
.wide {max-width: none}
#sponsors {background: white}
footer {background: #EEE}
section:nth-of-type(2n+1) {background: hsl(0,0%,98%)}
section:nth-of-type(2n+2) {background: hsl(205,56%,93%)}
@media (min-width: 40em) {
  section, footer {border-width: 7.2rem 2rem}
  header {border-width: 1rem 2rem}
}
@media (min-width: 56em) {
  section:not(.wide) {border-width: 7.2rem calc((100vw - 52rem)/2)}
}

/* An element with class=left or class=right is shown to the side of
   the main content of a section. It is expected to contain one or
   more figure elements, each containing an image, which will be
   displayed one below the other. They are only shown if the margin is
   wide enough. The images are cropped to a circle. And thus these
   classes should only be used for decorative images, not for
   important ones. */
.left, .right, .wide .left, .wide .right {display: none}
@media (min-width: 74em) {
  @supports (object-fit: cover) {
    .left, .right {width: calc((100vw - 52rem)/2 - 6rem); max-width: 18rem;
      margin: 0; position: absolute; display: block;
      top: 50%; transform: translate(0, -50%)}
    .left {right: 52rem; margin-right: 4rem}
    .right {left: 52rem; margin-left: 4rem}
    .left figure, .right figure {position: relative;
      margin-top: 0; margin-bottom: 1em; padding: 100% 0 0}
    .left img, .right img {margin: 0; /*mix-blend-mode: luminosity;
      filter: invert(1) brightness(0.8) invert(1);*/
      position: absolute; top: 0; left: 0;
      width: 100%; height: 100%; object-fit: cover; border-radius: 50%}
  }
}

/* Each section has a link to the next section, or to the top of the
   page. The link is inside an element (usually <p>) with
   class=skip. Inside the banner (<header>), the link is nearly
   transparent unless it has the focus, because that looks better. It
   remains visible for a second after it lost the focus again.
   The maximum width of a normal section is 52rem/20em minus a bit for
   the scrollbar, hence we set the maximum width of the .skip to a
   little less than 20em. */
.skip {position: absolute; top: -3.6rem; right: 0; color: orange; width: 100%;
  z-index: 1;
  max-width: 19.7em; text-align: right; font-size: 2em; margin: 0; height: 0}
@media (min-width: 40em) {.skip {top: -7.2rem}}
header .skip {top: -1.2rem; z-index: 2}
.skip a span {display: none} /* Suppress text meant for Lynx */
.skip a {text-decoration: none}
header .skip a {opacity: 0.1; transition: 1s 1s}
header .skip a:hover, header .skip a:focus {opacity: 1; transition: 0.2s;
  background: black}
@supports (transform: translate(50%, 0)) {
  .skip {right: 50%; transform: translate(50%, 0)}
}
.skip {display: none}		/* No skip link on small screens */
@media screen and (min-width: 29em) {.skip {display: block}}

/* Elements with .small float right or left in even and odd numbered
   sections, respectively. If the viewport is wide enough, text
   doesn't wrap around them, but stays indented. If the element with
   .small is a figure with an image, the images are cropped to a
   circle. */
section > .small, details > .small {font-style: italic}
@media (min-width: 29em), print {
  section > .small, details > .small {font-style: inherit; width: 45%}
  @supports (object-fit: cover) {
    section > figure.small, details > figure.small {
      position: relative; padding: 45% 0 0} /* aspect ratio*/
    section > figure.small img, details > figure.small img {
      position: absolute; top: 0; left: 0;
      width: 100%; height: 100%; object-fit: cover}
  }
  section:nth-of-type(odd) > .small,
  section:nth-of-type(odd) > details > .small {float: left;
    clear: left; margin: 0 2rem 1rem 0}
  section:nth-of-type(even) > .small,
  section:nth-of-type(even) > details > .small {float: right;
    clear: right; margin: 0 0 1rem 2rem}
}
@media screen and (min-width: 40em) {
  section > .small, details > .small {width: 14rem}
  @supports (object-fit: cover) {
    section > figure.small, details > figure.small {
      padding-top: 14rem}
  }
  section:nth-of-type(odd) > .small ~ :not(.small):not(.left):not(.right),
  section:nth-of-type(odd) > details > .small ~ :not(.small):not(.left):not(.right) {
    margin-left: 16rem}
  section:nth-of-type(even) > .small ~ :not(.small):not(.left):not(.right),
  section:nth-of-type(even) > details > .small ~ :not(.small):not(.left):not(.right) {
    margin-right: 16rem}
}
section > figure.small img, details > figure.small img {
  border-radius: 50%}

/* No margins for normal elements at the top or bottom of a section. */
@media screen {
  section > :not(details):not(.left):not(.right):not(.skip):not(.small),
  details > *:not(.left):not(.right):not(.skip):not(.small) {
    margin-top: 0;
    margin-bottom: 0}
  section > *:not(aside):not(.left):not(.right):not(.skip):not(.small) ~
    *:not(aside):not(.left):not(.right):not(.skip):not(.small),
  details > *:not(aside):not(.left):not(.right):not(.skip):not(.small) ~
    *:not(aside):not(.left):not(.right):not(.skip):not(.small) {
    margin-top: 1.2rem}
}

/* Section headings. */
summary, h1, h2 {text-align: center}
h1, h2 {padding: 0 0.7em}
summary {padding: 0 2em}
h1 span {display: block; font-size: 0.8em; margin-top: 0.1em; line-height: 1.2}
h1 span + span {display: block; font-size: 0.5em; margin-top: 0.4em;
  line-height: 1.5}
summary > h1, summary > h2 {display: inline; padding: 0}
summary {display: block}			/* Firefox */
summary::-webkit-details-marker {display: none} /* Safari, Chrome... */
summary::before {content: "⊖"; float: left; font-size: 2em; width: 0.9em;
  margin-left: -1.1em; text-align: left; color: grey; line-height: 0.9}
[open] > summary::before {content: "⊕"}
@media (min-width: 29em) {
  summary::before {content: "▶" /*"▶\FE0E"*/; float: none; display: inline-block}
  [open] > summary::before {content: "▼" /*"▼\FE0E"*/}
}

/* Suppress the labels of nav menus on visual browsers. */
nav h2 {position: absolute; left: -9999px}

/* Lists. */
ul, ol {padding-left: 0; margin-left: 0}
li {margin-left: 1em; padding-left: 0.5em}
li::marker {width: 1em; padding: 0; text-align: left} /* Only in Prince */
dt {font-weight: bold}

/* Local navigation. */
section nav a {font-style: italic; color: #005A9C}
section nav.small a {display: block}
section nav a::after {content: " › "}

/* Sponsor logos. Override the 'height: 1em' of individual images to
   make them look the same size. Tall images (w < h) typically need a
   height > 1em, wide images (w > h) a height < 1em, adjusted
   optically. */
#sponsors {text-align: center}
#sponsors h3 {font-style: italic}
.sponsors {font-size: 2.25em; text-align: center}
.sponsors img {margin: 0.7em 0.7em 0.35em; height: 1em; vertical-align: middle}
.sponsors > :last-child img {margin-bottom: 0.7em; vertical-align: -1.35em}
.sponsors big {font-size: 125%}	/* Each <big> increases the size */
.sponsors a {text-decoration: none}
@media screen and (max-width: 37em) {
  /* A single column of logos and no side margins. */
  .sponsors * {display: block; margin-left: auto; margin-right: auto}
  .sponsors img {margin: 0.6em auto; padding: 0.8rem 0}
}

/* Testing: * /
#sponsors h3 {display: none}
.sponsors {display: inline; padding: 0}
.sponsors img {padding: 0}
.sponsors big {font-size: 100%}
/**/

/* Footer */
footer {text-align: center; min-height: calc(100vh - 7.2rem)}
@media (min-width: 40em) {
  footer {text-align: center; min-height: calc(100vh - 14.4rem)}
}
footer nav {columns: 15em; column-gap: 2em; text-align: left; margin: 2.4rem 0;
  font-size: 75%; color: #555;
  border-top: thin solid; border-bottom: thin solid; padding: 1.3em 0}
footer div {page-break-inside: avoid; break-inside: avoid; margin-bottom: 1.9em}
footer ul {padding-left: 1em; margin: 0}
footer li {display: block; text-indent: -1em; padding: 0}
footer h3 {font-weight: 600; font-size: 1em}
footer h3, footer li {margin: 0 0 0.6em}
address {font-size: 75%}

/* Links */
a {color: inherit; text-decoration: underline; transition: 0.2s}
a:hover, :visited {text-decoration: underline; text-decoration-style: dotted}
header h1 a:hover, header h1 :visited:hover {text-decoration: none}
:visited:hover {text-decoration: underline}
header a, header :visited, nav a, nav :visited {text-decoration: none}
abbr[title] {text-decoration: none; font-variant: normal;
  letter-spacing: normal}
[href=""] {text-decoration: underline; text-decoration-style: double}
:focus {box-shadow: 0 0 0 5px hsl(0,0%,98%), 0 0 0 8px hsl(120,100%,30%);
  border-radius: 1px; outline: none}
section:nth-of-type(2n+2) :focus {box-shadow: 0 0 0 5px hsl(205,56%,93%), 0 0 0 8px hsl(120,100%,30%);
  border-radius: 1px; outline: none}
footer :focus {box-shadow: 0 0 0 5px #EEE, 0 0 0 8px hsl(120,100%,30%);
  border-radius: 1px; outline: none}

/* Banner (<header>) on main page (big) and on other pages (small) */
header {max-width: none;
  text-align: center; font-weight: inherit; color: #F2F2F2; background: #191919;
  background: border-box repeating-linear-gradient(-30deg,#111,#222,#111 2em)}
header nav {text-align: center; line-height: 1.5; color: #CCC}
header nav, header h1 {margin: 1rem 0}
.main header h1 {margin-top: 3rem; margin-bottom: 3rem}
header nav p {margin: 0}
header nav a::after {content: " •"}
header nav a:last-child::after {content: none}
header nav img, header nav svg {vertical-align: -0.25em; height: 1.2em;
  width: auto; line-height: 1}	/* W3C logo */
header [href="/"] svg {fill: #CCC} /* a[href="/"] contains the W3C logo. */
header nav a:hover {color: white}
header [href="/"]:hover svg {fill: white}
@media (min-width: 29em) {
  /* If there is room, don't wrap inside each menu item. */
  header nav {word-spacing: 1em}
  header nav a {word-spacing: 0; white-space: nowrap; margin: 0 0.5em}
  header nav a::after {content: none}
  /* Make the W3C logo bigger and put it in the top left corner. */
  header h1, header nav {margin-left: 6rem; margin-right: 6rem}
  header [href="/"] {position: absolute; top: 1rem; left: 0; line-height: 1;
    width: 6rem; height: 6rem; border-radius: 50%; background: white;
    margin: 0; background: linear-gradient(#fff,#eee); color: black}
  header [href="/"] svg, header [href="/"] img {position: absolute;
    top: 31%; left: 11%;
    width: 80%; height: auto; fill: #222}
  /* Put the logo on a white circle and give it its proper colors. */
  header [href="/"] path:first-of-type {fill: hsl(205,100%,31%)}
  header [href="/"]:hover svg {fill: #000}
  header [href="/"]:hover path:first-of-type {fill: hsl(205,100%,50%)}
}
@supports (display: flex) {
  /* Put the nav menu above the title (H1). */
  header {display: flex; flex-direction: column}
  header nav {order: -1}
}

/* Schedule tables. Use class=narrow for narrow tables. */
table {width: 100%; border-collapse: collapse}
table.narrow {width: auto}
th {text-align: left; color: #005A9C}
th, td {padding: 0.4rem 0 0.4rem 1.3rem; vertical-align: baseline}
thead th {vertical-align: bottom}
th:first-child, td:first-child {padding-left: 0}
th:first-child {white-space: nowrap}
tbody th, tbody td, tfoot th, tfoot td {border-width: 0.2em;
  border-style: solid none none none; border-color: orange}
td > p, td > ul, td > ol {margin: 0.6em 0}
td > p:first-child {margin-top: 0}
td > p:last-child {margin-bottom: 0}
@media screen and (max-width: 37em) {
  tr th[abbr], tr td[abbr] {line-height: 0; font-size: 0; content: none}
  th[abbr]::before, td[abbr]::before {content: attr(abbr) " "; line-height: 1.3;
    font-size: 1rem}
  th:first-child {white-space: normal}
}
table:not(.narrow) td:nth-child(2) {width: 100%}

/* Add a big curly brace on the left of cells that span multiple rows */
td[rowspan] {vertical-align: middle;
  padding-left: 33px;
  background: /* top: */
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAKCAAAAAB3F+p+AAAAVElEQVQIW2P4jw4Yjj5BF/E2il/+BkXkcq25keWMr0gi//+/TDYyctmKLPL/d6ORkdFUZJH/P0OAQhuRRf4fBoq4/kQW+QwUMbqKLPLfGShyEMIEAOuejsTNUKQDAAAAAElFTkSuQmCC)
    0% 0% no-repeat, /* bottom: */
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAKCAMAAABlokWQAAAAXVBMVEXBw8S3ubq2ubnS1NQ1Oz3CxMT29/dbYGLq6+vi4+NLUFJHTE4/REZ7foB4fH2Ul5i8vr/Y2doyODouNDbw8PHo6OlGS01CR0n////7+/v5+fn19fVZXl+hpKWXmpuTqzftAAAATElEQVQIHQXBhQHCAAADsOLO2IoE/f9MkgDHtgECrm07AgGXtvcnEFjv284Bwevc9gcQbpv2MQOQxWnqcngDkEM/3y0AZLUDAAQAwB8FZA57F5d4wQAAAABJRU5ErkJggg==)
    0% 100% no-repeat, /* middle: */
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAOCAMAAAD+MweGAAAAgVBMVEWusbHX2NkzOTvy8/O2uLhXXF7m5+fS09M/REZvc3X+/v709PReY2RSV1iGioukp6iWmZq4uru0trfY2drJy8s0OjzFx8f3+PguNDbl5uZOU1VNU1RJT1BESUs+Q0X////9/f1obG4yNzn5+flgZGaNkZKJjY5xdXaXmpuPkpONkJECQ6IxAAAAbElEQVQI11XORxLCQAwEQHIwGROaKLKB/z+Qg4FanzTVhxnVIiIiRqiV8XsK3CsyQTtLZX3APJVYLenlqcTiSOPRbWZ/icEU1P+SzXbYFp2fnMYY1pOeF27XpHlzQZ6uv9Gv/HzGsyJ7tMr4AYj2Gbqwp9RcAAAAAElFTkSuQmCC)
    0% 50% no-repeat, /* vertical: */
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAABAgMAAABF1a3yAAAADFBMVEX///9EREQyMjLBwcEA/1gPAAAADklEQVQImWNgYFvDwAAAAiIAs/rtAKUAAAAASUVORK5CYII=)
    0% 0% / 17px 100% no-repeat white}
td[rowspan] + td[rowspan] {background: none; padding-left: 0.4em}

/* At-a-glance table */
#at-a-glance, #at-a-glance table {table-layout: fixed; page-break-inside: avoid}
#at-a-glance td, #at-a-glance th {padding: 0.4rem 0.6rem}
#at-a-glance th {color: inherit; border-color: hsl(205,68%,32%);
  white-space: normal}
#at-a-glance td {background: hsl(205,68%,32%); color: white;
  border-color: white; width: auto; /*font-weight: 400*/}
section:nth-of-type(2n+1) #at-a-glance td {border-color: hsl(205,56%,93%)}
#at-a-glance td, #at-a-glance th {vertical-align: middle}
#at-a-glance tbody {border-top: hidden}
table#at-a-glance p, #at-a-glance table p {margin: 0}
@media (min-width: 80em) {
  #at-a-glance th {font-size: 160%; line-height: 1.1}
  #at-a-glance td {height: 5.2em; hyphens: manual}
}
@media (max-width: 37em) {
  /* If the #at-a-glance is a div, it has been flattened by a script. */
  div#at-a-glance th:first-child {width: 6.8em}
  div#at-a-glance th[abbr], div#at-a-glance td[abbr] {line-height: inherit;
    font-size: inherit}
  div#at-a-glance th[abbr]::before, div#at-a-glance td[abbr]::before {
    content: none}
}


/* Different style for the at-a-glance tables.
   Display each at-a-glance block as a four-line time line. */
.at-a-glance {text-align: center}
.at-a-glance > * {display: inline-block; width: 30em; max-width: 100%}
.at-a-glance > * > * + * {margin: 1px 0; position: relative; height: 1.3em;
  background: hsla(204,75%,10%,0.6); color: white}
.at-a-glance > * > * + * > * {display: block; position: absolute;
  line-height: 1.3; margin: 0; white-space: nowrap;
  background-clip: padding-box; padding: 0 1px; box-sizing: border-box;
  border-left: 1px solid transparent}
.at-a-glance time {float: left; width: 0; overflow: hidden}

/* Position is (start hour - 8), width is (end hour - start hour) */
.at-a-glance [title^="08:00 – 09:00"] {left:  0.000%; width:  7.143%}
.at-a-glance [title^="08:00 – 18:00"] {left:  0.000%; width: 71.429%}
.at-a-glance [title^="08:30 – 18:00"] {left:  3.517%; width: 67.857%}
.at-a-glance [title^="09:00 – 10:00"] {left:  7.143%; width:  7.143%}
.at-a-glance [title^="10:00 – 11:00"] {left: 14.286%; width:  7.143%}
.at-a-glance [title^="11:00 – 12:00"] {left: 21.429%; width:  7.143%}
.at-a-glance [title^="12:00 – 13:00"] {left: 28.571%; width:  7.143%}
.at-a-glance [title^="12:00 – 14:00"] {left: 28.571%; width: 14.286%}
.at-a-glance [title^="13:00 – 14:00"] {left: 35.714%; width:  7.143%}
.at-a-glance [title^="14:00 – 15:00"] {left: 42.857%; width:  7.143%}
.at-a-glance [title^="15:00 – 16:00"] {left: 50.000%; width:  7.143%}
.at-a-glance [title^="15:00 – 18:00"] {left: 50.000%; width: 21.429%}
.at-a-glance [title^="16:00 – 17:00"] {left: 57.143%; width:  7.143%}
.at-a-glance [title^="17:00 – 18:00"] {left: 64.286%; width:  7.143%}
.at-a-glance [title^="18:00 – 19:00"] {left: 71.429%; width:  7.143%}
.at-a-glance [title^="18:00 – 20:30"] {left: 71.429%; width: 17.857%}
.at-a-glance [title^="18:30 – 21:00"] {left: 75.000%; width: 17.857%}
.at-a-glance [title^="19:00 – 20:00"] {left: 78.571%; width:  7.143%}
.at-a-glance [title^="19:00 – 21:30"] {left: 78.571%; width: 17.857%}
.at-a-glance [title^="20:00 – 21:00"] {left: 85.714%; width:  7.143%}
.at-a-glance [title^="21:00 – 22:00"] {left: 92.857%; width:  7.143%}

.at-a-glance > * > :nth-child(2) > * {background-color: hsl(205,68%,32%)}
.at-a-glance > * > :nth-child(3) > * {background-color: hsl(180,70%,20%)}
.at-a-glance > * > :nth-child(4) > * {background-color: hsl(120,70%,20%)}
.at-a-glance > * > :nth-child(5) > * {background-color: hsl(60,70%,20%)}

/* The last line has a series of empty P elements, one for each hour. */
.at-a-glance > * > :last-child > * {background-color: transparent;
  font-size: 80%; line-height: 1.625}
.at-a-glance > * > :last-child > * + * {border-color:hsl(205,56%,93%)}
.at-a-glance > * > :last-child [title="08:00 – 09:00"]::before {content: "8"}
.at-a-glance > * > :last-child [title="09:00 – 10:00"]::before {content: "9"}
.at-a-glance > * > :last-child [title="10:00 – 11:00"]::before {content: "10"}
.at-a-glance > * > :last-child [title="11:00 – 12:00"]::before {content: "11"}
.at-a-glance > * > :last-child [title="12:00 – 13:00"]::before {content: "12"}
.at-a-glance > * > :last-child [title="13:00 – 14:00"]::before {content: "13"}
.at-a-glance > * > :last-child [title="14:00 – 15:00"]::before {content: "14"}
.at-a-glance > * > :last-child [title="15:00 – 16:00"]::before {content: "15"}
.at-a-glance > * > :last-child [title="16:00 – 17:00"]::before {content: "16"}
.at-a-glance > * > :last-child [title="17:00 – 18:00"]::before {content: "17"}
.at-a-glance > * > :last-child [title="18:00 – 19:00"]::before {content: "18"}
.at-a-glance > * > :last-child [title="19:00 – 20:00"]::before {content: "19"}
.at-a-glance > * > :last-child [title="20:00 – 21:00"]::before {content: "20"}
.at-a-glance > * > :last-child [title="21:00 – 22:00"]::before {content: "21"}

@media (min-width: 80em) {
  .at-a-glance {font-size: 140%; /*line-height: 1.1*/}
}

/* Room assignments. (Override this each year based on how long the
   room names are.) */
.rooms {table-layout: fixed}
.rooms tr > :nth-child(1) {width: 58%}
.rooms tr > :nth-child(2) {width: 25%}
.rooms tr > :nth-child(3) {width: 17%; text-align: right}
@media screen and (max-width: 37em) {
 .rooms thead {font-size: smaller}
  /* Omit Estimated Attendance on narrow screens */
  .rooms tr > :nth-child(3) {display: none}
}

/* Use class=columns to create a grid with two columns: the children
   are alternating in the left and right columns:

      1  2
      3  4
      5  ...

   and are horizontally and vertically centered (if grid is
   supported).
*/
.columns > * {box-sizing: border-box; width: 45%; width: calc(50% - 2rem);
  float: right; margin: 1rem}
.columns > *:nth-child(odd) {clear: both; float: left}
.columns {overflow: hidden}
@supports (display: grid) {
  .columns {overflow: visible; display: grid; grid: "a  b" / 1fr 1fr;
    grid-gap: 2rem; gap: 2rem; align-items: center; justify-items: center}
  .columns > * {width: auto; margin: 0}
  .columns img {max-height: none} /* 100% would compute to 0 in Blink */
}

/* Floorplans in a section with id=map */
#map {text-align: center}
#map figcaption {font-weight: bold; font-size: 2em; color: #005A9C}
#map figure {display: inline-block}

/* Inline icons, such as for the Twitter logo */
.icon {height: 1em; width: auto; vertical-align: text-bottom; line-height: 0.6}

/* Elements that are only useful for print. */
@media screen {
  .print {display: none}
}

/* Print style. */

@page {
  margin: 0.9cm 1cm 1.5cm;
  font: 400 10pt/1.3 Gill Sans MT, Gill Sans, My Gill Sans,
    Open Sans, Liberation Sans, Helvetica Neue, Arial, Helvetica, sans-serif;
  font-size-adjust: 0.45;
}
@page :right {
  @bottom-right {content: counter(page)}
}
@page :left {
  @bottom-left {content: counter(page)}
}

@media print {

  /* Elements not useful in print */
  .noprint, nav, .skip {display: none}

  /* Fonts */
  html {font-size: 7.7pt}
  body {line-height: 1.2; font-size: 1.3em}
  h1, h2 {font-size: 2em}
  summary {font-size: 1em}
  header h1 {font-size: 2em}
  .main header h1 {font-size: 3em}
  h3 {font-size: 1em}
  thead {font-size: 0.9em}
  a {text-decoration: none}
  table b, table strong {font-weight: 500}
  #map figcaption {font-size: 1em}

  /* Colors */
  body, section:nth-of-type(n), #sponsor {background: none; color: #000}

  /* Layout */
  body {padding: 0}
  section, footer {border: none; margin: 1.2rem auto}
  section > *, details > * {margin-top: 0; margin-bottom: 0.65rem}
  h2, summary h2 {display: block; font-size: 1.5em; /*padding: 0.3em;
    background: #000; color: #FFF*/}
  summary {list-style: none; break-after: avoid; padding: 0}
  p, ul, ol, table {margin: 0.6rem 0}
  label::before, label::after {content: none}
  summary::before, [open] > summary::before {content: none}

  /* Smaller images and sidebars */
  section > .small, details > .small {width: 35%}

  /* Header */
  header {color: #000; background: 0.5rem 0 / 5rem 5rem
    url(w3c_on_white_gray_circle.svg) no-repeat #DAE7F0}
  header h1 {padding: 0 5.5rem; margin: 0}

  /* Footer */
  footer {max-width: none; border-top: 0.5pt solid black; background: none}

  /* Sponsor logos */
  #sponsors {font-size: 90%; columns: 2; column-gap: 2em;
    column-rule: solid 0.1pt}
  #sponsors h2 {display: none}
  #sponsors h3 {text-align: left; font: inherit; font-size: 80%}
  .sponsors {font-size: 1.4em; page-break-inside: avoid}
  .sponsors big {font-size: 120%}

  /* Less space inside a table */
  td > p, td > ul, td > ol {margin: 0}
  tbody th, tbody td {border-width: 0.05em}
  th, td {padding: 0.1rem 0.3rem 0.1rem 1.3rem}
  th:first-child, td:first-child {padding-left: 0.3rem}
}