/* $Id$ */ /* * 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. */ #container { margin: 0 auto; /*padding: 0 20px;*/ max-width: 1270px; } /* With 3 columns, require a minimum width of 1000px to ensure there is enough horizontal space. */ body.two-sidebars { /*min-width: 980px;*/ } /* With 2 columsn, require a minimum width of 800px. */ body.sidebar-left, body.sidebar-right { /*min-width: 780px;*/ } /* We must define 100% width to avoid the body being too narrow for near-empty pages */ #main { float: left; width: 100%; } /* So we move the #main container over the sidebars to compensate */ body.sidebar-left #main, body.two-sidebars #main { margin-left: -210px; } body.sidebar-right #main, body.two-sidebars #main { margin-right: -210px; } #squeeze { position: relative; padding: 0 1em; } /* And add blanks left and right for the sidebars to fill */ body.sidebar-left #squeeze, body.two-sidebars #squeeze { margin-left: 210px; } body.sidebar-right #squeeze, body.two-sidebars #squeeze { margin-right: 210px; } /* We ensure the sidebars are still clickable using z-index */ #container #sidebar-left { width: 210px; } #container #sidebar-right { width: 210px; } #container .sidebar { margin: 0; float: left; z-index: 2; position: relative; } /* 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 */ } #container .sidebar .block { margin: 0 0 1.5em 0; } #sidebar-left .block { padding: 0 15px 0 0; } #sidebar-right .block { padding: 0 0 0 15px; } .block .content { margin: 0.5em 0; } #footer { float: none; clear: both; margin: 4em 0 -3em; }