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

  body {
      font-size: 100%;
      font-family: "Gill Sans", Helvetica, Arial, sans-serif;
      background:#333;
      overflow:hidden;
      margin:0;
      padding:0;
  }

  /* UI elements */
  #topbar,
  #sidebar,
  #statusbar,
  #bottom,
  #feedbackSidebar {
    font-family: 'Open Sans', 'Lucida Grande', helvetica, arial, sans-serif;
    font-size: 0.55em;
  }

  #preso, .slide {
      background: #fff;
      width: 1024px;
      height: 768px;
      margin-left:auto;
      margin-right:auto;
      overflow:hidden;
      -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);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
  }

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

  #footer {
      background: rgba(221,221,221,0.75);
      color:#333;
      padding: 2px 5px;
      width: 1005px;
      height: 20px;
      line-height:20px;
      font-size:14px;
      position:relative;
      top:-24px;
      margin:0 auto;
      -webkit-border-top-left-radius: 3px;
      -webkit-border-top-right-radius: 3px;
      -moz-border-radius-topleft: 3px;
      -moz-border-radius-topright: 3px;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
      z-index: 2147483647; /* max, see http://www.puidokas.com/max-z-index/ */
      display: none;
  }
  #followMode {
    display: none;
  }
  #pauseScreen {
      background: rgba(0, 0, 0, 0.85);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      display: none;
      margin: auto;
      color: white;
      font-size: 2em;
      padding: 1em;
      z-index: 2147483647; /* max, see http://www.puidokas.com/max-z-index/ */
      text-align: center;
  }
  .content {
    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%);
  }

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

.slide .center {
  text-align: center;
}

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

.content > pre,
.content > form > pre {
    font-size: 300%;
}
.content > blockquote,
.content > form > blockquote {
    font-size: 250%;
    margin: 2em;
}

.center img {
    display:block;
    margin-left:auto;
    margin-right:auto;
}

/* numbered lists are numbered */
.content ol {
    margin-left: 40px;
    font-size: 3em;
    text-align: left;
    padding-left: 40px;
}
.content ol > li {
    list-style: decimal;
    display: list-item;
}


/* ironically, normal lists have bullets and 'bullets' lists don't */
.content > ul,
.content > form > ul {
    list-style: disc;
    font-size: 3em;
    text-align: left;
    padding-left: 40px;
}
.content > ul > li,
.content > form > ul > li {
    padding: .5em;
    margin-left: 40px;
}

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

/* nested lists get their bullets back */
.content ul ul,
.content ol ul {
  list-style: disc;
  margin: 10px 10px;
  padding-left: 40px;
  text-align: left;
}

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

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

.commandline pre {
    font-size: 2em;
}

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

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

.command h1 {
    white-space: pre;
    font-family: monospace;
    font-size: 3em;
}

.code {
    white-space: pre;
    font-family: monospace;
}

.subsection h1 {
    background: #008;
    color: #fff;
    padding: .25em;
}

.small {
    font-size: 80%;
}

.smaller {
    font-size: 70%;
}

h1,h2,h3 { font-weight: normal; text-align: center; margin: 0.5em 0; }
h1 { font-size: 5em; }
h2 { font-size: 3em; }
h3 { font-size: 2em; }

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

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

#navigation.hidden,
#stylepicker.hidden {
  position:absolute; top:0; left:-9999px; width:1px; height:1px; overflow:hidden;
}

.notes, .handouts, .instructor, .solguide { display: none }
.buttonNav { display: none }
.offscreen { position:absolute; top:0; left:-9999px; overflow:hidden; }
#debugInfo { margin-left: 30px; }
#notesInfo { margin-left: 30px; display: none }
#slideFilename {
  position: absolute;
  right: 5px;
  bottom: 0px;
  height: 23px;
  padding-left: 10px;
  background: #ccc;
  z-index: 2147483647;
}
img#disconnected {
  float: right;
  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;
}

#help {
  display: none;
  position:absolute;
  top: 5%;
  left: 25%;
  width: 50%;
  max-height: 90%;
  z-index: 2147483647;
  padding: 0 16px 16px 16px;
  border-radius: 4px;
  -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);
  background-color: #fff;
}

  #help div {
    padding: 6px 0;
  }

    #help h1 {
      font-size: 1.25em;
      border-bottom: 2px solid #ccc;
    }

    #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%;
      font-size: 0.75em;
      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;
    }

