html {background: #005A9C; padding: 1em}
body {background: white; color: #333; border-radius: 0.6em; padding: 1em 3em;
  font: 1.1em/1.3 "Swiss 721", Helvetica, Arial, sans-serif; margin: 0 auto;
  max-width: 65em; -moz-hyphens: auto; hyphens: auto}
h2 {color: #F74900}
h1 + h2 + p {font-size: 1.3em; font-weight: bold; color: #666; margin: 0.7em 0}
.graphic {height: 13em; position: relative; overflow: hidden; margin: 0 -1.5em}
.graphic img {width: 100%; position: absolute; bottom: 0; left: 0; height: 100%}
/* If you rather clip than squeeze the image, remove 'height: 100%' */
.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}
.box h2, h1 + h2 {color: #148080}
/* Logos can fit two per line. Assume no spaces between them. */
.box img {width: 35%; margin: 0 5%; vertical-align: bottom}
#footer {clear: both; margin: 1em 0; font-size: smaller; color: #555}
.menu {margin: 0 0 2em 0; display: table; table-layout: fixed; width: 100%;
  border-collapse: collapse; background:#005A9C; border: hidden;
  font-size: smaller; font-weight: bold}
.menu li {display: table-cell; border: 1px solid white; border-top: none;
  padding: 0.3em 0.2em; text-align:center; vertical-align: middle}
.menu a {display: block; color:#eee; text-decoration: none}
.menu a:hover {background:#a2b3a1; color: black}
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}
dl.meta dd {margin: 0}
dl.meta dt {display: run-in}
dl.meta dt::after {content: ": "}
img {max-width: 100%}
h1, h2, h3, h4 {break-after: avoid}
.agenda {border-collapse: collapse}
.agenda th, .agenda td {padding: 0.2em 1em; vertical-align: baseline;
  text-align: left}
.agenda th[colspan] {background: #CCC}
.agenda ul {margin: 0}
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}
@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}
.issue {display: block; margin: 0.6em 0; padding: 0.4em; background: #e5fecc;
  border: thin solid #66cc00; border-radius: 0.5em}
#participants ul {columns: 16em; columns: 10em; padding-left: 0}
#participants ul li {margin: 0 0 0 1.1em; display: block; text-indent: -1.1em}
#toc ul {x-padding-left: 0; list-style: none}
pre {font-size: 90%}
.hide {display: none}

@media all and (max-width: 40em) {

/* The right-floating boxes become normal blocks */
body {padding: 1em}
.graphic {height: 10em; margin: 0}
.box {float: none; width: auto; margin: 1em 0}

/* The horizontal menu becomes vertical */
.menu li {display: block; border-style: none none solid none}

}


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

  @bottom {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}
.menu {display: none}
p.graphic {margin-bottom: 2.4em}
p {margin: 0}
p + p {text-indent: 1.1em}
.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}

}