element
inside the and using language-java style classes:
...
***************************************************************************** */
/* ************************************************************************** */
/* ***** PRE - MEDIA QUERY CLASSES ************************************** */
/* ************************************************************************** */
.scrollContainer {
margin: 0;
position: relative;
margin: 1em auto 2em;
overflow: visible;
}
#URLresult {
max-width: 560px;
width: 50vw;
font-size: 14px;
}
/* ************************************************************************** */
/* ************************************************************************** */
/* ********** IMAGES INCLUDING COUNTER ********************************* */
/* ************************************************************************** */
/* ************************************************************************** */
.intro {
margin: 0 1.3em;
}
.image img, .imageB img {
height: auto;
width: 100%;
max-width: 1200px;
}
.image, .imageB, .imageCanvas, .imageHalf {
margin: 1em -3%;
height: auto;
width: 100%;
padding: 1.5em;
max-width: calc(800px + 3em);
background-color: var(--modeBGimage, #FFFFF6);
box-shadow: 0.5em 0.5em 1.2em var(--modeBoxShadow, rgba(0,0,0,0.9));
}
.imageB {
margin: auto;
padding: 0.5em;
max-width: 100%;
background-color: var(--modeBGimageB, #BBB);
}
.imageCanvas, .imageHalf {
margin: 0.125em;
padding: 0.33em;
background-color: var(--modeBGimageC, #777);
}
.imageHalf {
margin: 0.5em 2em;
width: 50%;
padding: 0.33em;
}
.counter {
width: 50%;
font-size: 0.7em;
margin: 0 auto;
background-color: var(--modeBGcolor);
}
.counter img {
max-height: 3em;
}
img.centered, img.top {
position: relative;
width: 520px;
margin: 0.25em;
left: 15%;
border-radius: 44px;
box-shadow: inset 0 0 8px 4px #000,inset 2px 2px 8px 10px #fff,inset -3px 3px 8px 15px #0008, 6px 6px 12px #0006;
}
hr {
width: 95%;
margin: 12px auto;
border: 3px solid var(--modeHRcolor, #30a8);
border-radius: 4px;
}
/* ************************************************************************** */
/* ***** MEDIA QUERIES ************************************************** */
/* ************************************************************************** */
/* ************************************************************************** */
/* ***** MEDIA QUERIES ************************************************** */
/* ************************************************************************** */
/* ************************************************************************** */
/* ***** MEDIA QUERIES ************************************************** */
/* ************************************************************************** */
/* ************************************************************************** */
/* ***** DARK AND LIGHT MODE ******************************************** */
/* ************************************************************************** */
@media (prefers-color-scheme: dark) {
body {
margin: 0;
padding: 12px 0;
line-height: 1.4;
font-family: Barlow, Montserrat, sans-serif;
font-size: 1rem;
font-weight: 400;
color: var(--modeTextColor, #def);
background-color: var(--modeBGbody, #206);
}
}
/* ************************************************************************** */
/* ***** SCREEN SIZE **************************************************** */
/* ************************************************************************** */
@media (max-width: 639.99px) {
body {
font-size: 2.2vw;
padding: 0;
}
.wrapper {
width: 100vw;
margin: 0;
padding: 1vw;
overflow: scroll;
border-width: 1vw;
border-radius: 5vw;
}
img.centered {
position: relative;
margin: 0 2.5vw;
max-width: 95vw;
left: 0;
border-radius: 5vw;
}
}
@media (min-width: 640px) and (max-width: 899.99px) {
body {
padding: 0;
font-size: 2vw;
}
.wrapper {
width: 100vw;
margin: 0;
padding: 2vw;
overflow: scroll;
border-width: 2.5vw;
border-radius: 5vw;
}
img.centered {
position: relative;
max-width: 95vw;
margin: 0 2.5vw;
left: 0;
border-radius: 5vw;
}
}
@media (min-width: 900px) {
}
/* ************************************************************************** */
/* ***** END MEDIA QUERIES ********************************************** */
/* ************************************************************************** */
/* ************************************************************************** */
/* ************************************************************************** */
/* ***** PURE CSS BUTTONS AND CONTROLS ********************************* */
/* ************************************************************************** */
/* ************************************************************************** */
/* ************************************************************************** */
/* ***** GLOSSY BLUE GLOW BUTTON ****************************************** */
/* ************************************************************************** */
.myndexButton, a.myndexButton, a.myndexButton:link, a.myndexButton:visited {
display: block;
position: relative;
max-width: 8em;
margin: 0.25em;
cursor: pointer;
padding: 0.15em 0.5em 0.33em;
color: var(--modeTextAlt, #fff);
font-size: 1.25em;
font-family: Barlow, Montserrat, Helvetica, Arial, Verdana, "sans-serif";
font-weight: 500;
text-decoration: none;
text-align: center;
background-color: var(--modeBGcolor, #30a8);
background: linear-gradient(to bottom, #82d8 5%, #309 100%);
border: 0.12em solid var(--modeBorderColor, #0619c4aa);
border-radius: 0.75em;
box-shadow: 0.125em 0.125em 0.25em #20a8;
}
.myndexButton.dib, a.myndexButton.dib, a.myndexButton.dib:link, a.myndexButton.dib:visited {
display: inline-block;
}
a.myndexButton.top {
margin: 3.5em 0 0.5em;
}
.myndexButton:hover, a.myndexButton:hover, a.myndexButton:visited:hover {
color: var(--modeTextColor, #def);
background: linear-gradient(to bottom, #193bb3 25%, #4433ff 100%);
background-color: var(--modeBGcolor, #193bb3);
border-color: var(--modeBGcolor, #2222ff);
box-shadow: 0.33em 0.33em 0.45em #46b9;
color: var(--modeTextColor, #edf);
background: linear-gradient(rgba(153, 21, 255, 0.68) 25%, rgba(119, 0, 200, 0.63));
background-color: rgba(74, 0, 255, 0.58);
border-color: rgba(169, 0, 255, 0.9);
box-shadow: 0.125em 0.125em 0.33em #a928ffd4;
}
.myndexButton:active, a.myndexButton:active {
position: relative;
color: var(--modeTextColor, #fff);
border-color: var(--modeBGcolor, #2222ff);
box-shadow: 3px 3px 8px #46d9;
color: var(--modeTextColor, #fff);
border-color: rgba(198, 0, 251, 0.83);
box-shadow: 3px 3px 8px #e900ff96;
}
.myndexButton.buttonRow, a.myndexButton.buttonRow, a.myndexButton.buttonRow:link, a.myndexButton.buttonRow:visited {
display: inline-block;
margin: 0.6em 1em;
padding-left: 1em;
padding-right: 1em;
}
.myndexButton.buttonRow + footer, a.myndexButton.buttonRow + footer {
margin-top: 1em;
}
/* for pop up dialog */
#colorWarn {
z-index: 1000;
display: none;
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
overflow: auto;
background-color: var(--modeBGwarn, #306);
background-color: var(--modeBGwarn, #3064);
}
#colorWarn div {
position: relative;
margin: 20% auto;
width: 360px;
height: 120px;
text-align: center;
vertical-align: middle;
background-color: var(--modeBGwarn, #faa);
background-color: var(--modeBGwarn, #faae);
border: 12px solid var(--modeBorderWarn, #d00);
}
#colorWarn h3 {
position: relative;
margin: 30px auto;
z-index: 1010;
padding: 8px;
clear: both;
text-align: center;
}
.colorWarnX {
z-index: inherit;
display: inherit;
width: 40px;
height: 40px;
float: right;
font-size: 48px;
line-height: 0.6;
background-color: var(--modeBGwarn, #fea);
}
.colorSliders {
position: relative;
display: inline-block;
max-height: 165px;
min-height: 165px;
height: 165px;
max-width: 390px;
min-width: 390px;
width: 390px;
margin: 0;
padding: 0;
white-space: normal;
text-overflow: ellipsis;
overflow: hidden;
font-size: 1.2rem;
font-weight: 600;
line-height: 1.5;
background-color: var(--modeBGcolor, #ddd6cc);
border: 1px dotted #234;
border-radius: 18px;
}
.colorSliders p {
white-space: normal;
text-overflow: ellipsis;
overflow: visible;
padding: 0 12px;
text-align: left;
font-size: 14px;
font-weight: 400;
line-height: 1;
}
#TXTsliders,
#BGsliders {
position: relative;
padding: 2px 4px;
}
#ampSamp2 {
display: inline-block;
box-sizing: border-box;
position: relative;
width: 420px;
margin: 48px auto 12px;
padding: 6px;
font-family: "playfair display", serif;
border: 12px solid var(--modeBorderColor, #aaa);
}
/* ************************************************************************** */
/* ********** ORNAMENTATION *********************************************** */
/* ************************************************************************** */
/* ************************************************************************** */
/* ********** DROP CAP (from AMS) *************************************** */
/* ************************************************************************** */
/* Call it as a class dropCap (this one has a box) * */
.dropCap::first-letter,
.dropCap p:first-child::first-letter,
.dropCap:first-child::first-letter,
p.dropCap::first-letter,
div.dropCap::first-letter
{
float: left;
/* BOX -- sizes below are relative to drop cap size */
margin: -0.15em 0.05em -0.13em -0.25em;
padding: 0.03em 0.12em; /* Box Padding */
height: 1em; /* Box Height */
font-size: 2.5em;
font-weight: normal;
font-style: normal;
line-height: 1em; /* height of drop cap above line
bigger numbers make it LOWER */
color: var(--modeDropCap, #50C);
font-family: 'Lobster Two', cursive, "Garamond", "Baskerville",Times, serif;
text-shadow: -0.02em -0.02em 0.03em #DEF,
0.02em 0.02em 0.02em #00B,
-0.02em 0.02em 0.02em #00B,
0.02em 0.02em 0.03em #003,
0.07em 0.07em 0.11em #44A;
border-radius: 0.18em;
background-color: var(--modeBGdropCap, #acf7);
box-shadow: inset 0.03em 0.03em 0.06em #DEF,
inset -0.03em -0.03em 0.06em #789,
0.03em 0.03em 0.06em #44A;
}
/* Call it as a class dropCapSimple * */
.dropCapSimple::first-letter,
.dropCapSimple p:first-child::first-letter,
.dropCapSimple:first-child::first-letter,
p.dropCapSimple::first-letter,
div.dropCapSimple::first-letter
{
float: left;
/* BOX -- sizes below are relative to drop cap size */
margin: 0em 0.14em -0.2em -0.315em;
height: 1em; /* Box Height */
font-size: 3.2em;
font-weight: 700;
font-style: italic;
line-height: 0.7em; /* height of drop cap above line
bigger numbers make it LOWER */
color: var(--modeDropCap, #50C);
font-family: 'Lobster Two', cursive, "Garamond","Baskerville",Times, serif;
text-shadow: -0.02em -0.02em 0.04em #BCD,
0.02em -0.02em 0.02em #30BB,
-0.02em 0.02em 0.02em #30BB,
0.02em 0.02em 0.03em #006,
0.07em 0.07em 0.08em #44AB;
}
/* ************************************************************************** */
/* """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" */
/* ************************************************************************** */
/* ********** BLOCKQUOTES ********************************************** */
/* ************************************************************************** */
/* """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" */
/* ************************************************************************** */
/* ***** Blockquote BIG ***** */
blockquote.big {
font-family: 'Lobster Two', cursive, "Garamond", "Baskerville", Times, serif;
font-size: 2em;
line-height: 1.5em;
margin: 1em 3em;
font-weight: normal;
font-style: italic;
color: var(--modeQuoteColor, #448);
}
blockquote.big .mainQuote {
font-weight: bold;
font-style: italic;
text-shadow: -0.04em -0.04em 0.05em #daf,
0.03em -0.03em 0.05em #309,
-0.03em 0.03em 0.04em #309,
0.02em 0.02em 0.03em #003,
0.06em 0.06em 0.1em rgba(20, 0, 40, 0.4);
}
blockquote.big .mainQuote::before {
font-size: 1.8em;
content: '“';
}
blockquote.big .mainQuote::after {
font-size: 1.8em;
line-height: 0.4em;
content: '”';
}
/* ***** Blockquote standard ***** */
blockquote {
font-family: 'Lobster Two', cursive, "Garamond", "Baskerville", Times, serif;
font-size: 1.2em;
line-height: 1.3em;
margin: 1em 2em;
font-weight: normal;
font-style: italic;
color: var(--modeQuoteColor, #229);
}
blockquote .mainQuote, blockquote.mainQuote {
font-weight: normal;
font-style: italic;
text-shadow:
-0.04em -0.04em 0.05em #DAF,
0.03em -0.03em 0.05em #309,
-0.03em 0.03em 0.04em #309,
0.02em 0.02em 0.03em #003,
0.06em 0.06em 0.1em rgba(20, 0, 40, 0.4);
}
blockquote .mainQuote::before, blockquote.mainQuote::before {
font-size: 1.8em;
vertical-align: -0.1em;
content: '“';
}
blockquote .mainQuote::after, blockquote.mainQuote::after {
font-size: 1.8em;
vertical-align: -0.2em;
content: '”';
}
/* ************************************************************************** */
/* ***** ORDERED LISTS *************************************************** */
/* ************************************************************************** */
.noBullet {
list-style-type: none;
}
ul li,
ol li {
margin: 0.8em auto;
}
ul li {
list-style: square;
}
/* ************************************************************************** */
/* ***** APCA SAPC SPECIFIC *********************************************** */
/* ************************************************************************** */
.explainer {
position: relative;
margin: 0 auto;
padding: 0;
line-height: 1.5;
flex: 1 1 45%;
}
.faq ul li {
margin: 1em 1.1em 1em 0em;
line-height: 1em;
font-size: 0.9em;
font-weight: bold;
}
.faq ul li::before {
margin-left: -1em;
font-weight: bold;
content: "• ";
}
.faq ul li span {
margin: 1em 1.1em 1em 0em;
line-height: 1em;
font-style: normal;
font-weight: normal;
color: var(--modeListColor, #44a);
}
/* ************************************************************************** */
/* ******* SAPC CONTRAST RESULTS **************************************** */
/* ************************************************************************** */
code {
font-weight: 500;
font-family: "Inconsolata", Courier, Menlo, monospace;
}
code strong, code b {
font-weight: 900;
font-family: "Inconsolata", Courier, Menlo, monospace;
}
.codeBlock code {
margin: 0;
padding: 0;
font-family: "Inconsolata", Courier, Menlo, monospace;
}
.codeBlock {
width: 280px;
margin: 8px 0 0;
padding: 8px 12px;
white-space: nowrap;
overflow: hidden;
font-family: "Inconsolata", Courier, Menlo, monospace;
font-size: 16px;
color: var(--modeTextCode, #009);
background-color: var(--modeBGcode, #0e9);
border: 1px solid var(--modeBorderCode, #008);
}
.codeBlock code b {
font-weight: 900;
}
.codeBlock code {
font-weight: 500;
}
#inputArea {
position: relative;
margin: 16px auto;
padding: 8px 16px;
width: 100%;
color: var(--modeTextInAr, #00a);
background-color: var(--modeBGinAr, #e2e2aa);
border: 8px solid var(--modeBorderInAr, #309);
}
.inputLeft {
position: relative;
float: left;
}
.inputRight {
position: relative;
float: right;
}
input {
/* box-sizing: border-box; */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
max-width: 270px;
position: relative;
margin: 2px auto;
padding: 2px;
text-align: center;
font-size: 24px;
font-weight: 400;
color: var(--modeTextInput, #123);
background-color: var(--modeBGinput, #6cd);
border: 4px solid var(--modeBorderInput, #aaa8);
}
#inputTXT,
#inputBG {
font-size: 32px;
font-weight: 400;
color: var(--modeTextInput, #123);
border: 4px solid var(--modeBorderInput, #aaa8);
}
input:focus {
color: var(--modeTextInput, #12a);
border-color: var(--modeBorderInput, #66f);
}
#inputTXT:focus,
#inputBG:focus {
color: var(--modeTextInput, #12a);
border-color: var(--modeBorderInput, #66f);
}
.textInput,
.TXTinput {
max-width: 260px;
position: relative;
margin: 0 auto;
text-align: center;
}
#inputTXT,
#inputBG {
max-width: 260px;
position: relative;
margin: 0 auto;
text-align: center;
}
input[type="color"] {
cursor: pointer;
}
/* These must be after the inputs */
#BGresult,
#textResult,
#TXTresult,
#BGresult2,
#textResult2,
#TXTresult2 {
appearance: none;
width: 80%;
height: 63%;
position: relative;
margin: 8% 10%;
padding: 6% 10%;
border: none;
}
#BGresult-wrap,
#textResult-wrap,
#TXTresult-wrap,
#BGresultWrap,
#TXTresultWrap {
appearance: none;
position: relative;
margin: 12px auto;
background-color: var(--modeBGcolor, #a0a0a0);
border: 2px solid var(--modeBorderColor, #804);
border-color: var(--modeBorderLo, #111)
var(--modeBorderHi, #eee)
var(--modeBorderHi, #eee)
var(--modeBorderLo, #111);
}
.queryClear {
display: none;
font-size: 1em;
}
#demoArea {
position: relative;
max-width: 840px;
width: 96vw;
margin: 16px auto;
margin: 24px auto;
padding: 8px 16px;
font-weight: 500;
color: var(--modeTextColor, #00a);
}
#demoArea p {
font-size: 18.7px;
font-weight: 500;
}
.textBox {
width: 80vw;
max-width: 500px;
margin: 0 1em 1em;
padding: 0 1em 0 0;
}
.gammaOverflow {
overflow: scroll;
margin: 2.5em auto;
padding: 0.5em 32px;
min-width: 500px;
max-width: 749px;
color: var(--modeTextColor, #000);
background-color: var(--modeBGcolor, #777);
font-size: 18px;
font-weight: bold;
border: 8px solid var(--modeBorderColor, #000);
}
.gammaContainer {
padding: 2em 1em;
background-color: var(--modeBGcolor, #808080);
}
/* ******** "Levels" See Score for current ******************************** */
.levelsLegendTitle {
margin: 24px auto 0;
padding: 8px;
text-align: center;
font-size: 1.1em;
font-weight: 500;
}
.levelsLegend {
box-sizing: border-box;
display: inline-block;
height: 120px;
padding: 16px 12px;
background-color: var(--modeBGcolor, #bcd);
}
.level4,
.level3,
.level2,
.level1,
.level0 {
box-sizing: border-box;
height: 36px;
margin: 8px 8px 0;
padding: 4px 12px;
font-family: Montserrat, Helvetica, Arial, sans-serif;
font-family: Barlow, Kanit, Poppins, sans-serif;
font-size: 20px;
opacity: 1;
}
.level1,
.level0 {
color: var(--modeTextColor, #fff);
background-color: var(--modeBGcolor, #d00);
font-weight: 700;
}
.level2 {
color: var(--modeTextColor, #fff8e0);
background-color: var(--modeBGcolor, #f60);
font-weight: 700;
}
.level3 {
color: var(--modeTextColor, #800);
background-color: var(--modeBGcolor, #fd1);
font-weight: 600;
}
.level4 {
color: var(--modeTextColor, #070);
background-color: var(--modeBGcolor, #cfe);
font-weight: 500;
}
/* ******** UNUSED OBJECT STYLING ***************************************** */
.objectModel2 {
position: relative;
z-index: 2;
padding: 2em;
max-width: 94vw;
margin: 1em auto;
background-color: var(--modeBGcolor, #060);
background-image: url("/images/textures/woodA.jpg");
background-size: cover;
border: 0.3em solid var(--modeBorderColor, #440);
/* border-color: #932 #a95555 #a34242 #932; */
}
.objectModel2::before {
content: "";
position: absolute;
/* specify the value of border width here */
top: 1.5em;
right: 1.5em;
bottom: 1.5em;
left: 1.5em;
/* --- */
box-sizing: border-box;
z-index: -1;
background-color: var(--modeBGcolor, #5c9);
}
/* ********* TRENDY FRAMED AREA IN CSS —— SAPC INTERFACE *********** */
.objectModel {
width: 100vw;
max-width: 840px;
min-height: 420px;
position: relative;
z-index: 2;
padding: 2em 2.2em 1.2em;
margin: 0 auto 1em;
background-color: var(--modeBGcolor, #62a);
border: 0.1em solid var(--modeBorderColor, #60c);
/* background-image: url('/images/textures/woodA.jpg');
background-size: cover;
border-color: #932 #a95555 #a34242 #932; */
}
.objectModel::before {
content: "";
position: absolute;
/* specify the value of border width here */
top: 1em;
right: 1em;
bottom: 1em;
left: 1em;
/* --- */
box-sizing: border-box;
z-index: -1;
background-color: var(--modeBGcolor, #e2e2aa);
}
.objectModel .railing,
.objectModel::after {
content: "";
margin: -0.87em;
position: absolute;
top: 1em;
right: 1em;
bottom: 1em;
left: 1em;
z-index: -2;
padding: 0em;
border: none;
}
/* ******* SAPC INTERFACE SAMPLE (Click To Swap) ************************* */
#ampSamp {
position: relative;
margin: 8px auto 16px;
padding: 0;
font-size: 84px;
font-weight: 700;
text-align: center;
line-height: 1;
white-space: nowrap;
overflow: hidden;
font-family: "Playfair Display", serif;
border: 6px solid var(--modeBorderColor, #777);
cursor: pointer;
}
.montFont1 {
margin: 0 0 -12px;
padding: 0 0;
font-family: Montserrat, Helvetica, Arial, sans-serif;
font-size: 22px;
font-weight: 100;
}
.montFont2 {
margin: 0 0 -12px;
padding: 0 0;
font-family: Montserrat, Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: 200;
}
.montFont,
.montFont3 {
margin: 0 0 -12px;
padding: 10px 0 0;
font-family: Montserrat, Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: 300;
}
.montFont3 {
margin: 0;
}
.montFont4 {
margin: 0;
padding: 0;
font-family: Montserrat, Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
}
.helvetiFont {
margin: 0 0;
padding: 0 0 8px;
font-family: Montserrat, Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 700;
}
/* ***** Special Responsive H1 Setup ***** */
.h1Query,
section .h1Query,
.h2Query,
section .h2Query,
.h3Query,
section .h3Query {
text-align: left;
color: var(--modeTextColor, #60a);
}
.h2Query,
section .h2Query {
color: var(--modeTextColor, #60a);
}
section .h1Query + .h2Query,
section .h2Query + .h3Query,
section .h1Query + .h3Query {
margin-top: 0;
}
/* ***** Special sup adjusts for Lc ***** */
.contrastResult sup,
.contrastResult2 sup,
#contrastResultTable sup {
position: relative;
top: 0.15em;
margin: 0 0 -0.15em -0.25em;
font-size: 0.65em;
}
.APCAtable sup,
.Lc sup,
#sansSamples .Lc sup,
#serifSamples .Lc sup {
position: relative;
margin: 0 0 0 -0.15em;
font-size: 0.75em;
font-weight: 700;
}
.APCAtable sup sup,
.Lc sup sup,
#sansSamples .Lc sup sup,
#serifSamples .Lc sup sup {
position: relative;
top: 0.15em;
margin: 0 0 -0.15em -0.25em;
font-size: 0.85em;
}
#buttonSpecial {
height: 96px;
position: relative;
bottom: 12px;
padding: 12px;
color: inherit;
font: inherit;
font-size: 0.5em;
background-color: var(--modeBGcolor, #808080);
border: 16px solid var(--modeBorderColor, #f00);
}
#buttonSpecial:active {
color: var(--modeTextColor, #fff);
background-color: var(--modeBGcolor, #f00);
}
.deltaGamma {
position: relative;
font-family: BaskervilleMTPro, Didot, Georgia, Baskerville, serif;
font-size: 5em;
color: var(--modeTextColor, #30a);
}
/* From Index */
.codeBlock2 code {
margin: 0;
padding: 0;
font-family: "Inconsolata", Courier, Menlo, monospace;
}
.codeBlock2 {
width: 390px;
margin: 4px 16px;
padding: 8px 12px;
white-space: nowrap;
overflow: hidden;
font-family: "Inconsolata", Courier, Menlo, monospace;
font-size: 21px;
color: var(--modeTextCode, #009);
background-color: var(--modeBGcode, #7fb);
border: 1px solid var(--modeBorderCode, #008);
}
.codeBlock2 code b {
font-weight: 900;
}
.codeBlock2 code {
font-weight: 500;
}
#ampSamp,
#ampSamp2,
.ampSample {
box-sizing: border-box;
position: relative;
width: 180px;
margin: 0 auto;
padding: 0;
border: 8px solid var(--modeBorderColor, #777);
}
#ampSamp2,
.ampSample {
display: inline-block;
width: 540px;
margin: 24px auto 2px;
padding: 16px;
font-family: "playfair display", serif;
border: 12px solid var(--modeBorderColor, #777);
}
.ampSample {
width: 100px;
top: 18px;
margin: 2px 12px 2px 0;
padding: 8px 0 0;
font-family: "playfair display", serif;
border: none;
}
.ampSampSmall {
position: relative;
width: 2em;
top: 0.15em;
font-size: 1.6em;
font-family: "playfair display", serif;
}
#resultTable input {
/* box-sizing: border-box; */
appearance: none;
position: relative;
margin: 0;
padding: 1px;
text-align: center;
font-size: 4px;
font-weight: 400;
color: var(--modeTextColor, #444);
background-color: var(--modeBGcolor, #f00);
border: none;
}
#URLresult {border-radius: 12px;}
.inputLeft {
position: relative;
float: left;
}
.inputRight {
position: relative;
float: right;
}
a:link {
color: var(--modeAlink, #006);
text-decoration: underline;
font-weight: inherit;
}
a:visited {
color: var(--modeAvisited, #408);
text-decoration: none;
font-weight: inherit;
}
a:hover {
color: var(--modeAhover, #54c);
text-decoration: none;
}
a:visited:hover {
color: var(--modeAvisitedhover, #73b);
text-decoration: none;
font-weight: inherit;
}
a:active {
position: relative;
top: 0.1em;
color: var(--modeAaction, #8ad);
text-decoration: none;
font-weight: inherit;
}
footer a:link,
footer a:hover,
footer a:visited,
footer a:visited:hover { color: var(--modeFooterA, #ec4); }
.onWhiteSpace {
margin: 12px 120px 6px;
padding: 0 12px;
font-size: 18.7px;
font-weight: 500;
}
/* simple mode *//* simple mode *//* simple mode */
/* simple mode *//* simple mode *//* simple mode */
#fluentText th,
#softText th,
#spotText th,
#nonText th,
#fluentText,
#softText,
#spotText,
#nonText {
display: none;
visibility: hidden;
}
#weight1,
#weight8,
#weight9 {
display: none;
visibility: hidden;
}
th.scoreHeader {
font-weight: 600;
}
.weightWord {
display: inline-block;
font-size: 0.7em;
baseline-shift: 0.2em;
font-weight: inherit;
}
.weightWord::before {content: "("}
.weightWord::after {content: ")"}
/* These must be after the inputs */
#BGresult,
#textResult,
#TXTresult,
#BGresult2,
#textResult2,
#TXTresult2 {
appearance: none;
position: relative;
top: 1px;
width: 100px;
height: 24px;
padding: 1px;
border: none;
}
#BGresultWrap,
#TXTresultWrap {
appearance: none;
position: relative;
margin: 6px 12px;
padding: 2px;
width: 120px;
height: 36px;
border: none;
background-color: var(--modeBGcolor, #a0a0a0);
}
.setColor,
div.setColor,
span.setColor,
p.setColor,
div .setColor,
div div.setColor,
div span.setColor,
div p.setColor {
color: var(--textColor, #123);
}
.setColorFlip,
div.setColorFlip,
span.setColorFlip,
p.setColorFlip,
div .setColorFlip,
div div.setColorFlip,
div span.setColorFlip,
div p.setColorFlip {
color: var(--bgColor, #bad);
}
.setBGcolor,
div.setBGcolor,
span.setBGcolor,
p.setBGcolor,
div .setBGcolor,
div div.setBGcolor,
div span.setBGcolor,
div p.setBGcolor {
background-color: var(--bgColor, #bad);
}
.setBGcolorFlip,
div.setBGcolorFlip,
span.setBGcolorFlip,
p.setBGcolorFlip,
div .setBGcolorFlip,
div div.setBGcolorFlip,
div span.setBGcolorFlip,
div p.setBGcolorFlip {
background-color: var(--textColor, #123);
}
.g4gVal35, .g4gVal40, .g4gVal50, .g4gVal55,
.g4gVal65, .g4gVal70, .g4gVal80, .g4gVal85,
.g4gVal95, .g4gVal100 {
color: var(--modeTextColor, #62b);
background-color: var(--modeBGcolor, #dff8);
}
.g4gVal35,
.g4gVal40 {
color: var(--modeTextColor, #84a);
background-color: var(--modeBGcolor, #eec5);
}
.bodyText,
td.bodyText2 {
position: relative;
color: var(--modeTextColor, #308);
background-color: var(--modeBGcolor, #dff8);
}
.bodyText::after {
position: relative;
top: -10px;
content: "B";
font-size: 0.6em;
}
td.bodyText,
td.bodyText2 {
border: 4px solid var(--modeBorderColor, #0bb8);
}
.ptText::after {
position: relative;
top: 0px;
content: "pt";
font-size: 0.65em;
}
.pxText::after {
position: relative;
top: 0px;
content: "px";
font-size: 0.6em;
}
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { display: none; }
details[open] details { display: none; }
details summary { cursor: pointer; list-style: none; }
details summary > svg { display: inline; }
section details summary .h1Query,
section details summary .h2Query,
section details summary .h3Query {
margin-left: 36px;
text-decoration: none;
transition: text-shadow 0.4s, text-decoration 0.4s;
}
details summary .largerHeader {
font-size: 2em;
font-weight: 500;
}
section details summary:hover .h1Query,
section details[open] summary:hover .h1Query,
section details summary:hover .h2Query,
section details[open] summary:hover .h2Query,
section details summary:hover .h3Query,
section details[open] summary:hover .h3Query {
text-decoration: underline;
transition: text-shadow 0.25s, text-decoration 0.4s;
}
section details[open] summary .h1Query,
section details[open] summary .h2Query,
section details[open] summary .h3Query {
text-decoration: none;
transition: text-shadow 0.4s, text-decoration 0.4s;
}
details .summaryTitle {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
details summary:focus {
outline: none;
}
details summary:hover .twistUp svg {
transform: rotate(-90deg);
opacity: 1;
transition: opacity 0.7s, transform 0.4s;
}
details[open] summary:hover .twistUp svg {
transform: rotate(0deg);
opacity: 1;
transition: opacity 0.7s, transform 0.4s;
}
details .twistUp svg {
position: absolute;
display: inline;
opacity: 0.5;
transform: rotate(-90deg);
transition: opacity 0.7s, transform 0.4s;
}
details[open] .twistUp svg {
transform: rotate(0deg);
opacity: 0.82;
transition: opacity 1s, transform 0.4s;
}
/* ************************************************************************** */
/* ***** Alignments and clear fix etc. ********************************** */
/* ************************************************************************** */
.centered {
position: relative;
text-align: center;
margin-right: auto;
margin-left: auto;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
article h1, article h2, article h3,
article h1 a, article h2 a, article h3 a { text-align: center; }
.left,
.leftCol {
text-align: left;
float: left;
background-position: left;
background-size: contain;
background-repeat: no-repeat;
}
.right,
.rightCol {
text-align: left;
float: right;
background-position: right;
background-size: contain;
background-repeat: no-repeat;
}
.leftCol, .rightCol { position: Relative; height: 100%; }
.leftText { text-align: left; }
.rightText { text-align: right; }
/* ************************************************************************** */
/* ************************************************************************** */
/**
* CLEARFIX 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 are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
/* ************************************************************************** */
/* ************************************************************************** */
.clrf:before, .clear:before, .clearfix:before,
.clrf:after, .clear:after, .clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clrf:after,
.clear:after,
.clearfix:after { clear: both; }
/* ** For IE 6/7 only
Include this rule to trigger hasLayout and contain floats.
** */
.clrf, .clear, .clearfix { *zoom: 1; }
/* ************************************************************************** */
/* ************************************************************************** */
/* ************** ********************* */
/* ************** T I N Y T R I M ********************* */
/* ************** ********************* */
/* ************************************************************************** */
/* ************** ********************* */
/* ************** TRIM CLASSES — Myndex TinyTrim™ ********************* */
/* ************** Version 0.0.85 Nov 2021 ********************* */
/* ************** By Andrew Somers ********************* */
/* ************** Copyright © 2019-2021 By Myndex.com ********************* */
/* ************** All Rights Reserved ********************* */
/* ************** ********************* */
/* ************** Free for non-commercial use ********************* */
/* ************** under the AGPL v03 license ********************* */
/* ************** ********************* */
/* ************************************************************************** */
/* ************************************************************************** */
/* ************************************************************ */
/* ********************************* */
/* **************** REFERENCE GUIDE **************** */
/* ********************************* */
/* ************************************************************ */
/*
TinyTrim is a set of classes that can be easily remembered, but use only
a few characters for the class names. This makes it easy when prototyping
of adjusting existing CSS. For instance, the following:
.myClass {
position: relative;
margin: 0;
padding: 1em;
font-size: 20px;
color: red;
background-color:
}
****** ****** FIRST LETTER: ****** ******
****** a '0' indicates a number is required *******
.a .un all:
.al align, alias for text-align (ta)
.d .ds display: (see display section)
.fl float
.c .cl clear
.w0 width
.h0 height
///// Not implemented yet
.mnw0 min-width
.mnh0 min-height
.mxw0 max-width
.mxh0 max-height
/////////////////////////
.m0 margin
.ma0 margin set vertical numeric and auto for horizontal
.mt0 .mr0 .mb0 .ml0 top right bottom left
.p0 padding
.pt0 .pr0 .pb0 .pl0 top right bottom left
.po position settings (abs, rel etc)
.po0 position adjust
.pot0 .por0 .pob0 .pol0 top right bottom left
.z0 z-index
.b0 border
//// NOT IMPLEMENTED: .bt0 .br0 .bb0 .bl0 top right bottom left border ////
.br0 border radius
.f font
.ff font-family
.fs0 font-size (.fs no numeric is font style)
.fw0 font-weight
.ft or .fs font-style
.fd or .td text-decoration (font decoration is an alias) aka underline
.bs box-shadow
.bsi inset box-shadow
.ts text-shadow
.tt text-transform
.t or .ta text-align
.tl text-align-last
.ti text-indent
.v visibility or vertical align
.va vertical align for initial, inherit, others as alias
.ws white-space
.o overflow
.to text overflow
****** ****** 2ND/3RD LETTER: ****** ******
****** depends on context, all contexts shown together ******
i initial
h inherit
a auto, absolute
o oblique
it italic
No Letter: normal
b both, bold
b (when after numbers): bottom
br bolder
lr lighter
l light, lowercase, length
l (when after numbers): left
r relative
r (when after numbers): right
j justify (.tj, .taj, .tlj)
c center, capitalize, clip
s scroll, string, start
e end
t top (when after numbers)
xt text-top
m middle
b bottom (when after numbers)
xb text-bottom
p pre
pl pre-line
pw pre-wrap
bl baseline
n none, hidden, nowrap
h hidden, also hid and hi
v visible also vis
u unset or uppercase
NO 2ND/3RD LETTER: 'normal'
LAST LETTER, AFTER NUMBERS
r rem
p percentage
x px
t pt
v vh or vw
nothing: em or unitless
************ */
/* ****** CURRENT CONFLICT ISSUES ******
NONE KNOWN
*/
/* **** TO DO ****
Add vmin vw and vh for certain properties
max-width: none|length|initial|inherit;
min-width: length|initial|inherit;
max-height: none|length|initial|inherit;
min-height: length|initial|inherit;
cursor: value;
*/
/* ***** SUGGESTED CSS BLOCK ORDER EXAMPLE ***** */
/*
Essentially, this comes down to:
{ object (size/position) -> text properties -> appearance (color, BG, borders) }
.selector {
display
position *type* (relative, absolute etc)
container sizing (width/height)
floats & clears
margins
paddings
moves (top, bottom, etc)
font-family
font-size,weight,style,decoration
letter-spacing & line-height
text alignment, whitespace
overflow, other text related properties
color
background
borders/outlines **
text-shadow
box-shadow
opacity (total container, notwithstanding other transparencies)
}
** borders go near the end of the stack when "border-box" is being used, but if
border-box is not being used, then borders should be in the first group near
container size.
We assume that the following is at the top of the first style sheet:
* {box-sizing: border-box}
*/
/* ********************************************** */
/* ********************************************** */
/* ******** CLASSES ******** */
/* ********************************************** */
/* ********************************************** */
/* ********************************************** */
/* ******** SETUPS ******** */
/* ********************************************** */
/* ** UNSETS ** */
.ai, .uni {all: initial}
.ah, .unh {all: inherit}
.au, .uns {all: unset}
/* ** VERY BASIC RESET ** */
/* This is a slightly opinionated set of defaults for the head of the sheet */
/* <- remove this line to activate this reset ->
* { box-sizing: border-box; }
body {
min-height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
font-family: Verdana, sans-serif;
font-size: 1rem;
font-weight: normal;
font-style: normal;
line-height: 1.35;
color: #000;
background: none;
background-color: #e4e4e4;
border: none;
}
main, header, footer {
display: block;
margin: 0;
padding: 0;
background: none;
border: none;
}
article, section, aside {
position: relative;
margin: 0.5rem;
padding: 1rem;
font-size: 1rem;
line-height: 1.35;
border: none;
}
p, ul, ol, li, div, span,
h1,h2,h3,h4,h5,h6 {
position: relative;
margin: 0.25rem 0 0.5rem;
padding: 0;
font-size: 1rem;
text-align: left;
line-height: 1.35;
border: none;
}
h1,h2,h3,h4,h5,h6 { margin: 0.75em 0 0.33em; }
button, input, optgroup, select, textarea {
position: relative;
margin: 0;
font: inherit;
}
pre, code, kbd, samp {
position: relative;
font-family: monospace, monospace;
font-size: 1em;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
img { display: block; position: relative; }
b, strong { font-weight: bolder; }
/* ** END OF BASIC RESET ** */
/* ********************************************** */
/* ******** DISPLAY and VISIBILITY ******** */
/* ********************************************** */
/* ** DISPLAY GUIDE ********
General guidelines
.d or .ds display
b block
c content, cell (tc), or container (ruby)
f flow
fr flow-root
fx flex
g grid or group
i inline
ib inline-block
ih inherit
it initial
l list-item
m column
n, no = none
p caption
r ruby or row or run-in
rb ruby base
rt ruby text
ry ruby
************ */
/* ** ds global values ** */
.dsi {display: initial}
.dsh {display: inherit}
.dsu {display: unset}
/* ** d display-box values ** */
.dc {display: contents}
.dn, body .dn, body main .dn,
body main div.dn, body main div .dn { display: none }
/* dn specificity added to help provide override */
/* ** d display-outside values ** */
.db, body .db, body main .db,
body main div.db, body main div .db {display: block}
/* db specificity added to help provide override */
.di {display: inline}
.dr {display: run-in}
/* ** d display-legacy values ** */
.dib, body .dib, body main .dib,
body main div.dib, body main div .dib {display: inline-block}
/* dib specificity added to help provide override */
.dif {display: inline-flex}
.dig {display: inline-grid}
.dit {display: inline-table}
/* ** d display-inside values ** */
.df {display: flow}
.dfr {display: flow-root}
.dt {display: table}
.dfx {display: flex}
.dg {display: grid}
.dry {display: ruby}
/* ** ds display-outside plus display-inside values ** */
.dsbf {display: block flow}
.dsit {display: inline table}
.dfxr {display: flex run-in}
/* ** dl display-list-item values ** */
.dl {display: list-item}
.dlb {display: list-item block}
.dli {display: list-item inline}
.dlf {display: list-item flow}
.dlfr {display: list-item flow-root}
.dlbf {display: list-item block flow}
.dlbfr {display: list-item block flow-root}
.dflb {display: flow list-item block}
/* ** dt display-internal values ** */
.dtrg {display: table-row-group}
.dthg {display: table-header-group}
.dtfg {display: table-footer-group}
.dtr {display: table-row}
.dtc {display: table-cell}
.dtmg {display: table-column-group}
.dtm {display: table-column}
.dtp {display: table-caption}
.drb {display: ruby-base}
.drt {display: ruby-text}
.drbc {display: ruby-base-container}
.drtc {display: ruby-text-container}
/* ** VISIBILITY ** */
.vi {visibility: initial}
.vh {visibility: inherit}
.vv, .vis, .vvis {visibility: visible}
.vn, .vd, .vhid {visibility: hidden}
.vc {visibility: collapse}
/* ** OVERFLOW AND WRAP ** */
.oi {overflow: initial}
.oh {overflow: inherit}
.oa {overflow: auto}
.ou {overflow: unset}
.ov, .ovis {overflow: visible}
.on, .od, .ohid {overflow: hidden}
.oc {overflow: clip}
.os {overflow: scroll}
.toi {text-overflow: initial}
.toh {text-overflow: inherit}
.toc {text-overflow: clip}
.toe {text-overflow: ellipsis}
.wsi {white-space: initial}
.wsh {white-space: inherit}
.ws {white-space: normal}
.wsn {white-space: nowrap}
.wsp {white-space: pre}
.wspl {white-space: pre-line}
.wspw {white-space: pre-wrap}
/* ********************************************** */
/* ************* SPECIALS **************** */
/* ********************************************** */
.aa {
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
/*font-smooth: auto;*/
}
/* The below should NOT be used on readable text!! */
.aaa {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/*font-smooth: always;*/
}
.aasp {
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
/*font-smooth: always;*/
}
/* ************************************** */
/* ******** ELEMENT SIZE ********* */
/* ************************************** */
.mnw100 {min-width:100%}
.mnh100 {min-height:100%}
.mxw100 {max-width:100%}
.mxh100 {max-height:100%}
/* ** sizes ** */
/* ** w width ** */
.wi {width: initial}
.wh {width: inherit}
.wa {width: auto}
.wu {width: unset}
/* ** w_p width in px ** */
.w1x {width: 10px}
.w2x {width: 20px}
.w3x {width: 30px}
.w4x {width: 40px}
.w5x {width: 50px}
.w6x {width: 60px}
.w7x {width: 70px}
.w8x {width: 80px}
.w9x {width: 90px}
.w10x {width: 100px}
.w11x {width: 110px}
.w12x {width: 120px}
.w13x {width: 130px}
.w14x {width: 140px}
.w15x {width: 150px}
.w16x {width: 160px}
.w17x {width: 170px}
.w18x {width: 180px}
.w19x {width: 190px}
.w20x {width: 200px}
.w21x {width: 210px}
.w22x {width: 220px}
.w23x {width: 230px}
.w24x {width: 240px}
.w25x {width: 250px}
.w30x {width: 300px}
.w35x {width: 350px}
.w40x {width: 400px}
.w45x {width: 450px}
.w50x {width: 500px}
.w55x {width: 550px}
.w60x {width: 600px}
.w65x {width: 650px}
.w70x {width: 700px}
/* ** w width as percentage ** */
.w05p {width: 5%}
.w10p {width: 10%}
.w15p {width: 15%}
.w20p {width: 20%}
.w25p {width: 25%}
.w30p {width: 30%}
.w35p {width: 35%}
.w40p {width: 40%}
.w45p {width: 45%}
.w50p {width: 50%}
.w55p {width: 55%}
.w60p {width: 60%}
.w65p {width: 65%}
.w70p {width: 70%}
.w75p {width: 75%}
.w80p {width: 80%}
.w85p {width: 85%}
.w90p {width: 90%}
.w95p {width: 95%}
.w100p {width: 100%}
.w105p {width: 105%}
.w110p {width: 110%}
.w115p {width: 115%}
.w120p {width: 120%}
/* ** w width in vw ** */
.w05v {width: 5vw}
.w10v {width: 10vw}
.w15v {width: 15vw}
.w20v {width: 20vw}
.w25v {width: 25vw}
.w30v {width: 30vw}
.w35v {width: 35vw}
.w40v {width: 40vw}
.w45v {width: 45vw}
.w50v {width: 50vw}
.w55v {width: 55vw}
.w60v {width: 60vw}
.w65v {width: 65vw}
.w70v {width: 70vw}
.w75v {width: 75vw}
.w80v {width: 80vw}
.w85v {width: 85vw}
.w90v {width: 90vw}
.w95v {width: 95vw}
.w100v {width: 100vw}
/* ** h height ** */
.hi {height: initial}
.hh {height: inherit}
.ha {height: auto}
.hu {height: unset}
/* ** h_p height as px ** */
.h1x {height: 10px}
.h2x {height: 20px}
.h3x {height: 30px}
.h4x {height: 40px}
.h5x {height: 50px}
.h6x {height: 60px}
.h7x {height: 70px}
.h8x {height: 80px}
.h9x {height: 90px}
.h10x {height: 100px}
.h11x {height: 110px}
.h12x {height: 120px}
.h13x {height: 130px}
.h14x {height: 140px}
.h15x {height: 150px}
.h16x {height: 160px}
.h17x {height: 170px}
.h18x {height: 180px}
.h19x {height: 190px}
.h20x {height: 200px}
.h21x {height: 210px}
.h22x {height: 220px}
.h23x {height: 230px}
.h24x {height: 240px}
.h25x {height: 250px}
.h30x {height: 300px}
.h35x {height: 350px}
.h40x {height: 400px}
.h45x {height: 450px}
.h50x {height: 500px}
.h55x {height: 550px}
.h60x {height: 600px}
.h65x {height: 650px}
.h70x {height: 700px}
/* ** h height as percentage ** */
.h05p {height: 5%}
.h10p {height: 10%}
.h15p {height: 15%}
.h20p {height: 20%}
.h25p {height: 25%}
.h30p {height: 30%}
.h35p {height: 35%}
.h40p {height: 40%}
.h45p {height: 45%}
.h50p {height: 50%}
.h55p {height: 55%}
.h60p {height: 60%}
.h65p {height: 65%}
.h70p {height: 70%}
.h75p {height: 75%}
.h80p {height: 80%}
.h85p {height: 85%}
.h90p {height: 90%}
.h95p {height: 95%}
.h100p {height: 100%}
.h105p {height: 105%}
.h110p {height: 110%}
.h115p {height: 115%}
.h120p {height: 120%}
/* ** h height in vh ** */
.h05v {height: 05vh}
.h10v {height: 10vh}
.h15v {height: 15vh}
.h20v {height: 20vh}
.h25v {height: 25vh}
.h30v {height: 30vh}
.h35v {height: 35vh}
.h40v {height: 40vh}
.h45v {height: 45vh}
.h50v {height: 50vh}
.h55v {height: 55vh}
.h60v {height: 60vh}
.h65v {height: 65vh}
.h70v {height: 70vh}
.h75v {height: 75vh}
.h80v {height: 80vh}
.h85v {height: 85vh}
.h90v {height: 90vh}
.h95v {height: 95vh}
.h100v {height: 100vh}
/* ************************************** */
/* ******** POSITION ********** */
/* ************************************** */
/* ** positions .po ( .pa, .pr, conflict with padding) ** */
.pi, .poi {position: initial}
.ph, .poh {position: inherit}
.psc, .posc {position: static}
.por, body .por, body main .por,
body main div.por, body main div .por
{position: relative} /* specificity added to help provide override */
.poa {position: absolute}
.psy, .posy {position: -webkit-sticky; position: sticky}
.pf, .pof {position: fixed}
/* ** fl floats ** */
.fli {float: initial}
.flh {float: inherit}
.fln {float: none}
.fll {float: left}
.flr {float: right}
/* ** c clears ** */
.cli {clear: initial}
.clh {clear: inherit}
.cln {clear: none}
.cll {clear: left}
.clr {clear: right}
.clb {clear: both}
/* clf - clear fix for modern browsers, see also as setup earlier as .clrf */
/* Usage: */
.clf:before, .clf:after
{
content: " "; /* 1 */
display: table; /* 2 */
}
.clf:after {clear: both}
/* ** For IE 6/7 only
Include this rule to trigger hasLayout and contain floats.
** */
.clf {*zoom: 1}
/* ************************************** */
/* ****** MARGINS and PADDING ****** */
/* ************************************** */
/* ** m margins ** */
.mi {margin: initial}
.mh {margin: inherit}
.ma {margin: auto}
.m, .m0, .m00 {margin: 0}
.m01 {margin: 0.1em}
.m02 {margin: 0.2em}
.m03 {margin: 0.3em}
.m04 {margin: 0.4em}
.m05 {margin: 0.5em}
.m06 {margin: 0.6em}
.m07 {margin: 0.7em}
.m08 {margin: 0.8em}
.m09 {margin: 0.9em}
.m10 {margin: 1.0em}
.m11 {margin: 1.1em}
.m12 {margin: 1.2em}
.m13 {margin: 1.3em}
.m14 {margin: 1.4em}
.m15 {margin: 1.5em}
.m16 {margin: 1.6em}
.m17 {margin: 1.7em}
.m18 {margin: 1.8em}
.m19 {margin: 1.9em}
.m20 {margin: 2.0em}
.m21 {margin: 2.1em}
.m22 {margin: 2.2em}
.m23 {margin: 2.3em}
.m24 {margin: 2.4em}
.m25 {margin: 2.5em}
/* ** ma define v margin, h margin auto ** */
/* ** use with position: relative; to center an element ** */
.ma0, .ma00 {margin: 0 auto}
.ma01 {margin: 0.1em auto}
.ma02 {margin: 0.2em auto}
.ma03 {margin: 0.3em auto}
.ma04 {margin: 0.4em auto}
.ma05 {margin: 0.5em auto}
.ma06 {margin: 0.6em auto}
.ma07 {margin: 0.7em auto}
.ma08 {margin: 0.8em auto}
.ma09 {margin: 0.9em auto}
.ma10 {margin: 1.0em auto}
.ma11 {margin: 1.1em auto}
.ma12 {margin: 1.2em auto}
.ma13 {margin: 1.3em auto}
.ma14 {margin: 1.4em auto}
.ma15 {margin: 1.5em auto}
.ma16 {margin: 1.6em auto}
.ma17 {margin: 1.7em auto}
.ma18 {margin: 1.8em auto}
.ma19 {margin: 1.9em auto}
.ma20 {margin: 2.0em auto}
.ma21 {margin: 2.1em auto}
.ma22 {margin: 2.2em auto}
.ma23 {margin: 2.3em auto}
.ma24 {margin: 2.4em auto}
.ma25 {margin: 2.5em auto}
/* ** mt margin top ** */
.mt, .mt0, .mt00 {margin-top: 0}
.mt01 {margin-top: 0.1em}
.mt02 {margin-top: 0.2em}
.mt03 {margin-top: 0.3em}
.mt04 {margin-top: 0.4em}
.mt05 {margin-top: 0.5em}
.mt06 {margin-top: 0.6em}
.mt07 {margin-top: 0.7em}
.mt08 {margin-top: 0.8em}
.mt09 {margin-top: 0.9em}
.mt10 {margin-top: 1.0em}
.mt11 {margin-top: 1.1em}
.mt12 {margin-top: 1.2em}
.mt13 {margin-top: 1.3em}
.mt14 {margin-top: 1.4em}
.mt15 {margin-top: 1.5em}
.mt16 {margin-top: 1.6em}
.mt17 {margin-top: 1.7em}
.mt18 {margin-top: 1.8em}
.mt19 {margin-top: 1.9em}
.mt20 {margin-top: 2.0em}
.mt21 {margin-top: 2.1em}
.mt22 {margin-top: 2.2em}
.mt23 {margin-top: 2.3em}
.mt24 {margin-top: 2.4em}
.mt25 {margin-top: 2.5em}
/* ** mr margin right ** */
.mr, .mr0, .mr00 {margin-right: 0}
.mr01 {margin-right: 0.1em}
.mr02 {margin-right: 0.2em}
.mr03 {margin-right: 0.3em}
.mr04 {margin-right: 0.4em}
.mr05 {margin-right: 0.5em}
.mr06 {margin-right: 0.6em}
.mr07 {margin-right: 0.7em}
.mr08 {margin-right: 0.8em}
.mr09 {margin-right: 0.9em}
.mr10 {margin-right: 1.0em}
.mr11 {margin-right: 1.1em}
.mr12 {margin-right: 1.2em}
.mr13 {margin-right: 1.3em}
.mr14 {margin-right: 1.4em}
.mr15 {margin-right: 1.5em}
.mr16 {margin-right: 1.6em}
.mr17 {margin-right: 1.7em}
.mr18 {margin-right: 1.8em}
.mr19 {margin-right: 1.9em}
.mr20 {margin-right: 2.0em}
.mr21 {margin-right: 2.1em}
.mr22 {margin-right: 2.2em}
.mr23 {margin-right: 2.3em}
.mr24 {margin-right: 2.4em}
.mr25 {margin-right: 2.5em}
/* ** mb margin bottom ** */
.mb, .mb0, .mb00 {margin-bottom: 0}
.mb01 {margin-bottom: 0.1em}
.mb02 {margin-bottom: 0.2em}
.mb03 {margin-bottom: 0.3em}
.mb04 {margin-bottom: 0.4em}
.mb05 {margin-bottom: 0.5em}
.mb06 {margin-bottom: 0.6em}
.mb07 {margin-bottom: 0.7em}
.mb08 {margin-bottom: 0.8em}
.mb09 {margin-bottom: 0.9em}
.mb10 {margin-bottom: 1.0em}
.mb11 {margin-bottom: 1.1em}
.mb12 {margin-bottom: 1.2em}
.mb13 {margin-bottom: 1.3em}
.mb14 {margin-bottom: 1.4em}
.mb15 {margin-bottom: 1.5em}
.mb16 {margin-bottom: 1.6em}
.mb17 {margin-bottom: 1.7em}
.mb18 {margin-bottom: 1.8em}
.mb19 {margin-bottom: 1.9em}
.mb20 {margin-bottom: 2.0em}
.mb21 {margin-bottom: 2.1em}
.mb22 {margin-bottom: 2.2em}
.mb23 {margin-bottom: 2.3em}
.mb24 {margin-bottom: 2.4em}
.mb25 {margin-bottom: 2.5em}
/* ** ml margin left ** */
.ml, .ml0, .ml00 {margin-left: 0}
.ml01 {margin-left: 0.1em}
.ml02 {margin-left: 0.2em}
.ml03 {margin-left: 0.3em}
.ml04 {margin-left: 0.4em}
.ml05 {margin-left: 0.5em}
.ml06 {margin-left: 0.6em}
.ml07 {margin-left: 0.7em}
.ml08 {margin-left: 0.8em}
.ml09 {margin-left: 0.9em}
.ml10 {margin-left: 1.0em}
.ml11 {margin-left: 1.1em}
.ml12 {margin-left: 1.2em}
.ml13 {margin-left: 1.3em}
.ml14 {margin-left: 1.4em}
.ml15 {margin-left: 1.5em}
.ml16 {margin-left: 1.6em}
.ml17 {margin-left: 1.7em}
.ml18 {margin-left: 1.8em}
.ml19 {margin-left: 1.9em}
.ml20 {margin-left: 2.0em}
.ml21 {margin-left: 2.1em}
.ml22 {margin-left: 2.2em}
.ml23 {margin-left: 2.3em}
.ml24 {margin-left: 2.4em}
.ml25 {margin-left: 2.5em}
/* ************************************** */
/* ******** PADDING ******** */
/* ************************************** */
/* ** p padding ** */
.pi {padding: initial}
.ph {padding: inherit}
.p, .pa, .p0, .pa0, .p00, .pa00 {padding: 0}
.p01, .pa01 {padding: 0.1em}
.p02, .pa02 {padding: 0.2em}
.p03, .pa03 {padding: 0.3em}
.p04, .pa04 {padding: 0.4em}
.p05, .pa05 {padding: 0.5em}
.p06, .pa06 {padding: 0.6em}
.p07, .pa07 {padding: 0.7em}
.p08, .pa08 {padding: 0.8em}
.p09, .pa09 {padding: 0.9em}
.p10, .pa10 {padding: 1.0em}
.p11, .pa11 {padding: 1.1em}
.p12, .pa12 {padding: 1.2em}
.p13, .pa13 {padding: 1.3em}
.p14, .pa14 {padding: 1.4em}
.p15, .pa15 {padding: 1.5em}
.p16, .pa16 {padding: 1.6em}
.p17, .pa17 {padding: 1.7em}
.p18, .pa18 {padding: 1.8em}
.p19, .pa19 {padding: 1.9em}
.p20, .pa20 {padding: 2.0em}
.p21, .pa21 {padding: 2.1em}
.p22, .pa22 {padding: 2.2em}
.p23, .pa23 {padding: 2.3em}
.p24, .pa24 {padding: 2.4em}
.p25, .pa25 {padding: 2.5em}
/* ** pt padding top ** */
.pt, .pt0, .pt00 {padding-top: 0}
.pt01 {padding-top: 0.1em}
.pt02 {padding-top: 0.2em}
.pt03 {padding-top: 0.3em}
.pt04 {padding-top: 0.4em}
.pt05 {padding-top: 0.5em}
.pt06 {padding-top: 0.6em}
.pt07 {padding-top: 0.7em}
.pt08 {padding-top: 0.8em}
.pt09 {padding-top: 0.9em}
.pt10 {padding-top: 1.0em}
.pt11 {padding-top: 1.1em}
.pt12 {padding-top: 1.2em}
.pt13 {padding-top: 1.3em}
.pt14 {padding-top: 1.4em}
.pt15 {padding-top: 1.5em}
.pt16 {padding-top: 1.6em}
.pt17 {padding-top: 1.7em}
.pt18 {padding-top: 1.8em}
.pt19 {padding-top: 1.9em}
.pt20 {padding-top: 2.0em}
.pt21 {padding-top: 2.1em}
.pt22 {padding-top: 2.2em}
.pt23 {padding-top: 2.3em}
.pt24 {padding-top: 2.4em}
.pt25 {padding-top: 2.5em}
/* ** pr padding right ** */
.pr, .pr0, .pr00 {padding-right: 0}
.pr01 {padding-right: 0.1em}
.pr02 {padding-right: 0.2em}
.pr03 {padding-right: 0.3em}
.pr04 {padding-right: 0.4em}
.pr05 {padding-right: 0.5em}
.pr06 {padding-right: 0.6em}
.pr07 {padding-right: 0.7em}
.pr08 {padding-right: 0.8em}
.pr09 {padding-right: 0.9em}
.pr10 {padding-right: 1.0em}
.pr11 {padding-right: 1.1em}
.pr12 {padding-right: 1.2em}
.pr13 {padding-right: 1.3em}
.pr14 {padding-right: 1.4em}
.pr15 {padding-right: 1.5em}
.pr16 {padding-right: 1.6em}
.pr17 {padding-right: 1.7em}
.pr18 {padding-right: 1.8em}
.pr19 {padding-right: 1.9em}
.pr20 {padding-right: 2.0em}
.pr21 {padding-right: 2.1em}
.pr22 {padding-right: 2.2em}
.pr23 {padding-right: 2.3em}
.pr24 {padding-right: 2.4em}
.pr25 {padding-right: 2.5em}
/* ** pb padding bottom ** */
.pb, .pb0, .pb00 {padding-bottom: 0}
.pb01 {padding-bottom: 0.1em}
.pb02 {padding-bottom: 0.2em}
.pb03 {padding-bottom: 0.3em}
.pb04 {padding-bottom: 0.4em}
.pb05 {padding-bottom: 0.5em}
.pb06 {padding-bottom: 0.6em}
.pb07 {padding-bottom: 0.7em}
.pb08 {padding-bottom: 0.8em}
.pb09 {padding-bottom: 0.9em}
.pb10 {padding-bottom: 1.0em}
.pb11 {padding-bottom: 1.1em}
.pb12 {padding-bottom: 1.2em}
.pb13 {padding-bottom: 1.3em}
.pb14 {padding-bottom: 1.4em}
.pb15 {padding-bottom: 1.5em}
.pb16 {padding-bottom: 1.6em}
.pb17 {padding-bottom: 1.7em}
.pb18 {padding-bottom: 1.8em}
.pb19 {padding-bottom: 1.9em}
.pb20 {padding-bottom: 2.0em}
.pb21 {padding-bottom: 2.1em}
.pb22 {padding-bottom: 2.2em}
.pb23 {padding-bottom: 2.3em}
.pb24 {padding-bottom: 2.4em}
.pb25 {padding-bottom: 2.5em}
/* ** pl padding left ** */
.pl, .pl0, .pl00 {padding-left: 0}
.pl01 {padding-left: 0.1em}
.pl02 {padding-left: 0.2em}
.pl03 {padding-left: 0.3em}
.pl04 {padding-left: 0.4em}
.pl05 {padding-left: 0.5em}
.pl06 {padding-left: 0.6em}
.pl07 {padding-left: 0.7em}
.pl08 {padding-left: 0.8em}
.pl09 {padding-left: 0.9em}
.pl10 {padding-left: 1.0em}
.pl11 {padding-left: 1.1em}
.pl12 {padding-left: 1.2em}
.pl13 {padding-left: 1.3em}
.pl14 {padding-left: 1.4em}
.pl15 {padding-left: 1.5em}
.pl16 {padding-left: 1.6em}
.pl17 {padding-left: 1.7em}
.pl18 {padding-left: 1.8em}
.pl19 {padding-left: 1.9em}
.pl20 {padding-left: 2.0em}
.pl21 {padding-left: 2.1em}
.pl22 {padding-left: 2.2em}
.pl23 {padding-left: 2.3em}
.pl24 {padding-left: 2.4em}
.pl25 {padding-left: 2.5em}
/* ************************************** */
/* ******* POSITION ADJUST ******* */
/* ************************************** */
/* ** pot position top in px ** */
.pot-9x {top: -9px}
.pot-8x {top: -8px}
.pot-7x {top: -7px}
.pot-6x {top: -6px}
.pot-5x {top: -5px}
.pot-4x {top: -4px}
.pot-3x {top: -3px}
.pot-2x {top: -2px}
.pot-1x {top: -1px}
.pot0x, .pot00x {top: 0}
.pot1x, .pot01x {top: 1px}
.pot2x, .pot02x {top: 2px}
.pot3x, .pot03x {top: 3px}
.pot4x, .pot04x {top: 4px}
.pot5x, .pot05x {top: 5px}
.pot6x, .pot06x {top: 6px}
.pot7x, .pot07x {top: 7px}
.pot8x, .pot08x {top: 8px}
.pot9x, .pot09x {top: 9px}
.pot10x {top: 10px}
.pot11x {top: 11px}
.pot12x {top: 12px}
.pot13x {top: 13px}
.pot14x {top: 14px}
.pot15x {top: 15px}
.pot16x {top: 16px}
.pot17x {top: 17px}
.pot18x {top: 18px}
.pot19x {top: 19px}
.pot20x {top: 20px}
.pot21x {top: 21px}
.pot22x {top: 22px}
.pot23x {top: 23px}
.pot24x {top: 24px}
.pot25x {top: 25px}
/* ** por position right in px ** */
.por-9x {right: -9px}
.por-8x {right: -8px}
.por-7x {right: -7px}
.por-6x {right: -6px}
.por-5x {right: -5px}
.por-4x {right: -4px}
.por-3x {right: -3px}
.por-2x {right: -2px}
.por-1x {right: -1px}
.por0x, .por00x {right: 0}
.por1x, .por01x {right: 1px}
.por2x, .por02x {right: 2px}
.por3x, .por03x {right: 3px}
.por4x, .por04x {right: 4px}
.por5x, .por05x {right: 5px}
.por6x, .por06x {right: 6px}
.por7x, .por07x {right: 7px}
.por8x, .por08x {right: 8px}
.por9x, .por09x {right: 9px}
.por10x {right: 10px}
.por11x {right: 11px}
.por12x {right: 12px}
.por13x {right: 13px}
.por14x {right: 14px}
.por15x {right: 15px}
.por16x {right: 16px}
.por17x {right: 17px}
.por18x {right: 18px}
.por19x {right: 19px}
.por20x {right: 20px}
.por21x {right: 21px}
.por22x {right: 22px}
.por23x {right: 23px}
.por24x {right: 24px}
.por25x {right: 25px}
/* ** pob position bottom in px ** */
.pob-9x {bottom: -09px}
.pob-8x {bottom: -08px}
.pob-7x {bottom: -07px}
.pob-6x {bottom: -06px}
.pob-5x {bottom: -05px}
.pob-4x {bottom: -04px}
.pob-3x {bottom: -03px}
.pob-2x {bottom: -02px}
.pob-1x {bottom: -01px}
.pob0x, .pob00x {bottom: 0}
.pob1x, .pob01x {bottom: 01px}
.pob2x, .pob02x {bottom: 02px}
.pob3x, .pob03x {bottom: 03px}
.pob4x, .pob04x {bottom: 04px}
.pob5x, .pob05x {bottom: 05px}
.pob6x, .pob06x {bottom: 06px}
.pob7x, .pob07x {bottom: 07px}
.pob8x, .pob08x {bottom: 08px}
.pob9x, .pob09x {bottom: 09px}
.pob10x {bottom: 10px}
.pob11x {bottom: 11px}
.pob12x {bottom: 12px}
.pob13x {bottom: 13px}
.pob14x {bottom: 14px}
.pob15x {bottom: 15px}
.pob16x {bottom: 16px}
.pob17x {bottom: 17px}
.pob18x {bottom: 18px}
.pob19x {bottom: 19px}
.pob20x {bottom: 20px}
.pob21x {bottom: 21px}
.pob22x {bottom: 22px}
.pob23x {bottom: 23px}
.pob24x {bottom: 24px}
.pob25x {bottom: 25px}
/* ** pol position left in px ** */
.pol-9x {left: -09px}
.pol-8x {left: -08px}
.pol-7x {left: -07px}
.pol-6x {left: -06px}
.pol-5x {left: -05px}
.pol-4x {left: -04px}
.pol-3x {left: -03px}
.pol-2x {left: -02px}
.pol-1x {left: -01px}
.pol0x, .pol00x {left: 0}
.pol1x, .pol01x {left: 01px}
.pol2x, .pol02x {left: 02px}
.pol3x, .pol03x {left: 03px}
.pol4x, .pol04x {left: 04px}
.pol5x, .pol05x {left: 05px}
.pol6x, .pol06x {left: 06px}
.pol7x, .pol07x {left: 07px}
.pol8x, .pol08x {left: 08px}
.pol9x, .pol09x {left: 09px}
.pol10x {left: 10px}
.pol11x {left: 11px}
.pol12x {left: 12px}
.pol13x {left: 13px}
.pol14x {left: 14px}
.pol15x {left: 15px}
.pol16x {left: 16px}
.pol17x {left: 17px}
.pol18x {left: 18px}
.pol19x {left: 19px}
.pol20x {left: 20px}
.pol21x {left: 21px}
.pol22x {left: 22px}
.pol23x {left: 23px}
.pol24x {left: 24px}
.pol25x {left: 25px}
/* ** pot position top ** */
.pot-9 {top: -0.9em}
.pot-8 {top: -0.8em}
.pot-7 {top: -0.7em}
.pot-6 {top: -0.6em}
.pot-5 {top: -0.5em}
.pot-4 {top: -0.4em}
.pot-3 {top: -0.3em}
.pot-2 {top: -0.2em}
.pot-1 {top: -0.1em}
.pot0, .pot00 {top: 0}
.pot01 {top: 0.1em}
.pot02 {top: 0.2em}
.pot03 {top: 0.3em}
.pot04 {top: 0.4em}
.pot05 {top: 0.5em}
.pot06 {top: 0.6em}
.pot07 {top: 0.7em}
.pot08 {top: 0.8em}
.pot09 {top: 0.9em}
.pot10 {top: 1.0em}
.pot11 {top: 1.1em}
.pot12 {top: 1.2em}
.pot13 {top: 1.3em}
.pot14 {top: 1.4em}
.pot15 {top: 1.5em}
.pot16 {top: 1.6em}
.pot17 {top: 1.7em}
.pot18 {top: 1.8em}
.pot19 {top: 1.9em}
.pot20 {top: 2.0em}
.pot21 {top: 2.1em}
.pot22 {top: 2.2em}
.pot23 {top: 2.3em}
.pot24 {top: 2.4em}
.pot25 {top: 2.5em}
/* ** por position right ** */
.por-9 {right: -0.9em}
.por-8 {right: -0.8em}
.por-7 {right: -0.7em}
.por-6 {right: -0.6em}
.por-5 {right: -0.5em}
.por-4 {right: -0.4em}
.por-3 {right: -0.3em}
.por-2 {right: -0.2em}
.por-1 {right: -0.1em}
.por0, .por00 {right: 0}
.por01 {right: 0.1em}
.por02 {right: 0.2em}
.por03 {right: 0.3em}
.por04 {right: 0.4em}
.por05 {right: 0.5em}
.por06 {right: 0.6em}
.por07 {right: 0.7em}
.por08 {right: 0.8em}
.por09 {right: 0.9em}
.por10 {right: 1.0em}
.por11 {right: 1.1em}
.por12 {right: 1.2em}
.por13 {right: 1.3em}
.por14 {right: 1.4em}
.por15 {right: 1.5em}
.por16 {right: 1.6em}
.por17 {right: 1.7em}
.por18 {right: 1.8em}
.por19 {right: 1.9em}
.por20 {right: 2.0em}
.por21 {right: 2.1em}
.por22 {right: 2.2em}
.por23 {right: 2.3em}
.por24 {right: 2.4em}
.por25 {right: 2.5em}
/* ** pob position bottom ** */
.pob-9 {bottom: -0.9em}
.pob-8 {bottom: -0.8em}
.pob-7 {bottom: -0.7em}
.pob-6 {bottom: -0.6em}
.pob-5 {bottom: -0.5em}
.pob-4 {bottom: -0.4em}
.pob-3 {bottom: -0.3em}
.pob-2 {bottom: -0.2em}
.pob-1 {bottom: -0.1em}
.pob0, .pob00 {bottom: 0}
.pob01 {bottom: 0.1em}
.pob02 {bottom: 0.2em}
.pob03 {bottom: 0.3em}
.pob04 {bottom: 0.4em}
.pob05 {bottom: 0.5em}
.pob06 {bottom: 0.6em}
.pob07 {bottom: 0.7em}
.pob08 {bottom: 0.8em}
.pob09 {bottom: 0.9em}
.pob10 {bottom: 1.0em}
.pob11 {bottom: 1.1em}
.pob12 {bottom: 1.2em}
.pob13 {bottom: 1.3em}
.pob14 {bottom: 1.4em}
.pob15 {bottom: 1.5em}
.pob16 {bottom: 1.6em}
.pob17 {bottom: 1.7em}
.pob18 {bottom: 1.8em}
.pob19 {bottom: 1.9em}
.pob20 {bottom: 2.0em}
.pob21 {bottom: 2.1em}
.pob22 {bottom: 2.2em}
.pob23 {bottom: 2.3em}
.pob24 {bottom: 2.4em}
.pob25 {bottom: 2.5em}
/* ** pol position left ** */
.pol-9 {left: -0.9em}
.pol-8 {left: -0.8em}
.pol-7 {left: -0.7em}
.pol-6 {left: -0.6em}
.pol-5 {left: -0.5em}
.pol-4 {left: -0.4em}
.pol-3 {left: -0.3em}
.pol-2 {left: -0.2em}
.pol-1 {left: -0.1em}
.pol0, .pol00 {left: 0}
.pol01 {left: 0.1em}
.pol02 {left: 0.2em}
.pol03 {left: 0.3em}
.pol04 {left: 0.4em}
.pol05 {left: 0.5em}
.pol06 {left: 0.6em}
.pol07 {left: 0.7em}
.pol08 {left: 0.8em}
.pol09 {left: 0.9em}
.pol10 {left: 1.0em}
.pol11 {left: 1.1em}
.pol12 {left: 1.2em}
.pol13 {left: 1.3em}
.pol14 {left: 1.4em}
.pol15 {left: 1.5em}
.pol16 {left: 1.6em}
.pol17 {left: 1.7em}
.pol18 {left: 1.8em}
.pol19 {left: 1.9em}
.pol20 {left: 2.0em}
.pol21 {left: 2.1em}
.pol22 {left: 2.2em}
.pol23 {left: 2.3em}
.pol24 {left: 2.4em}
.pol25 {left: 2.5em}
/* ** z Z-INDEX ** */
.zi {z-index: initial}
.zh {z-index: inherit}
.zu {z-index: unset}
.za {z-index: auto}
.z-9, .z09 {z-index: -9}
.z-8, .z08 {z-index: -8}
.z-7, .z07 {z-index: -7}
.z-6, .z06 {z-index: -6}
.z-5, .z05 {z-index: -5}
.z-4, .z04 {z-index: -4}
.z-3, .z03 {z-index: -3}
.z-2, .z02 {z-index: -2}
.z-1, .z01 {z-index: -1}
.z0, .z00 {z-index: 0}
.z1 {z-index: 1}
.z2 {z-index: 2}
.z3 {z-index: 3}
.z4 {z-index: 4}
.z5 {z-index: 5}
.z6 {z-index: 6}
.z7 {z-index: 7}
.z8 {z-index: 8}
.z9 {z-index: 9}
.z10 {z-index: 10}
.z20 {z-index: 20}
.z30 {z-index: 30}
.z40 {z-index: 40}
.z50 {z-index: 50}
.z60 {z-index: 60}
.z70 {z-index: 70}
.z80 {z-index: 80}
.z90 {z-index: 90}
.z100 {z-index: 100}
.z200 {z-index: 200}
.z300 {z-index: 300}
.z400 {z-index: 400}
.z500 {z-index: 500}
.z600 {z-index: 600}
.z700 {z-index: 700}
.z800 {z-index: 800}
.z900 {z-index: 900}
/* ******************************************************************** */
/* ******************************************************************** */
/* ******************************************************************** */
/* ******************************************************************** */
/* ****************** FONT METRICS and STYLES ****************** */
/* ******************************************************************** */
/* ******************************************************************** */
/* ******************************************************************** */
/* ******************************************************************** */
/* ** f font ** */
.fi {font: initial}
.fh {font: inherit}
/* **************************************************************** */
/* ***************** ff FONT FAMILY ************************ */
/* **************************************************************** */
/* ***** KeyWords: FonFam FFM FnF fonts myfon mynfon ******* */
/* **************************************************************** */
/* Obviously these font family classes need to be supported with
the appropriate font import(s) */
/* ****** ff SANS-SERIF ****** */
.ffh {font-family: HelveticaNeueLT, Helvetica, Arial, sans-serif}
.ffo {font-family: Optima, Calibri, Candara, sans-serif}
.ffa {font-family: Avenir, Candara, HelveticaNeueLT, Helvetica, Arial, sans-serif}
.fft {font-family: "Trebuchet MS", Tahoma, Futura, Geneva, sans-serif}
.ffv {font-family: Verdana, Tahoma, Geneva, sans-serif}
/* ****** ff SANS-SERIF Condensed or Extended ****** */
.ffc {font-family: Oswald, HelveticaNeueLTcond, "Avenir Neue Condensed"}
.ffe {font-family: Michroma, Syncopate, HelveticaNeueLText}
/* ****** ffd DISPLAY (fonts where the 'normal' is Heavy) ****** */
.ffdr {font-family: Rockwell, "Arial Black", Impact, sans-serif}
.ffda {font-family: "Arial Black", Rockwell, Impact, sans-serif}
.ffdi {font-family: Impact, "Arial Black", sans-serif}
/* ****** ffs SERIF ****** */
.ffst {font-family: TimesLTStd, "Times New Roman", Times, serif}
.ffsb {font-family: BaskervilleMTPro, Baskerville, Palatino, "Palatino Linotype", serif}
.ffsg {font-family: Garamond, BaskervilleMTPro, Baskerville, Palatino, "Palatino Linotype", serif}
.ffsp {font-family: "Palatino Linotype", Palatino, Garamond, BaskervilleMTPro, serif}
.ffsd {font-family: Didot, Georgia, BaskervilleMTPro, Baskerville, serif}
/* ****** ffm MONO ****** */
.ffma {font-family: Monaco, "Fira Code", Menlo, "Andale Mono", Consolas, monospace}
.ffmc {font-family: "Courier New", Courier, monospace}
.ffmm {font-family: Menlo, "Lucida Console", Monaco, monospace}
.ffma {font-family: "Andale Mono", Consolas, monospace}
/* ****** ffc CURSIVE ****** */
.ffca {font-family: 'Apple Chancery', cursive}
.ffcc {font-family: Chalkduster, 'Bradley Hand', cursive}
.ffcb {font-family: 'Bradley Hand', Chalkduster, cursive}
/* ****** fff FANTASY ****** */
.fffp {font-family: papyrus, fantasy}
.fffc {font-family: herculanum, fantasy}
.fffh {font-family: 'Henny Penny', fantasy}
.fffl {font-family: Luminari, fantasy}
.ffft {font-family: Trattatello, fantasy}
/* ****************************************** */
/* ******** fs FONT SIZING ********** */
/* ****************************************** */
/* ** FONT SIZE ** */
.fsi {font-size: initial}
.fsh {font-size: inherit}
/* ** fs__r Font size in rem ** */
.fs05r {font-size: 0.5rem}
.fs06r {font-size: 0.6rem}
.fs07r {font-size: 0.7rem}
.fs08r {font-size: 0.8rem}
.fs09r {font-size: 0.9rem}
.fs10r {font-size: 1.0rem}
.fs11r {font-size: 1.1rem}
.fs12r {font-size: 1.2rem}
.fs13r {font-size: 1.3rem}
.fs14r {font-size: 1.4rem}
.fs15r {font-size: 1.5rem}
.fs16r {font-size: 1.6rem}
.fs17r {font-size: 1.7rem}
.fs18r {font-size: 1.8rem}
.fs19r {font-size: 1.9rem}
.fs20r {font-size: 2.0rem}
.fs21r {font-size: 2.1rem}
.fs22r {font-size: 2.2rem}
.fs23r {font-size: 2.3rem}
.fs24r {font-size: 2.4rem}
.fs25r {font-size: 2.5rem}
/* ** fs__p Font size in px ** */
/* Font Sizes under 14px should not be used for content */
.fs08x {font-size: 8px}
.fs09x {font-size: 9px}
.fs10x {font-size: 10px}
.fs11x {font-size: 11px}
.fs12x {font-size: 12px}
.fs13x {font-size: 13px}
.fs14x {font-size: 14px}
.fs15x {font-size: 15px}
.fs16x {font-size: 16px}
.fs17x {font-size: 17px}
.fs18x {font-size: 18px}
.fs19x {font-size: 19px}
.fs20x {font-size: 20px}
.fs21x {font-size: 21px}
.fs22x {font-size: 22px}
.fs23x {font-size: 23px}
.fs24x {font-size: 24px}
.fs25x {font-size: 25px}
.fs26x {font-size: 26px}
.fs27x {font-size: 27px}
.fs28x {font-size: 28px}
.fs29x {font-size: 29px}
.fs30x {font-size: 30px}
.fs31x {font-size: 31px}
.fs32x {font-size: 32px}
.fs33x {font-size: 33px}
.fs34x {font-size: 34px}
.fs35x {font-size: 35px}
.fs36x {font-size: 36px}
.fs37x {font-size: 37px}
.fs38x {font-size: 38px}
.fs39x {font-size: 39px}
.fs40x {font-size: 40px}
.fs41x {font-size: 41px}
.fs42x {font-size: 42px}
.fs43x {font-size: 43px}
.fs44x {font-size: 44px}
.fs45x {font-size: 45px}
.fs46x {font-size: 46px}
.fs47x {font-size: 47px}
.fs48x {font-size: 48px}
.fs49x {font-size: 49px}
.fs50x {font-size: 50px}
.fs51x {font-size: 51px}
.fs52x {font-size: 52px}
.fs53x {font-size: 53px}
.fs54x {font-size: 54px}
/* ** fs Font size in em ** */
/* note: less than 1em sizes like .fs5 or
.fs83 depreciated in favor of .fs083
They will be removed in 2021 */
.fs040, .fs04 {font-size: 0.4em}
.fs045 {font-size: 0.45em}
.fs050, .fs05 {font-size: 0.5em}
.fs055 {font-size: 0.55em}
.fs060, .fs06 {font-size: 0.6em}
.fs065 {font-size: 0.65em}
.fs070, .fs07 {font-size: 0.7em}
.fs071 {font-size: 0.71em}
.fs072 {font-size: 0.72em}
.fs073 {font-size: 0.73em}
.fs074 {font-size: 0.74em}
.fs075 {font-size: 0.75em}
.fs076 {font-size: 0.76em}
.fs077 {font-size: 0.77em}
.fs078 {font-size: 0.78em}
.fs079 {font-size: 0.79em}
.fs080, .fs08 {font-size: 0.8em}
.fs081 {font-size: 0.81em}
.fs082 {font-size: 0.82em}
.fs083 {font-size: 0.83em}
.fs084 {font-size: 0.84em}
.fs085 {font-size: 0.85em}
.fs086 {font-size: 0.86em}
.fs087 {font-size: 0.87em}
.fs088 {font-size: 0.88em}
.fs089 {font-size: 0.89em}
.fs090, .fs09 {font-size: 0.9em}
.fs091 {font-size: 0.91em}
.fs092 {font-size: 0.92em}
.fs093 {font-size: 0.93em}
.fs094 {font-size: 0.94em}
.fs095 {font-size: 0.95em}
.fs096 {font-size: 0.96em}
.fs097 {font-size: 0.97em}
.fs098 {font-size: 0.98em}
.fs099 {font-size: 0.99em}
.fs10, .fs1 {font-size: 1em}
.fs11 {font-size: 1.1em}
.fs12 {font-size: 1.2em}
.fs13 {font-size: 1.3em}
.fs14 {font-size: 1.4em}
.fs15 {font-size: 1.5em}
.fs16 {font-size: 1.6em}
.fs17 {font-size: 1.7em}
.fs18 {font-size: 1.8em}
.fs19 {font-size: 1.9em}
.fs20, .fs2 {font-size: 2em}
.fs21 {font-size: 2.1em}
.fs22 {font-size: 2.2em}
.fs23 {font-size: 2.3em}
.fs24 {font-size: 2.4em}
.fs25 {font-size: 2.5em}
.fs26 {font-size: 2.6em}
.fs27 {font-size: 2.7em}
.fs28 {font-size: 2.8em}
.fs29 {font-size: 2.9em}
.fs30, .fs3 {font-size: 3em}
.fs31 {font-size: 3.1em}
.fs32 {font-size: 3.2em}
.fs33 {font-size: 3.3em}
.fs34 {font-size: 3.4em}
.fs35 {font-size: 3.5em}
.fs36 {font-size: 3.6em}
.fs37 {font-size: 3.7em}
.fs38 {font-size: 3.8em}
.fs39 {font-size: 3.9em}
.fs40, .fs4 {font-size: 4em}
.fs45 {font-size: 4.5em}
.fs50, .fs5 {font-size: 5em}
.fs55 {font-size: 5.5em}
/* ************************************************* */
/* **** FONT WEIGHT STYLE and DECORATION ******** */
/* ************************************************* */
/* ** fw Font weight ** */
.fwi {font-weight: initial}
.fwh {font-weight: inherit}
.fw1 {font-weight: 100}
.fw2 {font-weight: 200}
.fw3, .fwl, .light {font-weight: 300}
.fw4, .fwn, .normal {font-weight: 400}
.fw5 {font-weight: 500}
.fw6 {font-weight: 600}
.fw7, .fwb, .bold, .strong {font-weight: 700}
.fw8 {font-weight: 800}
.fw9 {font-weight: 900}
.fwlr, .lighter {font-weight: lighter}
.fwbr, .bolder {font-weight: bolder}
/* ** ft font sTyles alt is fst ** */
.fti, .fsti {font-style: initial}
.fth, .fsth {font-style: inherit}
.ftu, .fstu {font-style: unset}
.fto, .fsto {font-style: oblique}
.ftt, .ftit, .fstt, .fstit {font-style: italic}
.ft, .fstn, .normal {font-style: normal}
/* ** fdx or tdx text-line decorations ** */
.fdi, .tdi {text-decoration: initial}
.fdh, .tdh {text-decoration: inherit}
.fdo, .tdo {text-decoration: overline}
.fdu, .tdu {text-decoration: underline}
.fdt, .tdt,.fdst, .tdst,
.fst, .tst {text-decoration: line-through}
.fdn, .tdn, .normal {text-decoration: none}
/* ************************************************* */
/* ******** LINE AND LETER SPACING ******** */
/* ************************************************* */
/* ** ls letterspacing ** */
.lsi {letter-spacing: initial}
.lsi:hover {letter-spacing: initial}
.lsi:active {letter-spacing: initial}
.lsh {letter-spacing: inherit}
.lsh:hover {letter-spacing: inherit}
.lsh:active {letter-spacing: inherit}
.ls00, .ls0, .ls, .normal, .ls00 a, .ls0 a, .ls a, .normal a, a.ls00, a.ls0, a.ls, a.normal
{letter-spacing: normal}
.ls00 a:hover, .ls0 a:hover, .ls a:hover, .normal a:hover, a.ls00:hover, a.ls0:hover, a.ls:hover, a.normal:hover
{letter-spacing: normal}
.ls00 a:active, .ls0 a:active, .ls a:active, .normal a:active, a.ls00:active, a.ls0:active, a.ls:active, a.normal:active
{letter-spacing: normal}
.ls1, .ls01, a.ls1, a.ls01,.ls1 a, .ls01 a {letter-spacing: 0.01em}
a.ls1:hover, a.ls01:hover, .ls1 a:hover, .ls01 a:hover {letter-spacing: 0.01em}
a.ls1:active, a.ls01:active, .ls1 a:active, .ls01 a:active {letter-spacing: 0.01em}
.ls2, .ls02, a.ls2, a.ls02,.ls2 a, .ls02 a {letter-spacing: 0.02em}
a.ls2:hover, a.ls02:hover, .ls2 a:hover, .ls02 a:hover {letter-spacing: 0.02em}
a.ls2:active, a.ls02:active, .ls2 a:active, .ls02 a:active {letter-spacing: 0.02em}
.ls3, .ls03, a.ls3, a.ls03,.ls3 a, .ls03 a {letter-spacing: 0.03em}
a.ls3:hover, a.ls03:hover, .ls3 a:hover, .ls03 a:hover {letter-spacing: 0.03em}
a.ls3:active, a.ls03:active, .ls3 a:active, .ls03 a:active {letter-spacing: 0.03em}
.ls4, .ls04, a.ls4, a.ls04,.ls4 a, .ls04 a {letter-spacing: 0.04em}
a.ls4:hover, a.ls04:hover, .ls4 a:hover, .ls04 a:hover {letter-spacing: 0.04em}
a.ls4:active, a.ls04:active, .ls4 a:active, .ls04 a:active {letter-spacing: 0.04em}
.ls5, .ls05, a.ls5, a.ls05,.ls5 a, .ls05 a {letter-spacing: 0.05em}
a.ls5:hover, a.ls05:hover, .ls5 a:hover, .ls05 a:hover {letter-spacing: 0.05em}
a.ls5:active, a.ls05:active, .ls5 a:active, .ls05 a:active {letter-spacing: 0.05em}
.ls10, a.ls10, .ls10 a {letter-spacing: 0.10em}
a.ls10:hover, .ls10 a:hover {letter-spacing: 0.10em}
a.ls10:active, .ls10 a:active {letter-spacing: 0.10em}
.ls15, a.ls15, .ls15 a {letter-spacing: 0.15em}
a.ls15:hover, .ls15 a:hover {letter-spacing: 0.15em}
a.ls15:active, .ls15 a:active {letter-spacing: 0.15em}
.ls20, a.ls20, .ls20 a {letter-spacing: 0.20em}
a.ls20:hover, .ls20 a:hover {letter-spacing: 0.20em}
a.ls20:active, .ls20 a:active {letter-spacing: 0.20em}
.ls25, a.ls25, .ls25 a {letter-spacing: 0.25em}
a.ls25:hover, .ls25 a:hover {letter-spacing: 0.25em}
a.ls25:active, .ls25 a:active {letter-spacing: 0.25em}
.ls01{letter-spacing:0.01em}
.ls02{letter-spacing:0.02em}
.ls03{letter-spacing:0.03em}
.ls04{letter-spacing:0.04em}
.ls05{letter-spacing:0.05em}
.ls06{letter-spacing:0.06em}
.ls07{letter-spacing:0.07em}
.ls08{letter-spacing:0.08em}
.ls09{letter-spacing:0.09em}
.ls10{letter-spacing:0.10em}
.ls-01{letter-spacing:-0.01em}
.ls-02{letter-spacing:-0.02em}
.ls-03{letter-spacing:-0.03em}
.ls-04{letter-spacing:-0.04em}
.ls-05{letter-spacing:-0.05em}
.ls-06{letter-spacing:-0.06em}
.ls-07{letter-spacing:-0.07em}
.ls-08{letter-spacing:-0.08em}
.ls-09{letter-spacing:-0.09em}
.ls-10{letter-spacing:-0.10em}
/* ** lh line height ** */
.lhi {line-height: initial}
.lhh {line-height: inherit}
.lhn, .normal {line-height: normal}
/* ** lh unitless line height ** */
.lh01 {line-height: 0.1}
.lh02 {line-height: 0.2}
.lh03 {line-height: 0.3}
.lh04 {line-height: 0.4}
.lh05 {line-height: 0.5}
.lh06 {line-height: 0.6}
.lh07 {line-height: 0.7}
.lh08 {line-height: 0.8}
.lh09 {line-height: 0.9}
.lh10, .lh1 {line-height: 1.0}
.lh11 {line-height: 1.1}
.lh115 {line-height: 1.15}
.lh12 {line-height: 1.2}
.lh125 {line-height: 1.25}
.lh13 {line-height: 1.3}
.lh135 {line-height: 1.35}
.lh14 {line-height: 1.4}
.lh145 {line-height: 1.45}
.lh15 {line-height: 1.5}
.lh155 {line-height: 1.55}
.lh16 {line-height: 1.6}
.lh165 {line-height: 1.65}
.lh17 {line-height: 1.7}
.lh175 {line-height: 1.75}
.lh18 {line-height: 1.8}
.lh185 {line-height: 1.85}
.lh19 {line-height: 1.9}
.lh195 {line-height: 1.95}
.lh20, .lh2 {line-height: 2.0}
.lh21 {line-height: 2.1}
.lh22 {line-height: 2.2}
.lh23 {line-height: 2.3}
.lh24 {line-height: 2.4}
.lh25 {line-height: 2.5}
.lh26 {line-height: 2.6}
.lh27 {line-height: 2.7}
.lh28 {line-height: 2.8}
.lh29 {line-height: 2.9}
.lh30, .lh3 {line-height: 3.0}
/* ** lh__p line height in px ** */
.lh1x, .lh01x {line-height: 1px}
.lh2x, .lh02x {line-height: 2px}
.lh3x, .lh03x {line-height: 3px}
.lh4x, .lh04x {line-height: 4px}
.lh5x, .lh05x {line-height: 5px}
.lh6x, .lh06x {line-height: 6px}
.lh7x, .lh07x {line-height: 7px}
.lh8x, .lh08x {line-height: 8px}
.lh9x, .lh09x {line-height: 9px}
.lh10x {line-height: 10px}
.lh11x {line-height: 11px}
.lh12x {line-height: 12px}
.lh13x {line-height: 13px}
.lh14x {line-height: 14px}
.lh15x {line-height: 15px}
.lh16x {line-height: 16px}
.lh17x {line-height: 17px}
.lh18x {line-height: 18px}
.lh19x {line-height: 19px}
.lh20x {line-height: 20px}
.lh21x {line-height: 21px}
.lh22x {line-height: 22px}
.lh23x {line-height: 23px}
.lh24x {line-height: 24px}
.lh25x {line-height: 25px}
.lh26x {line-height: 26px}
.lh27x {line-height: 27px}
.lh28x {line-height: 28px}
.lh29x {line-height: 29px}
.lh30x {line-height: 30px}
.lh31x {line-height: 31px}
.lh32x {line-height: 32px}
/* *************************************************** */
/* ****** TEXT XFORM, ALIGN, and INDENT ********* */
/* *************************************************** */
/* *** tt Text transforms *** */
.tti {text-transform: initial}
.tth {text-transform: inherit}
.ttn, .normal {text-transform: none}
.ttc {text-transform: capitalize}
.ttu {text-transform: uppercase}
.ttl {text-transform: lowercase}
/* *** t or al Text Aligns *** */
.tai {text-align: initial}
.tah {text-align: inherit}
.tl, .tal, .all {text-align: left}
.tr, .tar, .alr {text-align: right}
.tc, .tac, .alc {text-align: center}
.taj {text-align: justify}
.tli {text-align-last: initial}
.tlh {text-align-last: inherit}
.tla {text-align-last: auto}
.tll {text-align-last: left}
.tlr {text-align-last: right}
.tlc {text-align-last: center}
.tlj {text-align-last: justify}
.tls {text-align-last: start}
.tle {text-align-last: end}
/* *** v vertical-align *** */
.vai {vertical-align: initial}
.vah {vertical-align: inherit}
.vabl, .vbl {vertical-align: baseline}
.vasb, .vsb {vertical-align: sub}
.vasp, .vsp {vertical-align: super}
.vat, .vt {vertical-align: top}
.vaxt, .vxt {vertical-align: text-top}
.vam, .vm {vertical-align: middle}
.vab, .vb {vertical-align: bottom}
.vaxb, .vxb {vertical-align: text-bottom}
.vl01 {vertical-align: 0.01em}
.vl02 {vertical-align: 0.02em}
.vl03 {vertical-align: 0.03em}
.tb04 { tab-size: 4; }
.tb05 { tab-size: 5; }
.tb06 { tab-size: 6; }
.tb07 { tab-size: 7; }
.tb08 { tab-size: 8; }
.tb09 { tab-size: 9; }
.tb10 { tab-size: 10; }
.tb11 { tab-size: 11; }
.tb12 { tab-size: 12; }
.tb13 { tab-size: 13; }
.tb14 { tab-size: 14; }
.tb15 { tab-size: 15; }
.tb16 { tab-size: 16; }
.tb17 { tab-size: 17; }
.tb18 { tab-size: 18; }
/* ** ti Text indents ** */
.tii {text-indent: initial}
.tih {text-indent: inherit}
.ti-9 {text-indent: -0.9em}
.ti-8 {text-indent: -0.8em}
.ti-7 {text-indent: -0.7em}
.ti-6 {text-indent: -0.6em}
.ti-5 {text-indent: -0.5em}
.ti-4 {text-indent: -0.4em}
.ti-3 {text-indent: -0.3em}
.ti-2 {text-indent: -0.2em}
.ti-1 {text-indent: -0.1em}
.ti0, .ti00 {text-indent: 0}
.ti1 {text-indent: 0.1em}
.ti2 {text-indent: 0.2em}
.ti3 {text-indent: 0.3em}
.ti4 {text-indent: 0.4em}
.ti5 {text-indent: 0.5em}
.ti6 {text-indent: 0.6em}
.ti7 {text-indent: 0.7em}
.ti8 {text-indent: 0.8em}
.ti9 {text-indent: 0.9em}
.ti10 {text-indent: 1.0em}
.ti11 {text-indent: 1.1em}
.ti12 {text-indent: 1.2em}
.ti13 {text-indent: 1.3em}
.ti14 {text-indent: 1.4em}
.ti15 {text-indent: 1.5em}
.ti16 {text-indent: 1.6em}
.ti17 {text-indent: 1.7em}
.ti18 {text-indent: 1.8em}
.ti19 {text-indent: 1.9em}
.ti20 {text-indent: 2.0em}
.ti21 {text-indent: 2.1em}
.ti22 {text-indent: 2.2em}
.ti23 {text-indent: 2.3em}
.ti24 {text-indent: 2.4em}
.ti25 {text-indent: 2.5em}
/* ************************************** */
/* ******** BORDERS *********** */
/* ************************************** */
.bi {border: initial}
.bh {border: inherit}
.b, .bn {border: none}
.bri {border-radius: initial}
.brh {border-radius: inherit}
.br, .brn {border-radius: 0}
/* ** b__p border in px ** */
/* See Color Section for border colors */
.b1x, .b01x {border: 1px solid currentColor}
.b2x, .b02x {border: 2px solid currentColor}
.b3x, .b03x {border: 3px solid currentColor}
.b4x, .b04x {border: 4px solid currentColor}
.b5x, .b05x {border: 5px solid currentColor}
.b6x, .b06x {border: 6px solid currentColor}
.b7x, .b07x {border: 7px solid currentColor}
.b8x, .b08x {border: 8px solid currentColor}
.b9x, .b09x {border: 9px solid currentColor}
.b10x {border: 10px solid currentColor}
.b11x {border: 11px solid currentColor}
.b12x {border: 12px solid currentColor}
.b13x {border: 13px solid currentColor}
.b14x {border: 14px solid currentColor}
.b15x {border: 15px solid currentColor}
.b16x {border: 16px solid currentColor}
.b17x {border: 17px solid currentColor}
.b18x {border: 18px solid currentColor}
.b19x {border: 19px solid currentColor}
.b20x {border: 20px solid currentColor}
.b21x {border: 21px solid currentColor}
.b22x {border: 22px solid currentColor}
.b23x {border: 23px solid currentColor}
.b24x {border: 24px solid currentColor}
.b25x {border: 25px solid currentColor}
/* ** br__p border radius in px ** */
.br1x, .br01x {border-radius: 1px}
.br2x, .br02x {border-radius: 2px}
.br3x, .br03x {border-radius: 3px}
.br4x, .br04x {border-radius: 4px}
.br5x, .br05x {border-radius: 5px}
.br6x, .br06x {border-radius: 6px}
.br7x, .br07x {border-radius: 7px}
.br8x, .br08x {border-radius: 8px}
.br9x, .br09x {border-radius: 9px}
.br10x {border-radius: 10px}
.br11x {border-radius: 11px}
.br12x {border-radius: 12px}
.br13x {border-radius: 13px}
.br14x {border-radius: 14px}
.br15x {border-radius: 15px}
.br16x {border-radius: 16px}
.br17x {border-radius: 17px}
.br18x {border-radius: 18px}
.br19x {border-radius: 19px}
.br20x {border-radius: 20px}
.br21x {border-radius: 21px}
.br22x {border-radius: 22px}
.br23x {border-radius: 23px}
.br24x {border-radius: 24px}
.br25x {border-radius: 25px}
.br26x {border-radius: 26px}
.br27x {border-radius: 27px}
.br28x {border-radius: 28px}
.br29x {border-radius: 29px}
.br30x {border-radius: 30px}
.br31x {border-radius: 31px}
.br32x {border-radius: 32px}
.br33x {border-radius: 33px}
.br34x {border-radius: 34px}
.br35x {border-radius: 35px}
.br36x {border-radius: 36px}
.br37x {border-radius: 37px}
.br38x {border-radius: 38px}
.br39x {border-radius: 39px}
.br40x {border-radius: 40px}
.br41x {border-radius: 41px}
.br42x {border-radius: 42px}
.br43x {border-radius: 43px}
.br44x {border-radius: 44px}
.br45x {border-radius: 45px}
.br46x {border-radius: 46px}
.br47x {border-radius: 47px}
.br48x {border-radius: 48px}
/* ** b border in em ** */
/* See Color Section for border colors */
.b00 {border: none}
.b01 {border: 0.1em solid currentColor}
.b02 {border: 0.2em solid currentColor}
.b03 {border: 0.3em solid currentColor}
.b04 {border: 0.4em solid currentColor}
.b05 {border: 0.5em solid currentColor}
.b06 {border: 0.6em solid currentColor}
.b07 {border: 0.7em solid currentColor}
.b08 {border: 0.8em solid currentColor}
.b09 {border: 0.9em solid currentColor}
.b10 {border: 1.0em solid currentColor}
.b11 {border: 1.1em solid currentColor}
.b12 {border: 1.2em solid currentColor}
.b13 {border: 1.3em solid currentColor}
.b14 {border: 1.4em solid currentColor}
.b15 {border: 1.5em solid currentColor}
.b16 {border: 1.6em solid currentColor}
.b17 {border: 1.7em solid currentColor}
.b18 {border: 1.8em solid currentColor}
.b19 {border: 1.9em solid currentColor}
.b20 {border: 2.0em solid currentColor}
.b21 {border: 2.1em solid currentColor}
.b22 {border: 2.2em solid currentColor}
.b23 {border: 2.3em solid currentColor}
.b24 {border: 2.4em solid currentColor}
.b25 {border: 2.5em solid currentColor}
/* ** br border radius in em ** */
.br0, .br00 {border-radius: 0}
.br01 {border-radius: 0.1em}
.br02 {border-radius: 0.2em}
.br03 {border-radius: 0.3em}
.br04 {border-radius: 0.4em}
.br05 {border-radius: 0.5em}
.br06 {border-radius: 0.6em}
.br07 {border-radius: 0.7em}
.br08 {border-radius: 0.8em}
.br09 {border-radius: 0.9em}
.br10 {border-radius: 1.0em}
.br11 {border-radius: 1.1em}
.br12 {border-radius: 1.2em}
.br13 {border-radius: 1.3em}
.br14 {border-radius: 1.4em}
.br15 {border-radius: 1.5em}
.br16 {border-radius: 1.6em}
.br17 {border-radius: 1.7em}
.br18 {border-radius: 1.8em}
.br19 {border-radius: 1.9em}
.br20 {border-radius: 2.0em}
.br21 {border-radius: 2.1em}
.br22 {border-radius: 2.2em}
.br23 {border-radius: 2.3em}
.br24 {border-radius: 2.4em}
.br25 {border-radius: 2.5em}
/* ************************************************ */
/* ******** TEXT and BOX SHADOWS ******** */
/* ************************************************ */
/* ** ts text shadow ** */
.tsi {text-shadow: initial}
.tsh {text-shadow: inherit}
.tsn {text-shadow: none}
/* odd are darker with less transparency */
.ts00, .ts0 {text-shadow: 0 0 0 #0000}
.ts01 {text-shadow: 0.01em 0.01em 0.02em #000a}
.ts02 {text-shadow: 0.02em 0.02em 0.03em #0006}
.ts03 {text-shadow: 0.03em 0.03em 0.05em #000a}
.ts04 {text-shadow: 0.04em 0.04em 0.07em #0006}
.ts05 {text-shadow: 0.05em 0.05em 0.09em #000a}
.ts06 {text-shadow: 0.06em 0.06em 0.11em #0006}
.ts07 {text-shadow: 0.07em 0.07em 0.115em #000a}
.ts08 {text-shadow: 0.08em 0.08em 0.12em #0006}
.ts09 {text-shadow: 0.09em 0.09em 0.125em #000a}
.ts10 {text-shadow: 0.10em 0.10em 0.13em #0006}
.ts11 {text-shadow: 0.11em 0.11em 0.135em #000a}
.ts12 {text-shadow: 0.12em 0.12em 0.14em #0006}
.ts13 {text-shadow: 0.13em 0.13em 0.145em #000a}
.ts14 {text-shadow: 0.14em 0.14em 0.15em #0006}
.ts15 {text-shadow: 0.15em 0.15em 0.155em #000a}
.ts16 {text-shadow: 0.16em 0.16em 0.16em #0006}
.ts17 {text-shadow: 0.17em 0.17em 0.17em #000a}
.ts18 {text-shadow: 0.18em 0.18em 0.18em #0006}
.ts19 {text-shadow: 0.19em 0.19em 0.19em #000a}
.ts20 {text-shadow: 0.20em 0.20em 0.1925em #0006}
.ts21 {text-shadow: 0.21em 0.21em 0.195em #000a}
.ts22 {text-shadow: 0.22em 0.22em 0.1975em #0006}
.ts23 {text-shadow: 0.23em 0.23em 0.20em #000a}
.ts24 {text-shadow: 0.24em 0.24em 0.2025em #0006}
.ts25 {text-shadow: 0.25em 0.25em 0.205em #000a}
/* ** bs box shadow ** */
.bsi {box-shadow: initial}
.bsh {box-shadow: inherit}
.bs0, .bs00, .bsn, .bsi0, .bsi00, .bsin {box-shadow: none}
/* odd are darker with less transparency */
.bs01 {box-shadow: 0.01em 0.01em 0.02em #000a}
.bs02 {box-shadow: 0.02em 0.02em 0.04em #0006}
.bs03 {box-shadow: 0.03em 0.03em 0.06em #000a}
.bs04 {box-shadow: 0.04em 0.04em 0.08em #0006}
.bs05 {box-shadow: 0.05em 0.05em 0.10em #000a}
.bs06 {box-shadow: 0.06em 0.06em 0.12em #0006}
.bs07 {box-shadow: 0.07em 0.07em 0.14em #000a}
.bs08 {box-shadow: 0.08em 0.08em 0.16em #0006}
.bs09 {box-shadow: 0.09em 0.09em 0.18em #000a}
.bs10 {box-shadow: 0.10em 0.10em 0.20em #0006}
.bs11 {box-shadow: 0.11em 0.11em 0.22em #000a}
.bs12 {box-shadow: 0.12em 0.12em 0.24em #0006}
.bs13 {box-shadow: 0.13em 0.13em 0.26em #000a}
.bs14 {box-shadow: 0.14em 0.14em 0.28em #0006}
.bs15 {box-shadow: 0.15em 0.15em 0.30em #000a}
.bs16 {box-shadow: 0.16em 0.16em 0.32em #0006}
.bs17 {box-shadow: 0.17em 0.17em 0.34em #000a}
.bs18 {box-shadow: 0.18em 0.18em 0.36em #0006}
.bs19 {box-shadow: 0.19em 0.19em 0.38em #000a}
.bs20 {box-shadow: 0.20em 0.20em 0.40em #0006}
.bs21 {box-shadow: 0.21em 0.21em 0.42em #000a}
.bs22 {box-shadow: 0.22em 0.22em 0.44em #0006}
.bs23 {box-shadow: 0.23em 0.23em 0.46em #000a}
.bs24 {box-shadow: 0.24em 0.24em 0.48em #0006}
.bs25 {box-shadow: 0.25em 0.25em 0.50em #000a}
/* ** bsi box shadow inset ** */
/* odd are darker with less transparency */
.bsi01 {box-shadow: inset 0.01em 0.01em 0.02em #000a}
.bsi02 {box-shadow: inset 0.02em 0.02em 0.04em #0006}
.bsi03 {box-shadow: inset 0.03em 0.03em 0.06em #000a}
.bsi04 {box-shadow: inset 0.04em 0.04em 0.08em #0006}
.bsi05 {box-shadow: inset 0.05em 0.05em 0.10em #000a}
.bsi06 {box-shadow: inset 0.06em 0.06em 0.12em #0006}
.bsi07 {box-shadow: inset 0.07em 0.07em 0.14em #000a}
.bsi08 {box-shadow: inset 0.08em 0.08em 0.16em #0006}
.bsi09 {box-shadow: inset 0.09em 0.09em 0.18em #000a}
.bsi10 {box-shadow: inset 0.10em 0.10em 0.20em #0006}
.bsi11 {box-shadow: inset 0.11em 0.11em 0.22em #000a}
.bsi12 {box-shadow: inset 0.12em 0.12em 0.24em #0006}
.bsi13 {box-shadow: inset 0.13em 0.13em 0.26em #000a}
.bsi14 {box-shadow: inset 0.14em 0.14em 0.28em #0006}
.bsi15 {box-shadow: inset 0.15em 0.15em 0.30em #000a}
.bsi16 {box-shadow: inset 0.16em 0.16em 0.32em #0006}
.bsi17 {box-shadow: inset 0.17em 0.17em 0.34em #000a}
.bsi18 {box-shadow: inset 0.18em 0.18em 0.36em #0006}
.bsi19 {box-shadow: inset 0.19em 0.19em 0.38em #000a}
.bsi20 {box-shadow: inset 0.20em 0.20em 0.40em #0006}
.bsi21 {box-shadow: inset 0.21em 0.21em 0.42em #000a}
.bsi22 {box-shadow: inset 0.22em 0.22em 0.44em #0006}
.bsi23 {box-shadow: inset 0.23em 0.23em 0.46em #000a}
.bsi24 {box-shadow: inset 0.24em 0.24em 0.48em #0006}
.bsi25 {box-shadow: inset 0.25em 0.25em 0.50em #000a}
/* Fast Colors */
.ci {color: initial}
.ch {color: inherit}
.bgi {background-color: initial}
.bgh {background-color: inherit}
.bgc {background-color: currentColor}
.bci {border-color: initial}
.bch {border-color: inherit}
.bcc {border-color: currentColor}
/* HTML Named Colors */
/* First letter: c = color, bg = background-color, bc = border-color */
/* The next letter (first letter of the color) is upper case to prevent conflicts */
.cBlk,.cB,.cBk,.cBlack{color:Black}
.bgBlk,.bgBk,.bgBlack{background-color:Black}
.bcBlk,.bcBk,.bcBlack{border-color:Black}
.cBrn,.cBr,.cBrown{color:#840}
.bgBrn,.bgBn,.bgBrown{background-color:#840}
.bcBrn,.bcBn,.bcBrown{border-color:#840}
.cNvy,.cN,.cNavy{color:Navy}
.bgNvy,.bgN,.bgNavy{background-color:Navy}
.bcNvy,.bcN,.bcNavy{border-color:Navy}
.cBlu,.cBl,.cBlue{color:Blue}
.bgBlu,.bgB,.bgBlue{background-color:Blue}
.bcBlu,.bcB,.bcBlue{border-color:Blue}
.cYlw,.cY,.cYellow{color:Yellow}
.bgYlw,.bgY,.bgYellow{background-color:Yellow}
.bcYlw,.bcY,.bcYellow{border-color:Yellow}
.cRed,.cR{color:Red}
.bgRed,.bgR{background-color:Red}
.bcRed,.bcR{border-color:Red}
.cOrg,.cO,.cOrange{color:#F80}
.bgOrg,.bgO,.bgOrange{background-color:#F80}
.bcOrg,.bcO,.bcOrange{border-color:#F80}
.cTan,.cTn{color:#CA0}
.bgTan,.bgTn{background-color:#CA0}
.bcTan,.bcTn{border-color:#CA0}
.cMrn,.cMn,.cMaroon{color:Maroon}
.bgMrn,.bgMn,.bgMaroon{background-color:Maroon}
.bcMrn,.bcMn,.bcMaroon{border-color:Maroon}
.cPur,.cP,.cPurple{color:Purple}
.bgPur,.bgP,.bgPurple{background-color:Purple}
.bcPur,.bcP,.bcPurple{border-color:Purple}
.cMag,.cMagenta,.cM,.cFsh,.cF,.cFuchsia{color:Fuchsia}
.bgMag,.bgMagenta,.bgM,.bgFsh,.bgF,.bgFuchsia{background-color:Fuchsia}
.bcMag,.bcMagenta,.bcM,.bcFsh,.bcF,.bcFuchsia{border-color:Fuchsia}
.cOlv,.cOv,.cOlive{color:Olive}
.bgOlv,.bgOv,.bgOlive{background-color:Olive}
.bcOlv,.bcOv,.bcOlive{border-color:Olive}
.cGrn,.cG,.cGreen{color:Green}
.bgGrn,.bgG,.bgGreen{background-color:Green}
.bcGrn,.bcG,.bcGreen{border-color:Green}
.cTea,.cT,.cTeal{color:Teal}
.bgTea,.bgT,.bgTeal{background-color:Teal}
.bcTea,.bcT,.bcTeal{border-color:Teal}
.cLim,.cL,.cLime{color:Lime}
.bgLim,.bgL,.bgLime{background-color:Lime}
.bcLim,.bcL,.bcLime{border-color:Lime}
.cAqu,.cA,.cAqua{color:Aqua}
.bgAqu,.bgA,.bgAqua{background-color:Aqua}
.bcAqu,.bcA,.bcAqua{border-color:Aqua}
.cGry,.cGy,.cGray,.cGrey{color:Gray}
.bgGry,.bgGy,.bgGray,.bgGrey{background-color:Gray}
.bcGry,.bcGy,.bcGray,.bcGrey{border-color:Gray}
.cSlv,.cS,.cSilver{color:Silver}
.bgSlv,.bgS,.bgSilver{background-color:Silver}
.bcSlv,.bcS,.bcSilver{border-color:Silver}
.cWht,.cW,.cWhite{color:White}
.bgWht,.bgW,.bgWhite{background-color:White}
.bcWht,.bcW,.bcWhite{border-color:White}
/* NUMERICAL GREYS */
.cG0{color:#000}
.cG1{color:#111}
.cG2{color:#222}
.cG3{color:#333}
.cG4{color:#444}
.cG5{color:#555}
.cG6{color:#666}
.cG7{color:#777}
.cG8{color:#888}
.cG9{color:#999}
.cGa{color:#aaa}
.cGb{color:#bbb}
.cGc{color:#ccc}
.cGd{color:#ddd}
.cGe{color:#eee}
.cGf{color:#fff}
.bgG0{background-color:#000}
.bgG1{background-color:#111}
.bgG2{background-color:#222}
.bgG3{background-color:#333}
.bgG4{background-color:#444}
.bgG5{background-color:#555}
.bgG6{background-color:#666}
.bgG7{background-color:#777}
.bgG8{background-color:#888}
.bgG9{background-color:#999}
.bgGa{background-color:#aaa}
.bgGb{background-color:#bbb}
.bgGc{background-color:#ccc}
.bgGd{background-color:#ddd}
.bgGe{background-color:#eee}
.bgGf{background-color:#fff}
.bcG0{border-color:#000}
.bcG1{border-color:#111}
.bcG2{border-color:#222}
.bcG3{border-color:#333}
.bcG4{border-color:#444}
.bcG5{border-color:#555}
.bcG6{border-color:#666}
.bcG7{border-color:#777}
.bcG8{border-color:#888}
.bcG9{border-color:#999}
.bcGa{border-color:#aaa}
.bcGb{border-color:#bbb}
.bcGc{border-color:#ccc}
.bcGd{border-color:#ddd}
.bcGe{border-color:#eee}
.bcGf{border-color:#fff}
/* deprecated grays */
.gr1, .gray1 {color: #111}
.bggr1, .bggray1 {background-color: #111}
.bcgr1, .bcgray1 {border-color: #111}
.gr2, .gray2 {color: #222}
.bggr2, .bggray2 {background-color: #222}
.bcgr2, .bcgray2 {border-color: #222}
.gr3, .gray3 {color: #333}
.bggr3, .bggray3 {background-color: #333}
.bcgr3, .bcgray3 {border-color: #333}
.gr4, .gray4 {color: #444}
.bggr4, .bggray4 {background-color: #444}
.bcgr4, .bcgray4 {border-color: #444}
.gr5, .gray5 {color: #555}
.bggr5, .bggray5 {background-color: #555}
.bcgr5, .bcgray5 {border-color: #555}
.gr6, .gray6 {color: #666}
.bggr6, .bggray6 {background-color: #666}
.bcgr6, .bcgray6 {border-color: #666}
.gr7, .gray7 {color: #777}
.bggr7, .bggray7 {background-color: #777}
.bcgr7, .bcgray7 {border-color: #777}
.gr8, .gray8 {color: #888}
.bggr8, .bggray8 {background-color: #888}
.bcgr8, .bcgray8 {border-color: #888}
.gr9, .gray9 {color: #999}
.bggr9, .bggray9 {background-color: #999}
.bcgr9, .bcgray9 {border-color: #999}
.gra, .graya {color: #aaa}
.bggra, .bggraya {background-color: #aaa}
.bcgra, .bcgraya {border-color: #aaa}
.grb, .grayb {color: #bbb}
.bggrb, .bggrayb {background-color: #bbb}
.bcgrb, .bcgrayb {border-color: #bbb}
.grc, .grayc {color: #ccc}
.bggrc, .bggrayc {background-color: #ccc}
.bcgrc, .bcgrayc {border-color: #ccc}
.grd, .grayd {color: #ddd}
.bggrd, .bggrayd {background-color: #ddd}
.bcgrd, .bcgrayd {border-color: #ddd}
.gre, .graye {color: #eee}
.bggre, .bggraye {background-color: #eee}
.bcgre, .bcgraye {border-color: #eee}
/* end deprecated */
/* * Pastel Light BGs for use with text * */
/* ** All BGs below are suitable for body text
with text color: #000; and 18px font * */
/* **
LIGHT BACKGROUNDS
First Letter:
p: Pastel (very light)
l: Light
m: Medium
Last Letter is Color:
R red
P purple
L lavender
B blue
G green
T tan
O orange
Y yellow
E beige
W white
S silver
A "Accessible" (experimental low fatigue BG)
REVISED: reduced the #ff channels to #f8 in most cases.
** */
/* red */
.pR, .pbgR {background-color: #f8e8e8}
.lR, .lbgR {background-color: #f8dddd}
.mR, .mbgR {background-color: #f8cccc}
/* purple */
.pP, .pbgP {background-color: #f8e8f8}
.lP, .lbgP {background-color: #f8ddf8}
.mP, .mbgP {background-color: #f8ccf8}
/* lavender */
.pL, .pbgL {background-color: #e8e4f8}
.lL, .lbgL {background-color: #E2daf8}
.mL, .mbgL {background-color: #cbc8f8}
/* blue */
.pB, .pbgB {background-color: #e0f0f8}
.lB, .lbgB {background-color: #daeafa}
.mB, .mbgB {background-color: #bbdbfb}
/* green */
.pG, .pbgG {background-color: #e0f8e0}
.lG, .lbgG {background-color: #c8f8c8}
.mG, .mbgG {background-color: #a8f8bb}
/* tan */
.pT, .pbgT {background-color: #f4f0e4}
.lT, .lbgT {background-color: #f8e8c8}
.mT, .mbgT {background-color: #f8d8a8}
/* orange */
.pO, .pbgO {background-color: #f8f0a0}
.lO, .lbgO {background-color: #f8e080}
.mO, .mbgO {background-color: #f8b866}
/* yellow */
.pY, .pbgY {background-color: #f4f4dd}
.lY, .lbgY {background-color: #f4f4bb}
.mY, .mbgY {background-color: #f0f088}
/* beige */
.pE, .pbgE {background-color: #f4f0cc}
.lE, .lbgE {background-color: #e4e0bb}
.mE, .mbgE {background-color: #cccaaa}
/* white */
.pW, .pbgW {background-color: #f1f8f2}
.lW, .lbgW {background-color: #f2f8fa}
.mW, .mbgW {background-color: #f4f0f4}
/* silver */
.pS, .pbgS {background-color: #e8e8e8}
.lS, .lbgS {background-color: #ddd}
.mS, .mbgS {background-color: #ccc}
/* Accessible Low Fatigue White */
.pA, .pbgA {background-color: #e6e2dd}
.lA, .lbgA {background-color: #e0ddcc}
.mA, .mbgA {background-color: #ddd8d0}
/* LUV LCh MAX Colors */
/* Maximum saturation LUV LCh colors in 5 degree increments */
/* "luv" and the LUV hue angle. color = luv360, border is bcluv360 */
/* Note: Due to the high saturation, they are not listed for background */
.luv360,
.luv000 {color: #ff006e}
.luv005 {color: #ff0056}
.luv010 {color: #ff002f} /* red */
.luv015 {color: #ff3800}
.luv020 {color: #ff5900}
.luv025 {color: #ff6f00}
.luv030 {color: #ff8000}
.luv035 {color: #ff8e01} /* orange */
.luv040 {color: #ff9b00}
.luv045 {color: #ffa600}
.luv050 {color: #ffb100}
.luv055 {color: #ffbb00}
.luv060 {color: #ffc600}
.luv065 {color: #ffcf00}
.luv070 {color: #ffda00}
.luv075 {color: #ffe500}
.luv080 {color: #fff000}
.luv085 {color: #fffd00} /* yellow */
.luv090 {color: #f3ff00}
.luv095 {color: #e5ff00}
.luv100 {color: #d5ff00}
.luv105 {color: #c4ff00}
.luv110 {color: #b1ff00}
.luv115 {color: #99ff00}
.luv120 {color: #7bff00}
.luv125 {color: #4dff00}
.luv130 {color: #00ff46} /* green */
.luv135 {color: #00ff75}
.luv140 {color: #00ff90}
.luv145 {color: #00ffa4}
.luv150 {color: #00ffb3}
.luv155 {color: #00ffc0}
.luv160 {color: #00ffca}
.luv165 {color: #00ffd4}
.luv170 {color: #00ffdd}
.luv175 {color: #00ffe5}
.luv180 {color: #00ffed}
.luv185 {color: #00fff5}
.luv190 {color: #00fffc} /* cyan */
.luv195 {color: #00faff}
.luv200 {color: #00f3ff}
.luv205 {color: #00ecff}
.luv210 {color: #00e5ff}
.luv215 {color: #00ddff}
.luv220 {color: #00d6ff}
.luv225 {color: #00ceff}
.luv230 {color: #00c5ff}
.luv235 {color: #01bcff}
.luv240 {color: #00b0ff} /* blue */
.luv245 {color: #00a5ff}
.luv250 {color: #0095ff}
.luv255 {color: #0081ff}
.luv260 {color: #0065ff}
.luv265 {color: #0028ff} /* violet */
.luv270 {color: #5900ff}
.luv275 {color: #8000ff}
.luv280 {color: #9c00ff} /* deep purple */
.luv285 {color: #b200ff}
.luv290 {color: #c500ff}
.luv295 {color: #d700ff}
.luv300 {color: #e700ff}
.luv305 {color: #f700ff}
.luv310 {color: #ff00f8} /* magenta */
.luv315 {color: #ff00ea}
.luv320 {color: #ff00dc}
.luv325 {color: #ff00d0}
.luv330 {color: #ff00c4}
.luv335 {color: #ff00b7}
.luv340 {color: #ff00ab}
.luv345 {color: #ff009e}
.luv350 {color: #ff0090}
.luv355 {color: #ff0080}
/* luv border colors */
.bcluv360,
.bcluv000 {border-color: #ff006e}
.bcluv005 {border-color: #ff0056}
.bcluv010 {border-color: #ff002f}
.bcluv015 {border-color: #ff3800}
.bcluv020 {border-color: #ff5900}
.bcluv025 {border-color: #ff6f00}
.bcluv030 {border-color: #ff8000}
.bcluv035 {border-color: #ff8e01}
.bcluv040 {border-color: #ff9b00}
.bcluv045 {border-color: #ffa600}
.bcluv050 {border-color: #ffb100}
.bcluv055 {border-color: #ffbb00}
.bcluv060 {border-color: #ffc600}
.bcluv065 {border-color: #ffcf00}
.bcluv070 {border-color: #ffda00}
.bcluv075 {border-color: #ffe500}
.bcluv080 {border-color: #fff000}
.bcluv085 {border-color: #fffd00}
.bcluv090 {border-color: #f3ff00}
.bcluv095 {border-color: #e5ff00}
.bcluv100 {border-color: #d5ff00}
.bcluv105 {border-color: #c4ff00}
.bcluv110 {border-color: #b1ff00}
.bcluv115 {border-color: #99ff00}
.bcluv120 {border-color: #7bff00}
.bcluv125 {border-color: #4dff00}
.bcluv130 {border-color: #00ff46}
.bcluv135 {border-color: #00ff75}
.bcluv140 {border-color: #00ff90}
.bcluv145 {border-color: #00ffa4}
.bcluv150 {border-color: #00ffb3}
.bcluv155 {border-color: #00ffc0}
.bcluv160 {border-color: #00ffca}
.bcluv165 {border-color: #00ffd4}
.bcluv170 {border-color: #00ffdd}
.bcluv175 {border-color: #00ffe5}
.bcluv180 {border-color: #00ffed}
.bcluv185 {border-color: #00fff5}
.bcluv190 {border-color: #00fffc}
.bcluv195 {border-color: #00faff}
.bcluv200 {border-color: #00f3ff}
.bcluv205 {border-color: #00ecff}
.bcluv210 {border-color: #00e5ff}
.bcluv215 {border-color: #00ddff}
.bcluv220 {border-color: #00d6ff}
.bcluv225 {border-color: #00ceff}
.bcluv230 {border-color: #00c5ff}
.bcluv235 {border-color: #01bcff}
.bcluv240 {border-color: #00b0ff}
.bcluv245 {border-color: #00a5ff}
.bcluv250 {border-color: #0095ff}
.bcluv255 {border-color: #0081ff}
.bcluv260 {border-color: #0065ff}
.bcluv265 {border-color: #0028ff}
.bcluv270 {border-color: #5900ff}
.bcluv275 {border-color: #8000ff}
.bcluv280 {border-color: #9c00ff}
.bcluv285 {border-color: #b200ff}
.bcluv290 {border-color: #c500ff}
.bcluv295 {border-color: #d700ff}
.bcluv300 {border-color: #e700ff}
.bcluv305 {border-color: #f700ff}
.bcluv310 {border-color: #ff00f8}
.bcluv315 {border-color: #ff00ea}
.bcluv320 {border-color: #ff00dc}
.bcluv325 {border-color: #ff00d0}
.bcluv330 {border-color: #ff00c4}
.bcluv335 {border-color: #ff00b7}
.bcluv340 {border-color: #ff00ab}
.bcluv345 {border-color: #ff009e}
.bcluv350 {border-color: #ff0090}
.bcluv355 {border-color: #ff0080}
/* ************************************************************************** */
/* ********** END OF TinyTrim™ ****************************************** */
/* ************************************************************************** */
/* Myndex Specials (remove from release) */
.cMb, .cMx {color: #30A}
.bgMb, .bgMx {background-color: #30A}
.bcMb, .bcMx {border-color: #30A}
.cMye, .cMxy, .cMyellow {color: #DB5}
.bgMye, .bgMxy, .bgMyellow {background-color: #DB5}
.bcMye, .bcMxy, .bcMyellow {border-color: #DB5}
/* ************************************************************************** */
/* ********** PAGE ADD ONS ********************************************** */
/* ************************************************************************** */
.wrapper { padding: 4px 12px 12px; }
#main_content { padding: 36px 24px 12px; }
.headBanner {
position: relative;
z-index: 10;
margin: 0;
padding: 4px 12px;
}
.headBanner h1 {
position: relative;
z-index: 20;
margin: -20px 0 0;
text-align: left;
font-family: Audiowide, Oxanium, Montserrat, sans-serif;
font-size: 6em;
font-weight: 600;
color: var(--modeMyndex);
}
.headBanner h1.head2 {
position: relative;
z-index: 4;
margin: -1.18em 0 0;
opacity: 0.2;
}
.headBanner h1.head3 {
position: relative;
z-index: 3;
margin: -1.17em 0 0;
opacity: 0.15;
}
.headBanner h1.head4 {
position: relative;
z-index: 2;
margin: -1.16em 0 0;
opacity: 0.1;
}
.headBanner h1.head5 {
position: relative;
z-index: 1;
margin: -1.15em 0 0;
opacity: 0.05;
}
.headBanner h1 a, .headBanner h1 a:visited,
.headBanner h1 a:link { text-align: left; font-size: 1em; text-decoration: none;
color: var(--modeMyndex);
}
.headBanner h1 a:hover { text-align: left; font-size: 1em; text-decoration: none;
color: var(--modeMyndex);
}
.headBanner h1.bglite {
position: absolute;
z-index: -1;
margin: -9px -36px;
text-align: left;
font-family: Audiowide, Oxanium, Montserrat, sans-serif;
font-size: 9.3em;
font-weight: 600;
color: var(--modeMyndexBGlite);
}
.headBanner h2 {
max-width: 600px;
margin: 0;
padding: 0 8px;
text-align: left;
line-height: 1.35;
font-family: Oxanium, Montserrat, sans-serif;
font-size: 1.5em;
font-weight: 500;
}
section h1 {
margin: 0;
text-align: center;
font-family: Audiowide, Oxanium, Montserrat, sans-serif;
font-size: 2.6em;
font-weight: 600;
color: var(--modeH1color);
}
section > h1 {
z-index: 20;
position: relative;
margin: 0;
text-align: left;
font-size: 2.6em;
}
#issue-threads--comments {font-size: 2.6em;}
#accurate-contrastusing-the-apca { margin: -12px 0; font-size: 3em;}
#myndex-articles--links > p {font-size: 1.4em; margin: 2px 42px 12px 24px;
color: var(--modeMyndex);
}
.perceptex {
padding: 0;
text-align: center;
font-family: Montserrat, sans-serif;
font-weight: 200;
color: var(--modeMyndex);
}
.perceptex .he1 {
margin: 0 0 -15px;
padding: 0;
font-size: 46px;
}
.perceptex .he2 {
margin: 0;
padding: 0 0 0 1.5px;
font-size: 37px;
}
#svg16 {
position: relative;
left: 1em;
bottom: 0.5em;
}
/* ************************************************************************** */
/* ***** MEDIA QUERIES ************************************************** */
/* ************************************************************************** */
/* ************************************************************************** */
/* ***** MEDIA QUERIES ************************************************** */
/* ************************************************************************** */
/* ************************************************************************** */
/* ***** MEDIA QUERIES ************************************************** */
/* ************************************************************************** */
@media (max-width: 899.99px) {
.wrapper { padding: 0.5vw 1vw 1vw; }
#main_content { padding: 1vw; }
.headBanner {
padding: 0.5vw 1vw;
}
.headBanner h1 {
margin: -1.5vw 0 0;
font-size: 12vw;
}
.headBanner h1.bglite {
margin: 0 -3vw;
font-size: 20vw;
}
section h1 {
margin: 0;
font-size: 6vw;
}
section > h1 {
z-index: 20;
margin: -6vw 0 0;
font-size: 6vw;
}
#issue-threads--comments {font-size: 6vw;}
#accurate-contrastusing-the-apca { margin: -1.5vw 0; font-size: 6vw;}
#myndex-articles--links > p {margin: 0.3vw 2vw 1.5vw 2vw;}
.headBanner h2 {
max-width: 80vw;
margin: 0;
padding: 0 1vw;
font-size: 4vw;
}
.perceptex .he1 {
margin: 0 0 -1.67vw;
padding: 0;
font-size: 5vw;
}
.perceptex .he2 {
margin: 0;
padding: 0 0 0 0.167vw;
font-size: 4vw;
}
#svg16 {
max-width: 10vw;
max-height: 10vw;
}
}
@media (min-width: 900px) {
}
/* ************************************************************************** */
/* ***** END MEDIA QUERIES ********************************************** */
/* ************************************************************************** */
.apca, span.apca, .audiowide {
position: relative;
font-family: Audiowide, Oxanium, Montserrat, sans-serif;
font-weight: 600;
letter-spacing: 0;
}
section h1 a:link {
text-decoration: none;
border: 2px solid currentColor;
border-width: 0 0 2px 0;
}
section h1 a:visited {
}
section h1 a:hover {
border: none;
}
section h1 a:visited:hover {
border: none;
}
section h1 a:active {
border: none;
}
.flipH, .apca .flipH {
display: inline-block;
margin:0;
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.audiowide sup {
font-size: 0.5em;
font-family: Montserrat, sans-serif;
font-weight: 400;
line-height: 0.4;
baseline-shift: 0.4em;
}
.apca:after {
position:relative;
top:-0.65em;
content: '™';
font-size: 0.5em;
font-family: Montserrat, sans-serif;
font-weight: 400;
line-height: 0.2;
text-decoration: none;
}
a .apca, a.apca {
position:relative;
text-decoration: none;
border: 1px solid currentColor;
border-width: 0 0 2px 0;
}
a:hover.apca, a.apca:hover {
position:relative;
text-decoration: none;
border: none;
}
/* * IMPORTED FROM SLIDERS * */
.colorSliders {}
/* * END SLIDERS * */
.colorPicker {border-radius: 18px;}
#inputTXT,
#inputBG {
border-radius: 12px;
text-align: center;
}
.conformScore th.tableTitle {
position: relative;
font-weight: 600;
}
#tableSamples #BGpicker,
#tableSamples #TXTpicker {
position: relative;
margin: auto;
width: 75px;
min-height: 75px;
border-width: 2px solid var(--modeBorderColor, #a0a0a0);
border-radius: 12px;
z-index: 10;
}
.innerwrapper {
position: relative;
max-width: 1024px;
margin: 0 auto;
}
.infobox {
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 1rem 0 2rem 8rem;
gap: 3rem;
flex-wrap: wrap;
}
.infobox div {
flex: 1 1 45%;
}
.infobox p {
margin: 0 0 0.75em;
}
.sciencelinks {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2rem 0;
}
.sciencelinks a {
color: var(--modeMyndex);
text-decoration: none;
margin: 0;
}
.gammaContainer {
padding: 1rem;
}
.explainers {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 1rem 1rem 1rem 16vw;
gap: 2rem;
padding: 12px;
max-width: 1100px;
}
.explainer h2 {
font-size: 1.65rem;
}
.explainer h3 {
font-size: 1.35rem;
}
.betanotice {
padding: 20px;
background-color: var(--modeBGalert);
}
.betanotice h3 {
margin: 0;
}
#demoArea { text-align: left; }
footer .innerwrapper {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
}
footer .innerwrapper div {
flex: 1 1 45%;
}
/* ************************************************************************** */
/* ********** END PAGE ADD ONS ****************************************** */
/* ************************************************************************** */
/* ************************************************************************** */
/* ***** END OF SHEET *************************************************** */
/* ************************************************************************** */