hmn/public/style.css

9615 lines
186 KiB
CSS

@charset "UTF-8";
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
html {
line-height: 1.15;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */ }
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0; }
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block; }
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0; }
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main {
/* 1 */
display: block; }
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px; }
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */ }
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */ }
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent;
/* 1 */
-webkit-text-decoration-skip: objects;
/* 2 */ }
/**
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */ }
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit; }
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder; }
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */ }
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic; }
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000; }
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%; }
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sub {
bottom: -0.25em; }
sup {
top: -0.5em; }
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block; }
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0; }
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none; }
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden; }
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */ }
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible; }
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none; }
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
/* 2 */ }
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0; }
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText; }
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em; }
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */ }
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */ }
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto; }
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */ }
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto; }
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */ }
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */ }
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details,
menu {
display: block; }
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item; }
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block; }
/**
* Add the correct display in IE.
*/
template {
display: none; }
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none; }
/*
VARIABLES
*/
/*
DEBUG CHILDREN
Docs: http://tachyons.io/docs/debug/
Just add the debug class to any element to see outlines on its
children.
*/
.debug * {
outline: 1px solid gold; }
.debug-white * {
outline: 1px solid white; }
.debug-black * {
outline: 1px solid black; }
/*
DEBUG GRID
http://tachyons.io/docs/debug-grid/
Can be useful for debugging layout issues
or helping to make sure things line up perfectly.
Just tack one of these classes onto a parent element.
*/
.debug-grid {
background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDOTY4N0U2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDOTY4N0Q2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3NjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3NzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsBS+GMAAAAjSURBVHjaYvz//z8DLsD4gcGXiYEAGBIKGBne//fFpwAgwAB98AaF2pjlUQAAAABJRU5ErkJggg==) repeat top left; }
.debug-grid-16 {
background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODYyRjhERDU2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODYyRjhERDQ2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QTY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3QjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvCS01IAAABMSURBVHjaYmR4/5+BFPBfAMFm/MBgx8RAGWCn1AAmSg34Q6kBDKMGMDCwICeMIemF/5QawEipAWwUhwEjMDvbAWlWkvVBwu8vQIABAEwBCph8U6c0AAAAAElFTkSuQmCC) repeat top left; }
.debug-grid-8-solid {
background: white url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAAAAD/4QMxaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzExMSA3OS4xNTgzMjUsIDIwMTUvMDkvMTAtMDE6MTA6MjAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIxMjI0OTczNjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIxMjI0OTc0NjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjEyMjQ5NzE2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjEyMjQ5NzI2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAbGhopHSlBJiZBQi8vL0JHPz4+P0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHAR0pKTQmND8oKD9HPzU/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0f/wAARCAAIAAgDASIAAhEBAxEB/8QAWQABAQAAAAAAAAAAAAAAAAAAAAYBAQEAAAAAAAAAAAAAAAAAAAIEEAEBAAMBAAAAAAAAAAAAAAABADECA0ERAAEDBQAAAAAAAAAAAAAAAAARITFBUWESIv/aAAwDAQACEQMRAD8AoOnTV1QTD7JJshP3vSM3P//Z) repeat top left; }
.debug-grid-16-solid {
background: white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzY3MkJEN0U2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzY3MkJEN0Y2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3RDY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pve6J3kAAAAzSURBVHjaYvz//z8D0UDsMwMjSRoYP5Gq4SPNbRjVMEQ1fCRDg+in/6+J1AJUxsgAEGAA31BAJMS0GYEAAAAASUVORK5CYII=) repeat top left; }
/*
BOX SIZING
*/
html,
body,
div,
article,
section,
main,
footer,
header,
form,
fieldset,
legend,
pre,
code,
a,
h1, h2, h3, h4, h5, h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
textarea,
table,
td,
th,
tr,
input[type="email"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="text"],
input[type="url"],
.border-box {
box-sizing: border-box; }
/*
ASPECT RATIOS
*/
/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
* Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
* Make sure there are no height and width attributes on the embedded media.
* Adapted from: https://github.com/suitcss/components-flex-embed
*
* Example:
*
* <div class="aspect-ratio aspect-ratio--16x9">
* <iframe class="aspect-ratio--object"></iframe>
* </div>
*
* */
.aspect-ratio {
height: 0;
position: relative; }
.aspect-ratio--16x9 {
padding-bottom: 56.25%; }
.aspect-ratio--9x16 {
padding-bottom: 177.77%; }
.aspect-ratio--4x3 {
padding-bottom: 75%; }
.aspect-ratio--3x4 {
padding-bottom: 133.33%; }
.aspect-ratio--6x4 {
padding-bottom: 66.6%; }
.aspect-ratio--4x6 {
padding-bottom: 150%; }
.aspect-ratio--8x5 {
padding-bottom: 62.5%; }
.aspect-ratio--5x8 {
padding-bottom: 160%; }
.aspect-ratio--7x5 {
padding-bottom: 71.42%; }
.aspect-ratio--5x7 {
padding-bottom: 140%; }
.aspect-ratio--1x1 {
padding-bottom: 100%; }
.aspect-ratio--object {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100; }
@media screen and (min-width: 30em) {
.aspect-ratio-ns {
height: 0;
position: relative; }
.aspect-ratio--16x9-ns {
padding-bottom: 56.25%; }
.aspect-ratio--9x16-ns {
padding-bottom: 177.77%; }
.aspect-ratio--4x3-ns {
padding-bottom: 75%; }
.aspect-ratio--3x4-ns {
padding-bottom: 133.33%; }
.aspect-ratio--6x4-ns {
padding-bottom: 66.6%; }
.aspect-ratio--4x6-ns {
padding-bottom: 150%; }
.aspect-ratio--8x5-ns {
padding-bottom: 62.5%; }
.aspect-ratio--5x8-ns {
padding-bottom: 160%; }
.aspect-ratio--7x5-ns {
padding-bottom: 71.42%; }
.aspect-ratio--5x7-ns {
padding-bottom: 140%; }
.aspect-ratio--1x1-ns {
padding-bottom: 100%; }
.aspect-ratio--object-ns {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.aspect-ratio-m {
height: 0;
position: relative; }
.aspect-ratio--16x9-m {
padding-bottom: 56.25%; }
.aspect-ratio--9x16-m {
padding-bottom: 177.77%; }
.aspect-ratio--4x3-m {
padding-bottom: 75%; }
.aspect-ratio--3x4-m {
padding-bottom: 133.33%; }
.aspect-ratio--6x4-m {
padding-bottom: 66.6%; }
.aspect-ratio--4x6-m {
padding-bottom: 150%; }
.aspect-ratio--8x5-m {
padding-bottom: 62.5%; }
.aspect-ratio--5x8-m {
padding-bottom: 160%; }
.aspect-ratio--7x5-m {
padding-bottom: 71.42%; }
.aspect-ratio--5x7-m {
padding-bottom: 140%; }
.aspect-ratio--1x1-m {
padding-bottom: 100%; }
.aspect-ratio--object-m {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100; } }
@media screen and (min-width: 60em) {
.aspect-ratio-l {
height: 0;
position: relative; }
.aspect-ratio--16x9-l {
padding-bottom: 56.25%; }
.aspect-ratio--9x16-l {
padding-bottom: 177.77%; }
.aspect-ratio--4x3-l {
padding-bottom: 75%; }
.aspect-ratio--3x4-l {
padding-bottom: 133.33%; }
.aspect-ratio--6x4-l {
padding-bottom: 66.6%; }
.aspect-ratio--4x6-l {
padding-bottom: 150%; }
.aspect-ratio--8x5-l {
padding-bottom: 62.5%; }
.aspect-ratio--5x8-l {
padding-bottom: 160%; }
.aspect-ratio--7x5-l {
padding-bottom: 71.42%; }
.aspect-ratio--5x7-l {
padding-bottom: 140%; }
.aspect-ratio--1x1-l {
padding-bottom: 100%; }
.aspect-ratio--object-l {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100; } }
/*
IMAGES
Docs: http://tachyons.io/docs/elements/images/
*/
/* Responsive images! */
img, video {
max-width: 100%; }
/*
BACKGROUND SIZE
Docs: http://tachyons.io/docs/themes/background-size/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/*
Often used in combination with background image set as an inline style
on an html element.
*/
.cover {
background-size: cover !important; }
.contain {
background-size: contain !important; }
@media screen and (min-width: 30em) {
.cover-ns {
background-size: cover !important; }
.contain-ns {
background-size: contain !important; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.cover-m {
background-size: cover !important; }
.contain-m {
background-size: contain !important; } }
@media screen and (min-width: 60em) {
.cover-l {
background-size: cover !important; }
.contain-l {
background-size: contain !important; } }
/*
BACKGROUND POSITION
Base:
bg = background
Modifiers:
-center = center center
-top = top center
-right = center right
-bottom = bottom center
-left = center left
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.bg-center {
background-repeat: no-repeat;
background-position: center center; }
.bg-top {
background-repeat: no-repeat;
background-position: top center; }
.bg-right {
background-repeat: no-repeat;
background-position: center right; }
.bg-bottom {
background-repeat: no-repeat;
background-position: bottom center; }
.bg-left {
background-repeat: no-repeat;
background-position: center left; }
@media screen and (min-width: 30em) {
.bg-center-ns {
background-repeat: no-repeat;
background-position: center center; }
.bg-top-ns {
background-repeat: no-repeat;
background-position: top center; }
.bg-right-ns {
background-repeat: no-repeat;
background-position: center right; }
.bg-bottom-ns {
background-repeat: no-repeat;
background-position: bottom center; }
.bg-left-ns {
background-repeat: no-repeat;
background-position: center left; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.bg-center-m {
background-repeat: no-repeat;
background-position: center center; }
.bg-top-m {
background-repeat: no-repeat;
background-position: top center; }
.bg-right-m {
background-repeat: no-repeat;
background-position: center right; }
.bg-bottom-m {
background-repeat: no-repeat;
background-position: bottom center; }
.bg-left-m {
background-repeat: no-repeat;
background-position: center left; } }
@media screen and (min-width: 60em) {
.bg-center-l {
background-repeat: no-repeat;
background-position: center center; }
.bg-top-l {
background-repeat: no-repeat;
background-position: top center; }
.bg-right-l {
background-repeat: no-repeat;
background-position: center right; }
.bg-bottom-l {
background-repeat: no-repeat;
background-position: bottom center; }
.bg-left-l {
background-repeat: no-repeat;
background-position: center left; } }
/*
OUTLINES
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.outline {
outline: 1px solid; }
.outline-transparent {
outline: 1px solid transparent; }
.outline-0 {
outline: 0; }
@media screen and (min-width: 30em) {
.outline-ns {
outline: 1px solid; }
.outline-transparent-ns {
outline: 1px solid transparent; }
.outline-0-ns {
outline: 0; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.outline-m {
outline: 1px solid; }
.outline-transparent-m {
outline: 1px solid transparent; }
.outline-0-m {
outline: 0; } }
@media screen and (min-width: 60em) {
.outline-l {
outline: 1px solid; }
.outline-transparent-l {
outline: 1px solid transparent; }
.outline-0-l {
outline: 0; } }
/*
BORDERS
Docs: http://tachyons.io/docs/themes/borders/
Base:
b = border
Modifiers:
a = all
t = top
r = right
b = bottom
l = left
n = none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.ba {
border-style: solid;
border-width: 1px; }
.bt {
border-top-style: solid;
border-top-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; }
.bn {
border-style: none;
border-width: 0; }
@media screen and (min-width: 30em) {
.ba-ns {
border-style: solid;
border-width: 1px; }
.bt-ns {
border-top-style: solid;
border-top-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; }
.bn-ns {
border-style: none;
border-width: 0; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.ba-m {
border-style: solid;
border-width: 1px; }
.bt-m {
border-top-style: solid;
border-top-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; }
.bn-m {
border-style: none;
border-width: 0; } }
@media screen and (min-width: 60em) {
.ba-l {
border-style: solid;
border-width: 1px; }
.bt-l {
border-top-style: solid;
border-top-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; }
.bn-l {
border-style: none;
border-width: 0; } }
/*
BORDER COLORS
Docs: http://tachyons.io/docs/themes/borders/
Border colors can be used to extend the base
border classes ba,bt,bb,br,bl found in the _borders.css file.
The base border class by default will set the color of the border
to that of the current text color. These classes are for the cases
where you desire for the text and border colors to be different.
Base:
b = border
Modifiers:
--color-name = each color variable name is also a border color name
*/
.b--black {
border-color: #000; }
.b--near-black {
border-color: #111; }
.b--dark-gray {
border-color: #333; }
.b--mid-gray {
border-color: #555; }
.b--gray {
border-color: #777; }
.b--silver {
border-color: #999; }
.b--light-silver {
border-color: #aaa; }
.b--moon-gray {
border-color: #ccc; }
.b--light-gray {
border-color: #eee; }
.b--near-white {
border-color: #f4f4f4; }
.b--white {
border-color: #fff; }
.b--white-90 {
border-color: rgba(255, 255, 255, 0.9); }
.b--white-80 {
border-color: rgba(255, 255, 255, 0.8); }
.b--white-70 {
border-color: rgba(255, 255, 255, 0.7); }
.b--white-60 {
border-color: rgba(255, 255, 255, 0.6); }
.b--white-50 {
border-color: rgba(255, 255, 255, 0.5); }
.b--white-40 {
border-color: rgba(255, 255, 255, 0.4); }
.b--white-30 {
border-color: rgba(255, 255, 255, 0.3); }
.b--white-20 {
border-color: rgba(255, 255, 255, 0.2); }
.b--white-10 {
border-color: rgba(255, 255, 255, 0.1); }
.b--white-05 {
border-color: rgba(255, 255, 255, 0.05); }
.b--white-025 {
border-color: rgba(255, 255, 255, 0.025); }
.b--white-0125 {
border-color: rgba(255, 255, 255, 0.0125); }
.b--black-90 {
border-color: rgba(0, 0, 0, 0.9); }
.b--black-80 {
border-color: rgba(0, 0, 0, 0.8); }
.b--black-70 {
border-color: rgba(0, 0, 0, 0.7); }
.b--black-60 {
border-color: rgba(0, 0, 0, 0.6); }
.b--black-50 {
border-color: rgba(0, 0, 0, 0.5); }
.b--black-40 {
border-color: rgba(0, 0, 0, 0.4); }
.b--black-30 {
border-color: rgba(0, 0, 0, 0.3); }
.b--black-20 {
border-color: rgba(0, 0, 0, 0.2); }
.b--black-10 {
border-color: rgba(0, 0, 0, 0.1); }
.b--black-05 {
border-color: rgba(0, 0, 0, 0.05); }
.b--black-025 {
border-color: rgba(0, 0, 0, 0.025); }
.b--black-0125 {
border-color: rgba(0, 0, 0, 0.0125); }
.b--dark-red {
border-color: #e7040f; }
.b--red {
border-color: #ff4136; }
.b--light-red {
border-color: #ff725c; }
.b--orange {
border-color: #ff6300; }
.b--gold {
border-color: #ffb700; }
.b--yellow {
border-color: #ffd700; }
.b--light-yellow {
border-color: #fbf1a9; }
.b--purple {
border-color: #5e2ca5; }
.b--light-purple {
border-color: #a463f2; }
.b--dark-pink {
border-color: #d5008f; }
.b--hot-pink {
border-color: #ff41b4; }
.b--pink {
border-color: #ff80cc; }
.b--light-pink {
border-color: #ffa3d7; }
.b--dark-green {
border-color: #137752; }
.b--green {
border-color: #19a974; }
.b--light-green {
border-color: #9eebcf; }
.b--navy {
border-color: #001b44; }
.b--dark-blue {
border-color: #00449e; }
.b--blue {
border-color: #357edd; }
.b--light-blue {
border-color: #96ccff; }
.b--lightest-blue {
border-color: #cdecff; }
.b--washed-blue {
border-color: #f6fffe; }
.b--washed-green {
border-color: #e8fdf5; }
.b--washed-yellow {
border-color: #fffceb; }
.b--washed-red {
border-color: #ffdfdf; }
.b--transparent {
border-color: transparent; }
.b--inherit {
border-color: inherit; }
/*
BORDER RADIUS
Docs: http://tachyons.io/docs/themes/border-radius/
Base:
br = border-radius
Modifiers:
0 = 0/none
1 = 1st step in scale
2 = 2nd step in scale
3 = 3rd step in scale
4 = 4th step in scale
Literal values:
-100 = 100%
-pill = 9999px
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.br0 {
border-radius: 0; }
.br1 {
border-radius: 0.125rem; }
.br2 {
border-radius: 0.25rem; }
.br3 {
border-radius: 0.5rem; }
.br4 {
border-radius: 1rem; }
.br-100 {
border-radius: 100%; }
.br-pill {
border-radius: 9999px; }
.br--bottom {
border-top-left-radius: 0;
border-top-right-radius: 0; }
.br--top {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.br--right {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.br--left {
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
@media screen and (min-width: 30em) {
.br0-ns {
border-radius: 0; }
.br1-ns {
border-radius: 0.125rem; }
.br2-ns {
border-radius: 0.25rem; }
.br3-ns {
border-radius: 0.5rem; }
.br4-ns {
border-radius: 1rem; }
.br-100-ns {
border-radius: 100%; }
.br-pill-ns {
border-radius: 9999px; }
.br--bottom-ns {
border-top-left-radius: 0;
border-top-right-radius: 0; }
.br--top-ns {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.br--right-ns {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.br--left-ns {
border-top-right-radius: 0;
border-bottom-right-radius: 0; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.br0-m {
border-radius: 0; }
.br1-m {
border-radius: 0.125rem; }
.br2-m {
border-radius: 0.25rem; }
.br3-m {
border-radius: 0.5rem; }
.br4-m {
border-radius: 1rem; }
.br-100-m {
border-radius: 100%; }
.br-pill-m {
border-radius: 9999px; }
.br--bottom-m {
border-top-left-radius: 0;
border-top-right-radius: 0; }
.br--top-m {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.br--right-m {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.br--left-m {
border-top-right-radius: 0;
border-bottom-right-radius: 0; } }
@media screen and (min-width: 60em) {
.br0-l {
border-radius: 0; }
.br1-l {
border-radius: 0.125rem; }
.br2-l {
border-radius: 0.25rem; }
.br3-l {
border-radius: 0.5rem; }
.br4-l {
border-radius: 1rem; }
.br-100-l {
border-radius: 100%; }
.br-pill-l {
border-radius: 9999px; }
.br--bottom-l {
border-top-left-radius: 0;
border-top-right-radius: 0; }
.br--top-l {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.br--right-l {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.br--left-l {
border-top-right-radius: 0;
border-bottom-right-radius: 0; } }
/*
BORDER STYLES
Docs: http://tachyons.io/docs/themes/borders/
Depends on base border module in _borders.css
Base:
b = border-style
Modifiers:
--none = none
--dotted = dotted
--dashed = dashed
--solid = solid
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.b--dotted {
border-style: dotted; }
.b--dashed {
border-style: dashed; }
.b--solid {
border-style: solid; }
.b--none {
border-style: none; }
@media screen and (min-width: 30em) {
.b--dotted-ns {
border-style: dotted; }
.b--dashed-ns {
border-style: dashed; }
.b--solid-ns {
border-style: solid; }
.b--none-ns {
border-style: none; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.b--dotted-m {
border-style: dotted; }
.b--dashed-m {
border-style: dashed; }
.b--solid-m {
border-style: solid; }
.b--none-m {
border-style: none; } }
@media screen and (min-width: 60em) {
.b--dotted-l {
border-style: dotted; }
.b--dashed-l {
border-style: dashed; }
.b--solid-l {
border-style: solid; }
.b--none-l {
border-style: none; } }
/*
BORDER WIDTHS
Docs: http://tachyons.io/docs/themes/borders/
Base:
bw = border-width
Modifiers:
0 = 0 width border
1 = 1st step in border-width scale
2 = 2nd step in border-width scale
3 = 3rd step in border-width scale
4 = 4th step in border-width scale
5 = 5th step in border-width scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.bw0 {
border-width: 0; }
.bw1 {
border-width: 0.125rem; }
.bw2 {
border-width: 0.25rem; }
.bw3 {
border-width: 0.5rem; }
.bw4 {
border-width: 1rem; }
.bw5 {
border-width: 2rem; }
/* Resets */
.bt-0 {
border-top-width: 0; }
.br-0 {
border-right-width: 0; }
.bb-0 {
border-bottom-width: 0; }
.bl-0 {
border-left-width: 0; }
@media screen and (min-width: 30em) {
.bw0-ns {
border-width: 0; }
.bw1-ns {
border-width: 0.125rem; }
.bw2-ns {
border-width: 0.25rem; }
.bw3-ns {
border-width: 0.5rem; }
.bw4-ns {
border-width: 1rem; }
.bw5-ns {
border-width: 2rem; }
.bt-0-ns {
border-top-width: 0; }
.br-0-ns {
border-right-width: 0; }
.bb-0-ns {
border-bottom-width: 0; }
.bl-0-ns {
border-left-width: 0; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.bw0-m {
border-width: 0; }
.bw1-m {
border-width: 0.125rem; }
.bw2-m {
border-width: 0.25rem; }
.bw3-m {
border-width: 0.5rem; }
.bw4-m {
border-width: 1rem; }
.bw5-m {
border-width: 2rem; }
.bt-0-m {
border-top-width: 0; }
.br-0-m {
border-right-width: 0; }
.bb-0-m {
border-bottom-width: 0; }
.bl-0-m {
border-left-width: 0; } }
@media screen and (min-width: 60em) {
.bw0-l {
border-width: 0; }
.bw1-l {
border-width: 0.125rem; }
.bw2-l {
border-width: 0.25rem; }
.bw3-l {
border-width: 0.5rem; }
.bw4-l {
border-width: 1rem; }
.bw5-l {
border-width: 2rem; }
.bt-0-l {
border-top-width: 0; }
.br-0-l {
border-right-width: 0; }
.bb-0-l {
border-bottom-width: 0; }
.bl-0-l {
border-left-width: 0; } }
/*
BOX-SHADOW
Docs: http://tachyons.io/docs/themes/box-shadow/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.shadow-1 {
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); }
.shadow-2 {
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2); }
.shadow-3 {
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); }
.shadow-4 {
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); }
.shadow-5 {
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2); }
@media screen and (min-width: 30em) {
.shadow-1-ns {
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); }
.shadow-2-ns {
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2); }
.shadow-3-ns {
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); }
.shadow-4-ns {
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); }
.shadow-5-ns {
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2); } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.shadow-1-m {
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); }
.shadow-2-m {
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2); }
.shadow-3-m {
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); }
.shadow-4-m {
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); }
.shadow-5-m {
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2); } }
@media screen and (min-width: 60em) {
.shadow-1-l {
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); }
.shadow-2-l {
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2); }
.shadow-3-l {
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); }
.shadow-4-l {
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); }
.shadow-5-l {
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2); } }
/*
CODE
*/
.pre {
overflow-x: auto;
overflow-y: hidden;
overflow: scroll; }
/*
COORDINATES
Docs: http://tachyons.io/docs/layout/position/
Use in combination with the position module.
Base:
top
bottom
right
left
Modifiers:
-0 = literal value 0
-1 = literal value 1
-2 = literal value 2
--1 = literal value -1
--2 = literal value -2
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.top-0 {
top: 0; }
.right-0 {
right: 0; }
.bottom-0 {
bottom: 0; }
.left-0 {
left: 0; }
.top-1 {
top: 1rem; }
.right-1 {
right: 1rem; }
.bottom-1 {
bottom: 1rem; }
.left-1 {
left: 1rem; }
.top-2 {
top: 2rem; }
.right-2 {
right: 2rem; }
.bottom-2 {
bottom: 2rem; }
.left-2 {
left: 2rem; }
.top--1 {
top: -1rem; }
.right--1 {
right: -1rem; }
.bottom--1 {
bottom: -1rem; }
.left--1 {
left: -1rem; }
.top--2 {
top: -2rem; }
.right--2 {
right: -2rem; }
.bottom--2 {
bottom: -2rem; }
.left--2 {
left: -2rem; }
.absolute--fill {
top: 0;
right: 0;
bottom: 0;
left: 0; }
@media screen and (min-width: 30em) {
.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--1-ns {
top: -1rem; }
.right--1-ns {
right: -1rem; }
.bottom--1-ns {
bottom: -1rem; }
.left--1-ns {
left: -1rem; }
.top--2-ns {
top: -2rem; }
.right--2-ns {
right: -2rem; }
.bottom--2-ns {
bottom: -2rem; }
.left--2-ns {
left: -2rem; }
.absolute--fill-ns {
top: 0;
right: 0;
bottom: 0;
left: 0; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.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--1-m {
top: -1rem; }
.right--1-m {
right: -1rem; }
.bottom--1-m {
bottom: -1rem; }
.left--1-m {
left: -1rem; }
.top--2-m {
top: -2rem; }
.right--2-m {
right: -2rem; }
.bottom--2-m {
bottom: -2rem; }
.left--2-m {
left: -2rem; }
.absolute--fill-m {
top: 0;
right: 0;
bottom: 0;
left: 0; } }
@media screen and (min-width: 60em) {
.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--1-l {
top: -1rem; }
.right--1-l {
right: -1rem; }
.bottom--1-l {
bottom: -1rem; }
.left--1-l {
left: -1rem; }
.top--2-l {
top: -2rem; }
.right--2-l {
right: -2rem; }
.bottom--2-l {
bottom: -2rem; }
.left--2-l {
left: -2rem; }
.absolute--fill-l {
top: 0;
right: 0;
bottom: 0;
left: 0; } }
/*
CLEARFIX
http://tachyons.io/docs/layout/clearfix/
*/
/* 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; }
.cl {
clear: left; }
.cr {
clear: right; }
.cb {
clear: both; }
.cn {
clear: none; }
@media screen and (min-width: 30em) {
.cl-ns {
clear: left; }
.cr-ns {
clear: right; }
.cb-ns {
clear: both; }
.cn-ns {
clear: none; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.cl-m {
clear: left; }
.cr-m {
clear: right; }
.cb-m {
clear: both; }
.cn-m {
clear: none; } }
@media screen and (min-width: 60em) {
.cl-l {
clear: left; }
.cr-l {
clear: right; }
.cb-l {
clear: both; }
.cn-l {
clear: none; } }
/*
DISPLAY
Docs: http://tachyons.io/docs/layout/display
Base:
d = display
Modifiers:
n = none
b = block
ib = inline-block
it = inline-table
t = table
tc = table-cell
tr = table-row
tcol = table-column
tcolg = table-column-group
Media Query Extensions:
-ns = not-small
-m = medium
-l = 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; }
.dt-row {
display: table-row; }
.dt-row-group {
display: table-row-group; }
.dt-column {
display: table-column; }
.dt-column-group {
display: table-column-group; }
/*
This will set table to full width and then
all cells will be equal width
*/
.dt--fixed {
table-layout: fixed;
width: 100%; }
@media screen and (min-width: 30em) {
.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; }
.dt-row-ns {
display: table-row; }
.dt-row-group-ns {
display: table-row-group; }
.dt-column-ns {
display: table-column; }
.dt-column-group-ns {
display: table-column-group; }
.dt--fixed-ns {
table-layout: fixed;
width: 100%; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.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; }
.dt-row-m {
display: table-row; }
.dt-row-group-m {
display: table-row-group; }
.dt-column-m {
display: table-column; }
.dt-column-group-m {
display: table-column-group; }
.dt--fixed-m {
table-layout: fixed;
width: 100%; } }
@media screen and (min-width: 60em) {
.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; }
.dt-row-l {
display: table-row; }
.dt-row-group-l {
display: table-row-group; }
.dt-column-l {
display: table-column; }
.dt-column-group-l {
display: table-column-group; }
.dt--fixed-l {
table-layout: fixed;
width: 100%; } }
/*
FLEXBOX
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.flex {
display: flex; }
.inline-flex {
display: inline-flex; }
/* 1. Fix for Chrome 44 bug.
* https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex-auto {
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */ }
.flex-none {
flex: none; }
.flex-column {
flex-direction: column; }
.flex-row {
flex-direction: row; }
.flex-wrap {
flex-wrap: wrap; }
.flex-nowrap {
flex-wrap: nowrap; }
.flex-wrap-reverse {
flex-wrap: wrap-reverse; }
.flex-column-reverse {
flex-direction: column-reverse; }
.flex-row-reverse {
flex-direction: row-reverse; }
.items-start {
align-items: flex-start; }
.items-end {
align-items: flex-end; }
.items-center {
align-items: center; }
.items-baseline {
align-items: baseline; }
.items-stretch {
align-items: stretch; }
.self-start {
align-self: flex-start; }
.self-end {
align-self: flex-end; }
.self-center {
align-self: center; }
.self-baseline {
align-self: baseline; }
.self-stretch {
align-self: stretch; }
.justify-start {
justify-content: flex-start; }
.justify-end {
justify-content: flex-end; }
.justify-center {
justify-content: center; }
.justify-between {
justify-content: space-between; }
.justify-around {
justify-content: space-around; }
.content-start {
align-content: flex-start; }
.content-end {
align-content: flex-end; }
.content-center {
align-content: center; }
.content-between {
align-content: space-between; }
.content-around {
align-content: space-around; }
.content-stretch {
align-content: stretch; }
.order-0 {
order: 0; }
.order-1 {
order: 1; }
.order-2 {
order: 2; }
.order-3 {
order: 3; }
.order-4 {
order: 4; }
.order-5 {
order: 5; }
.order-6 {
order: 6; }
.order-7 {
order: 7; }
.order-8 {
order: 8; }
.order-last {
order: 99999; }
.flex-grow-0 {
flex-grow: 0; }
.flex-grow-1 {
flex-grow: 1; }
.flex-shrink-0 {
flex-shrink: 0; }
.flex-shrink-1 {
flex-shrink: 1; }
@media screen and (min-width: 30em) {
.flex-ns {
display: flex; }
.inline-flex-ns {
display: inline-flex; }
.flex-auto-ns {
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */ }
.flex-none-ns {
flex: none; }
.flex-column-ns {
flex-direction: column; }
.flex-row-ns {
flex-direction: row; }
.flex-wrap-ns {
flex-wrap: wrap; }
.flex-nowrap-ns {
flex-wrap: nowrap; }
.flex-wrap-reverse-ns {
flex-wrap: wrap-reverse; }
.flex-column-reverse-ns {
flex-direction: column-reverse; }
.flex-row-reverse-ns {
flex-direction: row-reverse; }
.items-start-ns {
align-items: flex-start; }
.items-end-ns {
align-items: flex-end; }
.items-center-ns {
align-items: center; }
.items-baseline-ns {
align-items: baseline; }
.items-stretch-ns {
align-items: stretch; }
.self-start-ns {
align-self: flex-start; }
.self-end-ns {
align-self: flex-end; }
.self-center-ns {
align-self: center; }
.self-baseline-ns {
align-self: baseline; }
.self-stretch-ns {
align-self: stretch; }
.justify-start-ns {
justify-content: flex-start; }
.justify-end-ns {
justify-content: flex-end; }
.justify-center-ns {
justify-content: center; }
.justify-between-ns {
justify-content: space-between; }
.justify-around-ns {
justify-content: space-around; }
.content-start-ns {
align-content: flex-start; }
.content-end-ns {
align-content: flex-end; }
.content-center-ns {
align-content: center; }
.content-between-ns {
align-content: space-between; }
.content-around-ns {
align-content: space-around; }
.content-stretch-ns {
align-content: stretch; }
.order-0-ns {
order: 0; }
.order-1-ns {
order: 1; }
.order-2-ns {
order: 2; }
.order-3-ns {
order: 3; }
.order-4-ns {
order: 4; }
.order-5-ns {
order: 5; }
.order-6-ns {
order: 6; }
.order-7-ns {
order: 7; }
.order-8-ns {
order: 8; }
.order-last-ns {
order: 99999; }
.flex-grow-0-ns {
flex-grow: 0; }
.flex-grow-1-ns {
flex-grow: 1; }
.flex-shrink-0-ns {
flex-shrink: 0; }
.flex-shrink-1-ns {
flex-shrink: 1; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.flex-m {
display: flex; }
.inline-flex-m {
display: inline-flex; }
.flex-auto-m {
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */ }
.flex-none-m {
flex: none; }
.flex-column-m {
flex-direction: column; }
.flex-row-m {
flex-direction: row; }
.flex-wrap-m {
flex-wrap: wrap; }
.flex-nowrap-m {
flex-wrap: nowrap; }
.flex-wrap-reverse-m {
flex-wrap: wrap-reverse; }
.flex-column-reverse-m {
flex-direction: column-reverse; }
.flex-row-reverse-m {
flex-direction: row-reverse; }
.items-start-m {
align-items: flex-start; }
.items-end-m {
align-items: flex-end; }
.items-center-m {
align-items: center; }
.items-baseline-m {
align-items: baseline; }
.items-stretch-m {
align-items: stretch; }
.self-start-m {
align-self: flex-start; }
.self-end-m {
align-self: flex-end; }
.self-center-m {
align-self: center; }
.self-baseline-m {
align-self: baseline; }
.self-stretch-m {
align-self: stretch; }
.justify-start-m {
justify-content: flex-start; }
.justify-end-m {
justify-content: flex-end; }
.justify-center-m {
justify-content: center; }
.justify-between-m {
justify-content: space-between; }
.justify-around-m {
justify-content: space-around; }
.content-start-m {
align-content: flex-start; }
.content-end-m {
align-content: flex-end; }
.content-center-m {
align-content: center; }
.content-between-m {
align-content: space-between; }
.content-around-m {
align-content: space-around; }
.content-stretch-m {
align-content: stretch; }
.order-0-m {
order: 0; }
.order-1-m {
order: 1; }
.order-2-m {
order: 2; }
.order-3-m {
order: 3; }
.order-4-m {
order: 4; }
.order-5-m {
order: 5; }
.order-6-m {
order: 6; }
.order-7-m {
order: 7; }
.order-8-m {
order: 8; }
.order-last-m {
order: 99999; }
.flex-grow-0-m {
flex-grow: 0; }
.flex-grow-1-m {
flex-grow: 1; }
.flex-shrink-0-m {
flex-shrink: 0; }
.flex-shrink-1-m {
flex-shrink: 1; } }
@media screen and (min-width: 60em) {
.flex-l {
display: flex; }
.inline-flex-l {
display: inline-flex; }
.flex-auto-l {
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */ }
.flex-none-l {
flex: none; }
.flex-column-l {
flex-direction: column; }
.flex-row-l {
flex-direction: row; }
.flex-wrap-l {
flex-wrap: wrap; }
.flex-nowrap-l {
flex-wrap: nowrap; }
.flex-wrap-reverse-l {
flex-wrap: wrap-reverse; }
.flex-column-reverse-l {
flex-direction: column-reverse; }
.flex-row-reverse-l {
flex-direction: row-reverse; }
.items-start-l {
align-items: flex-start; }
.items-end-l {
align-items: flex-end; }
.items-center-l {
align-items: center; }
.items-baseline-l {
align-items: baseline; }
.items-stretch-l {
align-items: stretch; }
.self-start-l {
align-self: flex-start; }
.self-end-l {
align-self: flex-end; }
.self-center-l {
align-self: center; }
.self-baseline-l {
align-self: baseline; }
.self-stretch-l {
align-self: stretch; }
.justify-start-l {
justify-content: flex-start; }
.justify-end-l {
justify-content: flex-end; }
.justify-center-l {
justify-content: center; }
.justify-between-l {
justify-content: space-between; }
.justify-around-l {
justify-content: space-around; }
.content-start-l {
align-content: flex-start; }
.content-end-l {
align-content: flex-end; }
.content-center-l {
align-content: center; }
.content-between-l {
align-content: space-between; }
.content-around-l {
align-content: space-around; }
.content-stretch-l {
align-content: stretch; }
.order-0-l {
order: 0; }
.order-1-l {
order: 1; }
.order-2-l {
order: 2; }
.order-3-l {
order: 3; }
.order-4-l {
order: 4; }
.order-5-l {
order: 5; }
.order-6-l {
order: 6; }
.order-7-l {
order: 7; }
.order-8-l {
order: 8; }
.order-last-l {
order: 99999; }
.flex-grow-0-l {
flex-grow: 0; }
.flex-grow-1-l {
flex-grow: 1; }
.flex-shrink-0-l {
flex-shrink: 0; }
.flex-shrink-1-l {
flex-shrink: 1; } }
/*
FLOATS
http://tachyons.io/docs/layout/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.
2. Don't forget to clearfix your floats with .cf
Base:
f = float
Modifiers:
l = left
r = right
n = none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.fl {
float: left;
_display: inline; }
.fr {
float: right;
_display: inline; }
.fn {
float: none; }
@media screen and (min-width: 30em) {
.fl-ns {
float: left;
_display: inline; }
.fr-ns {
float: right;
_display: inline; }
.fn-ns {
float: none; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.fl-m {
float: left;
_display: inline; }
.fr-m {
float: right;
_display: inline; }
.fn-m {
float: none; } }
@media screen and (min-width: 60em) {
.fl-l {
float: left;
_display: inline; }
.fr-l {
float: right;
_display: inline; }
.fn-l {
float: none; } }
/*
FONT FAMILY GROUPS
Docs: http://tachyons.io/docs/typography/font-family/
*/
.sans-serif {
font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial, sans-serif; }
.serif {
font-family: georgia, serif; }
.system-sans-serif {
font-family: sans-serif; }
.system-serif {
font-family: serif; }
/* Monospaced Typefaces (for code) */
/* From http://cssfontstack.com */
code, .code {
font-family: Consolas, monaco, monospace; }
.courier {
font-family: 'Courier Next', courier, monospace; }
/* Sans-Serif Typefaces */
.helvetica {
font-family: 'helvetica neue', helvetica, sans-serif; }
.avenir {
font-family: 'avenir next', avenir, sans-serif; }
/* Serif Typefaces */
.athelas {
font-family: athelas, georgia, serif; }
.georgia {
font-family: georgia, serif; }
.times {
font-family: times, serif; }
.bodoni {
font-family: "Bodoni MT", serif; }
.calisto {
font-family: "Calisto MT", serif; }
.garamond {
font-family: garamond, serif; }
.baskerville {
font-family: baskerville, serif; }
/*
FONT STYLE
Docs: http://tachyons.io/docs/typography/font-style/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.i {
font-style: italic; }
.fs-normal {
font-style: normal; }
@media screen and (min-width: 30em) {
.i-ns {
font-style: italic; }
.fs-normal-ns {
font-style: normal; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.i-m {
font-style: italic; }
.fs-normal-m {
font-style: normal; } }
@media screen and (min-width: 60em) {
.i-l {
font-style: italic; }
.fs-normal-l {
font-style: normal; } }
/*
FONT WEIGHT
Docs: http://tachyons.io/docs/typography/font-weight/
Base
fw = font-weight
Modifiers:
1 = literal value 100
2 = literal value 200
3 = literal value 300
4 = literal value 400
5 = literal value 500
6 = literal value 600
7 = literal value 700
8 = literal value 800
9 = literal value 900
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.normal {
font-weight: normal; }
.b {
font-weight: bold; }
.fw1 {
font-weight: 100; }
.fw2 {
font-weight: 200; }
.fw3 {
font-weight: 300; }
.fw4 {
font-weight: 400; }
.fw5 {
font-weight: 500; }
.fw6 {
font-weight: 600; }
.fw7 {
font-weight: 700; }
.fw8 {
font-weight: 800; }
.fw9 {
font-weight: 900; }
@media screen and (min-width: 30em) {
.normal-ns {
font-weight: normal; }
.b-ns {
font-weight: bold; }
.fw1-ns {
font-weight: 100; }
.fw2-ns {
font-weight: 200; }
.fw3-ns {
font-weight: 300; }
.fw4-ns {
font-weight: 400; }
.fw5-ns {
font-weight: 500; }
.fw6-ns {
font-weight: 600; }
.fw7-ns {
font-weight: 700; }
.fw8-ns {
font-weight: 800; }
.fw9-ns {
font-weight: 900; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.normal-m {
font-weight: normal; }
.b-m {
font-weight: bold; }
.fw1-m {
font-weight: 100; }
.fw2-m {
font-weight: 200; }
.fw3-m {
font-weight: 300; }
.fw4-m {
font-weight: 400; }
.fw5-m {
font-weight: 500; }
.fw6-m {
font-weight: 600; }
.fw7-m {
font-weight: 700; }
.fw8-m {
font-weight: 800; }
.fw9-m {
font-weight: 900; } }
@media screen and (min-width: 60em) {
.normal-l {
font-weight: normal; }
.b-l {
font-weight: bold; }
.fw1-l {
font-weight: 100; }
.fw2-l {
font-weight: 200; }
.fw3-l {
font-weight: 300; }
.fw4-l {
font-weight: 400; }
.fw5-l {
font-weight: 500; }
.fw6-l {
font-weight: 600; }
.fw7-l {
font-weight: 700; }
.fw8-l {
font-weight: 800; }
.fw9-l {
font-weight: 900; } }
/*
FORMS
*/
.input-reset {
-webkit-appearance: none;
-moz-appearance: none; }
.button-reset::-moz-focus-inner,
.input-reset::-moz-focus-inner {
border: 0;
padding: 0; }
/*
HEIGHTS
Docs: http://tachyons.io/docs/layout/heights/
Base:
h = height
min-h = min-height
min-vh = min-height vertical screen height
vh = vertical screen height
Modifiers
1 = 1st step in height scale
2 = 2nd step in height scale
3 = 3rd step in height scale
4 = 4th step in height scale
5 = 5th step in height scale
-25 = literal value 25%
-50 = literal value 50%
-75 = literal value 75%
-100 = literal value 100%
-auto = string value of auto
-inherit = string value of inherit
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Height Scale */
.h1 {
height: 1rem; }
.h2 {
height: 2rem; }
.h3 {
height: 4rem; }
.h4 {
height: 8rem; }
.h5 {
height: 16rem; }
/* Height Percentages - Based off of height of parent */
.h-25 {
height: 25%; }
.h-50 {
height: 50%; }
.h-75 {
height: 75%; }
.h-100 {
height: 100%; }
.min-h-100 {
min-height: 100%; }
/* Screen Height Percentage */
.vh-25 {
height: 25vh; }
.vh-50 {
height: 50vh; }
.vh-75 {
height: 75vh; }
.vh-100 {
height: 100vh; }
.min-vh-100 {
min-height: 100vh; }
/* String Properties */
.h-auto {
height: auto; }
.h-inherit {
height: inherit; }
@media screen and (min-width: 30em) {
.h1-ns {
height: 1rem; }
.h2-ns {
height: 2rem; }
.h3-ns {
height: 4rem; }
.h4-ns {
height: 8rem; }
.h5-ns {
height: 16rem; }
.h-25-ns {
height: 25%; }
.h-50-ns {
height: 50%; }
.h-75-ns {
height: 75%; }
.h-100-ns {
height: 100%; }
.min-h-100-ns {
min-height: 100%; }
.vh-25-ns {
height: 25vh; }
.vh-50-ns {
height: 50vh; }
.vh-75-ns {
height: 75vh; }
.vh-100-ns {
height: 100vh; }
.min-vh-100-ns {
min-height: 100vh; }
.h-auto-ns {
height: auto; }
.h-inherit-ns {
height: inherit; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.h1-m {
height: 1rem; }
.h2-m {
height: 2rem; }
.h3-m {
height: 4rem; }
.h4-m {
height: 8rem; }
.h5-m {
height: 16rem; }
.h-25-m {
height: 25%; }
.h-50-m {
height: 50%; }
.h-75-m {
height: 75%; }
.h-100-m {
height: 100%; }
.min-h-100-m {
min-height: 100%; }
.vh-25-m {
height: 25vh; }
.vh-50-m {
height: 50vh; }
.vh-75-m {
height: 75vh; }
.vh-100-m {
height: 100vh; }
.min-vh-100-m {
min-height: 100vh; }
.h-auto-m {
height: auto; }
.h-inherit-m {
height: inherit; } }
@media screen and (min-width: 60em) {
.h1-l {
height: 1rem; }
.h2-l {
height: 2rem; }
.h3-l {
height: 4rem; }
.h4-l {
height: 8rem; }
.h5-l {
height: 16rem; }
.h-25-l {
height: 25%; }
.h-50-l {
height: 50%; }
.h-75-l {
height: 75%; }
.h-100-l {
height: 100%; }
.min-h-100-l {
min-height: 100%; }
.vh-25-l {
height: 25vh; }
.vh-50-l {
height: 50vh; }
.vh-75-l {
height: 75vh; }
.vh-100-l {
height: 100vh; }
.min-vh-100-l {
min-height: 100vh; }
.h-auto-l {
height: auto; }
.h-inherit-l {
height: inherit; } }
/*
LETTER SPACING
Docs: http://tachyons.io/docs/typography/tracking/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.tracked {
letter-spacing: 0.1em; }
.tracked-tight {
letter-spacing: -0.05em; }
.tracked-mega {
letter-spacing: 0.25em; }
@media screen and (min-width: 30em) {
.tracked-ns {
letter-spacing: 0.1em; }
.tracked-tight-ns {
letter-spacing: -0.05em; }
.tracked-mega-ns {
letter-spacing: 0.25em; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.tracked-m {
letter-spacing: 0.1em; }
.tracked-tight-m {
letter-spacing: -0.05em; }
.tracked-mega-m {
letter-spacing: 0.25em; } }
@media screen and (min-width: 60em) {
.tracked-l {
letter-spacing: 0.1em; }
.tracked-tight-l {
letter-spacing: -0.05em; }
.tracked-mega-l {
letter-spacing: 0.25em; } }
/*
LINE HEIGHT / LEADING
Docs: http://tachyons.io/docs/typography/line-height
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.lh-solid {
line-height: 1; }
.lh-title {
line-height: 1.25; }
.lh-copy {
line-height: 1.5; }
@media screen and (min-width: 30em) {
.lh-solid-ns {
line-height: 1; }
.lh-title-ns {
line-height: 1.25; }
.lh-copy-ns {
line-height: 1.5; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.lh-solid-m {
line-height: 1; }
.lh-title-m {
line-height: 1.25; }
.lh-copy-m {
line-height: 1.5; } }
@media screen and (min-width: 60em) {
.lh-solid-l {
line-height: 1; }
.lh-title-l {
line-height: 1.25; }
.lh-copy-l {
line-height: 1.5; } }
/*
LINKS
Docs: http://tachyons.io/docs/elements/links/
*/
.link {
text-decoration: none;
transition: color .15s ease-in; }
.link:link,
.link:visited {
transition: color .15s ease-in; }
.link:hover {
transition: color .15s ease-in; }
.link:active {
transition: color .15s ease-in; }
.link:focus {
transition: color .15s ease-in;
outline: 1px dotted currentColor; }
/*
LISTS
http://tachyons.io/docs/elements/lists/
*/
.list {
list-style-type: none; }
/*
MAX WIDTHS
Docs: http://tachyons.io/docs/layout/max-widths/
Base:
mw = max-width
Modifiers
1 = 1st step in width scale
2 = 2nd step in width scale
3 = 3rd step in width scale
4 = 4th step in width scale
5 = 5th step in width scale
6 = 6st step in width scale
7 = 7nd step in width scale
8 = 8rd step in width scale
9 = 9th step in width scale
-100 = literal value 100%
-none = string value none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Max Width Percentages */
.mw-100 {
max-width: 100%; }
/* Max Width Scale */
.mw1 {
max-width: 1rem; }
.mw2 {
max-width: 2rem; }
.mw3 {
max-width: 4rem; }
.mw4 {
max-width: 8rem; }
.mw5 {
max-width: 16rem; }
.mw6 {
max-width: 32rem; }
.mw7 {
max-width: 48rem; }
.mw8 {
max-width: 64rem; }
.mw9 {
max-width: 96rem; }
/* Max Width String Properties */
.mw-none {
max-width: none; }
@media screen and (min-width: 30em) {
.mw-100-ns {
max-width: 100%; }
.mw1-ns {
max-width: 1rem; }
.mw2-ns {
max-width: 2rem; }
.mw3-ns {
max-width: 4rem; }
.mw4-ns {
max-width: 8rem; }
.mw5-ns {
max-width: 16rem; }
.mw6-ns {
max-width: 32rem; }
.mw7-ns {
max-width: 48rem; }
.mw8-ns {
max-width: 64rem; }
.mw9-ns {
max-width: 96rem; }
.mw-none-ns {
max-width: none; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.mw-100-m {
max-width: 100%; }
.mw1-m {
max-width: 1rem; }
.mw2-m {
max-width: 2rem; }
.mw3-m {
max-width: 4rem; }
.mw4-m {
max-width: 8rem; }
.mw5-m {
max-width: 16rem; }
.mw6-m {
max-width: 32rem; }
.mw7-m {
max-width: 48rem; }
.mw8-m {
max-width: 64rem; }
.mw9-m {
max-width: 96rem; }
.mw-none-m {
max-width: none; } }
@media screen and (min-width: 60em) {
.mw-100-l {
max-width: 100%; }
.mw1-l {
max-width: 1rem; }
.mw2-l {
max-width: 2rem; }
.mw3-l {
max-width: 4rem; }
.mw4-l {
max-width: 8rem; }
.mw5-l {
max-width: 16rem; }
.mw6-l {
max-width: 32rem; }
.mw7-l {
max-width: 48rem; }
.mw8-l {
max-width: 64rem; }
.mw9-l {
max-width: 96rem; }
.mw-none-l {
max-width: none; } }
/*
WIDTHS
Docs: http://tachyons.io/docs/layout/widths/
Base:
w = width
Modifiers
1 = 1st step in width scale
2 = 2nd step in width scale
3 = 3rd step in width scale
4 = 4th step in width scale
5 = 5th step in width scale
-10 = literal value 10%
-20 = literal value 20%
-25 = literal value 25%
-30 = literal value 30%
-33 = literal value 33%
-34 = literal value 34%
-40 = literal value 40%
-50 = literal value 50%
-60 = literal value 60%
-70 = literal value 70%
-75 = literal value 75%
-80 = literal value 80%
-90 = literal value 90%
-100 = literal value 100%
-third = 100% / 3 (Not supported in opera mini or IE8)
-two-thirds = 100% / 1.5 (Not supported in opera mini or IE8)
-auto = string value auto
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Width Scale */
.w1 {
width: 1rem; }
.w2, .project-carousel-container .project-carousel-button.active {
width: 2rem; }
.w3 {
width: 4rem; }
.w4 {
width: 8rem; }
.w5 {
width: 16rem; }
.w-10 {
width: 10%; }
.w-20 {
width: 20%; }
.w-25 {
width: 25%; }
.w-30 {
width: 30%; }
.w-33 {
width: 33%; }
.w-34 {
width: 34%; }
.w-40 {
width: 40%; }
.w-50 {
width: 50%; }
.w-60 {
width: 60%; }
.w-70 {
width: 70%; }
.w-75 {
width: 75%; }
.w-80 {
width: 80%; }
.w-90 {
width: 90%; }
.w-100 {
width: 100%; }
.w-third {
width: 33.33333%; }
.w-two-thirds {
width: 66.66667%; }
.w-auto {
width: auto; }
@media screen and (min-width: 30em) {
.w1-ns {
width: 1rem; }
.w2-ns {
width: 2rem; }
.w3-ns {
width: 4rem; }
.w4-ns {
width: 8rem; }
.w5-ns {
width: 16rem; }
.w-10-ns {
width: 10%; }
.w-20-ns {
width: 20%; }
.w-25-ns {
width: 25%; }
.w-30-ns {
width: 30%; }
.w-33-ns {
width: 33%; }
.w-34-ns {
width: 34%; }
.w-40-ns {
width: 40%; }
.w-50-ns {
width: 50%; }
.w-60-ns {
width: 60%; }
.w-70-ns {
width: 70%; }
.w-75-ns {
width: 75%; }
.w-80-ns {
width: 80%; }
.w-90-ns {
width: 90%; }
.w-100-ns {
width: 100%; }
.w-third-ns {
width: 33.33333%; }
.w-two-thirds-ns {
width: 66.66667%; }
.w-auto-ns {
width: auto; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.w1-m {
width: 1rem; }
.w2-m {
width: 2rem; }
.w3-m {
width: 4rem; }
.w4-m {
width: 8rem; }
.w5-m {
width: 16rem; }
.w-10-m {
width: 10%; }
.w-20-m {
width: 20%; }
.w-25-m {
width: 25%; }
.w-30-m {
width: 30%; }
.w-33-m {
width: 33%; }
.w-34-m {
width: 34%; }
.w-40-m {
width: 40%; }
.w-50-m {
width: 50%; }
.w-60-m {
width: 60%; }
.w-70-m {
width: 70%; }
.w-75-m {
width: 75%; }
.w-80-m {
width: 80%; }
.w-90-m {
width: 90%; }
.w-100-m {
width: 100%; }
.w-third-m {
width: 33.33333%; }
.w-two-thirds-m {
width: 66.66667%; }
.w-auto-m {
width: auto; } }
@media screen and (min-width: 60em) {
.w1-l {
width: 1rem; }
.w2-l {
width: 2rem; }
.w3-l {
width: 4rem; }
.w4-l {
width: 8rem; }
.w5-l {
width: 16rem; }
.w-10-l {
width: 10%; }
.w-20-l {
width: 20%; }
.w-25-l {
width: 25%; }
.w-30-l {
width: 30%; }
.w-33-l {
width: 33%; }
.w-34-l {
width: 34%; }
.w-40-l {
width: 40%; }
.w-50-l {
width: 50%; }
.w-60-l {
width: 60%; }
.w-70-l {
width: 70%; }
.w-75-l {
width: 75%; }
.w-80-l {
width: 80%; }
.w-90-l {
width: 90%; }
.w-100-l {
width: 100%; }
.w-third-l {
width: 33.33333%; }
.w-two-thirds-l {
width: 66.66667%; }
.w-auto-l {
width: auto; } }
/*
OVERFLOW
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.overflow-visible {
overflow: visible; }
.overflow-hidden {
overflow: hidden; }
.overflow-scroll {
overflow: scroll; }
.overflow-auto {
overflow: auto; }
.overflow-x-visible {
overflow-x: visible; }
.overflow-x-hidden {
overflow-x: hidden; }
.overflow-x-scroll {
overflow-x: scroll; }
.overflow-x-auto {
overflow-x: auto; }
.overflow-y-visible {
overflow-y: visible; }
.overflow-y-hidden {
overflow-y: hidden; }
.overflow-y-scroll {
overflow-y: scroll; }
.overflow-y-auto {
overflow-y: auto; }
@media screen and (min-width: 30em) {
.overflow-visible-ns {
overflow: visible; }
.overflow-hidden-ns {
overflow: hidden; }
.overflow-scroll-ns {
overflow: scroll; }
.overflow-auto-ns {
overflow: auto; }
.overflow-x-visible-ns {
overflow-x: visible; }
.overflow-x-hidden-ns {
overflow-x: hidden; }
.overflow-x-scroll-ns {
overflow-x: scroll; }
.overflow-x-auto-ns {
overflow-x: auto; }
.overflow-y-visible-ns {
overflow-y: visible; }
.overflow-y-hidden-ns {
overflow-y: hidden; }
.overflow-y-scroll-ns {
overflow-y: scroll; }
.overflow-y-auto-ns {
overflow-y: auto; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.overflow-visible-m {
overflow: visible; }
.overflow-hidden-m {
overflow: hidden; }
.overflow-scroll-m {
overflow: scroll; }
.overflow-auto-m {
overflow: auto; }
.overflow-x-visible-m {
overflow-x: visible; }
.overflow-x-hidden-m {
overflow-x: hidden; }
.overflow-x-scroll-m {
overflow-x: scroll; }
.overflow-x-auto-m {
overflow-x: auto; }
.overflow-y-visible-m {
overflow-y: visible; }
.overflow-y-hidden-m {
overflow-y: hidden; }
.overflow-y-scroll-m {
overflow-y: scroll; }
.overflow-y-auto-m {
overflow-y: auto; } }
@media screen and (min-width: 60em) {
.overflow-visible-l {
overflow: visible; }
.overflow-hidden-l {
overflow: hidden; }
.overflow-scroll-l {
overflow: scroll; }
.overflow-auto-l {
overflow: auto; }
.overflow-x-visible-l {
overflow-x: visible; }
.overflow-x-hidden-l {
overflow-x: hidden; }
.overflow-x-scroll-l {
overflow-x: scroll; }
.overflow-x-auto-l {
overflow-x: auto; }
.overflow-y-visible-l {
overflow-y: visible; }
.overflow-y-hidden-l {
overflow-y: hidden; }
.overflow-y-scroll-l {
overflow-y: scroll; }
.overflow-y-auto-l {
overflow-y: auto; } }
/*
POSITIONING
Docs: http://tachyons.io/docs/layout/position/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.static {
position: static; }
.relative {
position: relative; }
.absolute {
position: absolute; }
.fixed {
position: fixed; }
@media screen and (min-width: 30em) {
.static-ns {
position: static; }
.relative-ns {
position: relative; }
.absolute-ns {
position: absolute; }
.fixed-ns {
position: fixed; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.static-m {
position: static; }
.relative-m {
position: relative; }
.absolute-m {
position: absolute; }
.fixed-m {
position: fixed; } }
@media screen and (min-width: 60em) {
.static-l {
position: static; }
.relative-l {
position: relative; }
.absolute-l {
position: absolute; }
.fixed-l {
position: fixed; } }
/*
OPACITY
Docs: http://tachyons.io/docs/themes/opacity/
*/
.o-100 {
opacity: 1; }
.o-90 {
opacity: .9; }
.o-80 {
opacity: .8; }
.o-70 {
opacity: .7; }
.o-60 {
opacity: .6; }
.o-50 {
opacity: .5; }
.o-40 {
opacity: .4; }
.o-30 {
opacity: .3; }
.o-20 {
opacity: .2; }
.o-10 {
opacity: .1; }
.o-05 {
opacity: .05; }
.o-025 {
opacity: .025; }
.o-0 {
opacity: 0; }
/*
ROTATIONS
*/
.rotate-45 {
transform: rotate(45deg); }
.rotate-90 {
transform: rotate(90deg); }
.rotate-135 {
transform: rotate(135deg); }
.rotate-180 {
transform: rotate(180deg); }
.rotate-225 {
transform: rotate(225deg); }
.rotate-270 {
transform: rotate(270deg); }
.rotate-315 {
transform: rotate(315deg); }
@media screen and (min-width: 30em) {
.rotate-45-ns {
transform: rotate(45deg); }
.rotate-90-ns {
transform: rotate(90deg); }
.rotate-135-ns {
transform: rotate(135deg); }
.rotate-180-ns {
transform: rotate(180deg); }
.rotate-225-ns {
transform: rotate(225deg); }
.rotate-270-ns {
transform: rotate(270deg); }
.rotate-315-ns {
transform: rotate(315deg); } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.rotate-45-m {
transform: rotate(45deg); }
.rotate-90-m {
transform: rotate(90deg); }
.rotate-135-m {
transform: rotate(135deg); }
.rotate-180-m {
transform: rotate(180deg); }
.rotate-225-m {
transform: rotate(225deg); }
.rotate-270-m {
transform: rotate(270deg); }
.rotate-315-m {
transform: rotate(315deg); } }
@media screen and (min-width: 60em) {
.rotate-45-l {
transform: rotate(45deg); }
.rotate-90-l {
transform: rotate(90deg); }
.rotate-135-l {
transform: rotate(135deg); }
.rotate-180-l {
transform: rotate(180deg); }
.rotate-225-l {
transform: rotate(225deg); }
.rotate-270-l {
transform: rotate(270deg); }
.rotate-315-l {
transform: rotate(315deg); } }
/*
SKINS
Docs: http://tachyons.io/docs/themes/skins/
Classes for setting foreground and background colors on elements.
If you haven't declared a border color, but set border on an element, it will
be set to the current text color.
*/
/* Text colors */
.black-90 {
color: rgba(0, 0, 0, 0.9); }
.black-80 {
color: rgba(0, 0, 0, 0.8); }
.black-70 {
color: rgba(0, 0, 0, 0.7); }
.black-60 {
color: rgba(0, 0, 0, 0.6); }
.black-50 {
color: rgba(0, 0, 0, 0.5); }
.black-40 {
color: rgba(0, 0, 0, 0.4); }
.black-30 {
color: rgba(0, 0, 0, 0.3); }
.black-20 {
color: rgba(0, 0, 0, 0.2); }
.black-10 {
color: rgba(0, 0, 0, 0.1); }
.black-05 {
color: rgba(0, 0, 0, 0.05); }
.white-90 {
color: rgba(255, 255, 255, 0.9); }
.white-80 {
color: rgba(255, 255, 255, 0.8); }
.white-70 {
color: rgba(255, 255, 255, 0.7); }
.white-60 {
color: rgba(255, 255, 255, 0.6); }
.white-50 {
color: rgba(255, 255, 255, 0.5); }
.white-40 {
color: rgba(255, 255, 255, 0.4); }
.white-30 {
color: rgba(255, 255, 255, 0.3); }
.white-20 {
color: rgba(255, 255, 255, 0.2); }
.white-10 {
color: rgba(255, 255, 255, 0.1); }
.black {
color: #000; }
.near-black {
color: #111; }
.dark-gray {
color: #333; }
.mid-gray {
color: #555; }
.gray {
color: #777; }
.silver {
color: #999; }
.light-silver {
color: #aaa; }
.moon-gray {
color: #ccc; }
.light-gray {
color: #eee; }
.near-white {
color: #f4f4f4; }
.white {
color: #fff; }
.dark-red {
color: #e7040f; }
.red {
color: #ff4136; }
.light-red {
color: #ff725c; }
.orange {
color: #ff6300; }
.gold {
color: #ffb700; }
.yellow {
color: #ffd700; }
.light-yellow {
color: #fbf1a9; }
.purple {
color: #5e2ca5; }
.light-purple {
color: #a463f2; }
.dark-pink {
color: #d5008f; }
.hot-pink {
color: #ff41b4; }
.pink {
color: #ff80cc; }
.light-pink {
color: #ffa3d7; }
.dark-green {
color: #137752; }
.green {
color: #19a974; }
.light-green {
color: #9eebcf; }
.navy {
color: #001b44; }
.dark-blue {
color: #00449e; }
.blue {
color: #357edd; }
.light-blue {
color: #96ccff; }
.lightest-blue {
color: #cdecff; }
.washed-blue {
color: #f6fffe; }
.washed-green {
color: #e8fdf5; }
.washed-yellow {
color: #fffceb; }
.washed-red {
color: #ffdfdf; }
.color-inherit {
color: inherit; }
.bg-black-90 {
background-color: rgba(0, 0, 0, 0.9); }
.bg-black-80 {
background-color: rgba(0, 0, 0, 0.8); }
.bg-black-70 {
background-color: rgba(0, 0, 0, 0.7); }
.bg-black-60 {
background-color: rgba(0, 0, 0, 0.6); }
.bg-black-50 {
background-color: rgba(0, 0, 0, 0.5); }
.bg-black-40 {
background-color: rgba(0, 0, 0, 0.4); }
.bg-black-30 {
background-color: rgba(0, 0, 0, 0.3); }
.bg-black-20 {
background-color: rgba(0, 0, 0, 0.2); }
.bg-black-10 {
background-color: rgba(0, 0, 0, 0.1); }
.bg-black-05 {
background-color: rgba(0, 0, 0, 0.05); }
.bg-white-90 {
background-color: rgba(255, 255, 255, 0.9); }
.bg-white-80 {
background-color: rgba(255, 255, 255, 0.8); }
.bg-white-70 {
background-color: rgba(255, 255, 255, 0.7); }
.bg-white-60 {
background-color: rgba(255, 255, 255, 0.6); }
.bg-white-50 {
background-color: rgba(255, 255, 255, 0.5); }
.bg-white-40 {
background-color: rgba(255, 255, 255, 0.4); }
.bg-white-30 {
background-color: rgba(255, 255, 255, 0.3); }
.bg-white-20 {
background-color: rgba(255, 255, 255, 0.2); }
.bg-white-10 {
background-color: rgba(255, 255, 255, 0.1); }
/* Background colors */
.bg-black {
background-color: #000; }
.bg-near-black {
background-color: #111; }
.bg-dark-gray {
background-color: #333; }
.bg-mid-gray {
background-color: #555; }
.bg-gray {
background-color: #777; }
.bg-silver {
background-color: #999; }
.bg-light-silver {
background-color: #aaa; }
.bg-moon-gray {
background-color: #ccc; }
.bg-light-gray {
background-color: #eee; }
.bg-near-white {
background-color: #f4f4f4; }
.bg-white {
background-color: #fff; }
.bg-transparent {
background-color: transparent; }
.bg-dark-red {
background-color: #e7040f; }
.bg-red {
background-color: #ff4136; }
.bg-light-red {
background-color: #ff725c; }
.bg-orange {
background-color: #ff6300; }
.bg-gold {
background-color: #ffb700; }
.bg-yellow {
background-color: #ffd700; }
.bg-light-yellow {
background-color: #fbf1a9; }
.bg-purple {
background-color: #5e2ca5; }
.bg-light-purple {
background-color: #a463f2; }
.bg-dark-pink {
background-color: #d5008f; }
.bg-hot-pink {
background-color: #ff41b4; }
.bg-pink {
background-color: #ff80cc; }
.bg-light-pink {
background-color: #ffa3d7; }
.bg-dark-green {
background-color: #137752; }
.bg-green {
background-color: #19a974; }
.bg-light-green {
background-color: #9eebcf; }
.bg-navy {
background-color: #001b44; }
.bg-dark-blue {
background-color: #00449e; }
.bg-blue {
background-color: #357edd; }
.bg-light-blue {
background-color: #96ccff; }
.bg-lightest-blue {
background-color: #cdecff; }
.bg-washed-blue {
background-color: #f6fffe; }
.bg-washed-green {
background-color: #e8fdf5; }
.bg-washed-yellow {
background-color: #fffceb; }
.bg-washed-red {
background-color: #ffdfdf; }
.bg-inherit {
background-color: inherit; }
/*
SKINS:PSEUDO
Customize the color of an element when
it is focused or hovered over.
*/
.hover-black:hover,
.hover-black:focus {
color: #000; }
.hover-near-black:hover,
.hover-near-black:focus {
color: #111; }
.hover-dark-gray:hover,
.hover-dark-gray:focus {
color: #333; }
.hover-mid-gray:hover,
.hover-mid-gray:focus {
color: #555; }
.hover-gray:hover,
.hover-gray:focus {
color: #777; }
.hover-silver:hover,
.hover-silver:focus {
color: #999; }
.hover-light-silver:hover,
.hover-light-silver:focus {
color: #aaa; }
.hover-moon-gray:hover,
.hover-moon-gray:focus {
color: #ccc; }
.hover-light-gray:hover,
.hover-light-gray:focus {
color: #eee; }
.hover-near-white:hover,
.hover-near-white:focus {
color: #f4f4f4; }
.hover-white:hover,
.hover-white:focus {
color: #fff; }
.hover-black-90:hover,
.hover-black-90:focus {
color: rgba(0, 0, 0, 0.9); }
.hover-black-80:hover,
.hover-black-80:focus {
color: rgba(0, 0, 0, 0.8); }
.hover-black-70:hover,
.hover-black-70:focus {
color: rgba(0, 0, 0, 0.7); }
.hover-black-60:hover,
.hover-black-60:focus {
color: rgba(0, 0, 0, 0.6); }
.hover-black-50:hover,
.hover-black-50:focus {
color: rgba(0, 0, 0, 0.5); }
.hover-black-40:hover,
.hover-black-40:focus {
color: rgba(0, 0, 0, 0.4); }
.hover-black-30:hover,
.hover-black-30:focus {
color: rgba(0, 0, 0, 0.3); }
.hover-black-20:hover,
.hover-black-20:focus {
color: rgba(0, 0, 0, 0.2); }
.hover-black-10:hover,
.hover-black-10:focus {
color: rgba(0, 0, 0, 0.1); }
.hover-white-90:hover,
.hover-white-90:focus {
color: rgba(255, 255, 255, 0.9); }
.hover-white-80:hover,
.hover-white-80:focus {
color: rgba(255, 255, 255, 0.8); }
.hover-white-70:hover,
.hover-white-70:focus {
color: rgba(255, 255, 255, 0.7); }
.hover-white-60:hover,
.hover-white-60:focus {
color: rgba(255, 255, 255, 0.6); }
.hover-white-50:hover,
.hover-white-50:focus {
color: rgba(255, 255, 255, 0.5); }
.hover-white-40:hover,
.hover-white-40:focus {
color: rgba(255, 255, 255, 0.4); }
.hover-white-30:hover,
.hover-white-30:focus {
color: rgba(255, 255, 255, 0.3); }
.hover-white-20:hover,
.hover-white-20:focus {
color: rgba(255, 255, 255, 0.2); }
.hover-white-10:hover,
.hover-white-10:focus {
color: rgba(255, 255, 255, 0.1); }
.hover-inherit:hover,
.hover-inherit:focus {
color: inherit; }
.hover-bg-black:hover,
.hover-bg-black:focus {
background-color: #000; }
.hover-bg-near-black:hover,
.hover-bg-near-black:focus {
background-color: #111; }
.hover-bg-dark-gray:hover,
.hover-bg-dark-gray:focus {
background-color: #333; }
.hover-bg-mid-gray:hover,
.hover-bg-mid-gray:focus {
background-color: #555; }
.hover-bg-gray:hover,
.hover-bg-gray:focus {
background-color: #777; }
.hover-bg-silver:hover,
.hover-bg-silver:focus {
background-color: #999; }
.hover-bg-light-silver:hover,
.hover-bg-light-silver:focus {
background-color: #aaa; }
.hover-bg-moon-gray:hover,
.hover-bg-moon-gray:focus {
background-color: #ccc; }
.hover-bg-light-gray:hover,
.hover-bg-light-gray:focus {
background-color: #eee; }
.hover-bg-near-white:hover,
.hover-bg-near-white:focus {
background-color: #f4f4f4; }
.hover-bg-white:hover,
.hover-bg-white:focus {
background-color: #fff; }
.hover-bg-transparent:hover,
.hover-bg-transparent:focus {
background-color: transparent; }
.hover-bg-black-90:hover,
.hover-bg-black-90:focus {
background-color: rgba(0, 0, 0, 0.9); }
.hover-bg-black-80:hover,
.hover-bg-black-80:focus {
background-color: rgba(0, 0, 0, 0.8); }
.hover-bg-black-70:hover,
.hover-bg-black-70:focus {
background-color: rgba(0, 0, 0, 0.7); }
.hover-bg-black-60:hover,
.hover-bg-black-60:focus {
background-color: rgba(0, 0, 0, 0.6); }
.hover-bg-black-50:hover,
.hover-bg-black-50:focus {
background-color: rgba(0, 0, 0, 0.5); }
.hover-bg-black-40:hover,
.hover-bg-black-40:focus {
background-color: rgba(0, 0, 0, 0.4); }
.hover-bg-black-30:hover,
.hover-bg-black-30:focus {
background-color: rgba(0, 0, 0, 0.3); }
.hover-bg-black-20:hover,
.hover-bg-black-20:focus {
background-color: rgba(0, 0, 0, 0.2); }
.hover-bg-black-10:hover,
.hover-bg-black-10:focus {
background-color: rgba(0, 0, 0, 0.1); }
.hover-bg-white-90:hover,
.hover-bg-white-90:focus {
background-color: rgba(255, 255, 255, 0.9); }
.hover-bg-white-80:hover,
.hover-bg-white-80:focus {
background-color: rgba(255, 255, 255, 0.8); }
.hover-bg-white-70:hover,
.hover-bg-white-70:focus {
background-color: rgba(255, 255, 255, 0.7); }
.hover-bg-white-60:hover,
.hover-bg-white-60:focus {
background-color: rgba(255, 255, 255, 0.6); }
.hover-bg-white-50:hover,
.hover-bg-white-50:focus {
background-color: rgba(255, 255, 255, 0.5); }
.hover-bg-white-40:hover,
.hover-bg-white-40:focus {
background-color: rgba(255, 255, 255, 0.4); }
.hover-bg-white-30:hover,
.hover-bg-white-30:focus {
background-color: rgba(255, 255, 255, 0.3); }
.hover-bg-white-20:hover,
.hover-bg-white-20:focus {
background-color: rgba(255, 255, 255, 0.2); }
.hover-bg-white-10:hover,
.hover-bg-white-10:focus {
background-color: rgba(255, 255, 255, 0.1); }
.hover-dark-red:hover,
.hover-dark-red:focus {
color: #e7040f; }
.hover-red:hover,
.hover-red:focus {
color: #ff4136; }
.hover-light-red:hover,
.hover-light-red:focus {
color: #ff725c; }
.hover-orange:hover,
.hover-orange:focus {
color: #ff6300; }
.hover-gold:hover,
.hover-gold:focus {
color: #ffb700; }
.hover-yellow:hover,
.hover-yellow:focus {
color: #ffd700; }
.hover-light-yellow:hover,
.hover-light-yellow:focus {
color: #fbf1a9; }
.hover-purple:hover,
.hover-purple:focus {
color: #5e2ca5; }
.hover-light-purple:hover,
.hover-light-purple:focus {
color: #a463f2; }
.hover-dark-pink:hover,
.hover-dark-pink:focus {
color: #d5008f; }
.hover-hot-pink:hover,
.hover-hot-pink:focus {
color: #ff41b4; }
.hover-pink:hover,
.hover-pink:focus {
color: #ff80cc; }
.hover-light-pink:hover,
.hover-light-pink:focus {
color: #ffa3d7; }
.hover-dark-green:hover,
.hover-dark-green:focus {
color: #137752; }
.hover-green:hover,
.hover-green:focus {
color: #19a974; }
.hover-light-green:hover,
.hover-light-green:focus {
color: #9eebcf; }
.hover-navy:hover,
.hover-navy:focus {
color: #001b44; }
.hover-dark-blue:hover,
.hover-dark-blue:focus {
color: #00449e; }
.hover-blue:hover,
.hover-blue:focus {
color: #357edd; }
.hover-light-blue:hover,
.hover-light-blue:focus {
color: #96ccff; }
.hover-lightest-blue:hover,
.hover-lightest-blue:focus {
color: #cdecff; }
.hover-washed-blue:hover,
.hover-washed-blue:focus {
color: #f6fffe; }
.hover-washed-green:hover,
.hover-washed-green:focus {
color: #e8fdf5; }
.hover-washed-yellow:hover,
.hover-washed-yellow:focus {
color: #fffceb; }
.hover-washed-red:hover,
.hover-washed-red:focus {
color: #ffdfdf; }
.hover-bg-dark-red:hover,
.hover-bg-dark-red:focus {
background-color: #e7040f; }
.hover-bg-red:hover,
.hover-bg-red:focus {
background-color: #ff4136; }
.hover-bg-light-red:hover,
.hover-bg-light-red:focus {
background-color: #ff725c; }
.hover-bg-orange:hover,
.hover-bg-orange:focus {
background-color: #ff6300; }
.hover-bg-gold:hover,
.hover-bg-gold:focus {
background-color: #ffb700; }
.hover-bg-yellow:hover,
.hover-bg-yellow:focus {
background-color: #ffd700; }
.hover-bg-light-yellow:hover,
.hover-bg-light-yellow:focus {
background-color: #fbf1a9; }
.hover-bg-purple:hover,
.hover-bg-purple:focus {
background-color: #5e2ca5; }
.hover-bg-light-purple:hover,
.hover-bg-light-purple:focus {
background-color: #a463f2; }
.hover-bg-dark-pink:hover,
.hover-bg-dark-pink:focus {
background-color: #d5008f; }
.hover-bg-hot-pink:hover,
.hover-bg-hot-pink:focus {
background-color: #ff41b4; }
.hover-bg-pink:hover,
.hover-bg-pink:focus {
background-color: #ff80cc; }
.hover-bg-light-pink:hover,
.hover-bg-light-pink:focus {
background-color: #ffa3d7; }
.hover-bg-dark-green:hover,
.hover-bg-dark-green:focus {
background-color: #137752; }
.hover-bg-green:hover,
.hover-bg-green:focus {
background-color: #19a974; }
.hover-bg-light-green:hover,
.hover-bg-light-green:focus {
background-color: #9eebcf; }
.hover-bg-navy:hover,
.hover-bg-navy:focus {
background-color: #001b44; }
.hover-bg-dark-blue:hover,
.hover-bg-dark-blue:focus {
background-color: #00449e; }
.hover-bg-blue:hover,
.hover-bg-blue:focus {
background-color: #357edd; }
.hover-bg-light-blue:hover,
.hover-bg-light-blue:focus {
background-color: #96ccff; }
.hover-bg-lightest-blue:hover,
.hover-bg-lightest-blue:focus {
background-color: #cdecff; }
.hover-bg-washed-blue:hover,
.hover-bg-washed-blue:focus {
background-color: #f6fffe; }
.hover-bg-washed-green:hover,
.hover-bg-washed-green:focus {
background-color: #e8fdf5; }
.hover-bg-washed-yellow:hover,
.hover-bg-washed-yellow:focus {
background-color: #fffceb; }
.hover-bg-washed-red:hover,
.hover-bg-washed-red:focus {
background-color: #ffdfdf; }
.hover-bg-inherit:hover,
.hover-bg-inherit:focus {
background-color: inherit; }
/* Variables */
/*
SPACING
Docs: http://tachyons.io/docs/layout/spacing/
An eight step powers of two scale ranging from 0 to 16rem.
Base:
p = padding
m = margin
Modifiers:
a = all
h = horizontal
v = vertical
t = top
r = right
b = bottom
l = left
0 = none
1 = 1st step in spacing scale
2 = 2nd step in spacing scale
3 = 3rd step in spacing scale
4 = 4th step in spacing scale
5 = 5th step in spacing scale
6 = 6th step in spacing scale
7 = 7th step in spacing scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.pa0 {
padding: 0; }
.pa1 {
padding: 0.25rem; }
.pa2, header .menu-bar .items a, header .user-options a, .tab {
padding: 0.5rem; }
.pa3, header #login-popup {
padding: 1rem; }
.pa4 {
padding: 2rem; }
.pa5 {
padding: 4rem; }
.pa6 {
padding: 8rem; }
.pa7 {
padding: 16rem; }
.pl0 {
padding-left: 0; }
.pl1 {
padding-left: 0.25rem; }
.pl2 {
padding-left: 0.5rem; }
.pl3 {
padding-left: 1rem; }
.pl4 {
padding-left: 2rem; }
.pl5 {
padding-left: 4rem; }
.pl6 {
padding-left: 8rem; }
.pl7 {
padding-left: 16rem; }
.pr0 {
padding-right: 0; }
.pr1 {
padding-right: 0.25rem; }
.pr2 {
padding-right: 0.5rem; }
.pr3 {
padding-right: 1rem; }
.pr4 {
padding-right: 2rem; }
.pr5 {
padding-right: 4rem; }
.pr6 {
padding-right: 8rem; }
.pr7 {
padding-right: 16rem; }
.pb0 {
padding-bottom: 0; }
.pb1 {
padding-bottom: 0.25rem; }
.pb2 {
padding-bottom: 0.5rem; }
.pb3 {
padding-bottom: 1rem; }
.pb4 {
padding-bottom: 2rem; }
.pb5 {
padding-bottom: 4rem; }
.pb6 {
padding-bottom: 8rem; }
.pb7 {
padding-bottom: 16rem; }
.pt0 {
padding-top: 0; }
.pt1 {
padding-top: 0.25rem; }
.pt2 {
padding-top: 0.5rem; }
.pt3 {
padding-top: 1rem; }
.pt4 {
padding-top: 2rem; }
.pt5 {
padding-top: 4rem; }
.pt6 {
padding-top: 8rem; }
.pt7 {
padding-top: 16rem; }
.pv0, .pagination .button {
padding-top: 0;
padding-bottom: 0; }
.pv1, .optionbar .options > * {
padding-top: 0.25rem;
padding-bottom: 0.25rem; }
.pv2, header .menu-bar .items a.project-logo,
button,
.button,
input[type=button],
input[type=submit] {
padding-top: 0.5rem;
padding-bottom: 0.5rem; }
.pv3 {
padding-top: 1rem;
padding-bottom: 1rem; }
.pv4 {
padding-top: 2rem;
padding-bottom: 2rem; }
.pv5 {
padding-top: 4rem;
padding-bottom: 4rem; }
.pv6 {
padding-top: 8rem;
padding-bottom: 8rem; }
.pv7 {
padding-top: 16rem;
padding-bottom: 16rem; }
.ph0 {
padding-left: 0;
padding-right: 0; }
.ph1 {
padding-left: 0.25rem;
padding-right: 0.25rem; }
.ph2, .optionbar .options > *, .pagination .button {
padding-left: 0.5rem;
padding-right: 0.5rem; }
.ph3,
button,
.button,
input[type=button],
input[type=submit] {
padding-left: 1rem;
padding-right: 1rem; }
.ph4 {
padding-left: 2rem;
padding-right: 2rem; }
.ph5 {
padding-left: 4rem;
padding-right: 4rem; }
.ph6 {
padding-left: 8rem;
padding-right: 8rem; }
.ph7 {
padding-left: 16rem;
padding-right: 16rem; }
.ma0, .thread {
margin: 0; }
.ma1 {
margin: 0.25rem; }
.ma2 {
margin: 0.5rem; }
.ma3 {
margin: 1rem; }
.ma4 {
margin: 2rem; }
.ma5 {
margin: 4rem; }
.ma6 {
margin: 8rem; }
.ma7 {
margin: 16rem; }
.ml0 {
margin-left: 0; }
.ml1 {
margin-left: 0.25rem; }
.ml2 {
margin-left: 0.5rem; }
.ml3 {
margin-left: 1rem; }
.ml4 {
margin-left: 2rem; }
.ml5 {
margin-left: 4rem; }
.ml6 {
margin-left: 8rem; }
.ml7 {
margin-left: 16rem; }
.mr0 {
margin-right: 0; }
.mr1 {
margin-right: 0.25rem; }
.mr2 {
margin-right: 0.5rem; }
.mr3 {
margin-right: 1rem; }
.mr4 {
margin-right: 2rem; }
.mr5 {
margin-right: 4rem; }
.mr6 {
margin-right: 8rem; }
.mr7 {
margin-right: 16rem; }
.mb0 {
margin-bottom: 0; }
.mb1 {
margin-bottom: 0.25rem; }
.mb2 {
margin-bottom: 0.5rem; }
.mb3 {
margin-bottom: 1rem; }
.mb4 {
margin-bottom: 2rem; }
.mb5 {
margin-bottom: 4rem; }
.mb6 {
margin-bottom: 8rem; }
.mb7 {
margin-bottom: 16rem; }
.mt0 {
margin-top: 0; }
.mt1 {
margin-top: 0.25rem; }
.mt2 {
margin-top: 0.5rem; }
.mt3 {
margin-top: 1rem; }
.mt4 {
margin-top: 2rem; }
.mt5 {
margin-top: 4rem; }
.mt6 {
margin-top: 8rem; }
.mt7 {
margin-top: 16rem; }
.mv0 {
margin-top: 0;
margin-bottom: 0; }
.mv1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem; }
.mv2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem; }
.mv3, hr {
margin-top: 1rem;
margin-bottom: 1rem; }
.mv4 {
margin-top: 2rem;
margin-bottom: 2rem; }
.mv5 {
margin-top: 4rem;
margin-bottom: 4rem; }
.mv6 {
margin-top: 8rem;
margin-bottom: 8rem; }
.mv7 {
margin-top: 16rem;
margin-bottom: 16rem; }
.mh0 {
margin-left: 0;
margin-right: 0; }
.mh1 {
margin-left: 0.25rem;
margin-right: 0.25rem; }
.mh2 {
margin-left: 0.5rem;
margin-right: 0.5rem; }
.mh3 {
margin-left: 1rem;
margin-right: 1rem; }
.mh4 {
margin-left: 2rem;
margin-right: 2rem; }
.mh5 {
margin-left: 4rem;
margin-right: 4rem; }
.mh6 {
margin-left: 8rem;
margin-right: 8rem; }
.mh7 {
margin-left: 16rem;
margin-right: 16rem; }
@media screen and (min-width: 30em) {
.pa0-ns {
padding: 0; }
.pa1-ns {
padding: 0.25rem; }
.pa2-ns {
padding: 0.5rem; }
.pa3-ns {
padding: 1rem; }
.pa4-ns {
padding: 2rem; }
.pa5-ns {
padding: 4rem; }
.pa6-ns {
padding: 8rem; }
.pa7-ns {
padding: 16rem; }
.pl0-ns {
padding-left: 0; }
.pl1-ns {
padding-left: 0.25rem; }
.pl2-ns {
padding-left: 0.5rem; }
.pl3-ns {
padding-left: 1rem; }
.pl4-ns {
padding-left: 2rem; }
.pl5-ns {
padding-left: 4rem; }
.pl6-ns {
padding-left: 8rem; }
.pl7-ns {
padding-left: 16rem; }
.pr0-ns {
padding-right: 0; }
.pr1-ns {
padding-right: 0.25rem; }
.pr2-ns {
padding-right: 0.5rem; }
.pr3-ns {
padding-right: 1rem; }
.pr4-ns {
padding-right: 2rem; }
.pr5-ns {
padding-right: 4rem; }
.pr6-ns {
padding-right: 8rem; }
.pr7-ns {
padding-right: 16rem; }
.pb0-ns {
padding-bottom: 0; }
.pb1-ns {
padding-bottom: 0.25rem; }
.pb2-ns {
padding-bottom: 0.5rem; }
.pb3-ns {
padding-bottom: 1rem; }
.pb4-ns {
padding-bottom: 2rem; }
.pb5-ns {
padding-bottom: 4rem; }
.pb6-ns {
padding-bottom: 8rem; }
.pb7-ns {
padding-bottom: 16rem; }
.pt0-ns {
padding-top: 0; }
.pt1-ns {
padding-top: 0.25rem; }
.pt2-ns {
padding-top: 0.5rem; }
.pt3-ns {
padding-top: 1rem; }
.pt4-ns {
padding-top: 2rem; }
.pt5-ns {
padding-top: 4rem; }
.pt6-ns {
padding-top: 8rem; }
.pt7-ns {
padding-top: 16rem; }
.pv0-ns {
padding-top: 0;
padding-bottom: 0; }
.pv1-ns {
padding-top: 0.25rem;
padding-bottom: 0.25rem; }
.pv2-ns, .optionbar .options > * {
padding-top: 0.5rem;
padding-bottom: 0.5rem; }
.pv3-ns, header .menu-bar .items a {
padding-top: 1rem;
padding-bottom: 1rem; }
.pv4-ns {
padding-top: 2rem;
padding-bottom: 2rem; }
.pv5-ns {
padding-top: 4rem;
padding-bottom: 4rem; }
.pv6-ns {
padding-top: 8rem;
padding-bottom: 8rem; }
.pv7-ns {
padding-top: 16rem;
padding-bottom: 16rem; }
.ph0-ns {
padding-left: 0;
padding-right: 0; }
.ph1-ns {
padding-left: 0.25rem;
padding-right: 0.25rem; }
.ph2-ns {
padding-left: 0.5rem;
padding-right: 0.5rem; }
.ph3-ns {
padding-left: 1rem;
padding-right: 1rem; }
.ph4-ns {
padding-left: 2rem;
padding-right: 2rem; }
.ph5-ns {
padding-left: 4rem;
padding-right: 4rem; }
.ph6-ns {
padding-left: 8rem;
padding-right: 8rem; }
.ph7-ns {
padding-left: 16rem;
padding-right: 16rem; }
.ma0-ns {
margin: 0; }
.ma1-ns {
margin: 0.25rem; }
.ma2-ns {
margin: 0.5rem; }
.ma3-ns {
margin: 1rem; }
.ma4-ns {
margin: 2rem; }
.ma5-ns {
margin: 4rem; }
.ma6-ns {
margin: 8rem; }
.ma7-ns {
margin: 16rem; }
.ml0-ns {
margin-left: 0; }
.ml1-ns {
margin-left: 0.25rem; }
.ml2-ns, header .menu-bar .items a:first-child {
margin-left: 0.5rem; }
.ml3-ns {
margin-left: 1rem; }
.ml4-ns {
margin-left: 2rem; }
.ml5-ns {
margin-left: 4rem; }
.ml6-ns {
margin-left: 8rem; }
.ml7-ns {
margin-left: 16rem; }
.mr0-ns {
margin-right: 0; }
.mr1-ns {
margin-right: 0.25rem; }
.mr2-ns {
margin-right: 0.5rem; }
.mr3-ns {
margin-right: 1rem; }
.mr4-ns {
margin-right: 2rem; }
.mr5-ns {
margin-right: 4rem; }
.mr6-ns {
margin-right: 8rem; }
.mr7-ns {
margin-right: 16rem; }
.mb0-ns {
margin-bottom: 0; }
.mb1-ns {
margin-bottom: 0.25rem; }
.mb2-ns {
margin-bottom: 0.5rem; }
.mb3-ns {
margin-bottom: 1rem; }
.mb4-ns {
margin-bottom: 2rem; }
.mb5-ns {
margin-bottom: 4rem; }
.mb6-ns {
margin-bottom: 8rem; }
.mb7-ns {
margin-bottom: 16rem; }
.mt0-ns {
margin-top: 0; }
.mt1-ns {
margin-top: 0.25rem; }
.mt2-ns {
margin-top: 0.5rem; }
.mt3-ns {
margin-top: 1rem; }
.mt4-ns {
margin-top: 2rem; }
.mt5-ns {
margin-top: 4rem; }
.mt6-ns {
margin-top: 8rem; }
.mt7-ns {
margin-top: 16rem; }
.mv0-ns {
margin-top: 0;
margin-bottom: 0; }
.mv1-ns {
margin-top: 0.25rem;
margin-bottom: 0.25rem; }
.mv2-ns {
margin-top: 0.5rem;
margin-bottom: 0.5rem; }
.mv3-ns {
margin-top: 1rem;
margin-bottom: 1rem; }
.mv4-ns {
margin-top: 2rem;
margin-bottom: 2rem; }
.mv5-ns {
margin-top: 4rem;
margin-bottom: 4rem; }
.mv6-ns {
margin-top: 8rem;
margin-bottom: 8rem; }
.mv7-ns {
margin-top: 16rem;
margin-bottom: 16rem; }
.mh0-ns {
margin-left: 0;
margin-right: 0; }
.mh1-ns {
margin-left: 0.25rem;
margin-right: 0.25rem; }
.mh2-ns {
margin-left: 0.5rem;
margin-right: 0.5rem; }
.mh3-ns {
margin-left: 1rem;
margin-right: 1rem; }
.mh4-ns {
margin-left: 2rem;
margin-right: 2rem; }
.mh5-ns {
margin-left: 4rem;
margin-right: 4rem; }
.mh6-ns {
margin-left: 8rem;
margin-right: 8rem; }
.mh7-ns {
margin-left: 16rem;
margin-right: 16rem; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.pa0-m {
padding: 0; }
.pa1-m {
padding: 0.25rem; }
.pa2-m {
padding: 0.5rem; }
.pa3-m {
padding: 1rem; }
.pa4-m {
padding: 2rem; }
.pa5-m {
padding: 4rem; }
.pa6-m {
padding: 8rem; }
.pa7-m {
padding: 16rem; }
.pl0-m {
padding-left: 0; }
.pl1-m {
padding-left: 0.25rem; }
.pl2-m {
padding-left: 0.5rem; }
.pl3-m {
padding-left: 1rem; }
.pl4-m {
padding-left: 2rem; }
.pl5-m {
padding-left: 4rem; }
.pl6-m {
padding-left: 8rem; }
.pl7-m {
padding-left: 16rem; }
.pr0-m {
padding-right: 0; }
.pr1-m {
padding-right: 0.25rem; }
.pr2-m {
padding-right: 0.5rem; }
.pr3-m {
padding-right: 1rem; }
.pr4-m {
padding-right: 2rem; }
.pr5-m {
padding-right: 4rem; }
.pr6-m {
padding-right: 8rem; }
.pr7-m {
padding-right: 16rem; }
.pb0-m {
padding-bottom: 0; }
.pb1-m {
padding-bottom: 0.25rem; }
.pb2-m {
padding-bottom: 0.5rem; }
.pb3-m {
padding-bottom: 1rem; }
.pb4-m {
padding-bottom: 2rem; }
.pb5-m {
padding-bottom: 4rem; }
.pb6-m {
padding-bottom: 8rem; }
.pb7-m {
padding-bottom: 16rem; }
.pt0-m {
padding-top: 0; }
.pt1-m {
padding-top: 0.25rem; }
.pt2-m {
padding-top: 0.5rem; }
.pt3-m {
padding-top: 1rem; }
.pt4-m {
padding-top: 2rem; }
.pt5-m {
padding-top: 4rem; }
.pt6-m {
padding-top: 8rem; }
.pt7-m {
padding-top: 16rem; }
.pv0-m {
padding-top: 0;
padding-bottom: 0; }
.pv1-m {
padding-top: 0.25rem;
padding-bottom: 0.25rem; }
.pv2-m {
padding-top: 0.5rem;
padding-bottom: 0.5rem; }
.pv3-m {
padding-top: 1rem;
padding-bottom: 1rem; }
.pv4-m {
padding-top: 2rem;
padding-bottom: 2rem; }
.pv5-m {
padding-top: 4rem;
padding-bottom: 4rem; }
.pv6-m {
padding-top: 8rem;
padding-bottom: 8rem; }
.pv7-m {
padding-top: 16rem;
padding-bottom: 16rem; }
.ph0-m {
padding-left: 0;
padding-right: 0; }
.ph1-m {
padding-left: 0.25rem;
padding-right: 0.25rem; }
.ph2-m {
padding-left: 0.5rem;
padding-right: 0.5rem; }
.ph3-m {
padding-left: 1rem;
padding-right: 1rem; }
.ph4-m {
padding-left: 2rem;
padding-right: 2rem; }
.ph5-m {
padding-left: 4rem;
padding-right: 4rem; }
.ph6-m {
padding-left: 8rem;
padding-right: 8rem; }
.ph7-m {
padding-left: 16rem;
padding-right: 16rem; }
.ma0-m {
margin: 0; }
.ma1-m {
margin: 0.25rem; }
.ma2-m {
margin: 0.5rem; }
.ma3-m {
margin: 1rem; }
.ma4-m {
margin: 2rem; }
.ma5-m {
margin: 4rem; }
.ma6-m {
margin: 8rem; }
.ma7-m {
margin: 16rem; }
.ml0-m {
margin-left: 0; }
.ml1-m {
margin-left: 0.25rem; }
.ml2-m {
margin-left: 0.5rem; }
.ml3-m {
margin-left: 1rem; }
.ml4-m {
margin-left: 2rem; }
.ml5-m {
margin-left: 4rem; }
.ml6-m {
margin-left: 8rem; }
.ml7-m {
margin-left: 16rem; }
.mr0-m {
margin-right: 0; }
.mr1-m {
margin-right: 0.25rem; }
.mr2-m {
margin-right: 0.5rem; }
.mr3-m {
margin-right: 1rem; }
.mr4-m {
margin-right: 2rem; }
.mr5-m {
margin-right: 4rem; }
.mr6-m {
margin-right: 8rem; }
.mr7-m {
margin-right: 16rem; }
.mb0-m {
margin-bottom: 0; }
.mb1-m {
margin-bottom: 0.25rem; }
.mb2-m {
margin-bottom: 0.5rem; }
.mb3-m {
margin-bottom: 1rem; }
.mb4-m {
margin-bottom: 2rem; }
.mb5-m {
margin-bottom: 4rem; }
.mb6-m {
margin-bottom: 8rem; }
.mb7-m {
margin-bottom: 16rem; }
.mt0-m {
margin-top: 0; }
.mt1-m {
margin-top: 0.25rem; }
.mt2-m {
margin-top: 0.5rem; }
.mt3-m {
margin-top: 1rem; }
.mt4-m {
margin-top: 2rem; }
.mt5-m {
margin-top: 4rem; }
.mt6-m {
margin-top: 8rem; }
.mt7-m {
margin-top: 16rem; }
.mv0-m {
margin-top: 0;
margin-bottom: 0; }
.mv1-m {
margin-top: 0.25rem;
margin-bottom: 0.25rem; }
.mv2-m {
margin-top: 0.5rem;
margin-bottom: 0.5rem; }
.mv3-m {
margin-top: 1rem;
margin-bottom: 1rem; }
.mv4-m {
margin-top: 2rem;
margin-bottom: 2rem; }
.mv5-m {
margin-top: 4rem;
margin-bottom: 4rem; }
.mv6-m {
margin-top: 8rem;
margin-bottom: 8rem; }
.mv7-m {
margin-top: 16rem;
margin-bottom: 16rem; }
.mh0-m {
margin-left: 0;
margin-right: 0; }
.mh1-m {
margin-left: 0.25rem;
margin-right: 0.25rem; }
.mh2-m {
margin-left: 0.5rem;
margin-right: 0.5rem; }
.mh3-m {
margin-left: 1rem;
margin-right: 1rem; }
.mh4-m {
margin-left: 2rem;
margin-right: 2rem; }
.mh5-m {
margin-left: 4rem;
margin-right: 4rem; }
.mh6-m {
margin-left: 8rem;
margin-right: 8rem; }
.mh7-m {
margin-left: 16rem;
margin-right: 16rem; } }
@media screen and (min-width: 60em) {
.pa0-l {
padding: 0; }
.pa1-l {
padding: 0.25rem; }
.pa2-l {
padding: 0.5rem; }
.pa3-l {
padding: 1rem; }
.pa4-l {
padding: 2rem; }
.pa5-l {
padding: 4rem; }
.pa6-l {
padding: 8rem; }
.pa7-l {
padding: 16rem; }
.pl0-l {
padding-left: 0; }
.pl1-l {
padding-left: 0.25rem; }
.pl2-l {
padding-left: 0.5rem; }
.pl3-l {
padding-left: 1rem; }
.pl4-l {
padding-left: 2rem; }
.pl5-l {
padding-left: 4rem; }
.pl6-l {
padding-left: 8rem; }
.pl7-l {
padding-left: 16rem; }
.pr0-l {
padding-right: 0; }
.pr1-l {
padding-right: 0.25rem; }
.pr2-l {
padding-right: 0.5rem; }
.pr3-l {
padding-right: 1rem; }
.pr4-l {
padding-right: 2rem; }
.pr5-l {
padding-right: 4rem; }
.pr6-l {
padding-right: 8rem; }
.pr7-l {
padding-right: 16rem; }
.pb0-l {
padding-bottom: 0; }
.pb1-l {
padding-bottom: 0.25rem; }
.pb2-l {
padding-bottom: 0.5rem; }
.pb3-l {
padding-bottom: 1rem; }
.pb4-l {
padding-bottom: 2rem; }
.pb5-l {
padding-bottom: 4rem; }
.pb6-l {
padding-bottom: 8rem; }
.pb7-l {
padding-bottom: 16rem; }
.pt0-l {
padding-top: 0; }
.pt1-l {
padding-top: 0.25rem; }
.pt2-l {
padding-top: 0.5rem; }
.pt3-l {
padding-top: 1rem; }
.pt4-l {
padding-top: 2rem; }
.pt5-l {
padding-top: 4rem; }
.pt6-l {
padding-top: 8rem; }
.pt7-l {
padding-top: 16rem; }
.pv0-l {
padding-top: 0;
padding-bottom: 0; }
.pv1-l {
padding-top: 0.25rem;
padding-bottom: 0.25rem; }
.pv2-l {
padding-top: 0.5rem;
padding-bottom: 0.5rem; }
.pv3-l {
padding-top: 1rem;
padding-bottom: 1rem; }
.pv4-l {
padding-top: 2rem;
padding-bottom: 2rem; }
.pv5-l {
padding-top: 4rem;
padding-bottom: 4rem; }
.pv6-l {
padding-top: 8rem;
padding-bottom: 8rem; }
.pv7-l {
padding-top: 16rem;
padding-bottom: 16rem; }
.ph0-l {
padding-left: 0;
padding-right: 0; }
.ph1-l {
padding-left: 0.25rem;
padding-right: 0.25rem; }
.ph2-l {
padding-left: 0.5rem;
padding-right: 0.5rem; }
.ph3-l, header .menu-bar .items a {
padding-left: 1rem;
padding-right: 1rem; }
.ph4-l {
padding-left: 2rem;
padding-right: 2rem; }
.ph5-l {
padding-left: 4rem;
padding-right: 4rem; }
.ph6-l {
padding-left: 8rem;
padding-right: 8rem; }
.ph7-l {
padding-left: 16rem;
padding-right: 16rem; }
.ma0-l {
margin: 0; }
.ma1-l {
margin: 0.25rem; }
.ma2-l {
margin: 0.5rem; }
.ma3-l {
margin: 1rem; }
.ma4-l {
margin: 2rem; }
.ma5-l {
margin: 4rem; }
.ma6-l {
margin: 8rem; }
.ma7-l {
margin: 16rem; }
.ml0-l {
margin-left: 0; }
.ml1-l {
margin-left: 0.25rem; }
.ml2-l {
margin-left: 0.5rem; }
.ml3-l, header .menu-bar .items a:first-child {
margin-left: 1rem; }
.ml4-l {
margin-left: 2rem; }
.ml5-l {
margin-left: 4rem; }
.ml6-l {
margin-left: 8rem; }
.ml7-l {
margin-left: 16rem; }
.mr0-l {
margin-right: 0; }
.mr1-l {
margin-right: 0.25rem; }
.mr2-l {
margin-right: 0.5rem; }
.mr3-l {
margin-right: 1rem; }
.mr4-l {
margin-right: 2rem; }
.mr5-l {
margin-right: 4rem; }
.mr6-l {
margin-right: 8rem; }
.mr7-l {
margin-right: 16rem; }
.mb0-l {
margin-bottom: 0; }
.mb1-l {
margin-bottom: 0.25rem; }
.mb2-l {
margin-bottom: 0.5rem; }
.mb3-l {
margin-bottom: 1rem; }
.mb4-l {
margin-bottom: 2rem; }
.mb5-l {
margin-bottom: 4rem; }
.mb6-l {
margin-bottom: 8rem; }
.mb7-l {
margin-bottom: 16rem; }
.mt0-l {
margin-top: 0; }
.mt1-l {
margin-top: 0.25rem; }
.mt2-l {
margin-top: 0.5rem; }
.mt3-l {
margin-top: 1rem; }
.mt4-l {
margin-top: 2rem; }
.mt5-l {
margin-top: 4rem; }
.mt6-l {
margin-top: 8rem; }
.mt7-l {
margin-top: 16rem; }
.mv0-l {
margin-top: 0;
margin-bottom: 0; }
.mv1-l {
margin-top: 0.25rem;
margin-bottom: 0.25rem; }
.mv2-l {
margin-top: 0.5rem;
margin-bottom: 0.5rem; }
.mv3-l {
margin-top: 1rem;
margin-bottom: 1rem; }
.mv4-l {
margin-top: 2rem;
margin-bottom: 2rem; }
.mv5-l {
margin-top: 4rem;
margin-bottom: 4rem; }
.mv6-l {
margin-top: 8rem;
margin-bottom: 8rem; }
.mv7-l {
margin-top: 16rem;
margin-bottom: 16rem; }
.mh0-l {
margin-left: 0;
margin-right: 0; }
.mh1-l {
margin-left: 0.25rem;
margin-right: 0.25rem; }
.mh2-l {
margin-left: 0.5rem;
margin-right: 0.5rem; }
.mh3-l {
margin-left: 1rem;
margin-right: 1rem; }
.mh4-l {
margin-left: 2rem;
margin-right: 2rem; }
.mh5-l {
margin-left: 4rem;
margin-right: 4rem; }
.mh6-l {
margin-left: 8rem;
margin-right: 8rem; }
.mh7-l {
margin-left: 16rem;
margin-right: 16rem; } }
/*
NEGATIVE MARGINS
Base:
n = negative
Modifiers:
a = all
t = top
r = right
b = bottom
l = left
1 = 1st step in spacing scale
2 = 2nd step in spacing scale
3 = 3rd step in spacing scale
4 = 4th step in spacing scale
5 = 5th step in spacing scale
6 = 6th step in spacing scale
7 = 7th step in spacing scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.na1 {
margin: -0.25rem; }
.na2 {
margin: -0.5rem; }
.na3 {
margin: -1rem; }
.na4 {
margin: -2rem; }
.na5 {
margin: -4rem; }
.na6 {
margin: -8rem; }
.na7 {
margin: -16rem; }
.nl1 {
margin-left: -0.25rem; }
.nl2 {
margin-left: -0.5rem; }
.nl3 {
margin-left: -1rem; }
.nl4 {
margin-left: -2rem; }
.nl5 {
margin-left: -4rem; }
.nl6 {
margin-left: -8rem; }
.nl7 {
margin-left: -16rem; }
.nr1 {
margin-right: -0.25rem; }
.nr2 {
margin-right: -0.5rem; }
.nr3 {
margin-right: -1rem; }
.nr4 {
margin-right: -2rem; }
.nr5 {
margin-right: -4rem; }
.nr6 {
margin-right: -8rem; }
.nr7 {
margin-right: -16rem; }
.nb1 {
margin-bottom: -0.25rem; }
.nb2 {
margin-bottom: -0.5rem; }
.nb3 {
margin-bottom: -1rem; }
.nb4 {
margin-bottom: -2rem; }
.nb5 {
margin-bottom: -4rem; }
.nb6 {
margin-bottom: -8rem; }
.nb7 {
margin-bottom: -16rem; }
.nt1 {
margin-top: -0.25rem; }
.nt2 {
margin-top: -0.5rem; }
.nt3 {
margin-top: -1rem; }
.nt4 {
margin-top: -2rem; }
.nt5 {
margin-top: -4rem; }
.nt6 {
margin-top: -8rem; }
.nt7 {
margin-top: -16rem; }
@media screen and (min-width: 30em) {
.na1-ns {
margin: -0.25rem; }
.na2-ns {
margin: -0.5rem; }
.na3-ns {
margin: -1rem; }
.na4-ns {
margin: -2rem; }
.na5-ns {
margin: -4rem; }
.na6-ns {
margin: -8rem; }
.na7-ns {
margin: -16rem; }
.nl1-ns {
margin-left: -0.25rem; }
.nl2-ns {
margin-left: -0.5rem; }
.nl3-ns {
margin-left: -1rem; }
.nl4-ns {
margin-left: -2rem; }
.nl5-ns {
margin-left: -4rem; }
.nl6-ns {
margin-left: -8rem; }
.nl7-ns {
margin-left: -16rem; }
.nr1-ns {
margin-right: -0.25rem; }
.nr2-ns {
margin-right: -0.5rem; }
.nr3-ns {
margin-right: -1rem; }
.nr4-ns {
margin-right: -2rem; }
.nr5-ns {
margin-right: -4rem; }
.nr6-ns {
margin-right: -8rem; }
.nr7-ns {
margin-right: -16rem; }
.nb1-ns {
margin-bottom: -0.25rem; }
.nb2-ns {
margin-bottom: -0.5rem; }
.nb3-ns {
margin-bottom: -1rem; }
.nb4-ns {
margin-bottom: -2rem; }
.nb5-ns {
margin-bottom: -4rem; }
.nb6-ns {
margin-bottom: -8rem; }
.nb7-ns {
margin-bottom: -16rem; }
.nt1-ns {
margin-top: -0.25rem; }
.nt2-ns {
margin-top: -0.5rem; }
.nt3-ns {
margin-top: -1rem; }
.nt4-ns {
margin-top: -2rem; }
.nt5-ns {
margin-top: -4rem; }
.nt6-ns {
margin-top: -8rem; }
.nt7-ns {
margin-top: -16rem; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.na1-m {
margin: -0.25rem; }
.na2-m {
margin: -0.5rem; }
.na3-m {
margin: -1rem; }
.na4-m {
margin: -2rem; }
.na5-m {
margin: -4rem; }
.na6-m {
margin: -8rem; }
.na7-m {
margin: -16rem; }
.nl1-m {
margin-left: -0.25rem; }
.nl2-m {
margin-left: -0.5rem; }
.nl3-m {
margin-left: -1rem; }
.nl4-m {
margin-left: -2rem; }
.nl5-m {
margin-left: -4rem; }
.nl6-m {
margin-left: -8rem; }
.nl7-m {
margin-left: -16rem; }
.nr1-m {
margin-right: -0.25rem; }
.nr2-m {
margin-right: -0.5rem; }
.nr3-m {
margin-right: -1rem; }
.nr4-m {
margin-right: -2rem; }
.nr5-m {
margin-right: -4rem; }
.nr6-m {
margin-right: -8rem; }
.nr7-m {
margin-right: -16rem; }
.nb1-m {
margin-bottom: -0.25rem; }
.nb2-m {
margin-bottom: -0.5rem; }
.nb3-m {
margin-bottom: -1rem; }
.nb4-m {
margin-bottom: -2rem; }
.nb5-m {
margin-bottom: -4rem; }
.nb6-m {
margin-bottom: -8rem; }
.nb7-m {
margin-bottom: -16rem; }
.nt1-m {
margin-top: -0.25rem; }
.nt2-m {
margin-top: -0.5rem; }
.nt3-m {
margin-top: -1rem; }
.nt4-m {
margin-top: -2rem; }
.nt5-m {
margin-top: -4rem; }
.nt6-m {
margin-top: -8rem; }
.nt7-m {
margin-top: -16rem; } }
@media screen and (min-width: 60em) {
.na1-l {
margin: -0.25rem; }
.na2-l {
margin: -0.5rem; }
.na3-l {
margin: -1rem; }
.na4-l {
margin: -2rem; }
.na5-l {
margin: -4rem; }
.na6-l {
margin: -8rem; }
.na7-l {
margin: -16rem; }
.nl1-l {
margin-left: -0.25rem; }
.nl2-l {
margin-left: -0.5rem; }
.nl3-l {
margin-left: -1rem; }
.nl4-l {
margin-left: -2rem; }
.nl5-l {
margin-left: -4rem; }
.nl6-l {
margin-left: -8rem; }
.nl7-l {
margin-left: -16rem; }
.nr1-l {
margin-right: -0.25rem; }
.nr2-l {
margin-right: -0.5rem; }
.nr3-l {
margin-right: -1rem; }
.nr4-l {
margin-right: -2rem; }
.nr5-l {
margin-right: -4rem; }
.nr6-l {
margin-right: -8rem; }
.nr7-l {
margin-right: -16rem; }
.nb1-l {
margin-bottom: -0.25rem; }
.nb2-l {
margin-bottom: -0.5rem; }
.nb3-l {
margin-bottom: -1rem; }
.nb4-l {
margin-bottom: -2rem; }
.nb5-l {
margin-bottom: -4rem; }
.nb6-l {
margin-bottom: -8rem; }
.nb7-l {
margin-bottom: -16rem; }
.nt1-l {
margin-top: -0.25rem; }
.nt2-l {
margin-top: -0.5rem; }
.nt3-l {
margin-top: -1rem; }
.nt4-l {
margin-top: -2rem; }
.nt5-l {
margin-top: -4rem; }
.nt6-l {
margin-top: -8rem; }
.nt7-l {
margin-top: -16rem; } }
/*
TABLES
Docs: http://tachyons.io/docs/elements/tables/
*/
.collapse {
border-collapse: collapse;
border-spacing: 0; }
.striped--light-silver:nth-child(odd) {
background-color: #aaa; }
.striped--moon-gray:nth-child(odd) {
background-color: #ccc; }
.striped--light-gray:nth-child(odd) {
background-color: #eee; }
.striped--near-white:nth-child(odd) {
background-color: #f4f4f4; }
.stripe-light:nth-child(odd) {
background-color: rgba(255, 255, 255, 0.1); }
.stripe-dark:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.1); }
/*
TEXT DECORATION
Docs: http://tachyons.io/docs/typography/text-decoration/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.strike {
text-decoration: line-through; }
.underline {
text-decoration: underline; }
.no-underline {
text-decoration: none; }
@media screen and (min-width: 30em) {
.strike-ns {
text-decoration: line-through; }
.underline-ns {
text-decoration: underline; }
.no-underline-ns {
text-decoration: none; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.strike-m {
text-decoration: line-through; }
.underline-m {
text-decoration: underline; }
.no-underline-m {
text-decoration: none; } }
@media screen and (min-width: 60em) {
.strike-l {
text-decoration: line-through; }
.underline-l {
text-decoration: underline; }
.no-underline-l {
text-decoration: none; } }
/*
TEXT ALIGN
Docs: http://tachyons.io/docs/typography/text-align/
Base
t = text-align
Modifiers
l = left
r = right
c = center
j = justify
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.tl {
text-align: left; }
.tr {
text-align: right; }
.tc {
text-align: center; }
.tj {
text-align: justify; }
@media screen and (min-width: 30em) {
.tl-ns {
text-align: left; }
.tr-ns {
text-align: right; }
.tc-ns {
text-align: center; }
.tj-ns {
text-align: justify; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.tl-m {
text-align: left; }
.tr-m {
text-align: right; }
.tc-m {
text-align: center; }
.tj-m {
text-align: justify; } }
@media screen and (min-width: 60em) {
.tl-l {
text-align: left; }
.tr-l {
text-align: right; }
.tc-l {
text-align: center; }
.tj-l {
text-align: justify; } }
/*
TEXT TRANSFORM
Docs: http://tachyons.io/docs/typography/text-transform/
Base:
tt = text-transform
Modifiers
c = capitalize
l = lowercase
u = uppercase
n = none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.ttc {
text-transform: capitalize; }
.ttl {
text-transform: lowercase; }
.ttu {
text-transform: uppercase; }
.ttn {
text-transform: none; }
@media screen and (min-width: 30em) {
.ttc-ns {
text-transform: capitalize; }
.ttl-ns {
text-transform: lowercase; }
.ttu-ns {
text-transform: uppercase; }
.ttn-ns {
text-transform: none; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.ttc-m {
text-transform: capitalize; }
.ttl-m {
text-transform: lowercase; }
.ttu-m {
text-transform: uppercase; }
.ttn-m {
text-transform: none; } }
@media screen and (min-width: 60em) {
.ttc-l {
text-transform: capitalize; }
.ttl-l {
text-transform: lowercase; }
.ttu-l {
text-transform: uppercase; }
.ttn-l {
text-transform: none; } }
/*
TYPE SCALE
Docs: http://tachyons.io/docs/typography/scale/
Base:
f = font-size
Modifiers
1 = 1st step in size scale
2 = 2nd step in size scale
3 = 3rd step in size scale
4 = 4th step in size scale
5 = 5th step in size scale
6 = 6th step in size scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/*
* For Hero/Marketing Titles
*
* These generally are too large for mobile
* so be careful using them on smaller screens.
* */
.f-6,
.f-headline {
font-size: 6rem; }
.f-5,
.f-subheadline {
font-size: 5rem; }
/* Type Scale */
.f1 {
font-size: 3rem; }
.f2 {
font-size: 2.25rem; }
.f3 {
font-size: 1.5rem; }
.f4 {
font-size: 1.25rem; }
.f5 {
font-size: 1rem; }
.f6 {
font-size: 0.875rem; }
.f7 {
font-size: 0.75rem; }
@media screen and (min-width: 30em) {
.f-6-ns,
.f-headline-ns {
font-size: 6rem; }
.f-5-ns,
.f-subheadline-ns {
font-size: 5rem; }
.f1-ns {
font-size: 3rem; }
.f2-ns {
font-size: 2.25rem; }
.f3-ns {
font-size: 1.5rem; }
.f4-ns {
font-size: 1.25rem; }
.f5-ns {
font-size: 1rem; }
.f6-ns {
font-size: 0.875rem; }
.f7-ns {
font-size: 0.75rem; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.f-6-m,
.f-headline-m {
font-size: 6rem; }
.f-5-m,
.f-subheadline-m {
font-size: 5rem; }
.f1-m {
font-size: 3rem; }
.f2-m {
font-size: 2.25rem; }
.f3-m {
font-size: 1.5rem; }
.f4-m {
font-size: 1.25rem; }
.f5-m {
font-size: 1rem; }
.f6-m {
font-size: 0.875rem; }
.f7-m {
font-size: 0.75rem; } }
@media screen and (min-width: 60em) {
.f-6-l,
.f-headline-l {
font-size: 6rem; }
.f-5-l,
.f-subheadline-l {
font-size: 5rem; }
.f1-l {
font-size: 3rem; }
.f2-l {
font-size: 2.25rem; }
.f3-l {
font-size: 1.5rem; }
.f4-l {
font-size: 1.25rem; }
.f5-l {
font-size: 1rem; }
.f6-l {
font-size: 0.875rem; }
.f7-l {
font-size: 0.75rem; } }
/*
TYPOGRAPHY
http://tachyons.io/docs/typography/measure/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Measure is limited to ~66 characters */
.measure {
max-width: 30em; }
/* Measure is limited to ~80 characters */
.measure-wide {
max-width: 34em; }
/* Measure is limited to ~45 characters */
.measure-narrow {
max-width: 20em; }
/* Book paragraph style - paragraphs are indented with no vertical spacing. */
.indent {
text-indent: 1em;
margin-top: 0;
margin-bottom: 0; }
.small-caps {
font-variant: small-caps; }
/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
@media screen and (min-width: 30em) {
.measure-ns {
max-width: 30em; }
.measure-wide-ns {
max-width: 34em; }
.measure-narrow-ns {
max-width: 20em; }
.indent-ns {
text-indent: 1em;
margin-top: 0;
margin-bottom: 0; }
.small-caps-ns {
font-variant: small-caps; }
.truncate-ns {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.measure-m {
max-width: 30em; }
.measure-wide-m {
max-width: 34em; }
.measure-narrow-m {
max-width: 20em; }
.indent-m {
text-indent: 1em;
margin-top: 0;
margin-bottom: 0; }
.small-caps-m {
font-variant: small-caps; }
.truncate-m {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; } }
@media screen and (min-width: 60em) {
.measure-l {
max-width: 30em; }
.measure-wide-l {
max-width: 34em; }
.measure-narrow-l {
max-width: 20em; }
.indent-l {
text-indent: 1em;
margin-top: 0;
margin-bottom: 0; }
.small-caps-l {
font-variant: small-caps; }
.truncate-l {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; } }
/*
UTILITIES
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Equivalent to .overflow-y-scroll */
.overflow-container {
overflow-y: scroll; }
.center {
margin-right: auto;
margin-left: auto; }
.mr-auto {
margin-right: auto; }
.ml-auto {
margin-left: auto; }
@media screen and (min-width: 30em) {
.center-ns {
margin-right: auto;
margin-left: auto; }
.mr-auto-ns {
margin-right: auto; }
.ml-auto-ns {
margin-left: auto; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.center-m {
margin-right: auto;
margin-left: auto; }
.mr-auto-m {
margin-right: auto; }
.ml-auto-m {
margin-left: auto; } }
@media screen and (min-width: 60em) {
.center-l {
margin-right: auto;
margin-left: auto; }
.mr-auto-l {
margin-right: auto; }
.ml-auto-l {
margin-left: auto; } }
/*
VISIBILITY
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/*
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: 30em) {
.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: 30em) and (max-width: 60em) {
.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: 60em) {
.clip-l {
position: fixed !important;
_position: absolute !important;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px); } }
/*
WHITE SPACE
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.ws-normal {
white-space: normal; }
.nowrap {
white-space: nowrap; }
.pre {
white-space: pre; }
@media screen and (min-width: 30em) {
.ws-normal-ns {
white-space: normal; }
.nowrap-ns {
white-space: nowrap; }
.pre-ns {
white-space: pre; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.ws-normal-m {
white-space: normal; }
.nowrap-m {
white-space: nowrap; }
.pre-m {
white-space: pre; } }
@media screen and (min-width: 60em) {
.ws-normal-l {
white-space: normal; }
.nowrap-l {
white-space: nowrap; }
.pre-l {
white-space: pre; } }
/*
VERTICAL ALIGN
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.v-base {
vertical-align: baseline; }
.v-mid {
vertical-align: middle; }
.v-top {
vertical-align: top; }
.v-btm {
vertical-align: bottom; }
@media screen and (min-width: 30em) {
.v-base-ns {
vertical-align: baseline; }
.v-mid-ns {
vertical-align: middle; }
.v-top-ns {
vertical-align: top; }
.v-btm-ns {
vertical-align: bottom; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.v-base-m {
vertical-align: baseline; }
.v-mid-m {
vertical-align: middle; }
.v-top-m {
vertical-align: top; }
.v-btm-m {
vertical-align: bottom; } }
@media screen and (min-width: 60em) {
.v-base-l {
vertical-align: baseline; }
.v-mid-l {
vertical-align: middle; }
.v-top-l {
vertical-align: top; }
.v-btm-l {
vertical-align: bottom; } }
/*
HOVER EFFECTS
Docs: http://tachyons.io/docs/themes/hovers/
- Dim
- Glow
- Hide Child
- Underline text
- Grow
- Pointer
- Shadow
*/
/*
Dim element on hover by adding the dim class.
*/
.dim {
opacity: 1;
transition: opacity .15s ease-in; }
.dim:hover,
.dim:focus {
opacity: .5;
transition: opacity .15s ease-in; }
.dim:active {
opacity: .8;
transition: opacity .15s ease-out; }
/*
Animate opacity to 100% on hover by adding the glow class.
*/
.glow {
transition: opacity .15s ease-in; }
.glow:hover,
.glow:focus {
opacity: 1;
transition: opacity .15s ease-in; }
/*
Hide child & reveal on hover:
Put the hide-child class on a parent element and any nested element with the
child class will be hidden and displayed on hover or focus.
<div class="hide-child">
<div class="child"> Hidden until hover or focus </div>
<div class="child"> Hidden until hover or focus </div>
<div class="child"> Hidden until hover or focus </div>
<div class="child"> Hidden until hover or focus </div>
</div>
*/
.hide-child .child {
opacity: 0;
transition: opacity .15s ease-in; }
.hide-child:hover .child,
.hide-child:focus .child,
.hide-child:active .child {
opacity: 1;
transition: opacity .15s ease-in; }
.underline-hover:hover,
.underline-hover:focus {
text-decoration: underline; }
/* Can combine this with overflow-hidden to make background images grow on hover
* even if you are using background-size: cover */
.grow {
-moz-osx-font-smoothing: grayscale;
backface-visibility: hidden;
transform: translateZ(0);
transition: transform 0.25s ease-out; }
.grow:hover,
.grow:focus {
transform: scale(1.05); }
.grow:active {
transform: scale(0.9); }
.grow-large {
-moz-osx-font-smoothing: grayscale;
backface-visibility: hidden;
transform: translateZ(0);
transition: transform .25s ease-in-out; }
.grow-large:hover,
.grow-large:focus {
transform: scale(1.2); }
.grow-large:active {
transform: scale(0.95); }
/* Add pointer on hover */
.pointer:hover {
cursor: pointer; }
/*
Add shadow on hover.
Performant box-shadow animation pattern from
http://tobiasahlin.com/blog/how-to-animate-box-shadow/
*/
.shadow-hover {
cursor: pointer;
position: relative;
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
.shadow-hover::after {
content: '';
box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.2);
border-radius: inherit;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
.shadow-hover:hover::after,
.shadow-hover:focus::after {
opacity: 1; }
/* Combine with classes in skins and skins-pseudo for
* many different transition possibilities. */
.bg-animate,
.bg-animate:hover,
.bg-animate:focus {
transition: background-color .15s ease-in-out; }
/*
Z-INDEX
Base
z = z-index
Modifiers
-0 = literal value 0
-1 = literal value 1
-2 = literal value 2
-3 = literal value 3
-4 = literal value 4
-5 = literal value 5
-999 = literal value 999
-9999 = literal value 9999
-max = largest accepted z-index value as integer
-inherit = string value inherit
-initial = string value initial
-unset = string value unset
MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
Spec: http://www.w3.org/TR/CSS2/zindex.html
Articles:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Tips on extending:
There might be a time worth using negative z-index values.
Or if you are using tachyons with another project, you might need to
adjust these values to suit your needs.
*/
.z-0 {
z-index: 0; }
.z-1 {
z-index: 1; }
.z-2 {
z-index: 2; }
.z-3 {
z-index: 3; }
.z-4 {
z-index: 4; }
.z-5 {
z-index: 5; }
.z-999 {
z-index: 999; }
.z-9999 {
z-index: 9999; }
.z-max {
z-index: 2147483647; }
.z-inherit {
z-index: inherit; }
.z-initial {
z-index: initial; }
.z-unset {
z-index: unset; }
/*
NESTED
Tachyons module for styling nested elements
that are generated by a cms.
*/
.nested-copy-line-height p,
.nested-copy-line-height ul,
.nested-copy-line-height ol {
line-height: 1.5; }
.nested-headline-line-height h1,
.nested-headline-line-height h2,
.nested-headline-line-height h3,
.nested-headline-line-height h4,
.nested-headline-line-height h5,
.nested-headline-line-height h6 {
line-height: 1.25; }
.nested-list-reset ul,
.nested-list-reset ol {
padding-left: 0;
margin-left: 0;
list-style-type: none; }
.nested-copy-indent p + p {
text-indent: 0.1em;
margin-top: 0;
margin-bottom: 0; }
.nested-copy-seperator p + p {
margin-top: 1.5em; }
.nested-img img {
width: 100%;
max-width: 100%;
display: block; }
.nested-links a {
color: #357edd;
transition: color .15s ease-in; }
.nested-links a:hover,
.nested-links a:focus {
color: #96ccff;
transition: color .15s ease-in; }
/*
STYLES
Add custom styles here.
*/
/*
Inserts a CSS expression with one or more custom variables.
You can provide an arbitrary number of strings in the second
argument, separated by spaces. Any strings corresponding to
variable names will be replaced by the correct values, while
other strings are left untouched.
Example usage:
@include usevar(border-color, dimmer-color);
@include usevar(background, "linear-gradient(" dim-background-transparent "," dim-background ")");
For clarity and to avoid syntax issues, you are encouraged to
use unquoted strings for variables and quoted strings for
everything else.
For convenience in common cases, if only a single argument
is provided and it does not match an existing variable, this
will throw an error.
*/
/* bbcode [code] -- see: https://github.com/richleland/pygments-css/blob/master/friendly.css */
.codeblock .hll {
background-color: #ffffcc; }
.codeblock .c {
color: #60a0b0;
font-style: italic; }
/* Comment */
.codeblock .err {
color: #FF0000; }
/* Error */
.codeblock .k {
color: #007020;
font-weight: bold; }
/* Keyword */
.codeblock .o {
color: #666666; }
/* Operator */
.codeblock .cm {
color: #60a0b0;
font-style: italic; }
/* Comment.Multiline */
.codeblock .cp {
color: #007020; }
/* Comment.Preproc */
.codeblock .c1 {
color: #60a0b0;
font-style: italic; }
/* Comment.Single */
.codeblock .cs {
color: #60a0b0;
background-color: #fff0f0; }
/* Comment.Special */
.codeblock .gd {
color: #A00000; }
/* Generic.Deleted */
.codeblock .ge {
font-style: italic; }
/* Generic.Emph */
.codeblock .gr {
color: #FF0000; }
/* Generic.Error */
.codeblock .gh {
color: #000080;
font-weight: bold; }
/* Generic.Heading */
.codeblock .gi {
color: #00A000; }
/* Generic.Inserted */
.codeblock .go {
color: #808080; }
/* Generic.Output */
.codeblock .gp {
color: #c65d09;
font-weight: bold; }
/* Generic.Prompt */
.codeblock .gs {
font-weight: bold; }
/* Generic.Strong */
.codeblock .gu {
color: #800080;
font-weight: bold; }
/* Generic.Subheading */
.codeblock .gt {
color: #0040D0; }
/* Generic.Traceback */
.codeblock .kc {
color: #007020;
font-weight: bold; }
/* Keyword.Constant */
.codeblock .kd {
color: #007020;
font-weight: bold; }
/* Keyword.Declaration */
.codeblock .kn {
color: #007020;
font-weight: bold; }
/* Keyword.Namespace */
.codeblock .kp {
color: #007020; }
/* Keyword.Pseudo */
.codeblock .kr {
color: #007020;
font-weight: bold; }
/* Keyword.Reserved */
.codeblock .kt {
color: #902000; }
/* Keyword.Type */
.codeblock .m {
color: #40a070; }
/* Literal.Number */
.codeblock .s {
color: #4070a0; }
/* Literal.String */
.codeblock .na {
color: #4070a0; }
/* Name.Attribute */
.codeblock .nb {
color: #007020; }
/* Name.Builtin */
.codeblock .nc {
color: #0e84b5;
font-weight: bold; }
/* Name.Class */
.codeblock .no {
color: #60add5; }
/* Name.Constant */
.codeblock .nd {
color: #555555;
font-weight: bold; }
/* Name.Decorator */
.codeblock .ni {
color: #d55537;
font-weight: bold; }
/* Name.Entity */
.codeblock .ne {
color: #007020; }
/* Name.Exception */
.codeblock .nf {
color: #06287e; }
/* Name.Function */
.codeblock .nl {
color: #002070;
font-weight: bold; }
/* Name.Label */
.codeblock .nn {
color: #0e84b5;
font-weight: bold; }
/* Name.Namespace */
.codeblock .nt {
color: #062873;
font-weight: bold; }
/* Name.Tag */
.codeblock .nv {
color: #bb60d5; }
/* Name.Variable */
.codeblock .ow {
color: #007020;
font-weight: bold; }
/* Operator.Word */
.codeblock .w {
color: #bbbbbb; }
/* Text.Whitespace */
.codeblock .mf {
color: #40a070; }
/* Literal.Number.Float */
.codeblock .mh {
color: #40a070; }
/* Literal.Number.Hex */
.codeblock .mi {
color: #40a070; }
/* Literal.Number.Integer */
.codeblock .mo {
color: #40a070; }
/* Literal.Number.Oct */
.codeblock .sb {
color: #4070a0; }
/* Literal.String.Backtick */
.codeblock .sc {
color: #4070a0; }
/* Literal.String.Char */
.codeblock .sd {
color: #4070a0;
font-style: italic; }
/* Literal.String.Doc */
.codeblock .s2 {
color: #4070a0; }
/* Literal.String.Double */
.codeblock .se {
color: #4070a0;
font-weight: bold; }
/* Literal.String.Escape */
.codeblock .sh {
color: #4070a0; }
/* Literal.String.Heredoc */
.codeblock .si {
color: #70a0d0;
font-style: italic; }
/* Literal.String.Interpol */
.codeblock .sx {
color: #c65d09; }
/* Literal.String.Other */
.codeblock .sr {
color: #235388; }
/* Literal.String.Regex */
.codeblock .s1 {
color: #4070a0; }
/* Literal.String.Single */
.codeblock .ss {
color: #517918; }
/* Literal.String.Symbol */
.codeblock .bp {
color: #007020; }
/* Name.Builtin.Pseudo */
.codeblock .vc {
color: #bb60d5; }
/* Name.Variable.Class */
.codeblock .vg {
color: #bb60d5; }
/* Name.Variable.Global */
.codeblock .vi {
color: #bb60d5; }
/* Name.Variable.Instance */
.codeblock .il {
color: #40a070; }
/* Literal.Number.Integer.Long */
.dark {
background-color: #222;
color: #bbb; }
.noselect {
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* IE/Edge */
user-select: none;
/* non-prefixed version, currently */ }
* {
box-sizing: border-box; }
br {
border-style: none; }
body {
background-color: #fff;
background-color: var(--main-background-color);
color: black;
color: var(--main-color);
font-family: "Fira Sans", sans-serif;
background-size: cover;
min-height: 100vh;
box-sizing: border-box;
font-size: 0.875rem;
line-height: 1.5em;
font-weight: 400; }
a {
color: #666;
color: var(--link-color);
border-bottom-color: #666;
border-bottom-color: var(--link-border-color);
border-bottom: none;
text-decoration: none; }
a:hover {
/* text-decoration:underline; */ }
a.external::after {
font-family: "icons";
content: " 1";
vertical-align: middle; }
ol {
list-style-type: decimal; }
ul {
list-style-type: circle;
padding: 0px;
margin: 0px; }
.list-none {
list-style-type: none; }
li {
padding: 0px;
margin: 0px;
padding-left: 5px;
margin-left: 15px; }
h1, h2 {
font-weight: 500; }
h1, h2, h3, h4 {
margin: 0px;
margin-bottom: 5px;
font-size: 1.5rem;
line-height: 1.25em; }
strong {
font-weight: 600; }
em {
font-style: italic; }
p {
box-sizing: border-box;
margin: 0px;
padding: 0px; }
.p-spaced p:not(:first-child) {
margin-top: 0.6em; }
.p-spaced p:not(:last-child) {
margin-bottom: 0.6em; }
table {
border-collapse: collapse;
table-layout: fixed; }
th, td {
color: black;
color: var(--fg-font-color); }
td {
vertical-align: baseline; }
tr.line-above th, tr.line-above td {
border-top-color: #444;
border-top-color: var(--table-border-color);
border-top-width: 1px;
border-top-style: solid;
padding-top: 20px; }
hr {
border-top-color: #444;
border-top-color: var(--hr-color);
border-width: 1px 0 0;
border-top-style: solid;
max-width: 300px; }
article code {
font-family: "Fira Mono", monospace; }
.big {
font-size: 120%; }
.title {
font-weight: bold; }
.clear {
width: 0; }
.full {
width: 100%; }
.hidden {
display: none; }
.empty {
padding-left: 20px; }
.column h2 {
text-align: center;
margin-bottom: 20px; }
.margin-center {
margin-left: auto;
margin-right: auto; }
.flex-shrink-0 {
flex-shrink: 0; }
.flex-grow-1 {
flex-grow: 1; }
.b--theme {
border-color: #666;
border-color: var(--theme-color); }
.c--dim {
color: #333;
color: var(--dim-color); }
.c--theme-dim {
color: #aaa;
color: var(--theme-color-dim); }
.b--dim {
border-color: #333;
border-color: var(--dim-color); }
.b--theme-dim {
border-color: #aaa;
border-color: var(--theme-color-dim); }
.c--dimmer, footer .list li:not(:last-child)::after {
color: #999;
color: var(--dimmer-color); }
.c--theme-dimmer {
color: #bbb;
color: var(--theme-color-dimmer); }
.b--dimmer, .contents div.code {
border-color: #999;
border-color: var(--dimmer-color); }
.b--theme-dimmer {
border-color: #bbb;
border-color: var(--theme-color-dimmer); }
.c--dimmest {
color: #bbb;
color: var(--dimmest-color); }
.c--theme-dimmest {
color: #ccc;
color: var(--theme-color-dimmest); }
.b--dimmest, header #login-popup, .optionbar, .post .contents blockquote {
border-color: #bbb;
border-color: var(--dimmest-color); }
.b--theme-dimmest {
border-color: #ccc;
border-color: var(--theme-color-dimmest); }
.bg--dim {
background-color: #f0f0f0;
background-color: var(--dim-background); }
.bg--content {
background-color: #f8f8f8;
background-color: var(--content-background); }
.f8 {
font-size: 0.65rem; }
.mw-site {
max-width: 80rem; }
.mh-3 {
max-height: 4rem; }
.mh-4 {
max-height: 8rem; }
.mh-5 {
max-height: 16rem; }
.mh-100 {
max-height: 100%; }
.mh-50vh {
max-height: 50vh; }
.mh-60vh {
max-height: 60vh; }
.mh-70vh {
max-height: 70vh; }
.mh-80vh {
max-height: 80vh; }
.fira {
font-family: "Fira Sans", sans-serif; }
.bi-avoid {
break-inside: avoid; }
.cc-auto {
column-count: auto; }
.cc1 {
column-count: 1; }
.cc2 {
column-count: 2; }
.cc3 {
column-count: 3; }
.cg0 {
column-gap: 0; }
.cg1 {
column-gap: 0.25rem; }
.cg2 {
column-gap: 0.5rem; }
.cg3 {
column-gap: 1rem; }
.cg4 {
column-gap: 2rem; }
.cg5 {
column-gap: 4rem; }
@media screen and (min-width: 30em) {
.bi-avoid-ns {
break-inside: avoid; }
.cc-auto-ns {
column-count: auto; }
.cc1-ns {
column-count: 1; }
.cc2-ns {
column-count: 2; }
.cc3-ns {
column-count: 3; }
.cg0-ns {
column-gap: 0; }
.cg1-ns {
column-gap: 0.25rem; }
.cg2-ns {
column-gap: 0.5rem; }
.cg3-ns {
column-gap: 1rem; }
.cg4-ns {
column-gap: 2rem; }
.cg5-ns {
column-gap: 4rem; }
.bg--dim-ns {
background-color: #f0f0f0;
background-color: var(--dim-background); } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.bi-avoid-m {
break-inside: avoid; }
.cc-auto-m {
column-count: auto; }
.cc1-m {
column-count: 1; }
.cc2-m {
column-count: 2; }
.cc3-m {
column-count: 3; }
.cg1-m {
column-gap: 0.25rem; }
.cg2-m {
column-gap: 0.5rem; }
.cg3-m {
column-gap: 1rem; }
.cg4-m {
column-gap: 2rem; }
.cg5-m {
column-gap: 4rem; }
.bg--dim-m {
background-color: #f0f0f0;
background-color: var(--dim-background); } }
@media screen and (min-width: 60em) {
.bi-avoid-l {
break-inside: avoid; }
.cc-auto-l {
column-count: auto; }
.cc1-l {
column-count: 1; }
.cc2-l {
column-count: 2; }
.cc3-l {
column-count: 3; }
.cg1-l {
column-gap: 0.25rem; }
.cg2-l {
column-gap: 0.5rem; }
.cg3-l {
column-gap: 1rem; }
.cg4-l {
column-gap: 2rem; }
.cg5-l {
column-gap: 4rem; }
.bg--dim-l {
background-color: #f0f0f0;
background-color: var(--dim-background); } }
.not-first:first-child {
display: none; }
.not-first-of-type:first-of-type {
display: none; }
.not-last:last-child {
display: none; }
.not-last-of-type:last-of-type {
display: none; }
.svgicon svg {
fill: currentColor;
width: 1em;
height: 1em; }
.svgicon:not(.svgicon-nofix) svg {
transform: translate(0px, 0.1em); }
.center-layout {
margin-right: auto;
margin-left: auto; }
header {
border-bottom: 2px solid #333; }
header .menu-bar {
width: 100%;
z-index: 10; }
header .menu-bar .items a {
font-weight: bold; }
header .menu-bar .items a.patreon {
float: right;
height: 30px;
padding-top: 18px;
display: inline-block; }
header .menu-bar .items a h1 {
display: inline; }
header .menu-bar .hmdev-logo {
width: 100%; }
@media screen and (min-width: 30em) {
header .menu-bar .hmdev-logo {
width: 11.25rem; } }
header .menu-bar .hmdev-logo.project {
width: 70px; }
@keyframes logo-blink {
from {
opacity: 0.0; }
to {
opacity: 1.0; } }
@-webkit-keyframes logo-blink {
from {
opacity: 0.0; }
to {
opacity: 1.0; } }
header .menu-bar .logo {
height: 3.75rem;
background-color: #333;
margin: 0px;
padding: 0px; }
header .menu-bar .underscore {
width: 100%;
height: 100%;
animation: logo-blink 1s infinite alternate;
-webkit-animation: logo-blink 1s infinite alternate ease-in-out; }
header .menu-bar .logo, header .menu-bar .underscore {
background-size: 8.75rem;
background-repeat: no-repeat;
background-position: center center; }
header .user-options {
position: relative; }
header .login, header .register {
text-align: center; }
header #login-popup {
background-color: #fbfbfb;
background-color: var(--login-popup-background);
color: black;
color: var(--fg-font-color);
border-width: 1px;
border-style: dashed;
visibility: hidden;
position: absolute;
z-index: 12;
margin-top: 10px;
right: 0px;
top: 20px;
width: 290px;
max-height: 0px;
overflow: hidden;
opacity: 0;
transition: all 0.2s; }
header #login-popup.open {
max-height: 170px;
opacity: 1;
visibility: visible; }
header #login-popup label {
padding-right: 10px; }
@media screen and (min-width: 30em) {
footer .list li:not(:last-child)::after {
content: ' / '; } }
.content {
background-color: #f8f8f8;
background-color: var(--content-background);
text-align: center;
margin: auto; }
.content p {
-moz-text-size-adjust: auto;
-webkit-text-size-adjust: auto;
text-size-adjust: auto; }
.content .description {
line-height: 1.42em;
text-align: left;
margin: auto; }
.content .description p {
margin-bottom: 0.5rem;
text-align: left; }
.content > .top-bar {
text-align: left; }
.content-block {
/* Background color given by theme */
background-repeat: repeat-x;
border-radius: 2px;
text-align: left;
width: 100%;
/* box-shadow: 0px 4px 7px rgba(0,0,0,0.5); /* Not themed */
position: relative;
box-sizing: border-box; }
.content-block.top-bar {
background-image: none; }
.content-block.language-desc {
padding: 10px; }
.content-block.language-desc h3 {
margin-left: 10px; }
.content-block .no-bg {
background-image: none;
background-color: transparent;
box-shadow: none; }
.sidebar .content-block.single {
padding: 0px;
/* for project list, TODO */
margin-top: 20px; }
.sidebar .content-block.top-bar {
/* box-shadow: 0px 2px 4px rgba(0,0,0,0.2); /* Not themed */
width: 80%;
display: block;
margin: 10px auto; }
.sidebar br.sidebar-filler {
line-height: 20px; }
.sidebar .projectlist {
background-color: transparent; }
.content-block .bottom-padding, .sidebar .bottom-padding {
margin-top: 1rem; }
.breadcrumb:hover {
text-decoration: underline; }
.breadcrumb.current {
text-overflow: clip ellipsis; }
.breadcrumb-before:nth-of-type(n+2)::before {
content: '≫'; }
.optionbar {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
border-style: dashed;
border-width: 0px;
border-bottom-width: 1px; }
@media screen and (min-width: 30em) {
.optionbar {
flex-direction: row;
text-align: left; } }
.optionbar.bottom {
border-bottom-width: 0px;
border-top-width: 1px; }
.optionbar.center {
text-align: center; }
.optionbar .options {
display: flex;
flex-direction: column; }
@media screen and (min-width: 30em) {
.optionbar .options {
flex-direction: row; } }
.optionbar button,
.optionbar .button,
.optionbar input[type=button],
.optionbar input[type=submit] {
border: none;
background: none;
font-weight: normal; }
.optionbar .group {
display: inline-block;
height: 100%;
margin: auto; }
.tab {
background-color: #fff;
background-color: var(--tab-background); }
.tab-bar {
border-color: #d8d8d8;
border-color: var(--tab-border-color);
width: 100%;
border-bottom-width: 1px;
border-bottom-style: solid;
box-sizing: border-box; }
.tab-bar .tab-button {
background-color: #dfdfdf;
background-color: var(--tab-button-background);
border-color: #d8d8d8;
border-color: var(--tab-border-color);
height: 100%;
display: inline-block;
padding: 10px 15px;
line-height: 100%;
cursor: pointer;
border-width: 1px;
border-style: solid;
box-sizing: border-box; }
.tab-bar .tab-button:hover {
background-color: #efefef;
background-color: var(--tab-button-background-hover); }
.tab-bar .tab-button.current {
background-color: #fff;
background-color: var(--tab-button-background-current);
border-bottom-color: transparent;
font-weight: bold;
height: 105%; }
.pagination .page.current {
cursor: default;
font-weight: 600; }
.pagination .page.current:hover {
text-decoration: none; }
.user-link {
position: relative; }
.user-popup {
opacity: 0;
max-height: 0px;
width: 340px;
text-align: center;
transition: max-height 0.2s, opacity 0.1s;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
overflow: hidden;
position: absolute;
bottom: 0px; }
.user-popup.expanded {
visibility: visible;
max-height: 250px;
opacity: 1; }
.user-popup table {
/* Background color given by theme */
width: 100%;
position: relative;
border-radius: 3px;
z-index: 10; }
.user-popup td {
vertical-align: top;
padding: 15px 9px; }
.user-popup #avatar {
width: 100px;
height: 100px;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
border-radius: 3px;
margin: 0px auto; }
.user-popup .username {
font-weight: bold; }
.user-popup .bottom {
/* Border color given by theme */
border-top: 1px solid transparent;
padding: 15px; }
.user-popup .bottom .bio {
vertical-align: top;
width: 90%; }
.site-search {
width: 100%; }
.site-search:focus {
width: 200%; }
.site-search[type=text].lite {
transition: border-bottom-color 60ms ease-in-out, width 300ms ease; }
#search_button_homepage {
margin: 0px;
height: 100%;
height: calc(100% - 2px);
border-radius: 0px;
display: inline-block;
display: none; }
.background-even:nth-of-type(even) {
background-color: #f8f8f8;
background-color: var(--background-even-background); }
.userlist {
text-align: center;
width: 100%;
margin: 0px auto;
padding-top: 30px;
position: relative;
line-height: 0em; }
.userlist .user {
margin: 5px;
display: inline-block;
height: 200px;
max-height: 180px;
text-align: left;
position: relative;
width: 296px;
border-radius: 3px;
line-height: 1.4em;
overflow: hidden;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
top: 0px;
transition: box-shadow 0.2s, background-color 0.2s; }
.userlist .user:hover {
box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.2); }
.userlist .user table {
/* Border and background color given by theme */
border: 1px solid transparent;
width: 100%;
height: 100%; }
.userlist .user .bottom {
transition: background-color 0.2s; }
.userlist .user td {
vertical-align: top; }
.userlist .user td.avatar {
width: 100px;
height: 80px; }
.userlist .user .name {
text-align: left; }
.userlist .user .name .username {
vertical-align: middle; }
.userlist .user .avatar .image {
display: block;
float: left;
width: 80px;
height: 80px;
background-size: cover;
margin-right: 10px; }
.userlist .user .bio {
padding: 5px; }
.text {
background-color: #f9f9f9;
background-color: var(--text-background); }
.underline {
text-decoration: underline; }
.monospace {
font-family: "Fira Mono", monospace;
background-color: rgba(0, 0, 0, 0.1);
padding: 0.2em 0 0.05em;
border-radius: 3px; }
.monospace::before, .monospace::after {
content: "\00a0";
letter-spacing: -0.2em; }
.center {
text-align: center; }
.right {
text-align: right; }
.left {
text-align: left; }
.justify {
text-align: justify;
-webkit-hyphens: manual;
-moz-hyphens: manual;
-ms-hyphens: manual;
hyphens: manual; }
.spoiler {
border-color: #aaa;
border-color: var(--spoiler-border);
border-width: 1px;
border-style: dashed;
color: transparent; }
.spoiler::selection {
color: white;
background-color: black; }
pre {
font-family: monospace; }
.post-edit {
width: 90%;
margin: auto; }
.toolbar {
background-color: #fff;
background-color: var(--editor-toolbar-background);
border-color: transparent;
border-color: var(--editor-toolbar-border-color);
border-radius: 3px;
height: 2.2em;
overflow-y: scroll;
transition: all 0.3s;
border: 1px solid transparent; }
.toolbar .button, .toolbar input[type=button] {
background-color: transparent;
background-color: var(--editor-toolbar-button-background);
border-color: #ccc;
border-color: var(--editor-toolbar-button-border-color);
line-height: 2.2em;
box-shadow: none;
border: 0px;
border-right: 1px solid transparent;
border-radius: 0px;
margin: 0px;
padding: 0px 10px;
height: 100%;
vertical-align: bottom;
text-transform: none;
font-weight: 300; }
.toolbar .button:hover, .toolbar input[type=button]:hover {
background-color: #ddd;
background-color: var(--editor-toolbar-button-background-hover); }
.toolbar input[type="text"] {
height: 2.2em;
border: 0px solid transparent;
/* Not themed */ }
.actionbar {
text-align: center; }
.editor .body {
width: 100%;
font-size: 13pt;
height: 25em; }
.editor .title-edit {
width: 100%; }
.editor .title-edit label {
font-weight: bold; }
.editor .title-edit input {
width: 100%; }
.editor .editreason label {
font-weight: bold; }
.editor .editreason input {
width: 100%; }
.editor .toolbar {
width: 95%;
margin: 10px auto; }
.editor .toolbar select {
font-size: 10pt;
border: 0px; }
.editor .toolbar select:hover {
border: 0px; }
.editor .toolbar select:focus {
border: 0px; }
.editor .toolbar #bold {
font-weight: bold; }
.editor .toolbar #italic {
font-style: italic; }
.editor .toolbar #underline {
text-decoration: underline; }
.editor .toolbar #monospace {
font-family: monospace; }
.editor .toolbar #url {
text-decoration: underline;
font-style: italic; }
.editor .actionbar input[type=button] {
margin-left: 10px;
margin-right: 10px; }
.edit-form .error {
margin-left: 5em;
padding: 10px;
color: red; }
.edit-form input[type=text] {
min-width: 20em; }
.edit-form textarea {
font-size: 13pt; }
.edit-form .note {
margin-bottom: 5px;
font-style: italic;
font-size: 90%; }
.edit-form .links {
width: 80%;
min-height: 200px;
height: 15vh; }
.edit-form .half {
padding: 10px;
text-align: center; }
.edit-form table {
width: 95%;
margin: auto;
border-collapse: separate;
border-spacing: 0px 10px; }
.edit-form table td {
padding-bottom: 15px;
width: 90%; }
.edit-form table td.half {
width: 50%; }
.edit-form table td table {
width: 100%; }
.edit-form th {
text-align: right;
font-weight: bold;
padding-right: 10px;
padding-bottom: 15px;
vertical-align: top;
max-width: 5em; }
.edit-form td table th {
text-align: left; }
.edit-form .page-options label {
font-weight: bold;
margin-right: 20px; }
.edit-form.profile-edit .longbio {
width: 100%;
min-height: 400px;
height: 30vh; }
.edit-form.profile-edit .avatar-preview {
border: 1px solid transparent;
margin: 10px;
margin-bottom: 0px; }
.edit-form.profile-edit textarea.shortbio,
.edit-form.profile-edit textarea.signature {
min-width: 300px;
width: 50%;
min-height: 100px;
height: 4em; }
.edit-form.profile-edit .logo-preview {
border-color: #999;
border-color: var(--project-edit-logo-previw-border-color);
width: 200px;
border-width: 1px; }
.edit-form.project-edit .project_description {
width: 100%;
min-height: 400px;
height: 30vh; }
.edit-form.project-edit input.project_blurb,
.edit-form.project-edit input.project_name {
min-width: 300px;
width: 50%; }
.edit-form.project-edit .quota-bar {
border-color: #999;
border-color: var(--project-edit-quota-bar-border-color);
width: 500px;
border-width: 1px;
margin-bottom: 10px; }
.edit-form.project-edit .quota-bar .quota-filled {
background-color: #444;
background-color: var(--project-edit-quota-bar-filled-background);
height: 100%; }
.episode-list .description p {
line-height: 1.42em; }
.episode-list h2, .episode-list h3 {
font-size: 1em;
font-weight: bold; }
.episode-list ul {
margin-bottom: 30px;
list-style-type: none;
margin-top: -2px; }
#outer_holder .back {
margin: 0px auto 20px auto; }
#outer_holder .back .outer {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
align-items: flex-start;
-webkit-justify-content: center;
justify-content: center; }
#outer_holder .back .outer > .sidebar {
max-width: 260px; }
#outer_holder .back .outer > .sidebar > div {
margin: 6px;
background-color: #ddd;
width: 200px;
margin-bottom: 12px; }
#outer_holder .back article {
-webkit-box-flex: 1 1 40%;
-moz-box-flex: 1 1 40%;
-webkit-flex: 1 1 40%;
-ms-flex: 1 1 40%;
flex: 1 1 40%; }
#player-wrapper {
display: inline-block;
-webkit-box-flex: 0 1 auto;
-moz-box-flex: 0 1 auto;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
box-shadow: 0px 0px 4px #000; }
@media screen {
#player-wrapper #player {
width: 320px;
height: 210px; } }
@media screen and (min-width: 500px) {
#player-wrapper #player {
width: 480px;
height: 300px; } }
@media screen and (min-width: 670px) {
#player-wrapper #player {
width: 640px;
height: 390px; } }
@media screen and (min-width: 890px) {
#player-wrapper #player {
width: 854px;
height: 510px; } }
@media screen and (min-width: 1320px) {
#player-wrapper #player {
width: 1280px;
height: 750px; } }
.annotation {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
align-items: flex-start; }
.annotation .navigation {
width: 450px;
display: inline-block; }
.annotation .notes {
display: inline-block; }
nav.timecodes {
margin: 0px;
max-width: 450px;
min-height: 700px;
overflow-y: auto;
-webkit-box-flex: 0 0 auto;
-moz-box-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto; }
nav.timecodes a {
color: #ccc; }
nav.timecodes ul[name=markers] {
margin: 0px;
padding: 0px;
list-style-type: none;
font-size: 15px; }
nav.timecodes ul[name=markers] > li {
padding: 4px;
display: block;
border-bottom: 1px solid #333; }
nav.timecodes ul[name=markers] > li:hover {
background-color: rgba(0, 90, 0, 0.3); }
nav.timecodes ul[name=markers] > li a {
display: block;
text-decoration: none; }
nav.timecodes ul[name=markers] > li a span.timecode {
color: #777777;
float: left;
font-size: 86%;
margin-right: .5em;
text-align: right;
width: 42px; }
#video-notes {
min-height: 700px;
margin-top: 0px; }
#video-notes pre {
margin-top: 1.5em;
margin-left: 10px;
margin-right: 30px;
margin-bottom: 1.5em;
padding: 10px;
overflow: auto; }
#game_icon {
background-position: 0px 0px;
background-repeat: no-repeat;
background-image: url("/images/hero_home_200x114.png");
background-size: cover;
height: 113px;
margin: 0px 0px 4px 0px; }
.sidebar-heading {
margin: 0px 0px 16px;
font-size: 18px;
line-height: 24px;
font-weight: bold;
color: #00547c;
white-space: nowrap;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
text-align: center; }
.queryContainer {
width: 1000px;
margin: 15px auto;
display: flex;
flex-direction: horizontal; }
.queryContainer label {
flex-grow: 0;
flex-shrink: 0;
padding-right: 15px; }
#query {
flex-grow: 1; }
#results {
width: 800px;
margin: 0 auto; }
.dayContainer:nth-child(2n) {
background-color: rgba(0, 0, 0, 0.05); }
.dayName {
width: 200px;
display: inline-block;
vertical-align: top;
line-height: 16px;
box-sizing: border-box;
padding: 5px; }
.markerList {
display: inline-block;
width: 600px;
box-sizing: border-box;
vertical-align: top; }
.marker {
cursor: pointer;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: block;
text-decoration: none; }
.marker:first-child {
border: none; }
.marker:hover {
background-color: rgba(0, 0, 0, 0.1); }
.marker b {
color: black;
background-color: #ff9b00; }
#resultsSummary {
text-align: center;
margin: 10px 0; }
.radio, .checkbox {
position: relative;
display: flex;
flex-direction: column;
padding-left: 1.8rem; }
.radio input, .checkbox input {
visibility: hidden;
position: absolute; }
.radio label::before, .checkbox label::before {
color: black;
color: var(--fg-font-color);
background-color: #fafafc;
background-color: var(--form-check-background);
border-color: #999;
border-color: var(--form-check-border-color);
position: absolute;
left: 0;
display: flex;
justify-content: center;
align-items: center;
border-width: 1px;
border-style: solid;
content: "";
width: 1.3rem;
height: 1.3rem;
transition: border-color 0.2s; }
.radio label::before:hover, .checkbox label::before:hover {
border-color: #4c9ed9;
border-color: var(--form-check-border-color-hover); }
.radio input:disabled ~ *, .checkbox input:disabled ~ * {
opacity: 0.5; }
.radio label:before {
border-radius: 50px; }
.radio input:checked + label:before {
content: "\25cf"; }
.checkbox label:before {
border-radius: 0.1cm; }
.checkbox input:checked + label:before {
content: "\2713"; }
input[type=text],
input[type=password],
textarea,
select {
color: black;
color: var(--fg-font-color);
background-color: #fff;
background-color: var(--form-text-background);
border-color: #999;
border-color: var(--form-text-border-color);
border-width: 1px;
border-radius: 2px;
transition: border-color 0.3s, background-color 0.3s;
outline: none; }
input[type=text].lite,
input[type=password].lite,
textarea.lite,
select.lite {
background-color: transparent;
border-radius: 0;
border-width: 2px 0 2px;
border-style: solid;
border-color: transparent;
transition: border-bottom-color 60ms ease-in-out; }
input[type=text].lite:focus, input[type=text].lite:active,
input[type=password].lite:focus,
input[type=password].lite:active,
textarea.lite:focus,
textarea.lite:active,
select.lite:focus,
select.lite:active {
background-color: transparent;
border-top-color: transparent;
border-bottom-color: var(--input-lite-border); }
input[type=text]:active, input[type=text]:focus,
input[type=password]:active,
input[type=password]:focus,
textarea:active,
textarea:focus,
select:active,
select:focus {
background-color: #fafafc;
background-color: var(--form-text-background-active);
border-color: #4c9ed9;
border-color: var(--form-text-border-color-active); }
input[type=text]:not(.lite), input[type=password]:not(.lite) {
padding: 5px; }
form .note {
font-style: italic; }
select {
padding: 5px 10px; }
option[selected] {
font-weight: bold; }
input[disabled], select[disabled], textarea[disabled] {
opacity: 0.5; }
button,
.button,
input[type=button],
input[type=submit] {
color: black;
color: var(--form-button-color);
background-color: #fff;
background-color: var(--form-button-background);
border-color: #ccc;
border-color: var(--form-button-border-color);
border-width: 1px;
border-style: solid;
display: inline-block;
border-radius: 2px;
transition: background-color 0.1s, border-color 0.1s;
cursor: pointer;
font-weight: 600; }
button:hover,
.button:hover,
input[type=button]:hover,
input[type=submit]:hover {
color: #4c9ed9;
color: var(--form-button-color-active);
background-color: #f2f2f2;
background-color: var(--form-button-background-active); }
button.lite,
.button.lite,
input[type=button].lite,
input[type=submit].lite {
border: none;
background: none;
font-weight: normal; }
button.inline-button,
.button.inline-button,
input[type=button].inline-button,
input[type=submit].inline-button {
border-color: #999;
border-color: var(--form-button-inline-border-color);
margin: 5px;
box-shadow: none;
border-width: 1px;
border-style: solid;
padding: 5px 7px; }
.tabbar {
height: 40px;
padding-left: 50px;
margin-bottom: 20px; }
.tabbar .tab {
padding: 10px;
border-bottom: none; }
.tabbar .tab.current {
/* Border color given by theme */
border-bottom: 2px solid transparent; }
.generic-form {
width: 60%;
max-width: 50em;
margin: auto;
margin-top: 50px;
padding: 50px;
border: 1px solid transparent;
border-bottom-width: 0px;
border-top-left-radius: 3px;
border-top-right-radius: 3px; }
.generic-form table {
border-collapse: separate;
border-spacing: 4px; }
.generic-form th {
padding-right: 10px;
text-align: right; }
.generic-form th.error {
color: red;
text-align: center; }
#search_form_input_homepage {
background-color: #f8f8f8;
background-color: var(--landing-search-background); }
#search_form_input_homepage:hover, #search_form_input_homepage:focus {
background-color: #fefeff;
background-color: var(--landing-search-background-hover); }
.display-options {
height: 100%;
padding: 0px 20px 0px 20px; }
.display-options > * {
display: inline-block;
vertical-align: middle; }
.forum h3 {
margin: 0px 80px 0px 20px;
font-weight: bold; }
.forum-narrow .forum-narrow-hide {
display: none; }
.post-bg-alternate:nth-of-type(odd) {
background-color: #f0f0f0;
background-color: var(--forum-even-background); }
.thread-list-item .latestpost {
width: 16.5rem; }
.thread {
color: black;
color: var(--fg-font-color); }
.profile .thread {
padding-left: 15px; }
.thread .title {
font-weight: bold;
transition: border-bottom-color 0.1s;
border-bottom-color: transparent; }
.thread .title:hover {
border-bottom-color: initial; }
.forum .thread .info th {
width: 50px; }
.avatar-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 100%;
overflow: hidden;
background-color: #bbb;
background-color: var(--dimmest-color); }
.read {
color: #555;
color: var(--forum-thread-read-color); }
.read td {
color: #555;
color: var(--forum-thread-read-color); }
.read a {
color: #888;
color: var(--forum-thread-read-link-color); }
.read .title {
font-weight: 500; }
.goto {
font-size: 200%;
width: 30px; }
.goto a {
display: block;
padding: 0px 10px;
box-sizing: border-box;
position: relative;
line-height: 100%;
background-color: transparent; }
.badge {
display: inline-block;
border-radius: 1000em;
padding: 0 0.8em;
font-size: 0.9em;
line-height: 1.8em;
font-weight: bold; }
.badge.staff {
background-color: #17b2c6;
color: white; }
.badge.staff::before {
content: 'Staff'; }
.contents div.code {
max-width: 100%;
max-height: 20em;
max-height: 80vh;
overflow: auto;
-moz-tab-size: 4;
tab-size: 4;
border-width: 1px;
border-style: solid; }
.contents div + br,
.contents blockquote + br,
.contents ul + br,
.contents ol + br {
display: none; }
.codeblocktable {
font-family: "Fira Mono", monospace;
font-size: 14px;
overflow: auto;
line-height: 1.5em; }
.codeblocktable tbody {
width: 100%; }
.codeblocktable .linenos {
color: #777;
color: var(--code-line-number-color);
font-weight: 500;
padding: 5px;
background: rgba(0, 0, 0, 0.15); }
.codeblocktable .code {
/* Background color given by theme */
padding-right: 20px;
padding-left: 10px;
max-width: 80em; }
.wiki .post {
padding: 0;
margin: auto;
max-width: 70em; }
.post .contents h1, .post .contents h2 {
margin: 20px 0px; }
.post .contents h2 {
font-size: 20px; }
.post .contents h5, .post .contents h6 {
margin: 10px 0px; }
.post .contents strong {
font-weight: 500; }
.post .contents blockquote {
display: block;
margin-top: 0;
margin-bottom: 0;
padding: 10px 18px;
padding-top: 0;
padding-bottom: 0;
margin-left: 20px;
margin-right: 20px;
border-left-width: 1px;
border-left-style: solid; }
.post .contents blockquote .quotewho {
line-height: 2em; }
.post .contents blockquote .quotewho::after {
content: " said:"; }
.post .contents img {
max-width: 100%; }
.post.bbcode .contents h1, .post.bbcode .contents h2, .post.bbcode .contents h3 {
display: inline; }
.project .post .contents h3,
.post .contents h4 {
display: block;
font-size: 18px;
margin: 10px 0px; }
.post .action.button {
padding: 0px 10px;
margin-top: 0px;
margin-right: 4px;
background-color: transparent;
font-size: 130%;
border-radius: 0px;
border-width: 0px;
border-bottom-width: 2px;
transition: border-bottom-width 0.1s; }
.post .action.button:hover {
border-bottom-width: 4px; }
.post hr {
max-width: 90%; }
.post .signature hr {
width: 80%; }
.post .body .size1, .post-preview .size1 {
font-size: 12px; }
.post .body .size2, .post-preview .size2 {
font-size: 13px; }
.post .body .size3, .post-preview .size3 {
font-size: 14px; }
.post .body .size4, .post-preview .size4 {
font-size: 15px; }
.post .body .size5, .post-preview .size5 {
font-size: 16px; }
.blog .post .meta {
position: relative; }
.blog .post.op .meta {
margin-bottom: 10px; }
.blog .post .badges {
width: 40px;
font-size: 0.7em;
text-align: center; }
.blog .post.op .body {
padding-top: 6px; }
.blog .post.op .body .contents {
text-align: left; }
.blog .post.op .body p {
margin-top: 8px;
margin-bottom: 8px;
text-align: left; }
.blog .sidebar .post > .author {
padding: 15px;
text-align: center; }
.blog .sidebar .recent-posts {
text-align: center;
padding: 15px; }
.blog .sidebar .recent-posts h2 {
display: inline; }
.blog .sidebar .archive ul {
list-style-type: none;
text-align: left; }
.blog .post-list .post:nth-child(even) {
background-color: transparent; }
.wiki .post p {
margin: 10px 0px; }
.wiki .toc {
border-color: #aaa;
border-color: var(--wiki-border-color);
border-left-width: 1px; }
.wiki .toc .toc-number {
color: #333;
color: var(--wiki-toc-number-color); }
.wiki .toc ul {
list-style-type: none;
margin-left: 10px;
margin-bottom: 5px; }
.wiki .toc li {
margin-left: 0px; }
.wiki .aside {
border-color: #aaa;
border-color: var(--wiki-border-color);
border-left-width: 1px;
margin-left: 20px; }
.wiki .aside::before {
margin-left: -20px;
margin-right: 15px;
display: inline-block;
width: 10px;
content: "\21b4 "; }
.wiki .aside .aside-heading {
padding: 2px;
margin: 1px;
border-radius: 3px;
border-width: 0px;
cursor: pointer;
display: inline;
background-color: transparent; }
.wiki .aside > .aside-body {
overflow: hidden;
padding-left: 10px; }
.wiki .aside.folded::before {
content: "\2192 "; }
.wiki .aside.folded > .aside-body {
max-height: 0px; }
.featured-post .meta .avatar-icon {
left: -60px;
bottom: -5px; }
.blog .body blockquote,
.wiki .body blockquote {
padding-top: 1px;
padding-bottom: 1px; }
.content-block.blog p.title {
font-weight: bold; }
.content-block.blog p.title a {
border-bottom-width: 0px; }
.content-block.blog p.title a:hover {
border-bottom-width: 1px; }
a.mark_as_read {
float: right; }
.mark_as_read_toplevel_forum {
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center; }
.mark_as_read_toplevel_forum a {
text-decoration: underline; }
div.mark_as_read_toplevel_blog {
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center; }
div.mark_as_read_toplevel_blog a {
text-decoration: none; }
.mark_as_read_toplevel_blog div.mark_as_read_site {
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center; }
.mark_as_read_toplevel_blog div.mark_as_read_site a {
text-decoration: none; }
.mark_as_read_site li.post-entry {
margin-left: 0px;
margin-bottom: 3px; }
.diff {
width: 100%;
max-height: 100vh;
overflow-y: scroll;
margin-top: 20px; }
.diff > .post-source {
color: black;
color: var(--fg-font-color);
background-color: #fff;
background-color: var(--forum-diff-source-background);
border-color: #999;
border-color: var(--forum-diff-source-border-color);
border-width: 1px;
border-radius: 2px;
font-family: "Fira Mono", monospace;
width: 49%;
box-sizing: border-box;
padding: 4px;
display: inline-block;
vertical-align: top; }
.diff .diff-replace,
.diff .diff-delete,
.diff .diff-insert {
border-width: 1px;
border-radius: 2px;
padding: 1px; }
.diff .diff-replace {
background-color: #adcef4;
background-color: var(--forum-diff-replace-background);
border-color: #4787d1;
border-color: var(--forum-diff-replace-border-color); }
.diff .diff-delete {
background-color: #e57979;
background-color: var(--forum-diff-delete-background);
border-color: #c12626;
border-color: var(--forum-diff-delete-border-color); }
.diff .diff-insert {
background-color: #96e579;
background-color: var(--forum-diff-insert-background);
border-color: #5baa3f;
border-color: var(--forum-diff-insert-border-color); }
.index {
list-style-type: none;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
margin-top: 20px; }
.index .index-category {
margin-bottom: 20px;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column; }
.bbtable {
width: 100%;
border: 1px solid; }
.bbtable td, .bbtable th {
border: 1px solid;
padding: 4px; }
.bbtable th {
background: rgba(0, 0, 0, 0.15);
font-weight: bold;
border-bottom-width: 2px; }
.bbtable tbody tr:nth-child(even) {
background: rgba(0, 0, 0, 0.05); }
@font-face {
font-family: icons;
src: url("/static/icon/icons.ttf?v=4"); }
span.icon {
font-family: "icons"; }
span.icon-settings::before {
font-family: "icons";
content: "0"; }
span.icon-link::before {
font-family: "icons";
content: "1"; }
span.icon-logout::before {
font-family: "icons";
content: "2"; }
span.icon-twitter::before {
font-family: "icons";
content: "#"; }
span.icon-twitch::before {
font-family: "icons";
content: "$"; }
span.icon-github::before {
font-family: "icons";
content: "%"; }
span.icon-patreon::before {
font-family: "icons";
content: "&"; }
span.icon-youtube::before {
font-family: "icons";
content: "'"; }
span.icon-soundcloud::before {
font-family: "icons";
content: "*"; }
span.icon-web::before {
font-family: "icons";
content: "3"; }
span.icon-itchio::before {
font-family: "icons";
content: "+"; }
span.icon-hitbox::before {
font-family: "icons";
content: ","; }
span.icon-rss::before {
font-family: "icons";
content: "4"; }
.chat {
border-color: #ddd;
border-color: var(--irc-border-color);
margin: auto;
width: 100%;
border: 1px solid transparent;
position: relative;
overflow: hidden;
padding-right: 8px;
box-sizing: border-box; }
.chat #tabs {
overflow-y: scroll;
box-sizing: border-box; }
.chat #tabs .hidden {
display: none; }
.chat #tabs .current {
box-shadow: 0px 0px 5px #bbb inset;
box-shadow: var(--irc-tab-current-shadow); }
.chat #tabs .button {
padding-left: 10px;
padding-right: 3px;
transition: width 0.2s;
text-transform: none;
vertical-align: top; }
.chat #tabs .button .close-btn {
visibility: hidden;
opacity: 0;
transition: opacity 0.2s;
display: inline-block;
font-size: 9pt;
vertical-align: middle;
height: 13px;
line-height: 11px;
width: 13px;
margin-left: 5px;
padding-left: 2px;
padding-right: 3px;
border-radius: 3px;
border: 1px solid transparent;
/* Not themed */
position: relative;
top: -2px; }
.chat #tabs .button:hover .close-btn {
color: #fff;
color: var(--irc-tab-close-button-color);
background-color: #aaa;
background-color: var(--irc-tab-close-button-background);
visibility: visible;
opacity: 1; }
.chat #tabs .new-tab {
padding: 0px;
padding-left: 10px; }
.chat #history {
width: 100%;
min-height: 300px;
height: 50vh;
overflow-y: auto;
padding-top: 3px;
box-sizing: border-box; }
.chat #history .channel {
width: 100%;
display: none; }
.chat #history .channel.current {
display: table; }
.chat #history .channel.hidden {
display: none; }
.chat #history .entry {
display: table-row;
width: 100%;
font-size: 11pt; }
.chat #history .entry.minor {
color: #777;
font-size: 10pt; }
.chat #history .entry.alert {
color: #dd683b; }
.chat #history .entry.error {
color: #880000;
font-style: italic; }
.chat #history .entry.action {
font-style: italic; }
.chat #history .entry.action .msg .action-name {
font-weight: bold; }
.chat #history .entry .nick, .chat #history .entry .msg {
display: table-cell;
padding: 0px 4px; }
.chat #history .entry .nick {
border-color: #ccc;
border-color: var(--irc-nick-border-color);
font-weight: bold;
text-align: right;
border-right-width: 1px;
border-right-style: solid; }
.chat #history .entry .msg {
width: 100%; }
.chat #history .entry .msg .highlight {
background-color: #dd683b;
color: #fff;
padding: 0px 5px; }
.chat #history .entry .msg .emote {
height: 1.6em;
vertical-align: middle; }
.chat #chatbox {
width: 100%; }
.chat #users {
color: black;
color: var(--irc-users-color);
background-color: #fff;
background-color: var(--irc-users-background);
border-color: #ccc;
border-color: var(--irc-users-border-color);
position: absolute;
border-left-width: 1px;
border-left-style: solid;
padding: 5px;
right: 0px;
top: 0px;
color: #333;
height: 100%;
max-width: 20%;
width: 20%;
transition: right 0.2s;
max-height: 100%;
overflow-y: auto;
box-sizing: border-box; }
.chat #users.collapsed {
right: -20%; }
.chat #users .popout {
background-color: #fff;
background-color: var(--irc-users-popout-background);
border-left-color: #bbb;
border-left-color: var(--irc-users-popout-border-color-left);
border-right-color: #ccc;
border-right-color: var(--irc-users-popout-border-color-right);
width: 8px;
font-size: 7pt;
height: 100%;
border-radius: 2px;
border: 0px solid transparent;
/* Not themed */
border-left-width: 1px;
border-left-style: solid;
border-right-width: 1px;
border-right-style: solid;
position: absolute;
top: 0px;
left: -8px;
box-shadow: 0px 0px 0px transparent;
/* Not themed */
text-align: center;
margin: 0px;
cursor: pointer; }
.chat #users .op {
font-weight: bold; }
.chat #users .user {
cursor: pointer; }
.landing .breadcrumb {
padding: 0px 3px; }
.landing .breadcrumb:first-child {
padding-left: 0px; }
.landing .more {
display: block;
margin-top: 10px; }
.landing .contents {
margin-bottom: 20px; }
.landing .showcase .arrow-container {
width: 60px;
position: absolute;
top: 0;
bottom: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; }
.landing .showcase .arrow-container.left {
left: 0;
background-image: linear-gradient(to right, #f8f8f8 , rgba(0, 0, 0, 0));
background-image: linear-gradient(to right, var(--content-background) , rgba(0, 0, 0, 0)); }
.landing .showcase .arrow-container.left svg {
transform: translateX(-0.05rem); }
.landing .showcase .arrow-container.right {
right: 0;
background-image: linear-gradient(to left, #f8f8f8 , rgba(0, 0, 0, 0));
background-image: linear-gradient(to left, var(--content-background) , rgba(0, 0, 0, 0)); }
.landing .showcase .arrow-container.right svg {
transform: translateX(0.05rem); }
.landing .showcase .arrow-container.hide {
opacity: 0;
pointer-events: none; }
.landing .showcase .arrow-container .arrow {
background-color: #f8f8f8;
background-color: var(--content-background);
border-radius: 100%;
width: 2.4rem;
height: 2.4rem;
font-size: 1rem;
transition: opacity 40ms ease-in-out;
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center; }
.landing #showcase-items {
transition: transform 200ms ease-in-out; }
.landing .showcase-item {
width: 7rem;
height: 7rem; }
@media screen and (min-width: 30em) {
.landing .showcase-item {
width: 10rem;
height: 10rem; } }
.landing .excerpt-fade {
background-image: linear-gradient(to top, var(--content-background), rgba(0, 0, 0, 0));
pointer-events: none; }
.star-btn {
border-bottom-width: 2px;
background-color: #fff;
background-color: var(--library-star-btn-background);
border-color: #999;
border-color: var(--library-star-btn-border-color); }
.star-btn a {
border-color: #aaa;
border-color: var(--library-star-btn-a-border-color); }
.star-btn a:hover {
background-color: #fafafa;
background-color: var(--library-star-btn-a-hover-background); }
.library-dropcap {
width: 1em;
height: 1.1em;
padding-top: 0.19em;
text-align: center;
font-size: 2rem; }
.profile .content .description {
margin: 0px auto;
max-width: 40em; }
.profile .content h2 {
margin-bottom: 10px; }
.profile ul.recent-posts, .profile ul.recent-comments {
list-style-type: none; }
.profile ul .entry {
margin-left: 20px; }
.profile .entry .context {
font-weight: bold;
border-bottom: 0px; }
.profile .content-block.projects {
background-image: none;
overflow-y: visible; }
.profile .content-block.avatar,
.project .content-block.logo {
background-color: transparent;
background-image: none;
box-shadow: none;
min-height: 200px; }
.project .content-block.screenshots,
.profile .content-block.projects {
padding: 0px;
min-height: 0em; }
.project .notice {
color: #fff;
color: var(--project-notice-text-color); }
.project .notice a {
color: #fff;
color: var(--project-notice-text-color);
border-bottom-color: #fff;
border-bottom-color: var(--project-notice-text-color); }
.project .pair {
display: flex;
align-items: flex-start; }
.project .pair .key {
font-weight: bold;
flex-shrink: 0; }
.project .pair .value {
text-align: right;
flex-grow: 1; }
.project .settings-icon {
z-index: 10;
position: absolute;
width: 25px;
height: 25px;
right: 5px;
top: 5px;
margin: 0px;
text-align: center;
padding: 3px;
border-radius: 5px;
line-height: 100%;
box-sizing: border-box; }
.project .screenshots .slideshow {
background-color: black; }
.project .tags {
text-align: center; }
.project .tags h2 {
margin-bottom: 5px; }
.project .tags li {
display: inline-block; }
.project .button-bar {
border: none; }
.project .forum h3 {
margin: 0; }
.project .forum .thread-entry-right {
display: none; }
.notice-unapproved {
background-color: #b42222;
background-color: var(--notice-unapproved-color); }
.notice-hidden {
background-color: #b6b6b6;
background-color: var(--notice-hidden-color); }
.notice-hiatus {
background-color: #aa7d30;
background-color: var(--notice-hiatus-color); }
.notice-dead {
background-color: #b42222;
background-color: var(--notice-dead-color); }
.notice-lts {
background-color: #43a52f;
background-color: var(--notice-lts-color); }
.notice-lts-reqd {
background-color: #aa7d30;
background-color: var(--notice-lts-reqd-color); }
.project-carousel-container {
width: 50rem; }
.project-carousel-container .project-carousel {
box-sizing: content-box;
position: relative;
height: 12rem; }
@media screen and (min-width: 60em) {
.project-carousel-container .project-carousel {
height: 16rem; } }
.project-carousel-container .project-carousel-item {
position: absolute;
top: 0;
left: 0; }
.project-carousel-container .project-carousel-item:not(.active) {
display: none; }
.project-carousel-container .project-carousel-item br {
line-height: 0.6em; }
.project-carousel-container .project-carousel-description {
max-height: 14rem;
overflow: hidden; }
.project-carousel-container .project-carousel-fade {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 30px;
background: linear-gradient( rgba(240, 240, 240, 0) , #f0f0f0 );
background: linear-gradient( var(--dim-background-transparent) , var(--dim-background) ); }
.project-carousel-container .project-carousel-item-small:not(.active) {
display: none; }
.project-carousel-container .project-carousel-button {
border: 1px solid;
border-color: #999;
border-color: var(--dimmer-color);
cursor: pointer;
transition: all 100ms ease-in-out; }
.project-carousel-container .project-carousel-button:hover {
background-color: #bbb;
background-color: var(--dimmest-color); }
.project-carousel-container .project-carousel-button.active {
border-color: #666;
border-color: var(--theme-color); }
.project-carousel-container .project-carousel-button.active:hover {
background-color: #ccc;
background-color: var(--theme-color-dimmest); }
.project-card {
color: black;
color: var(--fg-font-color);
background-color: #e8e8e8;
background-color: var(--card-background);
border-color: #aaa;
border-color: var(--project-card-border-color);
transition: box-shadow 0.2s, background-color 0.2s; }
.slideshow .project-card {
margin-top: 8px; }
.project-card:hover {
background-color: #f0f0f0;
background-color: var(--card-background-hover); }
.project-card:hover > .title {
text-decoration: underline; }
.project-card .image-container {
width: 8rem;
min-height: 8rem; }
.project-card .image-container .image {
position: absolute;
width: 8rem;
top: 0;
bottom: 0; }
.project-card .details {
/* Background color given by theme */
transition: background-color 0.2s; }
.project-card .badges:empty {
display: none; }
.project-card .badge {
color: white;
border-radius: 5px; }
.sidebar .projectlist {
padding: 0px;
width: 340px; }
.sidebar .projectlist .project-card.more {
height: 40px;
width: 326px;
padding-top: 5px; }
.screenshots .slide {
max-width: 100%; }
.slideshow {
/* Background color and color given by theme */
position: relative;
background-image: none;
overflow: hidden; }
.slideshow .optionbar {
height: 30px;
text-align: center; }
.slideshow .buttons {
display: inline-block;
height: 100%; }
.slideshow .button {
line-height: 100%;
padding: 5px 8px;
font-weight: 400; }
.slideshow .button.current {
font-weight: 600; }
.slideshow #slide-deck {
width: 100%;
position: relative;
transition: left 0.3s;
left: 0px;
text-align: center;
display: flex;
flex-direction: horizontal;
justify-content: space-around;
align-items: center; }
.slideshow .slide {
flex: 1 1 100%;
position: relative; }
.slideshow .slide img {
margin: auto;
max-height: 60vh;
max-width: 100%; }
.slideshow.cards #slide-deck {
justify-content: flex-start; }
.slideshow.cards .slide {
flex: 0 1 auto; }
#project_owner_suggestions {
max-height: 300px;
overflow: auto;
position: absolute;
border: 1px solid transparent; }
#project_owner_suggestions #user_template {
display: none; }
.user_suggestions {
background-color: #fff;
background-color: var(--project-user-suggestions-background);
padding-top: 5px;
padding-bottom: 5px; }
.user_suggestions#project_owner_suggestions .user {
border-color: #ddd;
border-color: var(--project-user-suggestions-border-color);
border-bottom-width: 1px;
width: 200px;
box-sizing: border-box;
cursor: pointer; }
.user_suggestions .user {
position: relative;
margin-left: 50px;
display: inline-block;
margin-right: 10px; }
.user_suggestions .user .avatar-icon {
left: -50px;
bottom: 0px;
border-radius: 50%;
border: 2px solid transparent; }
#project_owners {
min-width: 50%; }
.showcase-item .gradient {
width: 100%;
height: 114px;
background-image: linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0)); }
.streams-container #empty-message {
display: none; }
.streams-container .streams:empty {
display: none; }
.streams-container .streams:empty + #empty-message {
display: block; }
.streams-container .stream .live {
position: absolute;
left: 0.5rem;
top: 0.5rem;
color: white;
background-color: #e91916;
font-weight: bold; }
.streams-container .stream .viewers {
position: absolute;
left: 0.5rem;
bottom: 0.5rem;
color: white;
background-color: rgba(0, 0, 0, 0.7); }
.streams-container .stream .avatar {
padding: 1.5rem; }
.streams-container .twitch-embed-container {
padding-bottom: 0%;
transition: padding-bottom 400ms ease-in-out; }
.streams-container .twitch-embed-container.open {
padding-bottom: 150%; }
@media screen and (min-width: 713px) {
.streams-container .twitch-embed-container.open {
padding-bottom: 40.6%; } }
.timeline.no-forums .forums {
display: none; }
.timeline.no-blogs .blogs {
display: none; }
.timeline.no-wiki .wiki {
display: none; }
.timeline.no-library .library {
display: none; }
.timeline.no-snippets .snippets {
display: none; }
.timeline .timeline-item {
background-color: #e8e8e8;
background-color: var(--card-background);
color: black;
color: var(--main-color); }
.timeline-item {
/*
&:hover {
@include usevar(background-color, card-background-hover);
}
*/ }
.timeline-item .avatar-icon {
border: 2px solid;
border-color: #666;
border-color: var(--theme-color); }
.timeline-item .avatar-icon.big {
width: 62px;
height: 62px; }
.timeline-item .timeline-content-box > * {
display: block;
max-width: 100%;
max-height: 80vh; }
.timeline-item .timeline-content-box.youtube {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; }
.timeline-item .timeline-content-box.youtube > iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.timeline-modal .container {
max-height: 100vh; }
@media screen and (min-width: 30em) {
.timeline-modal .container {
width: auto;
max-height: calc(100vh - 2rem); } }