1509 lines
25 KiB
CSS
1509 lines
25 KiB
CSS
/******************************************************************************
|
|
*
|
|
* RESET
|
|
*
|
|
* Following rules are intended to fix layout quirks in different browsers.
|
|
*
|
|
******************************************************************************/
|
|
|
|
*,
|
|
*:after,
|
|
*:before {
|
|
/* Set universal box sizing with inheritance. [3] */
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
/* Prevent animations and transitions for users that want that. [4] */
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
|
|
html {
|
|
/* Fix the line height in all browsers. [1] */
|
|
line-height: 1.15;
|
|
/* Set universal box sizing with inheritance. [3] */
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
body {
|
|
/* Smoothly scroll between anchors. [4] */
|
|
scroll-behavior: smooth;
|
|
/* Prevent adjustments of font size after orientation changes in iOS. [1] */
|
|
-webkit-text-size-adjust: 100%;
|
|
/* optimizeLegibility may cause some performance issues in some browsers
|
|
(https://marco.org/2012/11/15/text-rendering-optimize-legibility) -- not sure if
|
|
this is still current. Probably safe to assume that an appropriately legible
|
|
font will be used anyway. [4] */
|
|
text-rendering: optimizeSpeed;
|
|
}
|
|
|
|
|
|
body,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
p,
|
|
ul[class],
|
|
ol[class],
|
|
dl,
|
|
li,
|
|
blockquote,
|
|
figure,
|
|
figcaption,
|
|
button,
|
|
input,
|
|
optgroup,
|
|
select,
|
|
textarea {
|
|
/* Remove the default margin for these elements in all browsers. [1],[4] */
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
main,
|
|
details {
|
|
/* Render <main> consistently in IE and add the correct display for <details>
|
|
in Edge, IE 10+, and Firefox. [1] */
|
|
display: block;
|
|
}
|
|
|
|
|
|
summary {
|
|
/* Add the correct display in all browsers. [1] */
|
|
display: list-item;
|
|
}
|
|
|
|
|
|
template {
|
|
/* Add the correct display in IE 10+. [1] */
|
|
display: none;
|
|
}
|
|
|
|
|
|
hr {
|
|
/* Add the correct box sizing in Firefox. [1] */
|
|
box-sizing: content-box;
|
|
height: 0;
|
|
/* Show the overflow in Edge and IE. [1] */
|
|
overflow: visible;
|
|
}
|
|
|
|
|
|
pre,
|
|
code,
|
|
kbd,
|
|
samp {
|
|
/* Fix the inheritance and scaling of font size in all browsers. [1] */
|
|
font-family: monospace, monospace;
|
|
/* Fix the odd 'em' font sizing in all browsers. [1] */
|
|
font-size: 1em;
|
|
/* Ensure that these are block-level elements by default. */
|
|
display: block;
|
|
/* Ensure that these elements don't soft-wrap by default. [2] */
|
|
white-space: pre;
|
|
/* Since white-space is set to "pre", ensure that the element has
|
|
scrollbars as necessary. */
|
|
overflow: auto;
|
|
}
|
|
|
|
|
|
p > pre,
|
|
p > code,
|
|
p > kbd,
|
|
p > samp {
|
|
/* Render code blocks contained by <p> blocks as inline. */
|
|
display: inline;
|
|
}
|
|
|
|
|
|
ul[class],
|
|
ol[class],
|
|
dl[class] {
|
|
/* Remove default padding from list elements that have a class attribute. [4] */
|
|
padding: 0;
|
|
/* Reset list style for lists with class attributes. [4] */
|
|
list-style: none;
|
|
}
|
|
|
|
|
|
a {
|
|
/* Remove the gray background on active links in IE 10. [1] */
|
|
background-color: transparent;
|
|
}
|
|
|
|
|
|
a:not([class]) {
|
|
/* Makes links a bit more readable while avoiding conflicts. [4] */
|
|
text-decoration-skip-ink: auto;
|
|
}
|
|
|
|
|
|
abbr[title] {
|
|
/* Remove the bottom border in Chrome 57-. [1] */
|
|
border-bottom: none;
|
|
/* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. [1] */
|
|
text-decoration: underline;
|
|
text-decoration: underline dotted;
|
|
}
|
|
|
|
|
|
b,
|
|
strong {
|
|
/* Add the correct font weight in Chrome, Edge, and Safari. [1] */
|
|
/* This has been changed from [1] because the 'bolder' value is not well
|
|
enough supported in common fonts: https://css-tricks.com/almanac/properties/f/font-weight/ */
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
small {
|
|
/* Enforce the correct font size in all browsers. [1] */
|
|
font-size: 80%;
|
|
}
|
|
|
|
|
|
sub,
|
|
sup {
|
|
/* Prevent 'sub' and 'sup' elements from affecting the line height
|
|
in all browsers. [1] */
|
|
font-size: 75%;
|
|
line-height: 0;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
|
|
sub {
|
|
/* Enforce 'sub' positioning in all browsers. [1] */
|
|
bottom: -0.25em;
|
|
}
|
|
|
|
|
|
sup {
|
|
/* Enforce 'sup' positioning in all browsers. [1] */
|
|
top: -0.5em;
|
|
}
|
|
|
|
|
|
body img {
|
|
/* Remove the border on images inside links in IE 10. [1] */
|
|
border-style: none;
|
|
/* Go ahead and make these block-level elements. I'm not sure about this. [4] */
|
|
display: block;
|
|
/* [2] */
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
|
|
td:not([align]),
|
|
th:not([align]) {
|
|
/* Borrow a rule from [5], modifying a rule from [2] to give table cells
|
|
a default left alignment unless alignment is specified in the element. */
|
|
text-align: left;
|
|
}
|
|
|
|
|
|
button,
|
|
input,
|
|
optgroup,
|
|
select,
|
|
textarea {
|
|
/* Set the font styles to match the rest of the document in
|
|
all browsers. [1],[4] */
|
|
font: inherit;
|
|
line-height: 1.15;
|
|
/* Remove the margin in Firefox and Safari. [1] */
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
button,
|
|
input {
|
|
/* Show the overflow in Edge. [1] */
|
|
overflow: visible;
|
|
}
|
|
|
|
|
|
button,
|
|
select {
|
|
/* Remove the inheritance of text transform in Edge, Firefox, and IE. [1] */
|
|
text-transform: none;
|
|
}
|
|
|
|
|
|
.button,
|
|
button,
|
|
[type="button"],
|
|
[type="reset"],
|
|
[type="submit"] {
|
|
/* Fix the inability to style clickable types in iOS and Safari. [1] */
|
|
-webkit-appearance: button;
|
|
/* Set the correct cursor for these elements. [2] */
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
.button[disabled],
|
|
button[disabled],
|
|
[type="button"][disabled],
|
|
[type="reset"][disabled],
|
|
[type="submit"][disabled] {
|
|
/* Reset the cursor for disabled button elements. [2] */
|
|
cursor: default;
|
|
}
|
|
|
|
|
|
button::-moz-focus-inner,
|
|
[type="button"]::-moz-focus-inner,
|
|
[type="reset"]::-moz-focus-inner,
|
|
[type="submit"]::-moz-focus-inner {
|
|
/* Remove the inner border and padding in Firefox. [1] */
|
|
border-style: none;
|
|
padding: 0;
|
|
}
|
|
button:-moz-focusring,
|
|
[type="button"]:-moz-focusring,
|
|
[type="reset"]:-moz-focusring,
|
|
[type="submit"]:-moz-focusring {
|
|
/* Restore the focus styles unset by the previous rule. [1] */
|
|
outline: 1px dotted ButtonText;
|
|
}
|
|
|
|
|
|
fieldset {
|
|
/* Fix 'fieldset' padding in Firefox. [1] */
|
|
padding: 0.35em 0.75em 0.625em;
|
|
}
|
|
|
|
|
|
legend {
|
|
/* Fix text wrapping in Edge and IE. [1] */
|
|
box-sizing: border-box;
|
|
display: table;
|
|
max-width: 100%;
|
|
white-space: normal;
|
|
/* Fix color inheritance from 'fieldset' elements in IE. [1] */
|
|
color: inherit;
|
|
/* Remove padding so developer are not surprised when they zero out
|
|
'fieldset' elements in all browsers. [1] */
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
textarea {
|
|
/* Remove the default vertical scrollbar in IE 10+. [1] */
|
|
overflow: auto;
|
|
}
|
|
|
|
|
|
[type="checkbox"],
|
|
[type="radio"] {
|
|
/* Add the correct box sizing in IE 10. [1] */
|
|
box-sizing: border-box;
|
|
/* Remove the padding present in IE 10. [1] */
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
[type="number"]::-webkit-inner-spin-button,
|
|
[type="number"]::-webkit-outer-spin-button {
|
|
/* Fix the cursor style of increment and decrement buttons in Chrome. [1] */
|
|
height: auto;
|
|
}
|
|
|
|
|
|
[type="search"] {
|
|
/* Fix appearance in Chrome and Safari. [1] */
|
|
-webkit-appearance: textfield;
|
|
/* Fix the outline style in Safari. [1] */
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
|
|
[type="search"]::-webkit-search-decoration {
|
|
/* Remove the inner padding in Chrome and Safari on MacOS. [1] */
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
|
|
::-webkit-file-upload-button {
|
|
/* Fix the inability to sytle clickable types in iOS and Safari. [1] */
|
|
-webkit-appearance: button;
|
|
/* Fix the font properties in Safari. [1] */
|
|
font: inherit;
|
|
}
|
|
|
|
|
|
progress {
|
|
/* Add the correct vertical alignment in Chrome, Firefox, and Opera. [1] */
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
|
|
[hidden] {
|
|
/* Add the correct display in IE 10. [1] */
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
/******************************************************************************
|
|
*
|
|
* LAYOUT SCALING
|
|
*
|
|
* All rem rules are based on a 10px font size at desktop resolutions in a
|
|
* 1920 x 1080 window. This base font size is scaled down for smaller
|
|
* resolutions and up for higher resolutions.
|
|
*
|
|
******************************************************************************/
|
|
|
|
html {
|
|
/* Font size is set to 62.5% by default so that all future rem sizes are
|
|
based on a 10px font. [6] */
|
|
font-size: 62.5%;
|
|
}
|
|
|
|
|
|
/* For lower-resolution displays, the base font size is scaled from 6px up to
|
|
8px at 1280 x 1024 and larger. */
|
|
@media
|
|
only screen and (max-resolution: 90dpi),
|
|
only screen and (-webkit-max-device-pixel-ratio: 0.9) {
|
|
html {
|
|
font-size: 37.5%;
|
|
}
|
|
}
|
|
|
|
|
|
@media
|
|
only screen and (max-resolution: 90dpi) and (min-width: 500px),
|
|
only screen and (-webkit-max-device-pixel-ratio: 0.9) and (min-width: 500px) {
|
|
html {
|
|
font-size: 43.75%;
|
|
}
|
|
}
|
|
|
|
|
|
@media
|
|
only screen and (max-resolution: 90dpi) and (min-width: 750px),
|
|
only screen and (-webkit-max-device-pixel-ratio: 0.9) and (min-width: 750px) {
|
|
html {
|
|
font-size: 50%;
|
|
}
|
|
}
|
|
|
|
|
|
/* For medium-resolution displays, the base font size is scaled from 10px up to
|
|
12px at 2560 x 1600 and larger. */
|
|
@media
|
|
only screen and (min-resolution: 91dpi) and (max-resolution: 119dpi),
|
|
only screen (-webkit-min-device-pixel-ratio: 0.91) and (-webkit-max-device-pixel-ratio: 1) {
|
|
html {
|
|
font-size: 62.5%;
|
|
}
|
|
}
|
|
|
|
|
|
@media
|
|
only screen and (min-resolution: 91dpi) and (max-resolution: 119dpi) and (min-width: 1500px),
|
|
only screen (-webkit-min-device-pixel-ratio: 0.91) and (-webkit-max-device-pixel-ratio: 1) and (min-width: 1500px) {
|
|
html {
|
|
font-size: 68.75%;
|
|
}
|
|
}
|
|
|
|
|
|
@media
|
|
only screen and (min-resolution: 91dpi) and (max-resolution: 119dpi) and (min-width: 2500px),
|
|
only screen (-webkit-min-device-pixel-ratio: 0.91) and (-webkit-max-device-pixel-ratio: 1) and (min-width: 2500px) {
|
|
html {
|
|
font-size: 75%;
|
|
}
|
|
}
|
|
|
|
|
|
/* For higher-resolution non-mobile displays, the base font size starts at 13px
|
|
and goes up from there. */
|
|
@media
|
|
only screen and (min-resolution: 120dpi) and (min-width: 1500px),
|
|
only screen and (-webkit-min-device-pixel-ratio: 1.1) and (min-width: 1500px) {
|
|
html {
|
|
font-size: 81.25%;
|
|
}
|
|
}
|
|
|
|
|
|
@media
|
|
only screen and (min-resolution: 120dpi) and (min-width: 2000px),
|
|
only screen and (-webkit-min-device-pixel-ratio: 1.1) and (min-width: 2000px) {
|
|
html {
|
|
font-size: 87.5%;
|
|
}
|
|
}
|
|
|
|
|
|
@media
|
|
only screen and (min-resolution: 120dpi) and (min-width: 2750px),
|
|
only screen and (-webkit-min-device-pixel-ratio: 1.1) and (min-width: 2750px) {
|
|
html {
|
|
font-size: calc(87.5% + ((100vw - 500px) / 1000));
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/******************************************************************************
|
|
*
|
|
* FLEXBOX-BASED COLUMNS
|
|
*
|
|
* These classes provide the flexbox-based row-and-column layout from
|
|
* milligram.css [2].
|
|
*
|
|
* NOT SUPPORTED: Safari 8 (MacOS X 10.10)
|
|
*
|
|
******************************************************************************/
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.row.row-no-padding {
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
.row.row-no-padding > .column {
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
.row.row-wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
|
|
.row.row-top {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
|
|
.row.row-bottom {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
|
|
.row.row-center {
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
.row.row-stretch {
|
|
align-items: stretch;
|
|
}
|
|
|
|
|
|
.row.row-baseline {
|
|
align-items: baseline;
|
|
}
|
|
|
|
|
|
.row .column {
|
|
display: block;
|
|
flex: 1 1 auto;
|
|
margin-left: 0;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.row .column.column-offset-10 {
|
|
margin-left: 10%;
|
|
}
|
|
|
|
|
|
.row .column.column-offset-20 {
|
|
margin-left: 20%;
|
|
}
|
|
|
|
|
|
.row .column.column-offset-25 {
|
|
margin-left: 25%;
|
|
}
|
|
|
|
|
|
.row .column.column-offset-33,
|
|
.row .column.column-offset-34 {
|
|
margin-left: 33.3333%;
|
|
}
|
|
|
|
|
|
.row .column.column-offset-50 {
|
|
margin-left: 50%;
|
|
}
|
|
|
|
|
|
.row .column.column-offset-66,
|
|
.row .column.column-offset-67 {
|
|
margin-left: 66.6666%;
|
|
}
|
|
|
|
|
|
.row .column.column-offset-75 {
|
|
margin-left: 75%;
|
|
}
|
|
|
|
|
|
.row .column.column-offset-80 {
|
|
margin-left: 80%;
|
|
}
|
|
|
|
|
|
.row .column.column-offset-90 {
|
|
margin-left: 90%;
|
|
}
|
|
|
|
|
|
.row .column.column-10 {
|
|
flex: 0 0 10%;
|
|
max-width: 10%;
|
|
}
|
|
|
|
|
|
.row .column.column-20 {
|
|
flex: 0 0 20%;
|
|
max-width: 20%;
|
|
}
|
|
|
|
|
|
.row .column.column-25 {
|
|
flex: 0 0 25%;
|
|
max-width: 25%;
|
|
}
|
|
|
|
|
|
.row .column.column-33,
|
|
.row .column.column-34 {
|
|
flex: 0 0 33.3333%;
|
|
max-width: 33.3333%;
|
|
}
|
|
|
|
|
|
.row .column.column-40 {
|
|
flex: 0 0 40%;
|
|
max-width: 40%;
|
|
}
|
|
|
|
|
|
.row .column.column-50 {
|
|
flex: 0 0 50%;
|
|
max-width: 50%;
|
|
}
|
|
|
|
|
|
.row .column.column-60 {
|
|
flex: 0 0 60%;
|
|
max-width: 60%;
|
|
}
|
|
|
|
|
|
.row .column.column-66,
|
|
.row .column.column-67 {
|
|
flex: 0 0 66.6666%;
|
|
max-width: 66.6666%;
|
|
}
|
|
|
|
|
|
.row .column.column-70 {
|
|
flex: 0 0 70%;
|
|
max-width: 70%;
|
|
}
|
|
|
|
|
|
.row .column.column-75 {
|
|
flex: 0 0 75%;
|
|
max-width: 75%;
|
|
}
|
|
|
|
|
|
.row .column.column-80 {
|
|
flex: 0 0 80%;
|
|
max-width: 80%;
|
|
}
|
|
|
|
|
|
.row .column.column-90 {
|
|
flex: 0 0 90%;
|
|
max-width: 90%;
|
|
}
|
|
|
|
|
|
.row .column .column-top {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
|
|
.row .column .column-bottom {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
|
|
.row .column .column-center {
|
|
-ms-grid-row-align: center;
|
|
align-self: center;
|
|
}
|
|
|
|
|
|
@media (min-width: 40rem) {
|
|
.row {
|
|
flex-direction: row;
|
|
}
|
|
.row .column {
|
|
margin-bottom: inherit;
|
|
padding: 0 1.0rem;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/******************************************************************************
|
|
*
|
|
* 12 COLUMN GRID
|
|
*
|
|
* These classes provide the 12-column grid from skeleton.css [6]. skeleton.css
|
|
* set these columns to only work on displays wider than 550px, so for
|
|
* compatibility, all of these rules are inside a media query. Instead of 550px,
|
|
* the media query starts at the same 40rem as milligram's does.
|
|
*
|
|
* The margin-left values are specific to skeleton.css and conflict with
|
|
* milligram.css's margin-less columns, so that margin is applied only to
|
|
* elements that match skeleton's selector style.
|
|
*
|
|
******************************************************************************/
|
|
|
|
@media (min-width: 40rem) {
|
|
|
|
.one.column,
|
|
.one.columns,
|
|
.two.columns,
|
|
.three.columns,
|
|
.four.columns,
|
|
.five.columns,
|
|
.six.columns,
|
|
.seven.columns,
|
|
.eight.columns,
|
|
.nine.columns,
|
|
.ten.columns,
|
|
.eleven.columns,
|
|
.twelve.columns,
|
|
.one-third.column,
|
|
.two-thirds.column,
|
|
.one-half.column {
|
|
margin-left: 4%;
|
|
padding: 0;
|
|
}
|
|
|
|
.one.column:first-child,
|
|
.one.columns:first-child,
|
|
.two.columns:first-child,
|
|
.three.columns:first-child,
|
|
.four.columns:first-child,
|
|
.five.columns:first-child,
|
|
.six.columns:first-child,
|
|
.seven.columns:first-child,
|
|
.eight.columns:first-child,
|
|
.nine.columns:first-child,
|
|
.ten.columns:first-child,
|
|
.eleven.columns:first-child,
|
|
.twelve.columns:first-child,
|
|
.one-third.column:first-child,
|
|
.two-thirds.column:first-child,
|
|
.one-half.column:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.one.column,
|
|
.one.columns {
|
|
width: 4.66666666667%;
|
|
}
|
|
|
|
.two.columns {
|
|
width: 13.3333333333%;
|
|
}
|
|
|
|
.three.columns {
|
|
width: 22%;
|
|
}
|
|
|
|
.four.columns {
|
|
width: 30.6666666667%;
|
|
}
|
|
|
|
.five.columns {
|
|
width: 39.3333333333%;
|
|
}
|
|
|
|
.six.columns {
|
|
width: 48%;
|
|
}
|
|
|
|
.seven.columns {
|
|
width: 56.6666666667%;
|
|
}
|
|
|
|
.eight.columns {
|
|
width: 65.3333333333%;
|
|
}
|
|
|
|
.nine.columns {
|
|
width: 74.0%;
|
|
}
|
|
|
|
.ten.columns {
|
|
width: 82.6666666667%;
|
|
}
|
|
|
|
.eleven.columns {
|
|
width: 91.3333333333%;
|
|
}
|
|
|
|
.twelve.columns {
|
|
width: 100%;
|
|
}
|
|
|
|
.one-third.column {
|
|
width: 30.6666666667%;
|
|
}
|
|
|
|
.two-thirds.column {
|
|
width: 65.3333333333%;
|
|
}
|
|
|
|
.one-half.column {
|
|
width: 48%;
|
|
}
|
|
|
|
.offset-by-one.column,
|
|
.offset-by-one.columns {
|
|
margin-left: 8.66666666667%;
|
|
}
|
|
|
|
.offset-by-two.column,
|
|
.offset-by-two.columns {
|
|
margin-left: 17.3333333333%;
|
|
}
|
|
|
|
.offset-by-three.column,
|
|
.offset-by-three.columns {
|
|
margin-left: 26%;
|
|
}
|
|
|
|
.offset-by-four.column,
|
|
.offset-by-four.columns {
|
|
margin-left: 34.6666666667%;
|
|
}
|
|
|
|
.offset-by-five.column,
|
|
.offset-by-five.columns {
|
|
margin-left: 43.3333333333%;
|
|
}
|
|
|
|
.offset-by-six.column,
|
|
.offset-by-six.columns {
|
|
margin-left: 52%;
|
|
}
|
|
|
|
.offset-by-seven.column,
|
|
.offset-by-seven.columns {
|
|
margin-left: 60.6666666667%;
|
|
}
|
|
|
|
.offset-by-eight.column,
|
|
.offset-by-eight.columns {
|
|
margin-left: 69.3333333333%;
|
|
}
|
|
|
|
.offset-by-nine.column,
|
|
.offset-by-nine.columns {
|
|
margin-left: 78.0%;
|
|
}
|
|
|
|
.offset-by-ten.column,
|
|
.offset-by-ten.columns {
|
|
margin-left: 86.6666666667%;
|
|
}
|
|
|
|
.offset-by-eleven.column,
|
|
.offset-by-eleven.columns {
|
|
margin-left: 95.3333333333%;
|
|
}
|
|
|
|
.offset-by-one-third.column,
|
|
.offset-by-one-third.columns {
|
|
margin-left: 34.6666666667%;
|
|
}
|
|
|
|
.offset-by-two-thirds.column,
|
|
.offset-by-two-thirds.columns {
|
|
margin-left: 69.3333333333%;
|
|
}
|
|
|
|
.offset-by-one-half.column,
|
|
.offset-by-one-half.columns {
|
|
margin-left: 52%;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/******************************************************************************
|
|
*
|
|
* LAYOUT
|
|
*
|
|
* Rules that impact the positioning of major layout elements.
|
|
*
|
|
******************************************************************************/
|
|
|
|
body {
|
|
/* Ensure that the page body fills the display even if the content does not. [4] */
|
|
min-height: 100vh;
|
|
/* The following two rules allow the header and footer elements to be positioned
|
|
correctly assuming they're all direct descendants of the <body> element. */
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
|
|
header,
|
|
footer {
|
|
/* Prevent these two eleemnts from shrinking when content is added to the <body>
|
|
element. */
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
|
|
main {
|
|
/* Allow the <main> element to grow as necessary. */
|
|
flex-grow: 1;
|
|
}
|
|
|
|
|
|
|
|
/******************************************************************************
|
|
*
|
|
* UTILITY CLASSES
|
|
*
|
|
* Some helpful utility classes.
|
|
*
|
|
******************************************************************************/
|
|
|
|
.table-container {
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
|
|
.clearfix:after {
|
|
clear: both;
|
|
content: ' ';
|
|
display: block;
|
|
}
|
|
|
|
|
|
.float-left {
|
|
float: left;
|
|
}
|
|
|
|
|
|
.float-right {
|
|
float: right;
|
|
}
|
|
|
|
|
|
|
|
/******************************************************************************
|
|
*
|
|
* BASE THEME
|
|
*
|
|
* The rest of these rules set a default look-and-feel based on milligram.css [2].
|
|
* Override these as needed in your own css to set a custom look-and-feel.
|
|
*
|
|
******************************************************************************/
|
|
|
|
/**
|
|
* Typography: font, letter-spacing, line-height, text-*, list-style-type.
|
|
*/
|
|
|
|
body {
|
|
font-family: "Open Sans", Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
|
|
font-size: 1.8em;
|
|
font-weight: 300;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
|
|
code {
|
|
font-size: 86%;
|
|
}
|
|
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: "Montserrat", Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
font-weight: 500;
|
|
}
|
|
|
|
|
|
h1 {
|
|
font-size: 3.9rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
|
|
h2 {
|
|
font-size: 3.4rem;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
|
|
h3 {
|
|
font-size: 2.9rem;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
|
|
h4 {
|
|
font-size: 2.6rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
|
|
h5 {
|
|
font-size: 2.4rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
|
|
h6 {
|
|
font-size: 2.2rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
|
|
dl {
|
|
list-style: none;
|
|
}
|
|
|
|
|
|
ol {
|
|
list-style: decimal inside;
|
|
}
|
|
|
|
|
|
ul {
|
|
list-style: disc inside;
|
|
}
|
|
|
|
|
|
dl dl,
|
|
dl ol,
|
|
dl ul,
|
|
ol dl,
|
|
ol ol,
|
|
ol ul,
|
|
ul dl,
|
|
ul ol,
|
|
ul ul {
|
|
font-size: 90%;
|
|
}
|
|
|
|
|
|
.button,
|
|
button,
|
|
[type="button"],
|
|
[type="reset"],
|
|
[type="submit"] {
|
|
font-family: Verdana;
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1rem;
|
|
line-height: 3.8rem;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
|
|
label,
|
|
legend {
|
|
font-size: 1.6rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
|
|
label.inline,
|
|
legend.inline {
|
|
font-weight: normal;
|
|
}
|
|
|
|
|
|
/**
|
|
* Layout: Display, position, margin, padding, height, and width.
|
|
*/
|
|
|
|
main article,
|
|
main section {
|
|
padding: 7.5rem 1.0rem;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
main section > *,
|
|
main article > * {
|
|
max-width: 80rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
|
|
main section .table-container,
|
|
main article .table-container {
|
|
max-width: 80rem;
|
|
}
|
|
|
|
|
|
main section .table-container table,
|
|
main article .table-container table {
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
blockquote,
|
|
dl,
|
|
figure,
|
|
form,
|
|
ol,
|
|
p,
|
|
pre,
|
|
table,
|
|
ul {
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
|
|
blockquote {
|
|
padding: 1rem 1.5rem;
|
|
}
|
|
|
|
|
|
blockquote *:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
code {
|
|
margin: 0 0.2rem;
|
|
padding: 0.2rem 0.5rem;
|
|
}
|
|
|
|
|
|
pre > code {
|
|
padding: 1rem 1.5rem;
|
|
}
|
|
|
|
|
|
hr {
|
|
margin: 3.0rem 0;
|
|
}
|
|
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-top: 2.0em;
|
|
margin-bottom: 0.75em;
|
|
}
|
|
|
|
|
|
dl,
|
|
ol,
|
|
ul {
|
|
margin-top: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
|
|
dl dl,
|
|
dl ol,
|
|
dl ul,
|
|
ol dl,
|
|
ol ol,
|
|
ol ul,
|
|
ul dl,
|
|
ul ol,
|
|
ul ul {
|
|
margin: 1.5rem 0 1.5rem 3.0rem;
|
|
}
|
|
|
|
|
|
dd,
|
|
dt,
|
|
li {
|
|
margin-bottom: 1.0rem;
|
|
}
|
|
|
|
|
|
table {
|
|
border-spacing: 0;
|
|
}
|
|
|
|
|
|
td,
|
|
th {
|
|
padding: 1.2rem 1.5rem;
|
|
}
|
|
|
|
|
|
td:first-child,
|
|
th:first-child {
|
|
padding-left: 0;
|
|
}
|
|
|
|
|
|
td:last-child,
|
|
th:last-child {
|
|
padding-right: 0;
|
|
}
|
|
|
|
|
|
input,
|
|
select,
|
|
fieldset,
|
|
textarea {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
|
|
textarea {
|
|
min-height: 6.5rem;
|
|
}
|
|
|
|
|
|
.button,
|
|
button,
|
|
[type="button"],
|
|
[type="reset"],
|
|
[type="submit"] {
|
|
display: inline-block;
|
|
height: 3.8rem;
|
|
padding: 0 3.0rem;
|
|
margin-bottom: 1.0rem;
|
|
}
|
|
|
|
|
|
[type='email'],
|
|
[type='number'],
|
|
[type='password'],
|
|
[type='search'],
|
|
[type='tel'],
|
|
[type='text'],
|
|
[type='url'],
|
|
textarea,
|
|
select {
|
|
height: 3.8rem;
|
|
padding: 0.6rem 1.0rem;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
[type='checkbox'],
|
|
[type='radio'] {
|
|
display: inline;
|
|
}
|
|
|
|
|
|
select {
|
|
padding-right: 3.0rem;
|
|
}
|
|
|
|
|
|
label,
|
|
legend {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
|
|
label.inline,
|
|
legend.inline {
|
|
display: inline-block;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
|
|
fieldset {
|
|
border-width: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
/**
|
|
* Colors, borders, outline, box-shadow, appearance, and opacity.
|
|
*/
|
|
|
|
body {
|
|
color: #595959;
|
|
}
|
|
|
|
|
|
a {
|
|
color: #5680cc;
|
|
text-decoration: none;
|
|
}
|
|
|
|
|
|
a:focus,
|
|
a:hover {
|
|
color: #595959;
|
|
}
|
|
|
|
|
|
blockquote {
|
|
border-left: 0.3rem solid #d1d1d1;
|
|
}
|
|
|
|
|
|
pre,
|
|
code {
|
|
background: #f4f5f6;
|
|
}
|
|
|
|
|
|
pre {
|
|
border-left: 0.3rem solid #5680cc;
|
|
}
|
|
|
|
|
|
code {
|
|
border-radius: 0.4rem;
|
|
}
|
|
|
|
|
|
pre > code {
|
|
border-radius: 0;
|
|
}
|
|
|
|
|
|
hr {
|
|
border: 0;
|
|
border-top: 0.1rem solid #f4f5f6;
|
|
}
|
|
|
|
|
|
td,
|
|
th {
|
|
border-bottom: 0.1rem solid #e1e1e1;
|
|
}
|
|
|
|
|
|
/**
|
|
* Button styling. All buttons start with the "outline" style defined in
|
|
* milligram.css [2]. Buttons with a "submit" type or a "default" attribute
|
|
* or class get the default style defined in milligram.
|
|
*/
|
|
|
|
.button,
|
|
button,
|
|
[type="button"],
|
|
[type="reset"],
|
|
[type="submit"] {
|
|
border: 0.1rem solid #5680cc;
|
|
border-radius: .4rem;
|
|
white-space: nowrap;
|
|
background-color: transparent;
|
|
color: #5680cc;
|
|
vertical-align: text-bottom;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
|
|
.button:focus,
|
|
.button:hover,
|
|
button:focus,
|
|
button:hover,
|
|
[type="button"]:focus,
|
|
[type="button"]:hover,
|
|
[type="reset"]:focus,
|
|
[type="reset"]:hover,
|
|
[type="submit"]:focus,
|
|
[type="submit"]:hover {
|
|
outline: 0;
|
|
background-color: transparent;
|
|
border-color: #595959;
|
|
color: #595959;
|
|
}
|
|
|
|
|
|
/**
|
|
* Disabled buttons.
|
|
*/
|
|
|
|
.button[disabled],
|
|
button[disabled],
|
|
[type="button"][disabled],
|
|
[type="reset"][disabled],
|
|
[type="submit"][disabled] {
|
|
opacity: .5;
|
|
}
|
|
|
|
|
|
.button[disabled]:focus,
|
|
.button[disabled]:hover,
|
|
button[disabled]:focus,
|
|
button[disabled]:hover,
|
|
[type="button"][disabled]:focus,
|
|
[type="button"][disabled]:hover,
|
|
[type="reset"][disabled]:focus,
|
|
[type="reset"][disabled]:hover,
|
|
[type="submit"][disabled]:focus,
|
|
[type="submit"][disabled]:hover {
|
|
border-color: inherit;
|
|
color: #5680cc;
|
|
}
|
|
|
|
|
|
/**
|
|
* Submit buttons and buttons with a "default" class or attribute.
|
|
*/
|
|
|
|
.button.default,
|
|
button.default,
|
|
[type="button"][default],
|
|
[type="button"].default,
|
|
[type="reset"].default,
|
|
[type="submit"] {
|
|
background-color: #5680cc;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
.button.default:focus,
|
|
.button.default:hover,
|
|
button.default:focus,
|
|
button.default:hover,
|
|
[type="button"][default]:focus,
|
|
[type="button"][default]:hover,
|
|
[type="button"].default:focus,
|
|
[type="button"].default:hover,
|
|
[type="reset"].default:focus,
|
|
[type="reset"].default:hover,
|
|
[type="submit"]:focus,
|
|
[type="submit"]:hover {
|
|
background-color: #595959;
|
|
border-color: #595959;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
.button.default[disabled]:focus,
|
|
.button.default[disabled]:hover,
|
|
button.default[disabled]:focus,
|
|
button.default[disabled]:hover,
|
|
[type="button"][default][disabled]:focus,
|
|
[type="button"][default][disabled]:hover,
|
|
[type="button"].default[disabled]:focus,
|
|
[type="button"].default[disabled]:hover,
|
|
[type="reset"].default[disabled]:focus,
|
|
[type="reset"].default[disabled]:hover,
|
|
[type="submit"].default[disabled]:focus,
|
|
[type="submit"].default[disabled]:hover {
|
|
background-color: #5680cc;
|
|
border-color: #5680cc;
|
|
}
|
|
|
|
|
|
/**
|
|
* Other form elements.
|
|
*/
|
|
|
|
[type='email'],
|
|
[type='number'],
|
|
[type='password'],
|
|
[type='search'],
|
|
[type='tel'],
|
|
[type='text'],
|
|
[type='url'],
|
|
textarea,
|
|
select {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
background-color: transparent;
|
|
border: 0.1rem solid #d1d1d1;
|
|
border-radius: .4rem;
|
|
box-shadow: none;
|
|
}
|
|
|
|
|
|
[type='email']:focus,
|
|
[type='number']:focus,
|
|
[type='password']:focus,
|
|
[type='search']:focus,
|
|
[type='tel']:focus,
|
|
[type='text']:focus,
|
|
[type='url']:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
border-color: #5680cc;
|
|
outline: 0;
|
|
}
|
|
|
|
|
|
select {
|
|
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDI5IDE0IiB3aWR0aD0iMjkiPjxwYXRoIGZpbGw9IiNkMWQxZDEiIGQ9Ik05LjM3NzI3IDMuNjI1bDUuMDgxNTQgNi45MzUyM0wxOS41NDAzNiAzLjYyNSIvPjwvc3ZnPgo=') center right no-repeat;
|
|
}
|
|
|
|
|
|
select:focus {
|
|
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyOSAxNCIgd2lkdGg9IjI5Ij48cGF0aCBmaWxsPSIjOWI0ZGNhIiBkPSJNOS4zNzcyNyAzLjYyNWw1LjA4MTU0IDYuOTM1MjNMMTkuNTQwMzYgMy42MjUiLz48L3N2Zz4K');
|
|
}
|
|
|
|
|
|
/******************************************************************************
|
|
*
|
|
* CREDITS
|
|
*
|
|
* [1] normalize.css, https://github.com/necolas/normalize.css/
|
|
* [2] milligram.css, https://github.com/milligram/milligram/
|
|
* [3] https://css-tricks.com/box-sizing/
|
|
* [4] https://hankchizljaw.com/wrote/a-modern-css-reset/
|
|
* [5] https://github.com/jgthms/minireset.css/
|
|
* [6] skeleton.css, https://github.com/dhg/Skeleton
|
|
*
|
|
******************************************************************************/
|