[Summary view] [Print] [Text view]

   1  /* $Id: html-elements.css,v 1.1 2009/08/14 09:06:19 kehan Exp $ */
   2      /*
   3   * HTML ELEMENT STYLING
   4   *
   5   * This is the "reset" style sheet. It standardizes the properties of the HTML
   6   * elements across browsers.
   7   */ /** fonts **/ /*
   8     * Our font size and line height declarations are based on the following ALA
   9     * article:
  10     *   http://www.alistapart.com/articles/howtosizetextincss
  11     *
  12     * All modern browsrs use a 16px default font size. Specifying the font-size
  13     * and line-height in ems (relative to the 16px default font) allows the user
  14     * to resize the font in the browser and produces the most consistent results
  15     * across different browsers.
  16     */
  17  body {
  18      font-size: 100%; /* Fixes exaggerated text resizing in IE6 and IE7 */
  19      color: #666666;
  20  }
  21  
  22  #page { /*
  23       * To use a 12px font size on the page, delete the 14px declarations.
  24       * to use a 14px font size on the page, delete the 12px declarations.
  25       */
  26       /* Use a 12px base font size with a 16px line height */
  27      font-size: 0.8125em; /* 16px x .8125 = 13px */
  28      line-height: 1; /* 12px x 1.333 = 16px */
  29  }
  30  
  31  body,caption,th,td,input,textarea,select,option,legend,fieldset {
  32      /* The following font family declarations are based on the Microsoft core
  33       * web fonts which are common fonts available on most computer systems. The
  34       * Bitstream Vera fonts are commonly available on Linux systems where the MS
  35       * fonts are less common.
  36       *
  37       * A user's web browser will look at the comma-separated list and will
  38       * attempt to use each font in turn until it finds one that is available
  39       * on the user's computer. The final "generic" font (sans-serif or serif)
  40       * hints at what type of font to use if the web browser doesn't find any
  41       * of the fonts in the list.
  42       */
  43      font-family: Tahoma, Verdana, Arial, Helvetica, "Bitstream Vera Sans",
  44          sans-serif;
  45  }
  46  
  47  pre,code {
  48      font-size: 1.1em; /* Monospace fonts can be hard to read */
  49      font-family: "Bitstream Vera Sans Mono", "Courier New", monospace;
  50  }
  51  
  52  /** headings **/
  53  h1,h2,h3,h4,h5,h6 {
  54      font-family: arial, helvetica, verdana, sans-serif;
  55      font-weight: normal;
  56  }
  57  
  58  h1 {
  59      font-size: 2em;
  60      letter-spacing: -0.07em;
  61      line-height: 1.3em;
  62      margin-top: 0;
  63      margin-bottom: 0.5em;
  64      /* 0.5em is equavalent to 1em in the page's base font.
  65                               Remember, a margin specified in ems is relative to
  66                               the element's font-size, not to the pages' base
  67                               font size. So, for example, if we want a 1em margin
  68                               (relative to the base font), we have to divide that
  69                               length by the element's font-size:
  70                               1em / 2em = 0.5em */
  71      line-height: 1.3em;
  72  }
  73  
  74  h2 {
  75      font-size: 1.4em;
  76      line-height: 1.5em;
  77      /* Equivalent to 1em in the page's base font: 1 / 1.5 = 0.667em */
  78      margin-bottom: 0.5em;
  79  }
  80  
  81  h3 {
  82      font-size: 1.3em;
  83      line-height: 1.3em;
  84      /* Equivalent to 1em in the page's base font: 1 / 1.3 = 0.769 */
  85      margin-bottom: 0.5em;
  86      color: #444444;
  87  }
  88  
  89  h4 {
  90      font-size: 1.2em;
  91      line-height: 1.3em;
  92      margin: 0 0 0.25em 0;
  93      padding: 0;
  94      color: black;
  95  }
  96  
  97  h5 {
  98      font-size: 1.1em;
  99      line-height: 1.3em;
 100      margin: 0 0 0.25em 0;
 101      padding: 0;
 102      color: black;
 103  }
 104  
 105  h6 {
 106      font-size: 1em;
 107      line-height: 1.3em;
 108      margin: 0 0 0.25em 0;
 109      padding: 0;
 110      color: black;
 111  }
 112  
 113  /** block-level elements **/
 114  p,ul,ol,dl,pre,table,fieldset,blockquote {
 115      margin: 0 0 1.5em 0;
 116      padding: 0;
 117      line-height: 1.4em;
 118  }
 119  
 120  blockquote {
 121      border-left: 10px solid #ddd;
 122      margin-left: 10px;
 123  }
 124  
 125  /** lists **/ /* standardize list item indentation */
 126  ul,ol {
 127      margin-left: 0;
 128      padding-left: 2em;
 129  }
 130  
 131  .block ul, /* Drupal overrides */ .item-list ul {
 132      margin: 1em 0;
 133      padding: 0 0 0 2em;
 134  }
 135  
 136  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
 137      {
 138      margin: 0;
 139  }
 140  
 141  li {
 142      margin: 0;
 143      padding: 0;
 144  }
 145  
 146  .item-list ul li /* Drupal override */ {
 147      margin: 0;
 148      padding: 0;
 149      list-style: inherit;
 150  }
 151  
 152  ul.menu li, /* Drupal override */ li.expanded,li.collapsed,li.leaf {
 153      margin: 0;
 154      padding: 0;
 155  }
 156  
 157  ul {
 158      list-style-type: disc;
 159  }
 160  
 161  ul ul {
 162      list-style-type: circle;
 163  }
 164  
 165  ul ul ul {
 166      list-style-type: square;
 167  }
 168  
 169  ul ul ul ul {
 170      list-style-type: circle;
 171  }
 172  
 173  ol {
 174      list-style-type: decimal;
 175  }
 176  
 177  ol ol {
 178      list-style-type: lower-alpha;
 179  }
 180  
 181  ol ol ol {
 182      list-style-type: decimal;
 183  }
 184  
 185  dt {
 186      margin: 0;
 187      padding: 0;
 188  }
 189  
 190  dd {
 191      margin: 0 0 0 2em;
 192      padding: 0;
 193  }
 194  
 195  /** links **/
 196      /* The order of link states are based on Eric Meyer's article:
 197     * http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
 198     */
 199  a,a:link
 200              a:active {
 201      color: #007d24;
 202      text-decoration: none;
 203  }
 204  
 205  a:visited {
 206      color: #007d24;
 207      background-color: transparent;
 208  }
 209  
 210  a:hover,a:focus {
 211      color: #005418;
 212      text-decoration: none;
 213  }
 214  tr{
 215    vertical-align: top;
 216    }
 217  
 218  /** tables **/ /* Override Drupal default CSS */
 219  table {
 220      border-collapse: collapse;
 221      border: 1px solid #9ab9a3;
 222      color: #333;
 223      background: #FFF;
 224      width: 100%; /* Prevent cramped-looking tables */
 225  }
 226  
 227  th,thead th,tbody th {
 228      padding-right: 0;
 229      text-align: left;
 230      font-size: 1em;
 231      font-weight: bold;
 232      background: #bfe5ca;
 233      padding: 0px !important;
 234      background: #bfe5ca;
 235  }
 236  
 237  table tbody tr:hover,table tr.over {
 238      background: #ffffdf !important;
 239  }
 240  
 241  table tbody td a {
 242      background: transparent;
 243      text-decoration: underline;
 244  }
 245  
 246  table tbody td a:hover {
 247      background: transparent;
 248      text-decoration: underline;
 249  }
 250  
 251  table th.sorted {
 252      background-color: #9ab9a3;
 253      color: #333333;
 254  }
 255  
 256  table tbody th a {
 257      background: transparent;
 258      text-decoration: underline;
 259      font-weight: bold;
 260  }
 261  
 262  tbody {
 263      border-top: none;
 264  }
 265  
 266  /** abbreviations **/
 267  abbr {
 268      border-bottom: 1px dotted #666;
 269      cursor: help;
 270      white-space: nowrap;
 271  }
 272  
 273  /* Date-based "abbreviations" show computer-friendly timestamps which are not
 274       human-friendly. */
 275  abbr.created {
 276      border: none;
 277      cursor: auto;
 278      white-space: normal;
 279  }
 280  
 281  /** images **/
 282  img {
 283      border: 0;
 284  }
 285  
 286  /** horizontal rules **/
 287  hr {
 288      height: 1px;
 289      border: 1px solid #666;
 290  }
 291  
 292  /** forms **/
 293  form {
 294      margin: 0;
 295      padding: 0;
 296  }
 297  
 298  fieldset {
 299      margin: 1em 0;
 300      padding: 0.5em;
 301  }