/*
 * Fluid three-column layout style sheet
 */  

#outer_wrapper { /* because "min-width" is not supported by IE, these pages use CSS expressions */
  min-width: 770px; /* this is to "minimize" an IE bug related to background painting, */
                   /* but because it creates a gap below the footer, the same */
				   /* declaration is also added to #footer */
  width: 100%;      /* faux-column technique, this is the left faux-column */
  background: #fff url(left.gif) repeat-y left
}

#wrapper { /* faux-column technique, this is the right faux-column */
  background: url(right.gif) repeat-y right; /* to avoid a background-painting bug in IE Win, */
           			                         /* we need to give layout to this element. "zoom" */
										 	 /* takes care of IE 6, but fails in IE 5. To fix */
										   	 /* both versions at once it is better to use */
										 	 /* "height:0" inside a Conditional Comment */
  zoom: 1;
}

/* we use the 2 rules below to make sure there is no gap between #wrapper and #header in IE5 Win */
#header {padding: 10px 0}
#header p {margin-top: 0}
#container {
  float: left;
  width: 100%; /* IE doubles the margins on floats, this takes care of the problem */
  display: inline; 
  margin-left: -150px;
}

#vnav {
  float: left;
  width: 200px; /* IE doubles the margins on floats, this takes care of the problem */
  display: inline;
  margin-left: 220px;
}

#main {
  margin-left: 400px; /* the width from #vnav (200px) + the negative margin from #container (150px) */
}

#main * {
  zoom: 1; /* to kill a 3px jog in IE/Win, we need to give layout to elements */
           /*contained in #main (you should move this rule inside a Conditional Comment) */
}

/* good to know: if #sidebar is to be shorter than #main, then there is no need for this rule */
#sidebar {
  padding-left: 100%; /* this is to keep the content of #sidebar to the right of #main */
                      /* even if the content of "main is shorter */

  margin-left: -150px; /* this is to "bring back" the #sidebar that has been moved out */
                       /* of the viewport because of the padding value */
}

/* this is to make sure IE (v6) *displays* everything inside this element */
#sidebar * {
  position: relative;
}

#footer {
  /* see #outer_wrapper */
  width: 100%;
  clear: both; /* this is to clear #container */
}

/* This is the class that is applied to 2 structural hacks in the markup (see #2 and #5). */
/* The first "meaningless" element is used to clear #left in NN6 and the last one is used */
/* to clear #container in NN4 */
.clearing {
  height: 0;
  clear: both;
}