body,
.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  color: #222;
}

h1,
h2,
h3 {
  margin: 8px 0;
  padding: 0 8px;
  font-weight: normal;
}

h1:first-child {
  border-bottom: 3px solid #222;
}

pre {
  margin: 1em 40px;
  padding: .25em;
}

/* when code blocks are embedded in a table, we don't need giant whitespace */
table pre {
  margin: 0;
}

/* applies to inline code only */
code {
  padding: 2px 4px;
  font-size: 1.1em;
  background-color: #ededed;
  border-radius: 4px;
}

pre code {
  display: block;
  padding: unset;
  border-radius: unset;
  overflow: hidden;
}

@media screen {
  /* explicitly size parent elements so the screen blanker works */
  html, body{
    height:100%;
    margin:0;
    padding:0;
    overflow: hidden;
  }

    body.busy {
      cursor: progress;
    }

  body#download,
  body#stats {
    overflow: auto;
  }

  #preso,
  .slide {
    background: #fff;
    width: 1024px;
    height: 768px;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
  }

  .slide {
    font-size: 1.5em;
  }

  #preso, .slide.background-fit {
      background-size: contain;
  }

  #footer {
    background-color: #f2f2f2;
    -webkit-box-shadow:0 0 25px rgba(0,0,0,0.35);
    -moz-box-shadow:0 0 25px rgba(0,0,0,0.35);
    box-shadow:0 0 25px rgba(0,0,0,0.35);
    padding: 4px 8px;
    width: 100%;
    position:fixed;
    bottom: 0;
    z-index: 2147483647; /* max, see http://www.puidokas.com/max-z-index/ */
    display: none;
  }
    #footer .container {
      border: 1px solid #ccc;
      padding: 2px 6px;
      margin: 0 3px;
      border-radius: 3px;
    }
  #followMode {
    font-weight: bold;
  }
  #pauseScreen {
      background: rgba(0, 0, 0, 0.85);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      display: none;
      margin: auto;
      color: white;
      padding: 1em;
      z-index: 2147483647; /* max, see http://www.puidokas.com/max-z-index/ */
      text-align: center;
  }
  #buttonNav {
    display: none;
  }

  /* prevent large images from getting too out of hand */
  .content img {
    max-width: 100%;
    max-height: 100%;
  }

  /* set up annotation overlays */
  .slide canvas.annotations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
}

.ui-button:active {
  border-color: #263238;
  background-color: #263238;
}

/* plain (non-bullet) text */
.content > p,
.content > form > p {
  margin: 1em;
}

.content > blockquote,
.content > form > blockquote {
  margin: 2em;
}

.content img,
.content svg {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

.cover h1 {
  border: none;
}

.slide .center,
#slides.supplemental .slide .center {
  position: relative;
  /* for some reason, setting top to 50% is pushing the content too far down, no idea why */
  top: 42%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.center h1,
.center h2,
.center h3,
.center h4,
.center h5,
.center h6,
#slides.supplemental .slide .center h1,
#slides.supplemental .slide .center h2,
#slides.supplemental .slide .center h3,
#slides.supplemental .slide .center h4,
#slides.supplemental .slide .center h5,
#slides.supplemental .slide .center h6
{
  text-align: center;
}

.small {
    font-size: 80%;
}

.smaller {
    font-size: 70%;
}

/* inverse slide style */
.slide.inverse {
  color: #efefef;
  background-color: #262626;
}
  .slide.inverse code {
    color: black;
  }
  .slide.inverse h1:first-child {
    border-bottom: 3px solid #efefef;
  }

/**********************************
 ***       List styling         ***
 **********************************/

.content > ol,
.content > ul {
  margin-left: 2em;
}

.content ol > li,
.content > ul li,
.content > form > ul li {
  margin: .5em;
}

/* ironically, normal lists have bullets and 'bullets' lists don't */
.bullets ul {
  list-style: none;
  padding-left: 0px;
}
.bullets > ul > li {
  text-align: center;
  padding: 25px;
}

.smbullets > ul > li {
  text-align: center;
  padding: 10px;
}

.bullets ul ul > li {
  font-size: 80%;
}

.content .incremental.hidden {
  visibility: hidden;
}

.commandline code.command {
    color: #000;
}

.commandline code.result {
    color: #444;
}

.command h1 {
    white-space: pre;
}

.code {
    white-space: pre;
}

#notes, .notes-section, .instructor, .solguide { display: none }

.offscreen { position:absolute; top:0; left:-9999px; overflow:hidden; }

body.presenter #debugInfo {
  margin-left: 30px;
}

