/* Magic to do 'frames' from CSS.
 * 
 * (c) Stian Søiland <stian@soiland.no> 2004
 * 
 * Parts of this file is copied freely from
 * the site http://devnull.tagsoup.com/fixed/
 * Many thanks to Eric Bednarz <devnull@tagsoup.com>
 *
 * You may use/modify/distribute/etc this source for free as long as you
 * keep the above copyright notices. 
 *
 * Essentially the trick is to make body only 100% high (ie. the screen
 * size), and then place div-boxes out where you want your "frames".
 * 
 * This allows fixed positioning even in Microsoft IE, as we can use
 * position: absolute for elements directly within body.
 * 
 * See the file fixed_ie.css for details on IE compatibility
 * hacks.
 * 
 */
body {
  margin: 0;
}

div.left,div.top {
  position: absolute;  
 

   border: 0px solid red;

  overflow: auto; 
}
div.left {

  top: 0;
  left: 0;
  /* Width of left */
  width: 10em;
  height: 100%;
border-right: 1px solid red;
}
div.left div {
  position: static; 
  /* Restore to normal values */
  width: auto;
  height: auto;

}



div.top {
  /* In effect the rest of the screen, the main part if you like.  */
  top: 0;
  /* width of .left */
  left: 10em;
  right: 0;
  /* 100% - height of .bottom  */
  height: 100%;
}
div.top div {
  /* Reset to normal values */  
  position: static; 
  left: 0;
  right: auto;
  height: auto;
}

/* This trick is to fix something i IE 5 on Mac..  */
@media screen {
  body>div.left,body>div.bottom,body>div.top {
    position: fixed;
  }
}