1/*! TACHYONS v4.9.1 | http://tachyons.io */
2
3/*
4 *
5 * ________ ______
6 * ___ __/_____ _________ /______ ______________________
7 * __ / _ __ `/ ___/_ __ \_ / / / __ \_ __ \_ ___/
8 * _ / / /_/ // /__ _ / / / /_/ // /_/ / / / /(__ )
9 * /_/ \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/
10 * /____/
11 *
12 * TABLE OF CONTENTS
13 *
14 * 1. External Library Includes
15 * - Normalize.css | http://normalize.css.github.io
16 * 2. Tachyons Modules
17 * 3. Variables
18 * - Media Queries
19 * - Colors
20 * 4. Debugging
21 * - Debug all
22 * - Debug children
23 *
24 */
25
26/* External Library Includes */
27
28/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
29
30/* Document
31 ========================================================================== */
32
33/**
34 * 1. Correct the line height in all browsers.
35 * 2. Prevent adjustments of font size after orientation changes in iOS.
36 */
37
38html {
39 line-height: 1.15; /* 1 */
40 -webkit-text-size-adjust: 100%; /* 2 */
41}
42
43/* Sections
44 ========================================================================== */
45
46/**
47 * Remove the margin in all browsers.
48 */
49
50body {
51 margin: 0;
52}
53
54/**
55 * Correct the font size and margin on `h1` elements within `section` and
56 * `article` contexts in Chrome, Firefox, and Safari.
57 */
58
59h1 {
60 font-size: 2em;
61 margin: 0.67em 0;
62}
63
64/* Grouping content
65 ========================================================================== */
66
67/**
68 * 1. Add the correct box sizing in Firefox.
69 * 2. Show the overflow in Edge and IE.
70 */
71
72hr {
73 box-sizing: content-box; /* 1 */
74 height: 0; /* 1 */
75 overflow: visible; /* 2 */
76}
77
78/**
79 * 1. Correct the inheritance and scaling of font size in all browsers.
80 * 2. Correct the odd `em` font sizing in all browsers.
81 */
82
83pre {
84 font-family: monospace, monospace; /* 1 */
85 font-size: 1em; /* 2 */
86}
87
88/* Text-level semantics
89 ========================================================================== */
90
91/**
92 * Remove the gray background on active links in IE 10.
93 */
94
95a {
96 background-color: transparent;
97}
98
99/**
100 * 1. Remove the bottom border in Chrome 57-
101 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
102 */
103
104abbr[title] {
105 border-bottom: none; /* 1 */
106 text-decoration: underline; /* 2 */
107 text-decoration: underline dotted; /* 2 */
108}
109
110/**
111 * Add the correct font weight in Chrome, Edge, and Safari.
112 */
113
114b,
115strong {
116 font-weight: bolder;
117}
118
119/**
120 * 1. Correct the inheritance and scaling of font size in all browsers.
121 * 2. Correct the odd `em` font sizing in all browsers.
122 */
123
124code,
125kbd,
126samp {
127 font-family: monospace, monospace; /* 1 */
128 font-size: 1em; /* 2 */
129}
130
131/**
132 * Add the correct font size in all browsers.
133 */
134
135small {
136 font-size: 80%;
137}
138
139/**
140 * Prevent `sub` and `sup` elements from affecting the line height in
141 * all browsers.
142 */
143
144sub,
145sup {
146 font-size: 75%;
147 line-height: 0;
148 position: relative;
149 vertical-align: baseline;
150}
151
152sub {
153 bottom: -0.25em;
154}
155
156sup {
157 top: -0.5em;
158}
159
160/* Embedded content
161 ========================================================================== */
162
163/**
164 * Remove the border on images inside links in IE 10.
165 */
166
167img {
168 border-style: none;
169}
170
171/* Forms
172 ========================================================================== */
173
174/**
175 * 1. Change the font styles in all browsers.
176 * 2. Remove the margin in Firefox and Safari.
177 */
178
179button,
180input,
181optgroup,
182select,
183textarea {
184 font-family: inherit; /* 1 */
185 font-size: 100%; /* 1 */
186 line-height: 1.15; /* 1 */
187 margin: 0; /* 2 */
188}
189
190/**
191 * Show the overflow in IE.
192 * 1. Show the overflow in Edge.
193 */
194
195button,
196input { /* 1 */
197 overflow: visible;
198}
199
200/**
201 * Remove the inheritance of text transform in Edge, Firefox, and IE.
202 * 1. Remove the inheritance of text transform in Firefox.
203 */
204
205button,
206select { /* 1 */
207 text-transform: none;
208}
209
210/**
211 * Correct the inability to style clickable types in iOS and Safari.
212 */
213
214button,
215[type="button"],
216[type="reset"],
217[type="submit"] {
218 -webkit-appearance: button;
219}
220
221/**
222 * Remove the inner border and padding in Firefox.
223 */
224
225button::-moz-focus-inner,
226[type="button"]::-moz-focus-inner,
227[type="reset"]::-moz-focus-inner,
228[type="submit"]::-moz-focus-inner {
229 border-style: none;
230 padding: 0;
231}
232
233/**
234 * Restore the focus styles unset by the previous rule.
235 */
236
237button:-moz-focusring,
238[type="button"]:-moz-focusring,
239[type="reset"]:-moz-focusring,
240[type="submit"]:-moz-focusring {
241 outline: 1px dotted ButtonText;
242}
243
244/**
245 * Correct the padding in Firefox.
246 */
247
248fieldset {
249 padding: 0.35em 0.75em 0.625em;
250}
251
252/**
253 * 1. Correct the text wrapping in Edge and IE.
254 * 2. Correct the color inheritance from `fieldset` elements in IE.
255 * 3. Remove the padding so developers are not caught out when they zero out
256 * `fieldset` elements in all browsers.
257 */
258
259legend {
260 box-sizing: border-box; /* 1 */
261 color: inherit; /* 2 */
262 display: table; /* 1 */
263 max-width: 100%; /* 1 */
264 padding: 0; /* 3 */
265 white-space: normal; /* 1 */
266}
267
268/**
269 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
270 */
271
272progress {
273 vertical-align: baseline;
274}
275
276/**
277 * Remove the default vertical scrollbar in IE 10+.
278 */
279
280textarea {
281 overflow: auto;
282}
283
284/**
285 * 1. Add the correct box sizing in IE 10.
286 * 2. Remove the padding in IE 10.
287 */
288
289[type="checkbox"],
290[type="radio"] {
291 box-sizing: border-box; /* 1 */
292 padding: 0; /* 2 */
293}
294
295/**
296 * Correct the cursor style of increment and decrement buttons in Chrome.
297 */
298
299[type="number"]::-webkit-inner-spin-button,
300[type="number"]::-webkit-outer-spin-button {
301 height: auto;
302}
303
304/**
305 * 1. Correct the odd appearance in Chrome and Safari.
306 * 2. Correct the outline style in Safari.
307 */
308
309[type="search"] {
310 -webkit-appearance: textfield; /* 1 */
311 outline-offset: -2px; /* 2 */
312}
313
314/**
315 * Remove the inner padding in Chrome and Safari on macOS.
316 */
317
318[type="search"]::-webkit-search-decoration {
319 -webkit-appearance: none;
320}
321
322/**
323 * 1. Correct the inability to style clickable types in iOS and Safari.
324 * 2. Change font properties to `inherit` in Safari.
325 */
326
327::-webkit-file-upload-button {
328 -webkit-appearance: button; /* 1 */
329 font: inherit; /* 2 */
330}
331
332/* Interactive
333 ========================================================================== */
334
335/*
336 * Add the correct display in Edge, IE 10+, and Firefox.
337 */
338
339details {
340 display: block;
341}
342
343/*
344 * Add the correct display in all browsers.
345 */
346
347summary {
348 display: list-item;
349}
350
351/* Misc
352 ========================================================================== */
353
354/**
355 * Add the correct display in IE 10+.
356 */
357
358template {
359 display: none;
360}
361
362/**
363 * Add the correct display in IE 10.
364 */
365
366[hidden] {
367 display: none;
368}
369
370/* Modules */
371
372/*
373
374 BOX SIZING
375
376*/
377
378html,
379body,
380div,
381article,
382aside,
383section,
384main,
385nav,
386footer,
387header,
388form,
389fieldset,
390legend,
391pre,
392code,
393a,
394h1,h2,h3,h4,h5,h6,
395p,
396ul,
397ol,
398li,
399dl,
400dt,
401dd,
402blockquote,
403figcaption,
404figure,
405textarea,
406table,
407td,
408th,
409tr,
410input[type="email"],
411input[type="number"],
412input[type="password"],
413input[type="tel"],
414input[type="text"],
415input[type="url"],
416.border-box {
417 box-sizing: border-box;
418}
419
420/*
421
422 ASPECT RATIOS
423
424*/
425
426/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
427 * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
428 * Make sure there are no height and width attributes on the embedded media.
429 * Adapted from: https://github.com/suitcss/components-flex-embed
430 *
431 * Example:
432 *
433 * <div class="aspect-ratio aspect-ratio--16x9">
434 * <iframe class="aspect-ratio--object"></iframe>
435 * </div>
436 *
437 * */
438
439.aspect-ratio {
440 height: 0;
441 position: relative;
442}
443
444.aspect-ratio--16x9 { padding-bottom: 56.25%; }
445
446.aspect-ratio--9x16 { padding-bottom: 177.77%; }
447
448.aspect-ratio--4x3 { padding-bottom: 75%; }
449
450.aspect-ratio--3x4 { padding-bottom: 133.33%; }
451
452.aspect-ratio--6x4 { padding-bottom: 66.6%; }
453
454.aspect-ratio--4x6 { padding-bottom: 150%; }
455
456.aspect-ratio--8x5 { padding-bottom: 62.5%; }
457
458.aspect-ratio--5x8 { padding-bottom: 160%; }
459
460.aspect-ratio--7x5 { padding-bottom: 71.42%; }
461
462.aspect-ratio--5x7 { padding-bottom: 140%; }
463
464.aspect-ratio--1x1 { padding-bottom: 100%; }
465
466.aspect-ratio--object {
467 position: absolute;
468 top: 0;
469 right: 0;
470 bottom: 0;
471 left: 0;
472 width: 100%;
473 height: 100%;
474 z-index: 100;
475}
476
477@media screen and (min-width: 30em){
478 .aspect-ratio-ns {
479 height: 0;
480 position: relative;
481 }
482 .aspect-ratio--16x9-ns { padding-bottom: 56.25%; }
483 .aspect-ratio--9x16-ns { padding-bottom: 177.77%; }
484 .aspect-ratio--4x3-ns { padding-bottom: 75%; }
485 .aspect-ratio--3x4-ns { padding-bottom: 133.33%; }
486 .aspect-ratio--6x4-ns { padding-bottom: 66.6%; }
487 .aspect-ratio--4x6-ns { padding-bottom: 150%; }
488 .aspect-ratio--8x5-ns { padding-bottom: 62.5%; }
489 .aspect-ratio--5x8-ns { padding-bottom: 160%; }
490 .aspect-ratio--7x5-ns { padding-bottom: 71.42%; }
491 .aspect-ratio--5x7-ns { padding-bottom: 140%; }
492 .aspect-ratio--1x1-ns { padding-bottom: 100%; }
493 .aspect-ratio--object-ns {
494 position: absolute;
495 top: 0;
496 right: 0;
497 bottom: 0;
498 left: 0;
499 width: 100%;
500 height: 100%;
501 z-index: 100;
502 }
503}
504
505@media screen and (min-width: 30em) and (max-width: 60em){
506 .aspect-ratio-m {
507 height: 0;
508 position: relative;
509 }
510 .aspect-ratio--16x9-m { padding-bottom: 56.25%; }
511 .aspect-ratio--9x16-m { padding-bottom: 177.77%; }
512 .aspect-ratio--4x3-m { padding-bottom: 75%; }
513 .aspect-ratio--3x4-m { padding-bottom: 133.33%; }
514 .aspect-ratio--6x4-m { padding-bottom: 66.6%; }
515 .aspect-ratio--4x6-m { padding-bottom: 150%; }
516 .aspect-ratio--8x5-m { padding-bottom: 62.5%; }
517 .aspect-ratio--5x8-m { padding-bottom: 160%; }
518 .aspect-ratio--7x5-m { padding-bottom: 71.42%; }
519 .aspect-ratio--5x7-m { padding-bottom: 140%; }
520 .aspect-ratio--1x1-m { padding-bottom: 100%; }
521 .aspect-ratio--object-m {
522 position: absolute;
523 top: 0;
524 right: 0;
525 bottom: 0;
526 left: 0;
527 width: 100%;
528 height: 100%;
529 z-index: 100;
530 }
531}
532
533@media screen and (min-width: 60em){
534 .aspect-ratio-l {
535 height: 0;
536 position: relative;
537 }
538 .aspect-ratio--16x9-l { padding-bottom: 56.25%; }
539 .aspect-ratio--9x16-l { padding-bottom: 177.77%; }
540 .aspect-ratio--4x3-l { padding-bottom: 75%; }
541 .aspect-ratio--3x4-l { padding-bottom: 133.33%; }
542 .aspect-ratio--6x4-l { padding-bottom: 66.6%; }
543 .aspect-ratio--4x6-l { padding-bottom: 150%; }
544 .aspect-ratio--8x5-l { padding-bottom: 62.5%; }
545 .aspect-ratio--5x8-l { padding-bottom: 160%; }
546 .aspect-ratio--7x5-l { padding-bottom: 71.42%; }
547 .aspect-ratio--5x7-l { padding-bottom: 140%; }
548 .aspect-ratio--1x1-l { padding-bottom: 100%; }
549 .aspect-ratio--object-l {
550 position: absolute;
551 top: 0;
552 right: 0;
553 bottom: 0;
554 left: 0;
555 width: 100%;
556 height: 100%;
557 z-index: 100;
558 }
559}
560
561/*
562
563 IMAGES
564 Docs: http://tachyons.io/docs/elements/images/
565
566*/
567
568/* Responsive images! */
569
570img { max-width: 100%; }
571
572/*
573
574 BACKGROUND SIZE
575 Docs: http://tachyons.io/docs/themes/background-size/
576
577 Media Query Extensions:
578 -ns = not-small
579 -m = medium
580 -l = large
581
582*/
583
584/*
585 Often used in combination with background image set as an inline style
586 on an html element.
587*/
588
589.cover { background-size: cover!important; }
590
591.contain { background-size: contain!important; }
592
593@media screen and (min-width: 30em) {
594 .cover-ns { background-size: cover!important; }
595 .contain-ns { background-size: contain!important; }
596}
597
598@media screen and (min-width: 30em) and (max-width: 60em) {
599 .cover-m { background-size: cover!important; }
600 .contain-m { background-size: contain!important; }
601}
602
603@media screen and (min-width: 60em) {
604 .cover-l { background-size: cover!important; }
605 .contain-l { background-size: contain!important; }
606}
607
608/*
609
610 BACKGROUND POSITION
611
612 Base:
613 bg = background
614
615 Modifiers:
616 -center = center center
617 -top = top center
618 -right = center right
619 -bottom = bottom center
620 -left = center left
621
622 Media Query Extensions:
623 -ns = not-small
624 -m = medium
625 -l = large
626
627 */
628
629.bg-center {
630 background-repeat: no-repeat;
631 background-position: center center;
632}
633
634.bg-top {
635 background-repeat: no-repeat;
636 background-position: top center;
637}
638
639.bg-right {
640 background-repeat: no-repeat;
641 background-position: center right;
642}
643
644.bg-bottom {
645 background-repeat: no-repeat;
646 background-position: bottom center;
647}
648
649.bg-left {
650 background-repeat: no-repeat;
651 background-position: center left;
652}
653
654@media screen and (min-width: 30em) {
655 .bg-center-ns {
656 background-repeat: no-repeat;
657 background-position: center center;
658 }
659
660 .bg-top-ns {
661 background-repeat: no-repeat;
662 background-position: top center;
663 }
664
665 .bg-right-ns {
666 background-repeat: no-repeat;
667 background-position: center right;
668 }
669
670 .bg-bottom-ns {
671 background-repeat: no-repeat;
672 background-position: bottom center;
673 }
674
675 .bg-left-ns {
676 background-repeat: no-repeat;
677 background-position: center left;
678 }
679}
680
681@media screen and (min-width: 30em) and (max-width: 60em) {
682 .bg-center-m {
683 background-repeat: no-repeat;
684 background-position: center center;
685 }
686
687 .bg-top-m {
688 background-repeat: no-repeat;
689 background-position: top center;
690 }
691
692 .bg-right-m {
693 background-repeat: no-repeat;
694 background-position: center right;
695 }
696
697 .bg-bottom-m {
698 background-repeat: no-repeat;
699 background-position: bottom center;
700 }
701
702 .bg-left-m {
703 background-repeat: no-repeat;
704 background-position: center left;
705 }
706}
707
708@media screen and (min-width: 60em) {
709 .bg-center-l {
710 background-repeat: no-repeat;
711 background-position: center center;
712 }
713
714 .bg-top-l {
715 background-repeat: no-repeat;
716 background-position: top center;
717 }
718
719 .bg-right-l {
720 background-repeat: no-repeat;
721 background-position: center right;
722 }
723
724 .bg-bottom-l {
725 background-repeat: no-repeat;
726 background-position: bottom center;
727 }
728
729 .bg-left-l {
730 background-repeat: no-repeat;
731 background-position: center left;
732 }
733}
734
735/*
736
737 OUTLINES
738
739 Media Query Extensions:
740 -ns = not-small
741 -m = medium
742 -l = large
743
744*/
745
746.outline { outline: 1px solid; }
747
748.outline-transparent { outline: 1px solid transparent; }
749
750.outline-0 { outline: 0; }
751
752@media screen and (min-width: 30em) {
753 .outline-ns { outline: 1px solid; }
754 .outline-transparent-ns { outline: 1px solid transparent; }
755 .outline-0-ns { outline: 0; }
756}
757
758@media screen and (min-width: 30em) and (max-width: 60em) {
759 .outline-m { outline: 1px solid; }
760 .outline-transparent-m { outline: 1px solid transparent; }
761 .outline-0-m { outline: 0; }
762}
763
764@media screen and (min-width: 60em) {
765 .outline-l { outline: 1px solid; }
766 .outline-transparent-l { outline: 1px solid transparent; }
767 .outline-0-l { outline: 0; }
768}
769
770/*
771
772 BORDERS
773 Docs: http://tachyons.io/docs/themes/borders/
774
775 Base:
776 b = border
777
778 Modifiers:
779 a = all
780 t = top
781 r = right
782 b = bottom
783 l = left
784 n = none
785
786 Media Query Extensions:
787 -ns = not-small
788 -m = medium
789 -l = large
790
791*/
792
793.ba { border-style: solid; border-width: 1px; }
794
795.bt { border-top-style: solid; border-top-width: 1px; }
796
797.br { border-right-style: solid; border-right-width: 1px; }
798
799.bb { border-bottom-style: solid; border-bottom-width: 1px; }
800
801.bl { border-left-style: solid; border-left-width: 1px; }
802
803.bn { border-style: none; border-width: 0; }
804
805@media screen and (min-width: 30em) {
806 .ba-ns { border-style: solid; border-width: 1px; }
807 .bt-ns { border-top-style: solid; border-top-width: 1px; }
808 .br-ns { border-right-style: solid; border-right-width: 1px; }
809 .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; }
810 .bl-ns { border-left-style: solid; border-left-width: 1px; }
811 .bn-ns { border-style: none; border-width: 0; }
812}
813
814@media screen and (min-width: 30em) and (max-width: 60em) {
815 .ba-m { border-style: solid; border-width: 1px; }
816 .bt-m { border-top-style: solid; border-top-width: 1px; }
817 .br-m { border-right-style: solid; border-right-width: 1px; }
818 .bb-m { border-bottom-style: solid; border-bottom-width: 1px; }
819 .bl-m { border-left-style: solid; border-left-width: 1px; }
820 .bn-m { border-style: none; border-width: 0; }
821}
822
823@media screen and (min-width: 60em) {
824 .ba-l { border-style: solid; border-width: 1px; }
825 .bt-l { border-top-style: solid; border-top-width: 1px; }
826 .br-l { border-right-style: solid; border-right-width: 1px; }
827 .bb-l { border-bottom-style: solid; border-bottom-width: 1px; }
828 .bl-l { border-left-style: solid; border-left-width: 1px; }
829 .bn-l { border-style: none; border-width: 0; }
830}
831
832/*
833
834 BORDER COLORS
835 Docs: http://tachyons.io/docs/themes/borders/
836
837 Border colors can be used to extend the base
838 border classes ba,bt,bb,br,bl found in the _borders.css file.
839
840 The base border class by default will set the color of the border
841 to that of the current text color. These classes are for the cases
842 where you desire for the text and border colors to be different.
843
844 Base:
845 b = border
846
847 Modifiers:
848 --color-name = each color variable name is also a border color name
849
850*/
851
852.b--black { border-color: #000; }
853
854.b--near-black { border-color: #111; }
855
856.b--dark-gray { border-color: #333; }
857
858.b--mid-gray { border-color: #555; }
859
860.b--gray { border-color: #777; }
861
862.b--silver { border-color: #999; }
863
864.b--light-silver { border-color: #aaa; }
865
866.b--moon-gray { border-color: #ccc; }
867
868.b--light-gray { border-color: #eee; }
869
870.b--near-white { border-color: #f4f4f4; }
871
872.b--white { border-color: #fff; }
873
874.b--white-90 { border-color: rgba(255, 255, 255, .9); }
875
876.b--white-80 { border-color: rgba(255, 255, 255, .8); }
877
878.b--white-70 { border-color: rgba(255, 255, 255, .7); }
879
880.b--white-60 { border-color: rgba(255, 255, 255, .6); }
881
882.b--white-50 { border-color: rgba(255, 255, 255, .5); }
883
884.b--white-40 { border-color: rgba(255, 255, 255, .4); }
885
886.b--white-30 { border-color: rgba(255, 255, 255, .3); }
887
888.b--white-20 { border-color: rgba(255, 255, 255, .2); }
889
890.b--white-10 { border-color: rgba(255, 255, 255, .1); }
891
892.b--white-05 { border-color: rgba(255, 255, 255, .05); }
893
894.b--white-025 { border-color: rgba(255, 255, 255, .025); }
895
896.b--white-0125 { border-color: rgba(255, 255, 255, .0125); }
897
898.b--black-90 { border-color: rgba(0, 0, 0, .9); }
899
900.b--black-80 { border-color: rgba(0, 0, 0, .8); }
901
902.b--black-70 { border-color: rgba(0, 0, 0, .7); }
903
904.b--black-60 { border-color: rgba(0, 0, 0, .6); }
905
906.b--black-50 { border-color: rgba(0, 0, 0, .5); }
907
908.b--black-40 { border-color: rgba(0, 0, 0, .4); }
909
910.b--black-30 { border-color: rgba(0, 0, 0, .3); }
911
912.b--black-20 { border-color: rgba(0, 0, 0, .2); }
913
914.b--black-10 { border-color: rgba(0, 0, 0, .1); }
915
916.b--black-05 { border-color: rgba(0, 0, 0, .05); }
917
918.b--black-025 { border-color: rgba(0, 0, 0, .025); }
919
920.b--black-0125 { border-color: rgba(0, 0, 0, .0125); }
921
922.b--dark-red { border-color: #e7040f; }
923
924.b--red { border-color: #ff4136; }
925
926.b--light-red { border-color: #ff725c; }
927
928.b--orange { border-color: #ff6300; }
929
930.b--gold { border-color: #ffb700; }
931
932.b--yellow { border-color: #ffd700; }
933
934.b--light-yellow { border-color: #fbf1a9; }
935
936.b--purple { border-color: #5e2ca5; }
937
938.b--light-purple { border-color: #a463f2; }
939
940.b--dark-pink { border-color: #d5008f; }
941
942.b--hot-pink { border-color: #ff41b4; }
943
944.b--pink { border-color: #ff80cc; }
945
946.b--light-pink { border-color: #ffa3d7; }
947
948.b--dark-green { border-color: #137752; }
949
950.b--green { border-color: #19a974; }
951
952.b--light-green { border-color: #9eebcf; }
953
954.b--navy { border-color: #001b44; }
955
956.b--dark-blue { border-color: #00449e; }
957
958.b--blue { border-color: #357edd; }
959
960.b--light-blue { border-color: #96ccff; }
961
962.b--lightest-blue { border-color: #cdecff; }
963
964.b--washed-blue { border-color: #f6fffe; }
965
966.b--washed-green { border-color: #e8fdf5; }
967
968.b--washed-yellow { border-color: #fffceb; }
969
970.b--washed-red { border-color: #ffdfdf; }
971
972.b--transparent { border-color: transparent; }
973
974.b--inherit { border-color: inherit; }
975
976/*
977
978 BORDER RADIUS
979 Docs: http://tachyons.io/docs/themes/border-radius/
980
981 Base:
982 br = border-radius
983
984 Modifiers:
985 0 = 0/none
986 1 = 1st step in scale
987 2 = 2nd step in scale
988 3 = 3rd step in scale
989 4 = 4th step in scale
990
991 Literal values:
992 -100 = 100%
993 -pill = 9999px
994
995 Media Query Extensions:
996 -ns = not-small
997 -m = medium
998 -l = large
999
1000*/
1001
1002.br0 { border-radius: 0; }
1003
1004.br1 { border-radius: .125rem; }
1005
1006.br2 { border-radius: .25rem; }
1007
1008.br3 { border-radius: .5rem; }
1009
1010.br4 { border-radius: 1rem; }
1011
1012.br-100 { border-radius: 100%; }
1013
1014.br-pill { border-radius: 9999px; }
1015
1016.br--bottom {
1017 border-top-left-radius: 0;
1018 border-top-right-radius: 0;
1019 }
1020
1021.br--top {
1022 border-bottom-left-radius: 0;
1023 border-bottom-right-radius: 0;
1024 }
1025
1026.br--right {
1027 border-top-left-radius: 0;
1028 border-bottom-left-radius: 0;
1029 }
1030
1031.br--left {
1032 border-top-right-radius: 0;
1033 border-bottom-right-radius: 0;
1034 }
1035
1036@media screen and (min-width: 30em) {
1037 .br0-ns { border-radius: 0; }
1038 .br1-ns { border-radius: .125rem; }
1039 .br2-ns { border-radius: .25rem; }
1040 .br3-ns { border-radius: .5rem; }
1041 .br4-ns { border-radius: 1rem; }
1042 .br-100-ns { border-radius: 100%; }
1043 .br-pill-ns { border-radius: 9999px; }
1044 .br--bottom-ns {
1045 border-top-left-radius: 0;
1046 border-top-right-radius: 0;
1047 }
1048 .br--top-ns {
1049 border-bottom-left-radius: 0;
1050 border-bottom-right-radius: 0;
1051 }
1052 .br--right-ns {
1053 border-top-left-radius: 0;
1054 border-bottom-left-radius: 0;
1055 }
1056 .br--left-ns {
1057 border-top-right-radius: 0;
1058 border-bottom-right-radius: 0;
1059 }
1060}
1061
1062@media screen and (min-width: 30em) and (max-width: 60em) {
1063 .br0-m { border-radius: 0; }
1064 .br1-m { border-radius: .125rem; }
1065 .br2-m { border-radius: .25rem; }
1066 .br3-m { border-radius: .5rem; }
1067 .br4-m { border-radius: 1rem; }
1068 .br-100-m { border-radius: 100%; }
1069 .br-pill-m { border-radius: 9999px; }
1070 .br--bottom-m {
1071 border-top-left-radius: 0;
1072 border-top-right-radius: 0;
1073 }
1074 .br--top-m {
1075 border-bottom-left-radius: 0;
1076 border-bottom-right-radius: 0;
1077 }
1078 .br--right-m {
1079 border-top-left-radius: 0;
1080 border-bottom-left-radius: 0;
1081 }
1082 .br--left-m {
1083 border-top-right-radius: 0;
1084 border-bottom-right-radius: 0;
1085 }
1086}
1087
1088@media screen and (min-width: 60em) {
1089 .br0-l { border-radius: 0; }
1090 .br1-l { border-radius: .125rem; }
1091 .br2-l { border-radius: .25rem; }
1092 .br3-l { border-radius: .5rem; }
1093 .br4-l { border-radius: 1rem; }
1094 .br-100-l { border-radius: 100%; }
1095 .br-pill-l { border-radius: 9999px; }
1096 .br--bottom-l {
1097 border-top-left-radius: 0;
1098 border-top-right-radius: 0;
1099 }
1100 .br--top-l {
1101 border-bottom-left-radius: 0;
1102 border-bottom-right-radius: 0;
1103 }
1104 .br--right-l {
1105 border-top-left-radius: 0;
1106 border-bottom-left-radius: 0;
1107 }
1108 .br--left-l {
1109 border-top-right-radius: 0;
1110 border-bottom-right-radius: 0;
1111 }
1112}
1113
1114/*
1115
1116 BORDER STYLES
1117 Docs: http://tachyons.io/docs/themes/borders/
1118
1119 Depends on base border module in _borders.css
1120
1121 Base:
1122 b = border-style
1123
1124 Modifiers:
1125 --none = none
1126 --dotted = dotted
1127 --dashed = dashed
1128 --solid = solid
1129
1130 Media Query Extensions:
1131 -ns = not-small
1132 -m = medium
1133 -l = large
1134
1135 */
1136
1137.b--dotted { border-style: dotted; }
1138
1139.b--dashed { border-style: dashed; }
1140
1141.b--solid { border-style: solid; }
1142
1143.b--none { border-style: none; }
1144
1145@media screen and (min-width: 30em) {
1146 .b--dotted-ns { border-style: dotted; }
1147 .b--dashed-ns { border-style: dashed; }
1148 .b--solid-ns { border-style: solid; }
1149 .b--none-ns { border-style: none; }
1150}
1151
1152@media screen and (min-width: 30em) and (max-width: 60em) {
1153 .b--dotted-m { border-style: dotted; }
1154 .b--dashed-m { border-style: dashed; }
1155 .b--solid-m { border-style: solid; }
1156 .b--none-m { border-style: none; }
1157}
1158
1159@media screen and (min-width: 60em) {
1160 .b--dotted-l { border-style: dotted; }
1161 .b--dashed-l { border-style: dashed; }
1162 .b--solid-l { border-style: solid; }
1163 .b--none-l { border-style: none; }
1164}
1165
1166/*
1167
1168 BORDER WIDTHS
1169 Docs: http://tachyons.io/docs/themes/borders/
1170
1171 Base:
1172 bw = border-width
1173
1174 Modifiers:
1175 0 = 0 width border
1176 1 = 1st step in border-width scale
1177 2 = 2nd step in border-width scale
1178 3 = 3rd step in border-width scale
1179 4 = 4th step in border-width scale
1180 5 = 5th step in border-width scale
1181
1182 Media Query Extensions:
1183 -ns = not-small
1184 -m = medium
1185 -l = large
1186
1187*/
1188
1189.bw0 { border-width: 0; }
1190
1191.bw1 { border-width: .125rem; }
1192
1193.bw2 { border-width: .25rem; }
1194
1195.bw3 { border-width: .5rem; }
1196
1197.bw4 { border-width: 1rem; }
1198
1199.bw5 { border-width: 2rem; }
1200
1201/* Resets */
1202
1203.bt-0 { border-top-width: 0; }
1204
1205.br-0 { border-right-width: 0; }
1206
1207.bb-0 { border-bottom-width: 0; }
1208
1209.bl-0 { border-left-width: 0; }
1210
1211@media screen and (min-width: 30em) {
1212 .bw0-ns { border-width: 0; }
1213 .bw1-ns { border-width: .125rem; }
1214 .bw2-ns { border-width: .25rem; }
1215 .bw3-ns { border-width: .5rem; }
1216 .bw4-ns { border-width: 1rem; }
1217 .bw5-ns { border-width: 2rem; }
1218 .bt-0-ns { border-top-width: 0; }
1219 .br-0-ns { border-right-width: 0; }
1220 .bb-0-ns { border-bottom-width: 0; }
1221 .bl-0-ns { border-left-width: 0; }
1222}
1223
1224@media screen and (min-width: 30em) and (max-width: 60em) {
1225 .bw0-m { border-width: 0; }
1226 .bw1-m { border-width: .125rem; }
1227 .bw2-m { border-width: .25rem; }
1228 .bw3-m { border-width: .5rem; }
1229 .bw4-m { border-width: 1rem; }
1230 .bw5-m { border-width: 2rem; }
1231 .bt-0-m { border-top-width: 0; }
1232 .br-0-m { border-right-width: 0; }
1233 .bb-0-m { border-bottom-width: 0; }
1234 .bl-0-m { border-left-width: 0; }
1235}
1236
1237@media screen and (min-width: 60em) {
1238 .bw0-l { border-width: 0; }
1239 .bw1-l { border-width: .125rem; }
1240 .bw2-l { border-width: .25rem; }
1241 .bw3-l { border-width: .5rem; }
1242 .bw4-l { border-width: 1rem; }
1243 .bw5-l { border-width: 2rem; }
1244 .bt-0-l { border-top-width: 0; }
1245 .br-0-l { border-right-width: 0; }
1246 .bb-0-l { border-bottom-width: 0; }
1247 .bl-0-l { border-left-width: 0; }
1248}
1249
1250/*
1251
1252 BOX-SHADOW
1253 Docs: http://tachyons.io/docs/themes/box-shadow/
1254
1255 Media Query Extensions:
1256 -ns = not-small
1257 -m = medium
1258 -l = large
1259
1260 */
1261
1262.shadow-1 { box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); }
1263
1264.shadow-2 { box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); }
1265
1266.shadow-3 { box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); }
1267
1268.shadow-4 { box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); }
1269
1270.shadow-5 { box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); }
1271
1272@media screen and (min-width: 30em) {
1273 .shadow-1-ns { box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); }
1274 .shadow-2-ns { box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); }
1275 .shadow-3-ns { box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); }
1276 .shadow-4-ns { box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); }
1277 .shadow-5-ns { box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); }
1278}
1279
1280@media screen and (min-width: 30em) and (max-width: 60em) {
1281 .shadow-1-m { box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); }
1282 .shadow-2-m { box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); }
1283 .shadow-3-m { box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); }
1284 .shadow-4-m { box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); }
1285 .shadow-5-m { box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); }
1286}
1287
1288@media screen and (min-width: 60em) {
1289 .shadow-1-l { box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); }
1290 .shadow-2-l { box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); }
1291 .shadow-3-l { box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); }
1292 .shadow-4-l { box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); }
1293 .shadow-5-l { box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); }
1294}
1295
1296/*
1297
1298 CODE
1299
1300*/
1301
1302.pre {
1303 overflow-x: auto;
1304 overflow-y: hidden;
1305 overflow: scroll;
1306}
1307
1308/*
1309
1310 COORDINATES
1311 Docs: http://tachyons.io/docs/layout/position/
1312
1313 Use in combination with the position module.
1314
1315 Base:
1316 top
1317 bottom
1318 right
1319 left
1320
1321 Modifiers:
1322 -0 = literal value 0
1323 -1 = literal value 1
1324 -2 = literal value 2
1325 --1 = literal value -1
1326 --2 = literal value -2
1327
1328 Media Query Extensions:
1329 -ns = not-small
1330 -m = medium
1331 -l = large
1332
1333*/
1334
1335.top-0 { top: 0; }
1336
1337.right-0 { right: 0; }
1338
1339.bottom-0 { bottom: 0; }
1340
1341.left-0 { left: 0; }
1342
1343.top-1 { top: 1rem; }
1344
1345.right-1 { right: 1rem; }
1346
1347.bottom-1 { bottom: 1rem; }
1348
1349.left-1 { left: 1rem; }
1350
1351.top-2 { top: 2rem; }
1352
1353.right-2 { right: 2rem; }
1354
1355.bottom-2 { bottom: 2rem; }
1356
1357.left-2 { left: 2rem; }
1358
1359.top--1 { top: -1rem; }
1360
1361.right--1 { right: -1rem; }
1362
1363.bottom--1 { bottom: -1rem; }
1364
1365.left--1 { left: -1rem; }
1366
1367.top--2 { top: -2rem; }
1368
1369.right--2 { right: -2rem; }
1370
1371.bottom--2 { bottom: -2rem; }
1372
1373.left--2 { left: -2rem; }
1374
1375.absolute--fill {
1376 top: 0;
1377 right: 0;
1378 bottom: 0;
1379 left: 0;
1380}
1381
1382@media screen and (min-width: 30em) {
1383 .top-0-ns { top: 0; }
1384 .left-0-ns { left: 0; }
1385 .right-0-ns { right: 0; }
1386 .bottom-0-ns { bottom: 0; }
1387 .top-1-ns { top: 1rem; }
1388 .left-1-ns { left: 1rem; }
1389 .right-1-ns { right: 1rem; }
1390 .bottom-1-ns { bottom: 1rem; }
1391 .top-2-ns { top: 2rem; }
1392 .left-2-ns { left: 2rem; }
1393 .right-2-ns { right: 2rem; }
1394 .bottom-2-ns { bottom: 2rem; }
1395 .top--1-ns { top: -1rem; }
1396 .right--1-ns { right: -1rem; }
1397 .bottom--1-ns { bottom: -1rem; }
1398 .left--1-ns { left: -1rem; }
1399 .top--2-ns { top: -2rem; }
1400 .right--2-ns { right: -2rem; }
1401 .bottom--2-ns { bottom: -2rem; }
1402 .left--2-ns { left: -2rem; }
1403 .absolute--fill-ns {
1404 top: 0;
1405 right: 0;
1406 bottom: 0;
1407 left: 0;
1408 }
1409}
1410
1411@media screen and (min-width: 30em) and (max-width: 60em) {
1412 .top-0-m { top: 0; }
1413 .left-0-m { left: 0; }
1414 .right-0-m { right: 0; }
1415 .bottom-0-m { bottom: 0; }
1416 .top-1-m { top: 1rem; }
1417 .left-1-m { left: 1rem; }
1418 .right-1-m { right: 1rem; }
1419 .bottom-1-m { bottom: 1rem; }
1420 .top-2-m { top: 2rem; }
1421 .left-2-m { left: 2rem; }
1422 .right-2-m { right: 2rem; }
1423 .bottom-2-m { bottom: 2rem; }
1424 .top--1-m { top: -1rem; }
1425 .right--1-m { right: -1rem; }
1426 .bottom--1-m { bottom: -1rem; }
1427 .left--1-m { left: -1rem; }
1428 .top--2-m { top: -2rem; }
1429 .right--2-m { right: -2rem; }
1430 .bottom--2-m { bottom: -2rem; }
1431 .left--2-m { left: -2rem; }
1432 .absolute--fill-m {
1433 top: 0;
1434 right: 0;
1435 bottom: 0;
1436 left: 0;
1437 }
1438}
1439
1440@media screen and (min-width: 60em) {
1441 .top-0-l { top: 0; }
1442 .left-0-l { left: 0; }
1443 .right-0-l { right: 0; }
1444 .bottom-0-l { bottom: 0; }
1445 .top-1-l { top: 1rem; }
1446 .left-1-l { left: 1rem; }
1447 .right-1-l { right: 1rem; }
1448 .bottom-1-l { bottom: 1rem; }
1449 .top-2-l { top: 2rem; }
1450 .left-2-l { left: 2rem; }
1451 .right-2-l { right: 2rem; }
1452 .bottom-2-l { bottom: 2rem; }
1453 .top--1-l { top: -1rem; }
1454 .right--1-l { right: -1rem; }
1455 .bottom--1-l { bottom: -1rem; }
1456 .left--1-l { left: -1rem; }
1457 .top--2-l { top: -2rem; }
1458 .right--2-l { right: -2rem; }
1459 .bottom--2-l { bottom: -2rem; }
1460 .left--2-l { left: -2rem; }
1461 .absolute--fill-l {
1462 top: 0;
1463 right: 0;
1464 bottom: 0;
1465 left: 0;
1466 }
1467}
1468
1469/*
1470
1471 CLEARFIX
1472 http://tachyons.io/docs/layout/clearfix/
1473
1474*/
1475
1476/* Nicolas Gallaghers Clearfix solution
1477 Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */
1478
1479.cf:before,
1480.cf:after { content: " "; display: table; }
1481
1482.cf:after { clear: both; }
1483
1484.cf { *zoom: 1; }
1485
1486.cl { clear: left; }
1487
1488.cr { clear: right; }
1489
1490.cb { clear: both; }
1491
1492.cn { clear: none; }
1493
1494@media screen and (min-width: 30em) {
1495 .cl-ns { clear: left; }
1496 .cr-ns { clear: right; }
1497 .cb-ns { clear: both; }
1498 .cn-ns { clear: none; }
1499}
1500
1501@media screen and (min-width: 30em) and (max-width: 60em) {
1502 .cl-m { clear: left; }
1503 .cr-m { clear: right; }
1504 .cb-m { clear: both; }
1505 .cn-m { clear: none; }
1506}
1507
1508@media screen and (min-width: 60em) {
1509 .cl-l { clear: left; }
1510 .cr-l { clear: right; }
1511 .cb-l { clear: both; }
1512 .cn-l { clear: none; }
1513}
1514
1515/*
1516
1517 DISPLAY
1518 Docs: http://tachyons.io/docs/layout/display
1519
1520 Base:
1521 d = display
1522
1523 Modifiers:
1524 n = none
1525 b = block
1526 ib = inline-block
1527 it = inline-table
1528 t = table
1529 tc = table-cell
1530 t-row = table-row
1531 t-columm = table-column
1532 t-column-group = table-column-group
1533
1534 Media Query Extensions:
1535 -ns = not-small
1536 -m = medium
1537 -l = large
1538
1539*/
1540
1541.dn { display: none; }
1542
1543.di { display: inline; }
1544
1545.db { display: block; }
1546
1547.dib { display: inline-block; }
1548
1549.dit { display: inline-table; }
1550
1551.dt { display: table; }
1552
1553.dtc { display: table-cell; }
1554
1555.dt-row { display: table-row; }
1556
1557.dt-row-group { display: table-row-group; }
1558
1559.dt-column { display: table-column; }
1560
1561.dt-column-group { display: table-column-group; }
1562
1563/*
1564 This will set table to full width and then
1565 all cells will be equal width
1566*/
1567
1568.dt--fixed {
1569 table-layout: fixed;
1570 width: 100%;
1571}
1572
1573@media screen and (min-width: 30em) {
1574 .dn-ns { display: none; }
1575 .di-ns { display: inline; }
1576 .db-ns { display: block; }
1577 .dib-ns { display: inline-block; }
1578 .dit-ns { display: inline-table; }
1579 .dt-ns { display: table; }
1580 .dtc-ns { display: table-cell; }
1581 .dt-row-ns { display: table-row; }
1582 .dt-row-group-ns { display: table-row-group; }
1583 .dt-column-ns { display: table-column; }
1584 .dt-column-group-ns { display: table-column-group; }
1585
1586 .dt--fixed-ns {
1587 table-layout: fixed;
1588 width: 100%;
1589 }
1590}
1591
1592@media screen and (min-width: 30em) and (max-width: 60em) {
1593 .dn-m { display: none; }
1594 .di-m { display: inline; }
1595 .db-m { display: block; }
1596 .dib-m { display: inline-block; }
1597 .dit-m { display: inline-table; }
1598 .dt-m { display: table; }
1599 .dtc-m { display: table-cell; }
1600 .dt-row-m { display: table-row; }
1601 .dt-row-group-m { display: table-row-group; }
1602 .dt-column-m { display: table-column; }
1603 .dt-column-group-m { display: table-column-group; }
1604
1605 .dt--fixed-m {
1606 table-layout: fixed;
1607 width: 100%;
1608 }
1609}
1610
1611@media screen and (min-width: 60em) {
1612 .dn-l { display: none; }
1613 .di-l { display: inline; }
1614 .db-l { display: block; }
1615 .dib-l { display: inline-block; }
1616 .dit-l { display: inline-table; }
1617 .dt-l { display: table; }
1618 .dtc-l { display: table-cell; }
1619 .dt-row-l { display: table-row; }
1620 .dt-row-group-l { display: table-row-group; }
1621 .dt-column-l { display: table-column; }
1622 .dt-column-group-l { display: table-column-group; }
1623
1624 .dt--fixed-l {
1625 table-layout: fixed;
1626 width: 100%;
1627 }
1628}
1629
1630/*
1631
1632 FLEXBOX
1633
1634 Media Query Extensions:
1635 -ns = not-small
1636 -m = medium
1637 -l = large
1638
1639*/
1640
1641.flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
1642
1643.inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
1644
1645/* 1. Fix for Chrome 44 bug.
1646 * https://code.google.com/p/chromium/issues/detail?id=506893 */
1647
1648.flex-auto {
1649 -webkit-box-flex: 1;
1650 -ms-flex: 1 1 auto;
1651 flex: 1 1 auto;
1652 min-width: 0; /* 1 */
1653 min-height: 0; /* 1 */
1654}
1655
1656.flex-none { -webkit-box-flex: 0; -ms-flex: none; flex: none; }
1657
1658.flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
1659
1660.flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
1661
1662.flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; }
1663
1664.flex-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
1665
1666.flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }
1667
1668.flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
1669
1670.flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
1671
1672.items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
1673
1674.items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
1675
1676.items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
1677
1678.items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
1679
1680.items-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
1681
1682.self-start { -ms-flex-item-align: start; align-self: flex-start; }
1683
1684.self-end { -ms-flex-item-align: end; align-self: flex-end; }
1685
1686.self-center { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }
1687
1688.self-baseline { -ms-flex-item-align: baseline; align-self: baseline; }
1689
1690.self-stretch { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; }
1691
1692.justify-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
1693
1694.justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
1695
1696.justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
1697
1698.justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
1699
1700.justify-around { -ms-flex-pack: distribute; justify-content: space-around; }
1701
1702.content-start { -ms-flex-line-pack: start; align-content: flex-start; }
1703
1704.content-end { -ms-flex-line-pack: end; align-content: flex-end; }
1705
1706.content-center { -ms-flex-line-pack: center; align-content: center; }
1707
1708.content-between { -ms-flex-line-pack: justify; align-content: space-between; }
1709
1710.content-around { -ms-flex-line-pack: distribute; align-content: space-around; }
1711
1712.content-stretch { -ms-flex-line-pack: stretch; align-content: stretch; }
1713
1714.order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
1715
1716.order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
1717
1718.order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
1719
1720.order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
1721
1722.order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; }
1723
1724.order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; }
1725
1726.order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; }
1727
1728.order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; }
1729
1730.order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; }
1731
1732.order-last { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; }
1733
1734.flex-grow-0 { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; }
1735
1736.flex-grow-1 { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
1737
1738.flex-shrink-0 { -ms-flex-negative: 0; flex-shrink: 0; }
1739
1740.flex-shrink-1 { -ms-flex-negative: 1; flex-shrink: 1; }
1741
1742@media screen and (min-width: 30em) {
1743 .flex-ns { display: -webkit-box; display: -ms-flexbox; display: flex; }
1744 .inline-flex-ns { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
1745 .flex-auto-ns {
1746 -webkit-box-flex: 1;
1747 -ms-flex: 1 1 auto;
1748 flex: 1 1 auto;
1749 min-width: 0; /* 1 */
1750 min-height: 0; /* 1 */
1751 }
1752 .flex-none-ns { -webkit-box-flex: 0; -ms-flex: none; flex: none; }
1753 .flex-column-ns { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
1754 .flex-row-ns { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
1755 .flex-wrap-ns { -ms-flex-wrap: wrap; flex-wrap: wrap; }
1756 .flex-nowrap-ns { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
1757 .flex-wrap-reverse-ns { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }
1758 .flex-column-reverse-ns { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
1759 .flex-row-reverse-ns { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
1760 .items-start-ns { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
1761 .items-end-ns { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
1762 .items-center-ns { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
1763 .items-baseline-ns { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
1764 .items-stretch-ns { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
1765
1766 .self-start-ns { -ms-flex-item-align: start; align-self: flex-start; }
1767 .self-end-ns { -ms-flex-item-align: end; align-self: flex-end; }
1768 .self-center-ns { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }
1769 .self-baseline-ns { -ms-flex-item-align: baseline; align-self: baseline; }
1770 .self-stretch-ns { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; }
1771
1772 .justify-start-ns { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
1773 .justify-end-ns { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
1774 .justify-center-ns { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
1775 .justify-between-ns { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
1776 .justify-around-ns { -ms-flex-pack: distribute; justify-content: space-around; }
1777
1778 .content-start-ns { -ms-flex-line-pack: start; align-content: flex-start; }
1779 .content-end-ns { -ms-flex-line-pack: end; align-content: flex-end; }
1780 .content-center-ns { -ms-flex-line-pack: center; align-content: center; }
1781 .content-between-ns { -ms-flex-line-pack: justify; align-content: space-between; }
1782 .content-around-ns { -ms-flex-line-pack: distribute; align-content: space-around; }
1783 .content-stretch-ns { -ms-flex-line-pack: stretch; align-content: stretch; }
1784
1785 .order-0-ns { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
1786 .order-1-ns { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
1787 .order-2-ns { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
1788 .order-3-ns { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
1789 .order-4-ns { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; }
1790 .order-5-ns { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; }
1791 .order-6-ns { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; }
1792 .order-7-ns { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; }
1793 .order-8-ns { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; }
1794 .order-last-ns { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; }
1795
1796 .flex-grow-0-ns { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; }
1797 .flex-grow-1-ns { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
1798
1799 .flex-shrink-0-ns { -ms-flex-negative: 0; flex-shrink: 0; }
1800 .flex-shrink-1-ns { -ms-flex-negative: 1; flex-shrink: 1; }
1801}
1802
1803@media screen and (min-width: 30em) and (max-width: 60em) {
1804 .flex-m { display: -webkit-box; display: -ms-flexbox; display: flex; }
1805 .inline-flex-m { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
1806 .flex-auto-m {
1807 -webkit-box-flex: 1;
1808 -ms-flex: 1 1 auto;
1809 flex: 1 1 auto;
1810 min-width: 0; /* 1 */
1811 min-height: 0; /* 1 */
1812 }
1813 .flex-none-m { -webkit-box-flex: 0; -ms-flex: none; flex: none; }
1814 .flex-column-m { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
1815 .flex-row-m { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
1816 .flex-wrap-m { -ms-flex-wrap: wrap; flex-wrap: wrap; }
1817 .flex-nowrap-m { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
1818 .flex-wrap-reverse-m { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }
1819 .flex-column-reverse-m { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
1820 .flex-row-reverse-m { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
1821 .items-start-m { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
1822 .items-end-m { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
1823 .items-center-m { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
1824 .items-baseline-m { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
1825 .items-stretch-m { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
1826
1827 .self-start-m { -ms-flex-item-align: start; align-self: flex-start; }
1828 .self-end-m { -ms-flex-item-align: end; align-self: flex-end; }
1829 .self-center-m { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }
1830 .self-baseline-m { -ms-flex-item-align: baseline; align-self: baseline; }
1831 .self-stretch-m { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; }
1832
1833 .justify-start-m { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
1834 .justify-end-m { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
1835 .justify-center-m { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
1836 .justify-between-m { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
1837 .justify-around-m { -ms-flex-pack: distribute; justify-content: space-around; }
1838
1839 .content-start-m { -ms-flex-line-pack: start; align-content: flex-start; }
1840 .content-end-m { -ms-flex-line-pack: end; align-content: flex-end; }
1841 .content-center-m { -ms-flex-line-pack: center; align-content: center; }
1842 .content-between-m { -ms-flex-line-pack: justify; align-content: space-between; }
1843 .content-around-m { -ms-flex-line-pack: distribute; align-content: space-around; }
1844 .content-stretch-m { -ms-flex-line-pack: stretch; align-content: stretch; }
1845
1846 .order-0-m { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
1847 .order-1-m { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
1848 .order-2-m { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
1849 .order-3-m { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
1850 .order-4-m { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; }
1851 .order-5-m { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; }
1852 .order-6-m { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; }
1853 .order-7-m { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; }
1854 .order-8-m { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; }
1855 .order-last-m { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; }
1856
1857 .flex-grow-0-m { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; }
1858 .flex-grow-1-m { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
1859
1860 .flex-shrink-0-m { -ms-flex-negative: 0; flex-shrink: 0; }
1861 .flex-shrink-1-m { -ms-flex-negative: 1; flex-shrink: 1; }
1862}
1863
1864@media screen and (min-width: 60em) {
1865 .flex-l { display: -webkit-box; display: -ms-flexbox; display: flex; }
1866 .inline-flex-l { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
1867 .flex-auto-l {
1868 -webkit-box-flex: 1;
1869 -ms-flex: 1 1 auto;
1870 flex: 1 1 auto;
1871 min-width: 0; /* 1 */
1872 min-height: 0; /* 1 */
1873 }
1874 .flex-none-l { -webkit-box-flex: 0; -ms-flex: none; flex: none; }
1875 .flex-column-l { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
1876 .flex-row-l { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
1877 .flex-wrap-l { -ms-flex-wrap: wrap; flex-wrap: wrap; }
1878 .flex-nowrap-l { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
1879 .flex-wrap-reverse-l { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }
1880 .flex-column-reverse-l { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
1881 .flex-row-reverse-l { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
1882
1883 .items-start-l { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
1884 .items-end-l { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
1885 .items-center-l { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
1886 .items-baseline-l { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
1887 .items-stretch-l { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
1888
1889 .self-start-l { -ms-flex-item-align: start; align-self: flex-start; }
1890 .self-end-l { -ms-flex-item-align: end; align-self: flex-end; }
1891 .self-center-l { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }
1892 .self-baseline-l { -ms-flex-item-align: baseline; align-self: baseline; }
1893 .self-stretch-l { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; }
1894
1895 .justify-start-l { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
1896 .justify-end-l { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
1897 .justify-center-l { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
1898 .justify-between-l { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
1899 .justify-around-l { -ms-flex-pack: distribute; justify-content: space-around; }
1900
1901 .content-start-l { -ms-flex-line-pack: start; align-content: flex-start; }
1902 .content-end-l { -ms-flex-line-pack: end; align-content: flex-end; }
1903 .content-center-l { -ms-flex-line-pack: center; align-content: center; }
1904 .content-between-l { -ms-flex-line-pack: justify; align-content: space-between; }
1905 .content-around-l { -ms-flex-line-pack: distribute; align-content: space-around; }
1906 .content-stretch-l { -ms-flex-line-pack: stretch; align-content: stretch; }
1907
1908 .order-0-l { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
1909 .order-1-l { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
1910 .order-2-l { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
1911 .order-3-l { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
1912 .order-4-l { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; }
1913 .order-5-l { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; }
1914 .order-6-l { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; }
1915 .order-7-l { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; }
1916 .order-8-l { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; }
1917 .order-last-l { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; }
1918
1919 .flex-grow-0-l { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; }
1920 .flex-grow-1-l { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
1921
1922 .flex-shrink-0-l { -ms-flex-negative: 0; flex-shrink: 0; }
1923 .flex-shrink-1-l { -ms-flex-negative: 1; flex-shrink: 1; }
1924}
1925
1926/*
1927
1928 FLOATS
1929 http://tachyons.io/docs/layout/floats/
1930
1931 1. Floated elements are automatically rendered as block level elements.
1932 Setting floats to display inline will fix the double margin bug in
1933 ie6. You know... just in case.
1934
1935 2. Don't forget to clearfix your floats with .cf
1936
1937 Base:
1938 f = float
1939
1940 Modifiers:
1941 l = left
1942 r = right
1943 n = none
1944
1945 Media Query Extensions:
1946 -ns = not-small
1947 -m = medium
1948 -l = large
1949
1950*/
1951
1952.fl { float: left; _display: inline; }
1953
1954.fr { float: right; _display: inline; }
1955
1956.fn { float: none; }
1957
1958@media screen and (min-width: 30em) {
1959 .fl-ns { float: left; _display: inline; }
1960 .fr-ns { float: right; _display: inline; }
1961 .fn-ns { float: none; }
1962}
1963
1964@media screen and (min-width: 30em) and (max-width: 60em) {
1965 .fl-m { float: left; _display: inline; }
1966 .fr-m { float: right; _display: inline; }
1967 .fn-m { float: none; }
1968}
1969
1970@media screen and (min-width: 60em) {
1971 .fl-l { float: left; _display: inline; }
1972 .fr-l { float: right; _display: inline; }
1973 .fn-l { float: none; }
1974}
1975
1976/*
1977
1978 FONT FAMILY GROUPS
1979 Docs: http://tachyons.io/docs/typography/font-family/
1980
1981*/
1982
1983.sans-serif {
1984 font-family: -apple-system, BlinkMacSystemFont,
1985 'avenir next', avenir,
1986 'helvetica neue', helvetica,
1987 ubuntu,
1988 roboto, noto,
1989 'segoe ui', arial,
1990 sans-serif;
1991}
1992
1993.serif {
1994 font-family: georgia,
1995 times,
1996 serif;
1997}
1998
1999.system-sans-serif {
2000 font-family: sans-serif;
2001}
2002
2003.system-serif {
2004 font-family: serif;
2005}
2006
2007/* Monospaced Typefaces (for code) */
2008
2009/* From http://cssfontstack.com */
2010
2011code, .code {
2012 font-family: Consolas,
2013 monaco,
2014 monospace;
2015}
2016
2017.courier {
2018 font-family: 'Courier Next',
2019 courier,
2020 monospace;
2021}
2022
2023/* Sans-Serif Typefaces */
2024
2025.helvetica {
2026 font-family: 'helvetica neue', helvetica,
2027 sans-serif;
2028}
2029
2030.avenir {
2031 font-family: 'avenir next', avenir,
2032 sans-serif;
2033}
2034
2035/* Serif Typefaces */
2036
2037.athelas {
2038 font-family: athelas,
2039 georgia,
2040 serif;
2041}
2042
2043.georgia {
2044 font-family: georgia,
2045 serif;
2046}
2047
2048.times {
2049 font-family: times,
2050 serif;
2051}
2052
2053.bodoni {
2054 font-family: "Bodoni MT",
2055 serif;
2056}
2057
2058.calisto {
2059 font-family: "Calisto MT",
2060 serif;
2061}
2062
2063.garamond {
2064 font-family: garamond,
2065 serif;
2066}
2067
2068.baskerville {
2069 font-family: baskerville,
2070 serif;
2071}
2072
2073/*
2074
2075 FONT STYLE
2076 Docs: http://tachyons.io/docs/typography/font-style/
2077
2078 Media Query Extensions:
2079 -ns = not-small
2080 -m = medium
2081 -l = large
2082
2083*/
2084
2085.i { font-style: italic; }
2086
2087.fs-normal { font-style: normal; }
2088
2089@media screen and (min-width: 30em) {
2090 .i-ns { font-style: italic; }
2091 .fs-normal-ns { font-style: normal; }
2092}
2093
2094@media screen and (min-width: 30em) and (max-width: 60em) {
2095 .i-m { font-style: italic; }
2096 .fs-normal-m { font-style: normal; }
2097}
2098
2099@media screen and (min-width: 60em) {
2100 .i-l { font-style: italic; }
2101 .fs-normal-l { font-style: normal; }
2102}
2103
2104/*
2105
2106 FONT WEIGHT
2107 Docs: http://tachyons.io/docs/typography/font-weight/
2108
2109 Base
2110 fw = font-weight
2111
2112 Modifiers:
2113 1 = literal value 100
2114 2 = literal value 200
2115 3 = literal value 300
2116 4 = literal value 400
2117 5 = literal value 500
2118 6 = literal value 600
2119 7 = literal value 700
2120 8 = literal value 800
2121 9 = literal value 900
2122
2123 Media Query Extensions:
2124 -ns = not-small
2125 -m = medium
2126 -l = large
2127
2128*/
2129
2130.normal { font-weight: normal; }
2131
2132.b { font-weight: bold; }
2133
2134.fw1 { font-weight: 100; }
2135
2136.fw2 { font-weight: 200; }
2137
2138.fw3 { font-weight: 300; }
2139
2140.fw4 { font-weight: 400; }
2141
2142.fw5 { font-weight: 500; }
2143
2144.fw6 { font-weight: 600; }
2145
2146.fw7 { font-weight: 700; }
2147
2148.fw8 { font-weight: 800; }
2149
2150.fw9 { font-weight: 900; }
2151
2152@media screen and (min-width: 30em) {
2153 .normal-ns { font-weight: normal; }
2154 .b-ns { font-weight: bold; }
2155 .fw1-ns { font-weight: 100; }
2156 .fw2-ns { font-weight: 200; }
2157 .fw3-ns { font-weight: 300; }
2158 .fw4-ns { font-weight: 400; }
2159 .fw5-ns { font-weight: 500; }
2160 .fw6-ns { font-weight: 600; }
2161 .fw7-ns { font-weight: 700; }
2162 .fw8-ns { font-weight: 800; }
2163 .fw9-ns { font-weight: 900; }
2164}
2165
2166@media screen and (min-width: 30em) and (max-width: 60em) {
2167 .normal-m { font-weight: normal; }
2168 .b-m { font-weight: bold; }
2169 .fw1-m { font-weight: 100; }
2170 .fw2-m { font-weight: 200; }
2171 .fw3-m { font-weight: 300; }
2172 .fw4-m { font-weight: 400; }
2173 .fw5-m { font-weight: 500; }
2174 .fw6-m { font-weight: 600; }
2175 .fw7-m { font-weight: 700; }
2176 .fw8-m { font-weight: 800; }
2177 .fw9-m { font-weight: 900; }
2178}
2179
2180@media screen and (min-width: 60em) {
2181 .normal-l { font-weight: normal; }
2182 .b-l { font-weight: bold; }
2183 .fw1-l { font-weight: 100; }
2184 .fw2-l { font-weight: 200; }
2185 .fw3-l { font-weight: 300; }
2186 .fw4-l { font-weight: 400; }
2187 .fw5-l { font-weight: 500; }
2188 .fw6-l { font-weight: 600; }
2189 .fw7-l { font-weight: 700; }
2190 .fw8-l { font-weight: 800; }
2191 .fw9-l { font-weight: 900; }
2192}
2193
2194/*
2195
2196 FORMS
2197
2198*/
2199
2200.input-reset {
2201 -webkit-appearance: none;
2202 -moz-appearance: none;
2203}
2204
2205.button-reset::-moz-focus-inner,
2206.input-reset::-moz-focus-inner {
2207 border: 0;
2208 padding: 0;
2209}
2210
2211/*
2212
2213 HEIGHTS
2214 Docs: http://tachyons.io/docs/layout/heights/
2215
2216 Base:
2217 h = height
2218 min-h = min-height
2219 min-vh = min-height vertical screen height
2220 vh = vertical screen height
2221
2222 Modifiers
2223 1 = 1st step in height scale
2224 2 = 2nd step in height scale
2225 3 = 3rd step in height scale
2226 4 = 4th step in height scale
2227 5 = 5th step in height scale
2228
2229 -25 = literal value 25%
2230 -50 = literal value 50%
2231 -75 = literal value 75%
2232 -100 = literal value 100%
2233
2234 -auto = string value of auto
2235 -inherit = string value of inherit
2236
2237 Media Query Extensions:
2238 -ns = not-small
2239 -m = medium
2240 -l = large
2241
2242*/
2243
2244/* Height Scale */
2245
2246.h1 { height: 1rem; }
2247
2248.h2 { height: 2rem; }
2249
2250.h3 { height: 4rem; }
2251
2252.h4 { height: 8rem; }
2253
2254.h5 { height: 16rem; }
2255
2256/* Height Percentages - Based off of height of parent */
2257
2258.h-25 { height: 25%; }
2259
2260.h-50 { height: 50%; }
2261
2262.h-75 { height: 75%; }
2263
2264.h-100 { height: 100%; }
2265
2266.min-h-100 { min-height: 100%; }
2267
2268/* Screen Height Percentage */
2269
2270.vh-25 { height: 25vh; }
2271
2272.vh-50 { height: 50vh; }
2273
2274.vh-75 { height: 75vh; }
2275
2276.vh-100 { height: 100vh; }
2277
2278.min-vh-100 { min-height: 100vh; }
2279
2280/* String Properties */
2281
2282.h-auto { height: auto; }
2283
2284.h-inherit { height: inherit; }
2285
2286@media screen and (min-width: 30em) {
2287 .h1-ns { height: 1rem; }
2288 .h2-ns { height: 2rem; }
2289 .h3-ns { height: 4rem; }
2290 .h4-ns { height: 8rem; }
2291 .h5-ns { height: 16rem; }
2292 .h-25-ns { height: 25%; }
2293 .h-50-ns { height: 50%; }
2294 .h-75-ns { height: 75%; }
2295 .h-100-ns { height: 100%; }
2296 .min-h-100-ns { min-height: 100%; }
2297 .vh-25-ns { height: 25vh; }
2298 .vh-50-ns { height: 50vh; }
2299 .vh-75-ns { height: 75vh; }
2300 .vh-100-ns { height: 100vh; }
2301 .min-vh-100-ns { min-height: 100vh; }
2302 .h-auto-ns { height: auto; }
2303 .h-inherit-ns { height: inherit; }
2304}
2305
2306@media screen and (min-width: 30em) and (max-width: 60em) {
2307 .h1-m { height: 1rem; }
2308 .h2-m { height: 2rem; }
2309 .h3-m { height: 4rem; }
2310 .h4-m { height: 8rem; }
2311 .h5-m { height: 16rem; }
2312 .h-25-m { height: 25%; }
2313 .h-50-m { height: 50%; }
2314 .h-75-m { height: 75%; }
2315 .h-100-m { height: 100%; }
2316 .min-h-100-m { min-height: 100%; }
2317 .vh-25-m { height: 25vh; }
2318 .vh-50-m { height: 50vh; }
2319 .vh-75-m { height: 75vh; }
2320 .vh-100-m { height: 100vh; }
2321 .min-vh-100-m { min-height: 100vh; }
2322 .h-auto-m { height: auto; }
2323 .h-inherit-m { height: inherit; }
2324}
2325
2326@media screen and (min-width: 60em) {
2327 .h1-l { height: 1rem; }
2328 .h2-l { height: 2rem; }
2329 .h3-l { height: 4rem; }
2330 .h4-l { height: 8rem; }
2331 .h5-l { height: 16rem; }
2332 .h-25-l { height: 25%; }
2333 .h-50-l { height: 50%; }
2334 .h-75-l { height: 75%; }
2335 .h-100-l { height: 100%; }
2336 .min-h-100-l { min-height: 100%; }
2337 .vh-25-l { height: 25vh; }
2338 .vh-50-l { height: 50vh; }
2339 .vh-75-l { height: 75vh; }
2340 .vh-100-l { height: 100vh; }
2341 .min-vh-100-l { min-height: 100vh; }
2342 .h-auto-l { height: auto; }
2343 .h-inherit-l { height: inherit; }
2344}
2345
2346/*
2347
2348 LETTER SPACING
2349 Docs: http://tachyons.io/docs/typography/tracking/
2350
2351 Media Query Extensions:
2352 -ns = not-small
2353 -m = medium
2354 -l = large
2355
2356*/
2357
2358.tracked { letter-spacing: .1em; }
2359
2360.tracked-tight { letter-spacing: -.05em; }
2361
2362.tracked-mega { letter-spacing: .25em; }
2363
2364@media screen and (min-width: 30em) {
2365 .tracked-ns { letter-spacing: .1em; }
2366 .tracked-tight-ns { letter-spacing: -.05em; }
2367 .tracked-mega-ns { letter-spacing: .25em; }
2368}
2369
2370@media screen and (min-width: 30em) and (max-width: 60em) {
2371 .tracked-m { letter-spacing: .1em; }
2372 .tracked-tight-m { letter-spacing: -.05em; }
2373 .tracked-mega-m { letter-spacing: .25em; }
2374}
2375
2376@media screen and (min-width: 60em) {
2377 .tracked-l { letter-spacing: .1em; }
2378 .tracked-tight-l { letter-spacing: -.05em; }
2379 .tracked-mega-l { letter-spacing: .25em; }
2380}
2381
2382/*
2383
2384 LINE HEIGHT / LEADING
2385 Docs: http://tachyons.io/docs/typography/line-height
2386
2387 Media Query Extensions:
2388 -ns = not-small
2389 -m = medium
2390 -l = large
2391
2392*/
2393
2394.lh-solid { line-height: 1; }
2395
2396.lh-title { line-height: 1.25; }
2397
2398.lh-copy { line-height: 1.5; }
2399
2400@media screen and (min-width: 30em) {
2401 .lh-solid-ns { line-height: 1; }
2402 .lh-title-ns { line-height: 1.25; }
2403 .lh-copy-ns { line-height: 1.5; }
2404}
2405
2406@media screen and (min-width: 30em) and (max-width: 60em) {
2407 .lh-solid-m { line-height: 1; }
2408 .lh-title-m { line-height: 1.25; }
2409 .lh-copy-m { line-height: 1.5; }
2410}
2411
2412@media screen and (min-width: 60em) {
2413 .lh-solid-l { line-height: 1; }
2414 .lh-title-l { line-height: 1.25; }
2415 .lh-copy-l { line-height: 1.5; }
2416}
2417
2418/*
2419
2420 LINKS
2421 Docs: http://tachyons.io/docs/elements/links/
2422
2423*/
2424
2425.link {
2426 text-decoration: none;
2427 transition: color .15s ease-in;
2428}
2429
2430.link:link,
2431.link:visited {
2432 transition: color .15s ease-in;
2433}
2434
2435.link:hover {
2436 transition: color .15s ease-in;
2437}
2438
2439.link:active {
2440 transition: color .15s ease-in;
2441}
2442
2443.link:focus {
2444 transition: color .15s ease-in;
2445 outline: 1px dotted currentColor;
2446}
2447
2448/*
2449
2450 LISTS
2451 http://tachyons.io/docs/elements/lists/
2452
2453*/
2454
2455.list { list-style-type: none; }
2456
2457/*
2458
2459 MAX WIDTHS
2460 Docs: http://tachyons.io/docs/layout/max-widths/
2461
2462 Base:
2463 mw = max-width
2464
2465 Modifiers
2466 1 = 1st step in width scale
2467 2 = 2nd step in width scale
2468 3 = 3rd step in width scale
2469 4 = 4th step in width scale
2470 5 = 5th step in width scale
2471 6 = 6st step in width scale
2472 7 = 7nd step in width scale
2473 8 = 8rd step in width scale
2474 9 = 9th step in width scale
2475
2476 -100 = literal value 100%
2477
2478 -none = string value none
2479
2480
2481 Media Query Extensions:
2482 -ns = not-small
2483 -m = medium
2484 -l = large
2485
2486*/
2487
2488/* Max Width Percentages */
2489
2490.mw-100 { max-width: 100%; }
2491
2492/* Max Width Scale */
2493
2494.mw1 { max-width: 1rem; }
2495
2496.mw2 { max-width: 2rem; }
2497
2498.mw3 { max-width: 4rem; }
2499
2500.mw4 { max-width: 8rem; }
2501
2502.mw5 { max-width: 16rem; }
2503
2504.mw6 { max-width: 32rem; }
2505
2506.mw7 { max-width: 48rem; }
2507
2508.mw8 { max-width: 64rem; }
2509
2510.mw9 { max-width: 96rem; }
2511
2512/* Max Width String Properties */
2513
2514.mw-none { max-width: none; }
2515
2516@media screen and (min-width: 30em) {
2517 .mw-100-ns { max-width: 100%; }
2518
2519 .mw1-ns { max-width: 1rem; }
2520 .mw2-ns { max-width: 2rem; }
2521 .mw3-ns { max-width: 4rem; }
2522 .mw4-ns { max-width: 8rem; }
2523 .mw5-ns { max-width: 16rem; }
2524 .mw6-ns { max-width: 32rem; }
2525 .mw7-ns { max-width: 48rem; }
2526 .mw8-ns { max-width: 64rem; }
2527 .mw9-ns { max-width: 96rem; }
2528
2529 .mw-none-ns { max-width: none; }
2530}
2531
2532@media screen and (min-width: 30em) and (max-width: 60em) {
2533 .mw-100-m { max-width: 100%; }
2534
2535 .mw1-m { max-width: 1rem; }
2536 .mw2-m { max-width: 2rem; }
2537 .mw3-m { max-width: 4rem; }
2538 .mw4-m { max-width: 8rem; }
2539 .mw5-m { max-width: 16rem; }
2540 .mw6-m { max-width: 32rem; }
2541 .mw7-m { max-width: 48rem; }
2542 .mw8-m { max-width: 64rem; }
2543 .mw9-m { max-width: 96rem; }
2544
2545 .mw-none-m { max-width: none; }
2546}
2547
2548@media screen and (min-width: 60em) {
2549 .mw-100-l { max-width: 100%; }
2550
2551 .mw1-l { max-width: 1rem; }
2552 .mw2-l { max-width: 2rem; }
2553 .mw3-l { max-width: 4rem; }
2554 .mw4-l { max-width: 8rem; }
2555 .mw5-l { max-width: 16rem; }
2556 .mw6-l { max-width: 32rem; }
2557 .mw7-l { max-width: 48rem; }
2558 .mw8-l { max-width: 64rem; }
2559 .mw9-l { max-width: 96rem; }
2560
2561 .mw-none-l { max-width: none; }
2562}
2563
2564/*
2565
2566 WIDTHS
2567 Docs: http://tachyons.io/docs/layout/widths/
2568
2569 Base:
2570 w = width
2571
2572 Modifiers
2573 1 = 1st step in width scale
2574 2 = 2nd step in width scale
2575 3 = 3rd step in width scale
2576 4 = 4th step in width scale
2577 5 = 5th step in width scale
2578
2579 -10 = literal value 10%
2580 -20 = literal value 20%
2581 -25 = literal value 25%
2582 -30 = literal value 30%
2583 -33 = literal value 33%
2584 -34 = literal value 34%
2585 -40 = literal value 40%
2586 -50 = literal value 50%
2587 -60 = literal value 60%
2588 -70 = literal value 70%
2589 -75 = literal value 75%
2590 -80 = literal value 80%
2591 -90 = literal value 90%
2592 -100 = literal value 100%
2593
2594 -third = 100% / 3 (Not supported in opera mini or IE8)
2595 -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8)
2596 -auto = string value auto
2597
2598
2599 Media Query Extensions:
2600 -ns = not-small
2601 -m = medium
2602 -l = large
2603
2604*/
2605
2606/* Width Scale */
2607
2608.w1 { width: 1rem; }
2609
2610.w2 { width: 2rem; }
2611
2612.w3 { width: 4rem; }
2613
2614.w4 { width: 8rem; }
2615
2616.w5 { width: 16rem; }
2617
2618.w-10 { width: 10%; }
2619
2620.w-20 { width: 20%; }
2621
2622.w-25 { width: 25%; }
2623
2624.w-30 { width: 30%; }
2625
2626.w-33 { width: 33%; }
2627
2628.w-34 { width: 34%; }
2629
2630.w-40 { width: 40%; }
2631
2632.w-50 { width: 50%; }
2633
2634.w-60 { width: 60%; }
2635
2636.w-70 { width: 70%; }
2637
2638.w-75 { width: 75%; }
2639
2640.w-80 { width: 80%; }
2641
2642.w-90 { width: 90%; }
2643
2644.w-100 { width: 100%; }
2645
2646.w-third { width: 33.33333%; }
2647
2648.w-two-thirds { width: 66.66667%; }
2649
2650.w-auto { width: auto; }
2651
2652@media screen and (min-width: 30em) {
2653 .w1-ns { width: 1rem; }
2654 .w2-ns { width: 2rem; }
2655 .w3-ns { width: 4rem; }
2656 .w4-ns { width: 8rem; }
2657 .w5-ns { width: 16rem; }
2658 .w-10-ns { width: 10%; }
2659 .w-20-ns { width: 20%; }
2660 .w-25-ns { width: 25%; }
2661 .w-30-ns { width: 30%; }
2662 .w-33-ns { width: 33%; }
2663 .w-34-ns { width: 34%; }
2664 .w-40-ns { width: 40%; }
2665 .w-50-ns { width: 50%; }
2666 .w-60-ns { width: 60%; }
2667 .w-70-ns { width: 70%; }
2668 .w-75-ns { width: 75%; }
2669 .w-80-ns { width: 80%; }
2670 .w-90-ns { width: 90%; }
2671 .w-100-ns { width: 100%; }
2672 .w-third-ns { width: 33.33333%; }
2673 .w-two-thirds-ns { width: 66.66667%; }
2674 .w-auto-ns { width: auto; }
2675}
2676
2677@media screen and (min-width: 30em) and (max-width: 60em) {
2678 .w1-m { width: 1rem; }
2679 .w2-m { width: 2rem; }
2680 .w3-m { width: 4rem; }
2681 .w4-m { width: 8rem; }
2682 .w5-m { width: 16rem; }
2683 .w-10-m { width: 10%; }
2684 .w-20-m { width: 20%; }
2685 .w-25-m { width: 25%; }
2686 .w-30-m { width: 30%; }
2687 .w-33-m { width: 33%; }
2688 .w-34-m { width: 34%; }
2689 .w-40-m { width: 40%; }
2690 .w-50-m { width: 50%; }
2691 .w-60-m { width: 60%; }
2692 .w-70-m { width: 70%; }
2693 .w-75-m { width: 75%; }
2694 .w-80-m { width: 80%; }
2695 .w-90-m { width: 90%; }
2696 .w-100-m { width: 100%; }
2697 .w-third-m { width: 33.33333%; }
2698 .w-two-thirds-m { width: 66.66667%; }
2699 .w-auto-m { width: auto; }
2700}
2701
2702@media screen and (min-width: 60em) {
2703 .w1-l { width: 1rem; }
2704 .w2-l { width: 2rem; }
2705 .w3-l { width: 4rem; }
2706 .w4-l { width: 8rem; }
2707 .w5-l { width: 16rem; }
2708 .w-10-l { width: 10%; }
2709 .w-20-l { width: 20%; }
2710 .w-25-l { width: 25%; }
2711 .w-30-l { width: 30%; }
2712 .w-33-l { width: 33%; }
2713 .w-34-l { width: 34%; }
2714 .w-40-l { width: 40%; }
2715 .w-50-l { width: 50%; }
2716 .w-60-l { width: 60%; }
2717 .w-70-l { width: 70%; }
2718 .w-75-l { width: 75%; }
2719 .w-80-l { width: 80%; }
2720 .w-90-l { width: 90%; }
2721 .w-100-l { width: 100%; }
2722 .w-third-l { width: 33.33333%; }
2723 .w-two-thirds-l { width: 66.66667%; }
2724 .w-auto-l { width: auto; }
2725}
2726
2727/*
2728
2729 OVERFLOW
2730
2731 Media Query Extensions:
2732 -ns = not-small
2733 -m = medium
2734 -l = large
2735
2736 */
2737
2738.overflow-visible { overflow: visible; }
2739
2740.overflow-hidden { overflow: hidden; }
2741
2742.overflow-scroll { overflow: scroll; }
2743
2744.overflow-auto { overflow: auto; }
2745
2746.overflow-x-visible { overflow-x: visible; }
2747
2748.overflow-x-hidden { overflow-x: hidden; }
2749
2750.overflow-x-scroll { overflow-x: scroll; }
2751
2752.overflow-x-auto { overflow-x: auto; }
2753
2754.overflow-y-visible { overflow-y: visible; }
2755
2756.overflow-y-hidden { overflow-y: hidden; }
2757
2758.overflow-y-scroll { overflow-y: scroll; }
2759
2760.overflow-y-auto { overflow-y: auto; }
2761
2762@media screen and (min-width: 30em) {
2763 .overflow-visible-ns { overflow: visible; }
2764 .overflow-hidden-ns { overflow: hidden; }
2765 .overflow-scroll-ns { overflow: scroll; }
2766 .overflow-auto-ns { overflow: auto; }
2767 .overflow-x-visible-ns { overflow-x: visible; }
2768 .overflow-x-hidden-ns { overflow-x: hidden; }
2769 .overflow-x-scroll-ns { overflow-x: scroll; }
2770 .overflow-x-auto-ns { overflow-x: auto; }
2771
2772 .overflow-y-visible-ns { overflow-y: visible; }
2773 .overflow-y-hidden-ns { overflow-y: hidden; }
2774 .overflow-y-scroll-ns { overflow-y: scroll; }
2775 .overflow-y-auto-ns { overflow-y: auto; }
2776}
2777
2778@media screen and (min-width: 30em) and (max-width: 60em) {
2779 .overflow-visible-m { overflow: visible; }
2780 .overflow-hidden-m { overflow: hidden; }
2781 .overflow-scroll-m { overflow: scroll; }
2782 .overflow-auto-m { overflow: auto; }
2783
2784 .overflow-x-visible-m { overflow-x: visible; }
2785 .overflow-x-hidden-m { overflow-x: hidden; }
2786 .overflow-x-scroll-m { overflow-x: scroll; }
2787 .overflow-x-auto-m { overflow-x: auto; }
2788
2789 .overflow-y-visible-m { overflow-y: visible; }
2790 .overflow-y-hidden-m { overflow-y: hidden; }
2791 .overflow-y-scroll-m { overflow-y: scroll; }
2792 .overflow-y-auto-m { overflow-y: auto; }
2793}
2794
2795@media screen and (min-width: 60em) {
2796 .overflow-visible-l { overflow: visible; }
2797 .overflow-hidden-l { overflow: hidden; }
2798 .overflow-scroll-l { overflow: scroll; }
2799 .overflow-auto-l { overflow: auto; }
2800
2801 .overflow-x-visible-l { overflow-x: visible; }
2802 .overflow-x-hidden-l { overflow-x: hidden; }
2803 .overflow-x-scroll-l { overflow-x: scroll; }
2804 .overflow-x-auto-l { overflow-x: auto; }
2805
2806 .overflow-y-visible-l { overflow-y: visible; }
2807 .overflow-y-hidden-l { overflow-y: hidden; }
2808 .overflow-y-scroll-l { overflow-y: scroll; }
2809 .overflow-y-auto-l { overflow-y: auto; }
2810}
2811
2812/*
2813
2814 POSITIONING
2815 Docs: http://tachyons.io/docs/layout/position/
2816
2817 Media Query Extensions:
2818 -ns = not-small
2819 -m = medium
2820 -l = large
2821
2822*/
2823
2824.static { position: static; }
2825
2826.relative { position: relative; }
2827
2828.absolute { position: absolute; }
2829
2830.fixed { position: fixed; }
2831
2832@media screen and (min-width: 30em) {
2833 .static-ns { position: static; }
2834 .relative-ns { position: relative; }
2835 .absolute-ns { position: absolute; }
2836 .fixed-ns { position: fixed; }
2837}
2838
2839@media screen and (min-width: 30em) and (max-width: 60em) {
2840 .static-m { position: static; }
2841 .relative-m { position: relative; }
2842 .absolute-m { position: absolute; }
2843 .fixed-m { position: fixed; }
2844}
2845
2846@media screen and (min-width: 60em) {
2847 .static-l { position: static; }
2848 .relative-l { position: relative; }
2849 .absolute-l { position: absolute; }
2850 .fixed-l { position: fixed; }
2851}
2852
2853/*
2854
2855 OPACITY
2856 Docs: http://tachyons.io/docs/themes/opacity/
2857
2858*/
2859
2860.o-100 { opacity: 1; }
2861
2862.o-90 { opacity: .9; }
2863
2864.o-80 { opacity: .8; }
2865
2866.o-70 { opacity: .7; }
2867
2868.o-60 { opacity: .6; }
2869
2870.o-50 { opacity: .5; }
2871
2872.o-40 { opacity: .4; }
2873
2874.o-30 { opacity: .3; }
2875
2876.o-20 { opacity: .2; }
2877
2878.o-10 { opacity: .1; }
2879
2880.o-05 { opacity: .05; }
2881
2882.o-025 { opacity: .025; }
2883
2884.o-0 { opacity: 0; }
2885
2886/*
2887
2888 ROTATIONS
2889
2890*/
2891
2892.rotate-45 { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
2893
2894.rotate-90 { -webkit-transform: rotate(90deg); transform: rotate(90deg); }
2895
2896.rotate-135 { -webkit-transform: rotate(135deg); transform: rotate(135deg); }
2897
2898.rotate-180 { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
2899
2900.rotate-225 { -webkit-transform: rotate(225deg); transform: rotate(225deg); }
2901
2902.rotate-270 { -webkit-transform: rotate(270deg); transform: rotate(270deg); }
2903
2904.rotate-315 { -webkit-transform: rotate(315deg); transform: rotate(315deg); }
2905
2906@media screen and (min-width: 30em){
2907 .rotate-45-ns { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
2908 .rotate-90-ns { -webkit-transform: rotate(90deg); transform: rotate(90deg); }
2909 .rotate-135-ns { -webkit-transform: rotate(135deg); transform: rotate(135deg); }
2910 .rotate-180-ns { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
2911 .rotate-225-ns { -webkit-transform: rotate(225deg); transform: rotate(225deg); }
2912 .rotate-270-ns { -webkit-transform: rotate(270deg); transform: rotate(270deg); }
2913 .rotate-315-ns { -webkit-transform: rotate(315deg); transform: rotate(315deg); }
2914}
2915
2916@media screen and (min-width: 30em) and (max-width: 60em){
2917 .rotate-45-m { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
2918 .rotate-90-m { -webkit-transform: rotate(90deg); transform: rotate(90deg); }
2919 .rotate-135-m { -webkit-transform: rotate(135deg); transform: rotate(135deg); }
2920 .rotate-180-m { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
2921 .rotate-225-m { -webkit-transform: rotate(225deg); transform: rotate(225deg); }
2922 .rotate-270-m { -webkit-transform: rotate(270deg); transform: rotate(270deg); }
2923 .rotate-315-m { -webkit-transform: rotate(315deg); transform: rotate(315deg); }
2924}
2925
2926@media screen and (min-width: 60em){
2927 .rotate-45-l { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
2928 .rotate-90-l { -webkit-transform: rotate(90deg); transform: rotate(90deg); }
2929 .rotate-135-l { -webkit-transform: rotate(135deg); transform: rotate(135deg); }
2930 .rotate-180-l { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
2931 .rotate-225-l { -webkit-transform: rotate(225deg); transform: rotate(225deg); }
2932 .rotate-270-l { -webkit-transform: rotate(270deg); transform: rotate(270deg); }
2933 .rotate-315-l { -webkit-transform: rotate(315deg); transform: rotate(315deg); }
2934}
2935
2936/*
2937
2938 SKINS
2939 Docs: http://tachyons.io/docs/themes/skins/
2940
2941 Classes for setting foreground and background colors on elements.
2942 If you haven't declared a border color, but set border on an element, it will
2943 be set to the current text color.
2944
2945*/
2946
2947/* Text colors */
2948
2949.black-90 { color: rgba(0, 0, 0, .9); }
2950
2951.black-80 { color: rgba(0, 0, 0, .8); }
2952
2953.black-70 { color: rgba(0, 0, 0, .7); }
2954
2955.black-60 { color: rgba(0, 0, 0, .6); }
2956
2957.black-50 { color: rgba(0, 0, 0, .5); }
2958
2959.black-40 { color: rgba(0, 0, 0, .4); }
2960
2961.black-30 { color: rgba(0, 0, 0, .3); }
2962
2963.black-20 { color: rgba(0, 0, 0, .2); }
2964
2965.black-10 { color: rgba(0, 0, 0, .1); }
2966
2967.black-05 { color: rgba(0, 0, 0, .05); }
2968
2969.white-90 { color: rgba(255, 255, 255, .9); }
2970
2971.white-80 { color: rgba(255, 255, 255, .8); }
2972
2973.white-70 { color: rgba(255, 255, 255, .7); }
2974
2975.white-60 { color: rgba(255, 255, 255, .6); }
2976
2977.white-50 { color: rgba(255, 255, 255, .5); }
2978
2979.white-40 { color: rgba(255, 255, 255, .4); }
2980
2981.white-30 { color: rgba(255, 255, 255, .3); }
2982
2983.white-20 { color: rgba(255, 255, 255, .2); }
2984
2985.white-10 { color: rgba(255, 255, 255, .1); }
2986
2987.black { color: #000; }
2988
2989.near-black { color: #111; }
2990
2991.dark-gray { color: #333; }
2992
2993.mid-gray { color: #555; }
2994
2995.gray { color: #777; }
2996
2997.silver { color: #999; }
2998
2999.light-silver { color: #aaa; }
3000
3001.moon-gray { color: #ccc; }
3002
3003.light-gray { color: #eee; }
3004
3005.near-white { color: #f4f4f4; }
3006
3007.white { color: #fff; }
3008
3009.dark-red { color: #e7040f; }
3010
3011.red { color: #ff4136; }
3012
3013.light-red { color: #ff725c; }
3014
3015.orange { color: #ff6300; }
3016
3017.gold { color: #ffb700; }
3018
3019.yellow { color: #ffd700; }
3020
3021.light-yellow { color: #fbf1a9; }
3022
3023.purple { color: #5e2ca5; }
3024
3025.light-purple { color: #a463f2; }
3026
3027.dark-pink { color: #d5008f; }
3028
3029.hot-pink { color: #ff41b4; }
3030
3031.pink { color: #ff80cc; }
3032
3033.light-pink { color: #ffa3d7; }
3034
3035.dark-green { color: #137752; }
3036
3037.green { color: #19a974; }
3038
3039.light-green { color: #9eebcf; }
3040
3041.navy { color: #001b44; }
3042
3043.dark-blue { color: #00449e; }
3044
3045.blue { color: #357edd; }
3046
3047.light-blue { color: #96ccff; }
3048
3049.lightest-blue { color: #cdecff; }
3050
3051.washed-blue { color: #f6fffe; }
3052
3053.washed-green { color: #e8fdf5; }
3054
3055.washed-yellow { color: #fffceb; }
3056
3057.washed-red { color: #ffdfdf; }
3058
3059.color-inherit { color: inherit; }
3060
3061.bg-black-90 { background-color: rgba(0, 0, 0, .9); }
3062
3063.bg-black-80 { background-color: rgba(0, 0, 0, .8); }
3064
3065.bg-black-70 { background-color: rgba(0, 0, 0, .7); }
3066
3067.bg-black-60 { background-color: rgba(0, 0, 0, .6); }
3068
3069.bg-black-50 { background-color: rgba(0, 0, 0, .5); }
3070
3071.bg-black-40 { background-color: rgba(0, 0, 0, .4); }
3072
3073.bg-black-30 { background-color: rgba(0, 0, 0, .3); }
3074
3075.bg-black-20 { background-color: rgba(0, 0, 0, .2); }
3076
3077.bg-black-10 { background-color: rgba(0, 0, 0, .1); }
3078
3079.bg-black-05 { background-color: rgba(0, 0, 0, .05); }
3080
3081.bg-white-90 { background-color: rgba(255, 255, 255, .9); }
3082
3083.bg-white-80 { background-color: rgba(255, 255, 255, .8); }
3084
3085.bg-white-70 { background-color: rgba(255, 255, 255, .7); }
3086
3087.bg-white-60 { background-color: rgba(255, 255, 255, .6); }
3088
3089.bg-white-50 { background-color: rgba(255, 255, 255, .5); }
3090
3091.bg-white-40 { background-color: rgba(255, 255, 255, .4); }
3092
3093.bg-white-30 { background-color: rgba(255, 255, 255, .3); }
3094
3095.bg-white-20 { background-color: rgba(255, 255, 255, .2); }
3096
3097.bg-white-10 { background-color: rgba(255, 255, 255, .1); }
3098
3099/* Background colors */
3100
3101.bg-black { background-color: #000; }
3102
3103.bg-near-black { background-color: #111; }
3104
3105.bg-dark-gray { background-color: #333; }
3106
3107.bg-mid-gray { background-color: #555; }
3108
3109.bg-gray { background-color: #777; }
3110
3111.bg-silver { background-color: #999; }
3112
3113.bg-light-silver { background-color: #aaa; }
3114
3115.bg-moon-gray { background-color: #ccc; }
3116
3117.bg-light-gray { background-color: #eee; }
3118
3119.bg-near-white { background-color: #f4f4f4; }
3120
3121.bg-white { background-color: #fff; }
3122
3123.bg-transparent { background-color: transparent; }
3124
3125.bg-dark-red { background-color: #e7040f; }
3126
3127.bg-red { background-color: #ff4136; }
3128
3129.bg-light-red { background-color: #ff725c; }
3130
3131.bg-orange { background-color: #ff6300; }
3132
3133.bg-gold { background-color: #ffb700; }
3134
3135.bg-yellow { background-color: #ffd700; }
3136
3137.bg-light-yellow { background-color: #fbf1a9; }
3138
3139.bg-purple { background-color: #5e2ca5; }
3140
3141.bg-light-purple { background-color: #a463f2; }
3142
3143.bg-dark-pink { background-color: #d5008f; }
3144
3145.bg-hot-pink { background-color: #ff41b4; }
3146
3147.bg-pink { background-color: #ff80cc; }
3148
3149.bg-light-pink { background-color: #ffa3d7; }
3150
3151.bg-dark-green { background-color: #137752; }
3152
3153.bg-green { background-color: #19a974; }
3154
3155.bg-light-green { background-color: #9eebcf; }
3156
3157.bg-navy { background-color: #001b44; }
3158
3159.bg-dark-blue { background-color: #00449e; }
3160
3161.bg-blue { background-color: #357edd; }
3162
3163.bg-light-blue { background-color: #96ccff; }
3164
3165.bg-lightest-blue { background-color: #cdecff; }
3166
3167.bg-washed-blue { background-color: #f6fffe; }
3168
3169.bg-washed-green { background-color: #e8fdf5; }
3170
3171.bg-washed-yellow { background-color: #fffceb; }
3172
3173.bg-washed-red { background-color: #ffdfdf; }
3174
3175.bg-inherit { background-color: inherit; }
3176
3177/*
3178
3179 SKINS:PSEUDO
3180
3181 Customize the color of an element when
3182 it is focused or hovered over.
3183
3184 */
3185
3186.hover-black:hover,
3187.hover-black:focus { color: #000; }
3188
3189.hover-near-black:hover,
3190.hover-near-black:focus { color: #111; }
3191
3192.hover-dark-gray:hover,
3193.hover-dark-gray:focus { color: #333; }
3194
3195.hover-mid-gray:hover,
3196.hover-mid-gray:focus { color: #555; }
3197
3198.hover-gray:hover,
3199.hover-gray:focus { color: #777; }
3200
3201.hover-silver:hover,
3202.hover-silver:focus { color: #999; }
3203
3204.hover-light-silver:hover,
3205.hover-light-silver:focus { color: #aaa; }
3206
3207.hover-moon-gray:hover,
3208.hover-moon-gray:focus { color: #ccc; }
3209
3210.hover-light-gray:hover,
3211.hover-light-gray:focus { color: #eee; }
3212
3213.hover-near-white:hover,
3214.hover-near-white:focus { color: #f4f4f4; }
3215
3216.hover-white:hover,
3217.hover-white:focus { color: #fff; }
3218
3219.hover-black-90:hover,
3220.hover-black-90:focus { color: rgba(0, 0, 0, .9); }
3221
3222.hover-black-80:hover,
3223.hover-black-80:focus { color: rgba(0, 0, 0, .8); }
3224
3225.hover-black-70:hover,
3226.hover-black-70:focus { color: rgba(0, 0, 0, .7); }
3227
3228.hover-black-60:hover,
3229.hover-black-60:focus { color: rgba(0, 0, 0, .6); }
3230
3231.hover-black-50:hover,
3232.hover-black-50:focus { color: rgba(0, 0, 0, .5); }
3233
3234.hover-black-40:hover,
3235.hover-black-40:focus { color: rgba(0, 0, 0, .4); }
3236
3237.hover-black-30:hover,
3238.hover-black-30:focus { color: rgba(0, 0, 0, .3); }
3239
3240.hover-black-20:hover,
3241.hover-black-20:focus { color: rgba(0, 0, 0, .2); }
3242
3243.hover-black-10:hover,
3244.hover-black-10:focus { color: rgba(0, 0, 0, .1); }
3245
3246.hover-white-90:hover,
3247.hover-white-90:focus { color: rgba(255, 255, 255, .9); }
3248
3249.hover-white-80:hover,
3250.hover-white-80:focus { color: rgba(255, 255, 255, .8); }
3251
3252.hover-white-70:hover,
3253.hover-white-70:focus { color: rgba(255, 255, 255, .7); }
3254
3255.hover-white-60:hover,
3256.hover-white-60:focus { color: rgba(255, 255, 255, .6); }
3257
3258.hover-white-50:hover,
3259.hover-white-50:focus { color: rgba(255, 255, 255, .5); }
3260
3261.hover-white-40:hover,
3262.hover-white-40:focus { color: rgba(255, 255, 255, .4); }
3263
3264.hover-white-30:hover,
3265.hover-white-30:focus { color: rgba(255, 255, 255, .3); }
3266
3267.hover-white-20:hover,
3268.hover-white-20:focus { color: rgba(255, 255, 255, .2); }
3269
3270.hover-white-10:hover,
3271.hover-white-10:focus { color: rgba(255, 255, 255, .1); }
3272
3273.hover-inherit:hover,
3274.hover-inherit:focus { color: inherit; }
3275
3276.hover-bg-black:hover,
3277.hover-bg-black:focus { background-color: #000; }
3278
3279.hover-bg-near-black:hover,
3280.hover-bg-near-black:focus { background-color: #111; }
3281
3282.hover-bg-dark-gray:hover,
3283.hover-bg-dark-gray:focus { background-color: #333; }
3284
3285.hover-bg-mid-gray:hover,
3286.hover-bg-mid-gray:focus { background-color: #555; }
3287
3288.hover-bg-gray:hover,
3289.hover-bg-gray:focus { background-color: #777; }
3290
3291.hover-bg-silver:hover,
3292.hover-bg-silver:focus { background-color: #999; }
3293
3294.hover-bg-light-silver:hover,
3295.hover-bg-light-silver:focus { background-color: #aaa; }
3296
3297.hover-bg-moon-gray:hover,
3298.hover-bg-moon-gray:focus { background-color: #ccc; }
3299
3300.hover-bg-light-gray:hover,
3301.hover-bg-light-gray:focus { background-color: #eee; }
3302
3303.hover-bg-near-white:hover,
3304.hover-bg-near-white:focus { background-color: #f4f4f4; }
3305
3306.hover-bg-white:hover,
3307.hover-bg-white:focus { background-color: #fff; }
3308
3309.hover-bg-transparent:hover,
3310.hover-bg-transparent:focus { background-color: transparent; }
3311
3312.hover-bg-black-90:hover,
3313.hover-bg-black-90:focus { background-color: rgba(0, 0, 0, .9); }
3314
3315.hover-bg-black-80:hover,
3316.hover-bg-black-80:focus { background-color: rgba(0, 0, 0, .8); }
3317
3318.hover-bg-black-70:hover,
3319.hover-bg-black-70:focus { background-color: rgba(0, 0, 0, .7); }
3320
3321.hover-bg-black-60:hover,
3322.hover-bg-black-60:focus { background-color: rgba(0, 0, 0, .6); }
3323
3324.hover-bg-black-50:hover,
3325.hover-bg-black-50:focus { background-color: rgba(0, 0, 0, .5); }
3326
3327.hover-bg-black-40:hover,
3328.hover-bg-black-40:focus { background-color: rgba(0, 0, 0, .4); }
3329
3330.hover-bg-black-30:hover,
3331.hover-bg-black-30:focus { background-color: rgba(0, 0, 0, .3); }
3332
3333.hover-bg-black-20:hover,
3334.hover-bg-black-20:focus { background-color: rgba(0, 0, 0, .2); }
3335
3336.hover-bg-black-10:hover,
3337.hover-bg-black-10:focus { background-color: rgba(0, 0, 0, .1); }
3338
3339.hover-bg-white-90:hover,
3340.hover-bg-white-90:focus { background-color: rgba(255, 255, 255, .9); }
3341
3342.hover-bg-white-80:hover,
3343.hover-bg-white-80:focus { background-color: rgba(255, 255, 255, .8); }
3344
3345.hover-bg-white-70:hover,
3346.hover-bg-white-70:focus { background-color: rgba(255, 255, 255, .7); }
3347
3348.hover-bg-white-60:hover,
3349.hover-bg-white-60:focus { background-color: rgba(255, 255, 255, .6); }
3350
3351.hover-bg-white-50:hover,
3352.hover-bg-white-50:focus { background-color: rgba(255, 255, 255, .5); }
3353
3354.hover-bg-white-40:hover,
3355.hover-bg-white-40:focus { background-color: rgba(255, 255, 255, .4); }
3356
3357.hover-bg-white-30:hover,
3358.hover-bg-white-30:focus { background-color: rgba(255, 255, 255, .3); }
3359
3360.hover-bg-white-20:hover,
3361.hover-bg-white-20:focus { background-color: rgba(255, 255, 255, .2); }
3362
3363.hover-bg-white-10:hover,
3364.hover-bg-white-10:focus { background-color: rgba(255, 255, 255, .1); }
3365
3366.hover-dark-red:hover,
3367.hover-dark-red:focus { color: #e7040f; }
3368
3369.hover-red:hover,
3370.hover-red:focus { color: #ff4136; }
3371
3372.hover-light-red:hover,
3373.hover-light-red:focus { color: #ff725c; }
3374
3375.hover-orange:hover,
3376.hover-orange:focus { color: #ff6300; }
3377
3378.hover-gold:hover,
3379.hover-gold:focus { color: #ffb700; }
3380
3381.hover-yellow:hover,
3382.hover-yellow:focus { color: #ffd700; }
3383
3384.hover-light-yellow:hover,
3385.hover-light-yellow:focus { color: #fbf1a9; }
3386
3387.hover-purple:hover,
3388.hover-purple:focus { color: #5e2ca5; }
3389
3390.hover-light-purple:hover,
3391.hover-light-purple:focus { color: #a463f2; }
3392
3393.hover-dark-pink:hover,
3394.hover-dark-pink:focus { color: #d5008f; }
3395
3396.hover-hot-pink:hover,
3397.hover-hot-pink:focus { color: #ff41b4; }
3398
3399.hover-pink:hover,
3400.hover-pink:focus { color: #ff80cc; }
3401
3402.hover-light-pink:hover,
3403.hover-light-pink:focus { color: #ffa3d7; }
3404
3405.hover-dark-green:hover,
3406.hover-dark-green:focus { color: #137752; }
3407
3408.hover-green:hover,
3409.hover-green:focus { color: #19a974; }
3410
3411.hover-light-green:hover,
3412.hover-light-green:focus { color: #9eebcf; }
3413
3414.hover-navy:hover,
3415.hover-navy:focus { color: #001b44; }
3416
3417.hover-dark-blue:hover,
3418.hover-dark-blue:focus { color: #00449e; }
3419
3420.hover-blue:hover,
3421.hover-blue:focus { color: #357edd; }
3422
3423.hover-light-blue:hover,
3424.hover-light-blue:focus { color: #96ccff; }
3425
3426.hover-lightest-blue:hover,
3427.hover-lightest-blue:focus { color: #cdecff; }
3428
3429.hover-washed-blue:hover,
3430.hover-washed-blue:focus { color: #f6fffe; }
3431
3432.hover-washed-green:hover,
3433.hover-washed-green:focus { color: #e8fdf5; }
3434
3435.hover-washed-yellow:hover,
3436.hover-washed-yellow:focus { color: #fffceb; }
3437
3438.hover-washed-red:hover,
3439.hover-washed-red:focus { color: #ffdfdf; }
3440
3441.hover-bg-dark-red:hover,
3442.hover-bg-dark-red:focus { background-color: #e7040f; }
3443
3444.hover-bg-red:hover,
3445.hover-bg-red:focus { background-color: #ff4136; }
3446
3447.hover-bg-light-red:hover,
3448.hover-bg-light-red:focus { background-color: #ff725c; }
3449
3450.hover-bg-orange:hover,
3451.hover-bg-orange:focus { background-color: #ff6300; }
3452
3453.hover-bg-gold:hover,
3454.hover-bg-gold:focus { background-color: #ffb700; }
3455
3456.hover-bg-yellow:hover,
3457.hover-bg-yellow:focus { background-color: #ffd700; }
3458
3459.hover-bg-light-yellow:hover,
3460.hover-bg-light-yellow:focus { background-color: #fbf1a9; }
3461
3462.hover-bg-purple:hover,
3463.hover-bg-purple:focus { background-color: #5e2ca5; }
3464
3465.hover-bg-light-purple:hover,
3466.hover-bg-light-purple:focus { background-color: #a463f2; }
3467
3468.hover-bg-dark-pink:hover,
3469.hover-bg-dark-pink:focus { background-color: #d5008f; }
3470
3471.hover-bg-hot-pink:hover,
3472.hover-bg-hot-pink:focus { background-color: #ff41b4; }
3473
3474.hover-bg-pink:hover,
3475.hover-bg-pink:focus { background-color: #ff80cc; }
3476
3477.hover-bg-light-pink:hover,
3478.hover-bg-light-pink:focus { background-color: #ffa3d7; }
3479
3480.hover-bg-dark-green:hover,
3481.hover-bg-dark-green:focus { background-color: #137752; }
3482
3483.hover-bg-green:hover,
3484.hover-bg-green:focus { background-color: #19a974; }
3485
3486.hover-bg-light-green:hover,
3487.hover-bg-light-green:focus { background-color: #9eebcf; }
3488
3489.hover-bg-navy:hover,
3490.hover-bg-navy:focus { background-color: #001b44; }
3491
3492.hover-bg-dark-blue:hover,
3493.hover-bg-dark-blue:focus { background-color: #00449e; }
3494
3495.hover-bg-blue:hover,
3496.hover-bg-blue:focus { background-color: #357edd; }
3497
3498.hover-bg-light-blue:hover,
3499.hover-bg-light-blue:focus { background-color: #96ccff; }
3500
3501.hover-bg-lightest-blue:hover,
3502.hover-bg-lightest-blue:focus { background-color: #cdecff; }
3503
3504.hover-bg-washed-blue:hover,
3505.hover-bg-washed-blue:focus { background-color: #f6fffe; }
3506
3507.hover-bg-washed-green:hover,
3508.hover-bg-washed-green:focus { background-color: #e8fdf5; }
3509
3510.hover-bg-washed-yellow:hover,
3511.hover-bg-washed-yellow:focus { background-color: #fffceb; }
3512
3513.hover-bg-washed-red:hover,
3514.hover-bg-washed-red:focus { background-color: #ffdfdf; }
3515
3516.hover-bg-inherit:hover,
3517.hover-bg-inherit:focus { background-color: inherit; }
3518
3519/* Variables */
3520
3521/*
3522 SPACING
3523 Docs: http://tachyons.io/docs/layout/spacing/
3524
3525 An eight step powers of two scale ranging from 0 to 16rem.
3526
3527 Base:
3528 p = padding
3529 m = margin
3530
3531 Modifiers:
3532 a = all
3533 h = horizontal
3534 v = vertical
3535 t = top
3536 r = right
3537 b = bottom
3538 l = left
3539
3540 0 = none
3541 1 = 1st step in spacing scale
3542 2 = 2nd step in spacing scale
3543 3 = 3rd step in spacing scale
3544 4 = 4th step in spacing scale
3545 5 = 5th step in spacing scale
3546 6 = 6th step in spacing scale
3547 7 = 7th step in spacing scale
3548
3549 Media Query Extensions:
3550 -ns = not-small
3551 -m = medium
3552 -l = large
3553
3554*/
3555
3556.pa0 { padding: 0; }
3557
3558.pa1 { padding: .25rem; }
3559
3560.pa2 { padding: .5rem; }
3561
3562.pa3 { padding: 1rem; }
3563
3564.pa4 { padding: 2rem; }
3565
3566.pa5 { padding: 4rem; }
3567
3568.pa6 { padding: 8rem; }
3569
3570.pa7 { padding: 16rem; }
3571
3572.pl0 { padding-left: 0; }
3573
3574.pl1 { padding-left: .25rem; }
3575
3576.pl2 { padding-left: .5rem; }
3577
3578.pl3 { padding-left: 1rem; }
3579
3580.pl4 { padding-left: 2rem; }
3581
3582.pl5 { padding-left: 4rem; }
3583
3584.pl6 { padding-left: 8rem; }
3585
3586.pl7 { padding-left: 16rem; }
3587
3588.pr0 { padding-right: 0; }
3589
3590.pr1 { padding-right: .25rem; }
3591
3592.pr2 { padding-right: .5rem; }
3593
3594.pr3 { padding-right: 1rem; }
3595
3596.pr4 { padding-right: 2rem; }
3597
3598.pr5 { padding-right: 4rem; }
3599
3600.pr6 { padding-right: 8rem; }
3601
3602.pr7 { padding-right: 16rem; }
3603
3604.pb0 { padding-bottom: 0; }
3605
3606.pb1 { padding-bottom: .25rem; }
3607
3608.pb2 { padding-bottom: .5rem; }
3609
3610.pb3 { padding-bottom: 1rem; }
3611
3612.pb4 { padding-bottom: 2rem; }
3613
3614.pb5 { padding-bottom: 4rem; }
3615
3616.pb6 { padding-bottom: 8rem; }
3617
3618.pb7 { padding-bottom: 16rem; }
3619
3620.pt0 { padding-top: 0; }
3621
3622.pt1 { padding-top: .25rem; }
3623
3624.pt2 { padding-top: .5rem; }
3625
3626.pt3 { padding-top: 1rem; }
3627
3628.pt4 { padding-top: 2rem; }
3629
3630.pt5 { padding-top: 4rem; }
3631
3632.pt6 { padding-top: 8rem; }
3633
3634.pt7 { padding-top: 16rem; }
3635
3636.pv0 {
3637 padding-top: 0;
3638 padding-bottom: 0;
3639}
3640
3641.pv1 {
3642 padding-top: .25rem;
3643 padding-bottom: .25rem;
3644}
3645
3646.pv2 {
3647 padding-top: .5rem;
3648 padding-bottom: .5rem;
3649}
3650
3651.pv3 {
3652 padding-top: 1rem;
3653 padding-bottom: 1rem;
3654}
3655
3656.pv4 {
3657 padding-top: 2rem;
3658 padding-bottom: 2rem;
3659}
3660
3661.pv5 {
3662 padding-top: 4rem;
3663 padding-bottom: 4rem;
3664}
3665
3666.pv6 {
3667 padding-top: 8rem;
3668 padding-bottom: 8rem;
3669}
3670
3671.pv7 {
3672 padding-top: 16rem;
3673 padding-bottom: 16rem;
3674}
3675
3676.ph0 {
3677 padding-left: 0;
3678 padding-right: 0;
3679}
3680
3681.ph1 {
3682 padding-left: .25rem;
3683 padding-right: .25rem;
3684}
3685
3686.ph2 {
3687 padding-left: .5rem;
3688 padding-right: .5rem;
3689}
3690
3691.ph3 {
3692 padding-left: 1rem;
3693 padding-right: 1rem;
3694}
3695
3696.ph4 {
3697 padding-left: 2rem;
3698 padding-right: 2rem;
3699}
3700
3701.ph5 {
3702 padding-left: 4rem;
3703 padding-right: 4rem;
3704}
3705
3706.ph6 {
3707 padding-left: 8rem;
3708 padding-right: 8rem;
3709}
3710
3711.ph7 {
3712 padding-left: 16rem;
3713 padding-right: 16rem;
3714}
3715
3716.ma0 { margin: 0; }
3717
3718.ma1 { margin: .25rem; }
3719
3720.ma2 { margin: .5rem; }
3721
3722.ma3 { margin: 1rem; }
3723
3724.ma4 { margin: 2rem; }
3725
3726.ma5 { margin: 4rem; }
3727
3728.ma6 { margin: 8rem; }
3729
3730.ma7 { margin: 16rem; }
3731
3732.ml0 { margin-left: 0; }
3733
3734.ml1 { margin-left: .25rem; }
3735
3736.ml2 { margin-left: .5rem; }
3737
3738.ml3 { margin-left: 1rem; }
3739
3740.ml4 { margin-left: 2rem; }
3741
3742.ml5 { margin-left: 4rem; }
3743
3744.ml6 { margin-left: 8rem; }
3745
3746.ml7 { margin-left: 16rem; }
3747
3748.mr0 { margin-right: 0; }
3749
3750.mr1 { margin-right: .25rem; }
3751
3752.mr2 { margin-right: .5rem; }
3753
3754.mr3 { margin-right: 1rem; }
3755
3756.mr4 { margin-right: 2rem; }
3757
3758.mr5 { margin-right: 4rem; }
3759
3760.mr6 { margin-right: 8rem; }
3761
3762.mr7 { margin-right: 16rem; }
3763
3764.mb0 { margin-bottom: 0; }
3765
3766.mb1 { margin-bottom: .25rem; }
3767
3768.mb2 { margin-bottom: .5rem; }
3769
3770.mb3 { margin-bottom: 1rem; }
3771
3772.mb4 { margin-bottom: 2rem; }
3773
3774.mb5 { margin-bottom: 4rem; }
3775
3776.mb6 { margin-bottom: 8rem; }
3777
3778.mb7 { margin-bottom: 16rem; }
3779
3780.mt0 { margin-top: 0; }
3781
3782.mt1 { margin-top: .25rem; }
3783
3784.mt2 { margin-top: .5rem; }
3785
3786.mt3 { margin-top: 1rem; }
3787
3788.mt4 { margin-top: 2rem; }
3789
3790.mt5 { margin-top: 4rem; }
3791
3792.mt6 { margin-top: 8rem; }
3793
3794.mt7 { margin-top: 16rem; }
3795
3796.mv0 {
3797 margin-top: 0;
3798 margin-bottom: 0;
3799}
3800
3801.mv1 {
3802 margin-top: .25rem;
3803 margin-bottom: .25rem;
3804}
3805
3806.mv2 {
3807 margin-top: .5rem;
3808 margin-bottom: .5rem;
3809}
3810
3811.mv3 {
3812 margin-top: 1rem;
3813 margin-bottom: 1rem;
3814}
3815
3816.mv4 {
3817 margin-top: 2rem;
3818 margin-bottom: 2rem;
3819}
3820
3821.mv5 {
3822 margin-top: 4rem;
3823 margin-bottom: 4rem;
3824}
3825
3826.mv6 {
3827 margin-top: 8rem;
3828 margin-bottom: 8rem;
3829}
3830
3831.mv7 {
3832 margin-top: 16rem;
3833 margin-bottom: 16rem;
3834}
3835
3836.mh0 {
3837 margin-left: 0;
3838 margin-right: 0;
3839}
3840
3841.mh1 {
3842 margin-left: .25rem;
3843 margin-right: .25rem;
3844}
3845
3846.mh2 {
3847 margin-left: .5rem;
3848 margin-right: .5rem;
3849}
3850
3851.mh3 {
3852 margin-left: 1rem;
3853 margin-right: 1rem;
3854}
3855
3856.mh4 {
3857 margin-left: 2rem;
3858 margin-right: 2rem;
3859}
3860
3861.mh5 {
3862 margin-left: 4rem;
3863 margin-right: 4rem;
3864}
3865
3866.mh6 {
3867 margin-left: 8rem;
3868 margin-right: 8rem;
3869}
3870
3871.mh7 {
3872 margin-left: 16rem;
3873 margin-right: 16rem;
3874}
3875
3876@media screen and (min-width: 30em) {
3877 .pa0-ns { padding: 0; }
3878 .pa1-ns { padding: .25rem; }
3879 .pa2-ns { padding: .5rem; }
3880 .pa3-ns { padding: 1rem; }
3881 .pa4-ns { padding: 2rem; }
3882 .pa5-ns { padding: 4rem; }
3883 .pa6-ns { padding: 8rem; }
3884 .pa7-ns { padding: 16rem; }
3885
3886 .pl0-ns { padding-left: 0; }
3887 .pl1-ns { padding-left: .25rem; }
3888 .pl2-ns { padding-left: .5rem; }
3889 .pl3-ns { padding-left: 1rem; }
3890 .pl4-ns { padding-left: 2rem; }
3891 .pl5-ns { padding-left: 4rem; }
3892 .pl6-ns { padding-left: 8rem; }
3893 .pl7-ns { padding-left: 16rem; }
3894
3895 .pr0-ns { padding-right: 0; }
3896 .pr1-ns { padding-right: .25rem; }
3897 .pr2-ns { padding-right: .5rem; }
3898 .pr3-ns { padding-right: 1rem; }
3899 .pr4-ns { padding-right: 2rem; }
3900 .pr5-ns { padding-right: 4rem; }
3901 .pr6-ns { padding-right: 8rem; }
3902 .pr7-ns { padding-right: 16rem; }
3903
3904 .pb0-ns { padding-bottom: 0; }
3905 .pb1-ns { padding-bottom: .25rem; }
3906 .pb2-ns { padding-bottom: .5rem; }
3907 .pb3-ns { padding-bottom: 1rem; }
3908 .pb4-ns { padding-bottom: 2rem; }
3909 .pb5-ns { padding-bottom: 4rem; }
3910 .pb6-ns { padding-bottom: 8rem; }
3911 .pb7-ns { padding-bottom: 16rem; }
3912
3913 .pt0-ns { padding-top: 0; }
3914 .pt1-ns { padding-top: .25rem; }
3915 .pt2-ns { padding-top: .5rem; }
3916 .pt3-ns { padding-top: 1rem; }
3917 .pt4-ns { padding-top: 2rem; }
3918 .pt5-ns { padding-top: 4rem; }
3919 .pt6-ns { padding-top: 8rem; }
3920 .pt7-ns { padding-top: 16rem; }
3921
3922 .pv0-ns {
3923 padding-top: 0;
3924 padding-bottom: 0;
3925 }
3926 .pv1-ns {
3927 padding-top: .25rem;
3928 padding-bottom: .25rem;
3929 }
3930 .pv2-ns {
3931 padding-top: .5rem;
3932 padding-bottom: .5rem;
3933 }
3934 .pv3-ns {
3935 padding-top: 1rem;
3936 padding-bottom: 1rem;
3937 }
3938 .pv4-ns {
3939 padding-top: 2rem;
3940 padding-bottom: 2rem;
3941 }
3942 .pv5-ns {
3943 padding-top: 4rem;
3944 padding-bottom: 4rem;
3945 }
3946 .pv6-ns {
3947 padding-top: 8rem;
3948 padding-bottom: 8rem;
3949 }
3950 .pv7-ns {
3951 padding-top: 16rem;
3952 padding-bottom: 16rem;
3953 }
3954 .ph0-ns {
3955 padding-left: 0;
3956 padding-right: 0;
3957 }
3958 .ph1-ns {
3959 padding-left: .25rem;
3960 padding-right: .25rem;
3961 }
3962 .ph2-ns {
3963 padding-left: .5rem;
3964 padding-right: .5rem;
3965 }
3966 .ph3-ns {
3967 padding-left: 1rem;
3968 padding-right: 1rem;
3969 }
3970 .ph4-ns {
3971 padding-left: 2rem;
3972 padding-right: 2rem;
3973 }
3974 .ph5-ns {
3975 padding-left: 4rem;
3976 padding-right: 4rem;
3977 }
3978 .ph6-ns {
3979 padding-left: 8rem;
3980 padding-right: 8rem;
3981 }
3982 .ph7-ns {
3983 padding-left: 16rem;
3984 padding-right: 16rem;
3985 }
3986
3987 .ma0-ns { margin: 0; }
3988 .ma1-ns { margin: .25rem; }
3989 .ma2-ns { margin: .5rem; }
3990 .ma3-ns { margin: 1rem; }
3991 .ma4-ns { margin: 2rem; }
3992 .ma5-ns { margin: 4rem; }
3993 .ma6-ns { margin: 8rem; }
3994 .ma7-ns { margin: 16rem; }
3995
3996 .ml0-ns { margin-left: 0; }
3997 .ml1-ns { margin-left: .25rem; }
3998 .ml2-ns { margin-left: .5rem; }
3999 .ml3-ns { margin-left: 1rem; }
4000 .ml4-ns { margin-left: 2rem; }
4001 .ml5-ns { margin-left: 4rem; }
4002 .ml6-ns { margin-left: 8rem; }
4003 .ml7-ns { margin-left: 16rem; }
4004
4005 .mr0-ns { margin-right: 0; }
4006 .mr1-ns { margin-right: .25rem; }
4007 .mr2-ns { margin-right: .5rem; }
4008 .mr3-ns { margin-right: 1rem; }
4009 .mr4-ns { margin-right: 2rem; }
4010 .mr5-ns { margin-right: 4rem; }
4011 .mr6-ns { margin-right: 8rem; }
4012 .mr7-ns { margin-right: 16rem; }
4013
4014 .mb0-ns { margin-bottom: 0; }
4015 .mb1-ns { margin-bottom: .25rem; }
4016 .mb2-ns { margin-bottom: .5rem; }
4017 .mb3-ns { margin-bottom: 1rem; }
4018 .mb4-ns { margin-bottom: 2rem; }
4019 .mb5-ns { margin-bottom: 4rem; }
4020 .mb6-ns { margin-bottom: 8rem; }
4021 .mb7-ns { margin-bottom: 16rem; }
4022
4023 .mt0-ns { margin-top: 0; }
4024 .mt1-ns { margin-top: .25rem; }
4025 .mt2-ns { margin-top: .5rem; }
4026 .mt3-ns { margin-top: 1rem; }
4027 .mt4-ns { margin-top: 2rem; }
4028 .mt5-ns { margin-top: 4rem; }
4029 .mt6-ns { margin-top: 8rem; }
4030 .mt7-ns { margin-top: 16rem; }
4031
4032 .mv0-ns {
4033 margin-top: 0;
4034 margin-bottom: 0;
4035 }
4036 .mv1-ns {
4037 margin-top: .25rem;
4038 margin-bottom: .25rem;
4039 }
4040 .mv2-ns {
4041 margin-top: .5rem;
4042 margin-bottom: .5rem;
4043 }
4044 .mv3-ns {
4045 margin-top: 1rem;
4046 margin-bottom: 1rem;
4047 }
4048 .mv4-ns {
4049 margin-top: 2rem;
4050 margin-bottom: 2rem;
4051 }
4052 .mv5-ns {
4053 margin-top: 4rem;
4054 margin-bottom: 4rem;
4055 }
4056 .mv6-ns {
4057 margin-top: 8rem;
4058 margin-bottom: 8rem;
4059 }
4060 .mv7-ns {
4061 margin-top: 16rem;
4062 margin-bottom: 16rem;
4063 }
4064
4065 .mh0-ns {
4066 margin-left: 0;
4067 margin-right: 0;
4068 }
4069 .mh1-ns {
4070 margin-left: .25rem;
4071 margin-right: .25rem;
4072 }
4073 .mh2-ns {
4074 margin-left: .5rem;
4075 margin-right: .5rem;
4076 }
4077 .mh3-ns {
4078 margin-left: 1rem;
4079 margin-right: 1rem;
4080 }
4081 .mh4-ns {
4082 margin-left: 2rem;
4083 margin-right: 2rem;
4084 }
4085 .mh5-ns {
4086 margin-left: 4rem;
4087 margin-right: 4rem;
4088 }
4089 .mh6-ns {
4090 margin-left: 8rem;
4091 margin-right: 8rem;
4092 }
4093 .mh7-ns {
4094 margin-left: 16rem;
4095 margin-right: 16rem;
4096 }
4097
4098}
4099
4100@media screen and (min-width: 30em) and (max-width: 60em) {
4101 .pa0-m { padding: 0; }
4102 .pa1-m { padding: .25rem; }
4103 .pa2-m { padding: .5rem; }
4104 .pa3-m { padding: 1rem; }
4105 .pa4-m { padding: 2rem; }
4106 .pa5-m { padding: 4rem; }
4107 .pa6-m { padding: 8rem; }
4108 .pa7-m { padding: 16rem; }
4109
4110 .pl0-m { padding-left: 0; }
4111 .pl1-m { padding-left: .25rem; }
4112 .pl2-m { padding-left: .5rem; }
4113 .pl3-m { padding-left: 1rem; }
4114 .pl4-m { padding-left: 2rem; }
4115 .pl5-m { padding-left: 4rem; }
4116 .pl6-m { padding-left: 8rem; }
4117 .pl7-m { padding-left: 16rem; }
4118
4119 .pr0-m { padding-right: 0; }
4120 .pr1-m { padding-right: .25rem; }
4121 .pr2-m { padding-right: .5rem; }
4122 .pr3-m { padding-right: 1rem; }
4123 .pr4-m { padding-right: 2rem; }
4124 .pr5-m { padding-right: 4rem; }
4125 .pr6-m { padding-right: 8rem; }
4126 .pr7-m { padding-right: 16rem; }
4127
4128 .pb0-m { padding-bottom: 0; }
4129 .pb1-m { padding-bottom: .25rem; }
4130 .pb2-m { padding-bottom: .5rem; }
4131 .pb3-m { padding-bottom: 1rem; }
4132 .pb4-m { padding-bottom: 2rem; }
4133 .pb5-m { padding-bottom: 4rem; }
4134 .pb6-m { padding-bottom: 8rem; }
4135 .pb7-m { padding-bottom: 16rem; }
4136
4137 .pt0-m { padding-top: 0; }
4138 .pt1-m { padding-top: .25rem; }
4139 .pt2-m { padding-top: .5rem; }
4140 .pt3-m { padding-top: 1rem; }
4141 .pt4-m { padding-top: 2rem; }
4142 .pt5-m { padding-top: 4rem; }
4143 .pt6-m { padding-top: 8rem; }
4144 .pt7-m { padding-top: 16rem; }
4145
4146 .pv0-m {
4147 padding-top: 0;
4148 padding-bottom: 0;
4149 }
4150 .pv1-m {
4151 padding-top: .25rem;
4152 padding-bottom: .25rem;
4153 }
4154 .pv2-m {
4155 padding-top: .5rem;
4156 padding-bottom: .5rem;
4157 }
4158 .pv3-m {
4159 padding-top: 1rem;
4160 padding-bottom: 1rem;
4161 }
4162 .pv4-m {
4163 padding-top: 2rem;
4164 padding-bottom: 2rem;
4165 }
4166 .pv5-m {
4167 padding-top: 4rem;
4168 padding-bottom: 4rem;
4169 }
4170 .pv6-m {
4171 padding-top: 8rem;
4172 padding-bottom: 8rem;
4173 }
4174 .pv7-m {
4175 padding-top: 16rem;
4176 padding-bottom: 16rem;
4177 }
4178
4179 .ph0-m {
4180 padding-left: 0;
4181 padding-right: 0;
4182 }
4183 .ph1-m {
4184 padding-left: .25rem;
4185 padding-right: .25rem;
4186 }
4187 .ph2-m {
4188 padding-left: .5rem;
4189 padding-right: .5rem;
4190 }
4191 .ph3-m {
4192 padding-left: 1rem;
4193 padding-right: 1rem;
4194 }
4195 .ph4-m {
4196 padding-left: 2rem;
4197 padding-right: 2rem;
4198 }
4199 .ph5-m {
4200 padding-left: 4rem;
4201 padding-right: 4rem;
4202 }
4203 .ph6-m {
4204 padding-left: 8rem;
4205 padding-right: 8rem;
4206 }
4207 .ph7-m {
4208 padding-left: 16rem;
4209 padding-right: 16rem;
4210 }
4211
4212 .ma0-m { margin: 0; }
4213 .ma1-m { margin: .25rem; }
4214 .ma2-m { margin: .5rem; }
4215 .ma3-m { margin: 1rem; }
4216 .ma4-m { margin: 2rem; }
4217 .ma5-m { margin: 4rem; }
4218 .ma6-m { margin: 8rem; }
4219 .ma7-m { margin: 16rem; }
4220
4221 .ml0-m { margin-left: 0; }
4222 .ml1-m { margin-left: .25rem; }
4223 .ml2-m { margin-left: .5rem; }
4224 .ml3-m { margin-left: 1rem; }
4225 .ml4-m { margin-left: 2rem; }
4226 .ml5-m { margin-left: 4rem; }
4227 .ml6-m { margin-left: 8rem; }
4228 .ml7-m { margin-left: 16rem; }
4229
4230 .mr0-m { margin-right: 0; }
4231 .mr1-m { margin-right: .25rem; }
4232 .mr2-m { margin-right: .5rem; }
4233 .mr3-m { margin-right: 1rem; }
4234 .mr4-m { margin-right: 2rem; }
4235 .mr5-m { margin-right: 4rem; }
4236 .mr6-m { margin-right: 8rem; }
4237 .mr7-m { margin-right: 16rem; }
4238
4239 .mb0-m { margin-bottom: 0; }
4240 .mb1-m { margin-bottom: .25rem; }
4241 .mb2-m { margin-bottom: .5rem; }
4242 .mb3-m { margin-bottom: 1rem; }
4243 .mb4-m { margin-bottom: 2rem; }
4244 .mb5-m { margin-bottom: 4rem; }
4245 .mb6-m { margin-bottom: 8rem; }
4246 .mb7-m { margin-bottom: 16rem; }
4247
4248 .mt0-m { margin-top: 0; }
4249 .mt1-m { margin-top: .25rem; }
4250 .mt2-m { margin-top: .5rem; }
4251 .mt3-m { margin-top: 1rem; }
4252 .mt4-m { margin-top: 2rem; }
4253 .mt5-m { margin-top: 4rem; }
4254 .mt6-m { margin-top: 8rem; }
4255 .mt7-m { margin-top: 16rem; }
4256
4257 .mv0-m {
4258 margin-top: 0;
4259 margin-bottom: 0;
4260 }
4261 .mv1-m {
4262 margin-top: .25rem;
4263 margin-bottom: .25rem;
4264 }
4265 .mv2-m {
4266 margin-top: .5rem;
4267 margin-bottom: .5rem;
4268 }
4269 .mv3-m {
4270 margin-top: 1rem;
4271 margin-bottom: 1rem;
4272 }
4273 .mv4-m {
4274 margin-top: 2rem;
4275 margin-bottom: 2rem;
4276 }
4277 .mv5-m {
4278 margin-top: 4rem;
4279 margin-bottom: 4rem;
4280 }
4281 .mv6-m {
4282 margin-top: 8rem;
4283 margin-bottom: 8rem;
4284 }
4285 .mv7-m {
4286 margin-top: 16rem;
4287 margin-bottom: 16rem;
4288 }
4289
4290 .mh0-m {
4291 margin-left: 0;
4292 margin-right: 0;
4293 }
4294 .mh1-m {
4295 margin-left: .25rem;
4296 margin-right: .25rem;
4297 }
4298 .mh2-m {
4299 margin-left: .5rem;
4300 margin-right: .5rem;
4301 }
4302 .mh3-m {
4303 margin-left: 1rem;
4304 margin-right: 1rem;
4305 }
4306 .mh4-m {
4307 margin-left: 2rem;
4308 margin-right: 2rem;
4309 }
4310 .mh5-m {
4311 margin-left: 4rem;
4312 margin-right: 4rem;
4313 }
4314 .mh6-m {
4315 margin-left: 8rem;
4316 margin-right: 8rem;
4317 }
4318 .mh7-m {
4319 margin-left: 16rem;
4320 margin-right: 16rem;
4321 }
4322
4323}
4324
4325@media screen and (min-width: 60em) {
4326 .pa0-l { padding: 0; }
4327 .pa1-l { padding: .25rem; }
4328 .pa2-l { padding: .5rem; }
4329 .pa3-l { padding: 1rem; }
4330 .pa4-l { padding: 2rem; }
4331 .pa5-l { padding: 4rem; }
4332 .pa6-l { padding: 8rem; }
4333 .pa7-l { padding: 16rem; }
4334
4335 .pl0-l { padding-left: 0; }
4336 .pl1-l { padding-left: .25rem; }
4337 .pl2-l { padding-left: .5rem; }
4338 .pl3-l { padding-left: 1rem; }
4339 .pl4-l { padding-left: 2rem; }
4340 .pl5-l { padding-left: 4rem; }
4341 .pl6-l { padding-left: 8rem; }
4342 .pl7-l { padding-left: 16rem; }
4343
4344 .pr0-l { padding-right: 0; }
4345 .pr1-l { padding-right: .25rem; }
4346 .pr2-l { padding-right: .5rem; }
4347 .pr3-l { padding-right: 1rem; }
4348 .pr4-l { padding-right: 2rem; }
4349 .pr5-l { padding-right: 4rem; }
4350 .pr6-l { padding-right: 8rem; }
4351 .pr7-l { padding-right: 16rem; }
4352
4353 .pb0-l { padding-bottom: 0; }
4354 .pb1-l { padding-bottom: .25rem; }
4355 .pb2-l { padding-bottom: .5rem; }
4356 .pb3-l { padding-bottom: 1rem; }
4357 .pb4-l { padding-bottom: 2rem; }
4358 .pb5-l { padding-bottom: 4rem; }
4359 .pb6-l { padding-bottom: 8rem; }
4360 .pb7-l { padding-bottom: 16rem; }
4361
4362 .pt0-l { padding-top: 0; }
4363 .pt1-l { padding-top: .25rem; }
4364 .pt2-l { padding-top: .5rem; }
4365 .pt3-l { padding-top: 1rem; }
4366 .pt4-l { padding-top: 2rem; }
4367 .pt5-l { padding-top: 4rem; }
4368 .pt6-l { padding-top: 8rem; }
4369 .pt7-l { padding-top: 16rem; }
4370
4371 .pv0-l {
4372 padding-top: 0;
4373 padding-bottom: 0;
4374 }
4375 .pv1-l {
4376 padding-top: .25rem;
4377 padding-bottom: .25rem;
4378 }
4379 .pv2-l {
4380 padding-top: .5rem;
4381 padding-bottom: .5rem;
4382 }
4383 .pv3-l {
4384 padding-top: 1rem;
4385 padding-bottom: 1rem;
4386 }
4387 .pv4-l {
4388 padding-top: 2rem;
4389 padding-bottom: 2rem;
4390 }
4391 .pv5-l {
4392 padding-top: 4rem;
4393 padding-bottom: 4rem;
4394 }
4395 .pv6-l {
4396 padding-top: 8rem;
4397 padding-bottom: 8rem;
4398 }
4399 .pv7-l {
4400 padding-top: 16rem;
4401 padding-bottom: 16rem;
4402 }
4403
4404 .ph0-l {
4405 padding-left: 0;
4406 padding-right: 0;
4407 }
4408 .ph1-l {
4409 padding-left: .25rem;
4410 padding-right: .25rem;
4411 }
4412 .ph2-l {
4413 padding-left: .5rem;
4414 padding-right: .5rem;
4415 }
4416 .ph3-l {
4417 padding-left: 1rem;
4418 padding-right: 1rem;
4419 }
4420 .ph4-l {
4421 padding-left: 2rem;
4422 padding-right: 2rem;
4423 }
4424 .ph5-l {
4425 padding-left: 4rem;
4426 padding-right: 4rem;
4427 }
4428 .ph6-l {
4429 padding-left: 8rem;
4430 padding-right: 8rem;
4431 }
4432 .ph7-l {
4433 padding-left: 16rem;
4434 padding-right: 16rem;
4435 }
4436
4437 .ma0-l { margin: 0; }
4438 .ma1-l { margin: .25rem; }
4439 .ma2-l { margin: .5rem; }
4440 .ma3-l { margin: 1rem; }
4441 .ma4-l { margin: 2rem; }
4442 .ma5-l { margin: 4rem; }
4443 .ma6-l { margin: 8rem; }
4444 .ma7-l { margin: 16rem; }
4445
4446 .ml0-l { margin-left: 0; }
4447 .ml1-l { margin-left: .25rem; }
4448 .ml2-l { margin-left: .5rem; }
4449 .ml3-l { margin-left: 1rem; }
4450 .ml4-l { margin-left: 2rem; }
4451 .ml5-l { margin-left: 4rem; }
4452 .ml6-l { margin-left: 8rem; }
4453 .ml7-l { margin-left: 16rem; }
4454
4455 .mr0-l { margin-right: 0; }
4456 .mr1-l { margin-right: .25rem; }
4457 .mr2-l { margin-right: .5rem; }
4458 .mr3-l { margin-right: 1rem; }
4459 .mr4-l { margin-right: 2rem; }
4460 .mr5-l { margin-right: 4rem; }
4461 .mr6-l { margin-right: 8rem; }
4462 .mr7-l { margin-right: 16rem; }
4463
4464 .mb0-l { margin-bottom: 0; }
4465 .mb1-l { margin-bottom: .25rem; }
4466 .mb2-l { margin-bottom: .5rem; }
4467 .mb3-l { margin-bottom: 1rem; }
4468 .mb4-l { margin-bottom: 2rem; }
4469 .mb5-l { margin-bottom: 4rem; }
4470 .mb6-l { margin-bottom: 8rem; }
4471 .mb7-l { margin-bottom: 16rem; }
4472
4473 .mt0-l { margin-top: 0; }
4474 .mt1-l { margin-top: .25rem; }
4475 .mt2-l { margin-top: .5rem; }
4476 .mt3-l { margin-top: 1rem; }
4477 .mt4-l { margin-top: 2rem; }
4478 .mt5-l { margin-top: 4rem; }
4479 .mt6-l { margin-top: 8rem; }
4480 .mt7-l { margin-top: 16rem; }
4481
4482 .mv0-l {
4483 margin-top: 0;
4484 margin-bottom: 0;
4485 }
4486 .mv1-l {
4487 margin-top: .25rem;
4488 margin-bottom: .25rem;
4489 }
4490 .mv2-l {
4491 margin-top: .5rem;
4492 margin-bottom: .5rem;
4493 }
4494 .mv3-l {
4495 margin-top: 1rem;
4496 margin-bottom: 1rem;
4497 }
4498 .mv4-l {
4499 margin-top: 2rem;
4500 margin-bottom: 2rem;
4501 }
4502 .mv5-l {
4503 margin-top: 4rem;
4504 margin-bottom: 4rem;
4505 }
4506 .mv6-l {
4507 margin-top: 8rem;
4508 margin-bottom: 8rem;
4509 }
4510 .mv7-l {
4511 margin-top: 16rem;
4512 margin-bottom: 16rem;
4513 }
4514
4515 .mh0-l {
4516 margin-left: 0;
4517 margin-right: 0;
4518 }
4519 .mh1-l {
4520 margin-left: .25rem;
4521 margin-right: .25rem;
4522 }
4523 .mh2-l {
4524 margin-left: .5rem;
4525 margin-right: .5rem;
4526 }
4527 .mh3-l {
4528 margin-left: 1rem;
4529 margin-right: 1rem;
4530 }
4531 .mh4-l {
4532 margin-left: 2rem;
4533 margin-right: 2rem;
4534 }
4535 .mh5-l {
4536 margin-left: 4rem;
4537 margin-right: 4rem;
4538 }
4539 .mh6-l {
4540 margin-left: 8rem;
4541 margin-right: 8rem;
4542 }
4543 .mh7-l {
4544 margin-left: 16rem;
4545 margin-right: 16rem;
4546 }
4547}
4548
4549/*
4550 NEGATIVE MARGINS
4551
4552 Base:
4553 n = negative
4554
4555 Modifiers:
4556 a = all
4557 t = top
4558 r = right
4559 b = bottom
4560 l = left
4561
4562 1 = 1st step in spacing scale
4563 2 = 2nd step in spacing scale
4564 3 = 3rd step in spacing scale
4565 4 = 4th step in spacing scale
4566 5 = 5th step in spacing scale
4567 6 = 6th step in spacing scale
4568 7 = 7th step in spacing scale
4569
4570 Media Query Extensions:
4571 -ns = not-small
4572 -m = medium
4573 -l = large
4574
4575*/
4576
4577.na1 { margin: -0.25rem; }
4578
4579.na2 { margin: -0.5rem; }
4580
4581.na3 { margin: -1rem; }
4582
4583.na4 { margin: -2rem; }
4584
4585.na5 { margin: -4rem; }
4586
4587.na6 { margin: -8rem; }
4588
4589.na7 { margin: -16rem; }
4590
4591.nl1 { margin-left: -0.25rem; }
4592
4593.nl2 { margin-left: -0.5rem; }
4594
4595.nl3 { margin-left: -1rem; }
4596
4597.nl4 { margin-left: -2rem; }
4598
4599.nl5 { margin-left: -4rem; }
4600
4601.nl6 { margin-left: -8rem; }
4602
4603.nl7 { margin-left: -16rem; }
4604
4605.nr1 { margin-right: -0.25rem; }
4606
4607.nr2 { margin-right: -0.5rem; }
4608
4609.nr3 { margin-right: -1rem; }
4610
4611.nr4 { margin-right: -2rem; }
4612
4613.nr5 { margin-right: -4rem; }
4614
4615.nr6 { margin-right: -8rem; }
4616
4617.nr7 { margin-right: -16rem; }
4618
4619.nb1 { margin-bottom: -0.25rem; }
4620
4621.nb2 { margin-bottom: -0.5rem; }
4622
4623.nb3 { margin-bottom: -1rem; }
4624
4625.nb4 { margin-bottom: -2rem; }
4626
4627.nb5 { margin-bottom: -4rem; }
4628
4629.nb6 { margin-bottom: -8rem; }
4630
4631.nb7 { margin-bottom: -16rem; }
4632
4633.nt1 { margin-top: -0.25rem; }
4634
4635.nt2 { margin-top: -0.5rem; }
4636
4637.nt3 { margin-top: -1rem; }
4638
4639.nt4 { margin-top: -2rem; }
4640
4641.nt5 { margin-top: -4rem; }
4642
4643.nt6 { margin-top: -8rem; }
4644
4645.nt7 { margin-top: -16rem; }
4646
4647@media screen and (min-width: 30em) {
4648
4649 .na1-ns { margin: -0.25rem; }
4650 .na2-ns { margin: -0.5rem; }
4651 .na3-ns { margin: -1rem; }
4652 .na4-ns { margin: -2rem; }
4653 .na5-ns { margin: -4rem; }
4654 .na6-ns { margin: -8rem; }
4655 .na7-ns { margin: -16rem; }
4656
4657 .nl1-ns { margin-left: -0.25rem; }
4658 .nl2-ns { margin-left: -0.5rem; }
4659 .nl3-ns { margin-left: -1rem; }
4660 .nl4-ns { margin-left: -2rem; }
4661 .nl5-ns { margin-left: -4rem; }
4662 .nl6-ns { margin-left: -8rem; }
4663 .nl7-ns { margin-left: -16rem; }
4664
4665 .nr1-ns { margin-right: -0.25rem; }
4666 .nr2-ns { margin-right: -0.5rem; }
4667 .nr3-ns { margin-right: -1rem; }
4668 .nr4-ns { margin-right: -2rem; }
4669 .nr5-ns { margin-right: -4rem; }
4670 .nr6-ns { margin-right: -8rem; }
4671 .nr7-ns { margin-right: -16rem; }
4672
4673 .nb1-ns { margin-bottom: -0.25rem; }
4674 .nb2-ns { margin-bottom: -0.5rem; }
4675 .nb3-ns { margin-bottom: -1rem; }
4676 .nb4-ns { margin-bottom: -2rem; }
4677 .nb5-ns { margin-bottom: -4rem; }
4678 .nb6-ns { margin-bottom: -8rem; }
4679 .nb7-ns { margin-bottom: -16rem; }
4680
4681 .nt1-ns { margin-top: -0.25rem; }
4682 .nt2-ns { margin-top: -0.5rem; }
4683 .nt3-ns { margin-top: -1rem; }
4684 .nt4-ns { margin-top: -2rem; }
4685 .nt5-ns { margin-top: -4rem; }
4686 .nt6-ns { margin-top: -8rem; }
4687 .nt7-ns { margin-top: -16rem; }
4688
4689}
4690
4691@media screen and (min-width: 30em) and (max-width: 60em) {
4692 .na1-m { margin: -0.25rem; }
4693 .na2-m { margin: -0.5rem; }
4694 .na3-m { margin: -1rem; }
4695 .na4-m { margin: -2rem; }
4696 .na5-m { margin: -4rem; }
4697 .na6-m { margin: -8rem; }
4698 .na7-m { margin: -16rem; }
4699
4700 .nl1-m { margin-left: -0.25rem; }
4701 .nl2-m { margin-left: -0.5rem; }
4702 .nl3-m { margin-left: -1rem; }
4703 .nl4-m { margin-left: -2rem; }
4704 .nl5-m { margin-left: -4rem; }
4705 .nl6-m { margin-left: -8rem; }
4706 .nl7-m { margin-left: -16rem; }
4707
4708 .nr1-m { margin-right: -0.25rem; }
4709 .nr2-m { margin-right: -0.5rem; }
4710 .nr3-m { margin-right: -1rem; }
4711 .nr4-m { margin-right: -2rem; }
4712 .nr5-m { margin-right: -4rem; }
4713 .nr6-m { margin-right: -8rem; }
4714 .nr7-m { margin-right: -16rem; }
4715
4716 .nb1-m { margin-bottom: -0.25rem; }
4717 .nb2-m { margin-bottom: -0.5rem; }
4718 .nb3-m { margin-bottom: -1rem; }
4719 .nb4-m { margin-bottom: -2rem; }
4720 .nb5-m { margin-bottom: -4rem; }
4721 .nb6-m { margin-bottom: -8rem; }
4722 .nb7-m { margin-bottom: -16rem; }
4723
4724 .nt1-m { margin-top: -0.25rem; }
4725 .nt2-m { margin-top: -0.5rem; }
4726 .nt3-m { margin-top: -1rem; }
4727 .nt4-m { margin-top: -2rem; }
4728 .nt5-m { margin-top: -4rem; }
4729 .nt6-m { margin-top: -8rem; }
4730 .nt7-m { margin-top: -16rem; }
4731
4732}
4733
4734@media screen and (min-width: 60em) {
4735 .na1-l { margin: -0.25rem; }
4736 .na2-l { margin: -0.5rem; }
4737 .na3-l { margin: -1rem; }
4738 .na4-l { margin: -2rem; }
4739 .na5-l { margin: -4rem; }
4740 .na6-l { margin: -8rem; }
4741 .na7-l { margin: -16rem; }
4742
4743 .nl1-l { margin-left: -0.25rem; }
4744 .nl2-l { margin-left: -0.5rem; }
4745 .nl3-l { margin-left: -1rem; }
4746 .nl4-l { margin-left: -2rem; }
4747 .nl5-l { margin-left: -4rem; }
4748 .nl6-l { margin-left: -8rem; }
4749 .nl7-l { margin-left: -16rem; }
4750
4751 .nr1-l { margin-right: -0.25rem; }
4752 .nr2-l { margin-right: -0.5rem; }
4753 .nr3-l { margin-right: -1rem; }
4754 .nr4-l { margin-right: -2rem; }
4755 .nr5-l { margin-right: -4rem; }
4756 .nr6-l { margin-right: -8rem; }
4757 .nr7-l { margin-right: -16rem; }
4758
4759 .nb1-l { margin-bottom: -0.25rem; }
4760 .nb2-l { margin-bottom: -0.5rem; }
4761 .nb3-l { margin-bottom: -1rem; }
4762 .nb4-l { margin-bottom: -2rem; }
4763 .nb5-l { margin-bottom: -4rem; }
4764 .nb6-l { margin-bottom: -8rem; }
4765 .nb7-l { margin-bottom: -16rem; }
4766
4767 .nt1-l { margin-top: -0.25rem; }
4768 .nt2-l { margin-top: -0.5rem; }
4769 .nt3-l { margin-top: -1rem; }
4770 .nt4-l { margin-top: -2rem; }
4771 .nt5-l { margin-top: -4rem; }
4772 .nt6-l { margin-top: -8rem; }
4773 .nt7-l { margin-top: -16rem; }
4774}
4775
4776/*
4777
4778 TABLES
4779 Docs: http://tachyons.io/docs/elements/tables/
4780
4781*/
4782
4783.collapse {
4784 border-collapse: collapse;
4785 border-spacing: 0;
4786}
4787
4788.striped--light-silver:nth-child(odd) {
4789 background-color: #aaa;
4790}
4791
4792.striped--moon-gray:nth-child(odd) {
4793 background-color: #ccc;
4794}
4795
4796.striped--light-gray:nth-child(odd) {
4797 background-color: #eee;
4798}
4799
4800.striped--near-white:nth-child(odd) {
4801 background-color: #f4f4f4;
4802}
4803
4804.stripe-light:nth-child(odd) {
4805 background-color: rgba(255, 255, 255, .1);
4806}
4807
4808.stripe-dark:nth-child(odd) {
4809 background-color: rgba(0, 0, 0, .1);
4810}
4811
4812/*
4813
4814 TEXT DECORATION
4815 Docs: http://tachyons.io/docs/typography/text-decoration/
4816
4817
4818 Media Query Extensions:
4819 -ns = not-small
4820 -m = medium
4821 -l = large
4822
4823*/
4824
4825.strike { text-decoration: line-through; }
4826
4827.underline { text-decoration: underline; }
4828
4829.no-underline { text-decoration: none; }
4830
4831@media screen and (min-width: 30em) {
4832 .strike-ns { text-decoration: line-through; }
4833 .underline-ns { text-decoration: underline; }
4834 .no-underline-ns { text-decoration: none; }
4835}
4836
4837@media screen and (min-width: 30em) and (max-width: 60em) {
4838 .strike-m { text-decoration: line-through; }
4839 .underline-m { text-decoration: underline; }
4840 .no-underline-m { text-decoration: none; }
4841}
4842
4843@media screen and (min-width: 60em) {
4844 .strike-l { text-decoration: line-through; }
4845 .underline-l { text-decoration: underline; }
4846 .no-underline-l { text-decoration: none; }
4847}
4848
4849/*
4850
4851 TEXT ALIGN
4852 Docs: http://tachyons.io/docs/typography/text-align/
4853
4854 Base
4855 t = text-align
4856
4857 Modifiers
4858 l = left
4859 r = right
4860 c = center
4861 j = justify
4862
4863 Media Query Extensions:
4864 -ns = not-small
4865 -m = medium
4866 -l = large
4867
4868*/
4869
4870.tl { text-align: left; }
4871
4872.tr { text-align: right; }
4873
4874.tc { text-align: center; }
4875
4876.tj { text-align: justify; }
4877
4878@media screen and (min-width: 30em) {
4879 .tl-ns { text-align: left; }
4880 .tr-ns { text-align: right; }
4881 .tc-ns { text-align: center; }
4882 .tj-ns { text-align: justify; }
4883}
4884
4885@media screen and (min-width: 30em) and (max-width: 60em) {
4886 .tl-m { text-align: left; }
4887 .tr-m { text-align: right; }
4888 .tc-m { text-align: center; }
4889 .tj-m { text-align: justify; }
4890}
4891
4892@media screen and (min-width: 60em) {
4893 .tl-l { text-align: left; }
4894 .tr-l { text-align: right; }
4895 .tc-l { text-align: center; }
4896 .tj-l { text-align: justify; }
4897}
4898
4899/*
4900
4901 TEXT TRANSFORM
4902 Docs: http://tachyons.io/docs/typography/text-transform/
4903
4904 Base:
4905 tt = text-transform
4906
4907 Modifiers
4908 c = capitalize
4909 l = lowercase
4910 u = uppercase
4911 n = none
4912
4913 Media Query Extensions:
4914 -ns = not-small
4915 -m = medium
4916 -l = large
4917
4918*/
4919
4920.ttc { text-transform: capitalize; }
4921
4922.ttl { text-transform: lowercase; }
4923
4924.ttu { text-transform: uppercase; }
4925
4926.ttn { text-transform: none; }
4927
4928@media screen and (min-width: 30em) {
4929 .ttc-ns { text-transform: capitalize; }
4930 .ttl-ns { text-transform: lowercase; }
4931 .ttu-ns { text-transform: uppercase; }
4932 .ttn-ns { text-transform: none; }
4933}
4934
4935@media screen and (min-width: 30em) and (max-width: 60em) {
4936 .ttc-m { text-transform: capitalize; }
4937 .ttl-m { text-transform: lowercase; }
4938 .ttu-m { text-transform: uppercase; }
4939 .ttn-m { text-transform: none; }
4940}
4941
4942@media screen and (min-width: 60em) {
4943 .ttc-l { text-transform: capitalize; }
4944 .ttl-l { text-transform: lowercase; }
4945 .ttu-l { text-transform: uppercase; }
4946 .ttn-l { text-transform: none; }
4947}
4948
4949/*
4950
4951 TYPE SCALE
4952 Docs: http://tachyons.io/docs/typography/scale/
4953
4954 Base:
4955 f = font-size
4956
4957 Modifiers
4958 1 = 1st step in size scale
4959 2 = 2nd step in size scale
4960 3 = 3rd step in size scale
4961 4 = 4th step in size scale
4962 5 = 5th step in size scale
4963 6 = 6th step in size scale
4964 7 = 7th step in size scale
4965
4966 Media Query Extensions:
4967 -ns = not-small
4968 -m = medium
4969 -l = large
4970*/
4971
4972/*
4973 * For Hero/Marketing Titles
4974 *
4975 * These generally are too large for mobile
4976 * so be careful using them on smaller screens.
4977 * */
4978
4979.f-6,
4980.f-headline {
4981 font-size: 6rem;
4982}
4983
4984.f-5,
4985.f-subheadline {
4986 font-size: 5rem;
4987}
4988
4989/* Type Scale */
4990
4991.f1 { font-size: 3rem; }
4992
4993.f2 { font-size: 2.25rem; }
4994
4995.f3 { font-size: 1.5rem; }
4996
4997.f4 { font-size: 1.25rem; }
4998
4999.f5 { font-size: 1rem; }
5000
5001.f6 { font-size: .875rem; }
5002
5003.f7 { font-size: .75rem; }
5004
5005/* Small and hard to read for many people so use with extreme caution */
5006
5007@media screen and (min-width: 30em){
5008 .f-6-ns,
5009 .f-headline-ns { font-size: 6rem; }
5010 .f-5-ns,
5011 .f-subheadline-ns { font-size: 5rem; }
5012 .f1-ns { font-size: 3rem; }
5013 .f2-ns { font-size: 2.25rem; }
5014 .f3-ns { font-size: 1.5rem; }
5015 .f4-ns { font-size: 1.25rem; }
5016 .f5-ns { font-size: 1rem; }
5017 .f6-ns { font-size: .875rem; }
5018 .f7-ns { font-size: .75rem; }
5019}
5020
5021@media screen and (min-width: 30em) and (max-width: 60em) {
5022 .f-6-m,
5023 .f-headline-m { font-size: 6rem; }
5024 .f-5-m,
5025 .f-subheadline-m { font-size: 5rem; }
5026 .f1-m { font-size: 3rem; }
5027 .f2-m { font-size: 2.25rem; }
5028 .f3-m { font-size: 1.5rem; }
5029 .f4-m { font-size: 1.25rem; }
5030 .f5-m { font-size: 1rem; }
5031 .f6-m { font-size: .875rem; }
5032 .f7-m { font-size: .75rem; }
5033}
5034
5035@media screen and (min-width: 60em) {
5036 .f-6-l,
5037 .f-headline-l {
5038 font-size: 6rem;
5039 }
5040 .f-5-l,
5041 .f-subheadline-l {
5042 font-size: 5rem;
5043 }
5044 .f1-l { font-size: 3rem; }
5045 .f2-l { font-size: 2.25rem; }
5046 .f3-l { font-size: 1.5rem; }
5047 .f4-l { font-size: 1.25rem; }
5048 .f5-l { font-size: 1rem; }
5049 .f6-l { font-size: .875rem; }
5050 .f7-l { font-size: .75rem; }
5051}
5052
5053/*
5054
5055 TYPOGRAPHY
5056 http://tachyons.io/docs/typography/measure/
5057
5058 Media Query Extensions:
5059 -ns = not-small
5060 -m = medium
5061 -l = large
5062
5063*/
5064
5065/* Measure is limited to ~66 characters */
5066
5067.measure {
5068 max-width: 30em;
5069}
5070
5071/* Measure is limited to ~80 characters */
5072
5073.measure-wide {
5074 max-width: 34em;
5075}
5076
5077/* Measure is limited to ~45 characters */
5078
5079.measure-narrow {
5080 max-width: 20em;
5081}
5082
5083/* Book paragraph style - paragraphs are indented with no vertical spacing. */
5084
5085.indent {
5086 text-indent: 1em;
5087 margin-top: 0;
5088 margin-bottom: 0;
5089}
5090
5091.small-caps {
5092 -webkit-font-feature-settings: "c2sc";
5093 font-feature-settings: "c2sc";
5094 font-variant: small-caps;
5095}
5096
5097/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */
5098
5099.truncate {
5100 white-space: nowrap;
5101 overflow: hidden;
5102 text-overflow: ellipsis;
5103}
5104
5105@media screen and (min-width: 30em) {
5106 .measure-ns {
5107 max-width: 30em;
5108 }
5109 .measure-wide-ns {
5110 max-width: 34em;
5111 }
5112 .measure-narrow-ns {
5113 max-width: 20em;
5114 }
5115 .indent-ns {
5116 text-indent: 1em;
5117 margin-top: 0;
5118 margin-bottom: 0;
5119 }
5120 .small-caps-ns {
5121 -webkit-font-feature-settings: "c2sc";
5122 font-feature-settings: "c2sc";
5123 font-variant: small-caps;
5124 }
5125 .truncate-ns {
5126 white-space: nowrap;
5127 overflow: hidden;
5128 text-overflow: ellipsis;
5129 }
5130}
5131
5132@media screen and (min-width: 30em) and (max-width: 60em) {
5133 .measure-m {
5134 max-width: 30em;
5135 }
5136 .measure-wide-m {
5137 max-width: 34em;
5138 }
5139 .measure-narrow-m {
5140 max-width: 20em;
5141 }
5142 .indent-m {
5143 text-indent: 1em;
5144 margin-top: 0;
5145 margin-bottom: 0;
5146 }
5147 .small-caps-m {
5148 -webkit-font-feature-settings: "c2sc";
5149 font-feature-settings: "c2sc";
5150 font-variant: small-caps;
5151 }
5152 .truncate-m {
5153 white-space: nowrap;
5154 overflow: hidden;
5155 text-overflow: ellipsis;
5156 }
5157}
5158
5159@media screen and (min-width: 60em) {
5160 .measure-l {
5161 max-width: 30em;
5162 }
5163 .measure-wide-l {
5164 max-width: 34em;
5165 }
5166 .measure-narrow-l {
5167 max-width: 20em;
5168 }
5169 .indent-l {
5170 text-indent: 1em;
5171 margin-top: 0;
5172 margin-bottom: 0;
5173 }
5174 .small-caps-l {
5175 -webkit-font-feature-settings: "c2sc";
5176 font-feature-settings: "c2sc";
5177 font-variant: small-caps;
5178 }
5179 .truncate-l {
5180 white-space: nowrap;
5181 overflow: hidden;
5182 text-overflow: ellipsis;
5183 }
5184}
5185
5186/*
5187
5188 UTILITIES
5189
5190 Media Query Extensions:
5191 -ns = not-small
5192 -m = medium
5193 -l = large
5194
5195*/
5196
5197/* Equivalent to .overflow-y-scroll */
5198
5199.overflow-container {
5200 overflow-y: scroll;
5201}
5202
5203.center {
5204 margin-right: auto;
5205 margin-left: auto;
5206}
5207
5208.mr-auto { margin-right: auto; }
5209
5210.ml-auto { margin-left: auto; }
5211
5212@media screen and (min-width: 30em){
5213 .center-ns {
5214 margin-right: auto;
5215 margin-left: auto;
5216 }
5217 .mr-auto-ns { margin-right: auto; }
5218 .ml-auto-ns { margin-left: auto; }
5219}
5220
5221@media screen and (min-width: 30em) and (max-width: 60em){
5222 .center-m {
5223 margin-right: auto;
5224 margin-left: auto;
5225 }
5226 .mr-auto-m { margin-right: auto; }
5227 .ml-auto-m { margin-left: auto; }
5228}
5229
5230@media screen and (min-width: 60em){
5231 .center-l {
5232 margin-right: auto;
5233 margin-left: auto;
5234 }
5235 .mr-auto-l { margin-right: auto; }
5236 .ml-auto-l { margin-left: auto; }
5237}
5238
5239/*
5240
5241 VISIBILITY
5242
5243 Media Query Extensions:
5244 -ns = not-small
5245 -m = medium
5246 -l = large
5247
5248*/
5249
5250/*
5251 Text that is hidden but accessible
5252 Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
5253*/
5254
5255.clip {
5256 position: fixed !important;
5257 _position: absolute !important;
5258 clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
5259 clip: rect(1px, 1px, 1px, 1px);
5260}
5261
5262@media screen and (min-width: 30em) {
5263 .clip-ns {
5264 position: fixed !important;
5265 _position: absolute !important;
5266 clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
5267 clip: rect(1px, 1px, 1px, 1px);
5268 }
5269}
5270
5271@media screen and (min-width: 30em) and (max-width: 60em) {
5272 .clip-m {
5273 position: fixed !important;
5274 _position: absolute !important;
5275 clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
5276 clip: rect(1px, 1px, 1px, 1px);
5277 }
5278}
5279
5280@media screen and (min-width: 60em) {
5281 .clip-l {
5282 position: fixed !important;
5283 _position: absolute !important;
5284 clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
5285 clip: rect(1px, 1px, 1px, 1px);
5286 }
5287}
5288
5289/*
5290
5291 WHITE SPACE
5292
5293 Media Query Extensions:
5294 -ns = not-small
5295 -m = medium
5296 -l = large
5297
5298*/
5299
5300.ws-normal { white-space: normal; }
5301
5302.nowrap { white-space: nowrap; }
5303
5304.pre { white-space: pre; }
5305
5306@media screen and (min-width: 30em) {
5307 .ws-normal-ns { white-space: normal; }
5308 .nowrap-ns { white-space: nowrap; }
5309 .pre-ns { white-space: pre; }
5310}
5311
5312@media screen and (min-width: 30em) and (max-width: 60em) {
5313 .ws-normal-m { white-space: normal; }
5314 .nowrap-m { white-space: nowrap; }
5315 .pre-m { white-space: pre; }
5316}
5317
5318@media screen and (min-width: 60em) {
5319 .ws-normal-l { white-space: normal; }
5320 .nowrap-l { white-space: nowrap; }
5321 .pre-l { white-space: pre; }
5322}
5323
5324/*
5325
5326 VERTICAL ALIGN
5327
5328 Media Query Extensions:
5329 -ns = not-small
5330 -m = medium
5331 -l = large
5332
5333*/
5334
5335.v-base { vertical-align: baseline; }
5336
5337.v-mid { vertical-align: middle; }
5338
5339.v-top { vertical-align: top; }
5340
5341.v-btm { vertical-align: bottom; }
5342
5343@media screen and (min-width: 30em) {
5344 .v-base-ns { vertical-align: baseline; }
5345 .v-mid-ns { vertical-align: middle; }
5346 .v-top-ns { vertical-align: top; }
5347 .v-btm-ns { vertical-align: bottom; }
5348}
5349
5350@media screen and (min-width: 30em) and (max-width: 60em) {
5351 .v-base-m { vertical-align: baseline; }
5352 .v-mid-m { vertical-align: middle; }
5353 .v-top-m { vertical-align: top; }
5354 .v-btm-m { vertical-align: bottom; }
5355}
5356
5357@media screen and (min-width: 60em) {
5358 .v-base-l { vertical-align: baseline; }
5359 .v-mid-l { vertical-align: middle; }
5360 .v-top-l { vertical-align: top; }
5361 .v-btm-l { vertical-align: bottom; }
5362}
5363
5364/*
5365
5366 HOVER EFFECTS
5367 Docs: http://tachyons.io/docs/themes/hovers/
5368
5369 - Dim
5370 - Glow
5371 - Hide Child
5372 - Underline text
5373 - Grow
5374 - Pointer
5375 - Shadow
5376
5377*/
5378
5379/*
5380
5381 Dim element on hover by adding the dim class.
5382
5383*/
5384
5385.dim {
5386 opacity: 1;
5387 transition: opacity .15s ease-in;
5388}
5389
5390.dim:hover,
5391.dim:focus {
5392 opacity: .5;
5393 transition: opacity .15s ease-in;
5394}
5395
5396.dim:active {
5397 opacity: .8; transition: opacity .15s ease-out;
5398}
5399
5400/*
5401
5402 Animate opacity to 100% on hover by adding the glow class.
5403
5404*/
5405
5406.glow {
5407 transition: opacity .15s ease-in;
5408}
5409
5410.glow:hover,
5411.glow:focus {
5412 opacity: 1;
5413 transition: opacity .15s ease-in;
5414}
5415
5416/*
5417
5418 Hide child & reveal on hover:
5419
5420 Put the hide-child class on a parent element and any nested element with the
5421 child class will be hidden and displayed on hover or focus.
5422
5423 <div class="hide-child">
5424 <div class="child"> Hidden until hover or focus </div>
5425 <div class="child"> Hidden until hover or focus </div>
5426 <div class="child"> Hidden until hover or focus </div>
5427 <div class="child"> Hidden until hover or focus </div>
5428 </div>
5429*/
5430
5431.hide-child .child {
5432 opacity: 0;
5433 transition: opacity .15s ease-in;
5434}
5435
5436.hide-child:hover .child,
5437.hide-child:focus .child,
5438.hide-child:active .child {
5439 opacity: 1;
5440 transition: opacity .15s ease-in;
5441}
5442
5443.underline-hover:hover,
5444.underline-hover:focus {
5445 text-decoration: underline;
5446}
5447
5448/* Can combine this with overflow-hidden to make background images grow on hover
5449 * even if you are using background-size: cover */
5450
5451.grow {
5452 -moz-osx-font-smoothing: grayscale;
5453 -webkit-backface-visibility: hidden;
5454 backface-visibility: hidden;
5455 -webkit-transform: translateZ(0);
5456 transform: translateZ(0);
5457 transition: -webkit-transform 0.25s ease-out;
5458 transition: transform 0.25s ease-out;
5459 transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
5460}
5461
5462.grow:hover,
5463.grow:focus {
5464 -webkit-transform: scale(1.05);
5465 transform: scale(1.05);
5466}
5467
5468.grow:active {
5469 -webkit-transform: scale(.90);
5470 transform: scale(.90);
5471}
5472
5473.grow-large {
5474 -moz-osx-font-smoothing: grayscale;
5475 -webkit-backface-visibility: hidden;
5476 backface-visibility: hidden;
5477 -webkit-transform: translateZ(0);
5478 transform: translateZ(0);
5479 transition: -webkit-transform .25s ease-in-out;
5480 transition: transform .25s ease-in-out;
5481 transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out;
5482}
5483
5484.grow-large:hover,
5485.grow-large:focus {
5486 -webkit-transform: scale(1.2);
5487 transform: scale(1.2);
5488}
5489
5490.grow-large:active {
5491 -webkit-transform: scale(.95);
5492 transform: scale(.95);
5493}
5494
5495/* Add pointer on hover */
5496
5497.pointer:hover {
5498 cursor: pointer;
5499}
5500
5501/*
5502 Add shadow on hover.
5503
5504 Performant box-shadow animation pattern from
5505 http://tobiasahlin.com/blog/how-to-animate-box-shadow/
5506*/
5507
5508.shadow-hover {
5509 cursor: pointer;
5510 position: relative;
5511 transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
5512}
5513
5514.shadow-hover::after {
5515 content: '';
5516 box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, .2);
5517 border-radius: inherit;
5518 opacity: 0;
5519 position: absolute;
5520 top: 0;
5521 left: 0;
5522 width: 100%;
5523 height: 100%;
5524 z-index: -1;
5525 transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
5526}
5527
5528.shadow-hover:hover::after,
5529.shadow-hover:focus::after {
5530 opacity: 1;
5531}
5532
5533/* Combine with classes in skins and skins-pseudo for
5534 * many different transition possibilities. */
5535
5536.bg-animate,
5537.bg-animate:hover,
5538.bg-animate:focus {
5539 transition: background-color .15s ease-in-out;
5540}
5541
5542/*
5543
5544 Z-INDEX
5545
5546 Base
5547 z = z-index
5548
5549 Modifiers
5550 -0 = literal value 0
5551 -1 = literal value 1
5552 -2 = literal value 2
5553 -3 = literal value 3
5554 -4 = literal value 4
5555 -5 = literal value 5
5556 -999 = literal value 999
5557 -9999 = literal value 9999
5558
5559 -max = largest accepted z-index value as integer
5560
5561 -inherit = string value inherit
5562 -initial = string value initial
5563 -unset = string value unset
5564
5565 MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
5566 Spec: http://www.w3.org/TR/CSS2/zindex.html
5567 Articles:
5568 https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
5569
5570 Tips on extending:
5571 There might be a time worth using negative z-index values.
5572 Or if you are using tachyons with another project, you might need to
5573 adjust these values to suit your needs.
5574
5575*/
5576
5577.z-0 { z-index: 0; }
5578
5579.z-1 { z-index: 1; }
5580
5581.z-2 { z-index: 2; }
5582
5583.z-3 { z-index: 3; }
5584
5585.z-4 { z-index: 4; }
5586
5587.z-5 { z-index: 5; }
5588
5589.z-999 { z-index: 999; }
5590
5591.z-9999 { z-index: 9999; }
5592
5593.z-max {
5594 z-index: 2147483647;
5595}
5596
5597.z-inherit { z-index: inherit; }
5598
5599.z-initial { z-index: auto; z-index: initial; }
5600
5601.z-unset { z-index: unset; }
5602
5603/*
5604
5605 NESTED
5606 Tachyons module for styling nested elements
5607 that are generated by a cms.
5608
5609*/
5610
5611.nested-copy-line-height p,
5612.nested-copy-line-height ul,
5613.nested-copy-line-height ol {
5614 line-height: 1.5;
5615}
5616
5617.nested-headline-line-height h1,
5618.nested-headline-line-height h2,
5619.nested-headline-line-height h3,
5620.nested-headline-line-height h4,
5621.nested-headline-line-height h5,
5622.nested-headline-line-height h6 {
5623 line-height: 1.25;
5624}
5625
5626.nested-list-reset ul,
5627.nested-list-reset ol {
5628 padding-left: 0;
5629 margin-left: 0;
5630 list-style-type: none;
5631}
5632
5633.nested-copy-indent p+p {
5634 text-indent: 1em;
5635 margin-top: 0;
5636 margin-bottom: 0;
5637}
5638
5639.nested-copy-separator p+p {
5640 margin-top: 1.5em;
5641}
5642
5643.nested-img img {
5644 width: 100%;
5645 max-width: 100%;
5646 display: block;
5647}
5648
5649.nested-links a {
5650 color: #357edd;
5651 transition: color .15s ease-in;
5652}
5653
5654.nested-links a:hover,
5655.nested-links a:focus {
5656 color: #96ccff;
5657 transition: color .15s ease-in;
5658}
5659
5660/*
5661
5662 STYLES
5663
5664 Add custom styles here.
5665
5666*/
5667
5668/* Variables */
5669
5670/* Importing here will allow you to override any variables in the modules */
5671
5672/*
5673
5674 Tachyons
5675 COLOR VARIABLES
5676
5677 Grayscale
5678 - Solids
5679 - Transparencies
5680 Colors
5681
5682*/
5683
5684/*
5685
5686 CUSTOM MEDIA QUERIES
5687
5688 Media query values can be changed to fit your own content.
5689 There are no magic bullets when it comes to media query width values.
5690 They should be declared in em units - and they should be set to meet
5691 the needs of your content. You can also add additional media queries,
5692 or remove some of the existing ones.
5693
5694 These media queries can be referenced like so:
5695
5696 @media (--breakpoint-not-small) {
5697 .medium-and-larger-specific-style {
5698 background-color: red;
5699 }
5700 }
5701
5702 @media (--breakpoint-medium) {
5703 .medium-screen-specific-style {
5704 background-color: red;
5705 }
5706 }
5707
5708 @media (--breakpoint-large) {
5709 .large-and-larger-screen-specific-style {
5710 background-color: red;
5711 }
5712 }
5713
5714*/
5715
5716/* Media Queries */
5717
5718/* Debugging */
5719
5720/* @import 'tachyons/src/_debug-children';
5721@import 'tachyons/src/_debug-grid'; */
5722
5723/* Uncomment out the line below to help debug layout issues */
5724
5725/* @import 'tachyons/src/_debug'; */
5726
5727pre, .pre {
5728 overflow-x: auto;
5729 overflow-y: hidden;
5730 overflow: scroll;
5731}
5732
5733pre code {
5734 display: block;
5735 padding: 1.5em 1.5em;
5736 white-space: pre;
5737 font-size: .875rem;
5738 line-height: 2;
5739
5740}
5741
5742pre {
5743 background-color: #222;
5744 color: #ddd;
5745 white-space: pre;
5746
5747 -webkit-hyphens: none;
5748
5749 -ms-hyphens: none;
5750
5751 hyphens: none;
5752 position: relative;
5753}
5754
5755/* pagination.html: https://github.com/spf13/hugo/blob/master/tpl/tplimpl/template_embedded.go#L117 */
5756
5757.pagination {
5758 margin: 3rem 0;
5759}
5760
5761.pagination li {
5762 display: inline-block;
5763 margin-right: .375rem;
5764 font-size: .875rem;
5765 margin-bottom: 2.5em;
5766}
5767
5768.pagination li a {
5769 padding: .5rem .625rem;
5770 background-color: white;
5771 color: #333;
5772 border: 1px solid #ddd;
5773 border-radius: 3px;
5774 text-decoration: none;
5775}
5776
5777.pagination li.disabled {
5778 display: none;
5779}
5780
5781.pagination li.active a:link,
5782.pagination li.active a:active,
5783.pagination li.active a:visited {
5784 background-color: #ddd;
5785}
5786
5787#TableOfContents ul li {
5788 margin-bottom: 1em;
5789}
5790
5791.facebook, .twitter, .instagram, .youtube, .github, .gitlab, .keybase, .linkedin, .medium, .mastodon, .slack, .stackoverflow, .rss {
5792 fill: #BABABA;
5793}
5794
5795.new-window {
5796 opacity: 0;
5797 display: inline-block;
5798 vertical-align: top;
5799}
5800
5801.link-transition:hover .new-window{
5802 opacity: 1;
5803}
5804
5805.facebook:hover {
5806 fill: #3b5998;
5807}
5808
5809.twitter:hover {
5810 fill: #1da1f2;
5811}
5812
5813.instagram:hover {
5814 fill: #e1306c;
5815}
5816
5817.youtube:hover {
5818 fill: #cd201f;
5819}
5820
5821.github:hover {
5822 fill: #6cc644;
5823}
5824
5825.gitlab:hover {
5826 fill: #FC6D26;
5827}
5828
5829.keybase:hover {
5830 fill: #3d76ff;
5831}
5832
5833.linkedin:hover {
5834 fill: #0077b5
5835}
5836
5837.medium:hover {
5838 fill: #0077b5
5839}
5840
5841.mastodon:hover {
5842 fill: #3088d4;
5843}
5844
5845.slack:hover {
5846 fill: #E01E5A;
5847}
5848
5849.stackoverflow:hover {
5850 fill: #f48024;
5851}
5852
5853.rss:hover{
5854 fill: #ff6f1a;
5855}
5856
5857/* Put your custom styles here and run `npm start` from the "src" directory on */
5858
5859#TableOfContents ul li {
5860 margin-bottom: 1em;
5861}
5862
5863.lh-copy blockquote {
5864 display: block;
5865 font-size: .875em;
5866 margin-left: 2rem;
5867 margin-top: 2rem;
5868 margin-bottom: 2rem;
5869 border-left: 4px solid #ccc;
5870 padding-left: 1rem;
5871
5872}