css/normalize.css

   1 /*! normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */
   2
   3 /* =============================================================================
   4    HTML5 display definitions
   5    ========================================================================== */
   6
   7 /*
   8  * Corrects block display not defined in IE6/7/8/9 & FF3
   9  */
  10
  11 article,
  12 aside,
  13 details,
  14 figcaption,
  15 figure,
  16 footer,
  17 header,
  18 hgroup,
  19 nav,
  20 section,
  21 summary {
  22     display: block;
  23 }
  24
  25 /*
  26  * Corrects inline-block display not defined in IE6/7/8/9 & FF3
  27  */
  28
  29 audio,
  30 canvas,
  31 video {
  32     display: inline-block;
  33     *display: inline;
  34     *zoom: 1;
  35 }
  36
  37 /*
  38  * Prevents modern browsers from displaying 'audio' without controls
  39  * Remove excess height in iOS5 devices
  40  */
  41
  42 audio:not([controls]) {
  43     display: none;
  44     height: 0;
  45 }
  46
  47 /*
  48  * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
  49  * Known issue: no IE6 support
  50  */
  51
  52 [hidden] {
  53     display: none;
  54 }
  55
  56
  57 /* =============================================================================
  58    Base
  59    ========================================================================== */
  60
  61 /*
  62  * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
  63  *    http://clagnut.com/blog/348/#c790
  64  * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
  65  *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
  66  */
  67
  68 html {
  69     font-size: 100%; /* 1 */
  70     -webkit-text-size-adjust: 100%; /* 2 */
  71     -ms-text-size-adjust: 100%; /* 2 */
  72 }
  73
  74 /*
  75  * Addresses font-family inconsistency between 'textarea' and other form elements.
  76  */
  77
  78 html,
  79 button,
  80 input,
  81 select,
  82 textarea {
  83     font-family: sans-serif;
  84 }
  85
  86 /*
  87  * Addresses margins handled incorrectly in IE6/7
  88  */
  89
  90 body {
  91     margin: 0;
  92 }
  93
  94
  95 /* =============================================================================
  96    Links
  97    ========================================================================== */
  98
  99 /*
 100  * Addresses outline displayed oddly in Chrome
 101  */
 102
 103 a:focus {
 104     outline: thin dotted;
 105 }
 106
 107 /*
 108  * Improves readability when focused and also mouse hovered in all browsers
 109  * people.opera.com/patrickl/experiments/keyboard/test
 110  */
 111
 112 a:hover,
 113 a:active {
 114     outline: 0;
 115 }
 116
 117
 118 /* =============================================================================
 119    Typography
 120    ========================================================================== */
 121
 122 /*
 123  * Addresses font sizes and margins set differently in IE6/7
 124  * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
 125  */
 126
 127 h1 {
 128     font-size: 2em;
 129     margin: 0.67em 0;
 130 }
 131
 132 h2 {
 133     font-size: 1.5em;
 134     margin: 0.83em 0;
 135 }
 136
 137 h3 {
 138     font-size: 1.17em;
 139     margin: 1em 0;
 140 }
 141
 142 h4 {
 143     font-size: 1em;
 144     margin: 1.33em 0;
 145 }
 146
 147 h5 {
 148     font-size: 0.83em;
 149     margin: 1.67em 0;
 150 }
 151
 152 h6 {
 153     font-size: 0.75em;
 154     margin: 2.33em 0;
 155 }
 156
 157 /*
 158  * Addresses styling not present in IE7/8/9, S5, Chrome
 159  */
 160
 161 abbr[title] {
 162     border-bottom: 1px dotted;
 163 }
 164
 165 /*
 166  * Addresses style set to 'bolder' in FF3+, S4/5, Chrome
 167 */
 168
 169 b,
 170 strong {
 171     font-weight: bold;
 172 }
 173
 174 blockquote {
 175     margin: 1em 40px;
 176 }
 177
 178 /*
 179  * Addresses styling not present in S5, Chrome
 180  */
 181
 182 dfn {
 183     font-style: italic;
 184 }
 185
 186 /*
 187  * Addresses styling not present in IE6/7/8/9
 188  */
 189
 190 mark {
 191     background: #ff0;
 192     color: #000;
 193 }
 194
 195 /*
 196  * Addresses margins set differently in IE6/7
 197  */
 198
 199 p,
 200 pre {
 201     margin: 1em 0;
 202 }
 203
 204 /*
 205  * Corrects font family set oddly in IE6, S4/5, Chrome
 206  * en.wikipedia.org/wiki/User:Davidgothberg/Test59
 207  */
 208
 209 pre,
 210 code,
 211 kbd,
 212 samp {
 213     font-family: monospace, serif;
 214     _font-family: 'courier new', monospace;
 215     font-size: 1em;
 216 }
 217
 218 /*
 219  * Improves readability of pre-formatted text in all browsers
 220  */
 221
 222 pre {
 223     white-space: pre;
 224     white-space: pre-wrap;
 225     word-wrap: break-word;
 226 }
 227
 228 /*
 229  * 1. Addresses CSS quotes not supported in IE6/7
 230  * 2. Addresses quote property not supported in S4
 231  */
 232
 233 /* 1 */
 234
 235 q {
 236     quotes: none;
 237 }
 238
 239 /* 2 */
 240
 241 q:before,
 242 q:after {
 243     content: '';
 244     content: none;
 245 }
 246
 247 small {
 248     font-size: 75%;
 249 }
 250
 251 /*
 252  * Prevents sub and sup affecting line-height in all browsers
 253  * gist.github.com/413930
 254  */
 255
 256 sub,
 257 sup {
 258     font-size: 75%;
 259     line-height: 0;
 260     position: relative;
 261     vertical-align: baseline;
 262 }
 263
 264 sup {
 265     top: -0.5em;
 266 }
 267
 268 sub {
 269     bottom: -0.25em;
 270 }
 271
 272
 273 /* =============================================================================
 274    Lists
 275    ========================================================================== */
 276
 277 /*
 278  * Addresses margins set differently in IE6/7
 279  */
 280
 281 dl,
 282 menu,
 283 ol,
 284 ul {
 285     margin: 1em 0;
 286 }
 287
 288 dd {
 289     margin: 0 0 0 40px;
 290 }
 291
 292 /*
 293  * Addresses paddings set differently in IE6/7
 294  */
 295
 296 menu,
 297 ol,
 298 ul {
 299     padding: 0 0 0 40px;
 300 }
 301
 302 /*
 303  * Corrects list images handled incorrectly in IE7
 304  */
 305
 306 nav ul,
 307 nav ol {
 308     list-style: none;
 309     list-style-image: none;
 310 }
 311
 312
 313 /* =============================================================================
 314    Embedded content
 315    ========================================================================== */
 316
 317 /*
 318  * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
 319  * 2. Improves image quality when scaled in IE7
 320  *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 321  */
 322
 323 img {
 324     border: 0; /* 1 */
 325     -ms-interpolation-mode: bicubic; /* 2 */
 326 }
 327
 328 /*
 329  * Corrects overflow displayed oddly in IE9
 330  */
 331
 332 svg:not(:root) {
 333     overflow: hidden;
 334 }
 335
 336
 337 /* =============================================================================
 338    Figures
 339    ========================================================================== */
 340
 341 /*
 342  * Addresses margin not present in IE6/7/8/9, S5, O11
 343  */
 344
 345 figure {
 346     margin: 0;
 347 }
 348
 349
 350 /* =============================================================================
 351    Forms
 352    ========================================================================== */
 353
 354 /*
 355  * Corrects margin displayed oddly in IE6/7
 356  */
 357
 358 form {
 359     margin: 0;
 360 }
 361
 362 /*
 363  * Define consistent border, margin, and padding
 364  */
 365
 366 fieldset {
 367     border: 1px solid #c0c0c0;
 368     margin: 0 2px;
 369     padding: 0.35em 0.625em 0.75em;
 370 }
 371
 372 /*
 373  * 1. Corrects color not being inherited in IE6/7/8/9
 374  * 2. Corrects text not wrapping in FF3
 375  * 3. Corrects alignment displayed oddly in IE6/7
 376  */
 377
 378 legend {
 379     border: 0; /* 1 */
 380     padding: 0;
 381     white-space: normal; /* 2 */
 382     *margin-left: -7px; /* 3 */
 383 }
 384
 385 /*
 386  * 1. Corrects font size not being inherited in all browsers
 387  * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
 388  * 3. Improves appearance and consistency in all browsers
 389  */
 390
 391 button,
 392 input,
 393 select,
 394 textarea {
 395     font-size: 100%; /* 1 */
 396     margin: 0; /* 2 */
 397     vertical-align: baseline; /* 3 */
 398     *vertical-align: middle; /* 3 */
 399 }
 400
 401 /*
 402  * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
 403  */
 404
 405 button,
 406 input {
 407     line-height: normal; /* 1 */
 408 }
 409
 410 /*
 411  * 1. Improves usability and consistency of cursor style between image-type 'input' and others
 412  * 2. Corrects inability to style clickable 'input' types in iOS
 413  * 3. Removes inner spacing in IE7 without affecting normal text inputs
 414  *    Known issue: inner spacing remains in IE6
 415  */
 416
 417 button,
 418 input[type="button"],
 419 input[type="reset"],
 420 input[type="submit"] {
 421     cursor: pointer; /* 1 */
 422     -webkit-appearance: button; /* 2 */
 423     *overflow: visible;  /* 3 */
 424 }
 425
 426 /*
 427  * Re-set default cursor for disabled elements
 428  */
 429
 430 button[disabled],
 431 input[disabled] {
 432     cursor: default;
 433 }
 434
 435 /*
 436  * 1. Addresses box sizing set to content-box in IE8/9
 437  * 2. Removes excess padding in IE8/9
 438  * 3. Removes excess padding in IE7
 439       Known issue: excess padding remains in IE6
 440  */
 441
 442 input[type="checkbox"],
 443 input[type="radio"] {
 444     box-sizing: border-box; /* 1 */
 445     padding: 0; /* 2 */
 446     *height: 13px; /* 3 */
 447     *width: 13px; /* 3 */
 448 }
 449
 450 /*
 451  * 1. Addresses appearance set to searchfield in S5, Chrome
 452  * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
 453  */
 454
 455 input[type="search"] {
 456     -webkit-appearance: textfield; /* 1 */
 457     -moz-box-sizing: content-box;
 458     -webkit-box-sizing: content-box; /* 2 */
 459     box-sizing: content-box;
 460 }
 461
 462 /*
 463  * Removes inner padding and search cancel button in S5, Chrome on OS X
 464  */
 465
 466 input[type="search"]::-webkit-search-decoration,
 467 input[type="search"]::-webkit-search-cancel-button {
 468     -webkit-appearance: none;
 469 }
 470
 471 /*
 472  * Removes inner padding and border in FF3+
 473  * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 474  */
 475
 476 button::-moz-focus-inner,
 477 input::-moz-focus-inner {
 478     border: 0;
 479     padding: 0;
 480 }
 481
 482 /*
 483  * 1. Removes default vertical scrollbar in IE6/7/8/9
 484  * 2. Improves readability and alignment in all browsers
 485  */
 486
 487 textarea {
 488     overflow: auto; /* 1 */
 489     vertical-align: top; /* 2 */
 490 }
 491
 492
 493 /* =============================================================================
 494    Tables
 495    ========================================================================== */
 496
 497 /*
 498  * Remove most spacing between table cells
 499  */
 500
 501 table {
 502     border-collapse: collapse;
 503     border-spacing: 0;
 504 }