/* Magic to do 'frames' from CSS.
 * 
 * (c) Stian Sød <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.graphic,div.main,div.header {
  position: absolute;  
  margin: 0;

  /* Debuglines */
  /*border: 1px dotted #aaa;*/

  /* If scrolling is needed: */
  overflow: auto; 
}
div.left {
  /* Placed on the left side */
  top: 15%;
  left: 0;
  /* Width of left */
  width: 15%;
  height: 85%; 
  background: #006600;
}


div.left p {
 color: yellow;
}

div.left a {
        text-align: left;
        text-decoration: none;
        display: block;
        color: yellow;
}
div.left a:hover{
        text-align: left;
        background-color: #00CC00;
        color: yellow;
}


div.left div {
  position: static; 
  /* Restore to normal values */
  width: auto;
  height: auto;
}

div.graphic {
 /*Placed on left side */
 top: 0;
 left: 0;
 /*width of left, height of header*/
 width: 15%;
 height: 15%;
 background: #006600;
}

div.graphic div {
 position: static;
 /* Reset to normal values */
 left: 0;
 right: auto;
 height: auto;
}

div.header  {
  /* Placed in the upper part */
  top: 0;
  /* Don't overlap the left-side */
  left: 15%;
  /* Full width, this doesn't work completely with IE*/
  right: 0;
  /* Height of bottom part */
  height: 15%;
  background:  #006600;
}
div.header  div {
  position: static;
  /* Reset to normal values */  
  left: 15%;
  right: auto;
  height: auto;
}


div.main {
  /* In effect the rest of the screen, the main part if you like.  */
  top: 15%;
  bottom: 0;
  /* width of .left */
  left: 15%;
  right: 0;
  height: 85%;
  border-style:  inset;
  border-top-width: 5px;
  border-top-color: purple;
  border-left-width: 5px;
  border-left-color: purple;
}

div.main a {
 color:  purple;
}

div.main div {
  /* Reset to normal values */  
  position: static; 
  left: 15%;
  right: auto;
  height: 85%;
}

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