#notesInfo {
  margin-left: 30px;
  display: none;
}

img#disconnected {
  float: right;
  margin: 5px;
  display: none;
}

#preshow { display: none; }
/* define the screen blocking view */
/* we define it as invisible because we use jQuery to animate its presentation */
#screenblanker {
  height: 100%;
  display: none;
}

/**********************************
 ***       Table styling        ***
 **********************************/

.content table {
  margin-left: auto;
  margin-right: auto;
  border-collapse:collapse;
  width: 90%;
  font-size: .9em;
}

.content thead {
  border-bottom: 2px solid #ccc;
}

.content tr:not(:last-child) {
  border-bottom: 1px solid #ccc;
}

.content tbody tr:nth-child(2n+1) {
  background-color: #f9f9f9;
}

.content td {
  padding: .25em .5em;
}

.content td:first-child {
  border-right: 2px solid #ccc;
}

/**********************************
 ***      Sidebar styling       ***
 **********************************/
#hamburger {
  position: fixed;
  padding: 4px 8px;
  opacity: .05;
  border-radius: .1em;
  transition: all .2s;
  z-index: 2147483647;
  float: left;
}

#hamburger:hover,
#hamburger.highlight {
  opacity: 1;
  background-color: #337ab7;
  color: #ffffff;
}

#sidebarExit {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 240px;
  z-index: 2147483647;
}

#feedbackSidebar,
#sidebarExit,
.submenu {
  display: none;
}

.sideMenu {
  position: absolute;
  height: 100%;
  width: 240px;
  background-color: #ffffff;
  box-shadow:0 0 25px rgba(0,0,0,0.35);
  overflow: auto;
  z-index: 2147483647;
}

.sideMenu textarea {
  min-height: 80px;
  width: 90%;
  margin: 8px;
  border-color: #dddddd;
  border-radius: .3em;
}

.sideMenu p {
  text-align: center;
  margin: 0;
}

.sideMenu i {
  margin-right: 8px;
}

.sideMenu hr {
  clear: both;
}

.optionWrapper,
.buttonWrapper {
  line-height: 48px;
  padding: 0 16px;
  font-weight: bold;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.buttonWrapper:hover,
.submenu a:hover,
.submenu .highlighted a {
  background-color:#337ab7;
  color: #ffffff;
  cursor: pointer;
}

.buttonWrapper.disabled {
  opacity: 0.25;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  background-color: initial !important;
  color: initial !important;
}
.buttonWrapper.disabled:hover {
  background-color: initial !important;
  color: initial !important;
}

.buttonWrapper.split {
  float: left;
  width: 50%;
  line-height: 30px;
  margin: 12px 0;
  padding: 0;
  text-align: center;
}

.buttonWrapper.split i {
  margin-right: 0;
}

.submenu .buttonWrapper{
  display: inline-block;
  width: 90%;
  margin: 0 5%;
  padding: 0;
  background-color: #337ab7;
  border: 1px solid #2e6da4;
  color: #ffffff;
  border-radius: 4px;
  text-align: center;
  line-height: 36px;
}

.submenu .buttonWrapper:hover {
  background-color: #286090;
  border-color: #204d74;
}

.submenu ul {
  font-size: .9em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.submenu a {
  display: block;
  color: #000;
  text-decoration: none;
}

.submenu a i {
  float: right;
}

.navSection {
  border-top: 1px solid #ccc;
  padding: .8em;
}

.navItem {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: .5em 1.5em;
}

#navigationHover {
  display: none;
  position: absolute;
  overflow: hidden;
  width: 640px;
  height: 500px;
  z-index: 99999;
  background-color: inherit;
  margin: 0px;
  box-shadow:0 0 25px rgba(0,0,0,0.35);
  transform: scale(0.3);
  transform-origin: 0 0;
}

#askedQuestions {
  margin: 0;
}
#askedQuestions li {
  cursor: default;
}
#askedQuestions li:hover {
  background-color: #dedede;
}
#askedQuestions li:hover:after {
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding: 0 8px;
  float: right;
  content: "\f057"; /* fa-times-circle */
}
#askedQuestions li.closed {
  text-decoration: line-through;
  color: #ccc;
}
#languageMenu {
  line-height: 2em;
}


