/* experimental slide stylesheet for 1366x768: notes on rightmost 342 px */

#navigation {
  /* Comment out this next line to make navigation controls visible: */
  display: none;
  font-size: 12px;
  z-index: 99;
  position: absolute; top: -10px; right: 1em;
}

.greyed { color: #899; }
.greystrike { color: #678; text-decoration: line-through; }

body {
  background: white url(pix/vfade.jpg) repeat-x;
  margin-top: 0em;
  font-size: 44px;
  line-height: 1.4em;
  /*padding-bottom: 0;
  /*margin: 0px 0px 0px 0px;*/
}

#page {
  width: 1024px;
  height: 762px;   /* !768 because of firefox residual top bar */
  position: absolute; left: 0px; top: 0px;
  font-family: dejavu sans,arial,sans-serif;
  outline: #ddf solid thin;
}

#oldpage {
  width: 1014px;
  height: 753px;
  font-family: dejavu sans,arial,sans-serif;
  /*margin-right: 372px;
  padding-left: 0;
  margin-bottom: 0;
  offset: -8;*/

  /* Box to show the area that will show up on the projector: */
  border: 1px #eef solid;
  outline: red solid thin;
  /* Ignore the 8 pixel space to the left of the box.
   * Firebug labels this as "offset" but I have no idea how to
   * make #page use that space.
   */
}

#notes {
  position: absolute; left: 1035px;
  top: 40px;
  width: 330px; /* Need to set a maximum, and clip if it doesn't fit! */
  font-size: 24px;
  line-height: 1.4em;
  font-family: sans-serif;
}

#content {
  margin-left: 140px;
  margin-top: 70px;
  width: 800px;
}

#content.wide {
  margin-left: 80px;
  width: 880px;
}

table { font-size: 40px; }

/* this doesn't work and I have no idea why!
 * Changing the font in the previous rule works fine.
 */
table.small { font-size: 32px; }

th { text-align: left; }
td { padding: .8em .3em; }

h1 {
  margin-left: 1em;
  margin-top: 1em;
  margin-bottom: .5em;
  margin-right: 2px;
  font-size: 1.3em;
}

.title {
  line-height: 1.1em;
  color: #800;
}

.yellow { color: yellow;
/*
background: #666666;
opacity:.65;
filter:alpha(opacity=65);
-moz-opacity:.65;
*/
 }

.bigtitle {
  margin-top: .5em;
  margin-left: 1.5em;
  line-height: 1.1em;
  /*text-align: center;*/
  font-size: 2.0em;
  color: #800;
}

h2 {
  font-size: 1.0em;
}

ul, ol { line-height: 1.3em; }

ul {
  list-style-image: url("pix/darkling-bullet.png");
}

.nobullets {
  list-style-type: none;
  list-style-image: none;
}

ul li { margin-top: 1.4em; margin-bottom: .6em; }

ol li { margin-top: 1.5em; margin-bottom: .6em; }

ul ul li { margin-top: 0; margin-bottom: .6em; }

.roomylist li {
  line-height: 2.2em;
}

.squinchedlist li {
  margin-top: 0em;
  margin-bottom: 0em;
}

ul ul, ol ul {
  font-size: .8em;
  line-height: 1.25em;
  list-style-image: url("pix/cicada.gif");
}

dt { font-weight: bold; }

dd { margin-bottom: .8em; }

#points li {
  visibility: hidden;
}

code { background: #eed; color: #a00; font-size: .9em; }

pre {
  font-size: .72em;
  line-height: 1.3em;
  background: #fed;
  padding: .25em;
  border: 1px inset #fdd;
  white-space: pre-wrap;
}

.smallpre { font-size: .6em; }
.smallerpre { font-size: .5em; }
.scrolledpre {
  font-size: .5em;
  overflow: scroll !important;
  white-space: pre;
  height: 555px;
  margin-top: -45px;
  margin-left: -75px;
}

pre .em { color: #c60; font-weight: bold; }
pre b { color: #158; background: #fee; font-weight: bold; font-size: 1.1em; /* text-decoration: underline; */}

.newcode { color: #a00; font-size: 1.1em; }

.center {
  margin-right: 140px;
  text-align: center;
}

#picture {
  text-align: center;
}

.note {
  font-size: .8em;
  font-style: italic;
  color: #f0a;
  /* This doesn't work and I hate CSS: */
  margin-bottom: 30px !important;
}

.url {
  font-size: .9em;
  font-style: italic;
  color: #00f;
}

.longurl {
  font-size: .5em;
  font-style: italic;
  color: #00f;
}

strong { font-weight: bold; text-decoration: underline; }