/* $Id: layout.css,v 1.4 2008-11-03 23:50:18 jmburnz Exp $ */ /** * @file layout.css * CSS layout styles for sub-themes. */ /** * Main Containers */ html, body {margin: 0; padding: 0;} /* Automatic centering for widths less than 100% */ #container {margin: 0 auto;} /* Without this everything fails */ #content {float: left; width: 100%;} /** * Width * * Over ride this default in your subthemes CSS file. * 80 * 12 = 960px * * See the long note in your genesis_SUBTHEME.css file * for more information. */ .width {width: 80em;} /** * Default inner div padding */ .inner {padding: 0;} #content-inner {padding: 0;} /*********************************************************** * The Layouts **********************************************************/ /** * USAGE * * Replace the body id="..." (in page.tpl.php) with the your * preferred layout. * * e.g. * * If your site uses a page-front.tpl.php or any other page-xxx.tpl.php * your site can have multiple layouts. * * * OVER RIDING THE WIDTHS AND MARGINS * * To over ride the defaults I suggest copying the specific layout to your * subthemes CSS file and making the changes there. See the Genesis Zine * subtheme for an example (around line 32 of genesis_zine.css). * * * ABOUT THE LAYOUTS * * genesis_1, 2 & 3 place the sidebars left & right of the content column. * * genesis_4, 5, & 6 place both sidebars on the right. * * genesis_7 only supports a 2 col layout - please read the notes * attributed to it in the source below. */ /** * #genesis_1 - left & right same width. * _______________________________________________ * | Left | Content | Right | * | 20em | | 20em | * |_____________|___________________|_____________| */ #genesis_1 .two-sidebars #content-inner {margin : 0 20em;} #genesis_1 .sidebar-left #content-inner {margin-left : 20em;} #genesis_1 .sidebar-right #content-inner {margin-right: 20em;} #genesis_1 #sidebar-left {float: left; width: 20em; margin-left: -100%;} #genesis_1 #sidebar-right {float: left; width: 20em; margin-left: -20em;} /** * #genesis_2 - variable width left & right. * _______________________________________________ * | Left | Content | Right | * | 14.1667em | | 25.8333em | * |___________|__________________|________________| */ #genesis_2 .two-sidebars #content-inner {margin : 0 25.8333em 0 14.1667em; } #genesis_2 .sidebar-left #content-inner {margin-left : 14.1667em; } #genesis_2 .sidebar-right #content-inner {margin-right: 25.8333em; } #genesis_2 #sidebar-left {float: left; width: 14.1667em; margin-left: -100%; } #genesis_2 #sidebar-right {float: left; width: 25.8333em; margin-left: -25.8333em; } /** * #genesis_3 - variable width left & right (opposite of genesis_2). * _______________________________________________ * | Left | Content | Right | * | 25.8333em | | 14.1667em | * |________________|__________________|___________| */ #genesis_3 .two-sidebars #content-inner {margin : 0 14.1667em 0 25.8333em; } #genesis_3 .sidebar-left #content-inner {margin-left: 25.8333em; } #genesis_3 .sidebar-right #content-inner {margin-right: 14.1667em; } #genesis_3 #sidebar-left {float: left; width: 25.8333em; margin-left: -100%; } #genesis_3 #sidebar-right {float: left; width: 14.1667em; margin-left: -14.1667em; } /** * #genesis_4 - 2 col Right, left & right same width. * _______________________________________________ * | Content | Left | Right | * | | 20em | 20em | * |_____________________|____________|____________| */ #genesis_4 .two-sidebars #content-inner {margin-right: 40em;} #genesis_4 .sidebar-left #content-inner {margin-right: 20em;} #genesis_4 .sidebar-right #content-inner {margin-right: 20em;} #genesis_4 #sidebar-left {float: left; width: 20em; margin-left: -40em;} #genesis_4 #sidebar-right {float: left; width: 20em; margin-left: -20em;} #genesis_4 .sidebar-left #sidebar-left { float:left; width:20em; margin-left: -20em;} /** * #genesis_5 - 2 col Right, variable width left & right. * _______________________________________________ * | Content | Left | Right | * | | 14.1667em | 25.8333em | * |____________________|___________|______________| */ #genesis_5 .two-sidebars #content-inner {margin-right: 40em;} #genesis_5 .sidebar-left #content-inner {margin-right: 14.1667em;} #genesis_5 .sidebar-right #content-inner {margin-right: 25.8333em;} #genesis_5 #sidebar-left {float: left; width: 14.1667em; margin-left: -40em;} #genesis_5 #sidebar-right {float: left; width: 25.8333em; margin-left: -25.8333em;} #genesis_5 .sidebar-left #sidebar-left { float:left; width: 14.1667em; margin-left: -14.1667em;} /** * #genesis_6 - 2 col Right, variable width left & right (opposite of genesis_5). * _______________________________________________ * | Content | Left | Right | * | | 25.8333em | 14.1667em | * |____________________|______________|___________| */ #genesis_6 .two-sidebars #content-inner {margin-right: 40em;} #genesis_6 .sidebar-left #content-inner {margin-right: 25.8333em;} #genesis_6 .sidebar-right #content-inner {margin-right: 14.1667em;} #genesis_6 #sidebar-left {float: left; width: 25.8333em; margin-left: -40em;} #genesis_6 #sidebar-right {float: left; width: 14.1667em; margin-left: -14.1667em;} #genesis_6 .sidebar-left #sidebar-left { float:left; width: 25.8333em; margin-left: -25.8333em;} /** * #genesis_7 - Golden Rule Layout 1:1.618, 2 columns, adaptive width. * * NOTE: With this layout you can only use either the Left or Right sidebars, * but never both on the same page. * _______________________________________________ * | Content | Left OR Right | * | 62% | 38% | * |__________________________|____________________| */ #genesis_7 .two-sidebars #content-inner {margin-right: 38%;} #genesis_7 .sidebar-left #content-inner {margin-right: 38%;} #genesis_7 .sidebar-right #content-inner {margin-right: 38%;} #genesis_7 #sidebar-left {float: left; width: 38%; margin-left: -38%;} #genesis_7 #sidebar-right {float: left; width: 38%; margin-left: -38%;} #genesis_7 .sidebar-left #sidebar-left {float:left; width: 38%; margin-left: -38%;} /** * Clear both */ .clear {clear: both;}