/*
 * 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: 985px;
}

/* Layout the main content column */
#main {
  float: left;
  width: 795px;
}

#squeeze {
  position: relative;
}

/* 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: 210px;
  padding-left: 1em;
}

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

body.sidebar-right #squeeze,
body.two-sidebars #squeeze {
  margin-right: 180px;
  padding-right: 1em;
}

/* Layout the sidebars */
#container .sidebar {
  float: left;
  position: relative;
  z-index: 2; /* We ensure the sidebars are still clickable using z-index */
  margin: 0;
}

#container #sidebar-left {
  width: 200px; /* If you change this value, change the values
                   of margin-left for #main and #squeeze. */
}

#container #sidebar-right {
  width: 180px; /* If you change this value, change the values
                   of margin-right for #main and #squeeze. */
}

/* 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 */
}