@charset "UTF-8"; /*------------------* $TOAST-GRID An insane grid. You'd be mad to use it. Usage ===== Assuming default values:
A half-width column.
A quarter, pulled left by its own width. You get this, right?
Customisation ============= $toast-grid-namespace and $toast-grid-column-namespace adjusts the class names for the grid. With default values, grid wrappers have a class of '.grid' and columns '.grid__col'. $toast-col-groups(n) adjusts column divisions. For example, $toast-col-groups(12) will produce a 12-column grid. $col-groups(3,6,8) will produce a 3-, 6-, and 8-column grid. $toast-gutter-width is—you guessed it—the gutter width. Accepts any unit. That's it. Have fun. \*------------------*/ .row { list-style: none; margin-left: -15px; } .col-1-of-1, .col-2-of-2, .col-3-of-3, .col-4-of-4, .col-5-of-5, .col-6-of-6, .col-7-of-7, .col-8-of-8, .col-9-of-9, .col-10-of-10, .col-11-of-11, .col-12-of-12 { width: 100%; } .col-1-of-2, .col-2-of-4, .col-3-of-6, .col-4-of-8, .col-5-of-10, .col-6-of-12 { width: 50%; } .col-1-of-3, .col-2-of-6, .col-3-of-9, .col-4-of-12 { width: 33.33333%; } .col-2-of-3, .col-4-of-6, .col-6-of-9, .col-8-of-12 { width: 66.66667%; } .col-1-of-4, .col-2-of-8, .col-3-of-12 { width: 25%; } .col-3-of-4, .col-6-of-8, .col-9-of-12 { width: 75%; } .col-push-1-of-1, .col-push-2-of-2, .col-push-3-of-3, .col-push-4-of-4, .col-push-5-of-5, .col-push-6-of-6, .col-push-7-of-7, .col-push-8-of-8, .col-push-9-of-9, .col-push-10-of-10, .col-push-11-of-11, .col-push-12-of-12 { margin-left: 100%; } .col-push-1-of-2, .col-push-2-of-4, .col-push-3-of-6, .col-push-4-of-8, .col-push-5-of-10, .col-push-6-of-12 { margin-left: 50%; } .col-push-1-of-3, .col-push-2-of-6, .col-push-3-of-9, .col-push-4-of-12 { margin-left: 33.33333%; } .col-push-2-of-3, .col-push-4-of-6, .col-push-6-of-9, .col-push-8-of-12 { margin-left: 66.66667%; } .col-push-1-of-4, .col-push-2-of-8, .col-push-3-of-12 { margin-left: 25%; } .col-push-3-of-4, .col-push-6-of-8, .col-push-9-of-12 { margin-left: 75%; } .col-pull-1-of-1, .col-pull-2-of-2, .col-pull-3-of-3, .col-pull-4-of-4, .col-pull-5-of-5, .col-pull-6-of-6, .col-pull-7-of-7, .col-pull-8-of-8, .col-pull-9-of-9, .col-pull-10-of-10, .col-pull-11-of-11, .col-pull-12-of-12 { margin-left: -100%; } .col-pull-1-of-2, .col-pull-2-of-4, .col-pull-3-of-6, .col-pull-4-of-8, .col-pull-5-of-10, .col-pull-6-of-12 { margin-left: -50%; } .col-pull-1-of-3, .col-pull-2-of-6, .col-pull-3-of-9, .col-pull-4-of-12 { margin-left: -33.33333%; } .col-pull-2-of-3, .col-pull-4-of-6, .col-pull-6-of-9, .col-pull-8-of-12 { margin-left: -66.66667%; } .col-pull-1-of-4, .col-pull-2-of-8, .col-pull-3-of-12 { margin-left: -25%; } .col-pull-3-of-4, .col-pull-6-of-8, .col-pull-9-of-12 { margin-left: -75%; } .col-1-of-5 { width: 20%; } .col-push-1-of-5 { margin-left: 20%; } .col-pull-1-of-5 { margin-left: -20%; } .col-2-of-5 { width: 40%; } .col-push-2-of-5 { margin-left: 40%; } .col-pull-2-of-5 { margin-left: -40%; } .col-3-of-5 { width: 60%; } .col-push-3-of-5 { margin-left: 60%; } .col-pull-3-of-5 { margin-left: -60%; } .col-4-of-5 { width: 80%; } .col-push-4-of-5 { margin-left: 80%; } .col-pull-4-of-5 { margin-left: -80%; } .col-1-of-6 { width: 16.66667%; } .col-push-1-of-6 { margin-left: 16.66667%; } .col-pull-1-of-6 { margin-left: -16.66667%; } .col-5-of-6 { width: 83.33333%; } .col-push-5-of-6 { margin-left: 83.33333%; } .col-pull-5-of-6 { margin-left: -83.33333%; } .col-1-of-7 { width: 14.28571%; } .col-push-1-of-7 { margin-left: 14.28571%; } .col-pull-1-of-7 { margin-left: -14.28571%; } .col-2-of-7 { width: 28.57143%; } .col-push-2-of-7 { margin-left: 28.57143%; } .col-pull-2-of-7 { margin-left: -28.57143%; } .col-3-of-7 { width: 42.85714%; } .col-push-3-of-7 { margin-left: 42.85714%; } .col-pull-3-of-7 { margin-left: -42.85714%; } .col-4-of-7 { width: 57.14286%; } .col-push-4-of-7 { margin-left: 57.14286%; } .col-pull-4-of-7 { margin-left: -57.14286%; } .col-5-of-7 { width: 71.42857%; } .col-push-5-of-7 { margin-left: 71.42857%; } .col-pull-5-of-7 { margin-left: -71.42857%; } .col-6-of-7 { width: 85.71429%; } .col-push-6-of-7 { margin-left: 85.71429%; } .col-pull-6-of-7 { margin-left: -85.71429%; } .col-1-of-8 { width: 12.5%; } .col-push-1-of-8 { margin-left: 12.5%; } .col-pull-1-of-8 { margin-left: -12.5%; } .col-3-of-8 { width: 37.5%; } .col-push-3-of-8 { margin-left: 37.5%; } .col-pull-3-of-8 { margin-left: -37.5%; } .col-5-of-8 { width: 62.5%; } .col-push-5-of-8 { margin-left: 62.5%; } .col-pull-5-of-8 { margin-left: -62.5%; } .col-7-of-8 { width: 87.5%; } .col-push-7-of-8 { margin-left: 87.5%; } .col-pull-7-of-8 { margin-left: -87.5%; } .col-1-of-9 { width: 11.11111%; } .col-push-1-of-9 { margin-left: 11.11111%; } .col-pull-1-of-9 { margin-left: -11.11111%; } .col-2-of-9 { width: 22.22222%; } .col-push-2-of-9 { margin-left: 22.22222%; } .col-pull-2-of-9 { margin-left: -22.22222%; } .col-4-of-9 { width: 44.44444%; } .col-push-4-of-9 { margin-left: 44.44444%; } .col-pull-4-of-9 { margin-left: -44.44444%; } .col-5-of-9 { width: 55.55556%; } .col-push-5-of-9 { margin-left: 55.55556%; } .col-pull-5-of-9 { margin-left: -55.55556%; } .col-7-of-9 { width: 77.77778%; } .col-push-7-of-9 { margin-left: 77.77778%; } .col-pull-7-of-9 { margin-left: -77.77778%; } .col-8-of-9 { width: 88.88889%; } .col-push-8-of-9 { margin-left: 88.88889%; } .col-pull-8-of-9 { margin-left: -88.88889%; } .col-1-of-10 { width: 10%; } .col-push-1-of-10 { margin-left: 10%; } .col-pull-1-of-10 { margin-left: -10%; } .col-2-of-10 { width: 20%; } .col-push-2-of-10 { margin-left: 20%; } .col-pull-2-of-10 { margin-left: -20%; } .col-3-of-10 { width: 30%; } .col-push-3-of-10 { margin-left: 30%; } .col-pull-3-of-10 { margin-left: -30%; } .col-4-of-10 { width: 40%; } .col-push-4-of-10 { margin-left: 40%; } .col-pull-4-of-10 { margin-left: -40%; } .col-6-of-10 { width: 60%; } .col-push-6-of-10 { margin-left: 60%; } .col-pull-6-of-10 { margin-left: -60%; } .col-7-of-10 { width: 70%; } .col-push-7-of-10 { margin-left: 70%; } .col-pull-7-of-10 { margin-left: -70%; } .col-8-of-10 { width: 80%; } .col-push-8-of-10 { margin-left: 80%; } .col-pull-8-of-10 { margin-left: -80%; } .col-9-of-10 { width: 90%; } .col-push-9-of-10 { margin-left: 90%; } .col-pull-9-of-10 { margin-left: -90%; } .col-1-of-11 { width: 9.09091%; } .col-push-1-of-11 { margin-left: 9.09091%; } .col-pull-1-of-11 { margin-left: -9.09091%; } .col-2-of-11 { width: 18.18182%; } .col-push-2-of-11 { margin-left: 18.18182%; } .col-pull-2-of-11 { margin-left: -18.18182%; } .col-3-of-11 { width: 27.27273%; } .col-push-3-of-11 { margin-left: 27.27273%; } .col-pull-3-of-11 { margin-left: -27.27273%; } .col-4-of-11 { width: 36.36364%; } .col-push-4-of-11 { margin-left: 36.36364%; } .col-pull-4-of-11 { margin-left: -36.36364%; } .col-5-of-11 { width: 45.45455%; } .col-push-5-of-11 { margin-left: 45.45455%; } .col-pull-5-of-11 { margin-left: -45.45455%; } .col-6-of-11 { width: 54.54545%; } .col-push-6-of-11 { margin-left: 54.54545%; } .col-pull-6-of-11 { margin-left: -54.54545%; } .col-7-of-11 { width: 63.63636%; } .col-push-7-of-11 { margin-left: 63.63636%; } .col-pull-7-of-11 { margin-left: -63.63636%; } .col-8-of-11 { width: 72.72727%; } .col-push-8-of-11 { margin-left: 72.72727%; } .col-pull-8-of-11 { margin-left: -72.72727%; } .col-9-of-11 { width: 81.81818%; } .col-push-9-of-11 { margin-left: 81.81818%; } .col-pull-9-of-11 { margin-left: -81.81818%; } .col-10-of-11 { width: 90.90909%; } .col-push-10-of-11 { margin-left: 90.90909%; } .col-pull-10-of-11 { margin-left: -90.90909%; } .col-1-of-12 { width: 8.33333%; } .col-push-1-of-12 { margin-left: 8.33333%; } .col-pull-1-of-12 { margin-left: -8.33333%; } .col-2-of-12 { width: 16.66667%; } .col-push-2-of-12 { margin-left: 16.66667%; } .col-pull-2-of-12 { margin-left: -16.66667%; } .col-5-of-12 { width: 41.66667%; } .col-push-5-of-12 { margin-left: 41.66667%; } .col-pull-5-of-12 { margin-left: -41.66667%; } .col-7-of-12 { width: 58.33333%; } .col-push-7-of-12 { margin-left: 58.33333%; } .col-pull-7-of-12 { margin-left: -58.33333%; } .col-10-of-12 { width: 83.33333%; } .col-push-10-of-12 { margin-left: 83.33333%; } .col-pull-10-of-12 { margin-left: -83.33333%; } .col-11-of-12 { width: 91.66667%; } .col-push-11-of-12 { margin-left: 91.66667%; } .col-pull-11-of-12 { margin-left: -91.66667%; } .col { box-sizing: border-box; display: inline-block; margin-right: -.25em; min-height: 1px; padding-left: 15px; vertical-align: top; } @media (max-width: 700px) { .col { display: block; margin-left: 0; margin-right: 0; width: auto; } } @media (max-width: 700px) and (min-width: 480px) { .col[class*="col-m-"] { display: inline-block; margin-right: -.24em; } .col.col-m-1-of-2, .col.col-m-2-of-4 { width: 50%; } .col.col-m-1-of-3 { width: 33.33333%; } .col.col-m-2-of-3 { width: 66.66667%; } .col.col-m-1-of-4 { width: 25%; } .col.col-m-3-of-4 { width: 75%; } } @media (max-width: 480px) { .col[class*="col-s-"] { display: inline-block; margin-right: -.24em; } .col.col-s-1-of-2, .col.col-s-2-of-4 { width: 50%; } .col.col-s-1-of-3 { width: 33.33333%; } .col.col-s-2-of-3 { width: 66.66667%; } .col.col-s-1-of-4 { width: 25%; } .col.col-s-3-of-4 { width: 75%; } } .col-centered { display: block; margin-left: auto; margin-right: auto; } .col-d-first { float: left; } .col-d-last { float: right; } .row-no-gutter { margin-left: 0; width: 100%; } .row-no-gutter .col { padding-left: 0; } .row-no-gutter .col-span-all { margin-left: 0; width: 100%; } .col-ab { vertical-align: bottom; } .col-am { vertical-align: middle; }