html {
  height:100%;
  width:100%;
}
body {
  margin:0;
  padding:0;
  border:0;
  background:#ffffff;
  height:100%;
  width:100%;
}
div#toc_viewport, div#hdr_viewport {
  position:absolute;
  top:0;
  left:0;
}
@media screen
{
  body>div#hdr_viewport, body>div#toc_viewport  {
    position:fixed;
  }
}

/* --------------------------------------------------------------------- */

div#hdr_viewport  {
  display:block;
  right:0px;
  height:3em;
}
div#toc_viewport {
  display:block;
  height:100%;
  width:16em; /*250px;*/
}
div#txt_viewport {
  display:block;
  min-height:100%;
  overflow:auto;

  /* use border instead of margin/padding to work around a bug in 
   * IE(5+6) that results in the top of the scrollbar 
   * being painted over by the right edge of the hdr viewport
  */
  border:0;
  border-top:3em solid #eeeeee;
  border-left:16em solid #eeeeee;
  /* 16px whitespace around the text */
  padding:16px 16px 16px 16px;
}

/* --------------------------------------------------------------------- */

div#toc_viewport, div#hdr_viewport {
    background:#eeeeee;
}

/* add a border to emphasise separation of text from sidebar/headbar */
/* 
 * this could lead to uglyness for non-standard browsers (that 
 * scroll the whole page), so I've left it disabled.
*/
/*
div#hdr_viewport { border-bottom:0.1em solid #cccccc; }
div#txt_viewport { border-left:16.1em solid #cccccc; }
*/