/* End Sidebar styling */

/* questions HUD indicator */
#questionsIndicator {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 1em;
  height: 1em;
  font-size: 2em;
  background-color: #fb8d8d;
  border: 1px solid #900e0e;
  border-radius: 5px;
  padding: 0 0 0.25em 0.25em;
  opacity: 0.5;
  z-index: 999999999;
  display: none;
}
/* end questions HUD indicator */

.results {
  background-color:#002200;
  color:#00AA00;
  border:2px solid black;
  position: fixed;
  top:0px;
  width:100%;
  padding:15px;
  margin:0px;
  z-index: 2147483647; /* max, see http://www.puidokas.com/max-z-index/ */
}

.results pre {
  margin: 0;
  padding: 0;
}

/* Add Console "code highlighting" styles to resemble the look of a terminal window. */
pre.highlight code.language-console,
pre.highlight code.console {
  background: #222;
  background: url(titlebar/left.png) left top no-repeat, url(titlebar/right.png) right top no-repeat, url(titlebar/center.png) center top repeat-x #222;
  color: #fff;
  padding: 30px 0.5em 0.5em;
  border: 1px solid #acacac;
  border-radius: 6px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  box-shadow: 0px 0px 10px #acacac;
  overflow: hidden;
}

pre.highlight code.language-powershellconsole,
pre.highlight code.powershellconsole {
  background: rgb(1, 36, 86);
  background: url(titlebar/powershell-controls.png) right top no-repeat, url(titlebar/powershell.png) left top repeat-x rgb(1, 36, 86);
  color: rgb(238, 237, 240);
  padding: 32px 0.5em 0.5em;
  border: 6px solid rgb(102, 202, 234);
  border-top: 2px solid rgb(102, 202, 234);
  border-radius: 4px;
  overflow: hidden;
}

pre.highlight code.language-console.nochrome,
pre.highlight code.language-powershellconsole.nochrome {
  background-image: none;
  border-width: 1px;
  padding: 0.5em;
  border-radius: 4px;
}

pre.highlight code .highlightedLine {
  background-color: #f5e2e2;
  display: inline-block;
  width: 100%;
}

/* to avoid breaking changes */
.highlight .language-shell {
  display: block;
  background-color: #222;
  color: #00ff40;
  border: 2px solid #ddd;
  padding: 0.5em;
  overflow: hidden;
}

/* Diagram styling: overriding mermaid.css as needed */
.language-render-diagram,
.language-render-diagram .noteText,
.language-render-diagram .node text,
.language-render-diagram div.mermaidTooltip {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}


/**********************************
 ***       code execution       ***
 **********************************/
 .execute {
  position: relative;
  cursor: pointer;
}

.execute:after {
  font-family: FontAwesome;
  content: "\F144";
  position: absolute;
  right: .5em;
}

.executing:after {
  content: "\f1ce";
  color: #e74c3c;
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

.executing:hover { cursor: wait; }
/* End code execution */


#tips, #preshow_timer {
  display:inline;
  background-color:#000;
  color:#fff;
  border:2px solid black;
  position: fixed;
  padding:25px;
  margin:0px;
  z-index: 2147483647; /* max, see http://www.puidokas.com/max-z-index/ */
}

#tips {
  top: 0px;
  right: 0px;
  text-align:right;
}

#preshow_timer {
  bottom: 0px;
}

/**********************************
 ***     table of contents      ***
 **********************************/
#toc a {
  text-decoration: none;
}
#toc a::after {
  content: leader(".") target-counter(attr(href), page);
}

/**********************************
 ***       form widgets         ***
 **********************************/
form .element {
  font-size: .8em;
  width: 90%;
  margin: 0 auto;
}

.element input + label,
.element label + input,
.element select {
  margin-left: 0.5em;
}

.element textarea {
  display: block;
  width: 85%;
}

.element ul {
  list-style: none;
  margin-top: 0;
}

.element input[type=checkbox],
.element input[type=radio] {
  font-size: 1em;
  width: 1em;
  height: 1em;
}

.warning {
  background-color: #ff7373;
}
.tools {
  position: absolute;
  bottom: 40px;
  right: 20px;
}