#presenterPopup {
  display: none;
  position: absolute;
  z-index: 2147483647;
  top: 24px;
  left: 25%;
  max-height: 80%;
  width: 50%;
  border-radius: 0 0 .5em .5em;
  border-bottom: 8px solid #222222;
  font-size: .65em;
  background-color: #222222;
  overflow: auto;
}

  #presenterPopup h1,
  #presenterPopup h3 {
   font-size: 2em;
   color: #ffffff;
  }

  #presenterPopup a {
    margin-left: 12px;
    color: #ffffff;
  }

  #presenterPopup ul#downloads {
    margin-left: 0;
    list-style-type: none;
    font-size: 1.25em;
  }

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

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

.content.small table {
    font-size: 1.6em;
    width: 90%;
}
.content.smaller table {
    font-size: 1.5em;
    width: 95%;
}

.content table th {
    border-bottom: 2px solid #ccc;
    padding: 0.5em;
    font-weight: bold;
}

.content table tr td {
    border-right: 1px solid #eee;
    border-bottom: 1px solid #efefef;
    text-align: center;
    padding: 0.5em;
}

.content table tr td:last-child {
    border-right: none;
}

.content table li {
    list-style-type: disc;
}


/**********************************
 ***      Sidebar styling       ***
 **********************************/

#feedbackWrapper {
  float: left;
  height: 100%;
  position: fixed;
  background-color: #dfdfdf;
  opacity: 0.98;
  z-index: 2147483647; /* max, see http://www.puidokas.com/max-z-index/ */
}

#feedbackSidebar {
  height: 100%;
  width: 200px;
  background: transparent url(grippy-close.png) no-repeat right center;
  display: none;
}

#feedbackSidebar img#feedbackActivity {
  position: absolute;
  right: 3px;
  top: 3px;
  display: none;
}

#feedbackHandle {
  height: 100%;
  width: 9px;
  background: transparent url(grippy.png) no-repeat center;
}

#feedbackSidebar div.row {
  text-align: center;
  margin: 5px 0;
  padding: 5px 0;
}

#feedbackWrapper h4 {
  text-align: left;
  margin-left: 3px;
}
#feedbackSidebar span.buttonWrapper {
  height: 60px;
  width: 85px;
  padding: 5px;
  display: inline-block;
}
#feedbackSidebar span.buttonWrapper button {
  margin: 44px auto 0 auto;
}

#feedbackSidebar span.buttonWrapper.slower {
  background: transparent url(slow.png) no-repeat center top;
}

#feedbackSidebar span.buttonWrapper.faster {
  background: transparent url(fast.png) no-repeat center top;
}

#feedbackSidebar textarea {
  height: 85px;
  width: 85%;
}

#feedbackSidebar #disclaimer {
  position: absolute;
  bottom: 25px;
  width: 100%;
  text-align: center;
}

#feedbackSidebar div.row.tools {
  position: absolute;
  bottom: 30px;
  width: 100%;
  text-align: center;
}

#feedbackSidebar div.row > button {
  width: 90%%;
  margin: auto 5%;
}

.fg-menu-container {
  z-index: 2147483647; /* max, see http://www.puidokas.com/max-z-index/ */
  font-size: 0.8em;
}

.fg-button { clear:left; margin:0 4px 40px 20px; padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
a.fg-button { float:left; }
.fg-button-icon-right { padding-right: 2.1em; }
.fg-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; }

.fg-button.ui-state-loading .ui-icon { background: url(spinner_bar.gif) no-repeat 0 0; }

#navmenu {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 50px;
  font-size: 0.8em;
  z-index: 2147483647; /* max, see http://www.puidokas.com/max-z-index/ */
}

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

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

/* Add a Shell "code highlighting" style to resemble the look of a terminal window. */
.content pre.highlight code.language-shell {
  display: block;
  background-color: black;
  color: green;
  border: 2px solid #ddd;
  padding: 0.5em;
  overflow: hidden;
}

/* executable code blocks */
code.execute {
  cursor: context-menu;
  background-image: url(run_code.png);
  background-position: right 5px top 5px;
  background-repeat: no-repeat;
  display: block;
  min-height: 42px;
}

code.executing {
  opacity: 0.5;
  background-image: url(run_code-dim.png);
}

code.executing:hover {
  cursor: wait;
}

#tips, #preshow_timer {
  display:inline;
  background-color:#000;
  color:#fff;
  font-size:3em;
  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         ***
 **********************************/
