/* Background image for the banner. */
header {background-image: none; padding-bottom: 0}
.main header {background-image: url(conference-call-3)}
@media (min-width: 27em) {
  .main header {padding-bottom: 13.33vw; background-size: auto 13.33vw}
}

/* Smaller font for the 2nd line of the header. */
h1 span {font-size: 40%}

/* Slightly larger circle for the 3rd line of the header. */
h1 span + span {width: 4.8em; height: 4.7em; padding: 0.6em;
  word-break: normal; text-transform: none; font-weight: 500}

/* Red/blue of header like on Overview.html, instead of reversed. */
header {color: #103852}
h1 span {color: #c9242b}

/* Red emphasis in the schedule section.
.schedule em {font-style: normal; font-weight: 400; color: #ad2030}
*/

/* Some colors for the sponsors section. */
#sponsors, .sponsors {text-align: inherit}
.sponsors {font-size: 100%; border-left: 2em solid; padding-left: 1em /*4em*/}

.platinum.sponsors {border-color: #ddd}
.gold.sponsors {border-color: gold}
.silver.sponsors {border-color: silver}
.bronze.sponsors {border-color: #cd7f32}
.network.sponsors {border-color: #b7ea7d}
.coffee.sponsors {border-color: #c19c51}
.gift.sponsors {border-color: #deb0df}
.media.sponsors {border-color: #deb0df}

.platinum.sponsors img {font-size: 325% /*439%*/}
.gold.sponsors img {font-size: 325% /*352%*/}
.silver.sponsors img {font-size: 281%}
.bronze.sponsors img {font-size: 225%}
.network.sponsors img {font-size: 325% /*439%*/}
.coffee.sponsors img {font-size: 325% /*352%*/}
.gift.sponsors img {font-size: 281%}
.media.sponsors img {font-size: 325%}

@media screen and (max-width: 37em) {
  /* Undo tpac2.css. */
  .sponsors * {display: inline}
  .sponsors img {margin: 0.7em 0.7em 0.35em; padding: 0}
}

/* The tables show no rooms and number of participants. Instead there
   are meeting times, agenda, dial-in information and IRC
   channels. */
.rooms tr > :nth-child(3) a {text-decoration: none} /* Agenda (link) */
.rooms tr > :nth-child(1) {white-space: normal}
.rooms tr > :nth-child(3) {text-align: left}
.rooms tr > :nth-child(1) {width: 50% /*35%*/}	/* Group name */
.rooms tr > :nth-child(2) {width: 50% /*65%*/}	/* Date and times in UTC */
.rooms tr > :nth-child(3) {width: 3.6em}	/* Agenda (link) */
.rooms tr > :nth-child(4) {width: 2.0em}	/* Dial-in info (link) */
.rooms .wide-media {display: none}
/* Instead of omitting columns on narrow screens, transform the
   table to a vertical list. */
@media screen and (max-width: 37em) {
  .rooms tr > :nth-child(3) {display: block}
}
@media (max-width: 46em) {
  .rooms {font-size: 1em}
  section table.rooms {background: none}
  .rooms thead {display: none}
  .rooms, .rooms tbody, .rooms tr, .rooms td {display: block}
  .rooms tr {margin-top: 1.2rem}
  .rooms td {border: none; background: #eee; padding: 0.3em;
    margin: 0.3em 0 0 5.8em; height: auto}
  table.rooms tr > :nth-child(n) {width: auto}
  .rooms td::before {display: inline-block; width: 5.8em; margin-left: -5.8em}
  .rooms td:nth-child(1) {font-weight: bold; margin-left: 0}
  .rooms td:nth-child(2)::before {content: "Time UTC: "}
  .rooms td:nth-child(3)::before {content: "Details: "}
  .rooms td:nth-child(4)::before {content: "Join: "}
  .rooms td:nth-child(5)::before {content: "Ical file: "}
  section:nth-of-type(2n+2) .rooms td {background: hsl(204,69%,16%)}
}

/* Highlight a row when it is the target after following a hyperlink. */
@media not all and (max-width: 46em) {
tr:target td:first-child::before, tr:target th:first-child::before {
  content: "→"; position: absolute; margin-left: -2em; font-weight: bold}
}

/* A small note under .buttons or .badges. Use with 'grid-area' e.g.,
   like this to add an annotation under the first two links:

   <p class=badges>
    <a href="..."><img src="..." alt="">Link 1</a>
    <a href="..."><img src="..." alt="">Link 2</a>
    <a href="..."><img src="..." alt="">Link 3</a>
    <span class=annotation style="grid-area: 2 / 1 / 3 / 3">annotation</span>
   </p>

   ::::::::::  ::::::::::  ::::::::::
   ::::::::::  ::::::::::  ::::::::::
   ::::::::::  ::::::::::  ::::::::::
   ::::::::::  ::::::::::  ::::::::::
   ::Link:1::  ::Link:2::  ::Link:3::
   ::::::::::  ::::::::::  ::::::::::

   |     annotation     |
   +--------------------+

*/
.annotation, section:nth-of-type(2n+2) .badges .annotation {border-width: thin;
  border-style: none solid solid; align-self: start;
  padding: 0 0.5em 0.5em; background: none; font-size: 1.2rem;
  margin-bottom: 1.2rem; clear: left;
  font-weight: 300; min-height: 0}
.annotation + * {clear: left}

/* Font size in badges smaller than in tpac2.css. */
.badges > * {font-size: 3.6vw}
@media (min-width: 33em) {.badges > * {font-size: 120%}}

/* World map with 14:00 UTC in various time zones. */
#world-map {columns: 9em; margin-top: 2.4rem}
#world-map p {break-inside: avoid}
@media (min-width: 56em) {
  #world-map {columns: auto; position: relative;
    text-align: center; font-size: 1.5vw; line-height: 1.1}
  #world-map img {width: 100%}
  #world-map p {margin: 0; position: absolute}
}
@media (min-width: 80em) {
  #world-map {font-size: 1em}
}

/* A calendar, one row per week, columns for Sunday to Saturday. */
.calendar {table-layout: fixed; width: 100%;
  line-height: 1.2; font-size: smaller; /*word-break: break-all*/}
.calendar th {width: auto}
.calendar th:first-child {width: 2.5em} /* Sunday */
.calendar th:last-child {width: 2.5em} /* Saturday */
.calendar th:first-child, .calendar th:last-child,
.calendar td:first-child, .calendar td:last-child {background: #ddd;
  white-space: normal}
section:nth-of-type(2n+2) .calendar th:first-child,
section:nth-of-type(2n+2) .calendar th:last-child,
section:nth-of-type(2n+2) .calendar td:first-child,
section:nth-of-type(2n+2) .calendar td:last-child {
  background: hsl(205, 40%, 15%)}
.calendar td, .calendar th {border-width: medium; vertical-align: top}
.calendar td {height: 2.4em}	/* Minimum height a bit more than the H4 */
.calendar h4 {margin: 0; font-size: larger; font-weight: 200}
.calendar h4 em {font-style: normal; color: #c9242b}
section:nth-of-type(2n+2) .calendar h4 em {color: hsl(60, 69.6%, 80%)}
.calendar span {display: none}
@media (min-width: 87em) {
  .calendar span {display: inline}
  .calendar th:first-child {width: 4.5em} /* Sunday */
  .calendar th:last-child {width: 4.5em} /* Saturday */
}
/* On narrow screens, display the cells one below the other. */
@media not all and (min-width: 46em) { /* 33em */
  .calendar table, .calendar tbody, .calendar tr,
  .calendar th, .calendar td {display: block; height: auto; width: auto}
  .calendar:not(.narrow) td:nth-child(2) {width: auto}
  .calendar thead {display: none}
  .calendar td, .calendar th {border: none; margin: 0.6em 0; background: #eee}
  .calendar {background: none; border: none}
  .calendar time[datetime^="2020-09"]::before {content: "Sep "}
  .calendar time[datetime^="2020-10"]::before {content: "Oct "}
  .calendar time[datetime^="2020-11"]::before {content: "Nov "}
  .calendar time[datetime="2020-09-27"]::before,
  .calendar time[datetime$="-01"]::before {content: none}
}

/* A wide figure or a wide table extends into the border area. */
@media (min-width: 56em) {
  table.wide, figure.wide, div.wide {
    width: calc(100vw - 4rem - 15px); /* Estimated scrollbar 15px */
    margin-left: calc((100% - (100vw - 4rem - 15px))/2)}
}

svg {fill: currentColor}

/*
header nav summary {padding: 1.2em 0.8em}
header nav [open] > summary::before,
header nav summary::before {content: none}
header nav summary::after {content: " ⌄"}
header nav summary:focus, header nav summary:hover {background: #EEE;
  outline: none;
  animation: none; text-decoration: none}
*/

/* Short notice in the banner. Draw attention with an animation. */
.highlight {line-height: 1; margin: 0; animation: scroll 1s;
  font-size: 80%}
@media (min-width: 27em) {.highlight {margin: -1em 0 0 0; font-size: 100%}}
@keyframes scroll {
  0% {position: relative; right: 100%}
  100% {position: relative; right: 0}
}

/* Less space between the menus on small screens, to keep them on one line. */
@media (max-width: 27em) {
  header nav summary, header nav > a {padding-left: 2vw; padding-right: 0}
  header nav a[href="/"] {padding-right: 0.3em}
}

/* Experimental: round image with the caption as an overlaied band. */
figure.small figcaption {position: absolute; width: 100%; text-align: center;
  top: 50%; transform: translate(0,-50%); background: hsl(0,0%,98%);
  padding: 0.2em 0}