html, body { height: 100%; min-height: 100%; }
  body { margin: 0; padding: 0; border: 0; background: #000 url('layout/page-background.png'); color: #FEE; }
  body, p { font: 12pt Helvetica,Arial,sans-serif; }
  table { border: 0; }
  iframe {  width: 460px; border: 1px solid #000; margin: auto; }
  p { text-align: justify; }
  a { text-decoration: none; }
  a:hover { color: #FFF; }
  q, blockquote { border: 4px solid #400; color: #FAA; background: #200; font: italic 11pt Tahoma,sans-serif; 
                margin: 29px 0px; padding: 2px 5px; text-align: center; display: block; }

  /* ******* General box layout *******  */

  #container { width: 808px; height: 100%;  border: 0px; border-spacing: 0px; background: #1C1314 url('layout/background-layout.png') fixed;  }
  td { vertical-align: top; padding: 0px; }
  td.col1 { width: 144px; text-align: right; }
  td.col2 { width: 157px; }

  #menu-l1 { font: 14pt Geneva,sans-serif; position: fixed; top: 4px; left: 2px; z-index: 9; width: 140px;  }
  #menu-l1 img { margin: 0; padding: 0;  display: block; border: 0px; }
  #menu-l1 img:hover { background: #400;  }

  #menu-l2 { font: italic 14pt Georgia,sans-serif; width: 155px;  position: fixed; top: 0px; left: 143px; z-index: 3;  }
  #menu-l2 a {  display: block; color: #F66; margin: 9px 5px 5px 9px; border: 1px solid #600; padding-right: 10px; 
                text-align: right; background: #400 url('layout/l2-background.png') right top repeat-y;  }
  #menu-l2 a:hover {  background: #000; }

  #storymenu img { border: 3px solid #600;  margin: 2px 4px 0px 4px; }
  #storymenu { margin: 3px 0px 0px 12px ; z-index: 3;}

  #aap-bottom { margin: 20px; border-top: 1px dotted #A00; }
  #aap-bottom a { display: block; float: right; width: 111px; border: 1px dotted #F00; 
                  background: #300; padding: 0px 5px; margin: 5px; text-align: center; 
                  color: #F66; font: italic 10pt Georgia,sans-serif;  }
  #aap-bottom a:hover { background: #633; }
  #aap-bottom p { clear: both; text-align: right; color: #AAA; font: 9pt Verdana,sans-serif; margin: 15px 10px; }

  /* ******* Content: Story ******* */

  #content { margin: 20px;   }

  .story-pic { text-align: center;  }
  .story-pic img { border: 1px solid #700; width: 300px; height: 160px; }
  .story-paths { width: 100%; }
  .story-paths img { border: 1px solid #1C1314; }
  .story-paths img:hover { border: 1px solid #CCC; }
  .story-paths td { text-align: center;  }
  .story-paths a { margin: auto; }

  .story-opt { margin: 30px 0px 10px 0px; }
  .story-opt a { display: block; margin: auto; text-align: center; }
  .story-opt-table { border: 0; width: 100%; }
  .story-opt-table td { text-align: center; verticle-align: top; }

  .spacebar { background: url('layout/page-background.png'); border: 1px solid #333; margin: 0px 3px; }
  .unhide-link { color: #F33; font: 11pt Verdana,sans-serif; display: block; text-align: right; background: #300; padding: 7px;  }
  .spoiler { display: none; background: #300; padding: 2px 12px;  }

  #character-name { width: 460px; height: 75px; background-image: url('../servant/servant-name.gif'); background-repeat:  no-repeat; }
  .name-saber    { background-position: 145px 0px; }
  .name-caster   { background-position: 145px -75px; }
  .name-lancer   { background-position: 145px -150px; }
  .name-berserker { background-position: 145px -225px; }
  .name-assassin { background-position: 145px -300px; }
  .name-archer   { background-position: 145px -375px; }
  .name-rider    { background-position: 145px -450px; }

  #character-graphic { width: 460px; height: 120px; background-image: url('../servant/servant-pic.jpg'); border: 1px solid #A00;   }
  .pic-saber     { background-position: 0px    0px; }
  .pic-caster    { background-position: 0px -120px; }
  .pic-lancer    { background-position: 0px -240px; }
  .pic-berserker { background-position: 0px -360px; }
  .pic-assassin  { background-position: 0px -480px; }
  .pic-archer    { background-position: 0px -600px; }
  .pic-rider     { background-position: 0px -720px; }

  .master-pic img { width: 460px; height: 170px; border: 1px solid #A00; }
  

  .char-h2, .char-h3 { text-align: right; color: #FCC; border-bottom: 1px dotted #A00; margin-bottom: 0; } 
  .char-h2 { font: italic 20pt bold serif; }
  .char-h3 { font: italic 16pt bold serif; }

  .story-next {  display: block; width: 126px; 
    background: #000; border: 1px solid #500; margin: 3px auto 0px auto; 
    font: bold 11pt Verdana,sans-serif; color: #FCC; padding: 2px 0px; }


  .thoughtbox { border: 1px solid #800; background: #300; padding: 9px; margin-bottom: 9px; }

  object { display: block; margin: 10px auto; }


  /* ******* Layout Extras ******** */

  .construction { display: block; margin: 2em auto; text-align: center; }

  #aap-logo { display: block; margin: auto; margin-top: 29px; }

  #mainpage-graphic img { border: 1px solid #A00; }
  #mainpage-graphic { text-align: center; }

  #eyecatch { z-index: 5; position: fixed; bottom: 0; left: 0;  border: 0px; margin-bottom: -3px;  }
  #frill { z-index: 2; position: fixed; bottom: 0px; left: 146px; }
  #fsn-text { position: fixed; top: 0; left: 809px; width: 36px; height: 526px; z-index: 5; display: inline;   }