.tools input[type=submit],
.tools input[type=button] {
  height: 24px;
  font-size: .6em;
  border: none;
}
.tools input[type=submit].dirty {
  color: #fff;
  background-color: #2e6da4;
}
.tools input[type=button].display {
  display: none;
}

.rendered {
  border: 1px solid #ccc;
  border-radius: 0.5em;
  padding: .5em;
  min-height: 3em;
}

.rendered label {
  border-bottom: 1px solid #999;
}
.item {
  width: 100%;
  position: relative;
}

.answer {
  position: absolute;
  left: 0;
}
.bar {
  height: 1.25em;
  background-color: #e74c3c;
  border: 1px solid #f45f5f;
  border-left: none;
  border-radius: 0 0.4em 0.4em 0;
}
.correct .bar {
  background-color: #dff0d8;
  border: 1px solid #00AA00;
  border-left: none;
}

.count {
  display: none;
}

/**********************************
 ***     form answer key        ***
 **********************************/

/* no, the option styling will likely not do anything */
.slide.answerkey form option.incorrect,
.slide.answerkey form label.incorrect {
  text-decoration: line-through;
  font-weight: 100;
  opacity: .7;
}
.slide.answerkey form label.correct,
.slide.answerkey form option.correct {
  font-weight: 900;
}
/* Be careful with order here; these rules depend on cascading order */
.slide.answerkey input + option,
.slide.answerkey input + label.incorrect,
.slide.answerkey input:checked + label.correct,
.slide.answerkey input:checked + option.correct {
  color: #00AA00; /* green */
}
.slide.answerkey input:checked + option,
.slide.answerkey input:checked + label.incorrect,
.slide.answerkey input + label.correct,
.slide.answerkey input + option.correct {
  color: #e74c3c; /* red */
}


/*****************
 ***   modals   ***
 *****************/
.ui-dialog.ui-widget-content {
  border: none;
  box-shadow:0 0 25px rgba(0,0,0,0.35);
}

.ui-dialog .links,
#settings-modal .description,
.ui-dialog select {
  font-size: .75em;
}

.ui-dialog .ui-dialog-buttonpane{
  border: none;
  padding: 0;
  margin-top: 0;
}

.ui-dialog .ui-widget-header {
  border: none;
  background-color: transparent;
}

.ui-dialog .setting {
  margin-bottom: 8px;
}

.ui-dialog .setting input {
  margin-left: 1em;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: none;
  padding-left: 1em;
}

.ui-dialog .ui-button {
  font-size: .8em;
}

.ui-dialog .links {
  text-align: right;
}

.ui-dialog p,
.ui-dialog select {
  margin-left: 30px;
}

.ui-dialog p {
  margin-top: .5em;
  margin-bottom: .5em;
}

.no-close .ui-dialog-titlebar-close {
  display: none;
}

#help-modal {
  display: none;
  font-size: .9em;
}

#help-modal .ui-dialog .ui-dialog-title {
  font-size: 1em;
}

#help div {
  padding: 6px 0;
}

  #help div + div {
    border-top: 1px solid #eee;
  }

  #help .description,
  #help .action,
  #help .hotkeys {
    display: inline-block;
    vertical-align: middle;
  }

  #help .description {
    width: 30%;
  }

  #help .action {
    width: 15%;
    color: gray;
  }

  #help .hotkeys {
    width: 25%;
  }

  #help .hotkeys .key {
    border: 1px solid #ccc;
    background-color: #dfdfdf;
    border-radius: 0.25em;
    padding: 0.15em 0.5em;
    margin: 0.25em;
  }

 /*****************
  *** end modal ***
  *****************/

/**********************************
 ***   supplemental materials   ***
 **********************************/
#slides.supplemental .slide {
  max-height: none !important;
  height: auto;
  padding: 0.5em;
  width: 8.1in;
}

.supplemental h1,
.supplemental h2,
    .supplemental h3,
    .supplemental h4,
    .supplemental h5,
    .supplemental h6 { text-align: left; }

.supplemental img { max-width: 7in; }

.supplemental ul { list-style: disc; margin-left: 1.25em !important; padding-left: inherit !important; }

/* downloads page */
#download {
  max-width: 90%;
  margin: 0 auto;
}

#download h4 {
  margin-left: .5em;
}

/**********************
 ***   stats page   ***
 **********************/

/* apply some nifty rounding styles to the row */
#stats div.row {
  position: relative;
  margin: 0.25em 1em;
  padding: 0.1em;
  background-color: #dfdfdf;
  color: #222;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  cursor: default;
}
/* and to the bar inside the row */
#stats div.bar {
  height: 1.25em;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}
