/* 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}

.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))}

/* Style for code examples */
/* code, pre {font-family: Chalkboard, monospace} */
/* code, pre {font-family: Apple Casual, Casual, monospace} */
/* code, pre {font-family: "1942 report", monospace; letter-spacing: -0.15em} */
/* code, pre {font-family: Marker Felt, Marker Felt Thin, monospace} */
pre {font-family: Courier, monospace}
code {font-family: Caflisch Script Pro, monospace; line-height: 1.1}
pre b, code b {background: url(highlighter.png) 100% 50% repeat-x;
  background-size: 100% 100%}
pre .unimportant {font-size: 70%}

/* 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}

/* 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}

/* 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)}
}