/*********************************
 * CSS @media projection rules (not print or screen)
 *
 * 1) projection -> slideshow mode (display one slide at-a-time; hide all others)
 * 2) screen     -> outline mode (display all slides-at-once on screen) 
 * 3) print      -> print (and print preview)
 *
 * toggle between projection/screen (that is, slideshow/outline) mode using t-key
 */
html,
body,
.presentation {
  margin: 0;
  padding: 0;
}
.slide {
  display: none;
  /* note: only display current slide in projection mode */
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 2% 4% 0% 4%;
  /* css note: order is => top right bottom left  */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  /* css note: lets use border-box; no need to add padding+border to get to 100% */
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 2;
}
.slide.current {
  display: block;
}
/* note: only display current slide in projection mode */
/*****
 *  layout block structure:
 *
 *  .layout
 *    > #header
 *    > #footer
 */
.layout #header,
.layout header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.5em;
  z-index: 1;
}
.layout #footer,
.layout footer {
  position: fixed;
  top: auto;
  bottom: 0;
  padding: 1em 0;
  /* css note: order is => 1st top,bottom; 2nd right,left */
  width: 100%;
  height: 4em;
  z-index: 5;
  /* todo: move font-size and font-style to blank.css */
  font-size: 100%;
  font-weight: bold;
  /* todo: move font-size and font-style to blank.css */
}
.layout #footer h1,
.layout footer h1 {
  display: block;
  margin: 0;
  padding: 0 1em;
  font-size: 50%;
}
.layout #footer h2,
.layout footer h2 {
  display: block;
  margin: 0;
  padding: 0 1em;
  font-size: 50%;
  font-style: italic;
}
/*********************************
 * general text-alignment classes
 */
.left {
  text-align: left;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}
/*********************************
 * general _absolute_ font-size classes
 */
.small {
  font-size: 97%;
}
.x-small {
  font-size: 88%;
}
.xx-small {
  font-size: 82%;
}
.large {
  font-size: 103%;
}
.x-large {
  font-size: 112%;
}
.xx-large {
  font-size: 118%;
}
/*********************************
 * general _relative_ font-size classes
 */
.smaller {
  font-size: 82%;
}
.larger {
  font-size: 118%;
}