/* position the label to the top left and time to the top right */
#stats div.row span.label {
  position: absolute;
  top: 0.15em;
  left: 0.25em;
}
#stats div.time {
  position: absolute;
  top: 0.15em;
  right: 0.25em;
}

/* Add the disclosure triangles */
#stats div.row:before {
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  font-size: 1.25em;
  text-decoration: inherit;
}
  #stats div.row.top:hover:before {
    position: absolute;
    content: "\f0da"; /* fa-caret-right */
    margin-left: -0.5em;
  }
  #stats div.row.top.active:before {
    position: absolute;
    content: "\f0d7"; /* fa-caret-down */
    margin-left: -0.75em;
  }

#stats h2 {
  border-bottom: 1px solid #eee;
}
#stats #viewers,
#stats #elapsed {
  text-align: center;
  min-height: 2em;
}
#stats #viewers.zoomline,
#stats #elapsed.zoomline {
  text-align: left;
}
#stats .zoomline .col.current,
#stats .zoomline .col.current .inner {
  background-color: #ffb105;
  min-width: 5px;
}
#stats .zoomline .col.current:hover {
  min-width: 10px;
  background: #ffb105;
  background: linear-gradient(#efefec, #ffb105);
}
#stats .zoomline .col.current:hover .inner,
#stats .zoomline .col.current .inner:hover {
  background-color: #f3708d;
}


#stats #stray,
#stats #idle {
  display: none;
  width: 75%;
  margin: 1em auto;
  padding: 0.5em;
  border: 1px solid #ccc;
}
  #stats #stray {
    background-color: #8e030a;
  }
  #stats #idle {
    background-color: #3a64c1;
  }

/* style all three boxes */
#stats div#least,
#stats div#most,
#stats div#all {
  width: 45%;
  border: 1px solid black;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  -khtml-border-radius: 1em;
  border-radius: 1em;
}

/* least box */
#stats div#least {
  float: left;
  margin-left: 3%;}
#stats div#least div.bar {
  background: #f5f56f;
}

/* most box */
#stats div#most {
  float: right;
  margin-right: 3%;
}
#stats div#most div.bar {
  background: #f45f5f;
}

/* listing of all stats */
#stats div#all {
  clear: both;
  position: relative;
  top: 3em;
  margin: 0 3% 5em 3%;
  width: 94%;
}
#stats div#all div.bar {
  background: #66b366;
  border-color: #000;
}

/* detail view */
#stats div#all div.detail {
  margin: 0 5em 0 1em;
}
#stats div#all div.detail div.bar {
  background: #8484dd;
}
/**********************
 *** end stats page ***
 **********************/

 /**********************
 ***    Callouts    ***
 **********************/

.callout {
  padding: 1em;
  position: relative;
  line-height: 1.2em;
  border: 1px solid #222;
  border-radius: 4px;
  background-color: transparent; /* because there's a warning class with a red background */
}

  .callout:before {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 2em;
    text-decoration: inherit;
    position: absolute;
    left: 0.3em;
  }
  .callout:after {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 1.5em;
    text-decoration: inherit;
    position: absolute;
    left: 0.5em;
    top: 0.65em;
    color: #fff;
  }

  .callout.info,
  .callout.warning,
  .callout.question,
  .callout.exercise,
  .callout.stop,
  .callout.thumbsup,
  .callout.conversation,
  .callout.glossary,
  .callout.terminal {
    padding-left: 3em;
  }

  .callout.info:before         { content: "\f05a"; } /* fa-info-circle */
  .callout.warning:before      { content: "\f071"; } /* fa-exclamation-triangle */
  .callout.question:before     { content: "\f059"; } /* fa-question-circle */
  .callout.exercise:before     { content: "\f41b"; } /* fa-pencil-square */
  .callout.stop:before         { content: "\f05e"; } /* fa-ban */
  .callout.thumbsup:before     { content: "\f164"; } /* fa-thumbs-up */
  .callout.conversation:before { content: "\f0e5"; } /* fa-comment */
  .callout.glossary:before     { content: "\f02d"; } /* fa-book */

  .callout.terminal:before     { content: "\f0c8"; } /* fa-square */
  .callout.terminal:after      { content: "\f120"; } /* fa-terminal */


