Mercurial > hg > soundsoftware-drupal-theme
diff layout.css @ 0:1700a4568043
Initial import
author | Chris Cannam |
---|---|
date | Thu, 23 Jun 2011 10:31:17 +0100 |
parents | |
children | 6b9d46abd911 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/layout.css Thu Jun 23 10:31:17 2011 +0100 @@ -0,0 +1,297 @@ +/* $Id: layout-liquid.css,v 1.5.2.4 2009/02/13 19:30:50 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 layout is based on the Zen Columns 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 + { + } + + #page, + #closure-blocks + { + min-width: 600px; /* Don't allow the browser to make the site unreadable. */ + } + + #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 + { + float: left; + } + + #site-name + { + } + + #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. */ + } + + #content-inner, + .no-sidebars #content-inner + { + margin: 0; + padding: 0; + } + + .sidebar-left #content-inner + { + padding-left: 20%; /* The width + left margin of #sidebar-left. */ + padding-right: 0; + } + + .sidebar-right #content-inner + { + padding-left: 0; + padding-right: 20%; /* The width + right margin of #sidebar-right. */ + } + + .two-sidebars #content-inner + { + padding-left: 20%; /* The width + left margin of #sidebar-left. */ + padding-right: 20%; /* The width + right margin of #sidebar-right. */ + } + +/** 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: 20%; + margin-right: -20%; /* Negative value of #search-box's width. */ + float: left; + } + + #primary + { + margin-left: 20%; + } + + #secondary + { + margin-left: 20%; /* 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: 18%; + margin-left: 1%; + margin-right: -20%; /* 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: 18%; + margin-left: -20%; /* Negative value of #sidebar-right's width + right margin. */ + margin-right: 1%; + padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-right-inner. */ + } + + #sidebar-right-inner + { + margin: 0 0 0 25px; + padding: 0; + } + +/** footer **/ + #footer + { + } + + #footer-inner + { + } + +/** closure **/ + #closure-blocks /* See also the #page declaration above that this div shares. */ + { + } + +/** 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 */ + } + + /* If a div.clear-block doesn't have any content after it and its bottom edge + touches the bottom of the viewport, Firefox and Safari will mistakenly + place several pixels worth of space between the bottom of the div and the + bottom of the viewport. Uncomment this CSS property to fix this. + Note: with some over-large content, this property might cause scrollbars + to appear on the #page div. + */ + /* + #page + { + overflow-y: hidden; + } + */