app.css (163666B)
1 /* muli-200normal - latin */ 2 @font-face { 3 font-family: 'Muli'; 4 font-style: normal; 5 font-display: swap; 6 font-weight: 200; 7 src: 8 local('Muli Extra Light '), 9 local('Muli-Extra Light'), 10 url(/fonts/muli-latin-200.woff2) format('woff2'), 11 url(/fonts/muli-latin-200.woff) format('woff'); /* Modern Browsers */ 12 } 13 /* muli-200italic - latin */ 14 @font-face { 15 font-family: 'Muli'; 16 font-style: italic; 17 font-display: swap; 18 font-weight: 200; 19 src: 20 local('Muli Extra Light italic'), 21 local('Muli-Extra Lightitalic'), 22 url(/fonts/muli-latin-200italic.woff2) format('woff2'), 23 url(/fonts/muli-latin-200italic.woff) format('woff'); /* Modern Browsers */ 24 } 25 /* muli-300normal - latin */ 26 @font-face { 27 font-family: 'Muli'; 28 font-style: normal; 29 font-display: swap; 30 font-weight: 300; 31 src: 32 local('Muli Light '), 33 local('Muli-Light'), 34 url(/fonts/muli-latin-300.woff2) format('woff2'), 35 url(/fonts/muli-latin-300.woff) format('woff'); /* Modern Browsers */ 36 } 37 /* muli-300italic - latin */ 38 @font-face { 39 font-family: 'Muli'; 40 font-style: italic; 41 font-display: swap; 42 font-weight: 300; 43 src: 44 local('Muli Light italic'), 45 local('Muli-Lightitalic'), 46 url(/fonts/muli-latin-300italic.woff2) format('woff2'), 47 url(/fonts/muli-latin-300italic.woff) format('woff'); /* Modern Browsers */ 48 } 49 /* muli-400normal - latin */ 50 @font-face { 51 font-family: 'Muli'; 52 font-style: normal; 53 font-display: swap; 54 font-weight: 400; 55 src: 56 local('Muli Regular '), 57 local('Muli-Regular'), 58 url(/fonts/muli-latin-400.woff2) format('woff2'), 59 url(/fonts/muli-latin-400.woff) format('woff'); /* Modern Browsers */ 60 } 61 /* muli-400italic - latin */ 62 @font-face { 63 font-family: 'Muli'; 64 font-style: italic; 65 font-display: swap; 66 font-weight: 400; 67 src: 68 local('Muli Regular italic'), 69 local('Muli-Regularitalic'), 70 url(/fonts/muli-latin-400italic.woff2) format('woff2'), 71 url(/fonts/muli-latin-400italic.woff) format('woff'); /* Modern Browsers */ 72 } 73 /* muli-600normal - latin */ 74 @font-face { 75 font-family: 'Muli'; 76 font-style: normal; 77 font-display: swap; 78 font-weight: 600; 79 src: 80 local('Muli SemiBold '), 81 local('Muli-SemiBold'), 82 url(/fonts/muli-latin-600.woff2) format('woff2'), 83 url(/fonts/muli-latin-600.woff) format('woff'); /* Modern Browsers */ 84 } 85 /* muli-600italic - latin */ 86 @font-face { 87 font-family: 'Muli'; 88 font-style: italic; 89 font-display: swap; 90 font-weight: 600; 91 src: 92 local('Muli SemiBold italic'), 93 local('Muli-SemiBolditalic'), 94 url(/fonts/muli-latin-600italic.woff2) format('woff2'), 95 url(/fonts/muli-latin-600italic.woff) format('woff'); /* Modern Browsers */ 96 } 97 /* muli-700normal - latin */ 98 @font-face { 99 font-family: 'Muli'; 100 font-style: normal; 101 font-display: swap; 102 font-weight: 700; 103 src: 104 local('Muli Bold '), 105 local('Muli-Bold'), 106 url(/fonts/muli-latin-700.woff2) format('woff2'), 107 url(/fonts/muli-latin-700.woff) format('woff'); /* Modern Browsers */ 108 } 109 /* muli-700italic - latin */ 110 @font-face { 111 font-family: 'Muli'; 112 font-style: italic; 113 font-display: swap; 114 font-weight: 700; 115 src: 116 local('Muli Bold italic'), 117 local('Muli-Bolditalic'), 118 url(/fonts/muli-latin-700italic.woff2) format('woff2'), 119 url(/fonts/muli-latin-700italic.woff) format('woff'); /* Modern Browsers */ 120 } 121 /* muli-800normal - latin */ 122 @font-face { 123 font-family: 'Muli'; 124 font-style: normal; 125 font-display: swap; 126 font-weight: 800; 127 src: 128 local('Muli ExtraBold '), 129 local('Muli-ExtraBold'), 130 url(/fonts/muli-latin-800.woff2) format('woff2'), 131 url(/fonts/muli-latin-800.woff) format('woff'); /* Modern Browsers */ 132 } 133 /* muli-800italic - latin */ 134 @font-face { 135 font-family: 'Muli'; 136 font-style: italic; 137 font-display: swap; 138 font-weight: 800; 139 src: 140 local('Muli ExtraBold italic'), 141 local('Muli-ExtraBolditalic'), 142 url(/fonts/muli-latin-800italic.woff2) format('woff2'), 143 url(/fonts/muli-latin-800italic.woff) format('woff'); /* Modern Browsers */ 144 } 145 /* muli-900normal - latin */ 146 @font-face { 147 font-family: 'Muli'; 148 font-style: normal; 149 font-display: swap; 150 font-weight: 900; 151 src: 152 local('Muli Black '), 153 local('Muli-Black'), 154 url(/fonts/muli-latin-900.woff2) format('woff2'), 155 url(/fonts/muli-latin-900.woff) format('woff'); /* Modern Browsers */ 156 } 157 /* muli-900italic - latin */ 158 @font-face { 159 font-family: 'Muli'; 160 font-style: italic; 161 font-display: swap; 162 font-weight: 900; 163 src: 164 local('Muli Black italic'), 165 local('Muli-Blackitalic'), 166 url(/fonts/muli-latin-900italic.woff2) format('woff2'), 167 url(/fonts/muli-latin-900italic.woff) format('woff'); /* Modern Browsers */ 168 } 169 170 171 /*Base Styles*/ 172 /*! TACHYONS v4.7.0 | http://tachyons.io */ 173 /* 174 * NOTE: The Tachyons folder is for backup/reference only. This file references the module 175 * ________ ______ 176 * ___ __/_____ _________ /______ ______________________ 177 * __ / _ __ `/ ___/_ __ \_ / / / __ \_ __ \_ ___/ 178 * _ / / /_/ // /__ _ / / / /_/ // /_/ / / / /(__ ) 179 * /_/ \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/ 180 * /____/ 181 * 182 * TABLE OF CONTENTS 183 * 184 * 1. External Library Includes 185 * - Normalize.css | http://normalize.css.github.io 186 * 2. Tachyons Modules 187 * 3. Variables 188 * - Media Queries 189 * - Colors 190 * 4. Debugging 191 * - Debug all 192 * - Debug children 193 * 194 */ 195 /* External Library Includes */ 196 /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ 197 /* Document 198 ========================================================================== */ 199 /** 200 * 1. Correct the line height in all browsers. 201 * 2. Prevent adjustments of font size after orientation changes in iOS. 202 */ 203 html { 204 line-height: 1.15; /* 1 */ 205 -webkit-text-size-adjust: 100%; /* 2 */ 206 } 207 /* Sections 208 ========================================================================== */ 209 /** 210 * Remove the margin in all browsers. 211 */ 212 body { 213 margin: 0; 214 } 215 /** 216 * Correct the font size and margin on `h1` elements within `section` and 217 * `article` contexts in Chrome, Firefox, and Safari. 218 */ 219 h1 { 220 font-size: 2em; 221 margin: 0.67em 0; 222 } 223 /* Grouping content 224 ========================================================================== */ 225 /** 226 * 1. Add the correct box sizing in Firefox. 227 * 2. Show the overflow in Edge and IE. 228 */ 229 hr { 230 -webkit-box-sizing: content-box; 231 box-sizing: content-box; /* 1 */ 232 height: 0; /* 1 */ 233 overflow: visible; /* 2 */ 234 } 235 /** 236 * 1. Correct the inheritance and scaling of font size in all browsers. 237 * 2. Correct the odd `em` font sizing in all browsers. 238 */ 239 pre { 240 font-family: monospace, monospace; /* 1 */ 241 font-size: 1em; /* 2 */ 242 } 243 /* Text-level semantics 244 ========================================================================== */ 245 /** 246 * Remove the gray background on active links in IE 10. 247 */ 248 a { 249 background-color: transparent; 250 } 251 /** 252 * 1. Remove the bottom border in Chrome 57- 253 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 254 */ 255 abbr[title] { 256 border-bottom: none; /* 1 */ 257 text-decoration: underline; /* 2 */ 258 -webkit-text-decoration: underline dotted; 259 text-decoration: underline dotted; /* 2 */ 260 } 261 /** 262 * Add the correct font weight in Chrome, Edge, and Safari. 263 */ 264 b, 265 strong { 266 font-weight: bolder; 267 } 268 /** 269 * 1. Correct the inheritance and scaling of font size in all browsers. 270 * 2. Correct the odd `em` font sizing in all browsers. 271 */ 272 code, 273 kbd, 274 samp { 275 font-family: monospace, monospace; /* 1 */ 276 font-size: 1em; /* 2 */ 277 } 278 /** 279 * Add the correct font size in all browsers. 280 */ 281 small { 282 font-size: 80%; 283 } 284 /** 285 * Prevent `sub` and `sup` elements from affecting the line height in 286 * all browsers. 287 */ 288 sub, 289 sup { 290 font-size: 75%; 291 line-height: 0; 292 position: relative; 293 vertical-align: baseline; 294 } 295 sub { 296 bottom: -0.25em; 297 } 298 sup { 299 top: -0.5em; 300 } 301 /* Embedded content 302 ========================================================================== */ 303 /** 304 * Remove the border on images inside links in IE 10. 305 */ 306 img { 307 border-style: none; 308 } 309 /* Forms 310 ========================================================================== */ 311 /** 312 * 1. Change the font styles in all browsers. 313 * 2. Remove the margin in Firefox and Safari. 314 */ 315 button, 316 input, 317 optgroup, 318 select, 319 textarea { 320 font-family: inherit; /* 1 */ 321 font-size: 100%; /* 1 */ 322 line-height: 1.15; /* 1 */ 323 margin: 0; /* 2 */ 324 } 325 /** 326 * Show the overflow in IE. 327 * 1. Show the overflow in Edge. 328 */ 329 button, 330 input { /* 1 */ 331 overflow: visible; 332 } 333 /** 334 * Remove the inheritance of text transform in Edge, Firefox, and IE. 335 * 1. Remove the inheritance of text transform in Firefox. 336 */ 337 button, 338 select { /* 1 */ 339 text-transform: none; 340 } 341 /** 342 * Correct the inability to style clickable types in iOS and Safari. 343 */ 344 button, 345 [type="button"], 346 [type="reset"], 347 [type="submit"] { 348 -webkit-appearance: button; 349 } 350 /** 351 * Remove the inner border and padding in Firefox. 352 */ 353 button::-moz-focus-inner, 354 [type="button"]::-moz-focus-inner, 355 [type="reset"]::-moz-focus-inner, 356 [type="submit"]::-moz-focus-inner { 357 border-style: none; 358 padding: 0; 359 } 360 /** 361 * Restore the focus styles unset by the previous rule. 362 */ 363 button:-moz-focusring, 364 [type="button"]:-moz-focusring, 365 [type="reset"]:-moz-focusring, 366 [type="submit"]:-moz-focusring { 367 outline: 1px dotted ButtonText; 368 } 369 /** 370 * Correct the padding in Firefox. 371 */ 372 fieldset { 373 padding: 0.35em 0.75em 0.625em; 374 } 375 /** 376 * 1. Correct the text wrapping in Edge and IE. 377 * 2. Correct the color inheritance from `fieldset` elements in IE. 378 * 3. Remove the padding so developers are not caught out when they zero out 379 * `fieldset` elements in all browsers. 380 */ 381 legend { 382 -webkit-box-sizing: border-box; 383 box-sizing: border-box; /* 1 */ 384 color: inherit; /* 2 */ 385 display: table; /* 1 */ 386 max-width: 100%; /* 1 */ 387 padding: 0; /* 3 */ 388 white-space: normal; /* 1 */ 389 } 390 /** 391 * Add the correct vertical alignment in Chrome, Firefox, and Opera. 392 */ 393 progress { 394 vertical-align: baseline; 395 } 396 /** 397 * Remove the default vertical scrollbar in IE 10+. 398 */ 399 textarea { 400 overflow: auto; 401 } 402 /** 403 * 1. Add the correct box sizing in IE 10. 404 * 2. Remove the padding in IE 10. 405 */ 406 [type="checkbox"], 407 [type="radio"] { 408 -webkit-box-sizing: border-box; 409 box-sizing: border-box; /* 1 */ 410 padding: 0; /* 2 */ 411 } 412 /** 413 * Correct the cursor style of increment and decrement buttons in Chrome. 414 */ 415 [type="number"]::-webkit-inner-spin-button, 416 [type="number"]::-webkit-outer-spin-button { 417 height: auto; 418 } 419 /** 420 * 1. Correct the odd appearance in Chrome and Safari. 421 * 2. Correct the outline style in Safari. 422 */ 423 [type="search"] { 424 -webkit-appearance: textfield; /* 1 */ 425 outline-offset: -2px; /* 2 */ 426 } 427 /** 428 * Remove the inner padding in Chrome and Safari on macOS. 429 */ 430 [type="search"]::-webkit-search-decoration { 431 -webkit-appearance: none; 432 } 433 /** 434 * 1. Correct the inability to style clickable types in iOS and Safari. 435 * 2. Change font properties to `inherit` in Safari. 436 */ 437 ::-webkit-file-upload-button { 438 -webkit-appearance: button; /* 1 */ 439 font: inherit; /* 2 */ 440 } 441 /* Interactive 442 ========================================================================== */ 443 /* 444 * Add the correct display in Edge, IE 10+, and Firefox. 445 */ 446 details { 447 display: block; 448 } 449 /* 450 * Add the correct display in all browsers. 451 */ 452 summary { 453 display: list-item; 454 } 455 /* Misc 456 ========================================================================== */ 457 /** 458 * Add the correct display in IE 10+. 459 */ 460 template { 461 display: none; 462 } 463 /** 464 * Add the correct display in IE 10. 465 */ 466 [hidden] { 467 display: none; 468 } 469 /* Modules */ 470 /* 471 472 BOX SIZING 473 474 */ 475 html, 476 body, 477 div, 478 article, 479 aside, 480 section, 481 main, 482 nav, 483 footer, 484 header, 485 form, 486 fieldset, 487 legend, 488 pre, 489 code, 490 a, 491 h1,h2,h3,h4,h5,h6, 492 p, 493 ul, 494 ol, 495 li, 496 dl, 497 dt, 498 dd, 499 blockquote, 500 figcaption, 501 figure, 502 textarea, 503 table, 504 td, 505 th, 506 tr, 507 input[type="email"], 508 input[type="number"], 509 input[type="password"], 510 input[type="tel"], 511 input[type="text"], 512 input[type="url"], 513 .border-box { 514 -webkit-box-sizing: border-box; 515 box-sizing: border-box; 516 } 517 /*@import 'tachyons/src/_aspect-ratios';*/ 518 /* 519 520 IMAGES 521 Docs: http://tachyons.io/docs/elements/images/ 522 523 */ 524 /* Responsive images! */ 525 img { max-width: 100%; } 526 /* 527 528 BACKGROUND SIZE 529 Docs: http://tachyons.io/docs/themes/background-size/ 530 531 Media Query Extensions: 532 -ns = not-small 533 -m = medium 534 -l = large 535 536 */ 537 /* 538 Often used in combination with background image set as an inline style 539 on an html element. 540 */ 541 .cover { background-size: cover!important; } 542 .contain { background-size: contain!important; } 543 @media screen and (min-width: 30em) { 544 .cover-ns { background-size: cover!important; } 545 .contain-ns { background-size: contain!important; } 546 } 547 @media screen and (min-width: 30em) and (max-width: 60em) { 548 .cover-m { background-size: cover!important; } 549 .contain-m { background-size: contain!important; } 550 } 551 @media screen and (min-width: 60em) { 552 .cover-l { background-size: cover!important; } 553 .contain-l { background-size: contain!important; } 554 } 555 /* 556 557 BACKGROUND POSITION 558 559 Base: 560 bg = background 561 562 Modifiers: 563 -center = center center 564 -top = top center 565 -right = center right 566 -bottom = bottom center 567 -left = center left 568 569 Media Query Extensions: 570 -ns = not-small 571 -m = medium 572 -l = large 573 574 */ 575 .bg-center { 576 background-repeat: no-repeat; 577 background-position: center center; 578 } 579 .bg-top { 580 background-repeat: no-repeat; 581 background-position: top center; 582 } 583 .bg-right { 584 background-repeat: no-repeat; 585 background-position: center right; 586 } 587 .bg-bottom { 588 background-repeat: no-repeat; 589 background-position: bottom center; 590 } 591 .bg-left { 592 background-repeat: no-repeat; 593 background-position: center left; 594 } 595 @media screen and (min-width: 30em) { 596 .bg-center-ns { 597 background-repeat: no-repeat; 598 background-position: center center; 599 } 600 601 .bg-top-ns { 602 background-repeat: no-repeat; 603 background-position: top center; 604 } 605 606 .bg-right-ns { 607 background-repeat: no-repeat; 608 background-position: center right; 609 } 610 611 .bg-bottom-ns { 612 background-repeat: no-repeat; 613 background-position: bottom center; 614 } 615 616 .bg-left-ns { 617 background-repeat: no-repeat; 618 background-position: center left; 619 } 620 } 621 @media screen and (min-width: 30em) and (max-width: 60em) { 622 .bg-center-m { 623 background-repeat: no-repeat; 624 background-position: center center; 625 } 626 627 .bg-top-m { 628 background-repeat: no-repeat; 629 background-position: top center; 630 } 631 632 .bg-right-m { 633 background-repeat: no-repeat; 634 background-position: center right; 635 } 636 637 .bg-bottom-m { 638 background-repeat: no-repeat; 639 background-position: bottom center; 640 } 641 642 .bg-left-m { 643 background-repeat: no-repeat; 644 background-position: center left; 645 } 646 } 647 @media screen and (min-width: 60em) { 648 .bg-center-l { 649 background-repeat: no-repeat; 650 background-position: center center; 651 } 652 653 .bg-top-l { 654 background-repeat: no-repeat; 655 background-position: top center; 656 } 657 658 .bg-right-l { 659 background-repeat: no-repeat; 660 background-position: center right; 661 } 662 663 .bg-bottom-l { 664 background-repeat: no-repeat; 665 background-position: bottom center; 666 } 667 668 .bg-left-l { 669 background-repeat: no-repeat; 670 background-position: center left; 671 } 672 } 673 /*@import 'tachyons/src/_outlines';*/ 674 /* 675 676 BORDERS 677 Docs: http://tachyons.io/docs/themes/borders/ 678 679 Base: 680 b = border 681 682 Modifiers: 683 a = all 684 t = top 685 r = right 686 b = bottom 687 l = left 688 n = none 689 690 Media Query Extensions: 691 -ns = not-small 692 -m = medium 693 -l = large 694 695 */ 696 .ba { border-style: solid; border-width: 1px; } 697 .bt { border-top-style: solid; border-top-width: 1px; } 698 .br { border-right-style: solid; border-right-width: 1px; } 699 .bb { border-bottom-style: solid; border-bottom-width: 1px; } 700 .bl { border-left-style: solid; border-left-width: 1px; } 701 .bn { border-style: none; border-width: 0; } 702 @media screen and (min-width: 30em) { 703 .ba-ns { border-style: solid; border-width: 1px; } 704 .bt-ns { border-top-style: solid; border-top-width: 1px; } 705 .br-ns { border-right-style: solid; border-right-width: 1px; } 706 .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; } 707 .bl-ns { border-left-style: solid; border-left-width: 1px; } 708 .bn-ns { border-style: none; border-width: 0; } 709 } 710 @media screen and (min-width: 30em) and (max-width: 60em) { 711 .ba-m { border-style: solid; border-width: 1px; } 712 .bt-m { border-top-style: solid; border-top-width: 1px; } 713 .br-m { border-right-style: solid; border-right-width: 1px; } 714 .bb-m { border-bottom-style: solid; border-bottom-width: 1px; } 715 .bl-m { border-left-style: solid; border-left-width: 1px; } 716 .bn-m { border-style: none; border-width: 0; } 717 } 718 @media screen and (min-width: 60em) { 719 .ba-l { border-style: solid; border-width: 1px; } 720 .bt-l { border-top-style: solid; border-top-width: 1px; } 721 .br-l { border-right-style: solid; border-right-width: 1px; } 722 .bb-l { border-bottom-style: solid; border-bottom-width: 1px; } 723 .bl-l { border-left-style: solid; border-left-width: 1px; } 724 .bn-l { border-style: none; border-width: 0; } 725 } 726 /* 727 728 BORDER COLORS 729 Docs: http://tachyons.io/docs/themes/borders/ 730 731 Border colors can be used to extend the base 732 border classes ba,bt,bb,br,bl found in the _borders.css file. 733 734 The base border class by default will set the color of the border 735 to that of the current text color. These classes are for the cases 736 where you desire for the text and border colors to be different. 737 738 Base: 739 b = border 740 741 Modifiers: 742 --color-name = each color variable name is also a border color name 743 744 */ 745 .b--black { border-color: #000; } 746 .b--near-black { border-color: #111; } 747 .b--dark-gray { border-color: #333; } 748 .b--mid-gray { border-color: #555; } 749 .b--gray { border-color: #777; } 750 .b--silver { border-color: #999; } 751 .b--light-silver { border-color: #aaa; } 752 .b--moon-gray { border-color: #ccc; } 753 .b--light-gray { border-color: #eee; } 754 .b--near-white { border-color: #f4f4f4; } 755 .b--white { border-color: #fff; } 756 .b--white-90 { border-color: rgba(255, 255, 255, .9); } 757 .b--white-80 { border-color: rgba(255, 255, 255, .8); } 758 .b--white-70 { border-color: rgba(255, 255, 255, .7); } 759 .b--white-60 { border-color: rgba(255, 255, 255, .6); } 760 .b--white-50 { border-color: rgba(255, 255, 255, .5); } 761 .b--white-40 { border-color: rgba(255, 255, 255, .4); } 762 .b--white-30 { border-color: rgba(255, 255, 255, .3); } 763 .b--white-20 { border-color: rgba(255, 255, 255, .2); } 764 .b--white-10 { border-color: rgba(255, 255, 255, .1); } 765 .b--white-05 { border-color: rgba(255, 255, 255, .05); } 766 .b--white-025 { border-color: rgba(255, 255, 255, .025); } 767 .b--white-0125 { border-color: rgba(255, 255, 255, .0125); } 768 .b--black-90 { border-color: rgba(0, 0, 0, .9); } 769 .b--black-80 { border-color: rgba(0, 0, 0, .8); } 770 .b--black-70 { border-color: rgba(0, 0, 0, .7); } 771 .b--black-60 { border-color: rgba(0, 0, 0, .6); } 772 .b--black-50 { border-color: rgba(0, 0, 0, .5); } 773 .b--black-40 { border-color: rgba(0, 0, 0, .4); } 774 .b--black-30 { border-color: rgba(0, 0, 0, .3); } 775 .b--black-20 { border-color: rgba(0, 0, 0, .2); } 776 .b--black-10 { border-color: rgba(0, 0, 0, .1); } 777 .b--black-05 { border-color: rgba(0, 0, 0, .05); } 778 .b--black-025 { border-color: rgba(0, 0, 0, .025); } 779 .b--black-0125 { border-color: rgba(0, 0, 0, .0125); } 780 .b--dark-red { border-color: #e7040f; } 781 .b--red { border-color: #ff4136; } 782 .b--light-red { border-color: #ff725c; } 783 .b--orange { border-color: #ff6300; } 784 .b--gold { border-color: #ffb700; } 785 .b--yellow { border-color: #ffd700; } 786 .b--light-yellow { border-color: #fbf1a9; } 787 .b--purple { border-color: #5e2ca5; } 788 .b--light-purple { border-color: #a463f2; } 789 .b--dark-pink { border-color: #d5008f; } 790 .b--hot-pink { border-color: #ff41b4; } 791 .b--pink { border-color: #ff80cc; } 792 .b--light-pink { border-color: #ffa3d7; } 793 .b--dark-green { border-color: #137752; } 794 .b--green { border-color: #19a974; } 795 .b--light-green { border-color: #9eebcf; } 796 .b--navy { border-color: #001b44; } 797 .b--dark-blue { border-color: #00449e; } 798 .b--blue { border-color: #0594CB; } 799 .b--light-blue { border-color: #96ccff; } 800 .b--lightest-blue { border-color: #cdecff; } 801 .b--washed-blue { border-color: #f6fffe; } 802 .b--washed-green { border-color: #e8fdf5; } 803 .b--washed-yellow { border-color: #fffceb; } 804 .b--washed-red { border-color: #ffdfdf; } 805 .b--transparent { border-color: transparent; } 806 .b--inherit { border-color: inherit; } 807 /* 808 809 BORDER RADIUS 810 Docs: http://tachyons.io/docs/themes/border-radius/ 811 812 Base: 813 br = border-radius 814 815 Modifiers: 816 0 = 0/none 817 1 = 1st step in scale 818 2 = 2nd step in scale 819 3 = 3rd step in scale 820 4 = 4th step in scale 821 822 Literal values: 823 -100 = 100% 824 -pill = 9999px 825 826 Media Query Extensions: 827 -ns = not-small 828 -m = medium 829 -l = large 830 831 */ 832 .br0 { border-radius: 0; } 833 .br1 { border-radius: .125rem; } 834 .br2 { border-radius: .25rem; } 835 .br3 { border-radius: .5rem; } 836 .br4 { border-radius: 1rem; } 837 .br-100 { border-radius: 100%; } 838 .br-pill { border-radius: 9999px; } 839 .br--bottom { 840 border-top-left-radius: 0; 841 border-top-right-radius: 0; 842 } 843 .br--top { 844 border-bottom-left-radius: 0; 845 border-bottom-right-radius: 0; 846 } 847 .br--right { 848 border-top-left-radius: 0; 849 border-bottom-left-radius: 0; 850 } 851 .br--left { 852 border-top-right-radius: 0; 853 border-bottom-right-radius: 0; 854 } 855 @media screen and (min-width: 30em) { 856 .br0-ns { border-radius: 0; } 857 .br1-ns { border-radius: .125rem; } 858 .br2-ns { border-radius: .25rem; } 859 .br3-ns { border-radius: .5rem; } 860 .br4-ns { border-radius: 1rem; } 861 .br-100-ns { border-radius: 100%; } 862 .br-pill-ns { border-radius: 9999px; } 863 .br--bottom-ns { 864 border-top-left-radius: 0; 865 border-top-right-radius: 0; 866 } 867 .br--top-ns { 868 border-bottom-left-radius: 0; 869 border-bottom-right-radius: 0; 870 } 871 .br--right-ns { 872 border-top-left-radius: 0; 873 border-bottom-left-radius: 0; 874 } 875 .br--left-ns { 876 border-top-right-radius: 0; 877 border-bottom-right-radius: 0; 878 } 879 } 880 @media screen and (min-width: 30em) and (max-width: 60em) { 881 .br0-m { border-radius: 0; } 882 .br1-m { border-radius: .125rem; } 883 .br2-m { border-radius: .25rem; } 884 .br3-m { border-radius: .5rem; } 885 .br4-m { border-radius: 1rem; } 886 .br-100-m { border-radius: 100%; } 887 .br-pill-m { border-radius: 9999px; } 888 .br--bottom-m { 889 border-top-left-radius: 0; 890 border-top-right-radius: 0; 891 } 892 .br--top-m { 893 border-bottom-left-radius: 0; 894 border-bottom-right-radius: 0; 895 } 896 .br--right-m { 897 border-top-left-radius: 0; 898 border-bottom-left-radius: 0; 899 } 900 .br--left-m { 901 border-top-right-radius: 0; 902 border-bottom-right-radius: 0; 903 } 904 } 905 @media screen and (min-width: 60em) { 906 .br0-l { border-radius: 0; } 907 .br1-l { border-radius: .125rem; } 908 .br2-l { border-radius: .25rem; } 909 .br3-l { border-radius: .5rem; } 910 .br4-l { border-radius: 1rem; } 911 .br-100-l { border-radius: 100%; } 912 .br-pill-l { border-radius: 9999px; } 913 .br--bottom-l { 914 border-top-left-radius: 0; 915 border-top-right-radius: 0; 916 } 917 .br--top-l { 918 border-bottom-left-radius: 0; 919 border-bottom-right-radius: 0; 920 } 921 .br--right-l { 922 border-top-left-radius: 0; 923 border-bottom-left-radius: 0; 924 } 925 .br--left-l { 926 border-top-right-radius: 0; 927 border-bottom-right-radius: 0; 928 } 929 } 930 /* 931 932 BORDER STYLES 933 Docs: http://tachyons.io/docs/themes/borders/ 934 935 Depends on base border module in _borders.css 936 937 Base: 938 b = border-style 939 940 Modifiers: 941 --none = none 942 --dotted = dotted 943 --dashed = dashed 944 --solid = solid 945 946 Media Query Extensions: 947 -ns = not-small 948 -m = medium 949 -l = large 950 951 */ 952 .b--dotted { border-style: dotted; } 953 .b--dashed { border-style: dashed; } 954 .b--solid { border-style: solid; } 955 .b--none { border-style: none; } 956 @media screen and (min-width: 30em) { 957 .b--dotted-ns { border-style: dotted; } 958 .b--dashed-ns { border-style: dashed; } 959 .b--solid-ns { border-style: solid; } 960 .b--none-ns { border-style: none; } 961 } 962 @media screen and (min-width: 30em) and (max-width: 60em) { 963 .b--dotted-m { border-style: dotted; } 964 .b--dashed-m { border-style: dashed; } 965 .b--solid-m { border-style: solid; } 966 .b--none-m { border-style: none; } 967 } 968 @media screen and (min-width: 60em) { 969 .b--dotted-l { border-style: dotted; } 970 .b--dashed-l { border-style: dashed; } 971 .b--solid-l { border-style: solid; } 972 .b--none-l { border-style: none; } 973 } 974 /* 975 976 BORDER WIDTHS 977 Docs: http://tachyons.io/docs/themes/borders/ 978 979 Base: 980 bw = border-width 981 982 Modifiers: 983 0 = 0 width border 984 1 = 1st step in border-width scale 985 2 = 2nd step in border-width scale 986 3 = 3rd step in border-width scale 987 4 = 4th step in border-width scale 988 5 = 5th step in border-width scale 989 990 Media Query Extensions: 991 -ns = not-small 992 -m = medium 993 -l = large 994 995 */ 996 .bw0 { border-width: 0; } 997 .bw1 { border-width: .125rem; } 998 .bw2 { border-width: .25rem; } 999 .bw3 { border-width: .5rem; } 1000 .bw4 { border-width: 1rem; } 1001 .bw5 { border-width: 2rem; } 1002 /* Resets */ 1003 .bt-0 { border-top-width: 0; } 1004 .br-0 { border-right-width: 0; } 1005 .bb-0 { border-bottom-width: 0; } 1006 .bl-0 { border-left-width: 0; } 1007 @media screen and (min-width: 30em) { 1008 .bw0-ns { border-width: 0; } 1009 .bw1-ns { border-width: .125rem; } 1010 .bw2-ns { border-width: .25rem; } 1011 .bw3-ns { border-width: .5rem; } 1012 .bw4-ns { border-width: 1rem; } 1013 .bw5-ns { border-width: 2rem; } 1014 .bt-0-ns { border-top-width: 0; } 1015 .br-0-ns { border-right-width: 0; } 1016 .bb-0-ns { border-bottom-width: 0; } 1017 .bl-0-ns { border-left-width: 0; } 1018 } 1019 @media screen and (min-width: 30em) and (max-width: 60em) { 1020 .bw0-m { border-width: 0; } 1021 .bw1-m { border-width: .125rem; } 1022 .bw2-m { border-width: .25rem; } 1023 .bw3-m { border-width: .5rem; } 1024 .bw4-m { border-width: 1rem; } 1025 .bw5-m { border-width: 2rem; } 1026 .bt-0-m { border-top-width: 0; } 1027 .br-0-m { border-right-width: 0; } 1028 .bb-0-m { border-bottom-width: 0; } 1029 .bl-0-m { border-left-width: 0; } 1030 } 1031 @media screen and (min-width: 60em) { 1032 .bw0-l { border-width: 0; } 1033 .bw1-l { border-width: .125rem; } 1034 .bw2-l { border-width: .25rem; } 1035 .bw3-l { border-width: .5rem; } 1036 .bw4-l { border-width: 1rem; } 1037 .bw5-l { border-width: 2rem; } 1038 .bt-0-l { border-top-width: 0; } 1039 .br-0-l { border-right-width: 0; } 1040 .bb-0-l { border-bottom-width: 0; } 1041 .bl-0-l { border-left-width: 0; } 1042 } 1043 /* 1044 1045 BOX-SHADOW 1046 Docs: http://tachyons.io/docs/themes/box-shadow/ 1047 1048 Media Query Extensions: 1049 -ns = not-small 1050 -m = medium 1051 -l = large 1052 1053 */ 1054 .shadow-1 { -webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); } 1055 .shadow-2 { -webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); } 1056 .shadow-3 { -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); } 1057 .shadow-4 { -webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); } 1058 .shadow-5 { -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); } 1059 @media screen and (min-width: 30em) { 1060 .shadow-1-ns { -webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); } 1061 .shadow-2-ns { -webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); } 1062 .shadow-3-ns { -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); } 1063 .shadow-4-ns { -webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); } 1064 .shadow-5-ns { -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); } 1065 } 1066 @media screen and (min-width: 30em) and (max-width: 60em) { 1067 .shadow-1-m { -webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); } 1068 .shadow-2-m { -webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); } 1069 .shadow-3-m { -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); } 1070 .shadow-4-m { -webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); } 1071 .shadow-5-m { -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); } 1072 } 1073 @media screen and (min-width: 60em) { 1074 .shadow-1-l { -webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); } 1075 .shadow-2-l { -webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); } 1076 .shadow-3-l { -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); } 1077 .shadow-4-l { -webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); } 1078 .shadow-5-l { -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); } 1079 } 1080 /*@import 'tachyons/src/_code';*/ 1081 /* 1082 1083 COORDINATES 1084 Docs: http://tachyons.io/docs/layout/position/ 1085 1086 Use in combination with the position module. 1087 1088 Base: 1089 top 1090 bottom 1091 right 1092 left 1093 1094 Modifiers: 1095 -0 = literal value 0 1096 -1 = literal value 1 1097 -2 = literal value 2 1098 --1 = literal value -1 1099 --2 = literal value -2 1100 1101 Media Query Extensions: 1102 -ns = not-small 1103 -m = medium 1104 -l = large 1105 1106 */ 1107 .top-0 { top: 0; } 1108 .right-0 { right: 0; } 1109 .bottom-0 { bottom: 0; } 1110 .left-0 { left: 0; } 1111 .top-1 { top: 1rem; } 1112 .right-1 { right: 1rem; } 1113 .bottom-1 { bottom: 1rem; } 1114 .left-1 { left: 1rem; } 1115 .top-2 { top: 2rem; } 1116 .right-2 { right: 2rem; } 1117 .bottom-2 { bottom: 2rem; } 1118 .left-2 { left: 2rem; } 1119 .top--1 { top: -1rem; } 1120 .right--1 { right: -1rem; } 1121 .bottom--1 { bottom: -1rem; } 1122 .left--1 { left: -1rem; } 1123 .top--2 { top: -2rem; } 1124 .right--2 { right: -2rem; } 1125 .bottom--2 { bottom: -2rem; } 1126 .left--2 { left: -2rem; } 1127 .absolute--fill { 1128 top: 0; 1129 right: 0; 1130 bottom: 0; 1131 left: 0; 1132 } 1133 @media screen and (min-width: 30em) { 1134 .top-0-ns { top: 0; } 1135 .left-0-ns { left: 0; } 1136 .right-0-ns { right: 0; } 1137 .bottom-0-ns { bottom: 0; } 1138 .top-1-ns { top: 1rem; } 1139 .left-1-ns { left: 1rem; } 1140 .right-1-ns { right: 1rem; } 1141 .bottom-1-ns { bottom: 1rem; } 1142 .top-2-ns { top: 2rem; } 1143 .left-2-ns { left: 2rem; } 1144 .right-2-ns { right: 2rem; } 1145 .bottom-2-ns { bottom: 2rem; } 1146 .top--1-ns { top: -1rem; } 1147 .right--1-ns { right: -1rem; } 1148 .bottom--1-ns { bottom: -1rem; } 1149 .left--1-ns { left: -1rem; } 1150 .top--2-ns { top: -2rem; } 1151 .right--2-ns { right: -2rem; } 1152 .bottom--2-ns { bottom: -2rem; } 1153 .left--2-ns { left: -2rem; } 1154 .absolute--fill-ns { 1155 top: 0; 1156 right: 0; 1157 bottom: 0; 1158 left: 0; 1159 } 1160 } 1161 @media screen and (min-width: 30em) and (max-width: 60em) { 1162 .top-0-m { top: 0; } 1163 .left-0-m { left: 0; } 1164 .right-0-m { right: 0; } 1165 .bottom-0-m { bottom: 0; } 1166 .top-1-m { top: 1rem; } 1167 .left-1-m { left: 1rem; } 1168 .right-1-m { right: 1rem; } 1169 .bottom-1-m { bottom: 1rem; } 1170 .top-2-m { top: 2rem; } 1171 .left-2-m { left: 2rem; } 1172 .right-2-m { right: 2rem; } 1173 .bottom-2-m { bottom: 2rem; } 1174 .top--1-m { top: -1rem; } 1175 .right--1-m { right: -1rem; } 1176 .bottom--1-m { bottom: -1rem; } 1177 .left--1-m { left: -1rem; } 1178 .top--2-m { top: -2rem; } 1179 .right--2-m { right: -2rem; } 1180 .bottom--2-m { bottom: -2rem; } 1181 .left--2-m { left: -2rem; } 1182 .absolute--fill-m { 1183 top: 0; 1184 right: 0; 1185 bottom: 0; 1186 left: 0; 1187 } 1188 } 1189 @media screen and (min-width: 60em) { 1190 .top-0-l { top: 0; } 1191 .left-0-l { left: 0; } 1192 .right-0-l { right: 0; } 1193 .bottom-0-l { bottom: 0; } 1194 .top-1-l { top: 1rem; } 1195 .left-1-l { left: 1rem; } 1196 .right-1-l { right: 1rem; } 1197 .bottom-1-l { bottom: 1rem; } 1198 .top-2-l { top: 2rem; } 1199 .left-2-l { left: 2rem; } 1200 .right-2-l { right: 2rem; } 1201 .bottom-2-l { bottom: 2rem; } 1202 .top--1-l { top: -1rem; } 1203 .right--1-l { right: -1rem; } 1204 .bottom--1-l { bottom: -1rem; } 1205 .left--1-l { left: -1rem; } 1206 .top--2-l { top: -2rem; } 1207 .right--2-l { right: -2rem; } 1208 .bottom--2-l { bottom: -2rem; } 1209 .left--2-l { left: -2rem; } 1210 .absolute--fill-l { 1211 top: 0; 1212 right: 0; 1213 bottom: 0; 1214 left: 0; 1215 } 1216 } 1217 /* 1218 1219 CLEARFIX 1220 http://tachyons.io/docs/layout/clearfix/ 1221 1222 */ 1223 /* Nicolas Gallaghers Clearfix solution 1224 Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */ 1225 .cf:before, 1226 .cf:after { content: " "; display: table; } 1227 .cf:after { clear: both; } 1228 .cf { *zoom: 1; } 1229 .cl { clear: left; } 1230 .cr { clear: right; } 1231 .cb { clear: both; } 1232 .cn { clear: none; } 1233 @media screen and (min-width: 30em) { 1234 .cl-ns { clear: left; } 1235 .cr-ns { clear: right; } 1236 .cb-ns { clear: both; } 1237 .cn-ns { clear: none; } 1238 } 1239 @media screen and (min-width: 30em) and (max-width: 60em) { 1240 .cl-m { clear: left; } 1241 .cr-m { clear: right; } 1242 .cb-m { clear: both; } 1243 .cn-m { clear: none; } 1244 } 1245 @media screen and (min-width: 60em) { 1246 .cl-l { clear: left; } 1247 .cr-l { clear: right; } 1248 .cb-l { clear: both; } 1249 .cn-l { clear: none; } 1250 } 1251 /* 1252 1253 DISPLAY 1254 Docs: http://tachyons.io/docs/layout/display 1255 1256 Base: 1257 d = display 1258 1259 Modifiers: 1260 n = none 1261 b = block 1262 ib = inline-block 1263 it = inline-table 1264 t = table 1265 tc = table-cell 1266 t-row = table-row 1267 t-columm = table-column 1268 t-column-group = table-column-group 1269 1270 Media Query Extensions: 1271 -ns = not-small 1272 -m = medium 1273 -l = large 1274 1275 */ 1276 .dn { display: none; } 1277 .di { display: inline; } 1278 .db { display: block; } 1279 .dib { display: inline-block; } 1280 .dit { display: inline-table; } 1281 .dt { display: table; } 1282 .dtc { display: table-cell; } 1283 .dt-row { display: table-row; } 1284 .dt-row-group { display: table-row-group; } 1285 .dt-column { display: table-column; } 1286 .dt-column-group { display: table-column-group; } 1287 /* 1288 This will set table to full width and then 1289 all cells will be equal width 1290 */ 1291 .dt--fixed { 1292 table-layout: fixed; 1293 width: 100%; 1294 } 1295 @media screen and (min-width: 30em) { 1296 .dn-ns { display: none; } 1297 .di-ns { display: inline; } 1298 .db-ns { display: block; } 1299 .dib-ns { display: inline-block; } 1300 .dit-ns { display: inline-table; } 1301 .dt-ns { display: table; } 1302 .dtc-ns { display: table-cell; } 1303 .dt-row-ns { display: table-row; } 1304 .dt-row-group-ns { display: table-row-group; } 1305 .dt-column-ns { display: table-column; } 1306 .dt-column-group-ns { display: table-column-group; } 1307 1308 .dt--fixed-ns { 1309 table-layout: fixed; 1310 width: 100%; 1311 } 1312 } 1313 @media screen and (min-width: 30em) and (max-width: 60em) { 1314 .dn-m { display: none; } 1315 .di-m { display: inline; } 1316 .db-m { display: block; } 1317 .dib-m { display: inline-block; } 1318 .dit-m { display: inline-table; } 1319 .dt-m { display: table; } 1320 .dtc-m { display: table-cell; } 1321 .dt-row-m { display: table-row; } 1322 .dt-row-group-m { display: table-row-group; } 1323 .dt-column-m { display: table-column; } 1324 .dt-column-group-m { display: table-column-group; } 1325 1326 .dt--fixed-m { 1327 table-layout: fixed; 1328 width: 100%; 1329 } 1330 } 1331 @media screen and (min-width: 60em) { 1332 .dn-l { display: none; } 1333 .di-l { display: inline; } 1334 .db-l { display: block; } 1335 .dib-l { display: inline-block; } 1336 .dit-l { display: inline-table; } 1337 .dt-l { display: table; } 1338 .dtc-l { display: table-cell; } 1339 .dt-row-l { display: table-row; } 1340 .dt-row-group-l { display: table-row-group; } 1341 .dt-column-l { display: table-column; } 1342 .dt-column-group-l { display: table-column-group; } 1343 1344 .dt--fixed-l { 1345 table-layout: fixed; 1346 width: 100%; 1347 } 1348 } 1349 /* 1350 1351 FLEXBOX 1352 1353 Media Query Extensions: 1354 -ns = not-small 1355 -m = medium 1356 -l = large 1357 1358 */ 1359 .flex { display: -webkit-box; display: -ms-flexbox; display: flex; } 1360 .inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } 1361 /* 1. Fix for Chrome 44 bug. 1362 * https://code.google.com/p/chromium/issues/detail?id=506893 */ 1363 .flex-auto { 1364 -webkit-box-flex: 1; 1365 -ms-flex: 1 1 auto; 1366 flex: 1 1 auto; 1367 min-width: 0; /* 1 */ 1368 min-height: 0; /* 1 */ 1369 } 1370 .flex-none { -webkit-box-flex: 0; -ms-flex: none; flex: none; } 1371 .flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } 1372 .flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } 1373 .flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } 1374 .flex-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } 1375 .flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } 1376 .flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } 1377 .flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } 1378 .items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } 1379 .items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } 1380 .items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } 1381 .items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } 1382 .items-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } 1383 .self-start { -ms-flex-item-align: start; align-self: flex-start; } 1384 .self-end { -ms-flex-item-align: end; align-self: flex-end; } 1385 .self-center { -ms-flex-item-align: center; align-self: center; } 1386 .self-baseline { -ms-flex-item-align: baseline; align-self: baseline; } 1387 .self-stretch { -ms-flex-item-align: stretch; align-self: stretch; } 1388 .justify-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } 1389 .justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } 1390 .justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } 1391 .justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } 1392 .justify-around { -ms-flex-pack: distribute; justify-content: space-around; } 1393 .content-start { -ms-flex-line-pack: start; align-content: flex-start; } 1394 .content-end { -ms-flex-line-pack: end; align-content: flex-end; } 1395 .content-center { -ms-flex-line-pack: center; align-content: center; } 1396 .content-between { -ms-flex-line-pack: justify; align-content: space-between; } 1397 .content-around { -ms-flex-line-pack: distribute; align-content: space-around; } 1398 .content-stretch { -ms-flex-line-pack: stretch; align-content: stretch; } 1399 .order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } 1400 .order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } 1401 .order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } 1402 .order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } 1403 .order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } 1404 .order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } 1405 .order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } 1406 .order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } 1407 .order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } 1408 .order-last { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } 1409 .flex-grow-0 { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } 1410 .flex-grow-1 { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } 1411 .flex-shrink-0 { -ms-flex-negative: 0; flex-shrink: 0; } 1412 .flex-shrink-1 { -ms-flex-negative: 1; flex-shrink: 1; } 1413 @media screen and (min-width: 30em) { 1414 .flex-ns { display: -webkit-box; display: -ms-flexbox; display: flex; } 1415 .inline-flex-ns { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } 1416 .flex-auto-ns { 1417 -webkit-box-flex: 1; 1418 -ms-flex: 1 1 auto; 1419 flex: 1 1 auto; 1420 min-width: 0; /* 1 */ 1421 min-height: 0; /* 1 */ 1422 } 1423 .flex-none-ns { -webkit-box-flex: 0; -ms-flex: none; flex: none; } 1424 .flex-column-ns { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } 1425 .flex-row-ns { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } 1426 .flex-wrap-ns { -ms-flex-wrap: wrap; flex-wrap: wrap; } 1427 .flex-nowrap-ns { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } 1428 .flex-wrap-reverse-ns { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } 1429 .flex-column-reverse-ns { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } 1430 .flex-row-reverse-ns { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } 1431 .items-start-ns { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } 1432 .items-end-ns { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } 1433 .items-center-ns { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } 1434 .items-baseline-ns { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } 1435 .items-stretch-ns { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } 1436 1437 .self-start-ns { -ms-flex-item-align: start; align-self: flex-start; } 1438 .self-end-ns { -ms-flex-item-align: end; align-self: flex-end; } 1439 .self-center-ns { -ms-flex-item-align: center; align-self: center; } 1440 .self-baseline-ns { -ms-flex-item-align: baseline; align-self: baseline; } 1441 .self-stretch-ns { -ms-flex-item-align: stretch; align-self: stretch; } 1442 1443 .justify-start-ns { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } 1444 .justify-end-ns { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } 1445 .justify-center-ns { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } 1446 .justify-between-ns { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } 1447 .justify-around-ns { -ms-flex-pack: distribute; justify-content: space-around; } 1448 1449 .content-start-ns { -ms-flex-line-pack: start; align-content: flex-start; } 1450 .content-end-ns { -ms-flex-line-pack: end; align-content: flex-end; } 1451 .content-center-ns { -ms-flex-line-pack: center; align-content: center; } 1452 .content-between-ns { -ms-flex-line-pack: justify; align-content: space-between; } 1453 .content-around-ns { -ms-flex-line-pack: distribute; align-content: space-around; } 1454 .content-stretch-ns { -ms-flex-line-pack: stretch; align-content: stretch; } 1455 1456 .order-0-ns { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } 1457 .order-1-ns { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } 1458 .order-2-ns { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } 1459 .order-3-ns { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } 1460 .order-4-ns { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } 1461 .order-5-ns { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } 1462 .order-6-ns { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } 1463 .order-7-ns { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } 1464 .order-8-ns { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } 1465 .order-last-ns { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } 1466 1467 .flex-grow-0-ns { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } 1468 .flex-grow-1-ns { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } 1469 1470 .flex-shrink-0-ns { -ms-flex-negative: 0; flex-shrink: 0; } 1471 .flex-shrink-1-ns { -ms-flex-negative: 1; flex-shrink: 1; } 1472 } 1473 @media screen and (min-width: 30em) and (max-width: 60em) { 1474 .flex-m { display: -webkit-box; display: -ms-flexbox; display: flex; } 1475 .inline-flex-m { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } 1476 .flex-auto-m { 1477 -webkit-box-flex: 1; 1478 -ms-flex: 1 1 auto; 1479 flex: 1 1 auto; 1480 min-width: 0; /* 1 */ 1481 min-height: 0; /* 1 */ 1482 } 1483 .flex-none-m { -webkit-box-flex: 0; -ms-flex: none; flex: none; } 1484 .flex-column-m { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } 1485 .flex-row-m { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } 1486 .flex-wrap-m { -ms-flex-wrap: wrap; flex-wrap: wrap; } 1487 .flex-nowrap-m { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } 1488 .flex-wrap-reverse-m { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } 1489 .flex-column-reverse-m { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } 1490 .flex-row-reverse-m { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } 1491 .items-start-m { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } 1492 .items-end-m { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } 1493 .items-center-m { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } 1494 .items-baseline-m { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } 1495 .items-stretch-m { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } 1496 1497 .self-start-m { -ms-flex-item-align: start; align-self: flex-start; } 1498 .self-end-m { -ms-flex-item-align: end; align-self: flex-end; } 1499 .self-center-m { -ms-flex-item-align: center; align-self: center; } 1500 .self-baseline-m { -ms-flex-item-align: baseline; align-self: baseline; } 1501 .self-stretch-m { -ms-flex-item-align: stretch; align-self: stretch; } 1502 1503 .justify-start-m { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } 1504 .justify-end-m { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } 1505 .justify-center-m { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } 1506 .justify-between-m { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } 1507 .justify-around-m { -ms-flex-pack: distribute; justify-content: space-around; } 1508 1509 .content-start-m { -ms-flex-line-pack: start; align-content: flex-start; } 1510 .content-end-m { -ms-flex-line-pack: end; align-content: flex-end; } 1511 .content-center-m { -ms-flex-line-pack: center; align-content: center; } 1512 .content-between-m { -ms-flex-line-pack: justify; align-content: space-between; } 1513 .content-around-m { -ms-flex-line-pack: distribute; align-content: space-around; } 1514 .content-stretch-m { -ms-flex-line-pack: stretch; align-content: stretch; } 1515 1516 .order-0-m { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } 1517 .order-1-m { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } 1518 .order-2-m { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } 1519 .order-3-m { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } 1520 .order-4-m { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } 1521 .order-5-m { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } 1522 .order-6-m { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } 1523 .order-7-m { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } 1524 .order-8-m { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } 1525 .order-last-m { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } 1526 1527 .flex-grow-0-m { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } 1528 .flex-grow-1-m { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } 1529 1530 .flex-shrink-0-m { -ms-flex-negative: 0; flex-shrink: 0; } 1531 .flex-shrink-1-m { -ms-flex-negative: 1; flex-shrink: 1; } 1532 } 1533 @media screen and (min-width: 60em) { 1534 .flex-l { display: -webkit-box; display: -ms-flexbox; display: flex; } 1535 .inline-flex-l { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } 1536 .flex-auto-l { 1537 -webkit-box-flex: 1; 1538 -ms-flex: 1 1 auto; 1539 flex: 1 1 auto; 1540 min-width: 0; /* 1 */ 1541 min-height: 0; /* 1 */ 1542 } 1543 .flex-none-l { -webkit-box-flex: 0; -ms-flex: none; flex: none; } 1544 .flex-column-l { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } 1545 .flex-row-l { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } 1546 .flex-wrap-l { -ms-flex-wrap: wrap; flex-wrap: wrap; } 1547 .flex-nowrap-l { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } 1548 .flex-wrap-reverse-l { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } 1549 .flex-column-reverse-l { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } 1550 .flex-row-reverse-l { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } 1551 1552 .items-start-l { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } 1553 .items-end-l { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } 1554 .items-center-l { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } 1555 .items-baseline-l { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } 1556 .items-stretch-l { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } 1557 1558 .self-start-l { -ms-flex-item-align: start; align-self: flex-start; } 1559 .self-end-l { -ms-flex-item-align: end; align-self: flex-end; } 1560 .self-center-l { -ms-flex-item-align: center; align-self: center; } 1561 .self-baseline-l { -ms-flex-item-align: baseline; align-self: baseline; } 1562 .self-stretch-l { -ms-flex-item-align: stretch; align-self: stretch; } 1563 1564 .justify-start-l { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } 1565 .justify-end-l { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } 1566 .justify-center-l { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } 1567 .justify-between-l { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } 1568 .justify-around-l { -ms-flex-pack: distribute; justify-content: space-around; } 1569 1570 .content-start-l { -ms-flex-line-pack: start; align-content: flex-start; } 1571 .content-end-l { -ms-flex-line-pack: end; align-content: flex-end; } 1572 .content-center-l { -ms-flex-line-pack: center; align-content: center; } 1573 .content-between-l { -ms-flex-line-pack: justify; align-content: space-between; } 1574 .content-around-l { -ms-flex-line-pack: distribute; align-content: space-around; } 1575 .content-stretch-l { -ms-flex-line-pack: stretch; align-content: stretch; } 1576 1577 .order-0-l { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } 1578 .order-1-l { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } 1579 .order-2-l { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } 1580 .order-3-l { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } 1581 .order-4-l { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } 1582 .order-5-l { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } 1583 .order-6-l { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } 1584 .order-7-l { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } 1585 .order-8-l { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } 1586 .order-last-l { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } 1587 1588 .flex-grow-0-l { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } 1589 .flex-grow-1-l { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } 1590 1591 .flex-shrink-0-l { -ms-flex-negative: 0; flex-shrink: 0; } 1592 .flex-shrink-1-l { -ms-flex-negative: 1; flex-shrink: 1; } 1593 } 1594 /* 1595 1596 FLOATS 1597 http://tachyons.io/docs/layout/floats/ 1598 1599 1. Floated elements are automatically rendered as block level elements. 1600 Setting floats to display inline will fix the double margin bug in 1601 ie6. You know... just in case. 1602 1603 2. Don't forget to clearfix your floats with .cf 1604 1605 Base: 1606 f = float 1607 1608 Modifiers: 1609 l = left 1610 r = right 1611 n = none 1612 1613 Media Query Extensions: 1614 -ns = not-small 1615 -m = medium 1616 -l = large 1617 1618 */ 1619 .fl { float: left; _display: inline; } 1620 .fr { float: right; _display: inline; } 1621 .fn { float: none; } 1622 @media screen and (min-width: 30em) { 1623 .fl-ns { float: left; _display: inline; } 1624 .fr-ns { float: right; _display: inline; } 1625 .fn-ns { float: none; } 1626 } 1627 @media screen and (min-width: 30em) and (max-width: 60em) { 1628 .fl-m { float: left; _display: inline; } 1629 .fr-m { float: right; _display: inline; } 1630 .fn-m { float: none; } 1631 } 1632 @media screen and (min-width: 60em) { 1633 .fl-l { float: left; _display: inline; } 1634 .fr-l { float: right; _display: inline; } 1635 .fn-l { float: none; } 1636 } 1637 /*@import 'tachyons/src/_font-family';*/ 1638 /* 1639 1640 FONT STYLE 1641 Docs: http://tachyons.io/docs/typography/font-style/ 1642 1643 Media Query Extensions: 1644 -ns = not-small 1645 -m = medium 1646 -l = large 1647 1648 */ 1649 .i { font-style: italic; } 1650 .fs-normal { font-style: normal; } 1651 @media screen and (min-width: 30em) { 1652 .i-ns { font-style: italic; } 1653 .fs-normal-ns { font-style: normal; } 1654 } 1655 @media screen and (min-width: 30em) and (max-width: 60em) { 1656 .i-m { font-style: italic; } 1657 .fs-normal-m { font-style: normal; } 1658 } 1659 @media screen and (min-width: 60em) { 1660 .i-l { font-style: italic; } 1661 .fs-normal-l { font-style: normal; } 1662 } 1663 /* 1664 1665 FONT WEIGHT 1666 Docs: http://tachyons.io/docs/typography/font-weight/ 1667 1668 Base 1669 fw = font-weight 1670 1671 Modifiers: 1672 1 = literal value 100 1673 2 = literal value 200 1674 3 = literal value 300 1675 4 = literal value 400 1676 5 = literal value 500 1677 6 = literal value 600 1678 7 = literal value 700 1679 8 = literal value 800 1680 9 = literal value 900 1681 1682 Media Query Extensions: 1683 -ns = not-small 1684 -m = medium 1685 -l = large 1686 1687 */ 1688 .normal { font-weight: normal; } 1689 .b { font-weight: bold; } 1690 .fw1 { font-weight: 100; } 1691 .fw2 { font-weight: 200; } 1692 .fw3 { font-weight: 300; } 1693 .fw4 { font-weight: 400; } 1694 .fw5 { font-weight: 500; } 1695 .fw6 { font-weight: 600; } 1696 .fw7 { font-weight: 700; } 1697 .fw8 { font-weight: 800; } 1698 .fw9 { font-weight: 900; } 1699 @media screen and (min-width: 30em) { 1700 .normal-ns { font-weight: normal; } 1701 .b-ns { font-weight: bold; } 1702 .fw1-ns { font-weight: 100; } 1703 .fw2-ns { font-weight: 200; } 1704 .fw3-ns { font-weight: 300; } 1705 .fw4-ns { font-weight: 400; } 1706 .fw5-ns { font-weight: 500; } 1707 .fw6-ns { font-weight: 600; } 1708 .fw7-ns { font-weight: 700; } 1709 .fw8-ns { font-weight: 800; } 1710 .fw9-ns { font-weight: 900; } 1711 } 1712 @media screen and (min-width: 30em) and (max-width: 60em) { 1713 .normal-m { font-weight: normal; } 1714 .b-m { font-weight: bold; } 1715 .fw1-m { font-weight: 100; } 1716 .fw2-m { font-weight: 200; } 1717 .fw3-m { font-weight: 300; } 1718 .fw4-m { font-weight: 400; } 1719 .fw5-m { font-weight: 500; } 1720 .fw6-m { font-weight: 600; } 1721 .fw7-m { font-weight: 700; } 1722 .fw8-m { font-weight: 800; } 1723 .fw9-m { font-weight: 900; } 1724 } 1725 @media screen and (min-width: 60em) { 1726 .normal-l { font-weight: normal; } 1727 .b-l { font-weight: bold; } 1728 .fw1-l { font-weight: 100; } 1729 .fw2-l { font-weight: 200; } 1730 .fw3-l { font-weight: 300; } 1731 .fw4-l { font-weight: 400; } 1732 .fw5-l { font-weight: 500; } 1733 .fw6-l { font-weight: 600; } 1734 .fw7-l { font-weight: 700; } 1735 .fw8-l { font-weight: 800; } 1736 .fw9-l { font-weight: 900; } 1737 } 1738 /* 1739 1740 FORMS 1741 1742 */ 1743 .input-reset { 1744 -webkit-appearance: none; 1745 -moz-appearance: none; 1746 } 1747 .button-reset::-moz-focus-inner, 1748 .input-reset::-moz-focus-inner { 1749 border: 0; 1750 padding: 0; 1751 } 1752 /* 1753 1754 HEIGHTS 1755 Docs: http://tachyons.io/docs/layout/heights/ 1756 1757 Base: 1758 h = height 1759 min-h = min-height 1760 min-vh = min-height vertical screen height 1761 vh = vertical screen height 1762 1763 Modifiers 1764 1 = 1st step in height scale 1765 2 = 2nd step in height scale 1766 3 = 3rd step in height scale 1767 4 = 4th step in height scale 1768 5 = 5th step in height scale 1769 1770 -25 = literal value 25% 1771 -50 = literal value 50% 1772 -75 = literal value 75% 1773 -100 = literal value 100% 1774 1775 -auto = string value of auto 1776 -inherit = string value of inherit 1777 1778 Media Query Extensions: 1779 -ns = not-small 1780 -m = medium 1781 -l = large 1782 1783 */ 1784 /* Height Scale */ 1785 .h1 { height: 1rem; } 1786 .h2 { height: 2rem; } 1787 .h3 { height: 4rem; } 1788 .h4 { height: 8rem; } 1789 .h5 { height: 16rem; } 1790 /* Height Percentages - Based off of height of parent */ 1791 .h-25 { height: 25%; } 1792 .h-50 { height: 50%; } 1793 .h-75 { height: 75%; } 1794 .h-100 { height: 100%; } 1795 .min-h-100 { min-height: 100%; } 1796 /* Screen Height Percentage */ 1797 .vh-25 { height: 25vh; } 1798 .vh-50 { height: 50vh; } 1799 .vh-75 { height: 75vh; } 1800 .vh-100 { height: 100vh; } 1801 .min-vh-100 { min-height: 100vh; } 1802 /* String Properties */ 1803 .h-auto { height: auto; } 1804 .h-inherit { height: inherit; } 1805 @media screen and (min-width: 30em) { 1806 .h1-ns { height: 1rem; } 1807 .h2-ns { height: 2rem; } 1808 .h3-ns { height: 4rem; } 1809 .h4-ns { height: 8rem; } 1810 .h5-ns { height: 16rem; } 1811 .h-25-ns { height: 25%; } 1812 .h-50-ns { height: 50%; } 1813 .h-75-ns { height: 75%; } 1814 .h-100-ns { height: 100%; } 1815 .min-h-100-ns { min-height: 100%; } 1816 .vh-25-ns { height: 25vh; } 1817 .vh-50-ns { height: 50vh; } 1818 .vh-75-ns { height: 75vh; } 1819 .vh-100-ns { height: 100vh; } 1820 .min-vh-100-ns { min-height: 100vh; } 1821 .h-auto-ns { height: auto; } 1822 .h-inherit-ns { height: inherit; } 1823 } 1824 @media screen and (min-width: 30em) and (max-width: 60em) { 1825 .h1-m { height: 1rem; } 1826 .h2-m { height: 2rem; } 1827 .h3-m { height: 4rem; } 1828 .h4-m { height: 8rem; } 1829 .h5-m { height: 16rem; } 1830 .h-25-m { height: 25%; } 1831 .h-50-m { height: 50%; } 1832 .h-75-m { height: 75%; } 1833 .h-100-m { height: 100%; } 1834 .min-h-100-m { min-height: 100%; } 1835 .vh-25-m { height: 25vh; } 1836 .vh-50-m { height: 50vh; } 1837 .vh-75-m { height: 75vh; } 1838 .vh-100-m { height: 100vh; } 1839 .min-vh-100-m { min-height: 100vh; } 1840 .h-auto-m { height: auto; } 1841 .h-inherit-m { height: inherit; } 1842 } 1843 @media screen and (min-width: 60em) { 1844 .h1-l { height: 1rem; } 1845 .h2-l { height: 2rem; } 1846 .h3-l { height: 4rem; } 1847 .h4-l { height: 8rem; } 1848 .h5-l { height: 16rem; } 1849 .h-25-l { height: 25%; } 1850 .h-50-l { height: 50%; } 1851 .h-75-l { height: 75%; } 1852 .h-100-l { height: 100%; } 1853 .min-h-100-l { min-height: 100%; } 1854 .vh-25-l { height: 25vh; } 1855 .vh-50-l { height: 50vh; } 1856 .vh-75-l { height: 75vh; } 1857 .vh-100-l { height: 100vh; } 1858 .min-vh-100-l { min-height: 100vh; } 1859 .h-auto-l { height: auto; } 1860 .h-inherit-l { height: inherit; } 1861 } 1862 /* 1863 1864 LETTER SPACING 1865 Docs: http://tachyons.io/docs/typography/tracking/ 1866 1867 Media Query Extensions: 1868 -ns = not-small 1869 -m = medium 1870 -l = large 1871 1872 */ 1873 .tracked { letter-spacing: .1em; } 1874 .tracked-tight { letter-spacing: -.05em; } 1875 .tracked-mega { letter-spacing: .25em; } 1876 @media screen and (min-width: 30em) { 1877 .tracked-ns { letter-spacing: .1em; } 1878 .tracked-tight-ns { letter-spacing: -.05em; } 1879 .tracked-mega-ns { letter-spacing: .25em; } 1880 } 1881 @media screen and (min-width: 30em) and (max-width: 60em) { 1882 .tracked-m { letter-spacing: .1em; } 1883 .tracked-tight-m { letter-spacing: -.05em; } 1884 .tracked-mega-m { letter-spacing: .25em; } 1885 } 1886 @media screen and (min-width: 60em) { 1887 .tracked-l { letter-spacing: .1em; } 1888 .tracked-tight-l { letter-spacing: -.05em; } 1889 .tracked-mega-l { letter-spacing: .25em; } 1890 } 1891 /* 1892 1893 LINE HEIGHT / LEADING 1894 Docs: http://tachyons.io/docs/typography/line-height 1895 1896 Media Query Extensions: 1897 -ns = not-small 1898 -m = medium 1899 -l = large 1900 1901 */ 1902 .lh-solid { line-height: 1; } 1903 .lh-title { line-height: 1.25; } 1904 .lh-copy { line-height: 1.5; } 1905 @media screen and (min-width: 30em) { 1906 .lh-solid-ns { line-height: 1; } 1907 .lh-title-ns { line-height: 1.25; } 1908 .lh-copy-ns { line-height: 1.5; } 1909 } 1910 @media screen and (min-width: 30em) and (max-width: 60em) { 1911 .lh-solid-m { line-height: 1; } 1912 .lh-title-m { line-height: 1.25; } 1913 .lh-copy-m { line-height: 1.5; } 1914 } 1915 @media screen and (min-width: 60em) { 1916 .lh-solid-l { line-height: 1; } 1917 .lh-title-l { line-height: 1.25; } 1918 .lh-copy-l { line-height: 1.5; } 1919 } 1920 /* 1921 1922 LINKS 1923 Docs: http://tachyons.io/docs/elements/links/ 1924 1925 */ 1926 .link { 1927 text-decoration: none; 1928 -webkit-transition: color .15s ease-in; 1929 transition: color .15s ease-in; 1930 } 1931 .link:link, 1932 .link:visited { 1933 -webkit-transition: color .15s ease-in; 1934 transition: color .15s ease-in; 1935 } 1936 .link:hover { 1937 -webkit-transition: color .15s ease-in; 1938 transition: color .15s ease-in; 1939 } 1940 .link:active { 1941 -webkit-transition: color .15s ease-in; 1942 transition: color .15s ease-in; 1943 } 1944 .link:focus { 1945 -webkit-transition: color .15s ease-in; 1946 transition: color .15s ease-in; 1947 outline: 1px dotted currentColor; 1948 } 1949 /* 1950 1951 LISTS 1952 http://tachyons.io/docs/elements/lists/ 1953 1954 */ 1955 .list { list-style-type: none; } 1956 /* 1957 1958 MAX WIDTHS 1959 Docs: http://tachyons.io/docs/layout/max-widths/ 1960 1961 Base: 1962 mw = max-width 1963 1964 Modifiers 1965 1 = 1st step in width scale 1966 2 = 2nd step in width scale 1967 3 = 3rd step in width scale 1968 4 = 4th step in width scale 1969 5 = 5th step in width scale 1970 6 = 6st step in width scale 1971 7 = 7nd step in width scale 1972 8 = 8rd step in width scale 1973 9 = 9th step in width scale 1974 1975 -100 = literal value 100% 1976 1977 -none = string value none 1978 1979 1980 Media Query Extensions: 1981 -ns = not-small 1982 -m = medium 1983 -l = large 1984 1985 */ 1986 /* Max Width Percentages */ 1987 .mw-100 { max-width: 100%; } 1988 /* Max Width Scale */ 1989 .mw1 { max-width: 1rem; } 1990 .mw2 { max-width: 2rem; } 1991 .mw3 { max-width: 4rem; } 1992 .mw4 { max-width: 8rem; } 1993 .mw5 { max-width: 16rem; } 1994 .mw6 { max-width: 32rem; } 1995 .mw7 { max-width: 48rem; } 1996 .mw8 { max-width: 64rem; } 1997 .mw9 { max-width: 96rem; } 1998 /* Max Width String Properties */ 1999 .mw-none { max-width: none; } 2000 @media screen and (min-width: 30em) { 2001 .mw-100-ns { max-width: 100%; } 2002 2003 .mw1-ns { max-width: 1rem; } 2004 .mw2-ns { max-width: 2rem; } 2005 .mw3-ns { max-width: 4rem; } 2006 .mw4-ns { max-width: 8rem; } 2007 .mw5-ns { max-width: 16rem; } 2008 .mw6-ns { max-width: 32rem; } 2009 .mw7-ns { max-width: 48rem; } 2010 .mw8-ns { max-width: 64rem; } 2011 .mw9-ns { max-width: 96rem; } 2012 2013 .mw-none-ns { max-width: none; } 2014 } 2015 @media screen and (min-width: 30em) and (max-width: 60em) { 2016 .mw-100-m { max-width: 100%; } 2017 2018 .mw1-m { max-width: 1rem; } 2019 .mw2-m { max-width: 2rem; } 2020 .mw3-m { max-width: 4rem; } 2021 .mw4-m { max-width: 8rem; } 2022 .mw5-m { max-width: 16rem; } 2023 .mw6-m { max-width: 32rem; } 2024 .mw7-m { max-width: 48rem; } 2025 .mw8-m { max-width: 64rem; } 2026 .mw9-m { max-width: 96rem; } 2027 2028 .mw-none-m { max-width: none; } 2029 } 2030 @media screen and (min-width: 60em) { 2031 .mw-100-l { max-width: 100%; } 2032 2033 .mw1-l { max-width: 1rem; } 2034 .mw2-l { max-width: 2rem; } 2035 .mw3-l { max-width: 4rem; } 2036 .mw4-l { max-width: 8rem; } 2037 .mw5-l { max-width: 16rem; } 2038 .mw6-l { max-width: 32rem; } 2039 .mw7-l { max-width: 48rem; } 2040 .mw8-l { max-width: 64rem; } 2041 .mw9-l { max-width: 96rem; } 2042 2043 .mw-none-l { max-width: none; } 2044 } 2045 /* 2046 2047 WIDTHS 2048 Docs: http://tachyons.io/docs/layout/widths/ 2049 2050 Base: 2051 w = width 2052 2053 Modifiers 2054 1 = 1st step in width scale 2055 2 = 2nd step in width scale 2056 3 = 3rd step in width scale 2057 4 = 4th step in width scale 2058 5 = 5th step in width scale 2059 2060 -10 = literal value 10% 2061 -20 = literal value 20% 2062 -25 = literal value 25% 2063 -30 = literal value 30% 2064 -33 = literal value 33% 2065 -34 = literal value 34% 2066 -40 = literal value 40% 2067 -50 = literal value 50% 2068 -60 = literal value 60% 2069 -70 = literal value 70% 2070 -75 = literal value 75% 2071 -80 = literal value 80% 2072 -90 = literal value 90% 2073 -100 = literal value 100% 2074 2075 -third = 100% / 3 (Not supported in opera mini or IE8) 2076 -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8) 2077 -auto = string value auto 2078 2079 2080 Media Query Extensions: 2081 -ns = not-small 2082 -m = medium 2083 -l = large 2084 2085 */ 2086 /* Width Scale */ 2087 .w1 { width: 1rem; } 2088 .w2 { width: 2rem; } 2089 .w3 { width: 4rem; } 2090 .w4 { width: 8rem; } 2091 .w5 { width: 16rem; } 2092 .w-10 { width: 10%; } 2093 .w-20 { width: 20%; } 2094 .w-25 { width: 25%; } 2095 .w-30 { width: 30%; } 2096 .w-33 { width: 33%; } 2097 .w-34 { width: 34%; } 2098 .w-40 { width: 40%; } 2099 .w-50 { width: 50%; } 2100 .w-60 { width: 60%; } 2101 .w-70 { width: 70%; } 2102 .w-75 { width: 75%; } 2103 .w-80 { width: 80%; } 2104 .w-90 { width: 90%; } 2105 .w-100 { width: 100%; } 2106 .w-third { width: 33.33333%; } 2107 .w-two-thirds { width: 66.66667%; } 2108 .w-auto { width: auto; } 2109 @media screen and (min-width: 30em) { 2110 .w1-ns { width: 1rem; } 2111 .w2-ns { width: 2rem; } 2112 .w3-ns { width: 4rem; } 2113 .w4-ns { width: 8rem; } 2114 .w5-ns { width: 16rem; } 2115 .w-10-ns { width: 10%; } 2116 .w-20-ns { width: 20%; } 2117 .w-25-ns { width: 25%; } 2118 .w-30-ns { width: 30%; } 2119 .w-33-ns { width: 33%; } 2120 .w-34-ns { width: 34%; } 2121 .w-40-ns { width: 40%; } 2122 .w-50-ns { width: 50%; } 2123 .w-60-ns { width: 60%; } 2124 .w-70-ns { width: 70%; } 2125 .w-75-ns { width: 75%; } 2126 .w-80-ns { width: 80%; } 2127 .w-90-ns { width: 90%; } 2128 .w-100-ns { width: 100%; } 2129 .w-third-ns { width: 33.33333%; } 2130 .w-two-thirds-ns { width: 66.66667%; } 2131 .w-auto-ns { width: auto; } 2132 } 2133 @media screen and (min-width: 30em) and (max-width: 60em) { 2134 .w1-m { width: 1rem; } 2135 .w2-m { width: 2rem; } 2136 .w3-m { width: 4rem; } 2137 .w4-m { width: 8rem; } 2138 .w5-m { width: 16rem; } 2139 .w-10-m { width: 10%; } 2140 .w-20-m { width: 20%; } 2141 .w-25-m { width: 25%; } 2142 .w-30-m { width: 30%; } 2143 .w-33-m { width: 33%; } 2144 .w-34-m { width: 34%; } 2145 .w-40-m { width: 40%; } 2146 .w-50-m { width: 50%; } 2147 .w-60-m { width: 60%; } 2148 .w-70-m { width: 70%; } 2149 .w-75-m { width: 75%; } 2150 .w-80-m { width: 80%; } 2151 .w-90-m { width: 90%; } 2152 .w-100-m { width: 100%; } 2153 .w-third-m { width: 33.33333%; } 2154 .w-two-thirds-m { width: 66.66667%; } 2155 .w-auto-m { width: auto; } 2156 } 2157 @media screen and (min-width: 60em) { 2158 .w1-l { width: 1rem; } 2159 .w2-l { width: 2rem; } 2160 .w3-l { width: 4rem; } 2161 .w4-l { width: 8rem; } 2162 .w5-l { width: 16rem; } 2163 .w-10-l { width: 10%; } 2164 .w-20-l { width: 20%; } 2165 .w-25-l { width: 25%; } 2166 .w-30-l { width: 30%; } 2167 .w-33-l { width: 33%; } 2168 .w-34-l { width: 34%; } 2169 .w-40-l { width: 40%; } 2170 .w-50-l { width: 50%; } 2171 .w-60-l { width: 60%; } 2172 .w-70-l { width: 70%; } 2173 .w-75-l { width: 75%; } 2174 .w-80-l { width: 80%; } 2175 .w-90-l { width: 90%; } 2176 .w-100-l { width: 100%; } 2177 .w-third-l { width: 33.33333%; } 2178 .w-two-thirds-l { width: 66.66667%; } 2179 .w-auto-l { width: auto; } 2180 } 2181 /* 2182 2183 OVERFLOW 2184 2185 Media Query Extensions: 2186 -ns = not-small 2187 -m = medium 2188 -l = large 2189 2190 */ 2191 .overflow-visible { overflow: visible; } 2192 .overflow-hidden { overflow: hidden; } 2193 .overflow-scroll { overflow: scroll; } 2194 .overflow-auto { overflow: auto; } 2195 .overflow-x-visible { overflow-x: visible; } 2196 .overflow-x-hidden { overflow-x: hidden; } 2197 .overflow-x-scroll { overflow-x: scroll; } 2198 .overflow-x-auto { overflow-x: auto; } 2199 .overflow-y-visible { overflow-y: visible; } 2200 .overflow-y-hidden { overflow-y: hidden; } 2201 .overflow-y-scroll { overflow-y: scroll; } 2202 .overflow-y-auto { overflow-y: auto; } 2203 @media screen and (min-width: 30em) { 2204 .overflow-visible-ns { overflow: visible; } 2205 .overflow-hidden-ns { overflow: hidden; } 2206 .overflow-scroll-ns { overflow: scroll; } 2207 .overflow-auto-ns { overflow: auto; } 2208 .overflow-x-visible-ns { overflow-x: visible; } 2209 .overflow-x-hidden-ns { overflow-x: hidden; } 2210 .overflow-x-scroll-ns { overflow-x: scroll; } 2211 .overflow-x-auto-ns { overflow-x: auto; } 2212 2213 .overflow-y-visible-ns { overflow-y: visible; } 2214 .overflow-y-hidden-ns { overflow-y: hidden; } 2215 .overflow-y-scroll-ns { overflow-y: scroll; } 2216 .overflow-y-auto-ns { overflow-y: auto; } 2217 } 2218 @media screen and (min-width: 30em) and (max-width: 60em) { 2219 .overflow-visible-m { overflow: visible; } 2220 .overflow-hidden-m { overflow: hidden; } 2221 .overflow-scroll-m { overflow: scroll; } 2222 .overflow-auto-m { overflow: auto; } 2223 2224 .overflow-x-visible-m { overflow-x: visible; } 2225 .overflow-x-hidden-m { overflow-x: hidden; } 2226 .overflow-x-scroll-m { overflow-x: scroll; } 2227 .overflow-x-auto-m { overflow-x: auto; } 2228 2229 .overflow-y-visible-m { overflow-y: visible; } 2230 .overflow-y-hidden-m { overflow-y: hidden; } 2231 .overflow-y-scroll-m { overflow-y: scroll; } 2232 .overflow-y-auto-m { overflow-y: auto; } 2233 } 2234 @media screen and (min-width: 60em) { 2235 .overflow-visible-l { overflow: visible; } 2236 .overflow-hidden-l { overflow: hidden; } 2237 .overflow-scroll-l { overflow: scroll; } 2238 .overflow-auto-l { overflow: auto; } 2239 2240 .overflow-x-visible-l { overflow-x: visible; } 2241 .overflow-x-hidden-l { overflow-x: hidden; } 2242 .overflow-x-scroll-l { overflow-x: scroll; } 2243 .overflow-x-auto-l { overflow-x: auto; } 2244 2245 .overflow-y-visible-l { overflow-y: visible; } 2246 .overflow-y-hidden-l { overflow-y: hidden; } 2247 .overflow-y-scroll-l { overflow-y: scroll; } 2248 .overflow-y-auto-l { overflow-y: auto; } 2249 } 2250 /* 2251 2252 POSITIONING 2253 Docs: http://tachyons.io/docs/layout/position/ 2254 2255 Media Query Extensions: 2256 -ns = not-small 2257 -m = medium 2258 -l = large 2259 2260 */ 2261 .static { position: static; } 2262 .relative { position: relative; } 2263 .absolute { position: absolute; } 2264 .fixed { position: fixed; } 2265 @media screen and (min-width: 30em) { 2266 .static-ns { position: static; } 2267 .relative-ns { position: relative; } 2268 .absolute-ns { position: absolute; } 2269 .fixed-ns { position: fixed; } 2270 } 2271 @media screen and (min-width: 30em) and (max-width: 60em) { 2272 .static-m { position: static; } 2273 .relative-m { position: relative; } 2274 .absolute-m { position: absolute; } 2275 .fixed-m { position: fixed; } 2276 } 2277 @media screen and (min-width: 60em) { 2278 .static-l { position: static; } 2279 .relative-l { position: relative; } 2280 .absolute-l { position: absolute; } 2281 .fixed-l { position: fixed; } 2282 } 2283 /* 2284 2285 OPACITY 2286 Docs: http://tachyons.io/docs/themes/opacity/ 2287 2288 */ 2289 .o-100 { opacity: 1; } 2290 .o-90 { opacity: .9; } 2291 .o-80 { opacity: .8; } 2292 .o-70 { opacity: .7; } 2293 .o-60 { opacity: .6; } 2294 .o-50 { opacity: .5; } 2295 .o-40 { opacity: .4; } 2296 .o-30 { opacity: .3; } 2297 .o-20 { opacity: .2; } 2298 .o-10 { opacity: .1; } 2299 .o-05 { opacity: .05; } 2300 .o-025 { opacity: .025; } 2301 .o-0 { opacity: 0; } 2302 /*@import 'tachyons/src/_rotations';*/ 2303 /* 2304 2305 SKINS 2306 Docs: http://tachyons.io/docs/themes/skins/ 2307 2308 Classes for setting foreground and background colors on elements. 2309 If you haven't declared a border color, but set border on an element, it will 2310 be set to the current text color. 2311 2312 */ 2313 /* Text colors */ 2314 .black-90 { color: rgba(0, 0, 0, .9); } 2315 .black-80 { color: rgba(0, 0, 0, .8); } 2316 .black-70 { color: rgba(0, 0, 0, .7); } 2317 .black-60 { color: rgba(0, 0, 0, .6); } 2318 .black-50 { color: rgba(0, 0, 0, .5); } 2319 .black-40 { color: rgba(0, 0, 0, .4); } 2320 .black-30 { color: rgba(0, 0, 0, .3); } 2321 .black-20 { color: rgba(0, 0, 0, .2); } 2322 .black-10 { color: rgba(0, 0, 0, .1); } 2323 .black-05 { color: rgba(0, 0, 0, .05); } 2324 .white-90 { color: rgba(255, 255, 255, .9); } 2325 .white-80 { color: rgba(255, 255, 255, .8); } 2326 .white-70 { color: rgba(255, 255, 255, .7); } 2327 .white-60 { color: rgba(255, 255, 255, .6); } 2328 .white-50 { color: rgba(255, 255, 255, .5); } 2329 .white-40 { color: rgba(255, 255, 255, .4); } 2330 .white-30 { color: rgba(255, 255, 255, .3); } 2331 .white-20 { color: rgba(255, 255, 255, .2); } 2332 .white-10 { color: rgba(255, 255, 255, .1); } 2333 .black { color: #000; } 2334 .near-black { color: #111; } 2335 .dark-gray { color: #333; } 2336 .mid-gray { color: #555; } 2337 .gray { color: #777; } 2338 .silver { color: #999; } 2339 .light-silver { color: #aaa; } 2340 .moon-gray { color: #ccc; } 2341 .light-gray { color: #eee; } 2342 .near-white { color: #f4f4f4; } 2343 .white { color: #fff; } 2344 .dark-red { color: #e7040f; } 2345 .red { color: #ff4136; } 2346 .light-red { color: #ff725c; } 2347 .orange { color: #ff6300; } 2348 .gold { color: #ffb700; } 2349 .yellow { color: #ffd700; } 2350 .light-yellow { color: #fbf1a9; } 2351 .purple { color: #5e2ca5; } 2352 .light-purple { color: #a463f2; } 2353 .dark-pink { color: #d5008f; } 2354 .hot-pink { color: #ff41b4; } 2355 .pink { color: #ff80cc; } 2356 .light-pink { color: #ffa3d7; } 2357 .dark-green { color: #137752; } 2358 .green { color: #19a974; } 2359 .light-green { color: #9eebcf; } 2360 .navy { color: #001b44; } 2361 .dark-blue { color: #00449e; } 2362 .blue { color: #0594CB; } 2363 .light-blue { color: #96ccff; } 2364 .lightest-blue { color: #cdecff; } 2365 .washed-blue { color: #f6fffe; } 2366 .washed-green { color: #e8fdf5; } 2367 .washed-yellow { color: #fffceb; } 2368 .washed-red { color: #ffdfdf; } 2369 .color-inherit { color: inherit; } 2370 .bg-black-90 { background-color: rgba(0, 0, 0, .9); } 2371 .bg-black-80 { background-color: rgba(0, 0, 0, .8); } 2372 .bg-black-70 { background-color: rgba(0, 0, 0, .7); } 2373 .bg-black-60 { background-color: rgba(0, 0, 0, .6); } 2374 .bg-black-50 { background-color: rgba(0, 0, 0, .5); } 2375 .bg-black-40 { background-color: rgba(0, 0, 0, .4); } 2376 .bg-black-30 { background-color: rgba(0, 0, 0, .3); } 2377 .bg-black-20 { background-color: rgba(0, 0, 0, .2); } 2378 .bg-black-10 { background-color: rgba(0, 0, 0, .1); } 2379 .bg-black-05 { background-color: rgba(0, 0, 0, .05); } 2380 .bg-white-90 { background-color: rgba(255, 255, 255, .9); } 2381 .bg-white-80 { background-color: rgba(255, 255, 255, .8); } 2382 .bg-white-70 { background-color: rgba(255, 255, 255, .7); } 2383 .bg-white-60 { background-color: rgba(255, 255, 255, .6); } 2384 .bg-white-50 { background-color: rgba(255, 255, 255, .5); } 2385 .bg-white-40 { background-color: rgba(255, 255, 255, .4); } 2386 .bg-white-30 { background-color: rgba(255, 255, 255, .3); } 2387 .bg-white-20 { background-color: rgba(255, 255, 255, .2); } 2388 .bg-white-10 { background-color: rgba(255, 255, 255, .1); } 2389 /* Background colors */ 2390 .bg-black { background-color: #000; } 2391 .bg-near-black { background-color: #111; } 2392 .bg-dark-gray { background-color: #333; } 2393 .bg-mid-gray { background-color: #555; } 2394 .bg-gray { background-color: #777; } 2395 .bg-silver { background-color: #999; } 2396 .bg-light-silver { background-color: #aaa; } 2397 .bg-moon-gray { background-color: #ccc; } 2398 .bg-light-gray { background-color: #eee; } 2399 .bg-near-white { background-color: #f4f4f4; } 2400 .bg-white { background-color: #fff; } 2401 .bg-transparent { background-color: transparent; } 2402 .bg-dark-red { background-color: #e7040f; } 2403 .bg-red { background-color: #ff4136; } 2404 .bg-light-red { background-color: #ff725c; } 2405 .bg-orange { background-color: #ff6300; } 2406 .bg-gold { background-color: #ffb700; } 2407 .bg-yellow { background-color: #ffd700; } 2408 .bg-light-yellow { background-color: #fbf1a9; } 2409 .bg-purple { background-color: #5e2ca5; } 2410 .bg-light-purple { background-color: #a463f2; } 2411 .bg-dark-pink { background-color: #d5008f; } 2412 .bg-hot-pink { background-color: #ff41b4; } 2413 .bg-pink { background-color: #ff80cc; } 2414 .bg-light-pink { background-color: #ffa3d7; } 2415 .bg-dark-green { background-color: #137752; } 2416 .bg-green { background-color: #19a974; } 2417 .bg-light-green { background-color: #9eebcf; } 2418 .bg-navy { background-color: #001b44; } 2419 .bg-dark-blue { background-color: #00449e; } 2420 .bg-blue { background-color: #0594CB; } 2421 .bg-light-blue { background-color: #96ccff; } 2422 .bg-lightest-blue { background-color: #cdecff; } 2423 .bg-washed-blue { background-color: #f6fffe; } 2424 .bg-washed-green { background-color: #e8fdf5; } 2425 .bg-washed-yellow { background-color: #fffceb; } 2426 .bg-washed-red { background-color: #ffdfdf; } 2427 .bg-inherit { background-color: inherit; } 2428 /* 2429 2430 SKINS:PSEUDO 2431 2432 Customize the color of an element when 2433 it is focused or hovered over. 2434 2435 */ 2436 .hover-black:hover, 2437 .hover-black:focus { color: #000; } 2438 .hover-near-black:hover, 2439 .hover-near-black:focus { color: #111; } 2440 .hover-dark-gray:hover, 2441 .hover-dark-gray:focus { color: #333; } 2442 .hover-mid-gray:hover, 2443 .hover-mid-gray:focus { color: #555; } 2444 .hover-gray:hover, 2445 .hover-gray:focus { color: #777; } 2446 .hover-silver:hover, 2447 .hover-silver:focus { color: #999; } 2448 .hover-light-silver:hover, 2449 .hover-light-silver:focus { color: #aaa; } 2450 .hover-moon-gray:hover, 2451 .hover-moon-gray:focus { color: #ccc; } 2452 .hover-light-gray:hover, 2453 .hover-light-gray:focus { color: #eee; } 2454 .hover-near-white:hover, 2455 .hover-near-white:focus { color: #f4f4f4; } 2456 .hover-white:hover, 2457 .hover-white:focus { color: #fff; } 2458 .hover-black-90:hover, 2459 .hover-black-90:focus { color: rgba(0, 0, 0, .9); } 2460 .hover-black-80:hover, 2461 .hover-black-80:focus { color: rgba(0, 0, 0, .8); } 2462 .hover-black-70:hover, 2463 .hover-black-70:focus { color: rgba(0, 0, 0, .7); } 2464 .hover-black-60:hover, 2465 .hover-black-60:focus { color: rgba(0, 0, 0, .6); } 2466 .hover-black-50:hover, 2467 .hover-black-50:focus { color: rgba(0, 0, 0, .5); } 2468 .hover-black-40:hover, 2469 .hover-black-40:focus { color: rgba(0, 0, 0, .4); } 2470 .hover-black-30:hover, 2471 .hover-black-30:focus { color: rgba(0, 0, 0, .3); } 2472 .hover-black-20:hover, 2473 .hover-black-20:focus { color: rgba(0, 0, 0, .2); } 2474 .hover-black-10:hover, 2475 .hover-black-10:focus { color: rgba(0, 0, 0, .1); } 2476 .hover-white-90:hover, 2477 .hover-white-90:focus { color: rgba(255, 255, 255, .9); } 2478 .hover-white-80:hover, 2479 .hover-white-80:focus { color: rgba(255, 255, 255, .8); } 2480 .hover-white-70:hover, 2481 .hover-white-70:focus { color: rgba(255, 255, 255, .7); } 2482 .hover-white-60:hover, 2483 .hover-white-60:focus { color: rgba(255, 255, 255, .6); } 2484 .hover-white-50:hover, 2485 .hover-white-50:focus { color: rgba(255, 255, 255, .5); } 2486 .hover-white-40:hover, 2487 .hover-white-40:focus { color: rgba(255, 255, 255, .4); } 2488 .hover-white-30:hover, 2489 .hover-white-30:focus { color: rgba(255, 255, 255, .3); } 2490 .hover-white-20:hover, 2491 .hover-white-20:focus { color: rgba(255, 255, 255, .2); } 2492 .hover-white-10:hover, 2493 .hover-white-10:focus { color: rgba(255, 255, 255, .1); } 2494 .hover-inherit:hover, 2495 .hover-inherit:focus { color: inherit; } 2496 .hover-bg-black:hover, 2497 .hover-bg-black:focus { background-color: #000; } 2498 .hover-bg-near-black:hover, 2499 .hover-bg-near-black:focus { background-color: #111; } 2500 .hover-bg-dark-gray:hover, 2501 .hover-bg-dark-gray:focus { background-color: #333; } 2502 .hover-bg-mid-gray:hover, 2503 .hover-bg-mid-gray:focus { background-color: #555; } 2504 .hover-bg-gray:hover, 2505 .hover-bg-gray:focus { background-color: #777; } 2506 .hover-bg-silver:hover, 2507 .hover-bg-silver:focus { background-color: #999; } 2508 .hover-bg-light-silver:hover, 2509 .hover-bg-light-silver:focus { background-color: #aaa; } 2510 .hover-bg-moon-gray:hover, 2511 .hover-bg-moon-gray:focus { background-color: #ccc; } 2512 .hover-bg-light-gray:hover, 2513 .hover-bg-light-gray:focus { background-color: #eee; } 2514 .hover-bg-near-white:hover, 2515 .hover-bg-near-white:focus { background-color: #f4f4f4; } 2516 .hover-bg-white:hover, 2517 .hover-bg-white:focus { background-color: #fff; } 2518 .hover-bg-transparent:hover, 2519 .hover-bg-transparent:focus { background-color: transparent; } 2520 .hover-bg-black-90:hover, 2521 .hover-bg-black-90:focus { background-color: rgba(0, 0, 0, .9); } 2522 .hover-bg-black-80:hover, 2523 .hover-bg-black-80:focus { background-color: rgba(0, 0, 0, .8); } 2524 .hover-bg-black-70:hover, 2525 .hover-bg-black-70:focus { background-color: rgba(0, 0, 0, .7); } 2526 .hover-bg-black-60:hover, 2527 .hover-bg-black-60:focus { background-color: rgba(0, 0, 0, .6); } 2528 .hover-bg-black-50:hover, 2529 .hover-bg-black-50:focus { background-color: rgba(0, 0, 0, .5); } 2530 .hover-bg-black-40:hover, 2531 .hover-bg-black-40:focus { background-color: rgba(0, 0, 0, .4); } 2532 .hover-bg-black-30:hover, 2533 .hover-bg-black-30:focus { background-color: rgba(0, 0, 0, .3); } 2534 .hover-bg-black-20:hover, 2535 .hover-bg-black-20:focus { background-color: rgba(0, 0, 0, .2); } 2536 .hover-bg-black-10:hover, 2537 .hover-bg-black-10:focus { background-color: rgba(0, 0, 0, .1); } 2538 .hover-bg-white-90:hover, 2539 .hover-bg-white-90:focus { background-color: rgba(255, 255, 255, .9); } 2540 .hover-bg-white-80:hover, 2541 .hover-bg-white-80:focus { background-color: rgba(255, 255, 255, .8); } 2542 .hover-bg-white-70:hover, 2543 .hover-bg-white-70:focus { background-color: rgba(255, 255, 255, .7); } 2544 .hover-bg-white-60:hover, 2545 .hover-bg-white-60:focus { background-color: rgba(255, 255, 255, .6); } 2546 .hover-bg-white-50:hover, 2547 .hover-bg-white-50:focus { background-color: rgba(255, 255, 255, .5); } 2548 .hover-bg-white-40:hover, 2549 .hover-bg-white-40:focus { background-color: rgba(255, 255, 255, .4); } 2550 .hover-bg-white-30:hover, 2551 .hover-bg-white-30:focus { background-color: rgba(255, 255, 255, .3); } 2552 .hover-bg-white-20:hover, 2553 .hover-bg-white-20:focus { background-color: rgba(255, 255, 255, .2); } 2554 .hover-bg-white-10:hover, 2555 .hover-bg-white-10:focus { background-color: rgba(255, 255, 255, .1); } 2556 .hover-dark-red:hover, 2557 .hover-dark-red:focus { color: #e7040f; } 2558 .hover-red:hover, 2559 .hover-red:focus { color: #ff4136; } 2560 .hover-light-red:hover, 2561 .hover-light-red:focus { color: #ff725c; } 2562 .hover-orange:hover, 2563 .hover-orange:focus { color: #ff6300; } 2564 .hover-gold:hover, 2565 .hover-gold:focus { color: #ffb700; } 2566 .hover-yellow:hover, 2567 .hover-yellow:focus { color: #ffd700; } 2568 .hover-light-yellow:hover, 2569 .hover-light-yellow:focus { color: #fbf1a9; } 2570 .hover-purple:hover, 2571 .hover-purple:focus { color: #5e2ca5; } 2572 .hover-light-purple:hover, 2573 .hover-light-purple:focus { color: #a463f2; } 2574 .hover-dark-pink:hover, 2575 .hover-dark-pink:focus { color: #d5008f; } 2576 .hover-hot-pink:hover, 2577 .hover-hot-pink:focus { color: #ff41b4; } 2578 .hover-pink:hover, 2579 .hover-pink:focus { color: #ff80cc; } 2580 .hover-light-pink:hover, 2581 .hover-light-pink:focus { color: #ffa3d7; } 2582 .hover-dark-green:hover, 2583 .hover-dark-green:focus { color: #137752; } 2584 .hover-green:hover, 2585 .hover-green:focus { color: #19a974; } 2586 .hover-light-green:hover, 2587 .hover-light-green:focus { color: #9eebcf; } 2588 .hover-navy:hover, 2589 .hover-navy:focus { color: #001b44; } 2590 .hover-dark-blue:hover, 2591 .hover-dark-blue:focus { color: #00449e; } 2592 .hover-blue:hover, 2593 .hover-blue:focus { color: #0594CB; } 2594 .hover-light-blue:hover, 2595 .hover-light-blue:focus { color: #96ccff; } 2596 .hover-lightest-blue:hover, 2597 .hover-lightest-blue:focus { color: #cdecff; } 2598 .hover-washed-blue:hover, 2599 .hover-washed-blue:focus { color: #f6fffe; } 2600 .hover-washed-green:hover, 2601 .hover-washed-green:focus { color: #e8fdf5; } 2602 .hover-washed-yellow:hover, 2603 .hover-washed-yellow:focus { color: #fffceb; } 2604 .hover-washed-red:hover, 2605 .hover-washed-red:focus { color: #ffdfdf; } 2606 .hover-bg-dark-red:hover, 2607 .hover-bg-dark-red:focus { background-color: #e7040f; } 2608 .hover-bg-red:hover, 2609 .hover-bg-red:focus { background-color: #ff4136; } 2610 .hover-bg-light-red:hover, 2611 .hover-bg-light-red:focus { background-color: #ff725c; } 2612 .hover-bg-orange:hover, 2613 .hover-bg-orange:focus { background-color: #ff6300; } 2614 .hover-bg-gold:hover, 2615 .hover-bg-gold:focus { background-color: #ffb700; } 2616 .hover-bg-yellow:hover, 2617 .hover-bg-yellow:focus { background-color: #ffd700; } 2618 .hover-bg-light-yellow:hover, 2619 .hover-bg-light-yellow:focus { background-color: #fbf1a9; } 2620 .hover-bg-purple:hover, 2621 .hover-bg-purple:focus { background-color: #5e2ca5; } 2622 .hover-bg-light-purple:hover, 2623 .hover-bg-light-purple:focus { background-color: #a463f2; } 2624 .hover-bg-dark-pink:hover, 2625 .hover-bg-dark-pink:focus { background-color: #d5008f; } 2626 .hover-bg-hot-pink:hover, 2627 .hover-bg-hot-pink:focus { background-color: #ff41b4; } 2628 .hover-bg-pink:hover, 2629 .hover-bg-pink:focus { background-color: #ff80cc; } 2630 .hover-bg-light-pink:hover, 2631 .hover-bg-light-pink:focus { background-color: #ffa3d7; } 2632 .hover-bg-dark-green:hover, 2633 .hover-bg-dark-green:focus { background-color: #137752; } 2634 .hover-bg-green:hover, 2635 .hover-bg-green:focus { background-color: #19a974; } 2636 .hover-bg-light-green:hover, 2637 .hover-bg-light-green:focus { background-color: #9eebcf; } 2638 .hover-bg-navy:hover, 2639 .hover-bg-navy:focus { background-color: #001b44; } 2640 .hover-bg-dark-blue:hover, 2641 .hover-bg-dark-blue:focus { background-color: #00449e; } 2642 .hover-bg-blue:hover, 2643 .hover-bg-blue:focus { background-color: #0594CB; } 2644 .hover-bg-light-blue:hover, 2645 .hover-bg-light-blue:focus { background-color: #96ccff; } 2646 .hover-bg-lightest-blue:hover, 2647 .hover-bg-lightest-blue:focus { background-color: #cdecff; } 2648 .hover-bg-washed-blue:hover, 2649 .hover-bg-washed-blue:focus { background-color: #f6fffe; } 2650 .hover-bg-washed-green:hover, 2651 .hover-bg-washed-green:focus { background-color: #e8fdf5; } 2652 .hover-bg-washed-yellow:hover, 2653 .hover-bg-washed-yellow:focus { background-color: #fffceb; } 2654 .hover-bg-washed-red:hover, 2655 .hover-bg-washed-red:focus { background-color: #ffdfdf; } 2656 .hover-bg-inherit:hover, 2657 .hover-bg-inherit:focus { background-color: inherit; } 2658 /* Variables */ 2659 /* 2660 SPACING 2661 Docs: http://tachyons.io/docs/layout/spacing/ 2662 2663 An eight step powers of two scale ranging from 0 to 16rem. 2664 2665 Base: 2666 p = padding 2667 m = margin 2668 2669 Modifiers: 2670 a = all 2671 h = horizontal 2672 v = vertical 2673 t = top 2674 r = right 2675 b = bottom 2676 l = left 2677 2678 0 = none 2679 1 = 1st step in spacing scale 2680 2 = 2nd step in spacing scale 2681 3 = 3rd step in spacing scale 2682 4 = 4th step in spacing scale 2683 5 = 5th step in spacing scale 2684 6 = 6th step in spacing scale 2685 7 = 7th step in spacing scale 2686 2687 Media Query Extensions: 2688 -ns = not-small 2689 -m = medium 2690 -l = large 2691 2692 */ 2693 .pa0 { padding: 0; } 2694 .pa1 { padding: .25rem; } 2695 .pa2 { padding: .5rem; } 2696 .pa3 { padding: 1rem; } 2697 .pa4 { padding: 2rem; } 2698 .pa5 { padding: 4rem; } 2699 .pa6 { padding: 8rem; } 2700 .pa7 { padding: 16rem; } 2701 .pl0 { padding-left: 0; } 2702 .pl1 { padding-left: .25rem; } 2703 .pl2 { padding-left: .5rem; } 2704 .pl3 { padding-left: 1rem; } 2705 .pl4 { padding-left: 2rem; } 2706 .pl5 { padding-left: 4rem; } 2707 .pl6 { padding-left: 8rem; } 2708 .pl7 { padding-left: 16rem; } 2709 .pr0 { padding-right: 0; } 2710 .pr1 { padding-right: .25rem; } 2711 .pr2 { padding-right: .5rem; } 2712 .pr3 { padding-right: 1rem; } 2713 .pr4 { padding-right: 2rem; } 2714 .pr5 { padding-right: 4rem; } 2715 .pr6 { padding-right: 8rem; } 2716 .pr7 { padding-right: 16rem; } 2717 .pb0 { padding-bottom: 0; } 2718 .pb1 { padding-bottom: .25rem; } 2719 .pb2 { padding-bottom: .5rem; } 2720 .pb3 { padding-bottom: 1rem; } 2721 .pb4 { padding-bottom: 2rem; } 2722 .pb5 { padding-bottom: 4rem; } 2723 .pb6 { padding-bottom: 8rem; } 2724 .pb7 { padding-bottom: 16rem; } 2725 .pt0 { padding-top: 0; } 2726 .pt1 { padding-top: .25rem; } 2727 .pt2 { padding-top: .5rem; } 2728 .pt3 { padding-top: 1rem; } 2729 .pt4 { padding-top: 2rem; } 2730 .pt5 { padding-top: 4rem; } 2731 .pt6 { padding-top: 8rem; } 2732 .pt7 { padding-top: 16rem; } 2733 .pv0 { 2734 padding-top: 0; 2735 padding-bottom: 0; 2736 } 2737 .pv1 { 2738 padding-top: .25rem; 2739 padding-bottom: .25rem; 2740 } 2741 .pv2 { 2742 padding-top: .5rem; 2743 padding-bottom: .5rem; 2744 } 2745 .pv3 { 2746 padding-top: 1rem; 2747 padding-bottom: 1rem; 2748 } 2749 .pv4 { 2750 padding-top: 2rem; 2751 padding-bottom: 2rem; 2752 } 2753 .pv5 { 2754 padding-top: 4rem; 2755 padding-bottom: 4rem; 2756 } 2757 .pv6 { 2758 padding-top: 8rem; 2759 padding-bottom: 8rem; 2760 } 2761 .pv7 { 2762 padding-top: 16rem; 2763 padding-bottom: 16rem; 2764 } 2765 .ph0 { 2766 padding-left: 0; 2767 padding-right: 0; 2768 } 2769 .ph1 { 2770 padding-left: .25rem; 2771 padding-right: .25rem; 2772 } 2773 .ph2 { 2774 padding-left: .5rem; 2775 padding-right: .5rem; 2776 } 2777 .ph3 { 2778 padding-left: 1rem; 2779 padding-right: 1rem; 2780 } 2781 .ph4 { 2782 padding-left: 2rem; 2783 padding-right: 2rem; 2784 } 2785 .ph5 { 2786 padding-left: 4rem; 2787 padding-right: 4rem; 2788 } 2789 .ph6 { 2790 padding-left: 8rem; 2791 padding-right: 8rem; 2792 } 2793 .ph7 { 2794 padding-left: 16rem; 2795 padding-right: 16rem; 2796 } 2797 .ma0 { margin: 0; } 2798 .ma1 { margin: .25rem; } 2799 .ma2 { margin: .5rem; } 2800 .ma3 { margin: 1rem; } 2801 .ma4 { margin: 2rem; } 2802 .ma5 { margin: 4rem; } 2803 .ma6 { margin: 8rem; } 2804 .ma7 { margin: 16rem; } 2805 .ml0 { margin-left: 0; } 2806 .ml1 { margin-left: .25rem; } 2807 .ml2 { margin-left: .5rem; } 2808 .ml3 { margin-left: 1rem; } 2809 .ml4 { margin-left: 2rem; } 2810 .ml5 { margin-left: 4rem; } 2811 .ml6 { margin-left: 8rem; } 2812 .ml7 { margin-left: 16rem; } 2813 .mr0 { margin-right: 0; } 2814 .mr1 { margin-right: .25rem; } 2815 .mr2 { margin-right: .5rem; } 2816 .mr3 { margin-right: 1rem; } 2817 .mr4 { margin-right: 2rem; } 2818 .mr5 { margin-right: 4rem; } 2819 .mr6 { margin-right: 8rem; } 2820 .mr7 { margin-right: 16rem; } 2821 .mb0 { margin-bottom: 0; } 2822 .mb1 { margin-bottom: .25rem; } 2823 .mb2 { margin-bottom: .5rem; } 2824 .mb3 { margin-bottom: 1rem; } 2825 .mb4 { margin-bottom: 2rem; } 2826 .mb5 { margin-bottom: 4rem; } 2827 .mb6 { margin-bottom: 8rem; } 2828 .mb7 { margin-bottom: 16rem; } 2829 .mt0 { margin-top: 0; } 2830 .mt1 { margin-top: .25rem; } 2831 .mt2 { margin-top: .5rem; } 2832 .mt3 { margin-top: 1rem; } 2833 .mt4 { margin-top: 2rem; } 2834 .mt5 { margin-top: 4rem; } 2835 .mt6 { margin-top: 8rem; } 2836 .mt7 { margin-top: 16rem; } 2837 .mv0 { 2838 margin-top: 0; 2839 margin-bottom: 0; 2840 } 2841 .mv1 { 2842 margin-top: .25rem; 2843 margin-bottom: .25rem; 2844 } 2845 .mv2 { 2846 margin-top: .5rem; 2847 margin-bottom: .5rem; 2848 } 2849 .mv3 { 2850 margin-top: 1rem; 2851 margin-bottom: 1rem; 2852 } 2853 .mv4 { 2854 margin-top: 2rem; 2855 margin-bottom: 2rem; 2856 } 2857 .mv5 { 2858 margin-top: 4rem; 2859 margin-bottom: 4rem; 2860 } 2861 .mv6 { 2862 margin-top: 8rem; 2863 margin-bottom: 8rem; 2864 } 2865 .mv7 { 2866 margin-top: 16rem; 2867 margin-bottom: 16rem; 2868 } 2869 .mh0 { 2870 margin-left: 0; 2871 margin-right: 0; 2872 } 2873 .mh1 { 2874 margin-left: .25rem; 2875 margin-right: .25rem; 2876 } 2877 .mh2 { 2878 margin-left: .5rem; 2879 margin-right: .5rem; 2880 } 2881 .mh3 { 2882 margin-left: 1rem; 2883 margin-right: 1rem; 2884 } 2885 .mh4 { 2886 margin-left: 2rem; 2887 margin-right: 2rem; 2888 } 2889 .mh5 { 2890 margin-left: 4rem; 2891 margin-right: 4rem; 2892 } 2893 .mh6 { 2894 margin-left: 8rem; 2895 margin-right: 8rem; 2896 } 2897 .mh7 { 2898 margin-left: 16rem; 2899 margin-right: 16rem; 2900 } 2901 @media screen and (min-width: 30em) { 2902 .pa0-ns { padding: 0; } 2903 .pa1-ns { padding: .25rem; } 2904 .pa2-ns { padding: .5rem; } 2905 .pa3-ns { padding: 1rem; } 2906 .pa4-ns { padding: 2rem; } 2907 .pa5-ns { padding: 4rem; } 2908 .pa6-ns { padding: 8rem; } 2909 .pa7-ns { padding: 16rem; } 2910 2911 .pl0-ns { padding-left: 0; } 2912 .pl1-ns { padding-left: .25rem; } 2913 .pl2-ns { padding-left: .5rem; } 2914 .pl3-ns { padding-left: 1rem; } 2915 .pl4-ns { padding-left: 2rem; } 2916 .pl5-ns { padding-left: 4rem; } 2917 .pl6-ns { padding-left: 8rem; } 2918 .pl7-ns { padding-left: 16rem; } 2919 2920 .pr0-ns { padding-right: 0; } 2921 .pr1-ns { padding-right: .25rem; } 2922 .pr2-ns { padding-right: .5rem; } 2923 .pr3-ns { padding-right: 1rem; } 2924 .pr4-ns { padding-right: 2rem; } 2925 .pr5-ns { padding-right: 4rem; } 2926 .pr6-ns { padding-right: 8rem; } 2927 .pr7-ns { padding-right: 16rem; } 2928 2929 .pb0-ns { padding-bottom: 0; } 2930 .pb1-ns { padding-bottom: .25rem; } 2931 .pb2-ns { padding-bottom: .5rem; } 2932 .pb3-ns { padding-bottom: 1rem; } 2933 .pb4-ns { padding-bottom: 2rem; } 2934 .pb5-ns { padding-bottom: 4rem; } 2935 .pb6-ns { padding-bottom: 8rem; } 2936 .pb7-ns { padding-bottom: 16rem; } 2937 2938 .pt0-ns { padding-top: 0; } 2939 .pt1-ns { padding-top: .25rem; } 2940 .pt2-ns { padding-top: .5rem; } 2941 .pt3-ns { padding-top: 1rem; } 2942 .pt4-ns { padding-top: 2rem; } 2943 .pt5-ns { padding-top: 4rem; } 2944 .pt6-ns { padding-top: 8rem; } 2945 .pt7-ns { padding-top: 16rem; } 2946 2947 .pv0-ns { 2948 padding-top: 0; 2949 padding-bottom: 0; 2950 } 2951 .pv1-ns { 2952 padding-top: .25rem; 2953 padding-bottom: .25rem; 2954 } 2955 .pv2-ns { 2956 padding-top: .5rem; 2957 padding-bottom: .5rem; 2958 } 2959 .pv3-ns { 2960 padding-top: 1rem; 2961 padding-bottom: 1rem; 2962 } 2963 .pv4-ns { 2964 padding-top: 2rem; 2965 padding-bottom: 2rem; 2966 } 2967 .pv5-ns { 2968 padding-top: 4rem; 2969 padding-bottom: 4rem; 2970 } 2971 .pv6-ns { 2972 padding-top: 8rem; 2973 padding-bottom: 8rem; 2974 } 2975 .pv7-ns { 2976 padding-top: 16rem; 2977 padding-bottom: 16rem; 2978 } 2979 .ph0-ns { 2980 padding-left: 0; 2981 padding-right: 0; 2982 } 2983 .ph1-ns { 2984 padding-left: .25rem; 2985 padding-right: .25rem; 2986 } 2987 .ph2-ns { 2988 padding-left: .5rem; 2989 padding-right: .5rem; 2990 } 2991 .ph3-ns { 2992 padding-left: 1rem; 2993 padding-right: 1rem; 2994 } 2995 .ph4-ns { 2996 padding-left: 2rem; 2997 padding-right: 2rem; 2998 } 2999 .ph5-ns { 3000 padding-left: 4rem; 3001 padding-right: 4rem; 3002 } 3003 .ph6-ns { 3004 padding-left: 8rem; 3005 padding-right: 8rem; 3006 } 3007 .ph7-ns { 3008 padding-left: 16rem; 3009 padding-right: 16rem; 3010 } 3011 3012 .ma0-ns { margin: 0; } 3013 .ma1-ns { margin: .25rem; } 3014 .ma2-ns { margin: .5rem; } 3015 .ma3-ns { margin: 1rem; } 3016 .ma4-ns { margin: 2rem; } 3017 .ma5-ns { margin: 4rem; } 3018 .ma6-ns { margin: 8rem; } 3019 .ma7-ns { margin: 16rem; } 3020 3021 .ml0-ns { margin-left: 0; } 3022 .ml1-ns { margin-left: .25rem; } 3023 .ml2-ns { margin-left: .5rem; } 3024 .ml3-ns { margin-left: 1rem; } 3025 .ml4-ns { margin-left: 2rem; } 3026 .ml5-ns { margin-left: 4rem; } 3027 .ml6-ns { margin-left: 8rem; } 3028 .ml7-ns { margin-left: 16rem; } 3029 3030 .mr0-ns { margin-right: 0; } 3031 .mr1-ns { margin-right: .25rem; } 3032 .mr2-ns { margin-right: .5rem; } 3033 .mr3-ns { margin-right: 1rem; } 3034 .mr4-ns { margin-right: 2rem; } 3035 .mr5-ns { margin-right: 4rem; } 3036 .mr6-ns { margin-right: 8rem; } 3037 .mr7-ns { margin-right: 16rem; } 3038 3039 .mb0-ns { margin-bottom: 0; } 3040 .mb1-ns { margin-bottom: .25rem; } 3041 .mb2-ns { margin-bottom: .5rem; } 3042 .mb3-ns { margin-bottom: 1rem; } 3043 .mb4-ns { margin-bottom: 2rem; } 3044 .mb5-ns { margin-bottom: 4rem; } 3045 .mb6-ns { margin-bottom: 8rem; } 3046 .mb7-ns { margin-bottom: 16rem; } 3047 3048 .mt0-ns { margin-top: 0; } 3049 .mt1-ns { margin-top: .25rem; } 3050 .mt2-ns { margin-top: .5rem; } 3051 .mt3-ns { margin-top: 1rem; } 3052 .mt4-ns { margin-top: 2rem; } 3053 .mt5-ns { margin-top: 4rem; } 3054 .mt6-ns { margin-top: 8rem; } 3055 .mt7-ns { margin-top: 16rem; } 3056 3057 .mv0-ns { 3058 margin-top: 0; 3059 margin-bottom: 0; 3060 } 3061 .mv1-ns { 3062 margin-top: .25rem; 3063 margin-bottom: .25rem; 3064 } 3065 .mv2-ns { 3066 margin-top: .5rem; 3067 margin-bottom: .5rem; 3068 } 3069 .mv3-ns { 3070 margin-top: 1rem; 3071 margin-bottom: 1rem; 3072 } 3073 .mv4-ns { 3074 margin-top: 2rem; 3075 margin-bottom: 2rem; 3076 } 3077 .mv5-ns { 3078 margin-top: 4rem; 3079 margin-bottom: 4rem; 3080 } 3081 .mv6-ns { 3082 margin-top: 8rem; 3083 margin-bottom: 8rem; 3084 } 3085 .mv7-ns { 3086 margin-top: 16rem; 3087 margin-bottom: 16rem; 3088 } 3089 3090 .mh0-ns { 3091 margin-left: 0; 3092 margin-right: 0; 3093 } 3094 .mh1-ns { 3095 margin-left: .25rem; 3096 margin-right: .25rem; 3097 } 3098 .mh2-ns { 3099 margin-left: .5rem; 3100 margin-right: .5rem; 3101 } 3102 .mh3-ns { 3103 margin-left: 1rem; 3104 margin-right: 1rem; 3105 } 3106 .mh4-ns { 3107 margin-left: 2rem; 3108 margin-right: 2rem; 3109 } 3110 .mh5-ns { 3111 margin-left: 4rem; 3112 margin-right: 4rem; 3113 } 3114 .mh6-ns { 3115 margin-left: 8rem; 3116 margin-right: 8rem; 3117 } 3118 .mh7-ns { 3119 margin-left: 16rem; 3120 margin-right: 16rem; 3121 } 3122 3123 } 3124 @media screen and (min-width: 30em) and (max-width: 60em) { 3125 .pa0-m { padding: 0; } 3126 .pa1-m { padding: .25rem; } 3127 .pa2-m { padding: .5rem; } 3128 .pa3-m { padding: 1rem; } 3129 .pa4-m { padding: 2rem; } 3130 .pa5-m { padding: 4rem; } 3131 .pa6-m { padding: 8rem; } 3132 .pa7-m { padding: 16rem; } 3133 3134 .pl0-m { padding-left: 0; } 3135 .pl1-m { padding-left: .25rem; } 3136 .pl2-m { padding-left: .5rem; } 3137 .pl3-m { padding-left: 1rem; } 3138 .pl4-m { padding-left: 2rem; } 3139 .pl5-m { padding-left: 4rem; } 3140 .pl6-m { padding-left: 8rem; } 3141 .pl7-m { padding-left: 16rem; } 3142 3143 .pr0-m { padding-right: 0; } 3144 .pr1-m { padding-right: .25rem; } 3145 .pr2-m { padding-right: .5rem; } 3146 .pr3-m { padding-right: 1rem; } 3147 .pr4-m { padding-right: 2rem; } 3148 .pr5-m { padding-right: 4rem; } 3149 .pr6-m { padding-right: 8rem; } 3150 .pr7-m { padding-right: 16rem; } 3151 3152 .pb0-m { padding-bottom: 0; } 3153 .pb1-m { padding-bottom: .25rem; } 3154 .pb2-m { padding-bottom: .5rem; } 3155 .pb3-m { padding-bottom: 1rem; } 3156 .pb4-m { padding-bottom: 2rem; } 3157 .pb5-m { padding-bottom: 4rem; } 3158 .pb6-m { padding-bottom: 8rem; } 3159 .pb7-m { padding-bottom: 16rem; } 3160 3161 .pt0-m { padding-top: 0; } 3162 .pt1-m { padding-top: .25rem; } 3163 .pt2-m { padding-top: .5rem; } 3164 .pt3-m { padding-top: 1rem; } 3165 .pt4-m { padding-top: 2rem; } 3166 .pt5-m { padding-top: 4rem; } 3167 .pt6-m { padding-top: 8rem; } 3168 .pt7-m { padding-top: 16rem; } 3169 3170 .pv0-m { 3171 padding-top: 0; 3172 padding-bottom: 0; 3173 } 3174 .pv1-m { 3175 padding-top: .25rem; 3176 padding-bottom: .25rem; 3177 } 3178 .pv2-m { 3179 padding-top: .5rem; 3180 padding-bottom: .5rem; 3181 } 3182 .pv3-m { 3183 padding-top: 1rem; 3184 padding-bottom: 1rem; 3185 } 3186 .pv4-m { 3187 padding-top: 2rem; 3188 padding-bottom: 2rem; 3189 } 3190 .pv5-m { 3191 padding-top: 4rem; 3192 padding-bottom: 4rem; 3193 } 3194 .pv6-m { 3195 padding-top: 8rem; 3196 padding-bottom: 8rem; 3197 } 3198 .pv7-m { 3199 padding-top: 16rem; 3200 padding-bottom: 16rem; 3201 } 3202 3203 .ph0-m { 3204 padding-left: 0; 3205 padding-right: 0; 3206 } 3207 .ph1-m { 3208 padding-left: .25rem; 3209 padding-right: .25rem; 3210 } 3211 .ph2-m { 3212 padding-left: .5rem; 3213 padding-right: .5rem; 3214 } 3215 .ph3-m { 3216 padding-left: 1rem; 3217 padding-right: 1rem; 3218 } 3219 .ph4-m { 3220 padding-left: 2rem; 3221 padding-right: 2rem; 3222 } 3223 .ph5-m { 3224 padding-left: 4rem; 3225 padding-right: 4rem; 3226 } 3227 .ph6-m { 3228 padding-left: 8rem; 3229 padding-right: 8rem; 3230 } 3231 .ph7-m { 3232 padding-left: 16rem; 3233 padding-right: 16rem; 3234 } 3235 3236 .ma0-m { margin: 0; } 3237 .ma1-m { margin: .25rem; } 3238 .ma2-m { margin: .5rem; } 3239 .ma3-m { margin: 1rem; } 3240 .ma4-m { margin: 2rem; } 3241 .ma5-m { margin: 4rem; } 3242 .ma6-m { margin: 8rem; } 3243 .ma7-m { margin: 16rem; } 3244 3245 .ml0-m { margin-left: 0; } 3246 .ml1-m { margin-left: .25rem; } 3247 .ml2-m { margin-left: .5rem; } 3248 .ml3-m { margin-left: 1rem; } 3249 .ml4-m { margin-left: 2rem; } 3250 .ml5-m { margin-left: 4rem; } 3251 .ml6-m { margin-left: 8rem; } 3252 .ml7-m { margin-left: 16rem; } 3253 3254 .mr0-m { margin-right: 0; } 3255 .mr1-m { margin-right: .25rem; } 3256 .mr2-m { margin-right: .5rem; } 3257 .mr3-m { margin-right: 1rem; } 3258 .mr4-m { margin-right: 2rem; } 3259 .mr5-m { margin-right: 4rem; } 3260 .mr6-m { margin-right: 8rem; } 3261 .mr7-m { margin-right: 16rem; } 3262 3263 .mb0-m { margin-bottom: 0; } 3264 .mb1-m { margin-bottom: .25rem; } 3265 .mb2-m { margin-bottom: .5rem; } 3266 .mb3-m { margin-bottom: 1rem; } 3267 .mb4-m { margin-bottom: 2rem; } 3268 .mb5-m { margin-bottom: 4rem; } 3269 .mb6-m { margin-bottom: 8rem; } 3270 .mb7-m { margin-bottom: 16rem; } 3271 3272 .mt0-m { margin-top: 0; } 3273 .mt1-m { margin-top: .25rem; } 3274 .mt2-m { margin-top: .5rem; } 3275 .mt3-m { margin-top: 1rem; } 3276 .mt4-m { margin-top: 2rem; } 3277 .mt5-m { margin-top: 4rem; } 3278 .mt6-m { margin-top: 8rem; } 3279 .mt7-m { margin-top: 16rem; } 3280 3281 .mv0-m { 3282 margin-top: 0; 3283 margin-bottom: 0; 3284 } 3285 .mv1-m { 3286 margin-top: .25rem; 3287 margin-bottom: .25rem; 3288 } 3289 .mv2-m { 3290 margin-top: .5rem; 3291 margin-bottom: .5rem; 3292 } 3293 .mv3-m { 3294 margin-top: 1rem; 3295 margin-bottom: 1rem; 3296 } 3297 .mv4-m { 3298 margin-top: 2rem; 3299 margin-bottom: 2rem; 3300 } 3301 .mv5-m { 3302 margin-top: 4rem; 3303 margin-bottom: 4rem; 3304 } 3305 .mv6-m { 3306 margin-top: 8rem; 3307 margin-bottom: 8rem; 3308 } 3309 .mv7-m { 3310 margin-top: 16rem; 3311 margin-bottom: 16rem; 3312 } 3313 3314 .mh0-m { 3315 margin-left: 0; 3316 margin-right: 0; 3317 } 3318 .mh1-m { 3319 margin-left: .25rem; 3320 margin-right: .25rem; 3321 } 3322 .mh2-m { 3323 margin-left: .5rem; 3324 margin-right: .5rem; 3325 } 3326 .mh3-m { 3327 margin-left: 1rem; 3328 margin-right: 1rem; 3329 } 3330 .mh4-m { 3331 margin-left: 2rem; 3332 margin-right: 2rem; 3333 } 3334 .mh5-m { 3335 margin-left: 4rem; 3336 margin-right: 4rem; 3337 } 3338 .mh6-m { 3339 margin-left: 8rem; 3340 margin-right: 8rem; 3341 } 3342 .mh7-m { 3343 margin-left: 16rem; 3344 margin-right: 16rem; 3345 } 3346 3347 } 3348 @media screen and (min-width: 60em) { 3349 .pa0-l { padding: 0; } 3350 .pa1-l { padding: .25rem; } 3351 .pa2-l { padding: .5rem; } 3352 .pa3-l { padding: 1rem; } 3353 .pa4-l { padding: 2rem; } 3354 .pa5-l { padding: 4rem; } 3355 .pa6-l { padding: 8rem; } 3356 .pa7-l { padding: 16rem; } 3357 3358 .pl0-l { padding-left: 0; } 3359 .pl1-l { padding-left: .25rem; } 3360 .pl2-l { padding-left: .5rem; } 3361 .pl3-l { padding-left: 1rem; } 3362 .pl4-l { padding-left: 2rem; } 3363 .pl5-l { padding-left: 4rem; } 3364 .pl6-l { padding-left: 8rem; } 3365 .pl7-l { padding-left: 16rem; } 3366 3367 .pr0-l { padding-right: 0; } 3368 .pr1-l { padding-right: .25rem; } 3369 .pr2-l { padding-right: .5rem; } 3370 .pr3-l { padding-right: 1rem; } 3371 .pr4-l { padding-right: 2rem; } 3372 .pr5-l { padding-right: 4rem; } 3373 .pr6-l { padding-right: 8rem; } 3374 .pr7-l { padding-right: 16rem; } 3375 3376 .pb0-l { padding-bottom: 0; } 3377 .pb1-l { padding-bottom: .25rem; } 3378 .pb2-l { padding-bottom: .5rem; } 3379 .pb3-l { padding-bottom: 1rem; } 3380 .pb4-l { padding-bottom: 2rem; } 3381 .pb5-l { padding-bottom: 4rem; } 3382 .pb6-l { padding-bottom: 8rem; } 3383 .pb7-l { padding-bottom: 16rem; } 3384 3385 .pt0-l { padding-top: 0; } 3386 .pt1-l { padding-top: .25rem; } 3387 .pt2-l { padding-top: .5rem; } 3388 .pt3-l { padding-top: 1rem; } 3389 .pt4-l { padding-top: 2rem; } 3390 .pt5-l { padding-top: 4rem; } 3391 .pt6-l { padding-top: 8rem; } 3392 .pt7-l { padding-top: 16rem; } 3393 3394 .pv0-l { 3395 padding-top: 0; 3396 padding-bottom: 0; 3397 } 3398 .pv1-l { 3399 padding-top: .25rem; 3400 padding-bottom: .25rem; 3401 } 3402 .pv2-l { 3403 padding-top: .5rem; 3404 padding-bottom: .5rem; 3405 } 3406 .pv3-l { 3407 padding-top: 1rem; 3408 padding-bottom: 1rem; 3409 } 3410 .pv4-l { 3411 padding-top: 2rem; 3412 padding-bottom: 2rem; 3413 } 3414 .pv5-l { 3415 padding-top: 4rem; 3416 padding-bottom: 4rem; 3417 } 3418 .pv6-l { 3419 padding-top: 8rem; 3420 padding-bottom: 8rem; 3421 } 3422 .pv7-l { 3423 padding-top: 16rem; 3424 padding-bottom: 16rem; 3425 } 3426 3427 .ph0-l { 3428 padding-left: 0; 3429 padding-right: 0; 3430 } 3431 .ph1-l { 3432 padding-left: .25rem; 3433 padding-right: .25rem; 3434 } 3435 .ph2-l { 3436 padding-left: .5rem; 3437 padding-right: .5rem; 3438 } 3439 .ph3-l { 3440 padding-left: 1rem; 3441 padding-right: 1rem; 3442 } 3443 .ph4-l { 3444 padding-left: 2rem; 3445 padding-right: 2rem; 3446 } 3447 .ph5-l { 3448 padding-left: 4rem; 3449 padding-right: 4rem; 3450 } 3451 .ph6-l { 3452 padding-left: 8rem; 3453 padding-right: 8rem; 3454 } 3455 .ph7-l { 3456 padding-left: 16rem; 3457 padding-right: 16rem; 3458 } 3459 3460 .ma0-l { margin: 0; } 3461 .ma1-l { margin: .25rem; } 3462 .ma2-l { margin: .5rem; } 3463 .ma3-l { margin: 1rem; } 3464 .ma4-l { margin: 2rem; } 3465 .ma5-l { margin: 4rem; } 3466 .ma6-l { margin: 8rem; } 3467 .ma7-l { margin: 16rem; } 3468 3469 .ml0-l { margin-left: 0; } 3470 .ml1-l { margin-left: .25rem; } 3471 .ml2-l { margin-left: .5rem; } 3472 .ml3-l { margin-left: 1rem; } 3473 .ml4-l { margin-left: 2rem; } 3474 .ml5-l { margin-left: 4rem; } 3475 .ml6-l { margin-left: 8rem; } 3476 .ml7-l { margin-left: 16rem; } 3477 3478 .mr0-l { margin-right: 0; } 3479 .mr1-l { margin-right: .25rem; } 3480 .mr2-l { margin-right: .5rem; } 3481 .mr3-l { margin-right: 1rem; } 3482 .mr4-l { margin-right: 2rem; } 3483 .mr5-l { margin-right: 4rem; } 3484 .mr6-l { margin-right: 8rem; } 3485 .mr7-l { margin-right: 16rem; } 3486 3487 .mb0-l { margin-bottom: 0; } 3488 .mb1-l { margin-bottom: .25rem; } 3489 .mb2-l { margin-bottom: .5rem; } 3490 .mb3-l { margin-bottom: 1rem; } 3491 .mb4-l { margin-bottom: 2rem; } 3492 .mb5-l { margin-bottom: 4rem; } 3493 .mb6-l { margin-bottom: 8rem; } 3494 .mb7-l { margin-bottom: 16rem; } 3495 3496 .mt0-l { margin-top: 0; } 3497 .mt1-l { margin-top: .25rem; } 3498 .mt2-l { margin-top: .5rem; } 3499 .mt3-l { margin-top: 1rem; } 3500 .mt4-l { margin-top: 2rem; } 3501 .mt5-l { margin-top: 4rem; } 3502 .mt6-l { margin-top: 8rem; } 3503 .mt7-l { margin-top: 16rem; } 3504 3505 .mv0-l { 3506 margin-top: 0; 3507 margin-bottom: 0; 3508 } 3509 .mv1-l { 3510 margin-top: .25rem; 3511 margin-bottom: .25rem; 3512 } 3513 .mv2-l { 3514 margin-top: .5rem; 3515 margin-bottom: .5rem; 3516 } 3517 .mv3-l { 3518 margin-top: 1rem; 3519 margin-bottom: 1rem; 3520 } 3521 .mv4-l { 3522 margin-top: 2rem; 3523 margin-bottom: 2rem; 3524 } 3525 .mv5-l { 3526 margin-top: 4rem; 3527 margin-bottom: 4rem; 3528 } 3529 .mv6-l { 3530 margin-top: 8rem; 3531 margin-bottom: 8rem; 3532 } 3533 .mv7-l { 3534 margin-top: 16rem; 3535 margin-bottom: 16rem; 3536 } 3537 3538 .mh0-l { 3539 margin-left: 0; 3540 margin-right: 0; 3541 } 3542 .mh1-l { 3543 margin-left: .25rem; 3544 margin-right: .25rem; 3545 } 3546 .mh2-l { 3547 margin-left: .5rem; 3548 margin-right: .5rem; 3549 } 3550 .mh3-l { 3551 margin-left: 1rem; 3552 margin-right: 1rem; 3553 } 3554 .mh4-l { 3555 margin-left: 2rem; 3556 margin-right: 2rem; 3557 } 3558 .mh5-l { 3559 margin-left: 4rem; 3560 margin-right: 4rem; 3561 } 3562 .mh6-l { 3563 margin-left: 8rem; 3564 margin-right: 8rem; 3565 } 3566 .mh7-l { 3567 margin-left: 16rem; 3568 margin-right: 16rem; 3569 } 3570 } 3571 /* 3572 NEGATIVE MARGINS 3573 3574 Base: 3575 n = negative 3576 3577 Modifiers: 3578 a = all 3579 t = top 3580 r = right 3581 b = bottom 3582 l = left 3583 3584 1 = 1st step in spacing scale 3585 2 = 2nd step in spacing scale 3586 3 = 3rd step in spacing scale 3587 4 = 4th step in spacing scale 3588 5 = 5th step in spacing scale 3589 6 = 6th step in spacing scale 3590 7 = 7th step in spacing scale 3591 3592 Media Query Extensions: 3593 -ns = not-small 3594 -m = medium 3595 -l = large 3596 3597 */ 3598 .na1 { margin: -0.25rem; } 3599 .na2 { margin: -0.5rem; } 3600 .na3 { margin: -1rem; } 3601 .na4 { margin: -2rem; } 3602 .na5 { margin: -4rem; } 3603 .na6 { margin: -8rem; } 3604 .na7 { margin: -16rem; } 3605 .nl1 { margin-left: -0.25rem; } 3606 .nl2 { margin-left: -0.5rem; } 3607 .nl3 { margin-left: -1rem; } 3608 .nl4 { margin-left: -2rem; } 3609 .nl5 { margin-left: -4rem; } 3610 .nl6 { margin-left: -8rem; } 3611 .nl7 { margin-left: -16rem; } 3612 .nr1 { margin-right: -0.25rem; } 3613 .nr2 { margin-right: -0.5rem; } 3614 .nr3 { margin-right: -1rem; } 3615 .nr4 { margin-right: -2rem; } 3616 .nr5 { margin-right: -4rem; } 3617 .nr6 { margin-right: -8rem; } 3618 .nr7 { margin-right: -16rem; } 3619 .nb1 { margin-bottom: -0.25rem; } 3620 .nb2 { margin-bottom: -0.5rem; } 3621 .nb3 { margin-bottom: -1rem; } 3622 .nb4 { margin-bottom: -2rem; } 3623 .nb5 { margin-bottom: -4rem; } 3624 .nb6 { margin-bottom: -8rem; } 3625 .nb7 { margin-bottom: -16rem; } 3626 .nt1 { margin-top: -0.25rem; } 3627 .nt2 { margin-top: -0.5rem; } 3628 .nt3 { margin-top: -1rem; } 3629 .nt4 { margin-top: -2rem; } 3630 .nt5 { margin-top: -4rem; } 3631 .nt6 { margin-top: -8rem; } 3632 .nt7 { margin-top: -16rem; } 3633 @media screen and (min-width: 30em) { 3634 3635 .na1-ns { margin: -0.25rem; } 3636 .na2-ns { margin: -0.5rem; } 3637 .na3-ns { margin: -1rem; } 3638 .na4-ns { margin: -2rem; } 3639 .na5-ns { margin: -4rem; } 3640 .na6-ns { margin: -8rem; } 3641 .na7-ns { margin: -16rem; } 3642 3643 .nl1-ns { margin-left: -0.25rem; } 3644 .nl2-ns { margin-left: -0.5rem; } 3645 .nl3-ns { margin-left: -1rem; } 3646 .nl4-ns { margin-left: -2rem; } 3647 .nl5-ns { margin-left: -4rem; } 3648 .nl6-ns { margin-left: -8rem; } 3649 .nl7-ns { margin-left: -16rem; } 3650 3651 .nr1-ns { margin-right: -0.25rem; } 3652 .nr2-ns { margin-right: -0.5rem; } 3653 .nr3-ns { margin-right: -1rem; } 3654 .nr4-ns { margin-right: -2rem; } 3655 .nr5-ns { margin-right: -4rem; } 3656 .nr6-ns { margin-right: -8rem; } 3657 .nr7-ns { margin-right: -16rem; } 3658 3659 .nb1-ns { margin-bottom: -0.25rem; } 3660 .nb2-ns { margin-bottom: -0.5rem; } 3661 .nb3-ns { margin-bottom: -1rem; } 3662 .nb4-ns { margin-bottom: -2rem; } 3663 .nb5-ns { margin-bottom: -4rem; } 3664 .nb6-ns { margin-bottom: -8rem; } 3665 .nb7-ns { margin-bottom: -16rem; } 3666 3667 .nt1-ns { margin-top: -0.25rem; } 3668 .nt2-ns { margin-top: -0.5rem; } 3669 .nt3-ns { margin-top: -1rem; } 3670 .nt4-ns { margin-top: -2rem; } 3671 .nt5-ns { margin-top: -4rem; } 3672 .nt6-ns { margin-top: -8rem; } 3673 .nt7-ns { margin-top: -16rem; } 3674 3675 } 3676 @media screen and (min-width: 30em) and (max-width: 60em) { 3677 .na1-m { margin: -0.25rem; } 3678 .na2-m { margin: -0.5rem; } 3679 .na3-m { margin: -1rem; } 3680 .na4-m { margin: -2rem; } 3681 .na5-m { margin: -4rem; } 3682 .na6-m { margin: -8rem; } 3683 .na7-m { margin: -16rem; } 3684 3685 .nl1-m { margin-left: -0.25rem; } 3686 .nl2-m { margin-left: -0.5rem; } 3687 .nl3-m { margin-left: -1rem; } 3688 .nl4-m { margin-left: -2rem; } 3689 .nl5-m { margin-left: -4rem; } 3690 .nl6-m { margin-left: -8rem; } 3691 .nl7-m { margin-left: -16rem; } 3692 3693 .nr1-m { margin-right: -0.25rem; } 3694 .nr2-m { margin-right: -0.5rem; } 3695 .nr3-m { margin-right: -1rem; } 3696 .nr4-m { margin-right: -2rem; } 3697 .nr5-m { margin-right: -4rem; } 3698 .nr6-m { margin-right: -8rem; } 3699 .nr7-m { margin-right: -16rem; } 3700 3701 .nb1-m { margin-bottom: -0.25rem; } 3702 .nb2-m { margin-bottom: -0.5rem; } 3703 .nb3-m { margin-bottom: -1rem; } 3704 .nb4-m { margin-bottom: -2rem; } 3705 .nb5-m { margin-bottom: -4rem; } 3706 .nb6-m { margin-bottom: -8rem; } 3707 .nb7-m { margin-bottom: -16rem; } 3708 3709 .nt1-m { margin-top: -0.25rem; } 3710 .nt2-m { margin-top: -0.5rem; } 3711 .nt3-m { margin-top: -1rem; } 3712 .nt4-m { margin-top: -2rem; } 3713 .nt5-m { margin-top: -4rem; } 3714 .nt6-m { margin-top: -8rem; } 3715 .nt7-m { margin-top: -16rem; } 3716 3717 } 3718 @media screen and (min-width: 60em) { 3719 .na1-l { margin: -0.25rem; } 3720 .na2-l { margin: -0.5rem; } 3721 .na3-l { margin: -1rem; } 3722 .na4-l { margin: -2rem; } 3723 .na5-l { margin: -4rem; } 3724 .na6-l { margin: -8rem; } 3725 .na7-l { margin: -16rem; } 3726 3727 .nl1-l { margin-left: -0.25rem; } 3728 .nl2-l { margin-left: -0.5rem; } 3729 .nl3-l { margin-left: -1rem; } 3730 .nl4-l { margin-left: -2rem; } 3731 .nl5-l { margin-left: -4rem; } 3732 .nl6-l { margin-left: -8rem; } 3733 .nl7-l { margin-left: -16rem; } 3734 3735 .nr1-l { margin-right: -0.25rem; } 3736 .nr2-l { margin-right: -0.5rem; } 3737 .nr3-l { margin-right: -1rem; } 3738 .nr4-l { margin-right: -2rem; } 3739 .nr5-l { margin-right: -4rem; } 3740 .nr6-l { margin-right: -8rem; } 3741 .nr7-l { margin-right: -16rem; } 3742 3743 .nb1-l { margin-bottom: -0.25rem; } 3744 .nb2-l { margin-bottom: -0.5rem; } 3745 .nb3-l { margin-bottom: -1rem; } 3746 .nb4-l { margin-bottom: -2rem; } 3747 .nb5-l { margin-bottom: -4rem; } 3748 .nb6-l { margin-bottom: -8rem; } 3749 .nb7-l { margin-bottom: -16rem; } 3750 3751 .nt1-l { margin-top: -0.25rem; } 3752 .nt2-l { margin-top: -0.5rem; } 3753 .nt3-l { margin-top: -1rem; } 3754 .nt4-l { margin-top: -2rem; } 3755 .nt5-l { margin-top: -4rem; } 3756 .nt6-l { margin-top: -8rem; } 3757 .nt7-l { margin-top: -16rem; } 3758 } 3759 /* 3760 3761 TABLES 3762 Docs: http://tachyons.io/docs/elements/tables/ 3763 3764 */ 3765 .collapse { 3766 border-collapse: collapse; 3767 border-spacing: 0; 3768 } 3769 .striped--light-silver:nth-child(odd) { 3770 background-color: #aaa; 3771 } 3772 .striped--moon-gray:nth-child(odd) { 3773 background-color: #ccc; 3774 } 3775 .striped--light-gray:nth-child(odd) { 3776 background-color: #eee; 3777 } 3778 .striped--near-white:nth-child(odd) { 3779 background-color: #f4f4f4; 3780 } 3781 .stripe-light:nth-child(odd) { 3782 background-color: rgba(255, 255, 255, .1); 3783 } 3784 .stripe-dark:nth-child(odd) { 3785 background-color: rgba(0, 0, 0, .1); 3786 } 3787 /* 3788 3789 TEXT DECORATION 3790 Docs: http://tachyons.io/docs/typography/text-decoration/ 3791 3792 3793 Media Query Extensions: 3794 -ns = not-small 3795 -m = medium 3796 -l = large 3797 3798 */ 3799 .strike { text-decoration: line-through; } 3800 .underline { text-decoration: underline; } 3801 .no-underline { text-decoration: none; } 3802 @media screen and (min-width: 30em) { 3803 .strike-ns { text-decoration: line-through; } 3804 .underline-ns { text-decoration: underline; } 3805 .no-underline-ns { text-decoration: none; } 3806 } 3807 @media screen and (min-width: 30em) and (max-width: 60em) { 3808 .strike-m { text-decoration: line-through; } 3809 .underline-m { text-decoration: underline; } 3810 .no-underline-m { text-decoration: none; } 3811 } 3812 @media screen and (min-width: 60em) { 3813 .strike-l { text-decoration: line-through; } 3814 .underline-l { text-decoration: underline; } 3815 .no-underline-l { text-decoration: none; } 3816 } 3817 /* 3818 3819 TEXT ALIGN 3820 Docs: http://tachyons.io/docs/typography/text-align/ 3821 3822 Base 3823 t = text-align 3824 3825 Modifiers 3826 l = left 3827 r = right 3828 c = center 3829 j = justify 3830 3831 Media Query Extensions: 3832 -ns = not-small 3833 -m = medium 3834 -l = large 3835 3836 */ 3837 .tl { text-align: left; } 3838 .tr { text-align: right; } 3839 .tc { text-align: center; } 3840 .tj { text-align: justify; } 3841 @media screen and (min-width: 30em) { 3842 .tl-ns { text-align: left; } 3843 .tr-ns { text-align: right; } 3844 .tc-ns { text-align: center; } 3845 .tj-ns { text-align: justify; } 3846 } 3847 @media screen and (min-width: 30em) and (max-width: 60em) { 3848 .tl-m { text-align: left; } 3849 .tr-m { text-align: right; } 3850 .tc-m { text-align: center; } 3851 .tj-m { text-align: justify; } 3852 } 3853 @media screen and (min-width: 60em) { 3854 .tl-l { text-align: left; } 3855 .tr-l { text-align: right; } 3856 .tc-l { text-align: center; } 3857 .tj-l { text-align: justify; } 3858 } 3859 /* 3860 3861 TEXT TRANSFORM 3862 Docs: http://tachyons.io/docs/typography/text-transform/ 3863 3864 Base: 3865 tt = text-transform 3866 3867 Modifiers 3868 c = capitalize 3869 l = lowercase 3870 u = uppercase 3871 n = none 3872 3873 Media Query Extensions: 3874 -ns = not-small 3875 -m = medium 3876 -l = large 3877 3878 */ 3879 .ttc { text-transform: capitalize; } 3880 .ttl { text-transform: lowercase; } 3881 .ttu { text-transform: uppercase; } 3882 .ttn { text-transform: none; } 3883 @media screen and (min-width: 30em) { 3884 .ttc-ns { text-transform: capitalize; } 3885 .ttl-ns { text-transform: lowercase; } 3886 .ttu-ns { text-transform: uppercase; } 3887 .ttn-ns { text-transform: none; } 3888 } 3889 @media screen and (min-width: 30em) and (max-width: 60em) { 3890 .ttc-m { text-transform: capitalize; } 3891 .ttl-m { text-transform: lowercase; } 3892 .ttu-m { text-transform: uppercase; } 3893 .ttn-m { text-transform: none; } 3894 } 3895 @media screen and (min-width: 60em) { 3896 .ttc-l { text-transform: capitalize; } 3897 .ttl-l { text-transform: lowercase; } 3898 .ttu-l { text-transform: uppercase; } 3899 .ttn-l { text-transform: none; } 3900 } 3901 /* 3902 3903 TYPE SCALE 3904 Docs: http://tachyons.io/docs/typography/scale/ 3905 3906 Base: 3907 f = font-size 3908 3909 Modifiers 3910 1 = 1st step in size scale 3911 2 = 2nd step in size scale 3912 3 = 3rd step in size scale 3913 4 = 4th step in size scale 3914 5 = 5th step in size scale 3915 6 = 6th step in size scale 3916 7 = 7th step in size scale 3917 3918 Media Query Extensions: 3919 -ns = not-small 3920 -m = medium 3921 -l = large 3922 */ 3923 /* 3924 * For Hero/Marketing Titles 3925 * 3926 * These generally are too large for mobile 3927 * so be careful using them on smaller screens. 3928 * */ 3929 .f-6, 3930 .f-headline { 3931 font-size: 6rem; 3932 } 3933 .f-5, 3934 .f-subheadline { 3935 font-size: 5rem; 3936 } 3937 /* Type Scale */ 3938 .f1 { font-size: 3rem; } 3939 .f2 { font-size: 2.25rem; } 3940 .f3 { font-size: 1.5rem; } 3941 .f4 { font-size: 1.25rem; } 3942 .f5 { font-size: 1rem; } 3943 .f6 { font-size: .875rem; } 3944 .f7 { font-size: .75rem; } 3945 /* Small and hard to read for many people so use with extreme caution */ 3946 @media screen and (min-width: 30em){ 3947 .f-6-ns, 3948 .f-headline-ns { font-size: 6rem; } 3949 .f-5-ns, 3950 .f-subheadline-ns { font-size: 5rem; } 3951 .f1-ns { font-size: 3rem; } 3952 .f2-ns { font-size: 2.25rem; } 3953 .f3-ns { font-size: 1.5rem; } 3954 .f4-ns { font-size: 1.25rem; } 3955 .f5-ns { font-size: 1rem; } 3956 .f6-ns { font-size: .875rem; } 3957 .f7-ns { font-size: .75rem; } 3958 } 3959 @media screen and (min-width: 30em) and (max-width: 60em) { 3960 .f-6-m, 3961 .f-headline-m { font-size: 6rem; } 3962 .f-5-m, 3963 .f-subheadline-m { font-size: 5rem; } 3964 .f1-m { font-size: 3rem; } 3965 .f2-m { font-size: 2.25rem; } 3966 .f3-m { font-size: 1.5rem; } 3967 .f4-m { font-size: 1.25rem; } 3968 .f5-m { font-size: 1rem; } 3969 .f6-m { font-size: .875rem; } 3970 .f7-m { font-size: .75rem; } 3971 } 3972 @media screen and (min-width: 60em) { 3973 .f-6-l, 3974 .f-headline-l { 3975 font-size: 6rem; 3976 } 3977 .f-5-l, 3978 .f-subheadline-l { 3979 font-size: 5rem; 3980 } 3981 .f1-l { font-size: 3rem; } 3982 .f2-l { font-size: 2.25rem; } 3983 .f3-l { font-size: 1.5rem; } 3984 .f4-l { font-size: 1.25rem; } 3985 .f5-l { font-size: 1rem; } 3986 .f6-l { font-size: .875rem; } 3987 .f7-l { font-size: .75rem; } 3988 } 3989 /* 3990 3991 TYPOGRAPHY 3992 http://tachyons.io/docs/typography/measure/ 3993 3994 Media Query Extensions: 3995 -ns = not-small 3996 -m = medium 3997 -l = large 3998 3999 */ 4000 /* Measure is limited to ~66 characters */ 4001 .measure { 4002 max-width: 30em; 4003 } 4004 /* Measure is limited to ~80 characters */ 4005 .measure-wide { 4006 max-width: 34em; 4007 } 4008 /* Measure is limited to ~45 characters */ 4009 .measure-narrow { 4010 max-width: 20em; 4011 } 4012 /* Book paragraph style - paragraphs are indented with no vertical spacing. */ 4013 .indent { 4014 text-indent: 1em; 4015 margin-top: 0; 4016 margin-bottom: 0; 4017 } 4018 .small-caps { 4019 -webkit-font-feature-settings: "c2sc"; 4020 font-feature-settings: "c2sc"; 4021 font-variant: small-caps; 4022 } 4023 /* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */ 4024 .truncate { 4025 white-space: nowrap; 4026 overflow: hidden; 4027 text-overflow: ellipsis; 4028 } 4029 @media screen and (min-width: 30em) { 4030 .measure-ns { 4031 max-width: 30em; 4032 } 4033 .measure-wide-ns { 4034 max-width: 34em; 4035 } 4036 .measure-narrow-ns { 4037 max-width: 20em; 4038 } 4039 .indent-ns { 4040 text-indent: 1em; 4041 margin-top: 0; 4042 margin-bottom: 0; 4043 } 4044 .small-caps-ns { 4045 -webkit-font-feature-settings: "c2sc"; 4046 font-feature-settings: "c2sc"; 4047 font-variant: small-caps; 4048 } 4049 .truncate-ns { 4050 white-space: nowrap; 4051 overflow: hidden; 4052 text-overflow: ellipsis; 4053 } 4054 } 4055 @media screen and (min-width: 30em) and (max-width: 60em) { 4056 .measure-m { 4057 max-width: 30em; 4058 } 4059 .measure-wide-m { 4060 max-width: 34em; 4061 } 4062 .measure-narrow-m { 4063 max-width: 20em; 4064 } 4065 .indent-m { 4066 text-indent: 1em; 4067 margin-top: 0; 4068 margin-bottom: 0; 4069 } 4070 .small-caps-m { 4071 -webkit-font-feature-settings: "c2sc"; 4072 font-feature-settings: "c2sc"; 4073 font-variant: small-caps; 4074 } 4075 .truncate-m { 4076 white-space: nowrap; 4077 overflow: hidden; 4078 text-overflow: ellipsis; 4079 } 4080 } 4081 @media screen and (min-width: 60em) { 4082 .measure-l { 4083 max-width: 30em; 4084 } 4085 .measure-wide-l { 4086 max-width: 40em; 4087 } 4088 .measure-narrow-l { 4089 max-width: 20em; 4090 } 4091 .indent-l { 4092 text-indent: 1em; 4093 margin-top: 0; 4094 margin-bottom: 0; 4095 } 4096 .small-caps-l { 4097 -webkit-font-feature-settings: "c2sc"; 4098 font-feature-settings: "c2sc"; 4099 font-variant: small-caps; 4100 } 4101 .truncate-l { 4102 white-space: nowrap; 4103 overflow: hidden; 4104 text-overflow: ellipsis; 4105 } 4106 } 4107 /* 4108 4109 UTILITIES 4110 4111 Media Query Extensions: 4112 -ns = not-small 4113 -m = medium 4114 -l = large 4115 4116 */ 4117 /* Equivalent to .overflow-y-scroll */ 4118 .overflow-container { 4119 overflow-y: scroll; 4120 } 4121 .center { 4122 margin-right: auto; 4123 margin-left: auto; 4124 } 4125 .mr-auto { margin-right: auto; } 4126 .ml-auto { margin-left: auto; } 4127 @media screen and (min-width: 30em){ 4128 .center-ns { 4129 margin-right: auto; 4130 margin-left: auto; 4131 } 4132 .mr-auto-ns { margin-right: auto; } 4133 .ml-auto-ns { margin-left: auto; } 4134 } 4135 @media screen and (min-width: 30em) and (max-width: 60em){ 4136 .center-m { 4137 margin-right: auto; 4138 margin-left: auto; 4139 } 4140 .mr-auto-m { margin-right: auto; } 4141 .ml-auto-m { margin-left: auto; } 4142 } 4143 @media screen and (min-width: 60em){ 4144 .center-l { 4145 margin-right: auto; 4146 margin-left: auto; 4147 } 4148 .mr-auto-l { margin-right: auto; } 4149 .ml-auto-l { margin-left: auto; } 4150 } 4151 /* 4152 4153 VISIBILITY 4154 4155 Media Query Extensions: 4156 -ns = not-small 4157 -m = medium 4158 -l = large 4159 4160 */ 4161 /* 4162 Text that is hidden but accessible 4163 Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility 4164 */ 4165 .clip { 4166 position: fixed !important; 4167 _position: absolute !important; 4168 clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 4169 clip: rect(1px, 1px, 1px, 1px); 4170 } 4171 @media screen and (min-width: 30em) { 4172 .clip-ns { 4173 position: fixed !important; 4174 _position: absolute !important; 4175 clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 4176 clip: rect(1px, 1px, 1px, 1px); 4177 } 4178 } 4179 @media screen and (min-width: 30em) and (max-width: 60em) { 4180 .clip-m { 4181 position: fixed !important; 4182 _position: absolute !important; 4183 clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 4184 clip: rect(1px, 1px, 1px, 1px); 4185 } 4186 } 4187 @media screen and (min-width: 60em) { 4188 .clip-l { 4189 position: fixed !important; 4190 _position: absolute !important; 4191 clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 4192 clip: rect(1px, 1px, 1px, 1px); 4193 } 4194 } 4195 /* 4196 4197 WHITE SPACE 4198 4199 Media Query Extensions: 4200 -ns = not-small 4201 -m = medium 4202 -l = large 4203 4204 */ 4205 .ws-normal { white-space: normal; } 4206 .nowrap { white-space: nowrap; } 4207 .pre { white-space: pre; } 4208 @media screen and (min-width: 30em) { 4209 .ws-normal-ns { white-space: normal; } 4210 .nowrap-ns { white-space: nowrap; } 4211 .pre-ns { white-space: pre; } 4212 } 4213 @media screen and (min-width: 30em) and (max-width: 60em) { 4214 .ws-normal-m { white-space: normal; } 4215 .nowrap-m { white-space: nowrap; } 4216 .pre-m { white-space: pre; } 4217 } 4218 @media screen and (min-width: 60em) { 4219 .ws-normal-l { white-space: normal; } 4220 .nowrap-l { white-space: nowrap; } 4221 .pre-l { white-space: pre; } 4222 } 4223 /* 4224 4225 VERTICAL ALIGN 4226 4227 Media Query Extensions: 4228 -ns = not-small 4229 -m = medium 4230 -l = large 4231 4232 */ 4233 .v-base { vertical-align: baseline; } 4234 .v-mid { vertical-align: middle; } 4235 .v-top { vertical-align: top; } 4236 .v-btm { vertical-align: bottom; } 4237 @media screen and (min-width: 30em) { 4238 .v-base-ns { vertical-align: baseline; } 4239 .v-mid-ns { vertical-align: middle; } 4240 .v-top-ns { vertical-align: top; } 4241 .v-btm-ns { vertical-align: bottom; } 4242 } 4243 @media screen and (min-width: 30em) and (max-width: 60em) { 4244 .v-base-m { vertical-align: baseline; } 4245 .v-mid-m { vertical-align: middle; } 4246 .v-top-m { vertical-align: top; } 4247 .v-btm-m { vertical-align: bottom; } 4248 } 4249 @media screen and (min-width: 60em) { 4250 .v-base-l { vertical-align: baseline; } 4251 .v-mid-l { vertical-align: middle; } 4252 .v-top-l { vertical-align: top; } 4253 .v-btm-l { vertical-align: bottom; } 4254 } 4255 /* 4256 4257 HOVER EFFECTS 4258 Docs: http://tachyons.io/docs/themes/hovers/ 4259 4260 - Dim 4261 - Glow 4262 - Hide Child 4263 - Underline text 4264 - Grow 4265 - Pointer 4266 - Shadow 4267 4268 */ 4269 /* 4270 4271 Dim element on hover by adding the dim class. 4272 4273 */ 4274 .dim { 4275 opacity: 1; 4276 -webkit-transition: opacity .15s ease-in; 4277 transition: opacity .15s ease-in; 4278 } 4279 .dim:hover, 4280 .dim:focus { 4281 opacity: .5; 4282 -webkit-transition: opacity .15s ease-in; 4283 transition: opacity .15s ease-in; 4284 } 4285 .dim:active { 4286 opacity: .8; -webkit-transition: opacity .15s ease-out; transition: opacity .15s ease-out; 4287 } 4288 /* 4289 4290 Animate opacity to 100% on hover by adding the glow class. 4291 4292 */ 4293 .glow { 4294 -webkit-transition: opacity .15s ease-in; 4295 transition: opacity .15s ease-in; 4296 } 4297 .glow:hover, 4298 .glow:focus { 4299 opacity: 1; 4300 -webkit-transition: opacity .15s ease-in; 4301 transition: opacity .15s ease-in; 4302 } 4303 /* 4304 4305 Hide child & reveal on hover: 4306 4307 Put the hide-child class on a parent element and any nested element with the 4308 child class will be hidden and displayed on hover or focus. 4309 4310 <div class="hide-child"> 4311 <div class="child"> Hidden until hover or focus </div> 4312 <div class="child"> Hidden until hover or focus </div> 4313 <div class="child"> Hidden until hover or focus </div> 4314 <div class="child"> Hidden until hover or focus </div> 4315 </div> 4316 */ 4317 .hide-child .child { 4318 opacity: 0; 4319 -webkit-transition: opacity .15s ease-in; 4320 transition: opacity .15s ease-in; 4321 } 4322 .hide-child:hover .child, 4323 .hide-child:focus .child, 4324 .hide-child:active .child { 4325 opacity: 1; 4326 -webkit-transition: opacity .15s ease-in; 4327 transition: opacity .15s ease-in; 4328 } 4329 .underline-hover:hover, 4330 .underline-hover:focus { 4331 text-decoration: underline; 4332 } 4333 /* Can combine this with overflow-hidden to make background images grow on hover 4334 * even if you are using background-size: cover */ 4335 .grow { 4336 -moz-osx-font-smoothing: grayscale; 4337 -webkit-backface-visibility: hidden; 4338 backface-visibility: hidden; 4339 -webkit-transform: translateZ(0); 4340 transform: translateZ(0); 4341 -webkit-transition: -webkit-transform 0.25s ease-out; 4342 transition: -webkit-transform 0.25s ease-out; 4343 transition: transform 0.25s ease-out; 4344 transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out; 4345 } 4346 .grow:hover, 4347 .grow:focus { 4348 -webkit-transform: scale(1.05); 4349 transform: scale(1.05); 4350 } 4351 .grow:active { 4352 -webkit-transform: scale(.90); 4353 transform: scale(.90); 4354 } 4355 .grow-large { 4356 -moz-osx-font-smoothing: grayscale; 4357 -webkit-backface-visibility: hidden; 4358 backface-visibility: hidden; 4359 -webkit-transform: translateZ(0); 4360 transform: translateZ(0); 4361 -webkit-transition: -webkit-transform .25s ease-in-out; 4362 transition: -webkit-transform .25s ease-in-out; 4363 transition: transform .25s ease-in-out; 4364 transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out; 4365 } 4366 .grow-large:hover, 4367 .grow-large:focus { 4368 -webkit-transform: scale(1.2); 4369 transform: scale(1.2); 4370 } 4371 .grow-large:active { 4372 -webkit-transform: scale(.95); 4373 transform: scale(.95); 4374 } 4375 /* Add pointer on hover */ 4376 .pointer:hover { 4377 cursor: pointer; 4378 } 4379 /* 4380 Add shadow on hover. 4381 4382 Performant box-shadow animation pattern from 4383 http://tobiasahlin.com/blog/how-to-animate-box-shadow/ 4384 */ 4385 .shadow-hover { 4386 cursor: pointer; 4387 position: relative; 4388 -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); 4389 transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); 4390 } 4391 .shadow-hover::after { 4392 content: ''; 4393 -webkit-box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, .2); 4394 box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, .2); 4395 border-radius: inherit; 4396 opacity: 0; 4397 position: absolute; 4398 top: 0; 4399 left: 0; 4400 width: 100%; 4401 height: 100%; 4402 z-index: -1; 4403 -webkit-transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); 4404 transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); 4405 } 4406 .shadow-hover:hover::after, 4407 .shadow-hover:focus::after { 4408 opacity: 1; 4409 } 4410 /* Combine with classes in skins and skins-pseudo for 4411 * many different transition possibilities. */ 4412 .bg-animate, 4413 .bg-animate:hover, 4414 .bg-animate:focus { 4415 -webkit-transition: background-color .15s ease-in-out; 4416 transition: background-color .15s ease-in-out; 4417 } 4418 /* 4419 4420 Z-INDEX 4421 4422 Base 4423 z = z-index 4424 4425 Modifiers 4426 -0 = literal value 0 4427 -1 = literal value 1 4428 -2 = literal value 2 4429 -3 = literal value 3 4430 -4 = literal value 4 4431 -5 = literal value 5 4432 -999 = literal value 999 4433 -9999 = literal value 9999 4434 4435 -max = largest accepted z-index value as integer 4436 4437 -inherit = string value inherit 4438 -initial = string value initial 4439 -unset = string value unset 4440 4441 MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index 4442 Spec: http://www.w3.org/TR/CSS2/zindex.html 4443 Articles: 4444 https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ 4445 4446 Tips on extending: 4447 There might be a time worth using negative z-index values. 4448 Or if you are using tachyons with another project, you might need to 4449 adjust these values to suit your needs. 4450 4451 */ 4452 .z-0 { z-index: 0; } 4453 .z-1 { z-index: 1; } 4454 .z-2 { z-index: 2; } 4455 .z-3 { z-index: 3; } 4456 .z-4 { z-index: 4; } 4457 .z-5 { z-index: 5; } 4458 .z-999 { z-index: 999; } 4459 .z-9999 { z-index: 9999; } 4460 .z-max { 4461 z-index: 2147483647; 4462 } 4463 .z-inherit { z-index: inherit; } 4464 .z-initial { z-index: auto; z-index: initial; } 4465 .z-unset { z-index: unset; } 4466 /* 4467 4468 NESTED 4469 Tachyons module for styling nested elements 4470 that are generated by a cms. 4471 4472 */ 4473 .nested-copy-line-height p, 4474 .nested-copy-line-height ul, 4475 .nested-copy-line-height ol { 4476 line-height: 1.5; 4477 } 4478 .nested-headline-line-height h1, 4479 .nested-headline-line-height h2, 4480 .nested-headline-line-height h3, 4481 .nested-headline-line-height h4, 4482 .nested-headline-line-height h5, 4483 .nested-headline-line-height h6 { 4484 line-height: 1.25; 4485 } 4486 .nested-list-reset ul, 4487 .nested-list-reset ol { 4488 padding-left: 0; 4489 margin-left: 0; 4490 list-style-type: none; 4491 } 4492 .nested-copy-indent p+p { 4493 text-indent: 1em; 4494 margin-top: 0; 4495 margin-bottom: 0; 4496 } 4497 .nested-copy-separator p+p { 4498 margin-top: 1.5em; 4499 } 4500 .nested-img img { 4501 width: 100%; 4502 max-width: 100%; 4503 display: block; 4504 } 4505 .nested-links a { 4506 color: #0594CB; 4507 -webkit-transition: color .15s ease-in; 4508 transition: color .15s ease-in; 4509 } 4510 .nested-links a:hover, 4511 .nested-links a:focus { 4512 color: #96ccff; 4513 -webkit-transition: color .15s ease-in; 4514 transition: color .15s ease-in; 4515 } 4516 /*@import 'tachyons/src/_styles';*/ 4517 /* Variables */ 4518 /* Importing here will allow you to override any variables in the modules */ 4519 /* 4520 4521 Tachyons 4522 COLOR VARIABLES 4523 4524 Grayscale 4525 - Solids 4526 - Transparencies 4527 Colors 4528 4529 */ 4530 /* 4531 4532 CUSTOM MEDIA QUERIES 4533 4534 Media query values can be changed to fit your own content. 4535 There are no magic bullets when it comes to media query width values. 4536 They should be declared in em units - and they should be set to meet 4537 the needs of your content. You can also add additional media queries, 4538 or remove some of the existing ones. 4539 4540 These media queries can be referenced like so: 4541 4542 @media (--breakpoint-not-small) { 4543 .medium-and-larger-specific-style { 4544 background-color: red; 4545 } 4546 } 4547 4548 @media (--breakpoint-medium) { 4549 .medium-screen-specific-style { 4550 background-color: red; 4551 } 4552 } 4553 4554 @media (--breakpoint-large) { 4555 .large-and-larger-screen-specific-style { 4556 background-color: red; 4557 } 4558 } 4559 4560 */ 4561 /* Media Queries */ 4562 /* Debugging */ 4563 /*@import 'tachyons/src/_debug-children'; 4564 @import 'tachyons/src/_debug-grid';*/ 4565 /* Uncomment out the line below to help debug layout issues */ 4566 /* @import 'tachyons/src/_debug'; */ 4567 /* purgecss start ignore */ 4568 .header-link:after { 4569 position: relative; 4570 left: 0.5em; 4571 opacity: 0; 4572 font-size: 0.8em; 4573 -moz-transition: opacity 0.2s ease-in-out 0.1s; 4574 -ms-transition: opacity 0.2s ease-in-out 0.1s; 4575 } 4576 h2:hover .header-link, 4577 h3:hover .header-link, 4578 h4:hover .header-link, 4579 h5:hover .header-link, 4580 h6:hover .header-link { 4581 opacity: 1; 4582 } 4583 .animated { 4584 -webkit-animation-duration: .5s; 4585 animation-duration: .5s; 4586 -webkit-animation-fill-mode: forwards; 4587 animation-fill-mode: forwards; 4588 -webkit-animation-timing-function: ease-in-out; 4589 animation-timing-function: ease-in-out; 4590 } 4591 @-webkit-keyframes fadeIn { 4592 from { 4593 opacity: 0; 4594 } 4595 4596 to { 4597 opacity: 1; 4598 } 4599 } 4600 @keyframes fadeIn { 4601 from { 4602 opacity: 0; 4603 } 4604 4605 to { 4606 opacity: 1; 4607 } 4608 } 4609 .fadeIn { 4610 -webkit-animation-name: fadeIn; 4611 animation-name: fadeIn; 4612 } 4613 .animated-delay-1 { 4614 -webkit-animation-delay: 0.5s; 4615 animation-delay: 0.5s; 4616 } 4617 .note, 4618 .warning { 4619 4620 border-left-width: 4px; 4621 border-left-style: solid; 4622 position: relative; 4623 border-color: #0594CB; 4624 4625 display: block; 4626 } 4627 .note #exclamation-icon, 4628 .warning #exclamation-icon { 4629 4630 fill: #0594CB; 4631 position: absolute; 4632 top: 35%; 4633 left: -12px; 4634 /*background-color: white;*/ 4635 } 4636 .admonition-content { 4637 display: block; 4638 margin: 0px; 4639 padding: .125em 1em; 4640 /*margin-left: 1em;*/ 4641 margin-top: 2em; 4642 margin-bottom: 2em; 4643 overflow-x: auto; 4644 /*font-size: .9375em;*/ 4645 background-color: rgba(0, 0, 0, .05); 4646 } 4647 .hide-child-menu .child-menu { 4648 display: none; 4649 } 4650 .hide-child-menu:hover .child-menu, 4651 .hide-child-menu:focus .child-menu, 4652 .hide-child-menu:active .child-menu { 4653 display: block; 4654 } 4655 /*documentation-copy headings exaggerate spacing and size to chunk content */ 4656 .documentation-copy h2 { 4657 margin-top: 3em 4658 } 4659 .documentation-copy h2.minor { 4660 font-size: inherit; 4661 margin-top: inherit; 4662 border-bottom: none; 4663 } 4664 .searchbox{display:inline-block;position:relative;width:200px;height:32px!important;white-space:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;visibility:visible!important} 4665 .searchbox .algolia-autocomplete{display:block;width:100%;height:100%} 4666 .searchbox__wrapper{width:100%;height:100%;z-index:999;position:relative} 4667 .searchbox__input{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:background .4s ease,-webkit-box-shadow .4s ease;transition:background .4s ease,-webkit-box-shadow .4s ease;transition:box-shadow .4s ease,background .4s ease;transition:box-shadow .4s ease,background .4s ease,-webkit-box-shadow .4s ease;border:0;border-radius:16px;-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;background:#fff!important;padding:0 26px 0 32px;width:100%;height:100%;vertical-align:middle;white-space:normal;font-size:12px;-webkit-appearance:none;-moz-appearance:none;appearance:none} 4668 .searchbox__input::-webkit-search-cancel-button,.searchbox__input::-webkit-search-decoration,.searchbox__input::-webkit-search-results-button,.searchbox__input::-webkit-search-results-decoration{display:none} 4669 .searchbox__input:hover{-webkit-box-shadow:inset 0 0 0 1px #b3b3b3;box-shadow:inset 0 0 0 1px #b3b3b3} 4670 .searchbox__input:active,.searchbox__input:focus{outline:0;-webkit-box-shadow:inset 0 0 0 1px #aaa;box-shadow:inset 0 0 0 1px #aaa;background:#fff} 4671 .searchbox__input::-webkit-input-placeholder{color:#aaa} 4672 .searchbox__input:-ms-input-placeholder{color:#aaa} 4673 .searchbox__input::-ms-input-placeholder{color:#aaa} 4674 .searchbox__input::placeholder{color:#aaa} 4675 .searchbox__submit{position:absolute;top:0;margin:0;border:0;border-radius:16px 0 0 16px;background-color:rgba(69, 142, 225, 0);padding:0;width:32px;height:100%;vertical-align:middle;text-align:center;font-size:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;right:inherit;left:0} 4676 .searchbox__submit:before{display:inline-block;margin-right:-4px;height:100%;vertical-align:middle;content:""} 4677 .searchbox__submit:active,.searchbox__submit:hover{cursor:pointer} 4678 .searchbox__submit:focus{outline:0} 4679 .searchbox__submit svg{width:14px;height:14px;vertical-align:middle;fill:#6d7e96} 4680 .searchbox__reset{display:block;position:absolute;top:8px;right:8px;margin:0;border:0;background:none;cursor:pointer;padding:0;font-size:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;fill:rgba(0, 0, 0, .5)} 4681 .searchbox__reset.hide{display:none} 4682 .searchbox__reset:focus{outline:0} 4683 .searchbox__reset svg{display:block;margin:4px;width:8px;height:8px} 4684 .searchbox__input:valid~.searchbox__reset{display:block;-webkit-animation-name:sbx-reset-in;animation-name:sbx-reset-in;-webkit-animation-duration:.15s;animation-duration:.15s} 4685 @-webkit-keyframes sbx-reset-in{0%{-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0);opacity:0}to{-webkit-transform:none;transform:none;opacity:1}} 4686 @keyframes sbx-reset-in{0%{-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0);opacity:0}to{-webkit-transform:none;transform:none;opacity:1}} 4687 .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu{right:0!important;left:inherit!important} 4688 .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu:before{right:48px} 4689 .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu{left:0!important;right:inherit!important} 4690 .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu:before{left:48px} 4691 .algolia-autocomplete .ds-dropdown-menu{top:-6px;border-radius:4px;margin:6px 0 0;padding:0;text-align:left;height:auto;position:relative;background:transparent;border:none;z-index:999;max-width:600px;min-width:500px;-webkit-box-shadow:0 1px 0 0 rgba(0, 0, 0, .2),0 2px 3px 0 rgba(0, 0, 0, .1);box-shadow:0 1px 0 0 rgba(0, 0, 0, .2),0 2px 3px 0 rgba(0, 0, 0, .1)} 4692 .algolia-autocomplete .ds-dropdown-menu:before{display:block;position:absolute;content:"";width:14px;height:14px;background:#fff;z-index:1000;top:-7px;border-top:1px solid #d9d9d9;border-right:1px solid #d9d9d9;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);border-radius:2px} 4693 .algolia-autocomplete .ds-dropdown-menu .ds-suggestions{position:relative;z-index:1000;margin-top:8px} 4694 .algolia-autocomplete .ds-dropdown-menu .ds-suggestions a:hover{text-decoration:none} 4695 .algolia-autocomplete .ds-dropdown-menu .ds-suggestion{cursor:pointer} 4696 .algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion.suggestion-layout-simple,.algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content{background-color:rgba(69, 142, 225, .05)} 4697 .algolia-autocomplete .ds-dropdown-menu [class^=ds-dataset-]{position:relative;border:1px solid #d9d9d9;background:#fff;border-radius:4px;overflow:auto;padding:0 8px 8px} 4698 .algolia-autocomplete .ds-dropdown-menu *{-webkit-box-sizing:border-box;box-sizing:border-box} 4699 .algolia-autocomplete .algolia-docsearch-suggestion{display:block;position:relative;padding:0 8px;background:#fff;color:#02060c;overflow:hidden} 4700 .algolia-autocomplete .algolia-docsearch-suggestion--highlight{color:#174d8c;background:rgba(143, 187, 237, .1);padding:.1em .05em} 4701 .algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight,.algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl1 .algolia-docsearch-suggestion--highlight,.algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight{padding:0 0 1px;background:inherit;-webkit-box-shadow:inset 0 -2px 0 0 rgba(69, 142, 225, .8);box-shadow:inset 0 -2px 0 0 rgba(69, 142, 225, .8);color:inherit} 4702 .algolia-autocomplete .algolia-docsearch-suggestion--content{display:block;float:right;width:70%;position:relative;padding:5.33333px 0 5.33333px 10.66667px;cursor:pointer} 4703 .algolia-autocomplete .algolia-docsearch-suggestion--content:before{content:"";position:absolute;display:block;top:0;height:100%;width:1px;background:#ddd;left:-1px} 4704 .algolia-autocomplete .algolia-docsearch-suggestion--category-header{position:relative;border-bottom:1px solid #ddd;display:none;margin-top:8px;padding:4px 0;font-size:1em;color:#33363d} 4705 .algolia-autocomplete .algolia-docsearch-suggestion--wrapper{width:100%;float:left;padding:8px 0 0} 4706 .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column{float:left;width:30%;text-align:right;position:relative;padding:5.33333px 10.66667px;color:#a4a7ae;font-size:.9em;word-wrap:break-word} 4707 .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:before{content:"";position:absolute;display:block;top:0;height:100%;width:1px;background:#ddd;right:0} 4708 .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-inline{display:none} 4709 .algolia-autocomplete .algolia-docsearch-suggestion--title{margin-bottom:4px;color:#02060c;font-size:.9em;font-weight:700} 4710 .algolia-autocomplete .algolia-docsearch-suggestion--text{display:block;line-height:1.2em;font-size:.85em;color:#63676d} 4711 .algolia-autocomplete .algolia-docsearch-suggestion--no-results{width:100%;padding:8px 0;text-align:center;font-size:1.2em} 4712 .algolia-autocomplete .algolia-docsearch-suggestion--no-results:before{display:none} 4713 .algolia-autocomplete .algolia-docsearch-suggestion code{padding:1px 5px;font-size:90%;border:none;color:#222;background-color:#ebebeb;border-radius:3px;font-family:Menlo,Monaco,Consolas,Courier New,monospace} 4714 .algolia-autocomplete .algolia-docsearch-suggestion code .algolia-docsearch-suggestion--highlight{background:none} 4715 .algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--category-header,.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary{display:block} 4716 @media (min-width:768px){.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column{display:block}} 4717 @media (max-width:768px){.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column{display:inline-block;width:auto;float:left;padding:0;color:#02060c;font-size:.9em;font-weight:700;text-align:left;opacity:.5}.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column:before{display:none}.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column:after{content:"|"}.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content{display:inline-block;width:auto;text-align:left;float:left;padding:0}.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content:before{display:none}} 4718 .algolia-autocomplete .suggestion-layout-simple.algolia-docsearch-suggestion{border-bottom:1px solid #eee;padding:8px;margin:0} 4719 .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--content{width:100%;padding:0} 4720 .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--content:before{display:none} 4721 .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header{margin:0;padding:0;display:block;width:100%;border:none} 4722 .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header-lvl0,.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header-lvl1{opacity:.6;font-size:.85em} 4723 .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header-lvl1:before{background-image:url('data:image/svg+xml;utf8,<svg width="10" height="10" viewBox="0 0 20 38" xmlns="http://www.w3.org/2000/svg"><path d="M1.49 4.31l14 16.126.002-2.624-14 16.074-1.314 1.51 3.017 2.626 1.313-1.508 14-16.075 1.142-1.313-1.14-1.313-14-16.125L3.2.18.18 2.8l1.31 1.51z" fill-rule="evenodd" fill="%231D3657" /></svg>');content:"";width:10px;height:10px;display:inline-block} 4724 .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--wrapper{width:100%;float:left;margin:0;padding:0} 4725 .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--duplicate-content,.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--subcategory-inline{display:none!important} 4726 .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--title{margin:0;color:#458ee1;font-size:.9em;font-weight:400} 4727 .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--title:before{content:"#";font-weight:700;color:#458ee1;display:inline-block} 4728 .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--text{margin:4px 0 0;display:block;line-height:1.4em;padding:5.33333px 8px;background:#f8f8f8;font-size:.85em;opacity:.8} 4729 .algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight{color:#3f4145;font-weight:700;-webkit-box-shadow:none;box-shadow:none} 4730 .algolia-autocomplete .algolia-docsearch-footer{width:134px;height:20px;z-index:2000;margin-top:10.66667px;float:right;font-size:0;line-height:0} 4731 .algolia-autocomplete .algolia-docsearch-footer--logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='168' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M78.988.938h16.594a2.968 2.968 0 0 1 2.966 2.966V20.5a2.967 2.967 0 0 1-2.966 2.964H78.988a2.967 2.967 0 0 1-2.966-2.964V3.897A2.961 2.961 0 0 1 78.988.938zm41.937 17.866c-4.386.02-4.386-3.54-4.386-4.106l-.007-13.336 2.675-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-10.846-2.18c.821 0 1.43-.047 1.855-.129v-2.719a6.334 6.334 0 0 0-1.574-.199 5.7 5.7 0 0 0-.897.069 2.699 2.699 0 0 0-.814.24c-.24.116-.439.28-.582.491-.15.212-.219.335-.219.656 0 .628.219.991.616 1.23s.938.362 1.615.362zm-.233-9.7c.883 0 1.629.109 2.231.328.602.218 1.088.525 1.444.915.363.396.609.922.76 1.483.157.56.232 1.175.232 1.85v6.874a32.5 32.5 0 0 1-1.868.314c-.834.123-1.772.185-2.813.185-.69 0-1.327-.069-1.895-.198a4.001 4.001 0 0 1-1.471-.636 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.803 0-.656.13-1.073.384-1.525a3.24 3.24 0 0 1 1.047-1.106c.445-.287.95-.492 1.532-.615a8.8 8.8 0 0 1 1.82-.185 8.404 8.404 0 0 1 1.972.24v-.438c0-.307-.035-.6-.11-.874a1.88 1.88 0 0 0-.384-.73 1.784 1.784 0 0 0-.724-.493 3.164 3.164 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.735 7.735 0 0 0-1.26.307l-.321-2.192c.335-.117.834-.233 1.478-.349a10.98 10.98 0 0 1 2.073-.178zm52.842 9.626c.822 0 1.43-.048 1.854-.13V13.7a6.347 6.347 0 0 0-1.574-.199c-.294 0-.595.021-.896.069a2.7 2.7 0 0 0-.814.24 1.46 1.46 0 0 0-.582.491c-.15.212-.218.335-.218.656 0 .628.218.991.615 1.23.404.245.938.362 1.615.362zm-.226-9.694c.883 0 1.629.108 2.231.327.602.219 1.088.526 1.444.915.355.39.609.923.759 1.483a6.8 6.8 0 0 1 .233 1.852v6.873c-.41.088-1.034.19-1.868.314-.834.123-1.772.184-2.813.184-.69 0-1.327-.068-1.895-.198a4.001 4.001 0 0 1-1.471-.635 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.804 0-.656.13-1.073.384-1.524.26-.45.608-.82 1.047-1.107.445-.286.95-.491 1.532-.614a8.803 8.803 0 0 1 2.751-.13c.329.034.671.096 1.04.185v-.437a3.3 3.3 0 0 0-.109-.875 1.873 1.873 0 0 0-.384-.731 1.784 1.784 0 0 0-.724-.492 3.165 3.165 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.75 7.75 0 0 0-1.26.307l-.321-2.193c.335-.116.834-.232 1.478-.348a11.633 11.633 0 0 1 2.073-.177zm-8.034-1.271a1.626 1.626 0 0 1-1.628-1.62c0-.895.725-1.62 1.628-1.62.904 0 1.63.725 1.63 1.62 0 .895-.733 1.62-1.63 1.62zm1.348 13.22h-2.689V7.27l2.69-.423v11.956zm-4.714 0c-4.386.02-4.386-3.54-4.386-4.107l-.008-13.336 2.676-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-8.698-5.903c0-1.156-.253-2.119-.746-2.788-.493-.677-1.183-1.01-2.067-1.01-.882 0-1.574.333-2.065 1.01-.493.676-.733 1.632-.733 2.788 0 1.168.246 1.953.74 2.63.492.683 1.183 1.018 2.066 1.018.882 0 1.574-.342 2.067-1.019.492-.683.738-1.46.738-2.63zm2.737-.007c0 .902-.13 1.584-.397 2.33a5.52 5.52 0 0 1-1.128 1.906 4.986 4.986 0 0 1-1.752 1.223c-.685.286-1.739.45-2.265.45-.528-.006-1.574-.157-2.252-.45a5.096 5.096 0 0 1-1.744-1.223c-.487-.527-.863-1.162-1.137-1.906a6.345 6.345 0 0 1-.41-2.33c0-.902.123-1.77.397-2.508a5.554 5.554 0 0 1 1.15-1.892 5.133 5.133 0 0 1 1.75-1.216c.679-.287 1.425-.423 2.232-.423.808 0 1.553.142 2.237.423a4.88 4.88 0 0 1 1.753 1.216 5.644 5.644 0 0 1 1.135 1.892c.287.738.431 1.606.431 2.508zm-20.138 0c0 1.12.246 2.363.738 2.882.493.52 1.13.78 1.91.78.424 0 .828-.062 1.204-.178.377-.116.677-.253.917-.417V9.33a10.476 10.476 0 0 0-1.766-.226c-.971-.028-1.71.37-2.23 1.004-.513.636-.773 1.75-.773 2.788zm7.438 5.274c0 1.824-.466 3.156-1.404 4.004-.936.846-2.367 1.27-4.296 1.27-.705 0-2.17-.137-3.34-.396l.431-2.118c.98.205 2.272.26 2.95.26 1.074 0 1.84-.219 2.299-.656.459-.437.684-1.086.684-1.948v-.437a8.07 8.07 0 0 1-1.047.397c-.43.13-.93.198-1.492.198-.739 0-1.41-.116-2.018-.349a4.206 4.206 0 0 1-1.567-1.025c-.431-.45-.774-1.017-1.013-1.694-.24-.677-.363-1.885-.363-2.773 0-.834.13-1.88.384-2.577.26-.696.629-1.298 1.129-1.796.493-.498 1.095-.881 1.8-1.162a6.605 6.605 0 0 1 2.428-.457c.87 0 1.67.109 2.45.24.78.129 1.444.265 1.985.415V18.17z' fill='%235468FF'/%3E%3Cpath d='M6.972 6.677v1.627c-.712-.446-1.52-.67-2.425-.67-.585 0-1.045.13-1.38.391a1.24 1.24 0 0 0-.502 1.03c0 .425.164.765.494 1.02.33.256.835.532 1.516.83.447.192.795.356 1.045.495.25.138.537.332.862.582.324.25.563.548.718.894.154.345.23.741.23 1.188 0 .947-.334 1.691-1.004 2.234-.67.542-1.537.814-2.601.814-1.18 0-2.16-.229-2.936-.686v-1.708c.84.628 1.814.942 2.92.942.585 0 1.048-.136 1.388-.407.34-.271.51-.646.51-1.125 0-.287-.1-.55-.302-.79-.203-.24-.42-.42-.655-.542-.234-.123-.585-.29-1.053-.503a61.27 61.27 0 0 1-.582-.271 13.67 13.67 0 0 1-.55-.287 4.275 4.275 0 0 1-.567-.351 6.92 6.92 0 0 1-.455-.4c-.18-.17-.31-.34-.39-.51-.08-.17-.155-.37-.224-.598a2.553 2.553 0 0 1-.104-.742c0-.915.333-1.638.998-2.17.664-.532 1.523-.798 2.576-.798.968 0 1.793.17 2.473.51zm7.468 5.696v-.287c-.022-.607-.187-1.088-.495-1.444-.309-.357-.75-.535-1.324-.535-.532 0-.99.194-1.373.583-.382.388-.622.949-.717 1.683h3.909zm1.005 2.792v1.404c-.596.34-1.383.51-2.362.51-1.255 0-2.255-.377-3-1.132-.744-.755-1.116-1.744-1.116-2.968 0-1.297.34-2.316 1.021-3.055.68-.74 1.548-1.11 2.6-1.11 1.033 0 1.852.323 2.458.966.606.644.91 1.572.91 2.784 0 .33-.033.676-.096 1.038h-5.314c.107.702.405 1.239.894 1.611.49.372 1.106.558 1.85.558.862 0 1.58-.202 2.155-.606zm6.605-1.77h-1.212c-.596 0-1.045.116-1.349.35-.303.234-.454.532-.454.894 0 .372.117.664.35.877.235.213.575.32 1.022.32.51 0 .912-.142 1.204-.424.293-.281.44-.651.44-1.108v-.91zm-4.068-2.554V9.325c.627-.361 1.457-.542 2.489-.542 2.116 0 3.175 1.026 3.175 3.08V17h-1.548v-.957c-.415.68-1.143 1.02-2.186 1.02-.766 0-1.38-.22-1.843-.661-.462-.442-.694-1.003-.694-1.684 0-.776.293-1.38.878-1.81.585-.431 1.404-.647 2.457-.647h1.34V11.8c0-.554-.133-.971-.399-1.253-.266-.282-.707-.423-1.324-.423a4.07 4.07 0 0 0-2.345.718zm9.333-1.93v1.42c.394-1 1.101-1.5 2.123-1.5.148 0 .313.016.494.048v1.531a1.885 1.885 0 0 0-.75-.143c-.542 0-.989.24-1.34.718-.351.479-.527 1.048-.527 1.707V17h-1.563V8.91h1.563zm5.01 4.084c.022.82.272 1.492.75 2.019.479.526 1.15.79 2.01.79.639 0 1.235-.176 1.788-.527v1.404c-.521.319-1.186.479-1.995.479-1.265 0-2.276-.4-3.031-1.197-.755-.798-1.133-1.792-1.133-2.984 0-1.16.38-2.151 1.14-2.975.761-.825 1.79-1.237 3.088-1.237.702 0 1.346.149 1.93.447v1.436a3.242 3.242 0 0 0-1.77-.495c-.84 0-1.513.266-2.019.798-.505.532-.758 1.213-.758 2.042zM40.24 5.72v4.579c.458-1 1.293-1.5 2.505-1.5.787 0 1.42.245 1.899.734.479.49.718 1.17.718 2.042V17h-1.564v-5.106c0-.553-.14-.98-.422-1.284-.282-.303-.652-.455-1.11-.455-.531 0-1.002.202-1.411.606-.41.405-.615 1.022-.615 1.851V17h-1.563V5.72h1.563zm14.966 10.02c.596 0 1.096-.253 1.5-.758.404-.506.606-1.157.606-1.955 0-.915-.202-1.62-.606-2.114-.404-.495-.92-.742-1.548-.742-.553 0-1.05.224-1.491.67-.442.447-.662 1.133-.662 2.058 0 .958.212 1.67.638 2.138.425.469.946.703 1.563.703zM53.004 5.72v4.42c.574-.894 1.388-1.341 2.44-1.341 1.022 0 1.857.383 2.506 1.149.649.766.973 1.781.973 3.047 0 1.138-.309 2.109-.925 2.912-.617.803-1.463 1.205-2.537 1.205-1.075 0-1.894-.447-2.457-1.34V17h-1.58V5.72h1.58zm9.908 11.104l-3.223-7.913h1.739l1.005 2.632 1.26 3.415c.096-.32.48-1.458 1.15-3.415l.909-2.632h1.66l-2.92 7.866c-.777 2.074-1.963 3.11-3.559 3.11a2.92 2.92 0 0 1-.734-.079v-1.34c.17.042.351.064.543.064 1.032 0 1.755-.57 2.17-1.708z' fill='%235D6494'/%3E%3Cpath d='M89.632 5.967v-.772a.978.978 0 0 0-.978-.977h-2.28a.978.978 0 0 0-.978.977v.793c0 .088.082.15.171.13a7.127 7.127 0 0 1 1.984-.28c.65 0 1.295.088 1.917.259.082.02.164-.04.164-.13m-6.248 1.01l-.39-.389a.977.977 0 0 0-1.382 0l-.465.465a.973.973 0 0 0 0 1.38l.383.383c.062.061.15.047.205-.014.226-.307.472-.601.746-.874.281-.28.568-.526.883-.751.068-.042.075-.137.02-.2m4.16 2.453v3.341c0 .096.104.165.192.117l2.97-1.537c.068-.034.089-.117.055-.184a3.695 3.695 0 0 0-3.08-1.866c-.068 0-.136.054-.136.13m0 8.048a4.489 4.489 0 0 1-4.49-4.482 4.488 4.488 0 0 1 4.49-4.482 4.488 4.488 0 0 1 4.489 4.482 4.484 4.484 0 0 1-4.49 4.482m0-10.85a6.363 6.363 0 1 0 0 12.729 6.37 6.37 0 0 0 6.372-6.368 6.358 6.358 0 0 0-6.371-6.36' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:50%;background-size:100%;overflow:hidden;text-indent:-9000px;padding:0!important;width:100%;height:100%;display:block} 4732 /* These styles enhance the home page carousel, located here: themes/gohugoioTheme/layouts/partials/home-page-sections/showcase.html */ 4733 .overflow-x-scroll{ 4734 -webkit-overflow-scrolling: touch; 4735 } 4736 .row { 4737 -webkit-transition: 450ms -webkit-transform; 4738 transition: 450ms -webkit-transform; 4739 transition: 450ms transform; 4740 transition: 450ms transform, 450ms -webkit-transform; 4741 font-size: 0; 4742 } 4743 .tile { 4744 -webkit-transition: 450ms all; 4745 transition: 450ms all; 4746 } 4747 .details { 4748 background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .9)), to(rgba(0, 0, 0, 0))); 4749 background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, 0) 100%); 4750 -webkit-transition: 450ms opacity; 4751 transition: 450ms opacity; 4752 } 4753 .tile:hover .details { 4754 opacity: 1; 4755 } 4756 .row:hover .tile { 4757 opacity: 0.3; 4758 } 4759 .row:hover .tile:hover { 4760 opacity: 1; 4761 } 4762 .chroma .lntable pre { 4763 padding: 0; 4764 margin: 0; 4765 border: 0; 4766 } 4767 .chroma .lntable pre code { 4768 padding: 0; 4769 margin: 0; 4770 } 4771 pre, .pre { 4772 overflow-x: auto; 4773 overflow-y: hidden; 4774 overflow: scroll; 4775 } 4776 code { 4777 padding: 0.2em; 4778 margin: 0; 4779 font-size: 85%; 4780 background-color: rgba(27, 31, 35, .05); 4781 border-radius: 3px; 4782 } 4783 pre code { 4784 display: block; 4785 padding: 1.5em 1.5em; 4786 font-size: .875rem; 4787 line-height: 2; 4788 overflow-x: auto; 4789 } 4790 pre { 4791 background-color: #fff; 4792 color: #333; 4793 white-space: pre; 4794 -webkit-hyphens: none; 4795 -ms-hyphens: none; 4796 hyphens: none; 4797 position: relative; 4798 border-width: 1px; 4799 border-color: #ccc; 4800 border-style: solid; 4801 } 4802 /* The Pygments highlighter comes with its own styles. */ 4803 .highlight pre { 4804 background-color: inherit; 4805 color: inherit; 4806 padding: 0.5em; 4807 font-size: .875rem; 4808 } 4809 /*We are adding the copy button content here so we can change it with javascript. See the "Clipboard scripts"*/ 4810 .copy:after { 4811 content: "Copy" 4812 } 4813 .copied:after { 4814 content: "Copied" 4815 } 4816 @media screen and (min-width: 60em) { 4817 .full-width, pre.expand:hover 4818 { 4819 /*width: 100vw; 4820 position: relative; 4821 left: 50%; 4822 right: 50%; 4823 margin-left: -50vw; 4824 margin-right: -50vw;*/ 4825 /*width: 60vw;*/ 4826 /*position: relative; 4827 left: 50%; 4828 right: 50%;*/ 4829 /*margin-left: -30vw;*/ 4830 margin-right: -30vw; 4831 max-width: 100vw; 4832 } 4833 } 4834 .code-block .line-numbers-rows { 4835 background: #2f3a46; 4836 border: none; 4837 bottom: -50px; 4838 color: #98a4b3; 4839 left: -178px; 4840 padding: 50px 0; 4841 top: -50px; 4842 width: 138px 4843 } 4844 .code-block .line-numbers-rows>span:before { 4845 color: inherit; 4846 padding-right: 30px 4847 } 4848 .tab-button{ 4849 margin-bottom:1px; 4850 position: relative; 4851 z-index: 1; 4852 color:#333; 4853 border-color:#ccc; 4854 outline: none; 4855 background-color:white; 4856 } 4857 .tab-pane code{ 4858 background:#f1f2f2; 4859 border-radius:0; 4860 } 4861 .tab-pane .chroma{ 4862 background:none; 4863 padding:0; 4864 } 4865 .tab-button.active{ 4866 border-bottom-color:#f1f2f2; 4867 background-color: #f1f2f2; 4868 } 4869 .tab-content .tab-pane{ 4870 display: none; 4871 } 4872 .tab-content .tab-pane.active{ 4873 display: block; 4874 } 4875 /* Treatment of copy buttons inside a tab module */ 4876 .tab-content .copy, .tab-content .copied{ 4877 display: none; 4878 } 4879 .tab-content .tab-pane.active + .copy, .tab-content .tab-pane.active + .copied{ 4880 display: block; 4881 } 4882 .primary-color {color: #0594CB} 4883 .bg-primary-color {background-color: #0594CB} 4884 .hover-bg-primary-color:hover {background-color: #0594CB} 4885 .primary-color-dark {color: #0A1922} 4886 .bg-primary-color-dark {background-color: #0A1922} 4887 .hover-bg-primary-color-dark:hover {background-color: #0A1922} 4888 .primary-color-light {color: #f9f9f9} 4889 .bg-primary-color-light {background-color: #f9f9f9} 4890 .hover-bg-primary-color-light:hover {background-color: #f9f9f9} 4891 .accent-color {color: #EBB951} 4892 .bg-accent-color {background-color: #EBB951} 4893 .hover-bg-accent-color:hover {background-color: #EBB951} 4894 .accent-color-light {color: #FF4088} 4895 .hover-accent-color-light:hover {color: #FF4088} 4896 .bg-accent-color-light {background-color: #FF4088} 4897 .hover-bg-accent-color-light:hover {background-color: #FF4088} 4898 .accent-color-dark {color: #33ba91} 4899 .bg-accent-color-dark {background-color: #33ba91} 4900 .hover-bg-accent-color-dark:hover {background-color: #33ba91} 4901 .text-color-primary {color: #373737} 4902 .text-on-primary-color {color: #fff} 4903 .text-color-secondary {color: #ccc} 4904 .text-color-disabled {color: #F7f7f7} 4905 .divider-color {color: #f6f6f6} 4906 .warn-color {color: red} 4907 .nested-links a { 4908 color: #0594CB; 4909 text-decoration: none; 4910 4911 } 4912 .column-count-2 {-webkit-column-count: 1;column-count: 1} 4913 .column-gap-1 {-webkit-column-gap: 0;column-gap: 0} 4914 .break-inside-avoid {-webkit-column-break-inside: auto;break-inside: auto} 4915 @media screen and (min-width: 60em) { 4916 .column-count-3-l {-webkit-column-count: 3;column-count: 3} 4917 .column-count-2-l {-webkit-column-count: 2;column-count: 2} 4918 .column-gap-1-l {-webkit-column-gap: 1;column-gap: 1} 4919 .break-inside-avoid-l {-webkit-column-break-inside: avoid;break-inside: avoid} 4920 } 4921 .prose ul, .prose ol { 4922 margin-bottom: 2em; 4923 } 4924 .prose ul li, .prose ol li { 4925 margin-bottom: .5em; 4926 } 4927 .prose li:hover { 4928 background-color: #eee 4929 } 4930 .prose ::selection { 4931 background: #0594CB; /* WebKit/Blink Browsers */ 4932 color: white; 4933 } 4934 body { 4935 4936 line-height: 1.45; 4937 4938 } 4939 p {margin-bottom: 1.3em;} 4940 h1, h2, h3, h4 { 4941 margin: 1.414em 0 0.5em; 4942 4943 line-height: 1.2; 4944 } 4945 h1 { 4946 margin-top: 0; 4947 font-size: 2.441em; 4948 } 4949 h2 {font-size: 1.953em;} 4950 h3 {font-size: 1.563em;} 4951 h4 {font-size: 1.25em;} 4952 small, .font_small {font-size: 0.8em;} 4953 .prose table { 4954 width: 100%; 4955 margin-bottom: 3em; 4956 border-collapse: collapse; 4957 border-spacing: 0; 4958 font-size: 1em; 4959 border: 1px solid #eee 4960 4961 } 4962 .prose table th { 4963 background-color: #0594CB; 4964 border-bottom: 1px solid #0594CB; 4965 color: white; 4966 font-weight: 400; 4967 text-align: left; 4968 padding: .375em .5em; 4969 } 4970 .prose table td, .prose table tc { 4971 padding: .75em .5em; 4972 text-align: left; 4973 border-right: 1px solid #eee; 4974 } 4975 .prose table tr:nth-child(even) { 4976 background-color: #eee; 4977 } 4978 dl dt { 4979 font-weight: bold; 4980 font-size: 1.125rem; 4981 } 4982 dd { 4983 margin: .5em 0 2em 0; 4984 padding: 0; 4985 } 4986 .f2-fluid { 4987 font-size: 2.25rem; 4988 } 4989 @media screen and (min-width: 60em) { 4990 .f2-fluid { 4991 font-size: 1.25rem; 4992 font-size: calc(0.70833rem + 0.83333vw); 4993 } 4994 } 4995 /* From http://cssfontstack.com */ 4996 code, .code, pre code, .highlight pre { 4997 font-family: 'inconsolata',Menlo,Monaco,'Courier New',monospace; 4998 } 4999 .sans-serif { 5000 font-family: 'Muli', 5001 avenir, 5002 'helvetica neue', helvetica, 5003 ubuntu, 5004 roboto, noto, 5005 'segoe ui', arial, 5006 sans-serif; 5007 } 5008 .serif { 5009 font-family: Palatino,"Palatino Linotype","Palatino LT STD","Book Antiqua",Georgia,serif; 5010 } 5011 /* Monospaced Typefaces (for code) */ 5012 .courier { 5013 font-family: 'Courier Next', 5014 courier, 5015 monospace; 5016 } 5017 /* Sans-Serif Typefaces */ 5018 .helvetica { 5019 font-family: 'helvetica neue', helvetica, 5020 sans-serif; 5021 } 5022 .avenir { 5023 font-family: 'avenir next', avenir, 5024 sans-serif; 5025 } 5026 /* Serif Typefaces */ 5027 .athelas { 5028 font-family: athelas, 5029 georgia, 5030 serif; 5031 } 5032 .georgia { 5033 font-family: georgia, 5034 serif; 5035 } 5036 .times { 5037 font-family: times, 5038 serif; 5039 } 5040 .bodoni { 5041 font-family: "Bodoni MT", 5042 serif; 5043 } 5044 .calisto { 5045 font-family: "Calisto MT", 5046 serif; 5047 } 5048 .garamond { 5049 font-family: garamond, 5050 serif; 5051 } 5052 .baskerville { 5053 font-family: baskerville, 5054 serif; 5055 } 5056 /* pagination.html: https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/template_embedded.go#L117 */ 5057 .pagination { 5058 margin: 3rem 0; 5059 } 5060 .pagination li { 5061 display: inline-block; 5062 margin-right: .375rem; 5063 font-size: .875rem; 5064 margin-bottom: 2.5em; 5065 } 5066 .pagination li a { 5067 padding: .5rem .625rem; 5068 background-color: white; 5069 color: #333; 5070 border: 1px solid #ddd; 5071 border-radius: 3px; 5072 text-decoration: none; 5073 } 5074 .pagination li.disabled { 5075 display: none; 5076 } 5077 .pagination li.active a:link, 5078 .pagination li.active a:active, 5079 .pagination li.active a:visited { 5080 background-color: #ddd; 5081 } 5082 /* Hides non-meaningful TOC items*/ 5083 #TableOfContents ul li ul li ul li{ 5084 display: none; 5085 } 5086 #TableOfContents ul li { 5087 color: black; 5088 display: block; 5089 margin-bottom: .375em; 5090 line-height: 1.375; 5091 } 5092 #TableOfContents ul li a{ 5093 width: 100%; 5094 padding: .25em .375em; 5095 margin-left: -.375em; 5096 5097 } 5098 #TableOfContents ul li a:hover { 5099 background-color: #999; 5100 color: white; 5101 5102 } 5103 .no-js .needs-js { 5104 opacity: 0 5105 } 5106 .js .needs-js { 5107 opacity: 1; 5108 -webkit-transition: opacity .15s ease-in; 5109 transition: opacity .15s ease-in; 5110 } 5111 .facebook, .twitter, .instagram, .youtube { 5112 fill: #BABABA; 5113 } 5114 .facebook:hover { 5115 fill: #3b5998; 5116 } 5117 .twitter { 5118 fill: #55acee; 5119 } 5120 .twitter:hover { 5121 fill: #BABABA; 5122 } 5123 .instagram:hover { 5124 fill: #e95950; 5125 } 5126 .youtube:hover { 5127 fill: #bb0000; 5128 } 5129 @media (min-width: 75em) { 5130 5131 [data-scrolldir="down"] .sticky { 5132 position: fixed; 5133 top:100px; 5134 right:0; 5135 } 5136 5137 [data-scrolldir="up"] .sticky { 5138 position: fixed; 5139 top:100px; 5140 right:0; 5141 } 5142 } 5143 .fill-current { fill: currentColor; } 5144 /* Background */ 5145 .chroma { background-color: #ffffff } 5146 /* Error */ 5147 .chroma .err { color: #a61717; background-color: #e3d2d2 } 5148 /* LineTableTD */ 5149 .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } 5150 /* LineTable */ 5151 .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } 5152 /* LineHighlight */ 5153 .chroma .hl { display: block; width: 100%;background-color: #ffffcc } 5154 /* LineNumbersTable */ 5155 .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; } 5156 /* LineNumbers */ 5157 .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; } 5158 /* Keyword */ 5159 .chroma .k { font-weight: bold } 5160 /* KeywordConstant */ 5161 .chroma .kc { font-weight: bold } 5162 /* KeywordDeclaration */ 5163 .chroma .kd { font-weight: bold } 5164 /* KeywordNamespace */ 5165 .chroma .kn { font-weight: bold } 5166 /* KeywordPseudo */ 5167 .chroma .kp { font-weight: bold } 5168 /* KeywordReserved */ 5169 .chroma .kr { font-weight: bold } 5170 /* KeywordType */ 5171 .chroma .kt { color: #445588; font-weight: bold } 5172 /* NameAttribute */ 5173 .chroma .na { color: #008080 } 5174 /* NameBuiltin */ 5175 .chroma .nb { color: #999999 } 5176 /* NameClass */ 5177 .chroma .nc { color: #445588; font-weight: bold } 5178 /* NameConstant */ 5179 .chroma .no { color: #008080 } 5180 /* NameEntity */ 5181 .chroma .ni { color: #800080 } 5182 /* NameException */ 5183 .chroma .ne { color: #990000; font-weight: bold } 5184 /* NameFunction */ 5185 .chroma .nf { color: #990000; font-weight: bold } 5186 /* NameNamespace */ 5187 .chroma .nn { color: #555555 } 5188 /* NameTag */ 5189 .chroma .nt { color: #000080 } 5190 /* NameVariable */ 5191 .chroma .nv { color: #008080 } 5192 /* LiteralString */ 5193 .chroma .s { color: #bb8844 } 5194 /* LiteralStringAffix */ 5195 .chroma .sa { color: #bb8844 } 5196 /* LiteralStringBacktick */ 5197 .chroma .sb { color: #bb8844 } 5198 /* LiteralStringChar */ 5199 .chroma .sc { color: #bb8844 } 5200 /* LiteralStringDelimiter */ 5201 .chroma .dl { color: #bb8844 } 5202 /* LiteralStringDoc */ 5203 .chroma .sd { color: #bb8844 } 5204 /* LiteralStringDouble */ 5205 .chroma .s2 { color: #bb8844 } 5206 /* LiteralStringEscape */ 5207 .chroma .se { color: #bb8844 } 5208 /* LiteralStringHeredoc */ 5209 .chroma .sh { color: #bb8844 } 5210 /* LiteralStringInterpol */ 5211 .chroma .si { color: #bb8844 } 5212 /* LiteralStringOther */ 5213 .chroma .sx { color: #bb8844 } 5214 /* LiteralStringRegex */ 5215 .chroma .sr { color: #808000 } 5216 /* LiteralStringSingle */ 5217 .chroma .s1 { color: #bb8844 } 5218 /* LiteralStringSymbol */ 5219 .chroma .ss { color: #bb8844 } 5220 /* LiteralNumber */ 5221 .chroma .m { color: #009999 } 5222 /* LiteralNumberBin */ 5223 .chroma .mb { color: #009999 } 5224 /* LiteralNumberFloat */ 5225 .chroma .mf { color: #009999 } 5226 /* LiteralNumberHex */ 5227 .chroma .mh { color: #009999 } 5228 /* LiteralNumberInteger */ 5229 .chroma .mi { color: #009999 } 5230 /* LiteralNumberIntegerLong */ 5231 .chroma .il { color: #009999 } 5232 /* LiteralNumberOct */ 5233 .chroma .mo { color: #009999 } 5234 /* Operator */ 5235 .chroma .o { font-weight: bold } 5236 /* OperatorWord */ 5237 .chroma .ow { font-weight: bold } 5238 /* Comment */ 5239 .chroma .c { color: #999988; font-style: italic } 5240 /* CommentHashbang */ 5241 .chroma .ch { color: #999988; font-style: italic } 5242 /* CommentMultiline */ 5243 .chroma .cm { color: #999988; font-style: italic } 5244 /* CommentSingle */ 5245 .chroma .c1 { color: #999988; font-style: italic } 5246 /* CommentSpecial */ 5247 .chroma .cs { color: #999999; font-weight: bold; font-style: italic } 5248 /* CommentPreproc */ 5249 .chroma .cp { color: #999999; font-weight: bold } 5250 /* CommentPreprocFile */ 5251 .chroma .cpf { color: #999999; font-weight: bold } 5252 /* GenericDeleted */ 5253 .chroma .gd { color: #000000; background-color: #ffdddd } 5254 /* GenericEmph */ 5255 .chroma .ge { font-style: italic } 5256 /* GenericError */ 5257 .chroma .gr { color: #aa0000 } 5258 /* GenericHeading */ 5259 .chroma .gh { color: #999999 } 5260 /* GenericInserted */ 5261 .chroma .gi { color: #000000; background-color: #ddffdd } 5262 /* GenericOutput */ 5263 .chroma .go { color: #888888 } 5264 /* GenericPrompt */ 5265 .chroma .gp { color: #555555 } 5266 /* GenericStrong */ 5267 .chroma .gs { font-weight: bold } 5268 /* GenericSubheading */ 5269 .chroma .gu { color: #aaaaaa } 5270 /* GenericTraceback */ 5271 .chroma .gt { color: #aa0000 } 5272 /* TextWhitespace */ 5273 .chroma .w { color: #bbbbbb } 5274 .nested-blockquote blockquote { 5275 border-left: 4px solid #0594CB; 5276 padding-left: 1em; 5277 /*margin: 0;*/ 5278 } 5279 .mw-90 { 5280 max-width:90%; 5281 } 5282 /* purgecss end ignore */ 5283