/* Progress meter on bottom instead of top */
p.progress {top: auto; bottom: 0; color: #468; font-size: 30%; right: 8em;
  left: auto}
p.progress a {position: relative; padding: 0 0.5em}
x p.progress a.part {font-size: 140%; vertical-align: -0.1em}
/*
*/

p.progress a:hover::before,
p.progress a:hover::after {white-space: pre; text-align: right;
  line-height: 1.3; font-size: 2rem; font-weight: bold; z-index: 1;
  position: absolute; left: auto; right: 0}
p.progress a:hover::before {content: attr(title); bottom: 1.7em;
  background: hsl(205,100%,31%); color: white; padding: 0 0.3em;
  box-shadow: 0.2em 0.2em 0.3em rgba(0,0,0,0.7)}
p.progress a:hover::after {content: "\A▼"; color: hsl(205,100%,31%);
  bottom: 0.6em; text-shadow: 0.2em 0.2em 0.3em rgba(0,0,0,0.7)}

.illustration, .illustration2 {width: 30%; padding: 0}
.illustration {clear: right; float: right; margin: 0 0 0.2em 1em;
  text-align: right}
.illustration2 {float: left; margin: 0 1em 0.2em 0}

img, object {max-width: 100%}
sub {line-height: 0.5}
sub.TeX {font-size: 100%; vertical-align: -0.5ex; line-height: 0.5}

.figure {text-align: center; margin: 1.2em 1em; font-style: italic}
.figure img {max-height: 11em}
.figure object {height: 11em}
.figure em {font-style: normal}
.figure p {margin: 0}

/* .block keeps the element rectangular, even if there is a float next to it */
.block {display: block; overflow: auto}

/* A subtly blinking background behind div.callout */
@keyframes flash {
  from {background-position: -50% 0}
  8% {background-position: 150% 0}
  to {background-position: 150% 0}
}
div.callout {
  animation: flash 10s 5s infinite;
  background-position: -50% 0;
  background-repeat: no-repeat;
  background-size: 25% 100%;
  background-image: -o-linear-gradient(0deg, hsla(0,0%,100%,0),
    white, hsla(0,0%,100%,0));
  background-image: -moz-linear-gradient(0deg, hsla(0,0%,100%,0),
    white, hsla(0,0%,100%,0));
  background-image: linear-gradient(0deg, hsla(0,0%,100%,0),
    white, hsla(0,0%,100%,0))}

/* A long and incomplete list, items progressively smaller and dimmer */
.incomplete {margin-left: 0}
.incomplete li {display: inline; margin: 0; padding: 0}
.incomplete li:before {content: " • "}
.incomplete > *:nth-child(1) {font-size: 1em}
.incomplete > *:nth-child(2) {font-size: .9em}
.incomplete > *:nth-child(3) {font-size: .81em}
.incomplete > *:nth-child(4) {font-size: .729em}
.incomplete > *:nth-child(5) {font-size: .6561em}
.incomplete > *:nth-child(6) {font-size: .59049em}
.incomplete > *:nth-child(7) {font-size: .531441em}
.incomplete > *:nth-child(8),
.incomplete > *:nth-child(8) ~ * {font-size: .4782969em}
.incomplete > *:nth-child(9) {opacity: .9}
.incomplete > *:nth-child(10) {opacity: .81}
.incomplete > *:nth-child(11) {opacity: .729}
.incomplete > *:nth-child(12) {opacity: .6561}
.incomplete > *:nth-child(13) {opacity: .59049}
.incomplete > *:nth-child(14) {opacity: .531441}
.incomplete > *:nth-child(15) {opacity: .4782969}
.incomplete > *:nth-child(16) {opacity: .43046721}
.incomplete > *:nth-child(17) {opacity: .387420489}
.incomplete > *:nth-child(18) {opacity: .3486784401}
.incomplete > *:nth-child(19) {opacity: .3138105960}
.incomplete > *:nth-child(20) {opacity: .2824295364}
.incomplete > *:nth-child(21) {opacity: .2541865827}
.incomplete > *:nth-child(22),
.incomplete > *:nth-child(22) ~ * {opacity: .2287679244}

