/* $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 Holy Slurpy Cup layout method. * * 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 { } #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 **/ #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; } #header-blocks { clear: both; /* Clear the logo */ } /** main (container for everything else) **/ #main { position: relative; } /** content **/ #content { float: left; width: 100%; margin-left: 0; margin-right: -100%; /* Negative value of #content's width. */ padding: 0; /* DO NOT CHANGE. Add padding or margin to #content-inner. */ } .two-sidebars #content-inner { padding-left: 200px; /* The width of #sidebar-left. */ padding-right: 200px; /* The width of #sidebar-right. */ } .sidebar-left #content-inner { padding-left: 200px; /* The width of #sidebar-left. */ padding-right: 0; } .sidebar-right #content-inner { padding-left: 0; padding-right: 200px; /* The width of #sidebar-right. */ } #content-inner { margin: 0; padding: 0; } /** sidebar-left **/ #sidebar-left { float: left; width: 200px; margin-left: 0; margin-right: -200px; /* Negative value of #sidebar-left's width. */ 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. */ 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; } /** navbar **/ #navbar { float: left; width: 100%; margin-left: 0; margin-right: -100%; /* Negative value of #navbar's width. */ 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. */ } #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 { display: inline; padding: 0 10px 0 0; } /** 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 */ }