/* slide stylesheets for HTMLPreso */

/* Import the appropriate color scheme and screen size */
@import "colors-dark.css";
@import "screen-1024-1366.css";

#navigation {
  /* Comment out the display: none line
     to make navigation controls visible in the upper right corner,
     like for a website:
   */
  display: none;
  font-size: 20px;
  z-index: 99;
  position: absolute; top: -10px; right: 1em;
  z-index: 100;
}

body {
  font-size: 44px;
  line-height: 1.6em;

  /*
  outline: red solid thin;
  */
}

a { text-decoration: none; font-style: italic; font-weight: bold; }

#page {
  position: absolute; left: 0px; top: 0px;
  border: 0; margin: 0; padding: 0;
  outline: #00a solid thin;
  overflow: hidden;
  /* background: url(pix/something.png) no-repeat bottom right; */
}

/* Image on pages like img.html where it's the only thing: */
img#fullpage {
  /* position: absolute; */
  margin: 0; padding: 0; border: 0;
  z-index: 1;
}

/* A similar class of absolute images, for use on other pages */
img.absolute {
  position: absolute;
  margin: 0; padding: 0;
  z-index: -1;
}

/* The table used on img.html */
table.nopadding tbody, table.nopadding tr, table.nopadding td {
  padding: 0; margin: 0; border: 0;
}

/* Figure captions */

figure { border: 0; margin: 0; padding: 0; }
figcaption {
  line-height: 1.2em;
  font-size: .5em;
  font-style: italic;
}
figcaption a { font-weight: normal; }
figcaption.big { font-size: 1.1em; font-style: normal; }

.floatleft { float: left; }
.floatright { float: right; }

#notes {
  font-family: sans-serif;
  font-size: 25px;
  line-height: 1.3em;
  overflow: hidden !important;
}

#notes li { margin: .1em 0em; }
#notes ul { margin: .1em; }
#notes p { margin: .9em 3px; }

#notes .small { line-height: 1em; font-size: 31px; }
#notes .small p { margin: .6em 3px; }

/* Style for hints whereever they will be displayed */
.nexthint {
  color: blue;
  font-style: italic;
  font-size: 27px;
  line-height: 1.4em;
  text-align: right;
  overflow: hidden !important;
}

/* position for nexthint in notes area of main page */
#nexthint {
  position: absolute; right: 0; bottom: 0;
}

/* position for nexthint in separate notes window */
#nexthint_noteswin {
  position: absolute; right: 0; top: 0;
}

#content {
  font-family: dejavu sans,arial,sans-serif;
  font-size: 1em;
}

table { font-size: 1em; }
td, th { margin: 0; }

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

/* H1 titles of various types: */

h1 {
  font-family: Times New Roman, serif;
  margin: .75em 2px .5em 0em;
  font-size: 1.5em;
}

h3 {
  font-family: Times New Roman, serif;
  margin: .75em 2px .5em 1em;
  font-size: 1.4em;
}

.title {
  line-height: 1em;
}

.bigtitle {
  font-size: 3em;
  margin-top: .9em;
  margin-left: 0em;
  line-height: 1.3em;
  text-align: center;
}

.biggertitle {
  font-size: 3.5em;
  margin-top: .9em;
  margin-left: 0em;
  line-height: 1.3em;
  /*text-align: center;*/
}

.sectiontitle {
  text-align: center;
  font-size: 2.0em;
  margin: 2.2em 2em 1em 2.5em;
  line-height: 1.3em;
}

#imgtitle {
  position: absolute; left: 50px; top: 10px;
  text-shadow: 3px 3px 3px #000000;
}

/* Dedicated image credit on the lower right */
#imgcredit {
  position: absolute; right: .5em; bottom: 3px;
  font-style: italic;
  text-shadow: 3px 3px 3px #000000;
  line-height: 1.2em;
}

#imgcredit, #imgcredit a, .imgcredit {
  font-size: 16pt;
}

/* Image credit can also appear somewhere else, like a caption */

/* A style to put on #page when it has a background image;
 * this is in addition to style=url(pix/something.jpg).
 */
.bgimage {
  background-repeat: no-repeat;
/*
  background-attachment: fixed;
  background-position: center;
 */
  background-position: 50% 50%;
}

h2 {
  font-size: 1.0em;
}

em { font-style: italic; font-weight: bold; }

#content ul { list-style-image: url("pix/bulletmoon.gif"); }

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

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

li { margin-top: .8em; margin-bottom: .4em; padding-left: .4em;
     line-height: 1.3em; }

ul.tight li { font-size: .8em; margin-top: 1em; line-height: 1.1em; }

dt { margin-top: .8em; }

dt { font-weight: bold; margin-top: .6em; }

#points li {
  visibility: hidden;
}

code { font-size: .8em;
       padding-left: 25px; padding-right: 25px; }

pre {
  font-size: .58em;
  line-height: 1.3em;
  padding: .2em;
  border: 3px inset white;
  white-space: pre-wrap;  /* For ff2, use -moz-pre-wrap */
}

pre em { font-weight: bold; }
pre b { font-weight: bold; font-size: 1.1em; }

.smallpre {
  margin-top: -30px;
  font-size: .40em;
  line-height: 1.2em;
}

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

blockquote {
    font-family: Georgia, serif;
    position: relative;
    margin: 0.5em;
    padding: 0.5em 2em 0.5em 3em;
}
/* Thanks: http://callmenick.com/post/styling-blockquotes-with-css-pseudo-classes */
blockquote:before {
    font-family: Georgia, serif;
    position: absolute;
    font-size: 6em;
    line-height: 1;
    top: 0;
    left: 0;
    content: "\201C";
}
blockquote:after {
    font-family: Georgia, serif;
    position: absolute;
   /* display: block; don't use this, it raised the quote too high from the bottom - defeated line-height? */
    float:right;
    font-size:6em;
    line-height: 1;
    right:-20px;
    bottom:-0.5em;
    content: "\201D";
}
blockquote footer {
    padding: 0 2em 0 0;
    text-align:right;
}
blockquote cite:before {
    content: "\2013";
}


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

#contentspage {
  width: 1024px;
  height: 762px;   /* !768 because of firefox residual top bar */
  position: absolute; left: 0px; top: 0px;
  outline: #ddf solid thin;
  overflow: scroll !important;
  font-size: 30px;
  line-height: 1.2em;
}

.popup {
  background: #644;
  font-size: .6em;
  border: 2px outset;
  position: absolute;
  -moz-box-shadow: 8px 8px 15px #333;
  -webkit-box-shadow: 8px 8px 15px #333;
  box-shadow: 8px 8px 15px #333;
}

#nextlink {
  border: 2px outset;
  position: absolute !important; right: 1em !important; bottom: 1em !important;
  -moz-box-shadow: 8px 8px 15px #333;
  -webkit-box-shadow: 8px 8px 15px #333;
  box-shadow: 8px 8px 15px #333;
  z-index: 99;
}

.indented {
  margin-left: 5em;
}

/* Video player controls */
#video-controls a:hover {
  background-color: #444;
}

/* Print differently */
@media print {
  body { width: 1024px; }
  #notes, #nexthint { display: none; }
}