/* callouts used on error pages */
.error .callout {
  padding-left: 4em;
  margin: 1em;
  background-color: #ffe0e0;
  padding-bottom: 0;
}
  .error .callout p:first-of-type {
    margin-top: 0;
  }

/**********************
***  end callouts   ***
**********************/
.callout.glossary a.label,
ul.glossary.terms a.label {
  display: block;
  font-weight: 600;
  text-decoration: none;
}
ul.glossary.terms a.return {
  text-decoration: none;
  padding-right: 3em;
}
a.term {
  text-decoration: none;
}
a.term:after {
  font-family: FontAwesome;
  font-size: 0.8em;
  vertical-align: super;
  content: "\f27b";
  text-decoration: none;/* fa-commenting-o */
}


/**********************
***  glossary       ***
**********************/

/**************************
*** activity indicators ***
***************************/
.slide.activity .activityToggle {
  position: absolute;
  bottom: 1em;
  right: 1em;
}

/* Render hidden headlines so that when we print with wkhtmltopdf, we can use section
   titles for page headers.  it would make sense to put this in the print section, but
   then you get a weird double headline when previewing a print in the browser. */

/* make this invisible as possible, while still rendering so that wkhtmltopdf doesn't ignore it */
h1.section_title {
  color: transparent !important;
  opacity: 0 !important;
  font-size: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* because the above section headers are h1 elements rendered only in print */
.content:not(.cover) h1:not(.section_title) {
  border-bottom: 2px solid #222;
}

/**** end hidden headlines ****/

/* Tiny mobile devices. Larger devices scale automatically. */
@media screen and (max-width: 320px)
{
  html,body,#footer {
    min-width: 320px !important;
    max-width: 320px !important;
    width: 320px !important;
    margin: 0;
    padding: 0;
  }
  body > #preso {
    transform: scale(.32);
    transform-origin: 0 0;
    width: 2928px;
  }
  #preso .slide {
    width: 100%;
    margin: 0;
    padding: 0;
  }
}
/* show notes, etc. when in portrait mode with plenty of room for it. */
@media screen and (max-width: 1024px) and (orientation:portrait) {
  body { overflow: auto; }

  /* Styling to make the handout notes appear in the printed output. */
  #notes {
    display: block;
    clear: both;
    margin: 1em 1em 4em 1em;
    font-size: 9pt;
    border-top: 2px dashed #999;
  }
}

/* Show button navigation on touch screen devices. */
@media screen and (pointer: coarse) {
  #buttonNav {
    display: block;
    position: fixed;
    bottom: 0;
    width: 100%;
  }

  #buttonNav div {
    display: inline-block;
    width: 50%;
    line-height: 3em;
    background-color: #337ab7;
    color: #fff;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
  }
}

/** Print **/
@media print {
   #preso,
  .slide:not(.center) {
    max-height: inherit !important;
    height: 100% !important; /* because otherwise handout notes are cutoff by the inline height set on the slide */
  }

  /* prevent large images from running off the page */
  .content img {
    max-width: 7in;
    max-height: 9.5in;
  }

  #footer {
    background: #eee;
    padding: 2px;
    width: 590px;
    height: 20  px;
    margin-left:auto;
    margin-right:auto;
  }

  /* keep the activity toggle from showing in printed output */
  .slide.activity .activityToggle {
    display: none;
  }

  /* Styling to make the handout notes appear in the printed output. */
  .notes-section {
    display: block;
    clear: both;
    margin-top: 1em;
    border-top: 2px dashed #999;
  }

  .notes-section .callout {
    margin-right: 1em;
    margin-left: 1em;
  }

  .notes-section.notes .personal {
    float: right;
    border-left: 2px solid #999;
    border-bottom: 2px solid #999;
    border-radius: 0 0 0 0.5em;
    padding: 0.1em 0 0.25em 0.25em;
    margin: 0 0 1em 1em;
    max-width: 35%;
  }

  .notes-section.notes .personal h1 {
    margin-top: 0;
    border-bottom: 1px solid #ccc;
    font-size: 1.5em;
  }

  /* page break styling */
  .pagebreak {
    page-break-after: always;
    font-size: small;
    font-style: italic;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
  }

}

 /***********************
 ***    Animations    ***
 ***********************/

@-webkit-keyframes spin {
    from   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    to {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    from   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    to {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

/* end animations */