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

  #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);
  }

  #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;
  }
}

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

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

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

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

/* 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 {
    list-style: disc;
}
.content > ul {
	font-size: 3em;
	text-align: left;
	padding-left: 40px;
}
.content > 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%; }

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

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

.notes, .handouts, .instructor, .solguide { display: none }
.hidden { position:absolute; top:0; left:-9999px; width:1px; height:1px; overflow:hidden; }
.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 {
    background: #9f9;
    position: absolute;
    right: 80px;
    display: none;
    z-index: 2147483647; /* max, see http://www.puidokas.com/max-z-index/ */
}
#help table tr td.key {
    text-align: right;
    border-right: 2px solid #8b8;
    padding-right: 4px;
    font-weight: bold;
}


#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.tools button#editSlide {
  width: 90%%;
  margin: auto 5%;
}

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

.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, #stylemenu {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 50px;
  z-index: 2147483647; /* max, see http://www.puidokas.com/max-z-index/ */
}

.code .c { color: #999988; font-style: italic } /* Comment */
.code .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.code .k { font-weight: bold } /* Keyword */
.code .o { font-weight: bold } /* Operator */
.code .cm { color: #999988; font-style: italic } /* Comment.Multiline */
.code .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
.code .c1 { color: #999988; font-style: italic } /* Comment.Single */
.code .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
.code .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.code .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
.code .ge { font-style: italic } /* Generic.Emph */
.code .gr { color: #aa0000 } /* Generic.Error */
.code .gh { color: #999999 } /* Generic.Heading */
.code .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.code .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
.code .go { color: #888888 } /* Generic.Output */
.code .gp { color: #555555 } /* Generic.Prompt */
.code .gs { font-weight: bold } /* Generic.Strong */
.code .gu { color: #aaaaaa } /* Generic.Subheading */
.code .gt { color: #aa0000 } /* Generic.Traceback */
.code .kc { font-weight: bold } /* Keyword.Constant */
.code .kd { font-weight: bold } /* Keyword.Declaration */
.code .kp { font-weight: bold } /* Keyword.Pseudo */
.code .kr { font-weight: bold } /* Keyword.Reserved */
.code .kt { color: #445588; font-weight: bold } /* Keyword.Type */
.code .m { color: #009999 } /* Literal.Number */
.code .s { color: #d14 } /* Literal.String */
.code .na { color: #008080 } /* Name.Attribute */
.code .nb { color: #0086B3 } /* Name.Builtin */
.code .nc { color: #445588; font-weight: bold } /* Name.Class */
.code .no { color: #008080 } /* Name.Constant */
.code .ni { color: #800080 } /* Name.Entity */
.code .ne { color: #990000; font-weight: bold } /* Name.Exception */
.code .nf { color: #990000; font-weight: bold } /* Name.Function */
.code .nn { color: #555555 } /* Name.Namespace */
.code .nt { color: #000080 } /* Name.Tag */
.code .nv { color: #008080 } /* Name.Variable */
.code .ow { font-weight: bold } /* Operator.Word */
.code .w { color: #bbbbbb } /* Text.Whitespace */
.code .mf { color: #009999 } /* Literal.Number.Float */
.code .mh { color: #009999 } /* Literal.Number.Hex */
.code .mi { color: #009999 } /* Literal.Number.Integer */
.code .mo { color: #009999 } /* Literal.Number.Oct */
.code .sb { color: #d14 } /* Literal.String.Backtick */
.code .sc { color: #d14 } /* Literal.String.Char */
.code .sd { color: #d14 } /* Literal.String.Doc */
.code .s2 { color: #d14 } /* Literal.String.Double */
.code .se { color: #d14 } /* Literal.String.Escape */
.code .sh { color: #d14 } /* Literal.String.Heredoc */
.code .si { color: #d14 } /* Literal.String.Interpol */
.code .sx { color: #d14 } /* Literal.String.Other */
.code .sr { color: #009926 } /* Literal.String.Regex */
.code .s1 { color: #d14 } /* Literal.String.Single */
.code .ss { color: #990073 } /* Literal.String.Symbol */
.code .bp { color: #999999 } /* Name.Builtin.Pseudo */
.code .vc { color: #008080 } /* Name.Variable.Class */
.code .vg { color: #008080 } /* Name.Variable.Global */
.code .vi { color: #008080 } /* Name.Variable.Instance */
.code .il { color: #009999 } /* Literal.Number.Integer.Long */

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

.executing {
  color:#0000FF !important;
  background-color: yellow;
}

.executing:hover {
  cursor: pointer;
}

#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);
}

/**********************************
 ***   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;
}
#download h1 {
  font-size: 3em;
}
ul#downloads {
    margin-left:  20%;
    font-size: large;
    list-style-type: disc;
}
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 ***
 **********************/

/**********************
 ** presenter popups **
 **********************/
.tipsy-inner { text-align: left; max-width: 500px; }
.tipsy-inner h1 { font-size: 1.5em; }
.tipsy-inner h2 { font-size: 1.35em; }
.tipsy-inner h3 { font-size: 1.25em; }
.tipsy-inner a { color: #0d8dfd; }
.tipsy-inner a:hover { color: #04ffff; }

.tipsy-inner p.newpage { text-align: right; padding-bottom: 0.25em; }
.tipsy-inner p.newpage a {
  color: white;
  padding: 0.25em;
  text-decoration: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid black;
}
.tipsy-inner p.newpage a:hover {
  font-weight: bold;
  background-color: #222;
  border: 1px solid white;
}


.tipsy-inner #stats { min-width: 450px; }
.tipsy-inner #stats .row { color: black; }
.tipsy-inner #stats #all { max-height: 325px; overflow: auto; }

.tipsy-inner ul#downloads { font-size: 1em; margin-left: 0.25em; }
/************************
 * end presenter popups *
 ************************/

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

  #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;
  }
}