@charset "utf-8"; /*$Id: style.css,v 1.3.2.8.2.18 2009/01/26 23:49:06 tombigel Exp $*/ /** * Tendu Drupal - A CSS Theme For Developers * Author: Tom Bigelajzen (http://drupal.org/user/173787) - http://tombigel.com * * Please follow the instructions in the comments. * Lines that end with LTR comments are referenced in styl-rtl.css according to Drupal Coding Guidelines * Lines that end with IE, IE6 etc. comments are referenced in ie.css, ie6.css and so on. */ /* Basic CSS Reset */ body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, a, pre, code, form, fieldset, legend, input, textarea, p, blockquote, table, th, td {margin:0;padding:0;} img, fieldset, legend, table, tr, td, th {border:none;} table, td{vertical-align:top;text-align:left;}/*LTR*/ th{vertical-align:middle;text-align:left;}/*LTR*/ /* Reduced lists reset to margins only, all list styles and paddings remain system/drupal defaults */ ul, ol{margin:0;} /* Drupal CSS Defaults reset */ .profile, .node-form .standard{clear:none;} .sidebar-region .item-list ul li{list-style-image:none;list-style-type:none;padding:0;margin:0;} li.leaf{list-style-image:none;list-style-type:disc} button,input.form-submit{cursor:pointer;} /* Fix OpenID icon placement */ #user-login-form li.openid-link, #user-login li.openid-link{padding-left:1.5em;} /** * The only changes you need to do here are: * 1. Comment/Uncomment the lines that relate to full viewport height * 2. Comment/Uncomment the lines that relate to fixed width or fluid width layout * 3. Set the widths of the page, the content area and the sidebars. * * For readability reasons some selectors has multiple style declerations. * Keep this section clean, add your design CSS in subthemes. */ /** * Full viewport height * Notes: * Remove these lines if you don't need the hight of the #page element to span 100% of the viewport height. */ html, body{height:100%;} #page{height:auto !important;height:100%;min-height:100%;position:relative;} /** * Stick footer to bottom of the page * Notes: * - Requires the above "Full viewport height", otherwise it can be removed. * - "#footer" height must be an absolute value for this to work right. * The height of #footer and padding-bottom of ".footer-spacer" must be set concordingly, * so the footer will not overlay the content of the page. * - Set the padding and the height according to your design. * - In some edge cases on some browsers the footer will refuse to stick to the bottom, * one solution that works for me is to move the footer
in page.tpl.php * to be right under the header instead of the end of the page. */ /*.footer-spacer{padding-bottom:4em}*/ #footer{height:4em;overflow:hidden} /** * Fonts * Notes: * - I'm using relative font sizes for 2 reasons: * 1. Accessibility - So users of IE6 will be able to resize fonts. * 2. Font sizes are easier to track this way, you change the size of a font in a parent element * and all the font sizes in child elements change with it. * - Note that "line-height" unlike "font-size" is relative to the current element and not to a global line height. * - Basic font size 12px, set as .75em of browsers default 16px size. * - For 14px font size change .75em to .85em, note that then the following numbers do not apply. * - Font sizes (when base size is .75em, calculated as desired font size devided by 12): * 10px = .83em * 11px = .916em * 12px = 1em * 13px = 1.083em * 14px = 1.166em * 16px = 1.333em * 18px = 1.5em * 20px = 1.666em * etc... */ body{font-family:Arial, Helvetica, sans-serif;font-size:100%;}/*LTR*/ /*IE*/ #page{font-size:.75em;line-height:1.333em;} /* In Firefox (All versions) there is an inconsistant bug with relative font size in tables, this line fixes that. */ table{font-size:1em} /* Main Layout: */ /** * Page width: Fixed width layout. * For fixed width Layout comment the "Fluid width" line and uncomment the following line */ /* #page{width:980px;margin:0 auto;position:relative;} */ /** * Page width: Fluid width layout * Notes: * - As a thumb rule I don't deal with non-standard IE hacks so this design degrades to a fixed width in IE6 * - For fluid width in IE6 you can use the "width:expression()" hack. But you really shouldn't. * - To have a full page width in IE6, use the following structure: */ /* #page{min-width:760px;max-width:1220px;height:1%;margin:0 auto;} */ #page{width:1000px;margin:0 auto} /** * Sidebars widths * NOTES: * - When using this method, the design 'suffers' from the 3 pixel gap in IE6, * meaning that in IE6 there will be an extra margin of 3 pixels from both * sides of "#content". * There are several ways to deal with it, * I added a decleration in ie6.css, do not forget to change it there if you change the values here. * * TODO: find a consistent way to do it without the padding. */ #sidebar-first{float:left;width:170px;}/*LTR*/ #sidebar-second{float:right;width:170px;}/*LTR*/ .with-sidebar-first #content{margin-left:170px;padding-left:10px}/*LTR*//*IE6*/ .with-sidebar-second #content{margin-right:170px;padding-right:10px}/*LTR*//*IE6*/ /** * Most likely you have no reason to change the following lines, but read the comments to be sure. */ /** * Set hasLayout for IE and clear floats on all main areas * What is "hasLayout"? Read here: http://www.satzansatz.de/cssd/onhavinglayout.html */ #header, #main-nav, #before-content, #after-content, #content-header, #content-top, #content-area, #content-bottom, #main, #footer{width:100%;} /** * The following must not have a width in Tendu. Using height instead. * Note: * - If for any reason you are going to set a fixed height on one of these elements' container it * will set the elemen's visual height to 1% (at least in IE) and you'll have to use a different approach. */ #header-content, #default-content, #content{height:1%;} /* Collapsed fieldsets use JS that requires it's parent to have layout in IE */ .node-form{height:1%;} /** * hasLayout clears floats for IE. * for standatd browsers we use the "selector:after{content:value}" technique (http://www.positioniseverything.net/easyclearing.html) */ #header:after, #header-content:after, #main-nav:after, #before-content:after, #after-content:after, #main:after, #content:after, #default-content:after, #footer:after{content:".";display:block;height:0;clear:both;visibility:hidden;} /*We cannot use "clear:both" on these elements (It breaks the layout) so we use overflow:hidden instead.*/ #content-header, #content-top, #content-area, #content-bottom{overflow:hidden;} /** * Accesibility: */ /* Style accessibility links (If enabled in "Theme Settings") * The accessibility links lets users with screen readers and keyboard-only users to skip certain areas * of the page so they won't have to go through all the menus and non-content areas on every page they browse. */ /* Hide the links in regular browsers, (Had to do it this complicated way because Safari focus works weird.) */ .accessibility-link{background:none;font-weight:bold;display:block;overflow:hidden;position:absolute;z-index:1;left:12px;white-space:nowrap;height:1px;margin-top:-1px}/*LTR*/ .accessibility-anchor{display:block;overflow:hidden;height:1px;margin-top:-1px} /* Show the links when navigating with the keyboard. (Note: IE does not support :focus)*/ .accessibility-link:focus{background:#fff;height:auto;margin:0;} /* Hide titles from Language switcher, Primary links and Secondary links for CSS enabled browsers */ #language-switcher h2, h2.primary-links-title, h2.secondary-links-title{overflow:hidden;height:1px;margin-top:-1px;} /*End of Tendu styles*/