@charset "utf-8";
/* 
 * I followed this very good design by Matthew James Taylor:
 *   http://matthewjamestaylor.com/blog/perfect-3-column-blog-style.htm
 * but trying to make IE bugs explicit.
 * Mattew uses the smart trick to set fake margins by translating elements,
 * this hides many IE bugs, it just works but it is not "correct" IMHO :)
 * 
 * I tried to deconstruct his work, isolating quirks, and simplifying the
 * unneded stylesheet to the minimum.
 * As a side effects I was able to make the style unit agnostic, the same
 * layout can be used with width set in px, em or percent, and I removed the
 * 'col1wrap' container he used for the only purpose of make room for other
 * elements
 *  
 */


/* NOTES:
 *
 * Uncollapsing margins not needed for float elements?
 *   http://www.complexspiral.com/publications/uncollapsing-margins/
 * 
 * As a general rule for relative layouts,
 * use percent for horizontal space, and em for vertical space.
 */

body {
  border: 0;
  margin: 0;
  padding: 0;
  /*
  background-color: #CCC;
  */
  
  /* If you see rounding errors in 'structural' elements when using dimension
   * expressed in 'em', this is the first place to look, bigger font sizes
   * are less prone to rounding errors, someone even suggests to use
   * font-size: 100.1% ; see:
   *   http://www.accessifyforum.com/viewtopic.php?t=8692
   */
  /* font-size  76% or 100.1% ? */
  /*
  font-size: 84%;
  line-height: 140%;
  */
}

img {
  max-width: 100%;
}

#wrap {
  /* specifying max-width ensures a reasonably readable line lenght
   * on higher resolutions, this is not supported on older browsers,
   * but assuming that older browsers are used with lower screen resolutions
   * looks quite acceptable
   */
  max-width: 104em;

  /* fixed vertical, fluid horizontal */
  padding: 2em 2%;
  margin: 0 auto;
}

#header {
  clear: both;
  width: 100%;
  float: left;
  /*
  background-color: #ffaaaa;
  */
}

/* common column settings */
#container-out,
#container-mid,
#container-in {
  float: left;
  position: relative;

  /* Needed by IE <= 7 and gecko in FireFox 2.x
   * it won't hurt for the others.
   */
  width: 100%;
}

#container-out {
  clear: both;

  /* This chops off any overhanging divs, in particular the shifted
   * 'mid' and 'in' containers
   */
  overflow: hidden;

  /* right sub-sidebar background colour */
  /*
  background-color: #d5abff;
  */
}

#container-mid {
  /* shift the container on the left */
  /* width of the *rigth* sidebar */
  right: 20%;

  /* left sub-sidebar background colour */
  /*
  background-color: #abffff;
  */
}
#container-in {
  /* shift the container on the left */
  /* width of the *left* sidebar */
  right: 20%;

  /* main content background colour */
  /*
  background-color: #d5ffab;
  */
}


#main-content,
#sidebar {
  /* some browsers need these repeated here */
  position: relative;
  overflow: hidden;
}

#main-content {
  float: left;
  width: 60%;
  /* Re-shift the content to right
   * so it enters again in the viewport
   */
  margin-left: 40%;
}

#sidebar {
  float: right;
  width: 40%;
  /* Shift the sidebar on the right so it stay in place and
   * floats near the content, remember, the initial position is relative to
   * the (already shifted to left) container-in element
   */
  margin-right: -40%;
}

#sidebar-header {
  clear: both;
  float: left;
  /*
  background-color: #ffffab;
  */

  /* Needed by IE <= 7 and gecko in FireFox 2.x
   * it won't hurt for the others.
   */
  width: 100%;
}

#sub-sidebar-left,
#sub-sidebar-right {
  /* on some browsers also prevents some misplacement
   * of sub-sidebar-right at very narrow widths
   */
  overflow: hidden;
}

#sub-sidebar-left {
  float: left;
  /* if you use percent units
   * this should be set relative to container's width
   * we could decide column ratios, apply the ratio to the width of
   * the container in the code above, when drawing the fake
   * columns backgrounds, and then use the ratio here converted
   * to a percent value.
   */
  width: 50%;
}

#sub-sidebar-right {
  float: right;
  /* if you use percent units
   * this should be set relative to container's width
   * we could decide column ratios, apply the ratio to the width of
   * the container in the code above, when drawing the fake
   * columns backgrounds, and then use the ratio here converted
   * to a percent value.
   */
  width: 50%;
}

#footer {
  clear: both;
  width: 100%;
  float: left;
  /*
  background-color: #d5abab;
  */
}