STARTERKIT/css/html-reset.css

   1 /**
   2  * @file
   3  * HTML Element Styling
   4  *
   5  * Ok, I admit it. I fooled you. This isn't a "reset" stylesheet. Instead this
   6  * is the place where you should set (not reset) the default styling for all
   7  * HTML elements.
   8  *
   9  * @see http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/
  10  * @see http://snook.ca/archives/html_and_css/no_css_reset/
  11  */
  12
  13
  14 /*
  15  * Fonts
  16  *
  17  * Our font size and line height declarations are based on the following
  18  * articles:
  19  * - http://www.alistapart.com/articles/howtosizetextincss
  20  * - http://24ways.org/2006/compose-to-a-vertical-rhythm
  21  *
  22  * All modern browsers use a 16px default font size. Specifying the font-size
  23  * and line-height in ems (relative to the 16px default font) allows the user
  24  * to resize the font in the browser and produces the most consistent results
  25  * across different browsers.
  26  */
  27 body {
  28   font-size: 100%; /* Fixes exaggerated text resizing in IE6 and IE7 */
  29 }
  30
  31 #skip-to-nav,
  32 #page {
  33   /*
  34    * To use a 12px font size on the page, delete the 14px declarations.
  35    * to use a 14px font size on the page, delete the 12px declarations.
  36    */
  37
  38   /* Use a 12px base font size with a 18px line height */
  39   font-size: 0.75em; /* 16px x .75 = 12px */
  40   line-height: 1.5em; /* 12px x 1.5 = 18px */
  41
  42   /* Use a 14px base font size with a 21px line height */
  43   font-size: 0.875em; /* 16px x .875 = 14px */
  44   line-height: 1.5em; /* 14px x 1.5 = 21px */
  45 }
  46
  47 /*
  48  * Instead of relying on the fonts that are available on a user's computer, you
  49  * can use web fonts which, like images, are resources downloaded to the user's
  50  * browser. Because of the bandwidth and rendering resources required, web fonts
  51  * should be used with care.
  52  *
  53  * Numerous resources for web fonts can be found on Google. Here are a few
  54  * websites where you can find Open Source fonts to download:
  55  * - http://www.fontsquirrel.com/fontface
  56  * - http://www.theleagueofmoveabletype.com
  57  *
  58  * In order to use these fonts, you will need to convert them into formats
  59  * suitable for web fonts. We recommend the free-to-use Font Squirrel's
  60  * Font-Face Generator:
  61  *   http://www.fontsquirrel.com/fontface/generator
  62  *
  63  * The following is an example @font-face declaration. This font can then be
  64  * used in any ruleset using a property like this:  font-family: Example, serif;
  65
  66 @font-face {
  67   font-family: 'Example';
  68   src: url('../fonts/example.eot');
  69   src: url('../fonts/example.eot?iefix') format('eot'),
  70     url('../fonts/example.woff') format('woff'),
  71     url('../fonts/example.ttf') format('truetype'),
  72     url('../fonts/example.svg#webfontOkOndcij') format('svg');
  73   font-weight: normal;
  74   font-style: normal;
  75 }
  76
  77  */
  78
  79 body,
  80 caption,
  81 th,
  82 td,
  83 input,
  84 textarea,
  85 select,
  86 option,
  87 legend,
  88 fieldset {
  89   /* The following font family declarations are based on the Microsoft core web
  90    * fonts which are common fonts available on most computer systems. The DejaVu
  91    * and Nimbus Sans fonts are commonly available on Linux systems where the MS
  92    * fonts are less common. Tahoma and Helvetica are also widely available.
  93    *
  94    * A user's web browser will look at the comma-separated list and will
  95    * attempt to use each font in turn until it finds one that is available
  96    * on the user's computer. The final "generic" font (sans-serif, serif or
  97    * monospace) hints at what type of font to use if the web browser doesn't
  98    * find any of the fonts in the list.
  99
 100   font-family: "Times New Roman", Times, Georgia, "DejaVu Serif", serif;
 101   font-family: Times, "Times New Roman", Georgia, "DejaVu Serif", serif;
 102   font-family: Georgia, "Times New Roman", "DejaVu Serif", serif;
 103
 104   font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif;
 105   font-family: Tahoma, Verdana, "DejaVu Sans", sans-serif;
 106   font-family: Helvetica, Arial, "Nimbus Sans L", sans-serif;
 107   font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
 108
 109   font-family: "Courier New", "DejaVu Sans Mono", monospace;
 110
 111    */
 112
 113   font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif;
 114 }
 115
 116 pre,
 117 code {
 118   font-family: "Courier New", "DejaVu Sans Mono", monospace;
 119 }
 120
 121 /*
 122  * Block-level elements
 123  *
 124  * To achieve a pleasant vertical rhythm, we use the 1.5em line height of our
 125  * base font as the top and bottom margins for our block level elements and make
 126  * the line heights of any larger fonts be a multiple of 1.5 ems. For more
 127  * information, see http://24ways.org/2006/compose-to-a-vertical-rhythm
 128  */
 129 h1, h2, h3, h4, h5, h6
 130 p, blockquote, pre,
 131 ul, ol, dl,
 132 hr, table, fieldset {
 133   margin: 1.5em 0;
 134 }
 135
 136 /* Headings */
 137 h1 {
 138   font-size: 2em;
 139   line-height: 1.5em;
 140   margin: 0.75em 0;
 141   /* 0.75em is equivalent to 1.5em in the page's base font. font. Remember, a
 142      margin specified in ems is relative to the element's font-size, not to the
 143      pages' base font size. So, for example, if we want a 1.5em margin (relative
 144      to the base font), we have to divide that length by the element's
 145      font-size:  1.5em / 2em = 0.5em  */
 146 }
 147
 148 h2 {
 149   font-size: 1.5em;
 150   margin: 1em 0; /* Equivalent to 1.5em in the page's base font: 1.5 / 1.5 = 1em */
 151 }
 152
 153 h3 {
 154   font-size: 1.3em;
 155   margin: 1.154em 0; /* Equivalent to 1.5em in the page's base font: 1.5 / 1.3 = 1.154 */
 156 }
 157
 158 h4,
 159 h5,
 160 h6 {
 161   font-size: 1.1em;
 162   margin: 1.364em 0; /* Equivalent to 1.5em in the page's base font: 1.5 / 1.1 = 1.364 */
 163 }
 164
 165 /* Other block-level elements */
 166 p {
 167 }
 168
 169 blockquote {
 170   margin-left: 2em;
 171   margin-right: 2em;
 172 }
 173
 174 pre {
 175   font-size: 1.1em; /* Monospace fonts can be hard to read */
 176   margin: 1.364em 0; /* Equivalent to 1.5em in the page's base font: 1.5 / 1.1 = 1.364 */
 177 }
 178
 179 hr {
 180   height: 1px;
 181   border: 1px solid #666;
 182 }
 183
 184 address {
 185 }
 186
 187 /*
 188  * Lists
 189  *
 190  * We need to standardize the list item indentation.
 191  */
 192 ul,
 193 ol {
 194   margin-left: 0; /* LTR */
 195   padding-left: 2em; /* LTR */
 196 }
 197
 198 .item-list ul /* Drupal overrides */ {
 199   margin: 1.5em 0;
 200   padding: 0 0 0 2em; /* LTR */
 201 }
 202
 203 ul ul, ul ol,
 204 ol ol, ol ul,
 205 .item-list ul ul, .item-list ul ol,
 206 .item-list ol ol, .item-list ol ul {
 207   margin: 0;
 208 }
 209
 210 li {
 211   margin: 0;
 212   padding: 0;
 213 }
 214
 215 .item-list ul li,
 216 ul.menu li,
 217 li.expanded,
 218 li.collapsed,
 219 li.leaf /* Drupal override */ {
 220   margin: 0;
 221   padding: 0;
 222 }
 223
 224 ul          { list-style-type: disc; }
 225 ul ul       { list-style-type: circle; }
 226 ul ul ul    { list-style-type: square; }
 227 ul ul ul ul { list-style-type: circle; }
 228 ol          { list-style-type: decimal; }
 229 ol ol       { list-style-type: lower-alpha; }
 230 ol ol ol    { list-style-type: decimal; }
 231
 232 dl {
 233 }
 234
 235 dt {
 236   margin: 0;
 237   padding: 0;
 238 }
 239
 240 dd {
 241   margin: 0 0 0 2em; /* LTR */
 242   padding: 0;
 243 }
 244
 245 /*
 246  * Tables
 247  *
 248  * Drupal provides table styling which is only useful for its admin section
 249  * forms, so we override this default CSS. (We set it back in forms.css.)
 250  */
 251 table {
 252   border-collapse: collapse;
 253   /* width: 100%; */ /* Prevent cramped-looking tables */
 254 }
 255
 256 th {
 257   text-align: left; /* LTR */
 258   padding: 0;
 259   border-bottom: none;
 260 }
 261
 262 tbody {
 263   border-top: none;
 264 }
 265
 266 /*
 267  * Abbreviations
 268  */
 269 abbr {
 270   border-bottom: 1px dotted #666;
 271   cursor: help;
 272   white-space: nowrap;
 273 }
 274
 275 abbr.created /* Date-based "abbreviations" show computer-friendly timestamps which are not human-friendly. */ {
 276   border: none;
 277   cursor: auto;
 278   white-space: normal;
 279 }
 280
 281 /*
 282  * Images
 283  */
 284 img {
 285   border: 0;
 286 }
 287
 288 /*
 289  * Forms
 290  */
 291 form {
 292   margin: 0;
 293   padding: 0;
 294 }
 295
 296 fieldset {
 297   padding: 0.5em;
 298 }
 299
 300 /*
 301  * Links
 302  *
 303  * The order of link states are based on Eric Meyer's article:
 304  * http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
 305  */
 306 a:link {
 307 }
 308
 309 a:visited {
 310 }
 311
 312 a:hover,
 313 a:focus {
 314 }
 315
 316 a:active {
 317 }