/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html {
color: #222;
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* Vendor-prefixed and regular ::selection selectors cannot be combined:
* https://stackoverflow.com/a/16982510/7133471
*
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Site's custom styles
========================================================================== */
* { margin:0; padding:0; min-width:0; outline:0;}
*, *:before, *:after { box-sizing:border-box; }
html, body { height:100%; font:15px/1.6 font-family: 'Nanum Gothic', sans-serif; }
body { margin:0; height:100%; overflow-x:hidden; background:rgb(244, 244, 244) url('/talkinglistentalking/_Assets/img/background.png'); }
main { margin:0 auto; }
/* Default Anchors */
a, a:visited { color:blue; }
a:hover { color:#F63; }
/* Footer */
.Site { display:flex; flex-direction:column; height:100vh; }
.Site-content { flex:1 0 auto; -padding:.5rem 1rem; width:100%; }
.Site-content::after { content:'\00a0'; display:block; height:0px; visibility:hidden; }
footer { min-height:100px; background:#335870; padding:0 1rem; }
/* Modal Window */
.modal-window { position:fixed; top:0; right:0; bottom:0; left:0; z-index:9010; overflow-y:auto; -ms-overflow-y:auto; text-align:center; background:hsla(240, 25%, 76%, 0.48); padding:0 1rem; }
.modal-body { position:relative; background:#fefefe; max-width:100%; margin:0 auto 10px; border:1px solid darkgray; box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); text-align:justify; -webkit-animation-name:animatetop; -webkit-animation-duration:0.4s; animation-name:animatetop; animation-duration:0.4s; }
.modal-header { text-align:left; font:bold 1.45rem/1.6 "Arial Black", Gadget, sans-serif; height:56px ;padding:.75rem 1rem .35rem; background:hsl(0, 0%, 97.5%); border-bottom:1px solid hsl(0, 0%, 92%); }
.modal-content { padding:1rem 1.5rem .5rem; background:white; }
.modal-footer { padding:.5rem; background:hsl(0, 0%, 97.5%); text-align:right; border-top:1px solid hsl(0, 0%, 92%); min-height:40px; }
.modal-close { color:white; position:absolute; top:0; right:0; font-size:33px; height:56px; width:60px; background:gainsboro; line-height:54px; text-align:center; font-weight:bold; font-family: 'Nanum Gothic', sans-serif; }
.modal-close::after { content:'X'; }
.modal-close:hover { cursor:pointer; background:hsl(0, 100%, 61%); }
@-webkit-keyframes animatetop {
from { top:-300px; opacity:0; }
to { top:0; opacity:1; }
}
@keyframes animatetop {
from { top:-300px; opacity:0; }
to { top:0; opacity:1; }
}
/* Lateral Panel */
/* animation direction */
.from-right .ui-lateral-header, .from-left .ui-lateral-header { top:-50px; }
.from-right .ui-lateral-header { right:0; }
.from-left .ui-lateral-header { left:0; }
.is-visible .ui-lateral-header { top:0; transition:top 0.3s 0.3s; }
/* overlay layer */
.ui-lateral { background:hsla(240, 25%, 76%, 0.48); position:fixed; top:0; left:0; height:100%; width:100%; visibility:hidden; transition:visibility 0s 0.6s; z-index:99999; }
.ui-lateral::after { position:absolute; top:0; left:0; width:100%; height:100%; background:transparent; cursor:pointer; transition:background 0.3s 0.3s; }
/* header */
.ui-lateral-header { position:fixed; top:147px; height:50px; background:rgba(255, 255, 255, 0.96); z-index:2; box-shadow:0 1px 1px rgba(0, 0, 0, 0.08); transition:top 0.3s 0s; overflow:hidden; }
.ui-lateral-header h1 { font-size:1.25rem; font-weight:bold; color:#344255; margin:.5rem 0 0 1rem; line-height:1.9; }
/* close button */
.ui-lateral-button { position:absolute; background:aliceblue; top:0; right:50px; height:100%; width:50px; text-align:center; margin-right:.25rem; }
.ui-lateral-button:hover { background:gainsboro; cursor:pointer; }
.ui-lateral-close { background:gainsboro; position:absolute; top:0; right:0; height:100%; width:50px; text-align:center; }
.ui-lateral-close-icon { margin-top:9px; }
.ui-lateral-close:hover { background:hsl(0, 100%, 61%); cursor:pointer; }
.ui-lateral-close-icon.fa.fa-times.fa-2x { color:white; }
/* container */
.ui-lateral.is-visible { visibility:visible; transition:visibility 0s 0s; }
.ui-lateral.is-visible::after { background:rgba(0, 0, 0, 0.6); transition:background 0.3s 0s; }
/* content */
.ui-lateral-container { position:fixed; height:100%; background:hsla(0, 0%, 100%, 0.93); z-index:1; transition-property:transform; transition-duration:0.3s; transition-delay:0.3s; }
.from-right .ui-lateral-container { right:0; transform:translate3d(100%, 0, 0); }
.from-left .ui-lateral-container { left:0; transform:translate3d(-100%, 0, 0); }
.is-visible .ui-lateral-container { transform:translate3d(0, 0, 0); transition-delay:0s; }
.ui-lateral-content { box-shadow:0 90px 4px 2px #B8B8B8; position:absolute; top:3.45rem; left:0; width:100%; overflow:auto; padding:.25rem .45rem; }
.ui-content-block { border:1px solid hsl(0, 0%, 88%); padding:.75rem; margin-bottom:.5rem; background:white; }
.ui-content-block h1 { font-size:1.0rem; margin-top:-.12rem; }
.ui-content-block h2 { font-size:.8rem; margin-top:-.12rem; }
.ui-lateral-content table { font-size:.8rem; }
.ui-lateral-content table th { font-size:.95rem; font-weight:bold; }
.ui-lateral-content table tr td:nth-child(-n+2) { white-space:nowrap; }
/* button container */
.ui-button-container { margin:1rem 0; text-align:center; background:transparent; }
/* Defaults */
hr { display:block; height:1px; border:0; border-top:1px solid hsl(0, 0%, 75%); margin:-1rem 0 1rem; padding:0; }
hr.divider { border: 1px dotted gainsboro; }
textarea { resize:vertical; }
button { margin:0 auto; text-align:center; padding:.5rem 1rem; cursor:pointer; }
p { font:18px/1.6 'Nanum Gothic', sans-serif; text-indent:20px; margin-bottom:1rem; -text-align:left; }
/* Helper Classes */
.no-wrap { white-space:nowrap; }
.hide { display:none; }
.img-responsive { display:block; max-width:100%; height:auto; }
.center { margin:0 auto; }
.right { margin-left:auto; }
.left { margin-right:auto; }
.shadow { box-shadow:2px 1px 5px 1px hsl(0, 0%, 78%); }
.border, .border-drop-shadow { border:1px solid hsl(0, 0%, 88%); padding:.75rem; margin-bottom:.5rem; }
.border-drop-shadow { box-shadow:3px 3px 3px -1px hsl(0, 0%, 72%); box-sizing:border-box; }
.border-topBottom { border-top:1px solid hsl(0, 0%, 75%); border-bottom:1px solid hsl(0, 0%, 75%); margin-bottom:.5rem; padding:.5rem; }
/*** Writing Styles ***/
.note { color:cadetblue; }
.text-left { text-align:left; }
.text-center { text-align:center; }
.text-right { text-align:right; }
.text-justify { text-align:justify; }
p.multiColumn, p.text-multiColumn, ul.list-multiColumn, ol.list-multiColumn { -webkit-columns:5 350px; -moz-columns:5 350px; columns:5 350px; -webkit-column-gap:1.5em; -moz-column-gap:1.5em; column-gap:1.5em; }
/* Headings */
h1 { font-size:2rem; }
h2 { font-size:1.65rem; margin-bottom:1rem; }
h3 { font-size:1.35rem; margin-bottom:1rem; }
h4 { font-size:1.15rem; margin-bottom:1rem; }
h1, h2, h3, h5, h4 { font-family: 'Nanum Gothic', sans-serif;; text-align:left; }
h1 small, h1 .small, h2 small, h2 .small, h3 small, h3 .small { line-height:1; font-weight:600; color:hsl(0, 0%, 45%); font-size:65%; }
h4 small, h4 .small, h5 small, h5 .small, h6 small, h6 .small { line-height:1; font-weight:400; color:hsl(0, 0%, 45%); font-size:75%; }
small, .small { font-size:85%; }
/* Containers */
.flex-cont, .form-panel-cont { display:-webkit-flex; display:-ms-flexbox; display:flex; }
.form-panel-cont { margin-right:-1rem; }
.panels { padding:.75rem 1.5rem 1.5em; box-sizing:border-box; -webkit-align-items:stretch; -ms-align-items:stretch; align-items:stretch; }
.panel-cont { box-shadow:0px 0px 4px 0px #B8B8B8; padding:.75rem; margin-bottom:1rem; background:white; }
/* Alternate Panel Layout */
.alt-panel { margin-bottom:1rem; box-shadow:0px 0px 13px -3px hsl(0, 0%, 80%); border-radius:15px; text-align:left; }
.alt-panel-title { height:40px; border:1px solid; background:#E3ECFF; color:darkslateblue; border-color:#C2CEEC; border-radius:15px 15px 0 0; padding:0 0 0 1.25rem; line-height:2.7; font-size:1.1rem; }
.alt-panel-body { border:1px solid; border-color:transparent #DCDCDC transparent #DCDCDC; padding:.75rem 1rem; background:white; }
.alt-panel-footer { height:35px; background:ghostwhite; border:1px solid; border-color:#EFEFEF #DCDCDC #DCDCDC #DCDCDC; border-radius:0 0 15px 15px; color:gainsboro; line-height:2.1; padding-left:1.25rem; }
.alt-panel-color-red, .alt-panel-color-yellow, .alt-panel-color-green { border-radius:15px 15px 0 0; }
.alt-panel-color-red { background:#FFDBE1; color:orangered; border-color:#FDB6B6; }
.alt-panel-color-yellow { background:cornsilk; color:chocolate; border-color:khaki; }
.alt-panel-color-green { background:#D8FFD4; color:green; border-color:lightgreen; }
/* Flex Row */
.flex-wrap { -webkit-flex-flow:row wrap; -ms-flex-flow:row wrap; flex-flow:row wrap; }
.flex-reverse { -webkit-flex-direction:row-reverse; -ms-flex-direction:row-reverse; flex-direction:row-reverse; }
.flex-wrap-reverse { -webkit-flex-flow:row wrap-reverse; -ms-flex-flow:row wrap-reverse; flex-flow:row wrap-reverse; }
/* Flex Column */
.flex-column { -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; }
.flex-column-reverse { -webkit-flex-direction:column-reverse; -ms-flex-direction:column-reverse; flex-direction:column-reverse; }
/* Grid/Tile Row */
.grid-cont .grid-row, .tile-cont { box-sizing:border-box; display:-ms-flexbox; display:-webkit-box; display:flex; -ms-flex:0 1 auto; -webkit-box-flex:0; flex:0 1 auto; -ms-flex-direction:row; -webkit-box-orient:horizontal; -webkit-box-direction:normal; flex-direction:row; -ms-flex-wrap:wrap; flex-wrap:wrap; margin:0 -.5rem; }
.grid-cont > .grid-row.tile-row > div { padding:0; margin-bottom:.4rem; }
.tile { margin:0 4px 4px 0; padding:1.5rem 1.5em; background:#fff; box-shadow:0px 0px 4px 0px #B8B8B8; box-sizing:border-box; -webkit-align-items:stretch; -ms-align-items:stretch; align-items:stretch; }
.tile-row { margin-left:-.45rem; margin-right:-.45rem; margin-bottom:0; }
.tile-row > [class*='col-']{ padding-left:0; padding-right:0; margin-bottom:8px; }
.tile-row .tile { margin:2px 4px; height:100%; }
.flex-cont > .tile { margin:0 8px 8px 0; }
/* Column Classes */
.grid-cont .grid-row .col-1, .grid-cont .grid-row .col-2, .grid-cont .grid-row .col-3, .grid-cont .grid-row .col-4, .grid-cont .grid-row .col-5, .grid-cont .grid-row .col-6, .grid-cont .grid-row .col-7, .grid-cont .grid-row .col-8, .grid-cont .grid-row .col-9, .grid-cont .grid-row .col-10, .grid-cont .grid-row .col-11, .grid-cont .grid-row .col-12 { box-sizing:border-box; -ms-flex:0 0 auto; -webkit-box-flex:0; flex:0 0 auto; padding-right:.5rem; padding-left:.5rem; }
.grid-cont .grid-row .col-1 { -ms-flex-preferred-size:8.333%; flex-basis:8.333%; max-width:8.333%; }
.grid-cont .grid-row .col-2 { -ms-flex-preferred-size:16.667%; flex-basis:16.667%; max-width:16.667%; }
.grid-cont .grid-row .col-3 { -ms-flex-preferred-size:25%; flex-basis:25%; max-width:25%; }
.grid-cont .grid-row .col-4 { -ms-flex-preferred-size:33.333%; flex-basis:33.333%; max-width:33.333%; }
.grid-cont .grid-row .col-5 { -ms-flex-preferred-size:41.667%; flex-basis:41.667%; max-width:41.667%; }
.grid-cont .grid-row .col-6 { -ms-flex-preferred-size:50%; flex-basis:50%; max-width:50%; }
.grid-cont .grid-row .col-7 { -ms-flex-preferred-size:58.333%; flex-basis:58.333%; max-width:58.333%; }
.grid-cont .grid-row .col-8 { -ms-flex-preferred-size:66.667%; flex-basis:66.667%; max-width:66.667%; }
.grid-cont .grid-row .col-9 { -ms-flex-preferred-size:75%; flex-basis:75%; max-width:75%; }
.grid-cont .grid-row .col-10 { -ms-flex-preferred-size:83.333%; flex-basis:83.333%; max-width:83.333%; }
.grid-cont .grid-row .col-11 { -ms-flex-preferred-size:91.667%; flex-basis:91.667%; max-width:91.667%; }
.grid-cont .grid-row .col-12 { -ms-flex-preferred-size:100%; flex-basis:100%; max-width:100%; }
/* Flex Classes */
.flex-1 { flex:1; }
.flex-2 { flex:2; }
.flex-3 { flex:3; }
.flex-4 { flex:4; }
.flex-5 { flex:5; }
.flex-6 { flex:6; }
.flex-7 { flex:7; }
.flex-8 { flex:8; }
.flex-9 { flex:9; }
.flex-10 { flex:10; }
.flex-11 { flex:11; }
.flex-12 { flex:12; }
/* Flex Basis Classes */
.basis-full { flex-basis:100%; }
.basis-100 { flex-basis:100px; }
.basis-200 { flex-basis:200px; }
.basis-300 { flex-basis:300px; }
.basis-350 { flex-basis:350px; }
.basis-400 { flex-basis:400px; }
.basis-500 { flex-basis:500px; }
.basis-600 { flex-basis:600px; }
.basis-700 { flex-basis:700px; }
.basis-800 { flex-basis:800px; }
.basis-900 { flex-basis:900px; }
.basis-1000 { flex-basis:1000px; }
/* numbering */
.numbering { counter-reset:cnt; position:relative; margin:0; padding-right:1rem; }
.numbering dt { position:relative; margin-bottom:-8px; padding:4px 0 10px 0; color:navy; }
.numbering dt:before { content:counter(cnt); counter-increment:cnt; position:absolute; left:-5px; top:0; font-size:1.8rem; }
.numbering dd { margin:0 0 10px 0; color:mediumblue; text-align:left; }
.numbering dt, .numbering dd { padding-left:25px; margin-left:1.5rem; font-size:1rem; }
/* Distribute Space (all items in container - Do not set auto margins for this to work) */
.spaceAround { -webkit-justify-content:space-around; -ms-justify-content:space-around; justify-content:space-around; }
.spaceBetween { -webkit-justify-content:space-between; -ms-justify-content:space-between; justify-content:space-between; }
/* Justify Items (all items in container) */
.justifyLeft { -webkit-justify-content:flex-start; -ms-justify-content:flex-start; justify-content:flex-start; }
.justifyCenter { -webkit-justify-content:center; -ms-justify-content:center; justify-content:center; }
.justifyRight { -webkit-justify-content:flex-end; -ms-justify-content:flex-end; justify-content:flex-end; }
/* Align Items (all items in container - needs to be larger than the flex items height) */
.alignItemsTop { -webkit-align-items:flex-start; -ms-align-items:flex-start; align-items:flex-start; }
.alignItemsCenter { -webkit-align-items:center; -ms-align-items:center; align-items:center; }
.alignItemsBottom { -webkit-align-items:flex-end; -ms-align-items:flex-end; align-items:flex-end; }
.alignItemsStretch { -webkit-align-items:stretch; -ms-align-items:stretch; align-items:stretch; }
.alignItemsBaseline { -webkit-align-items:baseline; -ms-align-items:baseline; align-items:baseline; }
/* For alignment of children */
.selfTop { -webkit-align-self:flex-start; -ms-align-self:flex-start; align-self:flex-start; }
.selfCenter { -webkit-align-self:center; -ms-align-self:center; align-self:center; }
.selfBottom { -webkit-align-self:flex-end; -ms-align-self:flex-end; align-self:flex-end; }
.selfStretch { -webkit-align-self:stretch; -ms-align-self:stretch; align-self:stretch; }
/* Ordering */
.grid-cont .grid-row .order-1 { -webkit-order:1; -ms-order:1; order:1; }
.grid-cont .grid-row .order-2 { -webkit-order:2; -ms-order:2; order:2; }
.grid-cont .grid-row .order-3 { -webkit-order:3; -ms-order:3; order:3; }
.grid-cont .grid-row .order-4 { -webkit-order:4; -ms-order:4; order:4; }
.grid-cont .grid-row .order-5 { -webkit-order:5; -ms-order:5; order:5; }
.grid-cont .grid-row .order-6 { -webkit-order:6; -ms-order:6; order:6; }
.grid-cont .grid-row .order-7 { -webkit-order:7; -ms-order:7; order:7; }
.grid-cont .grid-row .order-8 { -webkit-order:8; -ms-order:8; order:8; }
.grid-cont .grid-row .order-9 { -webkit-order:9; -ms-order:9; order:9; }
.grid-cont .grid-row .order-10 { -webkit-order:10; -ms-order:10; order:10; }
/* Offset */
.grid-cont .grid-row .col-offset-1 { margin-left:8.333%; }
.grid-cont .grid-row .col-offset-2 { margin-left:16.667%; }
.grid-cont .grid-row .col-offset-3 { margin-left:25%; }
.grid-cont .grid-row .col-offset-4 { margin-left:33.333%; }
.grid-cont .grid-row .col-offset-5 { margin-left:41.667%; }
.grid-cont .grid-row .col-offset-6 { margin-left:50%; }
.grid-cont .grid-row .col-offset-7 { margin-left:58.333%; }
.grid-cont .grid-row .col-offset-8 { margin-left:66.667%; }
.grid-cont .grid-row .col-offset-9 { margin-left:75%; }
.grid-cont .grid-row .col-offset-10 { margin-left:83.333%; }
.grid-cont .grid-row .col-offset-11 { margin-left:91.667%; }
/* Max-width */
.max-width { -webkit-flex-basis:100%; -ms-flex-preferred-size:100%; flex-basis:100%; max-width:100%; }
/* Overflow */
.overflow-x { overflow-x:auto; padding:1px; }
/* Hiding */
.grid-row.hide, .hide { display:none; }
/* Flex Buttons */
.flexBTN-toolBar { display:flex; flex-flow:wrap; margin:1rem 0; }
.flexBTN-toolBar a, .flexBTN-toolBar a:hover, .flexBTN-toolBar a:visited { color:black; text-decoration:none; }
.flexBTN-toolBar .flexBTN-button, .flexBTN-toolBar button.flexBTN-button { display:flex; text-align:center; margin:0 2px; padding:.08rem .75rem; background:#f5f5f5; border:1px solid #dedede; border-top:1px solid #eee; border-left:1px solid #eee; border-radius:0; }
.flexBTN-toolBar .flexBTN-button.flexBTN-disabled { background:#fbfbfb; color:gainsboro; }
.flexBTN-toolBar .flexBTN-button-text { padding:.25rem .5rem .15rem .15rem }
.flexBTN-toolBar .flexBTN-button:not(.flexBTN-disabled):hover, .flexBTN-toolBar button.flexBTN-button:not(.flexBTN-disabled):hover { background:#dff4ff; border:1px solid #c2e1ef; cursor:pointer; color:black; }
/*==================================================
= Non-Mobile First Method Media Queries =
==================================================*/
/* lg - Large Devices, Wide Screens [1280px] */
@media only screen and (max-width:1280px) {
.grid-cont .grid-row .col-lg-1, .grid-cont .grid-row .col-lg-2, .grid-cont .grid-row .col-lg-3, .grid-cont .grid-row .col-lg-4, .grid-cont .grid-row .col-lg-5, .grid-cont .grid-row .col-lg-6, .grid-cont .grid-row .col-lg-7, .grid-cont .grid-row .col-lg-8, .grid-cont .grid-row .col-lg-9, .grid-cont .grid-row .col-lg-10, .grid-cont .grid-row .col-lg-11, .grid-cont .grid-row .col-lg-12 { box-sizing:border-box; -ms-flex:0 0 auto; -webkit-box-flex:0; flex:0 0 auto; padding-right:.5rem; padding-left:.5rem; }
.grid-cont .grid-row .col-lg-1 { -ms-flex-preferred-size:8.333%; flex-basis:8.333%; max-width:8.333%; }
.grid-cont .grid-row .col-lg-2 { -ms-flex-preferred-size:16.667%; flex-basis:16.667%; max-width:16.667%; }
.grid-cont .grid-row .col-lg-3 { -ms-flex-preferred-size:25%; flex-basis:25%; max-width:25%; }
.grid-cont .grid-row .col-lg-4 { -ms-flex-preferred-size:33.333%; flex-basis:33.333%; max-width:33.333%; }
.grid-cont .grid-row .col-lg-5 { -ms-flex-preferred-size:41.667%; flex-basis:41.667%; max-width:41.667%; }
.grid-cont .grid-row .col-lg-6 { -ms-flex-preferred-size:50%; flex-basis:50%; max-width:50%; }
.grid-cont .grid-row .col-lg-7 { -ms-flex-preferred-size:58.333%; flex-basis:58.333%; max-width:58.333%; }
.grid-cont .grid-row .col-lg-8 { -ms-flex-preferred-size:66.667%; flex-basis:66.667%; max-width:66.667%; }
.grid-cont .grid-row .col-lg-9 { -ms-flex-preferred-size:75%; flex-basis:75%; max-width:75%; }
.grid-cont .grid-row .col-lg-10 { -ms-flex-preferred-size:83.333%; flex-basis:83.333%; max-width:83.333%; }
.grid-cont .grid-row .col-lg-11 { -ms-flex-preferred-size:91.667%; flex-basis:91.667%; max-width:91.667%; }
.grid-cont .grid-row .col-lg-12 { -ms-flex-preferred-size:100%; flex-basis:100%; max-width:100%; margin-bottom:-.1rem }
.grid-cont .grid-row .col-lg-offset-0 { margin-left:0; }
.grid-cont .grid-row .col-lg-offset-1 { margin-left:8.333%; }
.grid-cont .grid-row .col-lg-offset-2 { margin-left:16.667%; }
.grid-cont .grid-row .col-lg-offset-3 { margin-left:25%; }
.grid-cont .grid-row .col-lg-offset-4 { margin-left:33.333%; }
.grid-cont .grid-row .col-lg-offset-5 { margin-left:41.667%; }
.grid-cont .grid-row .col-lg-offset-6 { margin-left:50%; }
.grid-cont .grid-row .col-lg-offset-7 { margin-left:58.333%; }
.grid-cont .grid-row .col-lg-offset-8 { margin-left:66.667%; }
.grid-cont .grid-row .col-lg-offset-9 { margin-left:75%; }
.grid-cont .grid-row .col-lg-offset-10 { margin-left:83.333%; }
.grid-cont .grid-row .col-lg-offset-11 { margin-left:91.667%; }
.grid-cont .grid-row .order-lg-1 { -webkit-order:1; -ms-order:1; order:1; }
.grid-cont .grid-row .order-lg-2 { -webkit-order:2; -ms-order:2; order:2; }
.grid-cont .grid-row .order-lg-3 { -webkit-order:3; -ms-order:3; order:3; }
.grid-cont .grid-row .order-lg-4 { -webkit-order:4; -ms-order:4; order:4; }
.grid-cont .grid-row .order-lg-5 { -webkit-order:5; -ms-order:5; order:5; }
.grid-cont .grid-row .order-lg-6 { -webkit-order:6; -ms-order:6; order:6; }
.grid-cont .grid-row .order-lg-7 { -webkit-order:7; -ms-order:7; order:7; }
.grid-cont .grid-row .order-lg-8 { -webkit-order:8; -ms-order:8; order:8; }
.grid-cont .grid-row .order-lg-9 { -webkit-order:9; -ms-order:9; order:9; }
.grid-cont .grid-row .order-lg-10 { -webkit-order:10; -ms-order:10; order:10; }
}
/* md - Medium Devices, Desktops [992px] */
@media only screen and (max-width:992px) {
.grid-cont .grid-row .col-md-1, .grid-cont .grid-row .col-md-2, .grid-cont .grid-row .col-md-3, .grid-cont .grid-row .col-md-4, .grid-cont .grid-row .col-md-5, .grid-cont .grid-row .col-md-6, .grid-cont .grid-row .col-md-7, .grid-cont .grid-row .col-md-8, .grid-cont .grid-row .col-md-9, .grid-cont .grid-row .col-md-10, .grid-cont .grid-row .col-md-11, .grid-cont .grid-row .col-md-12 { box-sizing:border-box; -ms-flex:0 0 auto; -webkit-box-flex:0; flex:0 0 auto; padding-right:.5rem; padding-left:.5rem; }
.grid-cont .grid-row .col-md-1 { -ms-flex-preferred-size:8.333%; flex-basis:8.333%; max-width:8.333%; }
.grid-cont .grid-row .col-md-2 { -ms-flex-preferred-size:16.667%; flex-basis:16.667%; max-width:16.667%; }
.grid-cont .grid-row .col-md-3 { -ms-flex-preferred-size:25%; flex-basis:25%; max-width:25%; }
.grid-cont .grid-row .col-md-4 { -ms-flex-preferred-size:33.333%; flex-basis:33.333%; max-width:33.333%; }
.grid-cont .grid-row .col-md-5 { -ms-flex-preferred-size:41.667%; flex-basis:41.667%; max-width:41.667%; }
.grid-cont .grid-row .col-md-6 { -ms-flex-preferred-size:50%; flex-basis:50%; max-width:50%; }
.grid-cont .grid-row .col-md-7 { -ms-flex-preferred-size:58.333%; flex-basis:58.333%; max-width:58.333%; }
.grid-cont .grid-row .col-md-8 { -ms-flex-preferred-size:66.667%; flex-basis:66.667%; max-width:66.667%; }
.grid-cont .grid-row .col-md-9 { -ms-flex-preferred-size:75%; flex-basis:75%; max-width:75%; }
.grid-cont .grid-row .col-md-10 { -ms-flex-preferred-size:83.333%; flex-basis:83.333%; max-width:83.333%; }
.grid-cont .grid-row .col-md-11 { -ms-flex-preferred-size:91.667%; flex-basis:91.667%; max-width:91.667%; }
.grid-cont .grid-row .col-md-12 { -ms-flex-preferred-size:100%; flex-basis:100%; max-width:100%; }
.grid-cont .grid-row .col-md-offset-0 { margin-left:0; }
.grid-cont .grid-row .col-md-offset-1 { margin-left:8.333%; }
.grid-cont .grid-row .col-md-offset-2 { margin-left:16.667%; }
.grid-cont .grid-row .col-md-offset-3 { margin-left:25%; }
.grid-cont .grid-row .col-md-offset-4 { margin-left:33.333%; }
.grid-cont .grid-row .col-md-offset-5 { margin-left:41.667%; }
.grid-cont .grid-row .col-md-offset-6 { margin-left:50%; }
.grid-cont .grid-row .col-md-offset-7 { margin-left:58.333%; }
.grid-cont .grid-row .col-md-offset-8 { margin-left:66.667%; }
.grid-cont .grid-row .col-md-offset-9 { margin-left:75%; }
.grid-cont .grid-row .col-md-offset-10 { margin-left:83.333%; }
.grid-cont .grid-row .col-md-offset-11 { margin-left:91.667%; }
.grid-cont .grid-row .order-md-1 { -webkit-order:1; -ms-order:1; order:1; }
.grid-cont .grid-row .order-md-2 { -webkit-order:2; -ms-order:2; order:2; }
.grid-cont .grid-row .order-md-3 { -webkit-order:3; -ms-order:3; order:3; }
.grid-cont .grid-row .order-md-4 { -webkit-order:4; -ms-order:4; order:4; }
.grid-cont .grid-row .order-md-5 { -webkit-order:5; -ms-order:5; order:5; }
.grid-cont .grid-row .order-md-6 { -webkit-order:6; -ms-order:6; order:6; }
.grid-cont .grid-row .order-md-7 { -webkit-order:7; -ms-order:7; order:7; }
.grid-cont .grid-row .order-md-8 { -webkit-order:8; -ms-order:8; order:8; }
.grid-cont .grid-row .order-md-9 { -webkit-order:9; -ms-order:9; order:9; }
.grid-cont .grid-row .order-md-10 { -webkit-order:10; -ms-order:10; order:10; }
}
/* sm - Small Devices, Tablets [768px] */
@media only screen and (max-width:768px) {
.grid-cont .grid-row .col-sm-1, .grid-cont .grid-row .col-sm-2, .grid-cont .grid-row .col-sm-3, .grid-cont .grid-row .col-sm-4, .grid-cont .grid-row .col-sm-5, .grid-cont .grid-row .col-sm-6, .grid-cont .grid-row .col-sm-7, .grid-cont .grid-row .col-sm-8, .grid-cont .grid-row .col-sm-9, .grid-cont .grid-row .col-sm-10, .grid-cont .grid-row .col-sm-11, .grid-cont .grid-row .col-sm-12 { box-sizing:border-box; -ms-flex:0 0 auto; -webkit-box-flex:0; flex:0 0 auto; padding-right:.5rem; padding-left:.5rem; }
.grid-cont .grid-row .col-sm-1 { -ms-flex-preferred-size:8.333%; flex-basis:8.333%; max-width:8.333%; }
.grid-cont .grid-row .col-sm-2 { -ms-flex-preferred-size:16.667%; flex-basis:16.667%; max-width:16.667%; }
.grid-cont .grid-row .col-sm-3 { -ms-flex-preferred-size:25%; flex-basis:25%; max-width:25%; }
.grid-cont .grid-row .col-sm-4 { -ms-flex-preferred-size:33.333%; flex-basis:33.333%; max-width:33.333%; }
.grid-cont .grid-row .col-sm-5 { -ms-flex-preferred-size:41.667%; flex-basis:41.667%; max-width:41.667%; }
.grid-cont .grid-row .col-sm-6 { -ms-flex-preferred-size:50%; flex-basis:50%; max-width:50%; }
.grid-cont .grid-row .col-sm-7 { -ms-flex-preferred-size:58.333%; flex-basis:58.333%; max-width:58.333%; }
.grid-cont .grid-row .col-sm-8 { -ms-flex-preferred-size:66.667%; flex-basis:66.667%; max-width:66.667%; }
.grid-cont .grid-row .col-sm-9 { -ms-flex-preferred-size:75%; flex-basis:75%; max-width:75%; }
.grid-cont .grid-row .col-sm-10 { -ms-flex-preferred-size:83.333%; flex-basis:83.333%; max-width:83.333%; }
.grid-cont .grid-row .col-sm-11 { -ms-flex-preferred-size:91.667%; flex-basis:91.667%; max-width:91.667%; }
.grid-cont .grid-row .col-sm-12 { -ms-flex-preferred-size:100%; flex-basis:100%; max-width:100%; }
.grid-cont .grid-row .col-sm-offset-0 { margin-left:0; }
.grid-cont .grid-row .col-sm-offset-1 { margin-left:8.333%; }
.grid-cont .grid-row .col-sm-offset-2 { margin-left:16.667%; }
.grid-cont .grid-row .col-sm-offset-3 { margin-left:25%; }
.grid-cont .grid-row .col-sm-offset-4 { margin-left:33.333%; }
.grid-cont .grid-row .col-sm-offset-5 { margin-left:41.667%; }
.grid-cont .grid-row .col-sm-offset-6 { margin-left:50%; }
.grid-cont .grid-row .col-sm-offset-7 { margin-left:58.333%; }
.grid-cont .grid-row .col-sm-offset-8 { margin-left:66.667%; }
.grid-cont .grid-row .col-sm-offset-9 { margin-left:75%; }
.grid-cont .grid-row .col-sm-offset-10 { margin-left:83.333%; }
.grid-cont .grid-row .col-sm-offset-11 { margin-left:91.667%; }
.grid-cont .grid-row .order-sm-1 { -webkit-order:1; -ms-order:1; order:1; }
.grid-cont .grid-row .order-sm-2 { -webkit-order:2; -ms-order:2; order:2; }
.grid-cont .grid-row .order-sm-3 { -webkit-order:3; -ms-order:3; order:3; }
.grid-cont .grid-row .order-sm-4 { -webkit-order:4; -ms-order:4; order:4; }
.grid-cont .grid-row .order-sm-5 { -webkit-order:5; -ms-order:5; order:5; }
.grid-cont .grid-row .order-sm-6 { -webkit-order:6; -ms-order:6; order:6; }
.grid-cont .grid-row .order-sm-7 { -webkit-order:7; -ms-order:7; order:7; }
.grid-cont .grid-row .order-sm-8 { -webkit-order:8; -ms-order:8; order:8; }
.grid-cont .grid-row .order-sm-9 { -webkit-order:9; -ms-order:9; order:9; }
.grid-cont .grid-row .order-sm-10 { -webkit-order:10; -ms-order:10; order:10; }
}
/* xs - Extra Small Devices, Phones [480px] */
@media only screen and (max-width:480px) {
.grid-cont .grid-row .col-xs-1, .grid-cont .grid-row .col-xs-2, .grid-cont .grid-row .col-xs-3, .grid-cont .grid-row .col-xs-4, .grid-cont .grid-row .col-xs-5, .grid-cont .grid-row .col-xs-6, .grid-cont .grid-row .col-xs-7, .grid-cont .grid-row .col-xs-8, .grid-cont .grid-row .col-xs-9, .grid-cont .grid-row .col-xs-10, .grid-cont .grid-row .col-xs-11, .grid-cont .grid-row .col-xs-12 { box-sizing:border-box; -ms-flex:0 0 auto; -webkit-box-flex:0; flex:0 0 auto; padding-right:.5rem; padding-left:.5rem; }
.grid-cont .grid-row .col-xs-1 { -ms-flex-preferred-size:8.333%; flex-basis:8.333%; max-width:8.333%; }
.grid-cont .grid-row .col-xs-2 { -ms-flex-preferred-size:16.667%; flex-basis:16.667%; max-width:16.667%; }
.grid-cont .grid-row .col-xs-3 { -ms-flex-preferred-size:25%; flex-basis:25%; max-width:25%; }
.grid-cont .grid-row .col-xs-4 { -ms-flex-preferred-size:33.333%; flex-basis:33.333%; max-width:33.333%; }
.grid-cont .grid-row .col-xs-5 { -ms-flex-preferred-size:41.667%; flex-basis:41.667%; max-width:41.667%; }
.grid-cont .grid-row .col-xs-6 { -ms-flex-preferred-size:50%; flex-basis:50%; max-width:50%; }
.grid-cont .grid-row .col-xs-7 { -ms-flex-preferred-size:58.333%; flex-basis:58.333%; max-width:58.333%; }
.grid-cont .grid-row .col-xs-8 { -ms-flex-preferred-size:66.667%; flex-basis:66.667%; max-width:66.667%; }
.grid-cont .grid-row .col-xs-9 { -ms-flex-preferred-size:75%; flex-basis:75%; max-width:75%; }
.grid-cont .grid-row .col-xs-10 { -ms-flex-preferred-size:83.333%; flex-basis:83.333%; max-width:83.333%; }
.grid-cont .grid-row .col-xs-11 { -ms-flex-preferred-size:91.667%; flex-basis:91.667%; max-width:91.667%; }
.grid-cont .grid-row .col-xs-12 { -ms-flex-preferred-size:100%; flex-basis:100%; max-width:100%; }
.grid-cont .grid-row .col-xs-offset-1 { margin-left:8.333%; }
.grid-cont .grid-row .col-xs-offset-2 { margin-left:16.667%; }
.grid-cont .grid-row .col-xs-offset-3 { margin-left:25%; }
.grid-cont .grid-row .col-xs-offset-4 { margin-left:33.333%; }
.grid-cont .grid-row .col-xs-offset-5 { margin-left:41.667%; }
.grid-cont .grid-row .col-xs-offset-6 { margin-left:50%; }
.grid-cont .grid-row .col-xs-offset-7 { margin-left:58.333%; }
.grid-cont .grid-row .col-xs-offset-8 { margin-left:66.667%; }
.grid-cont .grid-row .col-xs-offset-9 { margin-left:75%; }
.grid-cont .grid-row .col-xs-offset-10 { margin-left:83.333%; }
.grid-cont .grid-row .col-xs-offset-11 { margin-left:91.667%; }
.grid-cont .grid-row .order-xs-1 { -webkit-order:1; -ms-order:1; order:1; }
.grid-cont .grid-row .order-xs-2 { -webkit-order:2; -ms-order:2; order:2; }
.grid-cont .grid-row .order-xs-3 { -webkit-order:3; -ms-order:3; order:3; }
.grid-cont .grid-row .order-xs-4 { -webkit-order:4; -ms-order:4; order:4; }
.grid-cont .grid-row .order-xs-5 { -webkit-order:5; -ms-order:5; order:5; }
.grid-cont .grid-row .order-xs-6 { -webkit-order:6; -ms-order:6; order:6; }
.grid-cont .grid-row .order-xs-7 { -webkit-order:7; -ms-order:7; order:7; }
.grid-cont .grid-row .order-xs-8 { -webkit-order:8; -ms-order:8; order:8; }
.grid-cont .grid-row .order-xs-9 { -webkit-order:9; -ms-order:9; order:9; }
.grid-cont .grid-row .order-xs-10 { -webkit-order:10; -ms-order:10; order:10; }
}
/* ==========================================================================
Helper classes
========================================================================== */
/* Font Colors */
.black { color:black; }
.white { color:white; }
.grey { color:grey; }
.elmsBlue { color:hsl(215, 25%, 35%); }
.red { color:red; }
.green { color:green; }
.blue { color:blue; }
.yellow { color:yellow; }
.orange { color:orange; }
.brown { color:brown; }
.navy { color:navy; }
.elmsBlue-light { color:hsl(215, 25%, 85%); }
.red-light { color:hsl(0, 100%, 85%); }
.green-light { color:hsl(120, 60%, 85%); }
.blue-light { color:hsl(207, 87%, 85%); }
.yellow-light { color:hsl(60, 100%, 85%); }
.orange-light { color:hsl(39, 100%, 85%); }
.brown-light { color:hsl(0, 59%, 85%); }
.navy-light { color:hsl(240, 100%, 85%); }
/* Background Color:Black / White / Light */
.bg-white { background:white; }
.bg-black { background:black; }
.bg-light { background:hsl(0, 0%, 97.5%); }
/* Background Color:grey */
.bg-grey-1 { background:hsl(0, 0%, 25%); }
.bg-grey-2 { background:hsl(0, 0%, 35%); }
.bg-grey-3 { background:hsl(0, 0%, 45%); }
.bg-grey-4 { background:hsl(0, 0%, 55%); }
.bg-grey-5 { background:hsl(0, 0%, 65%); }
.bg-grey-6 { background:hsl(0, 0%, 75%); }
.bg-grey-7 { background:hsl(0, 0%, 85%); }
.bg-grey-8 { background:hsl(0, 0%, 95%); }
.bg-grey-9 { background:hsl(0, 0%, 97%); }
/* Background Color:elmsblue */
.bg-elmsblue-1 { background:hsl(215, 25%, 25%); }
.bg-elmsblue-2 { background:hsl(215, 25%, 35%); }
.bg-elmsblue-3 { background:hsl(215, 25%, 45%); }
.bg-elmsblue-4 { background:hsl(215, 25%, 55%); }
.bg-elmsblue-5 { background:hsl(215, 25%, 65%); }
.bg-elmsblue-6 { background:hsl(215, 25%, 75%); }
.bg-elmsblue-7 { background:hsl(215, 25%, 85%); }
.bg-elmsblue-8 { background:hsl(215, 25%, 95%); }
.bg-elmsblue-9 { background:hsl(215, 25%, 98.5%); }
/* Background Color:red */
.bg-red-1 { background:hsl(0, 100%, 25%); }
.bg-red-2 { background:hsl(0, 100%, 35%); }
.bg-red-3 { background:hsl(0, 100%, 45%); }
.bg-red-4 { background:hsl(0, 100%, 55%); }
.bg-red-5 { background:hsl(0, 100%, 65%); }
.bg-red-6 { background:hsl(0, 100%, 75%); }
.bg-red-7 { background:hsl(0, 100%, 85%); }
.bg-red-8 { background:hsl(0, 100%, 95%); }
.bg-red-9 { background:hsl(0, 100%, 98.5%); }
/* Background Color:green */
.bg-green-1 { background:hsl(120, 60%, 25%); }
.bg-green-2 { background:hsl(120, 60%, 35%); }
.bg-green-3 { background:hsl(120, 60%, 45%); }
.bg-green-4 { background:hsl(120, 60%, 55%); }
.bg-green-5 { background:hsl(120, 60%, 65%); }
.bg-green-6 { background:hsl(120, 60%, 75%); }
.bg-green-7 { background:hsl(120, 60%, 85%); }
.bg-green-8 { background:hsl(120, 60%, 95%); }
.bg-green-9 { background:hsl(120, 60%, 98.5%); }
/* Background Color:blue */
.bg-blue-1 { background:hsl(207, 87%, 25%); }
.bg-blue-2 { background:hsl(207, 87%, 35%); }
.bg-blue-3 { background:hsl(207, 87%, 45%); }
.bg-blue-4 { background:hsl(207, 87%, 55%); }
.bg-blue-5 { background:hsl(207, 87%, 65%); }
.bg-blue-6 { background:hsl(207, 87%, 75%); }
.bg-blue-7 { background:hsl(207, 87%, 85%); }
.bg-blue-8 { background:hsl(207, 87%, 95%); }
.bg-blue-9 { background:hsl(207, 87%, 98.5%); }
/* Background Color:yellow */
.bg-yellow-1 { background:hsl(60, 100%, 25%); }
.bg-yellow-2 { background:hsl(60, 100%, 35%); }
.bg-yellow-3 { background:hsl(60, 100%, 45%); }
.bg-yellow-4 { background:hsl(60, 100%, 55%); }
.bg-yellow-5 { background:hsl(60, 100%, 65%); }
.bg-yellow-6 { background:hsl(60, 100%, 75%); }
.bg-yellow-7 { background:hsl(60, 100%, 85%); }
.bg-yellow-8 { background:hsl(60, 100%, 95%); }
.bg-yellow-9 { background:hsl(60, 100%, 98.5%); }
/* Background Color:orange */
.bg-orange-1 { background:hsl(39, 100%, 25%); }
.bg-orange-2 { background:hsl(39, 100%, 35%); }
.bg-orange-3 { background:hsl(39, 100%, 45%); }
.bg-orange-4 { background:hsl(39, 100%, 55%); }
.bg-orange-5 { background:hsl(39, 100%, 65%); }
.bg-orange-6 { background:hsl(39, 100%, 75%); }
.bg-orange-7 { background:hsl(39, 100%, 85%); }
.bg-orange-8 { background:hsl(39, 100%, 95%); }
.bg-orange-9 { background:hsl(39, 100%, 98.5%); }
/* Background Color:brown */
.bg-brown-1 { background:hsl(0, 59%, 25%); }
.bg-brown-2 { background:hsl(0, 59%, 35%); }
.bg-brown-3 { background:hsl(0, 59%, 45%); }
.bg-brown-4 { background:hsl(0, 59%, 55%); }
.bg-brown-5 { background:hsl(0, 59%, 65%); }
.bg-brown-6 { background:hsl(0, 59%, 75%); }
.bg-brown-7 { background:hsl(0, 59%, 85%); }
.bg-brown-8 { background:hsl(0, 59%, 95%); }
.bg-brown-9 { background:hsl(0, 59%, 98.5%); }
/* Background Color:violet */
.bg-violet-1 { background:hsl(300, 76%, 25%); }
.bg-violet-2 { background:hsl(300, 76%, 35%); }
.bg-violet-3 { background:hsl(300, 76%, 45%); }
.bg-violet-4 { background:hsl(300, 76%, 55%); }
.bg-violet-5 { background:hsl(300, 76%, 65%); }
.bg-violet-6 { background:hsl(300, 76%, 75%); }
.bg-violet-7 { background:hsl(300, 76%, 85%); }
.bg-violet-8 { background:hsl(300, 76%, 95%); }
.bg-violet-9 { background:hsl(300, 76%, 98.5%); }
/* Background Color:teal */
.bg-teal-1 { background:hsl(180, 100%, 25%); }
.bg-teal-2 { background:hsl(180, 100%, 35%); }
.bg-teal-3 { background:hsl(180, 100%, 45%); }
.bg-teal-4 { background:hsl(180, 100%, 55%); }
.bg-teal-5 { background:hsl(180, 100%, 65%); }
.bg-teal-6 { background:hsl(180, 100%, 75%); }
.bg-teal-7 { background:hsl(180, 100%, 85%); }
.bg-teal-8 { background:hsl(180, 100%, 95%); }
.bg-teal-9 { background:hsl(180, 100%, 98.5%); }
/* Background Color:striped */
.bg-striped { padding:2.25rem 1.6875rem; background-image: -webkit-repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
background-image: -moz-repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px); background-image: -o-repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px); -webkit-background-size:4px 4px; -moz-background-size: 4px 4px; background-size:4px 4px; }
/* Clear Background Color */
.bg-clear, .panel-cont.bg-clear { background:none; box-shadow:none; }
/* Wells */
[class*='well-'] { margin:.25rem 0; padding:1rem; position:relative; width:100%; font-size:1.05rem; }
.well-blue { border-left:8px solid hsl(212, 24%, 60%); background:hsl(208, 100%, 97%); }
.well-red { border-left:8px solid hsl(343, 100%, 50%); background:hsl(0, 100%, 97%); }
.well-orange { border-left:8px solid hsl(30, 100%, 50%); background:hsl(25, 100%, 97%); }
/*
* Hide visually and from screen readers
*/
.hide {
display:none;
}
/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
* causes content to wrap 1 word per line:
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap; /* 1 */
}
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
white-space: inherit;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
https://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important; /* Black prints faster */
-webkit-box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/*
* Printing Tables:
* http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}