mirror of
https://github.com/tachyons-css/tachyons.git
synced 2026-02-06 15:51:45 +00:00
1752 lines
55 KiB
CSS
1752 lines
55 KiB
CSS
/* normalize.css v2.1.2 | MIT License | git.io/normalize */
|
|
/* ========================================================================== HTML5 display definitions ========================================================================== */
|
|
/** Correct `block` display not defined in IE 8/9. */
|
|
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
|
|
|
|
/** Correct `inline-block` display not defined in IE 8/9. */
|
|
audio, canvas, video { display: inline-block; }
|
|
|
|
/** Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */
|
|
audio:not([controls]) { display: none; height: 0; }
|
|
|
|
/** Address `[hidden]` styling not present in IE 8/9. Hide the `template` element in IE, Safari, and Firefox < 22. */
|
|
[hidden], template { display: none; }
|
|
|
|
/* ========================================================================== Base ========================================================================== */
|
|
/** 1. Set default font family to sans-serif. 2. Prevent iOS text size adjust after orientation change, without disabling user zoom. */
|
|
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }
|
|
|
|
/** Remove default margin. */
|
|
body { margin: 0; }
|
|
|
|
/* ========================================================================== Links ========================================================================== */
|
|
/** Remove the gray background color from active links in IE 10. */
|
|
a { background: transparent; }
|
|
|
|
/** Address `outline` inconsistency between Chrome and other browsers. */
|
|
a:focus { outline: thin dotted; }
|
|
|
|
/** Improve readability when focused and also mouse hovered in all browsers. */
|
|
a:active, a:hover { outline: 0; }
|
|
|
|
/* ========================================================================== Typography ========================================================================== */
|
|
/** Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari 5, and Chrome. */
|
|
h1 { margin: 0.67em 0; }
|
|
|
|
/** Address styling not present in IE 8/9, Safari 5, and Chrome. */
|
|
abbr[title] { border-bottom: 1px dotted; }
|
|
|
|
/** Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */
|
|
b, strong { font-weight: bold; }
|
|
|
|
/** Address styling not present in Safari 5 and Chrome. */
|
|
dfn { font-style: italic; }
|
|
|
|
/** Address differences between Firefox and other browsers. */
|
|
hr { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; }
|
|
|
|
/** Address styling not present in IE 8/9. */
|
|
mark { background: #ff0; color: #000; }
|
|
|
|
/** Correct font family set oddly in Safari 5 and Chrome. */
|
|
code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }
|
|
|
|
/** Improve readability of pre-formatted text in all browsers. */
|
|
pre { white-space: pre-wrap; }
|
|
|
|
/** Set consistent quote types. */
|
|
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
|
|
|
|
/** Address inconsistent and variable font size in all browsers. */
|
|
small { font-size: 80%; }
|
|
|
|
/** Prevent `sub` and `sup` affecting `line-height` in all browsers. */
|
|
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
|
|
|
|
sup { top: -0.5em; }
|
|
|
|
sub { bottom: -0.25em; }
|
|
|
|
/* ========================================================================== Embedded content ========================================================================== */
|
|
/** Remove border when inside `a` element in IE 8/9. */
|
|
img { border: 0; }
|
|
|
|
/** Correct overflow displayed oddly in IE 9. */
|
|
svg:not(:root) { overflow: hidden; }
|
|
|
|
/* ========================================================================== Figures ========================================================================== */
|
|
/** Address margin not present in IE 8/9 and Safari 5. */
|
|
figure { margin: 0; }
|
|
|
|
/* ========================================================================== Forms ========================================================================== */
|
|
/** Define consistent border, margin, and padding. */
|
|
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
|
|
|
|
/** 1. Correct `color` not being inherited in IE 8/9. 2. Remove padding so people aren't caught out if they zero out fieldsets. */
|
|
legend { border: 0; /* 1 */ padding: 0; /* 2 */ }
|
|
|
|
/** 1. Correct font family not being inherited in all browsers. 2. Correct font size not being inherited in all browsers. 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */
|
|
button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ }
|
|
|
|
/** Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */
|
|
button, input { line-height: normal; }
|
|
|
|
/** Address inconsistent `text-transform` inheritance for `button` and `select`. All other form control elements do not inherit `text-transform` values. Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. Correct `select` style inheritance in Firefox 4+ and Opera. */
|
|
button, select { text-transform: none; }
|
|
|
|
/** 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Correct inability to style clickable `input` types in iOS. 3. Improve usability and consistency of cursor style between image-type `input` and others. */
|
|
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }
|
|
|
|
/** Re-set default cursor for disabled elements. */
|
|
button[disabled], html input[disabled] { cursor: default; }
|
|
|
|
/** 1. Address box sizing set to `content-box` in IE 8/9. 2. Remove excess padding in IE 8/9. */
|
|
input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }
|
|
|
|
/** 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome (include `-moz` to future-proof). */
|
|
input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; }
|
|
|
|
/** Remove inner padding and search cancel button in Safari 5 and Chrome on OS X. */
|
|
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
|
|
|
|
/** Remove inner padding and border in Firefox 4+. */
|
|
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
|
|
|
|
/** 1. Remove default vertical scrollbar in IE 8/9. 2. Improve readability and alignment in all browsers. */
|
|
textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ }
|
|
|
|
/* ========================================================================== Tables ========================================================================== */
|
|
/** Remove most spacing between table cells. */
|
|
table { border-collapse: collapse; border-spacing: 0; }
|
|
|
|
/*
|
|
QUERIES
|
|
|
|
*/
|
|
/* Mixing for mobile first queries. Two breakpoints. Use like @include break(medium) { ***Styles*** } */
|
|
/*
|
|
COLORS
|
|
|
|
*/
|
|
/* variables */
|
|
/*
|
|
BACKGROUND SIZE
|
|
|
|
*/
|
|
.bg-cv { -webkit-background-size: cover; background-size: cover; }
|
|
|
|
.bg-cn { -webkit-background-size: contain; background-size: contain; }
|
|
|
|
.bg-auto { -webkit-background-size: auto; background-size: auto; }
|
|
|
|
@media screen and (min-width: 48em) { .bg-cv-ns { -webkit-background-size: cover; background-size: cover; }
|
|
.bg-cn-ns { -webkit-background-size: contain; background-size: contain; }
|
|
.bg-auto-ns { -webkit-background-size: auto; background-size: auto; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .bg-cv-m { -webkit-background-size: cover; background-size: cover; }
|
|
.bg-cn-m { -webkit-background-size: contain; background-size: contain; }
|
|
.bg-auto-m { -webkit-background-size: auto; background-size: auto; } }
|
|
@media screen and (min-width: 64em) { .bg-cv-l { -webkit-background-size: cover; background-size: cover; }
|
|
.bg-cn-l { -webkit-background-size: contain; background-size: contain; }
|
|
.bg-auto-l { -webkit-background-size: auto; background-size: auto; } }
|
|
/*
|
|
BORDER COLORS
|
|
*/
|
|
.b--black { border-color: black; }
|
|
|
|
.b--near-black { border-color: #111111; }
|
|
|
|
.b--dark-gray { border-color: #333333; }
|
|
|
|
.b--mid-gray { border-color: #666666; }
|
|
|
|
.b--gray { border-color: #888888; }
|
|
|
|
.b--silver { border-color: #999999; }
|
|
|
|
.b--light-silver { border-color: #aaaaaa; }
|
|
|
|
.b--light-gray { border-color: #cccccc; }
|
|
|
|
.b--near-white { border-color: #eeeeee; }
|
|
|
|
.b--white { border-color: white; }
|
|
|
|
.b--aqua { border-color: #7fdbff; }
|
|
|
|
.b--blue { border-color: #0074d9; }
|
|
|
|
.b--navy { border-color: #001f3f; }
|
|
|
|
.b--teal { border-color: #39cccc; }
|
|
|
|
.b--green { border-color: #2ecc40; }
|
|
|
|
.b--olive { border-color: #3d9970; }
|
|
|
|
.b--lime { border-color: #01ff70; }
|
|
|
|
.b--yellow { border-color: #ffdc00; }
|
|
|
|
.b--orange { border-color: #ff851b; }
|
|
|
|
.b--red { border-color: #ff4136; }
|
|
|
|
.b--fuchsia { border-color: #f012be; }
|
|
|
|
.b--purple { border-color: #b10dc9; }
|
|
|
|
.b--maroon { border-color: #85144b; }
|
|
|
|
/*
|
|
BORDER RADIUS
|
|
|
|
*/
|
|
.brn { border-radius: 0; }
|
|
|
|
.br { border-radius: .125rem; }
|
|
|
|
.br2 { border-radius: .25rem; }
|
|
|
|
.br3 { border-radius: .5rem; }
|
|
|
|
.br4 { border-radius: 1rem; }
|
|
|
|
.br5 { border-radius: 2rem; }
|
|
|
|
.br-circ { border-radius: 9999px; }
|
|
|
|
.br-100 { border-radius: 100%; }
|
|
|
|
@media screen and (min-width: 48em) { .brn-ns { border-radius: 0; }
|
|
.br-ns { border-radius: .125rem; }
|
|
.br2-ns { border-radius: .25rem; }
|
|
.br3-ns { border-radius: .5rem; }
|
|
.br4-ns { border-radius: 1rem; }
|
|
.br5-ns { border-radius: 2rem; }
|
|
.br-circ-ns { border-radius: 9999px; }
|
|
.br-100-ns { border-radius: 100%; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .brn-m { border-radius: 0; }
|
|
.br-m { border-radius: .125rem; }
|
|
.br2-m { border-radius: .25rem; }
|
|
.br3-m { border-radius: .5rem; }
|
|
.br4-m { border-radius: 1rem; }
|
|
.br5-m { border-radius: 2rem; }
|
|
.br-circ-m { border-radius: 9999px; }
|
|
.br-100-m { border-radius: 100%; } }
|
|
@media screen and (min-width: 64em) { .brn-l { border-radius: 0; }
|
|
.br-l { border-radius: .125rem; }
|
|
.br2-l { border-radius: .25rem; }
|
|
.br3-l { border-radius: .5rem; }
|
|
.br4-l { border-radius: 1rem; }
|
|
.br5-l { border-radius: 2rem; }
|
|
.br-circ-l { border-radius: 9999px; }
|
|
.br-100-l { border-radius: 100%; } }
|
|
/*
|
|
BORDER STYLES
|
|
*/
|
|
.bs-none { border-style: none; }
|
|
|
|
.bs-dotted { border-style: dotted; }
|
|
|
|
.bs-solid { border-style: solid; }
|
|
|
|
@media screen and (min-width: 48em) { .bs-none-ns { border-style: none; }
|
|
.bs-dotted-ns { border-style: dotted; }
|
|
.bs-solid-ns { border-style: solid; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .bs-none-m { border-style: none; }
|
|
.bs-dotted-m { border-style: dotted; }
|
|
.bs-solid-m { border-style: solid; } }
|
|
@media screen and (min-width: 64em) { .bs-none-l { border-style: none; }
|
|
.bs-dotted-l { border-style: dotted; }
|
|
.bs-solid-l { border-style: solid; } }
|
|
/* BORDER WIDTHS
|
|
LEGEND
|
|
b = border w = width
|
|
0-5 = step in sizing scale
|
|
|
|
*/
|
|
.bw0 { border-width: 0; }
|
|
|
|
.bw1 { border-width: .125rem; }
|
|
|
|
.bw2 { border-width: .25rem; }
|
|
|
|
.bw3 { border-width: .5rem; }
|
|
|
|
.bw4 { border-width: .75rem; }
|
|
|
|
.bw5 { border-width: 1rem; }
|
|
|
|
/*
|
|
BORDER BASE
|
|
Legend
|
|
a = all t = top r = right b = bottom l = left
|
|
|
|
*/
|
|
.ba { border-style: solid; border-width: 1px; }
|
|
|
|
.bt { border-top-style: solid; border-left-width: 1px; }
|
|
|
|
.br { border-right-style: solid; border-right-width: 1px; }
|
|
|
|
.bb { border-bottom-style: solid; border-bottom-width: 1px; }
|
|
|
|
.bl { border-left-style: solid; border-left-width: 1px; }
|
|
|
|
@media screen and (min-width: 48em) { .ba-ns { border-style: solid; border-width: 1px; }
|
|
.bt-ns { border-top-style: solid; border-left-width: 1px; }
|
|
.br-ns { border-right-style: solid; border-right-width: 1px; }
|
|
.bb-ns { border-bottom-style: solid; border-bottom-width: 1px; }
|
|
.bl-ns { border-left-style: solid; border-left-width: 1px; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .ba-m { border-style: solid; border-width: 1px; }
|
|
.bt-m { border-top-style: solid; border-left-width: 1px; }
|
|
.br-m { border-right-style: solid; border-right-width: 1px; }
|
|
.bb-m { border-bottom-style: solid; border-bottom-width: 1px; }
|
|
.bl-m { border-left-style: solid; border-left-width: 1px; } }
|
|
@media screen and (min-width: 64em) { .ba-l { border-style: solid; border-width: 1px; }
|
|
.bt-l { border-top-style: solid; border-left-width: 1px; }
|
|
.br-l { border-right-style: solid; border-right-width: 1px; }
|
|
.bb-l { border-bottom-style: solid; border-bottom-width: 1px; }
|
|
.bl-l { border-left-style: solid; border-left-width: 1px; } }
|
|
/*
|
|
CLEARS
|
|
|
|
*/
|
|
.cn { clear: none; }
|
|
|
|
.cl { clear: left; }
|
|
|
|
.cr { clear: right; }
|
|
|
|
.cb { clear: both; }
|
|
|
|
/* Nicolas Gallaghers Clearfix solution Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */
|
|
.cf:before, .cf:after { content: " "; display: table; }
|
|
|
|
.cf:after { clear: both; }
|
|
|
|
.cf { *zoom: 1; }
|
|
|
|
/*
|
|
DIMENSION UTILITIES
|
|
|
|
*/
|
|
.wrap { display: block; width: auto !important; }
|
|
|
|
.fill { display: block; overflow: hidden; width: auto !important; }
|
|
|
|
.dbf { display: block; width: 100%; }
|
|
|
|
/*
|
|
DISPLAY
|
|
- Mobile First - Breakpoint: not-small - Breakpoint: medium - Breakpoint: large
|
|
|
|
*/
|
|
.dn { display: none; }
|
|
|
|
.di { display: inline; }
|
|
|
|
.db { display: block; }
|
|
|
|
.dib { display: inline-block; }
|
|
|
|
.dit { display: inline-table; }
|
|
|
|
.dt { display: table; }
|
|
|
|
.dtc { display: table-cell; }
|
|
|
|
.dtcol { display: table-column; }
|
|
|
|
.dtcolg { display: table-column-group; }
|
|
|
|
@media screen and (min-width: 48em) { .dn-ns { display: none; }
|
|
.di-ns { display: inline; }
|
|
.db-ns { display: block; }
|
|
.dib-ns { display: inline-block; }
|
|
.dit-ns { display: inline-table; }
|
|
.dt-ns { display: table; }
|
|
.dtc-ns { display: table-cell; }
|
|
.dtcol-ns { display: table-column; }
|
|
.dtcolg-ns { display: table-column-group; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .dn-m { display: none; }
|
|
.di-m { display: inline; }
|
|
.db-m { display: block; }
|
|
.dib-m { display: inline-block; }
|
|
.dit-m { display: inline-table; }
|
|
.dt-m { display: table; }
|
|
.dtc-m { display: table-cell; }
|
|
.dtcol-m { display: table-column; }
|
|
.dtcolg-m { display: table-column-group; } }
|
|
@media screen and (min-width: 64em) { .dn-l { display: none; }
|
|
.di-l { display: inline; }
|
|
.db-l { display: block; }
|
|
.dib-l { display: inline-block; }
|
|
.dit-l { display: inline-table; }
|
|
.dt-l { display: table; }
|
|
.dtc-l { display: table-cell; }
|
|
.dtcol-l { display: table-column; }
|
|
.dtcolg-l { display: table-column-group; } }
|
|
/*
|
|
FLOATS
|
|
1. Floated elements are automatically rendered as block level elements. Setting floats to display inline will fix the double margin bug in ie6. You know... just in case.
|
|
Legend
|
|
f = float l = left r = right n = none
|
|
|
|
*/
|
|
.fl { float: left; display: inline; }
|
|
|
|
.fr { float: right; display: inline; }
|
|
|
|
.fn { float: none; }
|
|
|
|
@media screen and (min-width: 48em) { .fl-ns { float: left; display: inline; }
|
|
.fr-ns { float: right; display: inline; }
|
|
.fn-ns { float: none; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .fl-m { float: left; display: inline; }
|
|
.fr-m { float: right; display: inline; }
|
|
.fn-m { float: none; } }
|
|
@media screen and (min-width: 64em) { .fl-l { float: left; display: inline; }
|
|
.fr-l { float: right; display: inline; }
|
|
.fn-l { float: none; } }
|
|
/*
|
|
Font Family Groups
|
|
|
|
*/
|
|
.serif { font-family: georgia, serif; }
|
|
|
|
.sans-serif { font-family: 'Source Sans Pro', sans-serif; }
|
|
|
|
.code { font-family: Consolas, monaco, monospace; }
|
|
|
|
.serif-bodini { font-family: "Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif; }
|
|
|
|
.serif-calisto { font-family: "Calisto MT", "Bookman Old Style", Bookman, "Goudy Old Style", Garamond, "Hoefler Text", "Bitstream Charter", Georgia, serif; }
|
|
|
|
.serif-garamond { font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif; }
|
|
|
|
.serif-times { font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif; }
|
|
|
|
/*
|
|
Font Style
|
|
|
|
*/
|
|
.fsn { font-style: normal; }
|
|
|
|
.i { font-style: italic; }
|
|
|
|
/*
|
|
FONT WEIGHT
|
|
|
|
*/
|
|
.fwn { font-weight: normal; }
|
|
|
|
.b { font-weight: bold; }
|
|
|
|
.fw1 { font-weight: 100; }
|
|
|
|
.fw4 { font-weight: 400; }
|
|
|
|
.fw9 { font-weight: 900; }
|
|
|
|
@media screen and (min-width: 48em) { .fwn-ns { font-weight: normal; }
|
|
.b-ns { font-weight: bold; }
|
|
.fw1-ns { font-weight: 100; }
|
|
.fw4-ns { font-weight: 400; }
|
|
.fw9-ns { font-weight: 900; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .fwn-m { font-weight: normal; }
|
|
.b-m { font-weight: bold; }
|
|
.fw1-m { font-weight: 100; }
|
|
.fw4-m { font-weight: 400; }
|
|
.fw9-m { font-weight: 900; } }
|
|
@media screen and (min-width: 64em) { .fwn-l { font-weight: normal; }
|
|
.b-l { font-weight: bold; }
|
|
.fw1-l { font-weight: 100; }
|
|
.fw4-l { font-weight: 400; }
|
|
.fw9-l { font-weight: 900; } }
|
|
/*
|
|
IMAGES
|
|
|
|
*/
|
|
/* Responsive images! */
|
|
img { max-width: 100%; }
|
|
|
|
/*
|
|
LETTER SPACING
|
|
|
|
*/
|
|
.tracked { letter-spacing: .16em; }
|
|
|
|
.tracked-tight { letter-spacing: -.1em; }
|
|
|
|
.mega-tracked { letter-spacing: .3em; }
|
|
|
|
@media screen and (min-width: 48em) { .tracked-ns { letter-spacing: .16em; }
|
|
.tracked-tight-ns { letter-spacing: -.1em; }
|
|
.mega-tracked-ns { letter-spacing: .3em; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .tracked-m { letter-spacing: .16em; }
|
|
.tracked-tight-m { letter-spacing: -.1em; }
|
|
.mega-tracked-m { letter-spacing: .3em; } }
|
|
@media screen and (min-width: 64em) { .tracked-l { letter-spacing: .16em; }
|
|
.tracked-tight-l { letter-spacing: -.1em; }
|
|
.mega-tracked-l { letter-spacing: .3em; } }
|
|
/*
|
|
LINE HEIGHT
|
|
|
|
*/
|
|
.lh { line-height: 1; }
|
|
|
|
.lh-title { line-height: 1.3; }
|
|
|
|
.lh-copy { line-height: 1.6; }
|
|
|
|
@media screen and (min-width: 48em) { .lh-ns { line-height: 1; }
|
|
.lh-title-ns { line-height: 1.3; }
|
|
.lh-copy-ns { line-height: 1.6; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .lh-m { line-height: 1; }
|
|
.lh-title-m { line-height: 1.3; }
|
|
.lh-copy-m { line-height: 1.6; } }
|
|
@media screen and (min-width: 64em) { .lh-l { line-height: 1; }
|
|
.lh-title-l { line-height: 1.3; }
|
|
.lh-copy-l { line-height: 1.6; } }
|
|
/*
|
|
LINKS
|
|
|
|
*/
|
|
.link { text-decoration: none; -webkit-transition: all .4s; transition: all .4s; }
|
|
|
|
.link:link { color: #30BBDB; }
|
|
|
|
.link:visited { color: #2D243B; }
|
|
|
|
.link:hover { color: #004EAB; }
|
|
|
|
.link:active { color: #C4E3E0; }
|
|
|
|
/*
|
|
LISTS
|
|
|
|
*/
|
|
.list { list-style-type: none; }
|
|
|
|
.list--h { list-style-type: none; }
|
|
.list--h .list--h-item { display: inline-block; }
|
|
|
|
@media screen and (min-width: 48em) { .list--h-ns { list-style-type: none; }
|
|
.list--h-ns .list--h-item-ns { display: inline-block; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .list-m { list-style: none; }
|
|
.list--h-m { list-style-type: none; }
|
|
.list--h-m .list--h-item { display: inline-block; } }
|
|
@media screen and (min-width: 64em) { .list-l { list-style-type: none; }
|
|
.list--h-l { list-style-type: none; }
|
|
.list--h-l .list--h-item { display: inline-block; } }
|
|
/*
|
|
MAX WIDTHS
|
|
|
|
*/
|
|
.mx-wi-100 { max-width: 100%; }
|
|
|
|
.mx-wi-75 { max-width: 75%; }
|
|
|
|
.mx-wi-50 { max-width: 50%; }
|
|
|
|
.mx-wi-25 { max-width: 25%; }
|
|
|
|
.mx-wi1 { max-width: 1rem; }
|
|
|
|
.mx-wi2 { max-width: 2rem; }
|
|
|
|
.mx-wi3 { max-width: 4rem; }
|
|
|
|
.mx-wi4 { max-width: 8rem; }
|
|
|
|
.mx-wi5 { max-width: 16rem; }
|
|
|
|
.mx-wi6 { max-width: 32rem; }
|
|
|
|
.mx-wi7 { max-width: 48rem; }
|
|
|
|
.mx-wi8 { max-width: 64rem; }
|
|
|
|
.mx-wi9 { max-width: 96rem; }
|
|
|
|
.mx-wi10 { max-width: 128rem; }
|
|
|
|
.mx-wi-none { max-width: none; }
|
|
|
|
.mx-wi-max { max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; }
|
|
|
|
.mx-wi-min { max-width: -webkit-min-content; max-width: -moz-min-content; max-width: min-content; }
|
|
|
|
.mx-wi-fit { max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; }
|
|
|
|
.mx-wi-fill { max-width: -webkit-fill-available; max-width: -moz-available; max-width: fill-available; }
|
|
|
|
@media screen and (min-width: 48em) { .mx-wi-100-ns { max-width: 100%; }
|
|
.mx-wi-75-ns { max-width: 75%; }
|
|
.mx-wi-50-ns { max-width: 50%; }
|
|
.mx-wi-25-ns { max-width: 25%; }
|
|
.mx-wi1-ns { max-width: 1rem; }
|
|
.mx-wi2-ns { max-width: 2rem; }
|
|
.mx-wi3-ns { max-width: 4rem; }
|
|
.mx-wi4-ns { max-width: 8rem; }
|
|
.mx-wi5-ns { max-width: 16rem; }
|
|
.mx-wi6-ns { max-width: 32rem; }
|
|
.mx-wi7-ns { max-width: 48rem; }
|
|
.mx-wi8-ns { max-width: 64rem; }
|
|
.mx-wi9-ns { max-width: 96rem; }
|
|
.mx-wi10-ns { max-width: 128rem; }
|
|
.mx-wi-none-ns { max-width: none; }
|
|
.mx-wi-max-ns { max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; }
|
|
.mx-wi-min-ns { max-width: -webkit-min-content; max-width: -moz-min-content; max-width: min-content; }
|
|
.mx-wi-fit-ns { max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; }
|
|
.mx-wi-fill-ns { max-width: -webkit-fill-available; max-width: -moz-available; max-width: fill-available; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .mx-wi-100-m { max-width: 100%; }
|
|
.mx-wi-75-m { max-width: 75%; }
|
|
.mx-wi-50-m { max-width: 50%; }
|
|
.mx-wi-25-m { max-width: 25%; }
|
|
.mx-wi1-m { max-width: 1rem; }
|
|
.mx-wi2-m { max-width: 2rem; }
|
|
.mx-wi3-m { max-width: 4rem; }
|
|
.mx-wi4-m { max-width: 8rem; }
|
|
.mx-wi5-m { max-width: 16rem; }
|
|
.mx-wi6-m { max-width: 32rem; }
|
|
.mx-wi7-m { max-width: 48rem; }
|
|
.mx-wi8-m { max-width: 64rem; }
|
|
.mx-wi9-m { max-width: 96rem; }
|
|
.mx-wi10-m { max-width: 128rem; }
|
|
.mx-wi-none-m { max-width: none; }
|
|
.mx-wi-max-m { max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; }
|
|
.mx-wi-min-m { max-width: -webkit-min-content; max-width: -moz-min-content; max-width: min-content; }
|
|
.mx-wi-fit-m { max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; }
|
|
.mx-wi-fill-m { max-width: -webkit-fill-available; max-width: -moz-available; max-width: fill-available; } }
|
|
@media screen and (min-width: 64em) { .mx-wi-100-l { max-width: 100%; }
|
|
.mx-wi-75-l { max-width: 75%; }
|
|
.mx-wi-50-l { max-width: 50%; }
|
|
.mx-wi-25-l { max-width: 25%; }
|
|
.mx-wi1-l { max-width: 1rem; }
|
|
.mx-wi2-l { max-width: 2rem; }
|
|
.mx-wi3-l { max-width: 4rem; }
|
|
.mx-wi4-l { max-width: 8rem; }
|
|
.mx-wi5-l { max-width: 16rem; }
|
|
.mx-wi6-l { max-width: 32rem; }
|
|
.mx-wi7-l { max-width: 48rem; }
|
|
.mx-wi8-l { max-width: 64rem; }
|
|
.mx-wi9-l { max-width: 96rem; }
|
|
.mx-wi10-l { max-width: 128rem; }
|
|
.mx-wi-none-l { max-width: none; }
|
|
.mx-wi-max-l { max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; }
|
|
.mx-wi-min-l { max-width: -webkit-min-content; max-width: -moz-min-content; max-width: min-content; }
|
|
.mx-wi-fit-l { max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; }
|
|
.mx-wi-fill-l { max-width: -webkit-fill-available; max-width: -moz-available; max-width: fill-available; } }
|
|
/*
|
|
OVERFLOWS
|
|
*/
|
|
.of-vis { overflow: visible; }
|
|
|
|
.of-hid { overflow: hidden; }
|
|
|
|
.of-scr { overflow: scroll; }
|
|
|
|
.of-aut { overflow: auto; }
|
|
|
|
@media screen and (min-width: 48em) { .of-vis-ns { overflow: visible; }
|
|
.of-hid-ns { overflow: hidden; }
|
|
.of-scr-ns { overflow: scroll; }
|
|
.of-aut-ns { overflow: auto; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .of-vis-m { overflow: visible; }
|
|
.of-hid-m { overflow: hidden; }
|
|
.of-scr-m { overflow: scroll; }
|
|
.of-aut-m { overflow: auto; } }
|
|
@media screen and (min-width: 64em) { .of-vis-l { overflow: visible; }
|
|
.of-hid-l { overflow: hidden; }
|
|
.of-scr-l { overflow: scroll; }
|
|
.of-aut-l { overflow: auto; } }
|
|
/*
|
|
POSITIONING
|
|
*/
|
|
.pos-stat { position: static; }
|
|
|
|
.pos-rel { position: relative; }
|
|
|
|
.pos-abs { position: absolute; }
|
|
|
|
.pos-fix { position: fixed; }
|
|
|
|
/* Values */
|
|
.top-0 { top: 0; }
|
|
|
|
.left-0 { left: 0; }
|
|
|
|
.right-0 { right: 0; }
|
|
|
|
.bottom-0 { bottom: 0; }
|
|
|
|
.top-1 { top: 1rem; }
|
|
|
|
.left-1 { left: 1rem; }
|
|
|
|
.right-1 { right: 1rem; }
|
|
|
|
.bottom-1 { bottom: 1rem; }
|
|
|
|
.top-2 { top: 2rem; }
|
|
|
|
.left-2 { left: 2rem; }
|
|
|
|
.right-2 { right: 2rem; }
|
|
|
|
.bottom-2 { bottom: 2rem; }
|
|
|
|
.top-4 { top: 4rem; }
|
|
|
|
.left-4 { left: 4rem; }
|
|
|
|
.right-4 { right: 4rem; }
|
|
|
|
.bottom-4 { bottom: 4rem; }
|
|
|
|
/* Top Percentage based scale */
|
|
.top-auto { top: auto; }
|
|
|
|
.top-i { top: inherit; }
|
|
|
|
.center { margin: 0 auto; }
|
|
|
|
@media screen and (min-width: 48em) { .pos-stat-ns { position: static; }
|
|
.pos-rel-ns { position: relative; }
|
|
.pos-abs-ns { position: absolute; }
|
|
.pos-fix-ns { position: fixed; }
|
|
.top-0-ns { top: 0; }
|
|
.left-0-ns { left: 0; }
|
|
.right-0-ns { right: 0; }
|
|
.bottom-0-ns { bottom: 0; }
|
|
.top-1-ns { top: 1rem; }
|
|
.left-1-ns { left: 1rem; }
|
|
.right-1-ns { right: 1rem; }
|
|
.bottom-1-ns { bottom: 1rem; }
|
|
.top-2-ns { top: 2rem; }
|
|
.left-2-ns { left: 2rem; }
|
|
.right-2-ns { right: 2rem; }
|
|
.bottom-2-ns { bottom: 2rem; }
|
|
.top-4-ns { top: 4rem; }
|
|
.left-4-ns { left: 4rem; }
|
|
.right-4-ns { right: 4rem; }
|
|
.bottom-4-ns { bottom: 4rem; }
|
|
.top-auto-ns { top: auto; }
|
|
.top-i-ns { top: inherit; }
|
|
.center-ns { margin: 0 auto; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .pos-stat-m { position: static; }
|
|
.pos-rel-m { position: relative; }
|
|
.pos-abs-m { position: absolute; }
|
|
.pos-fix-m { position: fixed; }
|
|
.top-0-m { top: 0; }
|
|
.left-0-m { left: 0; }
|
|
.right-0-m { right: 0; }
|
|
.bottom-0-m { bottom: 0; }
|
|
.top-1-m { top: 1rem; }
|
|
.left-1-m { left: 1rem; }
|
|
.right-1-m { right: 1rem; }
|
|
.bottom-1-m { bottom: 1rem; }
|
|
.top-2-m { top: 2rem; }
|
|
.left-2-m { left: 2rem; }
|
|
.right-2-m { right: 2rem; }
|
|
.bottom-2-m { bottom: 2rem; }
|
|
.top-4-m { top: 4rem; }
|
|
.left-4-m { left: 4rem; }
|
|
.right-4-m { right: 4rem; }
|
|
.bottom-4-m { bottom: 4rem; }
|
|
.top-auto-m { top: auto; }
|
|
.top-i-m { top: inherit; }
|
|
.center-m { margin: 0 auto; } }
|
|
@media screen and (min-width: 64em) { .pos-stat-l { position: static; }
|
|
.pos-rel-l { position: relative; }
|
|
.pos-abs-l { position: absolute; }
|
|
.pos-fix-l { position: fixed; }
|
|
.top-0-l { top: 0; }
|
|
.left-0-l { left: 0; }
|
|
.right-0-l { right: 0; }
|
|
.bottom-0-l { bottom: 0; }
|
|
.top-1-l { top: 1rem; }
|
|
.left-1-l { left: 1rem; }
|
|
.right-1-l { right: 1rem; }
|
|
.bottom-1-l { bottom: 1rem; }
|
|
.top-2-l { top: 2rem; }
|
|
.left-2-l { left: 2rem; }
|
|
.right-2-l { right: 2rem; }
|
|
.bottom-2-l { bottom: 2rem; }
|
|
.top-4-l { top: 4rem; }
|
|
.left-4-l { left: 4rem; }
|
|
.right-4-l { right: 4rem; }
|
|
.bottom-4-l { bottom: 4rem; }
|
|
.top-auto-l { top: auto; }
|
|
.top-i-l { top: inherit; }
|
|
.center-l { margin: 0 auto; } }
|
|
/*
|
|
SKINS
|
|
|
|
*/
|
|
/* Grays */
|
|
.black { color: #111111; }
|
|
|
|
.dk-gray { color: #333333; }
|
|
|
|
.md-gray { color: #666666; }
|
|
|
|
.gray { color: #888888; }
|
|
|
|
.silver { color: #999999; }
|
|
|
|
.lt-silver { color: #aaaaaa; }
|
|
|
|
.lt-gray { color: #cccccc; }
|
|
|
|
.near-white { color: #eeeeee; }
|
|
|
|
.white { color: white !important; }
|
|
|
|
/* Text colors */
|
|
.aqua { color: #7fdbff; }
|
|
|
|
.blue { color: #0074d9; }
|
|
|
|
.navy { color: #001f3f; }
|
|
|
|
.teal { color: #39cccc; }
|
|
|
|
.green { color: #2ecc40; }
|
|
|
|
.olive { color: #3d9970; }
|
|
|
|
.lime { color: #01ff70; }
|
|
|
|
.yellow { color: #ffdc00; }
|
|
|
|
.orange { color: #ff851b; }
|
|
|
|
.red { color: #ff4136; }
|
|
|
|
.fuchsia { color: #f012be; }
|
|
|
|
.purple { color: #b10dc9; }
|
|
|
|
.maroon { color: #85144b; }
|
|
|
|
/* Background colors */
|
|
.bg-black { background-color: #111111; }
|
|
|
|
.bg-dk-gray { background-color: #333333; }
|
|
|
|
.bg-md-gray { background-color: #666666; }
|
|
|
|
.bg-gray { background-color: #888888; }
|
|
|
|
.bg-silver { background-color: #999999; }
|
|
|
|
.bg-lt-silver { background-color: #aaaaaa; }
|
|
|
|
.bg-lt-gray { background-color: #cccccc; }
|
|
|
|
.bg-near-white { background-color: #eeeeee; }
|
|
|
|
.bg-white { background-color: white !important; }
|
|
|
|
.bg-aqua { background-color: #7fdbff; }
|
|
|
|
.bg-blue { background-color: #0074d9; }
|
|
|
|
.bg-navy { background-color: #001f3f; }
|
|
|
|
.bg-teal { background-color: #39cccc; }
|
|
|
|
.bg-green { background-color: #2ecc40; }
|
|
|
|
.bg-olive { background-color: #3d9970; }
|
|
|
|
.bg-lime { background-color: #01ff70; }
|
|
|
|
.bg-yellow { background-color: #ffdc00; }
|
|
|
|
.bg-orange { background-color: #ff851b; }
|
|
|
|
.bg-red { background-color: #ff4136; }
|
|
|
|
.bg-fuchsia { background-color: #f012be; }
|
|
|
|
.bg-purple { background-color: #b10dc9; }
|
|
|
|
.bg-maroon { background-color: #85144b; }
|
|
|
|
/* SPACING
|
|
An eight step powers of two scale ranging from 0 to 16rem.
|
|
Legend:
|
|
p = padding m = margin
|
|
a = all h = horizontal v = vertical t = top r = right b = bottom l = left
|
|
n = none xs = extra small s = small m = medium l = large x = extra xl = extra large xxl = extra extra large
|
|
|
|
*/
|
|
.pan { padding: 0; }
|
|
|
|
.paxs { padding: .25rem; }
|
|
|
|
.pas { padding: .5rem; }
|
|
|
|
.pam { padding: 1rem; }
|
|
|
|
.pal { padding: 2rem; }
|
|
|
|
.pax { padding: 4rem; }
|
|
|
|
.paxl { padding: 8rem; }
|
|
|
|
.paxxl { padding: 16rem; }
|
|
|
|
.pln { padding-left: 0; }
|
|
|
|
.plxs { padding-left: .25rem; }
|
|
|
|
.pls { padding-left: .5rem; }
|
|
|
|
.plm { padding-left: 1rem; }
|
|
|
|
.pll { padding-left: 2rem; }
|
|
|
|
.plx { padding-left: 4rem; }
|
|
|
|
.plxl { padding-left: 8rem; }
|
|
|
|
.plxxl { padding-left: 16rem; }
|
|
|
|
.prn { padding-right: 0; }
|
|
|
|
.prxs { padding-right: .25rem; }
|
|
|
|
.prs { padding-right: .5rem; }
|
|
|
|
.prm { padding-right: 1rem; }
|
|
|
|
.prl { padding-right: 2rem; }
|
|
|
|
.prx { padding-right: 4rem; }
|
|
|
|
.prxl { padding-right: 8rem; }
|
|
|
|
.prxxl { padding-right: 16rem; }
|
|
|
|
.pbn { padding-bottom: 0; }
|
|
|
|
.pbxs { padding-bottom: .25rem; }
|
|
|
|
.pbs { padding-bottom: .5rem; }
|
|
|
|
.pbm { padding-bottom: 1rem; }
|
|
|
|
.pbl { padding-bottom: 2rem; }
|
|
|
|
.pbx { padding-bottom: 4rem; }
|
|
|
|
.pbxl { padding-bottom: 8rem; }
|
|
|
|
.pbxxl { padding-bottom: 16rem; }
|
|
|
|
.ptn { padding-top: 0; }
|
|
|
|
.ptxs { padding-top: .25rem; }
|
|
|
|
.pts { padding-top: .5rem; }
|
|
|
|
.ptm { padding-top: 1rem; }
|
|
|
|
.ptl { padding-top: 2rem; }
|
|
|
|
.ptx { padding-top: 4rem; }
|
|
|
|
.ptxl { padding-top: 8rem; }
|
|
|
|
.ptxxl { padding-top: 16rem; }
|
|
|
|
.pvn { padding-top: 0; padding-bottom: 0; }
|
|
|
|
.pvxs { padding-top: .25rem; padding-bottom: .25rem; }
|
|
|
|
.pvs { padding-top: .5rem; padding-bottom: .5rem; }
|
|
|
|
.pvm { padding-top: 1rem; padding-bottom: 1rem; }
|
|
|
|
.pvl { padding-top: 2rem; padding-bottom: 2rem; }
|
|
|
|
.pvx { padding-top: 4rem; padding-bottom: 4rem; }
|
|
|
|
.pvxl { padding-top: 8rem; padding-bottom: 8rem; }
|
|
|
|
.pvxxl { padding-top: 16rem; padding-bottom: 16rem; }
|
|
|
|
.phn { padding-left: 0; padding-right: 0; }
|
|
|
|
.pvxs { padding-left: .25rem; padding-right: .25rem; }
|
|
|
|
.phs { padding-left: .5rem; padding-right: .5rem; }
|
|
|
|
.phm { padding-left: 1rem; padding-right: 1rem; }
|
|
|
|
.phl { padding-left: 2rem; padding-right: 2rem; }
|
|
|
|
.phx { padding-left: 4rem; padding-right: 4rem; }
|
|
|
|
.phxl { padding-left: 8rem; padding-right: 8rem; }
|
|
|
|
.phxxl { padding-left: 16rem; padding-right: 16rem; }
|
|
|
|
.man { margin: 0; }
|
|
|
|
.maxs { margin: .25rem; }
|
|
|
|
.mas { margin: .5rem; }
|
|
|
|
.mam { margin: 1rem; }
|
|
|
|
.mal { margin: 2rem; }
|
|
|
|
.max { margin: 4rem; }
|
|
|
|
.maxl { margin: 8rem; }
|
|
|
|
.maxxl { margin: 16rem; }
|
|
|
|
.mln { margin-left: 0; }
|
|
|
|
.mlxs { margin-left: .25rem; }
|
|
|
|
.mls { margin-left: .5rem; }
|
|
|
|
.mlm { margin-left: 1rem; }
|
|
|
|
.mll { margin-left: 2rem; }
|
|
|
|
.mlx { margin-left: 4rem; }
|
|
|
|
.mlxl { margin-left: 8rem; }
|
|
|
|
.mlxxl { margin-left: 16rem; }
|
|
|
|
.mrn { margin-right: 0; }
|
|
|
|
.mrxs { margin-right: .25rem; }
|
|
|
|
.mrs { margin-right: .5rem; }
|
|
|
|
.mrm { margin-right: 1rem; }
|
|
|
|
.mrl { margin-right: 2rem; }
|
|
|
|
.mrx { margin-right: 4rem; }
|
|
|
|
.mrxl { margin-right: 8rem; }
|
|
|
|
.mrxxl { margin-right: 16rem; }
|
|
|
|
.mbn { margin-bottom: 0; }
|
|
|
|
.mbxs { margin-bottom: .25rem; }
|
|
|
|
.mbs { margin-bottom: .5rem; }
|
|
|
|
.mbm { margin-bottom: 1rem; }
|
|
|
|
.mbl { margin-bottom: 2rem; }
|
|
|
|
.mbx { margin-bottom: 4rem; }
|
|
|
|
.mbxl { margin-bottom: 8rem; }
|
|
|
|
.mbxxl { margin-bottom: 16rem; }
|
|
|
|
.mtn { margin-top: 0; }
|
|
|
|
.mtxs { margin-top: .25rem; }
|
|
|
|
.mts { margin-top: .5rem; }
|
|
|
|
.mtm { margin-top: 1rem; }
|
|
|
|
.mtl { margin-top: 2rem; }
|
|
|
|
.mtx { margin-top: 4rem; }
|
|
|
|
.mtxl { margin-top: 8rem; }
|
|
|
|
.mtxxl { margin-top: 16rem; }
|
|
|
|
.mvn { margin-top: 0; margin-bottom: 0rem; }
|
|
|
|
.mvxs { margin-top: .25rem; margin-bottom: .25rem; }
|
|
|
|
.mvs { margin-top: .5rem; margin-bottom: .5rem; }
|
|
|
|
.mvm { margin-top: 1rem; margin-bottom: 1rem; }
|
|
|
|
.mvl { margin-top: 2rem; margin-bottom: 2rem; }
|
|
|
|
.mvx { margin-top: 4rem; margin-bottom: 4rem; }
|
|
|
|
.mvxl { margin-top: 8rem; margin-bottom: 8rem; }
|
|
|
|
.mvxl { margin-top: 16rem; margin-bottom: 16rem; }
|
|
|
|
.mhn { margin-left: 0; margin-right: 0; }
|
|
|
|
.mhs { margin-left: .5rem; margin-right: .5rem; }
|
|
|
|
.mhm { margin-left: 1rem; margin-right: 1rem; }
|
|
|
|
.mhl { margin-left: 2rem; margin-right: 2rem; }
|
|
|
|
.mhx { margin-left: 4rem; margin-right: 4rem; }
|
|
|
|
.mhxl { margin-left: 8rem; margin-right: 8rem; }
|
|
|
|
.mhxxl { margin-left: 16rem; margin-right: 16rem; }
|
|
|
|
@media screen and (min-width: 48em) { .pan-ns { padding: 0; }
|
|
.paxs-ns { padding: .25rem; }
|
|
.pas-ns { padding: .5rem; }
|
|
.pam-ns { padding: 1rem; }
|
|
.pal-ns { padding: 2rem; }
|
|
.pax-ns { padding: 4rem; }
|
|
.paxl-ns { padding: 8rem; }
|
|
.paxxl-ns { padding: 16rem; }
|
|
.pln-ns { padding-left: 0; }
|
|
.plxs-ns { padding-left: .25rem; }
|
|
.pls-ns { padding-left: .5rem; }
|
|
.plm-ns { padding-left: 1rem; }
|
|
.pll-ns { padding-left: 2rem; }
|
|
.plx-ns { padding-left: 4rem; }
|
|
.plxl-ns { padding-left: 8rem; }
|
|
.plxxl-ns { padding-left: 16rem; }
|
|
.prn-ns { padding-right: 0; }
|
|
.prxs-ns { padding-right: .25rem; }
|
|
.prs-ns { padding-right: .5rem; }
|
|
.prm-ns { padding-right: 1rem; }
|
|
.prl-ns { padding-right: 2rem; }
|
|
.prx-ns { padding-right: 4rem; }
|
|
.prxl-ns { padding-right: 8rem; }
|
|
.prxxl-ns { padding-right: 16rem; }
|
|
.pbn-ns { padding-bottom: 0; }
|
|
.pbxs-ns { padding-bottom: .25rem; }
|
|
.pbs-ns { padding-bottom: .5rem; }
|
|
.pbm-ns { padding-bottom: 1rem; }
|
|
.pbl-ns { padding-bottom: 2rem; }
|
|
.pbx-ns { padding-bottom: 4rem; }
|
|
.pbxl-ns { padding-bottom: 8rem; }
|
|
.pbxxl-ns { padding-bottom: 16rem; }
|
|
.ptn-ns { padding-top: 0; }
|
|
.ptxs-ns { padding-top: .25rem; }
|
|
.pts-ns { padding-top: .5rem; }
|
|
.ptm-ns { padding-top: 1rem; }
|
|
.ptl-ns { padding-top: 2rem; }
|
|
.ptx-ns { padding-top: 4rem; }
|
|
.ptxl-ns { padding-top: 8rem; }
|
|
.ptxxl-ns { padding-top: 16rem; }
|
|
.pvn-ns { padding-top: 0; padding-bottom: 0; }
|
|
.pvxs-ns { padding-top: .25rem; padding-bottom: .25rem; }
|
|
.pvs-ns { padding-top: .5rem; padding-bottom: .5rem; }
|
|
.pvm-ns { padding-top: 1rem; padding-bottom: 1rem; }
|
|
.pvl-ns { padding-top: 2rem; padding-bottom: 2rem; }
|
|
.pvx-ns { padding-top: 4rem; padding-bottom: 4rem; }
|
|
.pvxl-ns { padding-top: 8rem; padding-bottom: 8rem; }
|
|
.pvxxl-ns { padding-top: 16rem; padding-bottom: 16rem; }
|
|
.phn-ns { padding-left: 0; padding-right: 0; }
|
|
.pvxs-ns { padding-left: .25rem; padding-right: .25rem; }
|
|
.phs-ns { padding-left: .5rem; padding-right: .5rem; }
|
|
.phm-ns { padding-left: 1rem; padding-right: 1rem; }
|
|
.phl-ns { padding-left: 2rem; padding-right: 2rem; }
|
|
.phx-ns { padding-left: 4rem; padding-right: 4rem; }
|
|
.phxl-ns { padding-left: 8rem; padding-right: 8rem; }
|
|
.phxxl-ns { padding-left: 16rem; padding-right: 16rem; }
|
|
.man-ns { margin: 0; }
|
|
.maxs-ns { margin: .25rem; }
|
|
.mas-ns { margin: .5rem; }
|
|
.mam-ns { margin: 1rem; }
|
|
.mal-ns { margin: 2rem; }
|
|
.max-ns { margin: 4rem; }
|
|
.maxl-ns { margin: 8rem; }
|
|
.maxxl-ns { margin: 16rem; }
|
|
.mln-ns { margin-left: 0; }
|
|
.mlxs-ns { margin-left: .25rem; }
|
|
.mls-ns { margin-left: .5rem; }
|
|
.mlm-ns { margin-left: 1rem; }
|
|
.mll-ns { margin-left: 2rem; }
|
|
.mlx-ns { margin-left: 4rem; }
|
|
.mlxl-ns { margin-left: 8rem; }
|
|
.mlxxl-ns { margin-left: 16rem; }
|
|
.mrn-ns { margin-right: 0; }
|
|
.mrxs-ns { margin-right: .25rem; }
|
|
.mrs-ns { margin-right: .5rem; }
|
|
.mrm-ns { margin-right: 1rem; }
|
|
.mrl-ns { margin-right: 2rem; }
|
|
.mrx-ns { margin-right: 4rem; }
|
|
.mrxl-ns { margin-right: 8rem; }
|
|
.mrxxl-ns { margin-right: 16rem; }
|
|
.mbn-ns { margin-bottom: 0; }
|
|
.mbxs-ns { margin-bottom: .25rem; }
|
|
.mbs-ns { margin-bottom: .5rem; }
|
|
.mbm-ns { margin-bottom: 1rem; }
|
|
.mbl-ns { margin-bottom: 2rem; }
|
|
.mbx-ns { margin-bottom: 4rem; }
|
|
.mbxl-ns { margin-bottom: 8rem; }
|
|
.mbxxl-ns { margin-bottom: 16rem; }
|
|
.mtn-ns { margin-top: 0; }
|
|
.mtxs-ns { margin-top: .25rem; }
|
|
.mts-ns { margin-top: .5rem; }
|
|
.mtm-ns { margin-top: 1rem; }
|
|
.mtl-ns { margin-top: 2rem; }
|
|
.mtx-ns { margin-top: 4rem; }
|
|
.mtxl-ns { margin-top: 8rem; }
|
|
.mtxxl-ns { margin-top: 16rem; }
|
|
.mvn-ns { margin-top: 0; margin-bottom: 0rem; }
|
|
.mvxs-ns { margin-top: .25rem; margin-bottom: .25rem; }
|
|
.mvs-ns { margin-top: .5rem; margin-bottom: .5rem; }
|
|
.mvm-ns { margin-top: 1rem; margin-bottom: 1rem; }
|
|
.mvl-ns { margin-top: 2rem; margin-bottom: 2rem; }
|
|
.mvx-ns { margin-top: 4rem; margin-bottom: 4rem; }
|
|
.mvxl-ns { margin-top: 8rem; margin-bottom: 8rem; }
|
|
.mvxxl-ns { margin-top: 16rem; margin-bottom: 16rem; }
|
|
.mhn-ns { margin-left: 0; margin-right: 0; }
|
|
.mhs-ns { margin-left: .5rem; margin-right: .5rem; }
|
|
.mhm-ns { margin-left: 1rem; margin-right: 1rem; }
|
|
.mhl-ns { margin-left: 2rem; margin-right: 2rem; }
|
|
.mhx-ns { margin-left: 4rem; margin-right: 4rem; }
|
|
.mhxl-ns { margin-left: 8rem; margin-right: 8rem; }
|
|
.mhxxl-ns { margin-left: 16rem; margin-right: 16rem; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .pan-m { padding: 0; }
|
|
.paxs-m { padding: .25rem; }
|
|
.pas-m { padding: .5rem; }
|
|
.pam-m { padding: 1rem; }
|
|
.pal-m { padding: 2rem; }
|
|
.pax-m { padding: 4rem; }
|
|
.paxl-m { padding: 8rem; }
|
|
.paxxl-m { padding: 16rem; }
|
|
.pln-m { padding-left: 0; }
|
|
.plxs-m { padding-left: .25rem; }
|
|
.pls-m { padding-left: .5rem; }
|
|
.plm-m { padding-left: 1rem; }
|
|
.pll-m { padding-left: 2rem; }
|
|
.plx-m { padding-left: 4rem; }
|
|
.plxl-m { padding-left: 8rem; }
|
|
.plxxl-m { padding-left: 16rem; }
|
|
.prn-m { padding-right: 0; }
|
|
.prxs-m { padding-right: .25rem; }
|
|
.prs-m { padding-right: .5rem; }
|
|
.prm-m { padding-right: 1rem; }
|
|
.prl-m { padding-right: 2rem; }
|
|
.prx-m { padding-right: 4rem; }
|
|
.prxl-m { padding-right: 8rem; }
|
|
.prxxl-m { padding-right: 16rem; }
|
|
.pbn-m { padding-bottom: 0; }
|
|
.pbxs-m { padding-bottom: .25rem; }
|
|
.pbs-m { padding-bottom: .5rem; }
|
|
.pbm-m { padding-bottom: 1rem; }
|
|
.pbl-m { padding-bottom: 2rem; }
|
|
.pbx-m { padding-bottom: 4rem; }
|
|
.pbxl-m { padding-bottom: 8rem; }
|
|
.pbxxl-m { padding-bottom: 16rem; }
|
|
.ptn-m { padding-top: 0; }
|
|
.ptxs-m { padding-top: .25rem; }
|
|
.pts-m { padding-top: .5rem; }
|
|
.ptm-m { padding-top: 1rem; }
|
|
.ptl-m { padding-top: 2rem; }
|
|
.ptx-m { padding-top: 4rem; }
|
|
.ptxl-m { padding-top: 8rem; }
|
|
.ptxxl-m { padding-top: 16rem; }
|
|
.pvn-m { padding-top: 0; padding-bottom: 0; }
|
|
.pvxs-m { padding-top: .25rem; padding-bottom: .25rem; }
|
|
.pvs-m { padding-top: .5rem; padding-bottom: .5rem; }
|
|
.pvm-m { padding-top: 1rem; padding-bottom: 1rem; }
|
|
.pvl-m { padding-top: 2rem; padding-bottom: 2rem; }
|
|
.pvx-m { padding-top: 4rem; padding-bottom: 4rem; }
|
|
.pvxl-m { padding-top: 8rem; padding-bottom: 8rem; }
|
|
.pvxxl-m { padding-top: 16rem; padding-bottom: 16rem; }
|
|
.phn-m { padding-left: 0; padding-right: 0; }
|
|
.pvxs-m { padding-left: .25rem; padding-right: .25rem; }
|
|
.phs-m { padding-left: .5rem; padding-right: .5rem; }
|
|
.phm-m { padding-left: 1rem; padding-right: 1rem; }
|
|
.phl-m { padding-left: 2rem; padding-right: 2rem; }
|
|
.phx-m { padding-left: 4rem; padding-right: 4rem; }
|
|
.phxl-m { padding-left: 8rem; padding-right: 8rem; }
|
|
.phxxl-m { padding-left: 16rem; padding-right: 16rem; }
|
|
.man-m { margin: 0; }
|
|
.maxs-m { margin: .25rem; }
|
|
.mas-m { margin: .5rem; }
|
|
.mam-m { margin: 1rem; }
|
|
.mal-m { margin: 2rem; }
|
|
.max-m { margin: 4rem; }
|
|
.maxl-m { margin: 8rem; }
|
|
.maxxl-m { margin: 16rem; }
|
|
.mln-m { margin-left: 0; }
|
|
.mlxs-m { margin-left: .25rem; }
|
|
.mls-m { margin-left: .5rem; }
|
|
.mlm-m { margin-left: 1rem; }
|
|
.mll-m { margin-left: 2rem; }
|
|
.mlx-m { margin-left: 4rem; }
|
|
.mlxl-m { margin-left: 8rem; }
|
|
.mlxxl-m { margin-left: 16rem; }
|
|
.mrn-m { margin-right: 0; }
|
|
.mrxs-m { margin-right: .25rem; }
|
|
.mrs-m { margin-right: .5rem; }
|
|
.mrm-m { margin-right: 1rem; }
|
|
.mrl-m { margin-right: 2rem; }
|
|
.mrx-m { margin-right: 4rem; }
|
|
.mrxl-m { margin-right: 8rem; }
|
|
.mrxxl-m { margin-right: 16rem; }
|
|
.mbn-m { margin-bottom: 0; }
|
|
.mbxs-m { margin-bottom: .25rem; }
|
|
.mbs-m { margin-bottom: .5rem; }
|
|
.mbm-m { margin-bottom: 1rem; }
|
|
.mbl-m { margin-bottom: 2rem; }
|
|
.mbx-m { margin-bottom: 4rem; }
|
|
.mbxl-m { margin-bottom: 8rem; }
|
|
.mbxxl-m { margin-bottom: 16rem; }
|
|
.mtn-m { margin-top: 0; }
|
|
.mtxs-m { margin-top: .25rem; }
|
|
.mts-m { margin-top: .5rem; }
|
|
.mtm-m { margin-top: 1rem; }
|
|
.mtl-m { margin-top: 2rem; }
|
|
.mtx-m { margin-top: 4rem; }
|
|
.mtxl-m { margin-top: 8rem; }
|
|
.mtxxl-m { margin-top: 16rem; }
|
|
.mvn-m { margin-top: 0; margin-bottom: 0rem; }
|
|
.mvxs-m { margin-top: .25rem; margin-bottom: .25rem; }
|
|
.mvs-m { margin-top: .5rem; margin-bottom: .5rem; }
|
|
.mvm-m { margin-top: 1rem; margin-bottom: 1rem; }
|
|
.mvl-m { margin-top: 2rem; margin-bottom: 2rem; }
|
|
.mvx-m { margin-top: 4rem; margin-bottom: 4rem; }
|
|
.mvxl-m { margin-top: 8rem; margin-bottom: 8rem; }
|
|
.mvxxl-m { margin-top: 16rem; margin-bottom: 16rem; }
|
|
.mhn-m { margin-left: 0; margin-right: 0; }
|
|
.mhxs-m { margin-left: .25rem; margin-right: .25rem; }
|
|
.mhs-m { margin-left: .5rem; margin-right: .5rem; }
|
|
.mhm-m { margin-left: 1rem; margin-right: 1rem; }
|
|
.mhl-m { margin-left: 2rem; margin-right: 2rem; }
|
|
.mhx-m { margin-left: 4rem; margin-right: 4rem; }
|
|
.mhxl { margin-left: 8rem; margin-right: 8rem; }
|
|
.mhxxl { margin-left: 16rem; margin-right: 16rem; } }
|
|
@media screen and (min-width: 64em) { .pan-l { padding: 0; }
|
|
.paxs-l { padding: .25rem; }
|
|
.pas-l { padding: .5rem; }
|
|
.pam-l { padding: 1rem; }
|
|
.pal-l { padding: 2rem; }
|
|
.pax-l { padding: 4rem; }
|
|
.paxl-l { padding: 8rem; }
|
|
.paxxl-l { padding: 16rem; }
|
|
.pln-l { padding-left: 0; }
|
|
.plxs-l { padding-left: .25rem; }
|
|
.pls-l { padding-left: .5rem; }
|
|
.plm-l { padding-left: 1rem; }
|
|
.pll-l { padding-left: 2rem; }
|
|
.plx-l { padding-left: 4rem; }
|
|
.plxl-l { padding-left: 8rem; }
|
|
.plxxl-l { padding-left: 16rem; }
|
|
.prn-l { padding-right: 0; }
|
|
.prxs-l { padding-right: .25rem; }
|
|
.prs-l { padding-right: .5rem; }
|
|
.prm-l { padding-right: 1rem; }
|
|
.prl-l { padding-right: 2rem; }
|
|
.prx-l { padding-right: 4rem; }
|
|
.prxl-l { padding-right: 8rem; }
|
|
.prxxl-l { padding-right: 16rem; }
|
|
.pbn-l { padding-bottom: 0; }
|
|
.pbxs-l { padding-bottom: .25rem; }
|
|
.pbs-l { padding-bottom: .5rem; }
|
|
.pbm-l { padding-bottom: 1rem; }
|
|
.pbl-l { padding-bottom: 2rem; }
|
|
.pbx-l { padding-bottom: 4rem; }
|
|
.pbxl-l { padding-bottom: 8rem; }
|
|
.pbxxl-l { padding-bottom: 16rem; }
|
|
.ptn-l { padding-top: 0; }
|
|
.ptxs-l { padding-top: .25rem; }
|
|
.pts-l { padding-top: .5rem; }
|
|
.ptm-l { padding-top: 1rem; }
|
|
.ptl-l { padding-top: 2rem; }
|
|
.ptx-l { padding-top: 4rem; }
|
|
.ptxl-l { padding-top: 8rem; }
|
|
.ptxxl-l { padding-top: 16rem; }
|
|
.pvn-l { padding-top: 0; padding-bottom: 0; }
|
|
.pvxs-l { padding-top: .25rem; padding-bottom: .25rem; }
|
|
.pvs-l { padding-top: .5rem; padding-bottom: .5rem; }
|
|
.pvm-l { padding-top: 1rem; padding-bottom: 1rem; }
|
|
.pvl-l { padding-top: 2rem; padding-bottom: 2rem; }
|
|
.pvx-l { padding-top: 4rem; padding-bottom: 4rem; }
|
|
.pvxl-l { padding-top: 8rem; padding-bottom: 8rem; }
|
|
.pvxxl-l { padding-top: 16rem; padding-bottom: 16rem; }
|
|
.phn-l { padding-left: 0; padding-right: 0; }
|
|
.pvxs-l { padding-left: .25rem; padding-right: .25rem; }
|
|
.phs-l { padding-left: .5rem; padding-right: .5rem; }
|
|
.phm-l { padding-left: 1rem; padding-right: 1rem; }
|
|
.phl-l { padding-left: 2rem; padding-right: 2rem; }
|
|
.phx-l { padding-left: 4rem; padding-right: 4rem; }
|
|
.phxl-l { padding-left: 8rem; padding-right: 8rem; }
|
|
.phxxl-l { padding-left: 16rem; padding-right: 16rem; }
|
|
.man-l { margin: 0; }
|
|
.maxs-l { margin: .25rem; }
|
|
.mas-l { margin: .5rem; }
|
|
.mam-l { margin: 1rem; }
|
|
.mal-l { margin: 2rem; }
|
|
.max-l { margin: 4rem; }
|
|
.maxl-l { margin: 8rem; }
|
|
.maxxl-l { margin: 16rem; }
|
|
.mln-l { margin-left: 0; }
|
|
.mlxs-l { margin-left: .25rem; }
|
|
.mls-l { margin-left: .5rem; }
|
|
.mlm-l { margin-left: 1rem; }
|
|
.mll-l { margin-left: 2rem; }
|
|
.mlx-l { margin-left: 4rem; }
|
|
.mlxl-l { margin-left: 8rem; }
|
|
.mlxxl-l { margin-left: 16rem; }
|
|
.mrn-l { margin-right: 0; }
|
|
.mrxs-l { margin-right: .25rem; }
|
|
.mrs-l { margin-right: .5rem; }
|
|
.mrm-l { margin-right: 1rem; }
|
|
.mrl-l { margin-right: 2rem; }
|
|
.mrx-l { margin-right: 4rem; }
|
|
.mrxl-l { margin-right: 8rem; }
|
|
.mrxxl-l { margin-right: 16rem; }
|
|
.mbn-l { margin-bottom: 0; }
|
|
.mbxs-l { margin-bottom: .25rem; }
|
|
.mbs-l { margin-bottom: .5rem; }
|
|
.mbm-l { margin-bottom: 1rem; }
|
|
.mbl-l { margin-bottom: 2rem; }
|
|
.mbx-l { margin-bottom: 4rem; }
|
|
.mbxl-l { margin-bottom: 8rem; }
|
|
.mbxxl-l { margin-bottom: 16rem; }
|
|
.mtn-l { margin-top: 0; }
|
|
.mtxs-l { margin-top: .25rem; }
|
|
.mts-l { margin-top: .5rem; }
|
|
.mtm-l { margin-top: 1rem; }
|
|
.mtl-l { margin-top: 2rem; }
|
|
.mtx-l { margin-top: 4rem; }
|
|
.mtxl-l { margin-top: 8rem; }
|
|
.mtxxl-l { margin-top: 16rem; }
|
|
.mvn-l { margin-top: 0; margin-bottom: 0rem; }
|
|
.mvxs-l { margin-top: .25rem; margin-bottom: .25rem; }
|
|
.mvs-l { margin-top: .5rem; margin-bottom: .5rem; }
|
|
.mvm-l { margin-top: 1rem; margin-bottom: 1rem; }
|
|
.mvl-l { margin-top: 2rem; margin-bottom: 2rem; }
|
|
.mvx-l { margin-top: 4rem; margin-bottom: 4rem; }
|
|
.mvxl-l { margin-top: 8rem; margin-bottom: 8rem; }
|
|
.mvxxl-l { margin-top: 16rem; margin-bottom: 16rem; }
|
|
.mhn-l { margin-left: 0; margin-right: 0; }
|
|
.mhxs-l { margin-left: .25rem; margin-right: .25rem; }
|
|
.mhs-l { margin-left: .5rem; margin-right: .5rem; }
|
|
.mhm-l { margin-left: 1rem; margin-right: 1rem; }
|
|
.mhl-l { margin-left: 2rem; margin-right: 2rem; }
|
|
.mhx-l { margin-left: 4rem; margin-right: 4rem; }
|
|
.mhxl-l { margin-left: 8rem; margin-right: 8rem; }
|
|
.mhxxl-l { margin-left: 16rem; margin-right: 16rem; } }
|
|
/*
|
|
TEXT DECORATION
|
|
|
|
*/
|
|
.under { text-decoration: underline; }
|
|
|
|
.none { text-decoration: none; }
|
|
|
|
@media screen and (min-width: 48em) { .under-ns { text-decoration: underline; }
|
|
.none-ns { text-decoration: none; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .under-m { text-decoration: underline; }
|
|
.none-m { text-decoration: none; } }
|
|
@media screen and (min-width: 64em) { .under-l { text-decoration: underline; }
|
|
.none-l { text-decoration: none; } }
|
|
/*
|
|
Text Align
|
|
|
|
*/
|
|
.tl { text-align: left; }
|
|
|
|
.tr { text-align: right; }
|
|
|
|
.tc { text-align: center; }
|
|
|
|
@media screen and (min-width: 48em) { .tl-ns { text-align: left; }
|
|
.tr-ns { text-align: right; }
|
|
.tc-ns { text-align: center; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .tl-m { text-align: left; }
|
|
.tr-m { text-align: right; }
|
|
.tc-m { text-align: center; } }
|
|
@media screen and (min-width: 64em) { .tl-l { text-align: left; }
|
|
.tr-l { text-align: right; }
|
|
.tc-l { text-align: center; } }
|
|
/*
|
|
TEXT TRANSFORM
|
|
|
|
*/
|
|
.ttc { text-transform: capitalize; }
|
|
|
|
.ttu { text-transform: uppercase; letter-spacing: .2em; }
|
|
|
|
@media screen and (min-width: 48em) { .ttc-ns { text-transform: capitalize; }
|
|
.ttu-ns { text-transform: uppercase; letter-spacing: .2em; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .ttc-m { text-transform: capitalize; }
|
|
.ttu-m { text-transform: uppercase; letter-spacing: .2em; } }
|
|
@media screen and (min-width: 64em) { .ttc-l { text-transform: capitalize; }
|
|
.ttu-l { text-transform: uppercase; letter-spacing: .2em; } }
|
|
/* ========================================================================== TYPE SCALE ========================================================================== */
|
|
.f1 { font-size: 2rem; }
|
|
|
|
.f2 { font-size: 1.5rem; }
|
|
|
|
.f3 { font-size: 1.2rem; }
|
|
|
|
.f4 { font-size: 1.2rem; }
|
|
|
|
.f5 { font-size: 1rem; }
|
|
|
|
.f6, .small { font-size: .85rem; }
|
|
|
|
@media screen and (min-width: 48em) { .mega-ns { font-size: 3rem; }
|
|
.f1-ns { font-size: 2rem; }
|
|
.f2-ns { font-size: 1.5rem; }
|
|
.f3-ns { font-size: 1.2rem; }
|
|
.f4-ns { font-size: 1.2rem; }
|
|
.f5-ns { font-size: 1rem; }
|
|
.f6-ns { font-size: .85rem; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .mega-m { font-size: 3rem; }
|
|
.f1-m { font-size: 2rem; }
|
|
.f2-m { font-size: 1.5rem; }
|
|
.f3-m { font-size: 1.2rem; }
|
|
.f4-m { font-size: 1.2rem; }
|
|
.f5-m { font-size: 1rem; }
|
|
.f6-m { font-size: .85rem; } }
|
|
@media screen and (min-width: 64em) { .mega-l { font-size: 4rem; }
|
|
.f1-l { font-size: 3rem; }
|
|
.f2-l { font-size: 2rem; }
|
|
.f3-l { font-size: 1.5rem; }
|
|
.f4-l { font-size: 1.2rem; }
|
|
.f5-l { font-size: 1rem; }
|
|
.f6-l { font-size: 1rem; } }
|
|
/*
|
|
UTILITIES
|
|
|
|
*/
|
|
/* The Media Object Built by @stubornella http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/ <div class="media attribution"> <a href="http://twitter.com/stubbornella" class="img"> <img src="http://stubbornella.com/profile_image.jpg" alt="me" /> </a> <div class="bd"> @Stubbornella 14 minutes ago </div> </div> */
|
|
/* The Flag Object Built by @csswizzrdry http://csswizardry.com/2013/05/the-flag-object/ Use to vertically center text against an image. <div class="flag"> <div class="flag--image"> <img src="" alt=""> </div> <div class="flag--body"> <p></p> </div> </div> */
|
|
.flag { display: table; width: 100%; }
|
|
|
|
.flag--image, .flag--body { display: table-cell; vertical-align: middle; }
|
|
.flag--top .flag--image, .flag--top .flag--body { vertical-align: top; }
|
|
.flag--bottom .flag--image, .flag--bottom .flag--body { vertical-align: bottom; }
|
|
|
|
.flag--image { padding-right: 10px; }
|
|
.flag--image > img { display: block; max-width: none; }
|
|
.flag--rev .flag--image { padding-right: 0; padding-left: 10px; }
|
|
|
|
.flag--body { width: 100%; }
|
|
|
|
/*
|
|
VISIBILITY
|
|
|
|
*/
|
|
/* Text that is hidden but accessible Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
|
*/
|
|
.clip { position: fixed !important; _position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); }
|
|
|
|
@media screen and (min-width: 48em) { .clip-ns { position: fixed !important; _position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .clip-m { position: fixed !important; _position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } }
|
|
@media screen and (min-width: 64em) { .clip-l { position: fixed !important; _position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } }
|
|
/*
|
|
WHITE SPACE
|
|
|
|
*/
|
|
.ws-norm { white-space: normal; }
|
|
|
|
.ws-nowrap { white-space: nowrap; }
|
|
|
|
.ws-pre { white-space: pre; }
|
|
|
|
@media screen and (min-width: 48em) { .ws-norm-ns { white-space: normal; }
|
|
.ws-nowrap-ns { white-space: nowrap; }
|
|
.ws-pre-ns { white-space: pre; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .ws-norm-m { white-space: normal; }
|
|
.ws-nowrap-m { white-space: nowrap; }
|
|
.ws-pre-m { white-space: pre; } }
|
|
@media screen and (min-width: 64em) { .ws-norm-l { white-space: normal; }
|
|
.ws-nowrap-l { white-space: nowrap; }
|
|
.ws-pre-l { white-space: pre; } }
|
|
/*
|
|
WIDTHS
|
|
|
|
*/
|
|
/* Width Scale */
|
|
.wi1 { width: 1rem; }
|
|
|
|
.wi2 { width: 2rem; }
|
|
|
|
.wi3 { width: 4rem; }
|
|
|
|
.wi4 { width: 8rem; }
|
|
|
|
.wi5 { width: 16rem; }
|
|
|
|
.wi-10 { width: 10%; }
|
|
|
|
.wi-20 { width: 20%; }
|
|
|
|
.wi-25 { width: 25%; }
|
|
|
|
.wi-40 { width: 40%; }
|
|
|
|
.wi-50 { width: 50%; }
|
|
|
|
.wi-60 { width: 60%; }
|
|
|
|
.wi-75 { width: 75%; }
|
|
|
|
.wi-80 { width: 80%; }
|
|
|
|
.wi-100 { width: 100%; }
|
|
|
|
/* Width String Properties */
|
|
.wi-bb { width: border-box; }
|
|
|
|
.wi-cb { width: content-box; }
|
|
|
|
.wi-mx { width: -webkit-max-content; width: -moz-max-content; width: max-content; }
|
|
|
|
.wi-mn { width: -webkit-min-content; width: -moz-min-content; width: min-content; }
|
|
|
|
.wi-av { width: available; }
|
|
|
|
.wi-fc { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; }
|
|
|
|
.wi-at { width: auto; }
|
|
|
|
.wi-i { width: inherit; }
|
|
|
|
@media screen and (min-width: 48em) { .wi1-ns { width: 1rem; }
|
|
.wi2-ns { width: 2rem; }
|
|
.wi3-ns { width: 4rem; }
|
|
.wi4-ns { width: 8rem; }
|
|
.wi5-ns { width: 16rem; }
|
|
.wi-10-ns { width: 10%; }
|
|
.wi-20-ns { width: 20%; }
|
|
.wi-25-ns { width: 25%; }
|
|
.wi-40-ns { width: 40%; }
|
|
.wi-50-ns { width: 50%; }
|
|
.wi-60-ns { width: 60%; }
|
|
.wi-75-ns { width: 75%; }
|
|
.wi-80-ns { width: 80%; }
|
|
.wi-100-ns { width: 100%; }
|
|
.wi-bb-ns { width: border-box; }
|
|
.wi-cb-ns { width: content-box; }
|
|
.wi-mx-ns { width: -webkit-max-content; width: -moz-max-content; width: max-content; }
|
|
.wi-mn-ns { width: -webkit-min-content; width: -moz-min-content; width: min-content; }
|
|
.wi-av-ns { width: available; }
|
|
.wi-fc-ns { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; }
|
|
.wi-at-ns { width: auto; }
|
|
.wi-i-ns { width: inherit; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .wi1-m { width: 1rem; }
|
|
.wi2-m { width: 2rem; }
|
|
.wi3-m { width: 4rem; }
|
|
.wi4-m { width: 8rem; }
|
|
.wi5-m { width: 16rem; }
|
|
.wi-10-m { width: 10%; }
|
|
.wi-20-m { width: 20%; }
|
|
.wi-25-m { width: 25%; }
|
|
.wi-40-m { width: 40%; }
|
|
.wi-50-m { width: 50%; }
|
|
.wi-60-m { width: 60%; }
|
|
.wi-75-m { width: 75%; }
|
|
.wi-80-m { width: 80%; }
|
|
.wi-100-m { width: 100%; }
|
|
.wi-bb-m { width: border-box; }
|
|
.wi-cb-m { width: content-box; }
|
|
.wi-mx-m { width: -webkit-max-content; width: -moz-max-content; width: max-content; }
|
|
.wi-mn-m { width: -webkit-min-content; width: -moz-min-content; width: min-content; }
|
|
.wi-av-m { width: available; }
|
|
.wi-fc-m { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; }
|
|
.wi-at-m { width: auto; }
|
|
.wi-i-m { width: inherit; } }
|
|
@media screen and (min-width: 64em) { .wi1-l { width: 1rem; }
|
|
.wi2-l { width: 2rem; }
|
|
.wi3-l { width: 4rem; }
|
|
.wi4-l { width: 8rem; }
|
|
.wi5-l { width: 16rem; }
|
|
.wi-10-l { width: 10%; }
|
|
.wi-20-l { width: 20%; }
|
|
.wi-25-l { width: 25%; }
|
|
.wi-40-l { width: 40%; }
|
|
.wi-50-l { width: 50%; }
|
|
.wi-60-l { width: 60%; }
|
|
.wi-75-l { width: 75%; }
|
|
.wi-80-l { width: 80%; }
|
|
.wi-100-l { width: 100%; }
|
|
.wi-bb-l { width: border-box; }
|
|
.wi-cb-l { width: content-box; }
|
|
.wi-mx-l { width: -webkit-max-content; width: -moz-max-content; width: max-content; }
|
|
.wi-mn-l { width: -webkit-min-content; width: -moz-min-content; width: min-content; }
|
|
.wi-av-l { width: available; }
|
|
.wi-fc-l { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; }
|
|
.wi-at-l { width: auto; }
|
|
.wi-i-l { width: inherit; } }
|
|
/*
|
|
WORD SPACING
|
|
|
|
*/
|
|
.wsn { word-spacing: normal; }
|
|
|
|
.wsib { word-spacing: -0.43em; }
|
|
|
|
/* For eliminating space between inline-block elements */
|
|
@media screen and (min-width: 48em) { .wsn-ns { word-spacing: normal; }
|
|
.wsib-ns { word-spacing: -0.43em; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .wsn-m { word-spacing: normal; }
|
|
.wsib-m { word-spacing: -0.43em; } }
|
|
@media screen and (min-width: 64em) { .wsn-l { word-spacing: normal; }
|
|
.wsib-l { word-spacing: -0.43em; } }
|
|
/*
|
|
STYLES
|
|
Add custom styles here.
|
|
|
|
*/
|
|
/* VERTICAL ALIGN
|
|
*/
|
|
.v-base { vertical-align: baseline; }
|
|
|
|
.v-sub { vertical-align: sub; }
|
|
|
|
.v-sup { vertical-align: super; }
|
|
|
|
.v-txt-top { vertical-align: text-top; }
|
|
|
|
.v-txt-btm { vertical-align: text-bottom; }
|
|
|
|
.v-mid { vertical-align: middle; }
|
|
|
|
.v-top { vertical-align: top; }
|
|
|
|
.v-btm { vertical-align: bottom; }
|
|
|
|
@media screen and (min-width: 48em) { .v-base-ns { vertical-align: baseline; }
|
|
.v-sub-ns { vertical-align: sub; }
|
|
.v-sup-ns { vertical-align: super; }
|
|
.v-txt-top-ns { vertical-align: text-top; }
|
|
.v-txt-btm-ns { vertical-align: text-bottom; }
|
|
.v-mid-ns { vertical-align: middle; }
|
|
.v-top-ns { vertical-align: top; }
|
|
.v-btm-ns { vertical-align: bottom; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .v-base-m { vertical-align: baseline; }
|
|
.v-sub-m { vertical-align: sub; }
|
|
.v-sup-m { vertical-align: super; }
|
|
.v-txt-top-m { vertical-align: text-top; }
|
|
.v-txt-btm-m { vertical-align: text-bottom; }
|
|
.v-mid-m { vertical-align: middle; }
|
|
.v-top-m { vertical-align: top; }
|
|
.v-btm-m { vertical-align: bottom; } }
|
|
@media screen and (min-width: 64em) { .v-base-l { vertical-align: baseline; }
|
|
.v-sub-l { vertical-align: sub; }
|
|
.v-sup-l { vertical-align: super; }
|
|
.v-txt-top-l { vertical-align: text-top; }
|
|
.v-txt-btm-l { vertical-align: text-bottom; }
|
|
.v-mid-l { vertical-align: middle; }
|
|
.v-top-l { vertical-align: top; }
|
|
.v-btm-l { vertical-align: bottom; } }
|