1/* normalize.css v2.0.1 | MIT License | git.io/normalize */ 2/* ========================================================================== 3 HTML5 display definitions 4 ========================================================================== */ 5/* 6 * Corrects `block` display not defined in IE 8/9. 7 */ 8article, 9aside, 10details, 11figcaption, 12figure, 13footer, 14header, 15hgroup, 16nav, 17section, 18summary { 19 display: block; } 20 21/* 22 * Corrects `inline-block` display not defined in IE 8/9. 23 */ 24audio, 25canvas, 26video { 27 display: inline-block; } 28 29/* 30 * Prevents modern browsers from displaying `audio` without controls. 31 * Remove excess height in iOS 5 devices. 32 */ 33audio:not([controls]) { 34 display: none; 35 height: 0; } 36 37/* 38 * Addresses styling for `hidden` attribute not present in IE 8/9. 39 */ 40[hidden] { 41 display: none; } 42 43/* ========================================================================== 44 Base 45 ========================================================================== */ 46/* 47 * 1. Sets default font family to sans-serif. 48 * 2. Prevents iOS text size adjust after orientation change, without disabling 49 * user zoom. 50 */ 51html { 52 font-family: sans-serif; 53 /* 1 */ 54 -webkit-text-size-adjust: 100%; 55 /* 2 */ 56 -ms-text-size-adjust: 100%; 57 /* 2 */ } 58 59/* 60 * Removes default margin. 61 */ 62body { 63 margin: 0; } 64 65/* ========================================================================== 66 Links 67 ========================================================================== */ 68/* 69 * Addresses `outline` inconsistency between Chrome and other browsers. 70 */ 71a:focus { 72 outline: thin dotted; } 73 74/* 75 * Improves readability when focused and also mouse hovered in all browsers. 76 */ 77a:active, 78a:hover { 79 outline: 0; } 80 81/* ========================================================================== 82 Typography 83 ========================================================================== */ 84/* 85 * Addresses `h1` font sizes within `section` and `article` in Firefox 4+, 86 * Safari 5, and Chrome. 87 */ 88h1 { 89 font-size: 2em; } 90 91/* 92 * Addresses styling not present in IE 8/9, Safari 5, and Chrome. 93 */ 94abbr[title] { 95 border-bottom: 1px dotted; } 96 97/* 98 * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 99 */ 100b, 101strong { 102 font-weight: bold; } 103 104/* 105 * Addresses styling not present in Safari 5 and Chrome. 106 */ 107dfn { 108 font-style: italic; } 109 110/* 111 * Addresses styling not present in IE 8/9. 112 */ 113mark { 114 background: #ff0; 115 color: #000; } 116 117/* 118 * Corrects font family set oddly in Safari 5 and Chrome. 119 */ 120code, 121kbd, 122pre, 123samp { 124 font-family: monospace, serif; 125 font-size: 1em; } 126 127/* 128 * Improves readability of pre-formatted text in all browsers. 129 */ 130pre { 131 white-space: pre; 132 white-space: pre-wrap; 133 word-wrap: break-word; } 134 135/* 136 * Sets consistent quote types. 137 */ 138q { 139 quotes: "\201C" "\201D" "\2018" "\2019"; } 140 141/* 142 * Addresses inconsistent and variable font size in all browsers. 143 */ 144small { 145 font-size: 80%; } 146 147/* 148 * Prevents `sub` and `sup` affecting `line-height` in all browsers. 149 */ 150sub, 151sup { 152 font-size: 75%; 153 line-height: 0; 154 position: relative; 155 vertical-align: baseline; } 156 157sup { 158 top: -0.5em; } 159 160sub { 161 bottom: -0.25em; } 162 163/* ========================================================================== 164 Embedded content 165 ========================================================================== */ 166/* 167 * Removes border when inside `a` element in IE 8/9. 168 */ 169img { 170 border: 0; } 171 172/* 173 * Corrects overflow displayed oddly in IE 9. 174 */ 175svg:not(:root) { 176 overflow: hidden; } 177 178/* ========================================================================== 179 Figures 180 ========================================================================== */ 181/* 182 * Addresses margin not present in IE 8/9 and Safari 5. 183 */ 184figure { 185 margin: 0; } 186 187/* ========================================================================== 188 Forms 189 ========================================================================== */ 190/* 191 * Define consistent border, margin, and padding. 192 */ 193fieldset { 194 border: 1px solid #c0c0c0; 195 margin: 0 2px; 196 padding: 0.35em 0.625em 0.75em; } 197 198/* 199 * 1. Corrects color not being inherited in IE 8/9. 200 * 2. Remove padding so people aren't caught out if they zero out fieldsets. 201 */ 202legend { 203 border: 0; 204 /* 1 */ 205 padding: 0; 206 /* 2 */ } 207 208/* 209 * 1. Corrects font family not being inherited in all browsers. 210 * 2. Corrects font size not being inherited in all browsers. 211 * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome 212 */ 213button, 214input, 215select, 216textarea { 217 font-family: inherit; 218 /* 1 */ 219 font-size: 100%; 220 /* 2 */ 221 margin: 0; 222 /* 3 */ } 223 224/* 225 * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in 226 * the UA stylesheet. 227 */ 228button, 229input { 230 line-height: normal; } 231 232/* 233 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 234 * and `video` controls. 235 * 2. Corrects inability to style clickable `input` types in iOS. 236 * 3. Improves usability and consistency of cursor style between image-type 237 * `input` and others. 238 */ 239button, 240html input[type="button"], 241input[type="reset"], 242input[type="submit"] { 243 -webkit-appearance: button; 244 /* 2 */ 245 cursor: pointer; 246 /* 3 */ } 247 248/* 249 * Re-set default cursor for disabled elements. 250 */ 251button[disabled], 252input[disabled] { 253 cursor: default; } 254 255/* 256 * 1. Addresses box sizing set to `content-box` in IE 8/9. 257 * 2. Removes excess padding in IE 8/9. 258 */ 259input[type="checkbox"], 260input[type="radio"] { 261 box-sizing: border-box; 262 /* 1 */ 263 padding: 0; 264 /* 2 */ } 265 266/* 267 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. 268 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome 269 * (include `-moz` to future-proof). 270 */ 271input[type="search"] { 272 -webkit-appearance: textfield; 273 /* 1 */ 274 -moz-box-sizing: content-box; 275 -webkit-box-sizing: content-box; 276 /* 2 */ 277 box-sizing: content-box; } 278 279/* 280 * Removes inner padding and search cancel button in Safari 5 and Chrome 281 * on OS X. 282 */ 283input[type="search"]::-webkit-search-cancel-button, 284input[type="search"]::-webkit-search-decoration { 285 -webkit-appearance: none; } 286 287/* 288 * Removes inner padding and border in Firefox 4+. 289 */ 290button::-moz-focus-inner, 291input::-moz-focus-inner { 292 border: 0; 293 padding: 0; } 294 295/* 296 * 1. Removes default vertical scrollbar in IE 8/9. 297 * 2. Improves readability and alignment in all browsers. 298 */ 299textarea { 300 overflow: auto; 301 /* 1 */ 302 vertical-align: top; 303 /* 2 */ } 304 305/* ========================================================================== 306 Tables 307 ========================================================================== */ 308/* 309 * Remove most spacing between table cells. 310 */ 311table { 312 border-collapse: collapse; 313 border-spacing: 0; } 314 315*, *:before, *:after { 316 -webkit-box-sizing: border-box; 317 -moz-box-sizing: border-box; 318 box-sizing: border-box; } 319 320html { 321 background: #fdfdfd; 322 font-family: "myriad-pro", "nimbus-sans", helvetica, sans-serif; 323 text-rendering: optimizeLegibility; 324 color: #333333; 325 font-size: 20px; 326 line-height: 1.3; } 327 @media only screen and (min-width: 0) and (max-width: 900px) { 328 html { 329 font-size: 16px; 330 line-height: 1.1; } 331 html h1 { 332 font-size: 26px; } 333 html h2 { 334 font-size: 20px; } 335 html big { 336 font-size: 100%; } } 337 338@media only screen and (min-width: 1000px) { 339 body { 340 width: 900px; 341 margin: 0 auto; } } 342@media only screen and (min-width: 0) and (max-width: 1000px) { 343 body { 344 padding: 0 10%; } } 345 346a { 347 color: #2c5aa0; } 348 349.logo { 350 max-width: 100%; } 351 352h1 { 353 font: normal 32px "adobe-garamond-pro"; } 354 355h2 { 356 font: bold 36px "myriad-pro"; 357 color: #582844; 358 margin-bottom: 0; } 359 h2 + p { 360 margin-top: 15px; } 361 362p { 363 margin: 10px 0 10px; 364 max-width: 90ch; } 365 366h1, h2, h3, h4, h5, h6, li { 367 max-width: 70ch; } 368 369pre { 370 margin: 0; } 371 372code { 373 color: #2c5aa0; 374 display: block; 375 margin-bottom: 30px; 376 font-size: 90%; } 377 378p code { 379 display: inline; 380 font-size: 90%; } 381 382mark { 383 background-color: #ffcc00; } 384 385#mobile-demo { 386 zoom: 1; 387 display: none; } 388 #mobile-demo:before, #mobile-demo:after { 389 content: ""; 390 display: table; } 391 #mobile-demo:after { 392 clear: both; } 393 @media only screen and (min-width: 0) and (max-width: 900px) { 394 #mobile-demo { 395 display: block; } } 396 397#demo { 398 display: none; 399 zoom: 1; 400 background: url(img/scale.png) left bottom repeat-x; 401 min-height: 300px; 402 margin: 120px 0 90px 0; 403 position: relative; } 404 @media only screen and (min-width: 900px) { 405 #demo { 406 display: block; } } 407 #demo:before, #demo:after { 408 content: ""; 409 display: table; } 410 #demo:after { 411 clear: both; } 412 #demo .hint { 413 position: absolute; 414 top: -90px; 415 left: 430px; } 416 #demo .slider-handle { 417 background: transparent url(img/slider.png) left bottom repeat-x; 418 position: absolute; 419 right: -35px; 420 top: -60px; 421 width: 65px; 422 height: 414px; 423 opacity: 0.9; } 424 #demo .slider-handle:hover { 425 cursor: move; 426 opacity: 0.95; } 427 #demo .slider-handle:active { 428 opacity: 1; } 429 #demo #resizable { 430 position: relative; 431 min-height: 200px; 432 width: 500px; } 433 434p { 435 position: relative; } 436 p span { 437 color: #cccccc; 438 position: absolute; 439 left: -1em; } 440