css/normalize.css

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