html {background: #005A9C; padding: 1em}
body {background: white; color: #333; border-radius: 0.6em; padding: 1em 3em;
  font: 1em/1.3 "Swiss 721", Helvetica, Arial, sans-serif; margin: 0 auto;
  max-width: 55em; -moz-hyphens: auto; hyphens: auto}
hgroup {min-height: 22em; position: relative; text-align: right; padding: 0 2em;
  color: white; z-index: 1; overflow: hidden; hyphens: manual}
hgroup h1 {font-size: 3em}
hgroup h2 {color: inherit; font-weight: normal; font-style: italic;
  font-size: 2em}
hgroup p {font-size: 1.3em; font-weight: bold; margin: 0.7em 0}
hgroup .graphic {position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -1;
  background: url(https://www.w3.org/2013/wstemplate/lib/imghead2.jpg)
    50% 50% / auto 100% #005A9C /* fallback image */;
  filter: brightness(50%) /*sepia() hue-rotate(170deg) saturate(150%)*/}
h2 {color: #005A9C}
.box {float: right; border: 1px solid #CCC; border-radius: 0.6em; color: #666;
  box-shadow: 0.2em 0.4em 0.5em #888; padding: 0.3em; text-align: center;
  font-size: smaller; margin: 0 0 1em 2em; width: 19em; clear: right;
  background: white}
/* Logos can fit two per line. Assume no spaces between them. */
.box img {max-height: 5em; max-width: 38%; margin: 0 5%; vertical-align: bottom}
@supports (object-fit: contain) {
  .box img {object-fit: contain; width: 38%; height: 5em}
}
footer {clear: both; margin: 1em 0; font-size: smaller; color: #555;
  border-top: thin solid; padding-top: 1em}
nav > ul {margin: 0 0 2em 0; display: table; table-layout: fixed; width: 100%;
  border-collapse: collapse; background:#005A9C; color:#eee;
  border-left: hidden; border-right: hidden; font-size: smaller;
  font-weight: bold}
nav li {display: table-cell; border: 1px solid white; padding: 0.3em 0.2em;
  text-align: center; vertical-align: middle}
nav a {display: block; color: inherit; text-decoration: none}
nav a:hover, nav button:hover {text-decoration: underline}
a[href$="/2003/08/Workshops/"] {color: #FFB799}
ul {margin-left: 0; padding-left: 1.1em; list-style: square}
blockquote {margin-left: 1em}
dd {margin-left: 5em}
dt {font-weight: bold; display: compact}
.box dd {margin: 0 0 0.6em 0}
.box dt {display: block}
img {max-width: 100%}
h1, h2, h3, h4 {break-after: avoid}
img.glyph {height: 0.9em; width: auto; margin: 0; vertical-align: middle}
.paren::before {content: "("}
.paren::after {content: ")"}
.credit {font-size: smaller; text-align: right; display: block}
.credit, .credit a {text-decoration: none}
.figure {text-align: center; margin: 0 0 2.4em 0; page-break-inside: avoid;
  float: column-top}
/* For the photo and the address of the venue: */
.venue {background: #EEE; border-radius: 0.4em; text-align: center}
.venue > * {margin: 0}
.venue img {vertical-align: bottom; border-radius: 0.4em; max-height: 10em}
.venue > * + * {padding: 0.5em}
@media (min-width: 40em) { /* Put the venue address next to its photo: */
  .venue {text-align: left}
  .venue > * {display: table-cell; vertical-align: middle}
  .venue > * + * {padding-left: 2em}
}
@supports not (float: column-top) {
  .figure {margin-top: 2.4em}
}
.display {margin: 1.2em 0 0 0; padding: 0 1.2em; border: thin solid;
  border-radius: 0.5em; page-break-inside: avoid; float: column-bottom}
@supports not (float: column-bottom) {
  .display {margin-bottom: 1.2em}
}
.figure p {margin: 0.6em auto; width: -moz-fit-content;
  width: -webkit-fit-content; width: fit-content}
.figure p + p {font-style: italic}
.figure img {vertical-align: text-bottom}
@supports (transform: rotate(-90deg)) or (-webkit-transform: rotate(-90deg)) {
  .figure p {position: relative}
  .figure .credit {position: absolute; width: 0; white-space: nowrap;
    bottom: 0; right: 0;
    -webkit-transform-origin: bottom left; transform-origin: bottom left;
    -webkit-transform: rotate(-90deg) translate(0.1em, 1.3em);
    transform: rotate(-90deg) translate(0.1em, 1.3em)}
}
address {display: inline-block; font-size: 90%; min-width: 13.5em; width: 25%;
  margin: 0 1em 1.2em 0; vertical-align: top}
address::first-line {font-weight: bold}
ul.participants {columns: 16em; columns: 10em; padding-left: 0}
ul.participants li {margin: 0 0 0 1.1em; display: block; text-indent: -1.1em}
pre {font-size: 90%}
/* Generic tables: */
table {border-collapse: collapse}
th, td {padding: 0.2em 0.4em; vertical-align: baseline}
th {white-space: nowrap; color: white; background-color: #005A9C}
td {border-top: thin solid #005A9C}
/* Tables with agendas: */
.schedule {border-collapse: separate; border-spacing: 0 0.3em}
.schedule thead {display: none}
.schedule th, .schedule td {border: thin solid #005A9C}
.schedule th {border-radius: 0.3em 0 0 0.3em}
.schedule th[colspan] {border-radius: 0.3em}
.schedule td {border-radius: 0 0.3em 0.3em 0}
.schedule ul {margin: 0}
.hide, [hidden] {display: none}

@media all and (max-width: 40em) {
  /* The right-floating boxes become normal blocks */
  body {padding: 1em}
  .box {float: none; width: auto; margin: 1em 0}
  /* The horizontal menu becomes vertical */
  nav li {display: block; border-style: solid none none none}
}


@page {
  margin: 1.5cm 1.3cm 3cm;

  @bottom-center {content: counter(page)}
}

@media print {

html {background: none; color: inherit; padding: 0}
body {background: none; color: inherit; border-radius: 0; padding: 0;
  columns: 8.5cm; column-gap: 2em;
  font: 10pt/1.3 Optima, "Swiss 721", Helvetica, Arial, Verdana, sans-serif}
body > p:first-child, h1, h1 + h2, h1 + h2 + p, p.graphic {
  column-span: all; hyphens: none; text-align: center}
nav {display: none}
p.graphic {margin-bottom: 2.4em}
p {margin: 0}
p + p {text-indent: 1.1em}
.box {width: auto; float: none; page-break-inside: avoid; break-inside: avoid;
  margin: 0 0 1em 0}
.box h2 {font-size: 1.2em; margin: 0 0 0.5em 0}
.box p {margin: 0.6em 0}
.box p + p, .issue {text-indent: 0}
ul, ol, dl {margin-top: 0.6em; margin-bottom: 0.6em}
a {color: inherit; text-decoration: underline}
#toc a::after {content: "\2003" target-counter(attr(href), page);
  font-style: italic}
a.pageno[href^="#"]::after {
  content: " (p.\A0" target-counter(attr(href), page) ")"}
#toc a, a.pageno[href^="#"] {text-decoration: none}
.figure p {position: relative}
.figure .credit {position: absolute; width: 0; white-space: nowrap;
  bottom: 0; right: 0; transform-origin: bottom left;
  transform: rotate(-90deg) translate(0.1em, 1.3em)}
.display {padding: 1.1em}

}