/** * @file * Layout Styling (DIV Positioning) * * 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 */ /* Notes: - The .section class indicates the first child of a region div, which usually has an ID (e.g., #content) and a region class (e.g., .content-region). So it can safely be used to pad those major page elements, which themselves are usually unpadded floats that use the collapsed margin trick. - The .content class is much more general. Virtually all Drupal's fancier elements, such as blocks, views, views rows, etc., have a .content sub-container div which is intended to wrap the content portion - other than the title. For example here's a typical block:

About Us

Special care must be taken when styling these elements directly. Bad: #content .content { font-size: 90%; } Good: #content>.content { font-size: 90%; } Best: #block-myblock .content .field-field-date { font-size: 90%; } - Blocks are classed individually with unique IDs - Pages have classes added to based on their URL alias. So for example the page CSR-News has ".page-csr-news .section-csr-news" while the page CSR-News/Campaigns also gets ".page-csr-news-campaigns" added. Only Views pages get the named .page classes, while Node-based pages only get .page-node-## based on their node id. Rules based on ".page-csr-news" or ".section-csr-news" will affect both pages. - Other classes... .page-views : A page based on a View .page-node : A page based on a Node. .node-type-page : The node type is "page" .page-node-1234 : The page for node 1234. - For FMR icons, they can float before the field they want to float next to, as long as the view-field isn't set to clear:both/right. If the icon images are float:right this will reverse their order. One cool trick was to change the divs in "field-fmr-icons" to inlines (see "Right sidebar FMR Icons" in page-front.css) then text-align: right. The field container itself still floats and can have any lesser height, so the icons will only push content down if they're present. */ /* body */ body { margin: 0; padding: 0; } #page-wrapper, .region-bottom { /* * If you want to make the page a fixed width and centered in the viewport, * this is the standards-compliant way to do that. See also the ie6.css file * for the necessary IE5/IE6quirks hack to center a div. */ margin-left: auto; margin-right: auto; width: 1100px; } .news-page #page-wrapper, .profile-page #page-wrapper{ width: 960px; margin: 0 auto; } #page { } /* * Header */ #header { } #header .section { } .region-header { } /* * Main (container for everything else) */ #main { color: #2C2C2B; } .page-node-edit #main-wrapper { background: none !important; } .page-node-edit .region-sidebar-second { background: #DDD; margin-left: 645px; margin-top: 30px; } /*!**/ /** Content*/ /**!*/ /*#content,*/ /*.no-sidebars #content {*/ /*float: left; !* LTR *!*/ /*padding: 0; !* DO NOT CHANGE. Add padding or margin to #content .section. *!*/ /*}*/ /*#content .section { margin: 0; }*/ /*.no-sidebars #content .section {*/ /*padding: 0 22px 0;*/ /*}*/ /*.sidebar-first #content {*/ /*width: 706px;*/ /*margin-left: 247px; !* LTR *! !* The width of .region-sidebar-first. *!*/ /*margin-right: -953px; !* LTR *! !* Negative value of #content's width + left margin. *!*/ /*}*/ /*.sidebar-second #content {*/ /*width: 680px;*/ /*margin-left: 0; !* LTR *!*/ /*margin-right: -680px; !* LTR *! !* Negative value of #content's width + left margin. *!*/ /*}*/ /*.sidebar-second #content .section {*/ /*padding: 0 1em 0 22px;*/ /*}*/ /*.two-sidebars #content {*/ /*width: 470px;*/ /*margin-left: 240px; !* LTR *! !* The width of .region-sidebar-first *!*/ /*margin-right: -710px; !* LTR *! !* Negative value of #content's width + left margin. *!*/ /*}*/ /*.two-sidebars #content .section {*/ /*padding: 0 1em 0 0;*/ /*}*/ /* * Navigation */ #navigation { margin-left: 0; /* LTR */ padding: 0; /* DO NOT CHANGE. Add padding or margin to #navigation .section. */ position: relative; } .with-navigation #content, .with-navigation .region-sidebar-first, .with-navigation .region-sidebar-second { /* margin-top: 3em; Set this to the same value as the navigation height above. REMOVED - padding set in main-wrapper */ } #navigation .section { } /*!**/ /** First sidebar*/ /**!*/ /*.region-sidebar-first {*/ /*float: left; !* LTR *!*/ /*width: 200px;*/ /*margin-left: 0; !* LTR *!*/ /*margin-right: -200px; !* LTR *! !* Negative value of .region-sidebar-first's width + left margin. *!*/ /*padding: 0; !* DO NOT CHANGE. Add padding or margin to .region-sidebar-first .section. *!*/ /*}*/ /*.two-sidebars .region-sidebar-first {*/ /*width: 225px;*/ /*margin-right: -225px;*/ /*}*/ /*.region-sidebar-first .section {*/ /*margin: 0;*/ /*padding: 0 10px 0 22px;*/ /*}*/ /*!**/ /** Second sidebar*/ /**!*/ /*.region-sidebar-second {*/ /*float: left; !* LTR *!*/ /*width: 242px;*/ /*margin-left: 702px; !* LTR *! !* Width of content + sidebar-first. *!*/ /*margin-right: -944px; !* LTR *! !* Negative value of .region-sidebar-second's width + left margin. *!*/ /*padding: 0; !* DO NOT CHANGE. Add padding or margin to .region-sidebar-second .section. *!*/ /*}*/ /*.region-sidebar-second .section {*/ /*margin: 10px; !* LTR *!*/ /*padding: 0;*/ /*}*/ /*.two-sidebars .region-sidebar-second {*/ /*width: 242px;*/ /*margin-left: 717px;*/ /*margin-right: -959px;*/ /*}*/ /* * Footer */ .region-footer { } /* * Page bottom */ .region-bottom /* See also the #page-wrapper declaration above that this div shares. */ { } /* * Prevent overflowing content */ #header, #content, #navigation, .region-sidebar-first, .region-sidebar-second, .region-footer, .region-bottom { overflow: visible; word-wrap: break-word; /* A very nice CSS3 property */ } .page-node-43 .region-sidebar-second, .page-node-24 .region-sidebar-second { background: #ECEDED url(../images/csrnews_sidebar_top.gif) no-repeat right top; } .page-the-csr-minute .region-sidebar-second, .page-csr-video .region-sidebar-second { background: #F4F4F4; /* this should be set up as in layout.css with proper negative right margin */ /* margin-left: 560px; */ /* margin-top: 0 !important; */ /* width: 481px !important; */ } .page-the-csr-minute .region-sidebar-second { background: #ECEDED url(../images/home_sidebar_top.gif) no-repeat scroll right top; /* this should be set up as in layout.css with proper negative right margin */ /* margin-left: 460px;*/ /* margin-top: 0;*/ /* width: 454px;*/ } .page-node-13 .region-sidebar-second { /* background: #ECEDED;*/ } /* Add-in Classes */ .fl { float: left; } .fr { float: right; }