/* An element with two images as children, toggle between them with hover */
.toggle > *:first-child + * {display: none}
.toggle:hover > *:first-child {display: none}
.toggle:hover > *:first-child + * {display: inline}
/*
*
.toggle > *:first-child {position: absolute; z-index: -1}
.toggle > *:first-child + * {opacity: 0; transition: 0.4s opacity}
.toggle:hover > *:first-child {opacity: 0; transition: 0.4s 0.4s opacity}
.toggle:hover > *:first-child + * {opacity: 1}
/*
*/

em {font-size: 1em; background: url(highlighter.png) 100% 50% repeat-x;
  background-size: 100% 100%}

/* Little images; genie typically floats, icon typically inline */
img.genie {vertical-align: middle; max-width: 4em; max-height: 4em}
img.icon {vertical-align: bottom; height: 1.2em}

/* A decorative little image in the bottom right corner */
img.deco {height: 4em; position: absolute; bottom: 1.5em; right: 1.5em}

/* For advertisement on last slide */
.join {background: url(MMI-dotpattern-rl-500.png) no-repeat right;
  background-size: auto 90%; padding: 0.2em 0.4em}
.join > div {position: relative; background: rgba(243,249,251,0.8);
  background: linear-gradient(hsla(195,50%,93%,0.89),
    hsla(195,50%,100%,0.87));
  border: solid 1px; border-radius: 1em; padding: 0.5em;
  box-shadow: 0.12em 0.12em 0.36em rgba(0,0,0,0.7);
  color: #005A9C; text-align: center; line-height: 1.5; font-size: 80%;
  -o-transform: rotate(-3deg); -khtml-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg); transform: rotate(-3deg)}
.join img {float: left; height: 10.59em; height: 9em; margin-right: 0.5em}
.join p {margin: 0}
.join a:link, .join a:visited {text-decoration: none}

/* Show a small red arrow before instead of a red asterisk after links */
a:link:after, a:visited:after {content: none}
a:link:before, a:visited:before {content: "\27A0" /*"\2192"*/;
  vertical-align: 0.5em; vertical-align: middle; line-height: 0.5;
  color: hsl(0,100%,70%)}
p.letterhead a:before, p.letterhead a:after,
p.signature a:before, p.signature a:after,
p.progress a:before, p.progress a:after {
  content: none}

/* A little wider: 46% instead of 45%. And rotate an initial H2 a bit */
.col {width: 46%; margin: 1em 3.5% 1em 0}
.col + .col {margin: 1em 0 1em 4%}
.col > h2:first-child {position: relative; color: #999;
  display: table;
  /* font-family: Caflisch Script Pro, fantasy; */
  /* font-family: Marker Felt, Marker Felt Thin, fantasy; */
  font-family: "1942 report", monospace; letter-spacing: -0.13em;
  background: url(highlighter) 100% 50% repeat-x;
  background-size: 100% 100%;
  -o-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -khtml-transform-origin: 0 0;
  transform-origin: 0 0;
  -o-transform: translate(-0.5em, 0.5em) rotate(-5deg);
  -moz-transform: translate(0, 0.5em) rotate(-5deg);
  -khtml-transform: translate(0, 0.5em) rotate(-5deg);
  transform: translate(0, 0.5em) rotate(-5deg)}

/* Use a single element with class=columns instead of two with class=col */
.columns {columns: 2}
.columns li {break-inside: avoid}
ul.columns, ol.columns {margin-left: 0}
ul.columns > li, ol.columns > li {margin: 0.5em 0 0 1.5em}
ul.columns > li:first-child, ol.columns > li:first-child {margin-top: 0}

ul.toc {-moz-columns: 15em; columns: 15em; text-align: left}
ul.toc li {margin-left: 1.5em; list-style: decimal}
ul.toc a::before {content: none}

