html {
  background-color: #ddd; /* Opera 10.x doesn't support CSS gradients */
  background:      linear-gradient(top, black 0%, #eaeaea 50%, white 100%);
  background:   -o-linear-gradient(top, black 0%, #eaeaea 50%, white 100%);
  background: -moz-linear-gradient(top, black 0%, #eaeaea 50%, white 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(black), to(white), color-stop(50%, #eaeaea));
  min-height: 100%;
  overflow: hidden;
}
body {
  /*
  width: 80%;
  max-width: 800px;
  */
  position: relative;
  width: 900px;
  height: 700px;
  margin: 30px auto;

  font-family: Verdana, Arial, sans-serif;
  font-size: 1.8em;
  /*
  background-color: white;
  clear: both;
  border: 1px solid #aaa;
  border-radius         : 15px;
  -o-border-radius      : 15px;
  -moz-border-radius    : 15px;
  -webkit-border-radius : 15px;
  box-shadow         : 0px 1px 10px #888;
  -o-box-shadow      : 0px 1px 10px #888;
  -moz-box-shadow    : 0px 1px 10px #888;
  -webkit-box-shadow : 0px 1px 10px #888;
  */
}
dt, strong {
  color: brown;
}
p.strong a {
  color: brown !important;
}
a img {
  border: none;
}
div#slideshow {
  position: relative;
  /*overflow-x: hidden;*/
  /*overflow: hidden;*/
  width: 800px;
  height: 600px;
  padding: 50px;

  /*
  margin: 30px auto;
  width: 80%;
  max-width: 800px;
  */
}
div#slideshow > * {
  position: absolute;
  /*top: 50px;*/
  /*left: 50px;*/
  top: 0;
  left: 0;
  width: 800px;
  height: 600px;
  padding: 50px;
  margin: 0;

  background-color: white;
  border: 1px solid #aaa;
  border-radius         : 15px;
  -o-border-radius      : 15px;
  -moz-border-radius    : 15px;
  -webkit-border-radius : 15px;
  box-shadow         : 0px 1px 10px #888;
  -o-box-shadow      : 0px 1px 10px #888;
  -moz-box-shadow    : 0px 1px 10px #888;
  -webkit-box-shadow : 0px 1px 10px #888;
}
div#slideshow > pre {
  /*top: 0px;*/
  /*left: 0px;*/
  /*width: 860px;*/
  /*height: 680px;*/
  /*margin: 0;*/
  /*padding: 10px;*/
  padding-left: 30px;
  border-left: 20px solid #ddf;
  background-color: #eee;
  /* max-height: 20em; */
  overflow: auto;
  /*font-size: 0.6em;*/
  font-size: 16px;
  /*font-size: 22px;*/
}
div#slideshow > pre.small {
  font-size: 16px !important;
}
h2 {
  float: right;
  min-width: 80%;
  margin: 0 -70px 10px 100px;;
  /*margin: 0 10px 10px 100px;;*/
  padding: 0 1em;
  text-align: center;
  /*text-align: right;*/
  line-height: 150%;
  color: white;
  /*color: black;*/
  /*border-top: 3px solid brown;*/
  /*border-bottom: 3px solid brown;*/
  background: #743; /* Opera 10.x doesn't support CSS gradients */
  background:      linear-gradient(left, black 5%, #fa6e12);
  background:   -o-linear-gradient(left, black 5%, #fa6e12);
  background: -moz-linear-gradient(left, black 5%, #fa6e12);
  background: -webkit-gradient(linear, left center, right center, from(black), to(#fa6e12));

  /*text-shadow         : -2px 1px 10px #888;*/
  /*-o-text-shadow      : -2px 1px 10px #888;*/
  /*-moz-text-shadow    : -2px 1px 10px #888;*/
  /*-webkit-text-shadow : -2px 1px 10px #888;*/
  text-shadow         : 1px 1px 1px gray;
  -o-text-shadow      : 1px 1px 1px gray;
  -moz-text-shadow    : 1px 1px 1px gray;
  -webkit-text-shadow : 1px 1px 1px gray;
  box-shadow         : -2px 1px 10px #888;
  -o-box-shadow      : -2px 1px 10px #888;
  -moz-box-shadow    : -2px 1px 10px #888;
  -webkit-box-shadow : -2px 1px 10px #888;
  /*border-radius         : 0px 10px 10px 100px;*/
  /*-o-border-radius      : 0px 10px 10px 100px;*/
  /*-moz-border-radius    : 0px 10px 10px 100px;*/
  /*-webkit-border-radius : 0px 10px 10px 100px;*/
  border-radius         : 10px;
  -o-border-radius      : 10px;
  -moz-border-radius    : 10px;
  -webkit-border-radius : 10px;
}
h2 + * {
  clear: both;
  padding-top: 1em;
}
div#slideshow .strong {
  color: brown;
  text-align: center;
  font-weight: bold;
}
h3 {
  color: brown;
  margin-top: 2em;
  font-family: Georgia;
  font-size: 1.2em;
  border-bottom: 1px inset brown;
}
h4 {
  font-size: 1em;
  border-bottom: 1px dashed #cccccc;
}
blockquote {
  margin-left: 1em;
  padding: 0.5em 1em;
  background-color: #eee;
  font-style: italic;
  box-shadow         : 0px 1px 10px #888;
  -o-box-shadow      : 0px 1px 10px #888;
  -moz-box-shadow    : 0px 1px 10px #888;
  -webkit-box-shadow : 0px 1px 10px #888;
}

/* nested/list blocks */
li, dt, dd {
  margin-bottom: 15px;
}
li p {
  font-size: smaller;
  margin-top: 5px;
}
li li {
  font-size: smaller !important;
  margin-top: 2px;
  margin-left: 15px;
}

/* section headers */
header p {
  color: brown;
  text-align: center;
  margin-bottom: 40px;
  margin-top: 0;
  font-size: 1.2em;
  font-weight: bold;
  text-shadow         : 1px 1px 1px gray;
  -o-text-shadow      : 1px 1px 1px gray;
  -moz-text-shadow    : 1px 1px 1px gray;
  -webkit-text-shadow : 1px 1px 1px gray;
}
header ol {
  width: 50%;
  margin: 0 auto;
}
header li,
header li a {
  color: #aaf !important;
}
header li.active,
header li.active a {
  color: navy !important;
}
footer {
  text-align: center;
  font-style: greater;
}

/* demo blocks */
.highlight {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  padding: 1em 5em;
  background-color: #fed;
  border: 1px solid #fdd;
  border-radius         : 5px;
  -o-border-radius      : 5px;
  -moz-border-radius    : 5px;
  -webkit-border-radius : 5px;
  box-shadow         : 0px 1px 10px #888;
  -o-box-shadow      : 0px 1px 10px #888;
  -moz-box-shadow    : 0px 1px 10px #888;
  -webkit-box-shadow : 0px 1px 10px #888;
  font-size: 16px;
}

/* navigation menu */
nav {
  position: absolute;
  bottom: 1em;
  right: 1em;
  z-index: 255;
}
nav button {
  display: block;
  cursor: pointer;
  float: left;
  /* min-width: 2em; */ /* bugs on IE7 */
  text-align: center;
  background-color: #ddf;
  border: 1px solid #cce;
  margin: 1px;
  padding: 1px 4px;
  user-select         : none;
  -o-user-select      : none;
  -moz-user-select    : none;
  -webkit-user-select : none;
}
nav button:hover {
  background-color: #ccf;
}
nav button:first-child {
  border-top-left-radius         : 1em;
  -o-border-top-left-radius      : 1em;
  -moz-border-radius-topleft     : 1em;
  -webkit-border-top-left-radius : 1em;
  border-bottom-left-radius         : 1em;
  -o-border-bottom-left-radius      : 1em;
  -moz-border-radius-bottomleft     : 1em;
  -webkit-border-bottom-left-radius : 1em;
}
nav button:last-child {
  border-top-right-radius         : 1em;
  -o-border-top-right-radius      : 1em;
  -moz-border-radius-topright     : 1em;
  -webkit-border-top-right-radius : 1em;
  border-bottom-right-radius         : 1em;
  -o-border-bottom-right-radius      : 1em;
  -moz-border-radius-bottomright     : 1em;
  -webkit-border-bottom-right-radius : 1em;
}

nav ol {
  position: absolute;
  height: 500px;
  width: 200px;
  left: -20px;
  bottom: 0;
  background-color: #ddf;
  border: 1px solid #cce;
  overflow: auto;
}
nav ol li {
  font-size: 12px;
  margin: 1px;
}
nav ol li a {
  color: navy !important;
}
nav ol li#active a {
  font-weight: bold;
  color: brown !important;
}