/* $Id: html-elements.css,v 1.1 2009/08/14 09:06:19 kehan Exp $ */ /* * HTML ELEMENT STYLING * * This is the "reset" style sheet. It standardizes the properties of the HTML * elements across browsers. */ /** fonts **/ /* * Our font size and line height declarations are based on the following ALA * article: * http://www.alistapart.com/articles/howtosizetextincss * * All modern browsrs use a 16px default font size. Specifying the font-size * and line-height in ems (relative to the 16px default font) allows the user * to resize the font in the browser and produces the most consistent results * across different browsers. */ body { font-size: 100%; /* Fixes exaggerated text resizing in IE6 and IE7 */ color: #666666; } #page { /* * To use a 12px font size on the page, delete the 14px declarations. * to use a 14px font size on the page, delete the 12px declarations. */ /* Use a 12px base font size with a 16px line height */ font-size: 0.8125em; /* 16px x .8125 = 13px */ line-height: 1; /* 12px x 1.333 = 16px */ } body,caption,th,td,input,textarea,select,option,legend,fieldset { /* The following font family declarations are based on the Microsoft core * web fonts which are common fonts available on most computer systems. The * Bitstream Vera fonts are commonly available on Linux systems where the MS * fonts are less common. * * A user's web browser will look at the comma-separated list and will * attempt to use each font in turn until it finds one that is available * on the user's computer. The final "generic" font (sans-serif or serif) * hints at what type of font to use if the web browser doesn't find any * of the fonts in the list. */ font-family: Tahoma, Verdana, Arial, Helvetica, "Bitstream Vera Sans", sans-serif; } pre,code { font-size: 1.1em; /* Monospace fonts can be hard to read */ font-family: "Bitstream Vera Sans Mono", "Courier New", monospace; } /** headings **/ h1,h2,h3,h4,h5,h6 { font-family: arial, helvetica, verdana, sans-serif; font-weight: normal; } h1 { font-size: 2em; letter-spacing: -0.07em; 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 */ line-height: 1.3em; } h2 { font-size: 1.4em; line-height: 1.5em; /* Equivalent to 1em in the page's base font: 1 / 1.5 = 0.667em */ margin-bottom: 0.5em; } h3 { font-size: 1.3em; line-height: 1.3em; /* Equivalent to 1em in the page's base font: 1 / 1.3 = 0.769 */ margin-bottom: 0.5em; color: #444444; } h4 { font-size: 1.2em; line-height: 1.3em; margin: 0 0 0.25em 0; padding: 0; color: black; } h5 { font-size: 1.1em; line-height: 1.3em; margin: 0 0 0.25em 0; padding: 0; color: black; } h6 { font-size: 1em; line-height: 1.3em; margin: 0 0 0.25em 0; padding: 0; color: black; } /** block-level elements **/ p,ul,ol,dl,pre,table,fieldset,blockquote { margin: 0 0 1.5em 0; padding: 0; line-height: 1.4em; } blockquote { border-left: 10px solid #ddd; margin-left: 10px; } /** lists **/ /* standardize list item indentation */ ul,ol { margin-left: 0; padding-left: 2em; } .block ul, /* Drupal overrides */ .item-list ul { margin: 1em 0; padding: 0 0 0 2em; } ul ul,ul ol,ol ol,ol ul,.block ul ul,.block ul ol,.block ol ol,.block ol ul,.item-list ul ul,.item-list ul ol,.item-list ol ol,.item-list ol ul { margin: 0; } li { margin: 0; padding: 0; } .item-list ul li /* Drupal override */ { margin: 0; padding: 0; list-style: inherit; } ul.menu li, /* Drupal override */ li.expanded,li.collapsed,li.leaf { margin: 0; padding: 0; } ul { list-style-type: disc; } ul ul { list-style-type: circle; } ul ul ul { list-style-type: square; } ul ul ul ul { list-style-type: circle; } ol { list-style-type: decimal; } ol ol { list-style-type: lower-alpha; } ol ol ol { list-style-type: decimal; } dt { margin: 0; padding: 0; } dd { margin: 0 0 0 2em; padding: 0; } /** links **/ /* The order of link states are based on Eric Meyer's article: * http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states */ a,a:link a:active { color: #007d24; text-decoration: none; } a:visited { color: #007d24; background-color: transparent; } a:hover,a:focus { color: #005418; text-decoration: none; } tr{ vertical-align: top; } /** tables **/ /* Override Drupal default CSS */ table { border-collapse: collapse; border: 1px solid #9ab9a3; color: #333; background: #FFF; width: 100%; /* Prevent cramped-looking tables */ } th,thead th,tbody th { padding-right: 0; text-align: left; font-size: 1em; font-weight: bold; background: #bfe5ca; padding: 0px !important; background: #bfe5ca; } table tbody tr:hover,table tr.over { background: #ffffdf !important; } table tbody td a { background: transparent; text-decoration: underline; } table tbody td a:hover { background: transparent; text-decoration: underline; } table th.sorted { background-color: #9ab9a3; color: #333333; } table tbody th a { background: transparent; text-decoration: underline; font-weight: bold; } tbody { border-top: none; } /** abbreviations **/ abbr { border-bottom: 1px dotted #666; cursor: help; white-space: nowrap; } /* Date-based "abbreviations" show computer-friendly timestamps which are not human-friendly. */ abbr.created { border: none; cursor: auto; white-space: normal; } /** images **/ img { border: 0; } /** horizontal rules **/ hr { height: 1px; border: 1px solid #666; } /** forms **/ form { margin: 0; padding: 0; } fieldset { margin: 1em 0; padding: 0.5em; }