root / drupal7 / sites / all / themes / zen / STARTERKIT / css / normalize.css @ bfb52287
1 | 87dbc3bf | Benjamin Luce | /**
|
---|---|---|---|
2 | * @file
|
||
3 | * Normalize.css is intended to be used as an alternative to CSS resets.
|
||
4 | *
|
||
5 | * This file is a slight fork of these original sources:
|
||
6 | * - normalize.css v2.1.2 | MIT License | git.io/normalize
|
||
7 | * - normalize.scss v2.1.2 | MIT/GPLv2 License | bit.ly/normalize-with-compass
|
||
8 | *
|
||
9 | * It's suggested that you read the normalize.scss file and customise it to meet
|
||
10 | * your needs, rather then including the file in your project and overriding the
|
||
11 | * defaults later in your CSS.
|
||
12 | * @see http://nicolasgallagher.com/about-normalize-css/
|
||
13 | *
|
||
14 | * Also: @see http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/
|
||
15 | * @see http://snook.ca/archives/html_and_css/no_css_reset/
|
||
16 | */
|
||
17 | |||
18 | /**
|
||
19 | * HTML5 display definitions
|
||
20 | */
|
||
21 | |||
22 | /* Correct `block` display not defined in IE 8/9. */
|
||
23 | article,
|
||
24 | aside,
|
||
25 | details,
|
||
26 | figcaption,
|
||
27 | figure,
|
||
28 | footer,
|
||
29 | header,
|
||
30 | main,
|
||
31 | nav,
|
||
32 | section,
|
||
33 | summary {
|
||
34 | display: block; |
||
35 | } |
||
36 | |||
37 | /* Correct `inline-block` display not defined in IE 8/9. */
|
||
38 | audio,
|
||
39 | canvas,
|
||
40 | video {
|
||
41 | display: inline-block; |
||
42 | *display: inline; |
||
43 | *zoom: 1; |
||
44 | } |
||
45 | |||
46 | /**
|
||
47 | * Prevent modern browsers from displaying `audio` without controls.
|
||
48 | * Remove excess height in iOS 5 devices.
|
||
49 | */
|
||
50 | audio:not([controls]) { |
||
51 | display: none; |
||
52 | height: 0; |
||
53 | } |
||
54 | |||
55 | /* Address styling not present in IE 8/9. */
|
||
56 | [hidden] {
|
||
57 | display: none; |
||
58 | } |
||
59 | |||
60 | /**
|
||
61 | * Base
|
||
62 | *
|
||
63 | * Instead of relying on the fonts that are available on a user's computer, you
|
||
64 | * can use web fonts which, like images, are resources downloaded to the user's
|
||
65 | * browser. Because of the bandwidth and rendering resources required, web fonts
|
||
66 | * should be used with care.
|
||
67 | *
|
||
68 | * Numerous resources for web fonts can be found on Google. Here are a few
|
||
69 | * websites where you can find Open Source fonts to download:
|
||
70 | * - http://www.fontsquirrel.com/fontface
|
||
71 | * - http://www.theleagueofmoveabletype.com
|
||
72 | *
|
||
73 | * In order to use these fonts, you will need to convert them into formats
|
||
74 | * suitable for web fonts. We recommend the free-to-use Font Squirrel's
|
||
75 | * Font-Face Generator:
|
||
76 | * http://www.fontsquirrel.com/fontface/generator
|
||
77 | *
|
||
78 | * The following is an example @font-face declaration. This font can then be
|
||
79 | * used in any ruleset using a property like this: font-family: Example, serif;
|
||
80 | */
|
||
81 | |||
82 | /*
|
||
83 | @font-face {
|
||
84 | font-family: 'Example';
|
||
85 | src: url('../fonts/example.eot');
|
||
86 | src: url('../fonts/example.eot?iefix') format('eot'),
|
||
87 | url('../fonts/example.woff') format('woff'),
|
||
88 | url('../fonts/example.ttf') format('truetype'),
|
||
89 | url('../fonts/example.svg#webfontOkOndcij') format('svg');
|
||
90 | font-weight: normal;
|
||
91 | font-style: normal;
|
||
92 | }
|
||
93 | */
|
||
94 | |||
95 | /**
|
||
96 | * 1. Set default font family to sans-serif.
|
||
97 | * 2. Prevent iOS text size adjust after orientation change, without disabling
|
||
98 | * user zoom.
|
||
99 | * 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
|
||
100 | * `em` units.
|
||
101 | */
|
||
102 | html {
|
||
103 | font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif; /* 1 */ |
||
104 | |||
105 | /* Delete all but one of the following font-size declarations: */
|
||
106 | |||
107 | /* Use a 12px base font size. 16px x 75% = 12px */
|
||
108 | font-size: 75%; /* 3 */ |
||
109 | /* Use a 14px base font size. 16px x .875 = 14px */
|
||
110 | font-size: 87.5%; /* 3 */ |
||
111 | /* Use a 16px base font size. */
|
||
112 | font-size: 100%; /* 3 */ |
||
113 | |||
114 | -ms-text-size-adjust: 100%; /* 2 */ |
||
115 | -webkit-text-size-adjust: 100%; /* 2 */ |
||
116 | |||
117 | /* Establish a vertical rhythm. */
|
||
118 | line-height: 1.5em; |
||
119 | } |
||
120 | |||
121 | /* Address `font-family` inconsistency between `textarea` and other form elements. */
|
||
122 | button,
|
||
123 | input,
|
||
124 | select,
|
||
125 | textarea {
|
||
126 | /**
|
||
127 | * The following font family declarations are available on most computers.
|
||
128 | *
|
||
129 | * A user's web browser will look at the comma-separated list and will
|
||
130 | * attempt to use each font in turn until it finds one that is available
|
||
131 | * on the user's computer. The final "generic" font (sans-serif, serif or
|
||
132 | * monospace) hints at what type of font to use if the web browser doesn't
|
||
133 | * find any of the fonts in the list.
|
||
134 | *
|
||
135 | * font-family: "Times New Roman", Times, Georgia, "DejaVu Serif", serif;
|
||
136 | * font-family: Times, "Times New Roman", Georgia, "DejaVu Serif", serif;
|
||
137 | * font-family: Georgia, "Times New Roman", "DejaVu Serif", serif;
|
||
138 | *
|
||
139 | * font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif;
|
||
140 | * font-family: Tahoma, Verdana, "DejaVu Sans", sans-serif;
|
||
141 | * font-family: Helvetica, Arial, "Nimbus Sans L", sans-serif;
|
||
142 | * font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
|
||
143 | *
|
||
144 | * font-family: "Courier New", "DejaVu Sans Mono", monospace;
|
||
145 | */
|
||
146 | font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif; |
||
147 | } |
||
148 | |||
149 | /* Remove default margin. */
|
||
150 | body {
|
||
151 | margin: 0; |
||
152 | padding: 0; |
||
153 | } |
||
154 | |||
155 | /**
|
||
156 | * Links
|
||
157 | *
|
||
158 | * The order of link states are based on Eric Meyer's article:
|
||
159 | * http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
|
||
160 | */
|
||
161 | a:link { |
||
162 | } |
||
163 | a:visited { |
||
164 | } |
||
165 | a:hover, |
||
166 | a:focus { |
||
167 | } |
||
168 | a:active { |
||
169 | } |
||
170 | |||
171 | /* Address `outline` inconsistency between Chrome and other browsers. */
|
||
172 | a:focus { |
||
173 | outline: thin dotted; |
||
174 | } |
||
175 | |||
176 | /* Improve readability when focused and also mouse hovered in all browsers. */
|
||
177 | a:active, |
||
178 | a:hover { |
||
179 | outline: 0; |
||
180 | } |
||
181 | |||
182 | /**
|
||
183 | * Typography
|
||
184 | *
|
||
185 | * To achieve a pleasant vertical rhythm, we use Compass' Vertical Rhythm mixins
|
||
186 | * so that the line height of our base font becomes the basic unit of vertical
|
||
187 | * measurement. We use multiples of that unit to set the top and bottom margins
|
||
188 | * for our block level elements and to set the line heights of any fonts.
|
||
189 | * For more information, see http://24ways.org/2006/compose-to-a-vertical-rhythm
|
||
190 | */
|
||
191 | |||
192 | /* Set 1 unit of vertical rhythm on the top and bottom margin. */
|
||
193 | p,
|
||
194 | pre {
|
||
195 | margin: 1.5em 0; |
||
196 | } |
||
197 | blockquote {
|
||
198 | /* Also indent the quote on both sides. */
|
||
199 | margin: 1.5em 30px; |
||
200 | } |
||
201 | |||
202 | /**
|
||
203 | * Address variable `h1` font-size and margin within `section` and `article`
|
||
204 | * contexts in Firefox 4+, Safari 5, and Chrome.
|
||
205 | */
|
||
206 | h1 {
|
||
207 | /* Set the font-size and line-height while keeping a proper vertical rhythm. */
|
||
208 | font-size: 2em; |
||
209 | line-height: 1.5em; /* 3rem / 2em = 1.5em */ |
||
210 | /* Set 1 unit of vertical rhythm on the top and bottom margins. */
|
||
211 | margin-top: 0.75em; /* 1.5rem / 2em = .75em */ |
||
212 | margin-bottom: 0.75em; |
||
213 | } |
||
214 | h2 {
|
||
215 | font-size: 1.5em; |
||
216 | line-height: 2em; /* 3rem / 1.5em = 2em */ |
||
217 | margin-top: 1em; /* 1.5rem / 1.5em = 1em */ |
||
218 | margin-bottom: 1em; |
||
219 | } |
||
220 | h3 {
|
||
221 | font-size: 1.17em; |
||
222 | line-height: 1.28205em; /* 1.5rem / 1.17em = 1.28205em */ |
||
223 | margin-top: 1.28205em; |
||
224 | margin-bottom: 1.28205em; |
||
225 | } |
||
226 | h4 {
|
||
227 | font-size: 1em; |
||
228 | line-height: 1.5em; /* 1.5rem / 1em = 1.5em */ |
||
229 | margin-top: 1.5em; |
||
230 | margin-bottom: 1.5em; |
||
231 | } |
||
232 | h5 {
|
||
233 | font-size: 0.83em; |
||
234 | line-height: 1.80723em; /* 1.5rem / 0.83em = 1.80723em */ |
||
235 | margin-top: 1.80723em; |
||
236 | margin-bottom: 1.80723em; |
||
237 | } |
||
238 | h6 {
|
||
239 | font-size: 0.67em; |
||
240 | line-height: 2.23881em; /* 1.5rem / 0.67em = 2.23881em */ |
||
241 | margin-top: 2.23881em; |
||
242 | margin-bottom: 2.23881em; |
||
243 | } |
||
244 | |||
245 | /* Address styling not present in IE 8/9, Safari 5, and Chrome. */
|
||
246 | abbr[title] { |
||
247 | border-bottom: 1px dotted; |
||
248 | } |
||
249 | |||
250 | /* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */
|
||
251 | b,
|
||
252 | strong {
|
||
253 | font-weight: bold; |
||
254 | } |
||
255 | |||
256 | /* Address styling not present in Safari 5 and Chrome. */
|
||
257 | dfn {
|
||
258 | font-style: italic; |
||
259 | } |
||
260 | |||
261 | /* Address differences between Firefox and other browsers. */
|
||
262 | hr {
|
||
263 | -webkit-box-sizing: content-box; |
||
264 | -moz-box-sizing: content-box; |
||
265 | box-sizing: content-box; |
||
266 | height: 0; |
||
267 | border: 1px solid #666; |
||
268 | padding-bottom: -1px; |
||
269 | margin: 1.5em 0; |
||
270 | } |
||
271 | |||
272 | /* Address styling not present in IE 8/9. */
|
||
273 | mark {
|
||
274 | background: #ff0; |
||
275 | color: #000; |
||
276 | } |
||
277 | |||
278 | /* Correct font family set oddly in Safari 5 and Chrome. */
|
||
279 | code,
|
||
280 | kbd,
|
||
281 | pre,
|
||
282 | samp,
|
||
283 | tt,
|
||
284 | var {
|
||
285 | font-family: "Courier New", "DejaVu Sans Mono", monospace, sans-serif; |
||
286 | _font-family: 'courier new', monospace; |
||
287 | font-size: 1em; |
||
288 | line-height: 1.5em; |
||
289 | } |
||
290 | |||
291 | /* Improve readability of pre-formatted text in all browsers. */
|
||
292 | pre {
|
||
293 | white-space: pre; |
||
294 | white-space: pre-wrap; |
||
295 | word-wrap: break-word; |
||
296 | } |
||
297 | |||
298 | /* Set consistent quote types. */
|
||
299 | q {
|
||
300 | quotes: "\201C" "\201D" "\2018" "\2019"; |
||
301 | } |
||
302 | |||
303 | /* Address inconsistent and variable font size in all browsers. */
|
||
304 | small {
|
||
305 | font-size: 80%; |
||
306 | } |
||
307 | |||
308 | /* Prevent `sub` and `sup` affecting `line-height` in all browsers. */
|
||
309 | sub,
|
||
310 | sup {
|
||
311 | font-size: 75%; |
||
312 | line-height: 0; |
||
313 | position: relative; |
||
314 | vertical-align: baseline; |
||
315 | } |
||
316 | sup {
|
||
317 | top: -0.5em; |
||
318 | } |
||
319 | sub {
|
||
320 | bottom: -0.25em; |
||
321 | } |
||
322 | |||
323 | /**
|
||
324 | * Lists
|
||
325 | */
|
||
326 | dl,
|
||
327 | menu,
|
||
328 | ol,
|
||
329 | ul {
|
||
330 | /* Address margins set differently in IE 6/7. */
|
||
331 | margin: 1.5em 0; |
||
332 | } |
||
333 | ol ol, |
||
334 | ol ul, |
||
335 | ul ol, |
||
336 | ul ul { |
||
337 | /* Turn off margins on nested lists. */
|
||
338 | margin: 0; |
||
339 | } |
||
340 | dd {
|
||
341 | margin: 0 0 0 30px; /* LTR */ |
||
342 | } |
||
343 | |||
344 | /* Address paddings set differently in IE 6/7. */
|
||
345 | menu,
|
||
346 | ol,
|
||
347 | ul {
|
||
348 | padding: 0 0 0 30px; /* LTR */ |
||
349 | } |
||
350 | |||
351 | /* Correct list images handled incorrectly in IE 7. */
|
||
352 | nav ul, |
||
353 | nav ol { |
||
354 | list-style: none; |
||
355 | list-style-image: none; |
||
356 | } |
||
357 | |||
358 | /**
|
||
359 | * Embedded content and figures
|
||
360 | *
|
||
361 | * @todo Look into adding responsive embedded video.
|
||
362 | */
|
||
363 | img {
|
||
364 | /* Remove border when inside `a` element in IE 8/9. */
|
||
365 | border: 0; |
||
366 | /* Improve image quality when scaled in IE 7. */
|
||
367 | -ms-interpolation-mode: bicubic; |
||
368 | |||
369 | /* Suppress the space beneath the baseline */
|
||
370 | /* vertical-align: bottom; */
|
||
371 | |||
372 | /* Responsive images */
|
||
373 | max-width: 100%; |
||
374 | height: auto; |
||
375 | /* Correct IE 8 not scaling image height when resized. */
|
||
376 | width: auto; |
||
377 | } |
||
378 | |||
379 | /* Correct overflow displayed oddly in IE 9. */
|
||
380 | svg:not(:root) { |
||
381 | overflow: hidden; |
||
382 | } |
||
383 | |||
384 | /* Address margin not present in IE 8/9 and Safari 5. */
|
||
385 | figure {
|
||
386 | margin: 0; |
||
387 | } |
||
388 | |||
389 | /**
|
||
390 | * Forms
|
||
391 | */
|
||
392 | |||
393 | /* Correct margin displayed oddly in IE 6/7. */
|
||
394 | form {
|
||
395 | margin: 0; |
||
396 | } |
||
397 | |||
398 | /* Define consistent border, margin, and padding. */
|
||
399 | fieldset {
|
||
400 | border: 1px solid #c0c0c0; |
||
401 | margin: 0 2px; |
||
402 | padding: 0.5em 0.625em 1em; |
||
403 | } |
||
404 | |||
405 | /**
|
||
406 | * 1. Correct `color` not being inherited in IE 8/9.
|
||
407 | * 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||
408 | * 3. Correct alignment displayed oddly in IE 6/7.
|
||
409 | */
|
||
410 | legend {
|
||
411 | border: 0; /* 1 */ |
||
412 | padding: 0; /* 2 */ |
||
413 | *margin-left: -7px; /* 3 */ /* LTR */ |
||
414 | } |
||
415 | |||
416 | /**
|
||
417 | * 1. Correct font family not being inherited in all browsers.
|
||
418 | * 2. Correct font size not being inherited in all browsers.
|
||
419 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
|
||
420 | * 4. Improve appearance and consistency with IE 6/7.
|
||
421 | * 5. Keep form elements constrained in their containers.
|
||
422 | */
|
||
423 | button,
|
||
424 | input,
|
||
425 | select,
|
||
426 | textarea {
|
||
427 | font-family: inherit; /* 1 */ |
||
428 | font-size: 100%; /* 2 */ |
||
429 | margin: 0; /* 3 */ |
||
430 | vertical-align: baseline; /* 4 */ |
||
431 | *vertical-align: middle; /* 4 */ |
||
432 | max-width: 100%; /* 5 */ |
||
433 | -webkit-box-sizing: border-box; |
||
434 | -moz-box-sizing: border-box; |
||
435 | box-sizing: border-box; /* 5 */ |
||
436 | } |
||
437 | |||
438 | /**
|
||
439 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||
440 | * the UA stylesheet.
|
||
441 | */
|
||
442 | button,
|
||
443 | input {
|
||
444 | line-height: normal; |
||
445 | } |
||
446 | |||
447 | /**
|
||
448 | * Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||
449 | * All other form control elements do not inherit `text-transform` values.
|
||
450 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
|
||
451 | * Correct `select` style inheritance in Firefox 4+ and Opera.
|
||
452 | */
|
||
453 | button,
|
||
454 | select {
|
||
455 | text-transform: none; |
||
456 | } |
||
457 | |||
458 | /**
|
||
459 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||
460 | * and `video` controls.
|
||
461 | * 2. Correct inability to style clickable `input` types in iOS.
|
||
462 | * 3. Improve usability and consistency of cursor style between image-type
|
||
463 | * `input` and others.
|
||
464 | * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
|
||
465 | * Known issue: inner spacing remains in IE 6.
|
||
466 | */
|
||
467 | button,
|
||
468 | html input[type="button"], /* 1 */ |
||
469 | input[type="reset"], |
||
470 | input[type="submit"] { |
||
471 | -webkit-appearance: button; /* 2 */ |
||
472 | cursor: pointer; /* 3 */ |
||
473 | *overflow: visible; /* 4 */ |
||
474 | } |
||
475 | |||
476 | /**
|
||
477 | * Re-set default cursor for disabled elements.
|
||
478 | */
|
||
479 | button[disabled], |
||
480 | html input[disabled] { |
||
481 | cursor: default; |
||
482 | } |
||
483 | |||
484 | /**
|
||
485 | * 1. Address box sizing set to `content-box` in IE 8/9.
|
||
486 | * 2. Remove excess padding in IE 8/9.
|
||
487 | * 3. Remove excess padding in IE 7.
|
||
488 | * Known issue: excess padding remains in IE 6.
|
||
489 | */
|
||
490 | input[type="checkbox"], |
||
491 | input[type="radio"] { |
||
492 | -webkit-box-sizing: border-box; |
||
493 | -moz-box-sizing: border-box; |
||
494 | box-sizing: border-box; /* 1 */ |
||
495 | padding: 0; /* 2 */ |
||
496 | *height: 13px; /* 3 */ |
||
497 | *width: 13px; /* 3 */ |
||
498 | } |
||
499 | |||
500 | /**
|
||
501 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||
502 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||
503 | * (include `-moz` to future-proof).
|
||
504 | */
|
||
505 | input[type="search"] { |
||
506 | -webkit-appearance: textfield; /* 1 */ |
||
507 | -webkit-box-sizing: content-box; |
||
508 | -moz-box-sizing: content-box; |
||
509 | box-sizing: content-box; /* 2 */ |
||
510 | } |
||
511 | |||
512 | /**
|
||
513 | * Remove inner padding and search cancel button in Safari 5 and Chrome
|
||
514 | * on OS X.
|
||
515 | */
|
||
516 | input[type="search"]::-webkit-search-cancel-button, |
||
517 | input[type="search"]::-webkit-search-decoration { |
||
518 | -webkit-appearance: none; |
||
519 | } |
||
520 | |||
521 | /* Remove inner padding and border in Firefox 4+. */
|
||
522 | button::-moz-focus-inner, |
||
523 | input::-moz-focus-inner { |
||
524 | border: 0; |
||
525 | padding: 0; |
||
526 | } |
||
527 | |||
528 | /**
|
||
529 | * 1. Remove default vertical scrollbar in IE 8/9.
|
||
530 | * 2. Improve readability and alignment in all browsers.
|
||
531 | */
|
||
532 | textarea {
|
||
533 | overflow: auto; /* 1 */ |
||
534 | vertical-align: top; /* 2 */ |
||
535 | } |
||
536 | |||
537 | /* Drupal-style form labels. */
|
||
538 | label {
|
||
539 | display: block; |
||
540 | font-weight: bold; |
||
541 | } |
||
542 | |||
543 | /**
|
||
544 | * Tables
|
||
545 | */
|
||
546 | table {
|
||
547 | /* Remove most spacing between table cells. */
|
||
548 | border-collapse: collapse; |
||
549 | border-spacing: 0; |
||
550 | /* Prevent cramped-looking tables */
|
||
551 | /* width: 100%; */
|
||
552 | /* Add vertical rhythm margins. */
|
||
553 | margin-top: 1.5em; |
||
554 | margin-bottom: 1.5em; |
||
555 | } |