/* Embed the fonts we're using. */

@font-face {
  font-family: "Virgo 01";
  src: url(virgo.woff) format("woff")}

@font-face {
  font-family: My Optima;
  font-style: normal;
  font-weight: normal;
  src: url(Optima-Regular.woff) format("woff")}

@font-face {
  font-family: My Optima;
  font-style: normal;
  font-weight: 700;
  src: url(Optima-Bold.woff) format("woff")}

@font-face {
  font-family: My Optima;
  font-style: oblique;
  font-weight: normal;
  src: url(Optima-Italic.woff) format("woff")}

@font-face {
  font-family: My Optima;
  font-style: oblique;
  font-weight: 700;
  src: url(Optima-BoldItalic.woff) format("woff")}

@font-face {
  font-family: My Optima;
  font-style: normal;
  font-weight: 900;
  src: url(Optima-ExtraBlack.woff) format("woff")}

/* Basic colors and fonts */

body {background: white; color: black; margin: 0 2em; text-align: justify;
  hyphens: auto; font: medium/1.5 Optima, My Optima, sans-serif}
h1, h2 {font-family: "Virgo 01", Arial Black, Impact, sans-serif;
  line-height: 1.3; margin: 3rem 0 1.5rem 0; color: #CB6628; text-align: left}
p, dl {margin: 1.5em 0}
dt {font-weight: bold; margin-left: 3em}
dd {margin-left: 3em}
dt::before {content: "▶"; display: inline-block; width: 3em; color: #CB6628;
  margin-left: -3em}
dd + dt {margin-top: 1.5em}
ul {padding-left: 1.5em; list-style: none}
ul li::before {content: "✓"; display: inline-block; width: 1.5em;
  margin-left: -1.5em}

/* The banner at the top is formed by a NAV element. It is assumed to
have this structure: NAV(H1 P(OBJECT(IMG)) UL(LI...)). The H1 is only
for use without CSS, so it's hidden here. The image is assumed to be a
banner that is designed to be 15em high and has a logo or other
interesting object whose center is at 10em from the left side. The
(few, short) list itmes are shown on one line centered below that
object. */

#local {margin: 0 -2em 2.4em -2em /* Extend to the window edges */}
#local h1 {display: none}
#local p {margin: 0; overflow: hidden /* Crop the right side of the image */}
#local object, #local img {display: block; height: 15em}
#local ul {margin: 0; width: 20em; padding: 0; text-align: center}
#local li {display: inline}
#local li::before {content: none; margin: 0}
#local li + li::before {content: " \2022  "}
#local a {color: inherit; font-weight: bold; text-decoration: none}

/* The (optional) caption of a FIGURE is overlaid on the lower right
corner of the image, as a slightly turned, orange post-it note. */

figure {display: block; margin: 1.5em 0}
figure img {vertical-align: bottom; max-width: 90%; max-width: calc(100% - 1em)}
figcaption {display: inline-block; width: 8em; background: #FFCC66;
  padding: 0.2em 0.5em; font-size: smaller; text-align: center;
  vertical-align: bottom; font-style: italic; color: black; position: relative;
  margin: 0 0 0 -8.5em; transform: rotate(-4deg); box-shadow: 0 2px 3px black}

/* MAIN has a slightly bigger font than normal */

main {font-size: larger}

/* ADDRESS at the bottom holds the author's name and a date */

address {clear: both; padding: 3em 0 0 0}

/* The site navigation links at the bottom are another NAV element.
It's structure is assumed to be NAV(DIV(H3 UL(LI...))...), i.e., a
small number of DIVs, each with an H3 and a UL. */

#site {margin: 1.5em -2em 0.7em; padding: 1em; display: flex;
  justify-content: center; background: linear-gradient(#CCC, #FFF 2em, #FFF)}
#site div {margin: 0 1em; flex: 0 1 9em}
#site h3, #site ul {text-align: left; margin: 0.5em 0; padding: 0}
#site li::before {content: none}

/* If there is enough space, the FOOTER will be shown in a column to
the right of MAIN. */

@media all and (min-width: 50em) {
  main {float: left; width: 65%; width: calc(66.7% - 1em); margin: 0 0 3em}
  footer {float: right; width: 32%; width: calc(33.3% - 1em); margin: 0 0 3em}
  main > *:first-child, footer > *:first-child {margin-top: 0}
  footer h1, footer h2 {text-align: right}
}