showoff.css

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

/* iPhone */
/* Portrait */
@media screen and (max-width: 320px)
{
  #preso {
      margin: 0;
      padding: 0;
      width: 320px;
      max-height: 356px;
      margin-left:auto;
      margin-right:auto;
/*      overflow:hidden;*/
  }
  #footer {
      background: #eee;
      margin: 0;
      padding: 2px;
      width: 320px;
      height: 20px;
      margin-left:auto;
      margin-right:auto;
  }
}
/* Landscape */
@media screen and (max-width: 480px)
{
  #preso {
      margin: 0;
      padding: 0;
/*      min-height: 320px;*/
      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;
  }
}

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

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

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

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