/* $Id: layout-garland.css,v 1.1.2.1 2008/01/06 14:04:04 johnalbin Exp $ */

/*
 * LAYOUT STYLES
 *
 * Define CSS classes to create a table-free, 3-column, 2-column, or single
 * column layout depending on whether blocks are enabled in the left or right
 * columns.
 *
 * This is the same layout method used by Garland.
 *
 * However, there is a KNOWN BUG with this layout method that has no known fix:
 *   oversize content will causes IE to display the sidebars underneath the main
 *   content.
 */

  body
  {
    margin: 0;
    padding: 0;
  }

  /* With 3 columns, require a minimum width of 1000px to ensure there is enough horizontal space. */
  body.two-sidebars
  {
    min-width: 980px;
  }

  /* With 2 columns, require a minimum width of 800px. */
  body.sidebar-left, body.sidebar-right
  {
    min-width: 760px;
  }

  #container
  {
    margin: 0 auto;
/*    max-width: 1270px; */
  }

/* Layout the main content column */
  #main
  {
    width: 96%; /* Prevent it from being too narrow on near-empty pages */
    margin-left: auto;
    margin-right: auto;
  }

  #main-left
  {
    /* width: 96%; /* Prevent it from being too narrow on near-empty pages */
    margin-left: 228px;
    margin-right: 20px;
  }
  
  #main-right
  {
    /* width: 96%; /* Prevent it from being too narrow on near-empty pages */
    margin-left: 20px;
    margin-right: 228px;
  }

  #main-left-right
  {
    /* width: 96%; /* Prevent it from being too narrow on near-empty pages */
    margin-left: 228px;
    margin-right: 228px;
  }

  /* First we adjust the #main container to make room for the left sidebar 
  body.sidebar-left #main,
  body.two-sidebars #main
  {
    margin-left: -210px;
  }*/

  body.sidebar-left #squeeze,
  body.two-sidebars #squeeze
  {
    /* margin-left: 215px; */
    padding-left: 1em;
  }

  /* Then we adjust the #main container to make room for the right sidebar */
  
  body.sidebar-right #squeeze,
  body.two-sidebars #squeeze
  {
    padding-right: 12px;
  }

/* layout the sidebars 
  #container .sidebar-left
  {
    float: left;
    z-index: 2; /* We ensure the sidebars are still clickable using z-index 
    margin: 0;
   } */
  #container #sidebar-right
  {
    width: 228px; /* If you change this value, change the values
                     of margin-left for #main and #squeeze. */
    float: right;
    font-size: 13px;  
    margin: 0px 0px 15px 0px;
  /*background: #88ccdd url(../images/corners/bottom-right.png) no-repeat scroll bottom right;*/
  }

  #container #sidebar-left
  {
  width: 228px; /* If you change this value, change the values
                   of margin-left for #main and #squeeze. */
  float: left;
  font-size: 13px;
  margin: 0px 0px 15px 0px;
  /*background: #88ccdd url(../images/corners/bottom-right.png) no-repeat scroll bottom right;*/
  }
   

  
/* Laout the footer */
  #footer
  {
    float: none;
    clear: both;
    margin: 4em 0 -3em;
  }

/* Ensure long text or wide images don't break IE6 layout. 
  #page, #header, #footer, #squeeze, #container .sidebar
  {
    _overflow: hidden;
    _overflow-y: visible;
    word-wrap: break-word;  A very nice CSS3 property 
  } */