/* $Id: layout-fixed.css,v 1.17 2009/11/05 12:09:53 johnalbin Exp $ */ /** * @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 */ /* * Body */ body { font-family: "Trebuchet MS",Helvetica,Jamrul,sans-serif; background-image: url("../images/pootjes.png"); } p { color: #575757; } li { color: #575757; } dl { color: #575757; } dt { color: #575757; } h1 { color: #f7981d; font-size: 2em; line-height: 1.3em; margin-top: 0; margin-bottom: 0.5em; /* 0.5em is equavalent to 1em in the page's base font. Remember, a margin specified in ems is relative to the element's font-size, not to the pages' base font size. So, for example, if we want a 1em margin (relative to the base font), we have to divide that length by the element's font-size: 1em / 2em = 0.5em */ } h2 { color: #f7981d; font-size: 1.5em; line-height: 1.3em; margin-top: 0.667em; /* Equivalent to 1em in the page's base font: 1 / 1.5 = 0.667em */ margin-bottom: 0.667em; text-align: center; } h3 { color: #f7981d; font-size: 1.3em; line-height: 1.3em; margin-top: 0.769em; /* Equivalent to 1em in the page's base font: 1 / 1.3 = 0.769 */ margin-bottom: 0.769em; } h4, h5, h6 { color: #f7981d; font-size: 1.1em; line-height: 1.3em; margin-top: 0.909em; /* Equivalent to 1em in the page's base font: 1 / 1.1 = 0.909 */ margin-bottom: 0.909em; } a:link { color: #84c341; text-decoration: none; } a:visited { color: #84c341; text-decoration: none; } a:hover { color: #417d01; } a:focus { color: #417d01; } a:active { color: #417d01; } h1:link { color: #f7981d; } h1:visited { color: #f7981d; } h1:hover { color: #f7981d; } h1:focus { color: #f7981d; } h1:active { color: #f7981d; } h2:link { color: #f7981d; } h2:visited { color: #f7981d; } h2:hover { color: #f7981d; } h2:focus { color: #f7981d; } h2:active { color: #f7981d; } #page-wrapper, .region-page-closure { /* * 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: 960px; padding: 20px 0px 0px 0px; } #page { } /* * Header */ #header { } #header .section { margin: 0; padding: 0; } #search-box { padding-left: 780px; top: 30px; position: relative; } #search .form-text { width: 177px; border: 2px solid #000000; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #search .form-submit { position: relative; top: -18px; left: 160px; width: 18px; height: 13px; padding: 0; border: 0 none; cursor: pointer; text-indent: -9999px; background: url(../images/vergrootglas.gif) no-repeat left top; } /* * Main (container for everything else) */ #main-wrapper { position: relative; } #main { } /* * Content */ #content, .no-sidebars #content { float: left; /* LTR */ width: 960px; margin-left: 0; /* LTR */ margin-right: -960px; /* LTR */ /* Negative value of #content's width + left margin. */ padding: 0; /* DO NOT CHANGE. Add padding or margin to #content .section. */ } .sidebar-first #content { width: 760px; margin-left: 200px; /* LTR */ /* The width of .region-sidebar-first. */ margin-right: -960px; /* LTR */ /* Negative value of #content's width + left margin. */ } .sidebar-second #content { width: 760px; margin-left: 0; /* LTR */ margin-right: -760px; /* LTR */ /* Negative value of #content's width + left margin. */ } .two-sidebars #content { width: 560px; margin-left: 200px; /* LTR */ /* The width of .region-sidebar-first */ margin-right: -760px; /* LTR */ /* Negative value of #content's width + left margin. */ } #content .section { margin: 0; padding: 0; background: #ffffff; padding: 10px; border: 2px solid #000000; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #content .tabs { padding: 0px 10px; margin: 0px -10px; } /* * Navigation */ #navigation { float: left; /* LTR */; width: 956px; margin-left: 0; /* LTR */ margin-right: -100%; /* LTR */ /* Negative value of #navigation's width + left margin. */ padding: 0; /* DO NOT CHANGE. Add padding or margin to #navigation .section. */ height: 2.3em; /* The navigation can have any arbritrary height. We picked one that is the line-height plus 1em: 1.3 + 1 = 2.3 Set this to the same value as the margin-top below. */ border: 2px solid #000000; background: #FFFFFF; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .with-navigation #content, .with-navigation .region-sidebar-first, .with-navigation .region-sidebar-second { margin-top: 2.3em; /* Set this to the same value as the navigation height above. */ } #navigation .section { } #navigation ul /* Primary and secondary links */ { margin: 0; padding: 0; text-align: left; /* LTR */ } #navigation li /* A simple method to get navigation links to appear in one line. */ { float: left; /* LTR */ padding: 0 10px 0 0; /* LTR */ } /* * 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. */ } .region-sidebar-first .section { margin: 0 20px 0 0; /* LTR */ padding: 3px; /* (was 0) Poms Paradise */ background: #ffffff; border: 2px solid #000000; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } /* * Second sidebar */ .region-sidebar-second { float: left; /* LTR */ width: 200px; margin-left: 760px; /* LTR */ /* Width of content + sidebar-first. */ margin-right: -960px; /* 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: 0 0 0 20px; /* LTR */ padding: 3px; /* (was 0) Poms Paradise */ background: #ffffff; border: 2px solid #000000; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } /* * Footer */ #footer { } #footer .section { text-align: center; } /* * Closure */ .region-page-closure /* See also the #page-wrapper declaration above that this div shares. */ { } /* * Prevent overflowing content */ #header, #content, #navigation, .region-sidebar-first, .region-sidebar-second, #footer, .region-page-closure { overflow: visible; word-wrap: break-word; /* A very nice CSS3 property */ } #navigation { overflow: hidden; /* May need to be removed if using a dynamic drop-down menu */ } /* * If a div.clearfix 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-wrapper div. */ /* #page-wrapper { overflow-y: hidden; } */