/* A sticker in the bottom left corner, on top of everything else */
.sticker {position: absolute; left: 0; bottom: 2.5em; margin: 0;
  font: 0.8em/1.1 serif; text-align: center; width: 9em; height: 9em;
  border-radius: 100em; overflow: hidden; padding: 1em;
  background: #82ff3e; color: black; animation: turn 60s linear infinite}

@keyframes turn {
  0% {transform: rotate(0);
    box-shadow: 0.2em 0.2em 0.5em white inset, -0.2em -0.2em 0.5em black inset,
      0.2em 0.2em 0.3em rgba(0,0,0,0.7)}
  25% {transform: rotate(90deg);
    box-shadow: 0.2em -0.2em 0.5em white inset, -0.2em 0.2em 0.5em black inset,
      0.2em -0.2em 0.3em rgba(0,0,0,0.7)}
  50% {transform: rotate(180deg);
    box-shadow: -0.2em -0.2em 0.5em white inset, 0.2em 0.2em 0.5em black inset,
      -0.2em -0.2em 0.3em rgba(0,0,0,0.7)}
  75% {transform: rotate(270deg);
    box-shadow: -0.2em 0.2em 0.5em white inset, 0.2em -0.2em 0.5em black inset,
      -0.2em 0.2em 0.3em rgba(0,0,0,0.7)}
  100% {transform: rotate(360deg);
    box-shadow: 0.2em 0.2em 0.5em white inset, -0.2em -0.2em 0.5em black inset,
      0.2em 0.2em 0.3em rgba(0,0,0,0.7)}
}

/* Small shake every few seconds */
.shake {animation: shake 3s infinite; position: relative}

@keyframes shake {
  0% {transform: translate(0, 0)}
  2% {transform: translate(-0.15em, 0)}
  6% {transform: translate(0.15em, 0)}
  8% {transform: translate(0, 0)}
  100% {transform: translate(0, 0)}
}
@keyframes x-shake {
  0% {transform: skewx(0); transform-origin: 50% 100%}
  2% {transform: skewx(-5deg); transform-origin: 50% 100%}
  6% {transform: skewx(5deg); transform-origin: 50% 100%}
  8% {transform: skewx(0); transform-origin: 50% 100%}
  100% {transform: skewx(0); transform-origin: 50% 100%}
}

/* Circle of four actions connected by arrows */
.circle4 {display: block; overflow: auto; position: relative; line-height: 1.1;
  x-padding: 0.3em}
.circle4 > * {display: block; margin: 0.1em; padding: 0; text-align: center}
.circle4 > :nth-child(1)::before,
.circle4 > :nth-child(1)::after,
.circle4 > :nth-child(3)::before,
.circle4 > :nth-child(3)::after {font-size: 1.5em; position: absolute}
.circle4 > :nth-child(1) {margin-bottom: 1.2em; position: relative}
.circle4 > :nth-child(1)::before {content: "⇗"; bottom: -0.9em; left: 25%}
.circle4 > :nth-child(1)::after {content: "⇘"; bottom: -0.9em; right: 25%}
.circle4 > :nth-child(2) {margin-left: 50%; padding-left: 0.5em}
.circle4 > :nth-child(3) {margin-top: 1.2em; position: relative}
.circle4 > :nth-child(3)::before {content: "⇖"; top: -0.9em; left: 25%}
.circle4 > :nth-child(3)::after {content: "⇙"; top: -0.9em; right: 25%}
.circle4 > :nth-child(4) {position: absolute; left: 0; right: 50%; top: 50%;
  padding-right: 0.5em; transform: translate(0,-50%)}

/* Small, red notes to the right */
.note {white-space: normal; font-family: Gill Sans, sans-serif;
  float: right; clear: right; color: hsl(0,100%,40%); font-style: italic}

.remark {text-align`right; margin-left: 15%}

/* Light on dark */
html, body {background: black; color: white}
h1 {background: none; color: yellow; box-shadow: none; border-radius: 0;
  border-left: thin solid; x-font-weight: bold; text-align: left}
x h1::after {background: black}
h1::before, h1::after {x-color: yellow; x-bottom: 1px; content: none}
p.progress {right: auto; color: gray; border-left: thin solid yellow; left: 27%;
  line-height: 1.3; display: table; table-layout: fixed; width: 72.5%}
p.progress a {display: table-cell; padding: 0}
p.progress .cur, p.progress .cur ~ * {color: yellow}
p.progress a:hover::before {background: yellow; color: black; box-shadow: none}
p.progress a:hover::after {color: yellow; text-shadow: none}
p.progress .cur {text-decoration: none; font-size: 180%; line-height: 0}
a {transition: 0.6s background}
a:link:hover, a:visited:hover {color: inherit; background: hsl(0,100%,70%)}
div.sidebar, div.callout {background-color: hsl(60,90%,20%)}
div.callout {color: #FFF}
ul {list-style-image: url(bullet.png)}
p.signature {color: gray}
em {background: none; font-size: 130%}
p.letterhead, p.signature {display: none}
/*
*/