.content div.form.element {
    text-align: left;
    padding-left: 40px;
}
.content div.form.element label {
  margin-right: 0.5em;
}
.content div.form.element select {
  font-size: 2em;
}
.content div.form.element textarea {
  display: block;
  width: 85%;
}
.content div.form.element ul {
  list-style: disc;
}
.content div.form.element ul > li {
  margin-left: 40px;
}
/* TODO: not sure why the preview window honks things up */
#preview .content div.form.element select {
  font-size: 0.8em;
}
.content div.form.element.warning {
  background-color: #ff7373;
}
.content form div.tools {
  font-size: 2em;
}
.content form div.tools * {
  float: right;
}
.content form div.tools input[type=submit],
.content form div.tools input[type=button] {
  margin: 1em;
}
.content form div.tools input[type=submit].dirty {
  color: red;
}
.content form div.tools input[type=button].display {
  display: none;
}

div.rendered.form {
  border: 1px solid #ccc;
  border-radius: 0.5em;
  margin: 1em;
  padding: 0.25em;
}
div.rendered.form label {
  display: block;
  font-weight: bold;
  border-bottom: 1px solid #999;
}
div.rendered.form .item {
  display: block;
  width: 0;
/*   overflow: hidden; */
  height: 1.25em;
  white-space: nowrap;
}
div.rendered.form .item.barstyle0 { background-color: #bb73bb; }
div.rendered.form .item.barstyle1 { background-color: #59b859; }
div.rendered.form .item.barstyle2 { background-color: #e3742f; }
div.rendered.form .item.barstyle3 { background-color: #4848e8; }
div.rendered.form .item.barstyle4 { background-color: #f75d5d; }

#notes .form.wrapper {
  display: none;
}

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

.supplemental h1 { font-family: 'Arvo'; text-align: left; }
.supplemental h2,
    .supplemental h3,
    .supplemental h4,
    .supplemental h5,
    .supplemental h6 { font-family: 'PT Sans'; text-align: left; }

.supplemental h1 { font-size: 2em; }
.supplemental h2 { font-size: 1.5em; }
.supplemental h3,
    .supplemental h4,
    .supplemental h5,
    .supplemental h6 { font-size: 1.3em; text-align: left; }

.supplemental .content > p,
    .supplemental .content > ol,
    .supplemental .content > ul { font-size: 1em; }

.supplemental img { max-width: 7in; }
.supplemental .content > pre,
  .supplemental .content > pre > code { font-size: 10pt; font-family: 'Courier New', Courier, monospace; }
.supplemental ul { list-style: disc; margin-left: 1.25em !important; padding-left: inherit !important; }
.supplemental .content table { font-size: 0.65em; } /* Ugly hack for tables, which never seem to scale properly. Ick */

/* downloads page */
/* we want scrolls! */
body#download {
  overflow:auto;
  height: auto;
}
body#download h1 {
  font-size: 3em;
}
body#download ul#downloads {
    margin-left:  20%;
    font-size: large;
    list-style-type: disc;
}
body#download ul#downloads li {
    margin: 0.5em;
}

/**********************
 ***   stats page   ***
 **********************/
/* we want scrolls! */
body#stats {
  overflow:auto;
  height: auto;
}

/* apply some nifty rounding styles to the row */
#stats div.row {
  position: relative;
  margin: 0.25em 1em;
  padding: 0.1em;
  background-color: #dfdfdf;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}
/* 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;
}

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

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

/* iPhone */
/* Portrait */
@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 {
    width: 976px;
    zoom: 0.32;
  }
  #preso .slide {
    width: 100%;
    margin: 0;
    padding: 0;
  }

}

/* Landscape */
/*
@media screen and (max-width: 480px)
{
  #preso {
      margin: 0;
      padding: 0;
      width: 480px;
      margin-left:auto;
      margin-right:auto;
  }
  #footer {
      background: #eee;
      margin: 0;
      padding: 2px;
      width: 480px;
      height: 20px;
      margin-left:auto;
      margin-right:auto;
  }
}
*/

/** Print **/
@media print {
  body {
    font-size: 70%;
  }

  #sidebarWrapper,
  #sidebar,
  #sidebarHandle {
    display:none,

  }

  #preso, .slide {
    border: 1px solid #999;
  }

  .slide .center {
    width: 800px;
    height: 600px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }

  #preso, .slide {
      background: #fff;
      width: 800px;
      height: 600px;
      margin-left:auto;
      margin-right:auto;
      overflow:hidden;
  }

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

  pre, code {
    font-family: Monaco, monospace;
  }

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