/* $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. * * This layout is based on the Border Politics Layout Method. * http://drupal.org/node/201428 * * Only CSS that affects the layout (positioning) of major elements should be * listed here. Such as: * display, position, float, clear, width, height, min-width, min-height * margin, border, padding, overflow */ /** body **/ body { margin: 0; padding: 10px; } #page { } #page-inner { } #navigation-top, #navigation { position: absolute; /* Take the named anchors out of the doc flow */ left: -10000px; /* and prevent any anchor styles from appearing. */ } #skip-to-nav { float: right; margin: 0 !important; font-size: 0.8em; } #skip-to-nav a:link, #skip-to-nav a:visited { color: #fff; /* Same as background color of page */ } #skip-to-nav a:hover { color: #000; text-decoration: none; } /* Alternatively, the skip-to-nav link can be completely hidden until a user tabs to the link. Un-comment the following CSS to use this technique. */ /* #skip-to-nav a, #skip-to-nav a:hover, #skip-to-nav a:visited { position: absolute; left: 0; top: -500px; width: 1px; height: 1px; overflow: hidden; } #skip-to-nav a:active, #skip-to-nav a:focus { position: static; width: auto; height: auto; } */ /** header **/ #header { } #header-inner { } #logo-title { } #logo { margin: 0 10px 0 0; padding: 0; float: left; } h1#site-name, div#site-name { margin: 0; font-size: 2em; line-height: 1.3em; } #site-slogan { } #header-blocks { clear: both; /* Clear the logo */ } /** main (container for everything else) **/ #main { position: relative; } #main-inner { } /** content **/ #content { float: left; width: 100%; margin-left: 0; margin-right: -100%; /* Negative value of #content's width + left margin. */ padding: 0; /* DO NOT CHANGE. Add padding or margin to #content-inner. */ } .two-sidebars #content-inner { padding-left: 200px; /* The width + left margin of #sidebar-left. */ padding-right: 200px; /* The width + right margin of #sidebar-right. */ } .sidebar-left #content-inner { padding-left: 200px; /* The width + left margin of #sidebar-left. */ padding-right: 0; } .sidebar-right #content-inner { padding-left: 0; padding-right: 200px; /* The width + right margin of #sidebar-right. */ } #content-inner { margin: 0; padding: 0; } /** navbar **/ #navbar { float: left; width: 100%; margin-left: 0; margin-right: -100%; /* Negative value of #navbar's width + left margin. */ padding: 0; /* DO NOT CHANGE. Add padding or margin to #navbar-inner. */ height: 3.6em; /* The navbar can have any arbritrary height. We picked one that is twice the line-height pluse 1em: 2 x 1.3 + 1 = 3.6 Set this to the same value as the margin-top below. */ } .with-navbar #content, .with-navbar #sidebar-left, .with-navbar #sidebar-right { margin-top: 3.6em; /* Set this to the same value as the navbar height above. */ } #navbar-inner { } #search-box { width: 200px; margin-right: -200px; /* Negative value of #search-box's width. */ float: left; } #primary { margin-left: 200px; /* Width of search-box */ } #secondary { margin-left: 200px; /* Width of search-box */ } #navbar ul /* Primary and secondary links */ { margin: 0; padding: 0; text-align: left; } #navbar li /* A simple method to get navbar links to appear in one line. */ { float: left; padding: 0 10px 0 0; } /* There are many methods to get navbar links to appear in one line. * Here's an alternate method: */ /* #navbar li { display: inline; padding: 0 10px 0 0; } */ /** sidebar-left **/ #sidebar-left { float: left; width: 200px; margin-left: 0; margin-right: -200px; /* Negative value of #sidebar-left's width + left margin. */ padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-left-inner. */ } #sidebar-left-inner { margin: 0 20px 0 0; padding: 0; } /** sidebar-right **/ #sidebar-right { float: right; width: 200px; margin-left: -200px; /* Negative value of #sidebar-right's width + right margin. */ margin-right: 0; padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-right-inner. */ } #sidebar-right-inner { margin: 0 0 0 20px; padding: 0; } /** footer **/ #footer { } #footer-inner { } #closure-blocks { } /** Prevent overflowing content **/ #header, #content, #navbar, #sidebar-left, #sidebar-right, #footer, #closure-blocks { overflow: visible; word-wrap: break-word; /* A very nice CSS3 property */ } #navbar { overflow: hidden; /* May need to be removed if using a dynamic drop-down menu */ }