html { font-size: 2.4vw; }
@media all and (min-width:1000px) { html { font-size: 24px; } }
@media all and (max-width:520px) { html{ font-size: 18px; } }

/* body text base styles */
/* also see adjustments for topic.small emphasis */

.body-text_equity {
    font-family: equity-text;
    line-height: 1.4;
    font-size: 0.98rem;
    font-feature-settings: 'onum' 1;;
}

.body-text_century-supra {
    font-family: century-supra-text;
    line-height: 1.46;
    font-size: 0.93rem;
    font-feature-settings: 'onum' 1;;
}

.body-text_valkyrie {
    font-family: valkyrie-text;
    line-height: 1.45;
    font-size: 0.91rem;
    font-feature-settings: 'onum' 1;;
}

.body-text_concourse {
    font-family: concourse-text;
    line-height: 1.35;
    font-size: 1rem;
}

.body-text_hermes-maia {
    font-family: hermes-maia-text;
    line-height: 1.52;
    font-size: 0.88rem;
}

.body-text_triplicate {
    font-family: triplicate-text;
    line-height: 1.45;
    font-size: 0.85rem;
    font-feature-settings: 'ss01' 1;;
}

.body-text_equity .small-caps,
.body-text_equity sig,
.body-text_equity .subhead,
.body-text_equity .howto-name,
.body-text_equity a.xref {
    font-family: equity-caps;
}

.body-text_valkyrie .small-caps,
.body-text_valkyrie sig,
.body-text_valkyrie .subhead,
.body-text_valkyrie .howto-name,
.body-text_valkyrie a.xref {
    font-family: valkyrie-caps;
}

.body-text_century-supra .small-caps,
.body-text_century-supra sig,
.body-text_century-supra .subhead,
.body-text_century-supra .howto-name,
.body-text_century-supra a.xref {
    font-family: century-supra-caps;
}

.body-text_concourse .small-caps,
.body-text_concourse sig,
.body-text_concourse .subhead,
.body-text_concourse .howto-name,
.body-text_concourse a.xref {
    font-family: concourse-caps;
}

.body-text_hermes-maia .small-caps,
.body-text_hermes-maia sig,
.body-text_hermes-maia .subhead,
.body-text_hermes-maia .howto-name,
.body-text_hermes-maia a.xref {
    font-family: hermes-maia-caps;
}

.body-text_triplicate .small-caps,
.body-text_triplicate sig,
.body-text_triplicate .subhead,
.body-text_triplicate .howto-name,
.body-text_triplicate a.xref {
    font-family: triplicate-caps;
    font-feature-settings: 'ss01' 1;;
}

* {
    margin: 0;
    padding: 0;
}

li { column-break-inside: avoid;
break-inside: avoid-column;

}


html {
    height: 100%;
}

body {
    margin-left:auto;
    margin-right:auto;
    width: 100%;
    max-width: 1000px;
    min-height: 100%;
    text-rendering: optimizeLegibility;
font-feature-settings: 'kern' 1;

    text-rendering: optimizeLegibility;
font-feature-settings: 'liga' 1;

    position: relative; z-index: -10000; -webkit-font-smoothing: subpixel-antialiased; /* corrects safari rendering */
}

div#content { /* wraps both main and subnavigation */
    padding: 3rem 0 1rem 0;
    margin-left: 12rem;
    margin-right: 2.5rem;
}

@media all and (max-width:520px) {
    div#content {
        margin: 1.5rem;
        padding: 0;
    }
}


topic {
    display: block;
    font-family: "advocate-c41";
    font-size: 2.3rem; text-transform: uppercase;
    font-style: normal;
    line-height: 1.1;
    margin-top: 1rem;
    margin-bottom: 2rem;
    border-top: 1px solid #333;
    padding-top: 0.02em;
    hyphens: none;
}

topic.small {
    font-family: inherit;
    font-size: 170%; text-transform: inherit;
    font-style: italic;
    padding-top: 0.1em;
    padding-bottom: 0.15em;
}

.body-text_hermes-maia topic.small,
.body-text_concourse topic.small {
    font-style: normal;
    font-weight: bolder;
    color: #333;
}

topic.commentary {
    font-size: 2.1rem;
    border-top: none;
    border-bottom: 1px solid black;
    padding-bottom: 0.75rem;
    line-height: 1;
    margin-bottom: 0.6rem;
}

topic.dmb {
  font-family: advocate-c53;
  font-style: normal;
  text-transform: uppercase;
  font-size: 1.7rem;
}

topic.dmb:after{
    content: "designed by someone";
    font-size: 50%;
    margin-left: 1rem;
}


title-block topic {
font-family: inherit;
text-transform: inherit;
letter-spacing: inherit;
font-size: 125%;
line-height: 1.10;
border-bottom: inherit;
margin-top: 0rem;
margin-bottom: 0.8rem;
font-weight: bolder;
border-top: 0;
padding-top: 0;
}

topic + p {
font-size: 115%;
}


pronunciation {
font-family: "concourse-t3";
}

sig {
display: block;
text-align: right;
text-transform: lowercase;
font-feature-settings: 'c2sc' 1;

margin-bottom: 5em;
margin-right: 0.5rem; }


aside p {
font-family: "concourse-t3";
font-size: 0.85rem;
line-height: 1.4;
color: #667;
letter-spacing: 0.015em;
hyphens: none;
}

.no_onum {
    font-feature-settings: 'onum' 0;;
}


title-block, aside {
display: block;
float: left;
position: absolute;
margin-left: 0;
left: 2.5rem;
width: calc(2.5rem * 3);
text-align: right;
list-style-type: none;
clear:both; margin-bottom: 1rem; font-feature-settings: 'onum' 0;;
}

@media all and (min-width:1200px) {
    aside {
        left : 0;
        width: calc(2.5rem * 4);
    }
}

@media all and (max-width:520px) {
    title-block, aside { float: inherit;
    position: inherit;
    width: 100%;
    text-align: left;}

    aside {
        background: #fefefe;
        padding: 0.3rem 0.5rem;
        width: 90%;
        border: 1px solid #ccc;
        border-left: 3px solid #ccc;
    }

    aside > p:last-child {
        margin-bottom: 0;
    }
}

title-block {
margin-bottom: 2em;
border-top: solid 3px #333;
padding-top: 5px;
}


p.deck {
    font-size: 115%;
    font-weight: bolder;
    line-height: 1.25;
    hyphens: none;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

stressed {
font-weight: bolder;
}

book, first-use, phrase {
font-style: italic;
}




short-rule {
display: block;
font-size: 100%;
line-height: 1.25;
font-style: italic;
hyphens: none;
}


p, li {
margin-bottom: 1em;
}





.indented, .book-description {
display: block;
margin-bottom: 1em;
line-height: 1.35;
margin-left: 2.5rem; }

ol {
    counter-reset: foobar;
}

ol li, ul li {
    margin-left: 2.5rem; list-style: none;
}


ol li:before {
    counter-increment: foobar;
    content: counter(foobar);
    font-family: "concourse-t3-index";
    font-feature-settings: 'ss01' 0;;
    font-size: 1.10rem;
    position: absolute;
    margin-left: -2.5rem;
}

ul li:before {
    content: "•";
    position: absolute;
    margin-left: -2.5rem;
}


ul.children { font-size: 95%;
column-count: 2;
column-gap: 2.5rem;

list-style-type: none;
}

ul.children li {
    margin-left: 2em;
}

ul.children li:before {
    margin-left: -2em;
    padding-right: 1.5em;
    position: static; /* because they're in columns */
}

@media all and (max-width:520px) {
ul.children {
font-size: 100%;
column-count: 1;
column-gap: 2em;

}
}



ul.children li {
margin-bottom: 0;
padding-bottom: 1em;

}

.font-alternatives {
    margin-bottom: 1.5rem;
}

.font-alternatives ul { list-style-type: none;
}

.font-alternatives ul li {
    margin-left: 0;
}

.font-alternatives ul li:before {
    content: none;
}

.font-alternatives img {
    padding : 0;
    margin: 0;
}

aside phrase {
font-weight: bolder;
font-style: normal;
}


aside em{
font-weight: bolder;
font-style: normal;
letter-spacing: 0px;
}

aside img {
    margin-bottom: 0.25em;
}

run-in {
text-transform: lowercase;
padding-right: 0.4em;
font-family: "concourse-c4";
}


glyph {
margin-left: 0.2em;
margin-right: 0.2em;
position: relative;
bottom: -0.0em;
font-weight: bolder;
}

glyph.straight-quote-glyph {
font-family: "concourse-t3";
}


table { margin-bottom: 1.5em;
border-collapse: collapse;
width: 95%;
}

table.shortcut {
font-size: 0.9rem;
font-feature-settings: 'onum' 0;
}

table.shortcut td {
    line-height: 1.3;
}

table tr + tr {
border-top: 1px solid #ccc;
}
table td + td {
border-left: 1px solid #ccc;
}


table td {
padding: 0.4em;
text-align: center;
hyphens: none;
}

table th {
font-family: "concourse-c4";
font-weight: normal;
text-transform: lowercase;
font-size: 95%;
padding: 0.3rem 0.5rem ;
line-height: 1.05;
}

table.shortcut glyph {
    font-size: 1.8rem;
    line-height: .70;
    top: 0.0rem;
}


.instruction {
    font-family: "concourse-t3";
    font-style: italic;
}

.instruction glyph {
    font-style: normal;
    font-weight: normal;
}

p.example {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

p.example + p.example {
    margin-top: 0rem;
}

table.example {
    width: auto;
    margin-left: 2.5rem;
    margin-bottom: 1.2rem;
    border-collapse: collapse;
    line-height: 1.2;
    font-size: 1rem;
}

.btw table.example {
    margin-left: 0; }

table.example tr + tr {
    border-top: 0;
}

table.example td {
    text-align: left;
    vertical-align: baseline;
    padding: 0.4rem 1rem 0.4rem 0;

}

table.example td + td {
    border-left: 0px solid #ccc; }


example-text { margin-left: 0rem;
    white-space: nowrap;
    font-family: "concourse-t2";
    font-feature-settings: 'onum' 0;
}

example-text strong {
    font-family: "concourse-t3";
    font-weight: bolder;
}

example-caption {
    font-family: "concourse-c4";
    text-transform: lowercase;
    margin-left: 0.5rem;
    font-size: 0.9rem;
}

spacing-sample {
    display: block;
    margin-left: 2rem;
}

img {
width: 100%;
}


image-caption {
display: block;
font-family: "concourse-c4";
text-transform: lowercase;
}



.howto, .font-details, reader-note {
display: block;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
background: #fcfcfc;
background: radial-gradient(circle at center, #ffffff 17%, #fcfcfc 100%);

padding: 1rem 1rem calc(1rem / 2) 1rem;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
font-feature-settings: 'onum' 0;;
}



.howto > p {
    display: flex;
    align-items: baseline;
    margin-left: calc(2.5rem - 1rem); line-height: 1.2rem;
}

.howto program {
    font-family: "concourse-c4";
    text-transform: lowercase;
font-feature-settings: 'c2sc' 1;
;
    font-size: 110%;
    min-width: 3rem;
    max-width: 3rem;
}

.howto instruction {
    font-family: "concourse-t3";
    font-size: 0.9rem;
    line-height: 1.35;
    font-style: italic;
    border-left: 1px solid #ccc;
    padding-left: 0.5rem;
    margin-left: 0.5rem;
}

.howto instruction code {

}


@media all and (max-width:520px) {
    .howto > p {
        margin-left: 0;
    }
}


.subhead, .howto-name {
text-transform: lowercase;
text-transform: lowercase;
font-feature-settings: 'c2sc' 1;

display: block;
font-weight: bolder;
margin-bottom: 0.8rem;

}

.subhead {
    margin-bottom: 0.4rem;
    margin-top: 1.4rem;
    line-height: 1.3;
}




.btw {
display:block;
margin-top: 2em;
}

.btw-title {
display: block;
text-align: center;
font-family: "concourse-t3";
font-size: 0.8rem;
text-transform: uppercase;
font-feature-settings: 'case' 1;

font-weight: bolder;
letter-spacing: 2px;
margin-bottom: 1em;
padding-bottom: 0.6em;
border-bottom: 4px double #ccc;
margin-left: 25%;
margin-right: 25%;

}

.btw li {
list-style: none;
margin-left: 1.35rem;
padding-left: 1.15rem; margin-bottom: 0.7em;
font-size: 95%; }

.btw li:before {
font-family: "concourse-t3-index";
content: "•"; float:left;
margin-left: -2.5rem;
margin-top: 0.1rem;
}



task {
display:block;
margin-left: 2rem;
margin-bottom: 1rem;
line-height: 1.40;
}

task li {
margin-bottom: 0.7em;
font-size: 0.9rem;
font-family: "concourse-t3";
}



ui {
font-style: normal;
hyphens: none;
}

ui:before {
    content: "‹";
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}

ui:after {
    content: "›";
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}



a {
text-decoration: none;
color: inherit;
transition-property: background;
transition-duration: 0.2s;

}


div.nav a:active div { background: #fdfdfd;
}

a:active { color: #777; }



a:before {
    position: relative;
    content: "\00BB";
    margin-left: 0.10em;
    font-size: 90%;
    top: -0.10em;
    color: #933;
    font-feature-settings: 'caps' 1; /* insures tallest degree is used */
}


a[name]:after{ content: none;
}

a.no-symbol-before:hover {
    background: none;
}

a.no-symbol-before:after {
    content: none;
}


.type-specimen img { display: block;
    border: 1px solid #ddd;
    margin-bottom: 1em;
}

.type-specimen a:after{
    content: none;
}


div > a:after, a.xref:after,
a.sample-document:after {
    content: none;
}


a.xref {
text-transform: lowercase;
font-feature-settings: 'c2sc' 1;

font-style: normal;
hyphens: none;
}

a:hover {
background: #fbf3f3;
transition-property: background;
transition-duration: 0.2s;

border-radius: 8px;
}

.toc a, .toc a:hover {
transition-property: background;
transition-duration: 0s;

}


p.image a img {
    border: 1px solid gray;
}


p.image a:hover img {
    background: none;
    outline: 1px solid gray;
}

.subhead > a:hover {
    background: none;
}

.subhead > a:hover:after {
    margin-left: 0.10em;
    color: #999;
    content: " #";
    position: relative;
    top: -0.08em;
}



.font-alternatives p.image {
    margin-bottom: 0;
}

.font-alternatives a {
    display: block; }

.font-alternatives a img { border: 0;
}

.font-alternatives a:hover { background: none;
}

.font-alternatives a:hover img { outline: 0px solid gray;
}

.font-alternatives a:hover .fontname { background: #fbf3f3;
    transition-property: background;
transition-duration: 0.2s;

    border-radius: 8px;
}

.font-alternatives a .fontname {
    transition-property: background;
transition-duration: 0.2s;

}

a.sample-document img {
    margin-top: 1rem;
}

a.sample-document:hover {
    background: none;
}


p.faq-question{
font-style: italic;
margin-bottom: 0.2em;
}

p.faq-answer{
margin-left: 2em;
margin-bottom: 1em;
display:block;
}

p.faq-answer-source{
display:block;
margin-left: 2em;
margin-bottom: 1em;
position: relative;
top: -0.5em;
}

system-font-list {
    font-family: "concourse-t3";
    font-feature-settings: 'onum' 0;
    display: block;
    font-size: 0.9rem;
    margin-left: 0;
    margin-top : 2rem;
    margin-bottom : 2rem;
}

system-font-items{
    display: block;
    column-count: 3;
column-gap: 2.5rem;

}

@media all and (max-width:520px) {
    system-font-items{
        display: block;
        column-count: 1;
column-gap: 2.5rem;

    }

    system-font-list {
        font-size: 1rem;
        margin-left: 0;
    }

}

system-font-list em {
    font-style: normal;
    font-weight: bolder;
}


monospaced, monospaced-full-size, code {
font-family: triplicate-text;
font-style: normal; font-weight: normal; font-size: 0.85rem;
font-feature-settings: 'onum' 0;
}

code {
font-family: "triplicate-code";
font-size: 95%;
hyphens: none;;
padding: 0 0.2em;
}

monospaced-full-size {
font-size: 100%; }

table.buy-table {
    width: 100%;
    margin-top: 1.5rem;
    font-size: 1rem;
}


table.buy-table td {
    padding: 0;
    height: 3.5rem;
    border: 0;
}

table.buy-table .bundle-row {
    background: #fafafa;
    color: black;
    font-family: concourse-c4;
}

table.buy-table .bundle-row td {
    padding: 0;
    padding-bottom: 0.1em;
    height: auto;
    border: 0;
}

a.specimen, table.buy-table td a, a.direct-payment, .stripe-button {
    height: 100%;
    width: 100%;
    background: #a33;
    color: white;
    padding: 0.3em 0.7em;
    border-radius: 1em;
    font-family: concourse-caps;
    letter-spacing: 0;
    text-transform: uppercase;
font-feature-settings: 'case' 1;
;
    font-feature-settings: 'onum' 0;;
}


a.specimen:hover, table.buy-table td a:hover, a.direct-payment:hover, .stripe-button:hover {
    background: #e33;
    text-decoration: none;
}

a.specimen:active, table.buy-table td a:active, a.direct-payment:active, .stripe-button:active {
    background: #ccc;
}


a.specimen:after, table.buy-table a:after, a.direct-payment:after, .stripe-button:after {
    content: none;
}



.mb-font-specimen {
font-size:1.45rem;
line-height:1.20;
white-space:nowrap;
user-modify: read-write;
outline-style: none;
;
}

.font-details, reader-note{ padding-top: 0.5rem;
    font-family: concourse-t3;
    font-size: 0.8rem;
}

.font-details p, reader-note p{
    margin: 0;
    line-height: 1.40;
}

.font-details p+p, reader-note p+p {
    margin-top: 1em;
}


.editable {
user-modify: read-write;
outline-style: none;
;
}




dquo, dquo-pull {
margin-left: -0.5em;
}

dquo-push {
margin-left: 0.5em;
}

squo, squo-pull {
margin-left: -0.25em;
}

squo-push {
margin-left: 0.25em;
}


.arrow {
    font-family: "concourse-t3";
}








.box-link, .font-change {
    color: #999;
    cursor: pointer;
    padding: 0.3em;
    background: white;
}


.font-change {
    display: inline-block;
    padding: 0.2em;
}


.font-change:hover, .font-change.active {
    color: black;
}



.box-link {
    display: block;
    padding-top: 0.5em;
    padding-bottom: 1em;
    height: 100%;
    vertical-align: inherit;
}


#navtable > div:hover { background-color: #f0f0f0;
    background: #fcf5f5;
background: radial-gradient(circle at top, #ffffff 5%, #fcf5f5 100%);

}

.box-link:hover{
    color: black;
    opacity: 1;
    text-decoration: none;
    background-color: inherit; }


a.nav {
    color: white;
}

a.nav:after {
    content : none;
}


#prev {
    left: 0;
    border-left: 1rem solid white;
}

#prev:hover {
    border-left-color: #fcf6f6;
}

#next {
    right: 0;
    border-right: 1rem solid white;
}
#next:hover {
    border-right-color: #fcf6f6;
}

.side {
    top: 0;
    bottom: 0;
    width: 5rem;
    z-index: -1000;;
    transition-property: border-color;
transition-duration: 0.2s;

    border: solid 0px grey;
    position: fixed;
}



 
#toolbar, #switcher {
    margin: auto;
    left: 2.5rem;
    right: 2.5rem;
    max-width: 1000px;
    font-size: 0.9rem;
    font-family: concourse-caps;
    line-height: 1.25;
    font-feature-settings: 'c2sc' 1;;
    /* user-select needs a browser prefix */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

#toolbar {
    clear: both;
    position: fixed;
    bottom: 0;
    visibility: hidden;
    opacity: 0;
    background: white;
    }

#toolbar.collapsed {
    display: none;
}

#toolbar.visible {
    visibility: visible;
    opacity: inherit;
}


#switcher {
    background: white;
    cursor: pointer;
    border: 1px solid white;
    box-sizing: border-box;
    padding: 0.10em 0.25em 0.15em 0.25em;
    transition-property: opacity;
transition-duration: 0.2s;
;
}

@media all and (max-width:520px) {

    #toolbar {
        min-width: inherit;
        padding-left: 1rem;
        padding-right: 1rem;
        position: static;
    }

    #switcher {
        left: 1rem;
        right: 1rem;
    }
}

.switcher_icon {
    display: inline-block;
    position: relative;
    top: -0.04em;
    font-family: feather;
    font-size: 85%;
    color: gray;
}

.switcher_icon:hover {
    color: inherit;
}

.tooltiptext {
    display: flex;
    align-items: center; /* center vertically */
    justify-content: center; /* center horizontally */
    visibility: hidden;
    opacity: 0;
    background-color: #555;
    color: #fff;
    text-align: center;
    font-family: concourse-caps;
    border-radius: 0.25rem;
    box-sizing: border-box;
    position: absolute;
    width: 4rem;
    left: -1.6rem;
    bottom: 160%;
    height: 1.6rem;
    z-index: 1;
    transition: opacity 0.3s;
}

.tooltiptext::after { 
    content: "";
    position: absolute;
    box-sizing: border-box;
    top: 100%;
    left: 50%;
    margin-left: -.25rem;
    border-width: .25rem;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.switcher_icon:hover .tooltiptext,
#switcher.dragging #switcher_move .tooltiptext {
    visibility: visible;
    opacity: 1;
}

#switcher.dragging #switcher_move {
    color: inherit;
}

#switcher.detached {
    position: fixed;
    z-index: 1000;
    border: 1px solid gray;
    box-shadow: 2px 2px;
}

#switcher_hide {
    visibility: hidden;
    opacity: 0;
}

#switcher.detached #switcher_undock, #switcher_move {
    display: none;
}

#switcher.detached #switcher_move {
    display: inline-block;
}

#switcher_undock,
#switcher_move,
#switcher.detached #switcher_hide {
    visibility: visible;
    margin: auto 0.2em;
}

#switcher.detached #switcher_hide {
    opacity: 1;
}

#navtable {
    display: flex;
    flex-wrap: nowrap;
    opacity: 1;
    z-index: 1;
    border-top: 1px solid gray;
    height: 3.5rem;
}


@media all and (max-width:520px) {
    #navtable {
        flex-wrap: wrap;
        height: auto;
        font-size: 100%;
    }
}


#navtable > div:first-child, #navtable > div:last-child {
     width: 50%;
     flex-grow: 1;
}

@media all and (max-width:520px) {
    #navtable > div:first-child, #navtable > div:last-child {
     width: 100%;
     flex-grow: 0;
    }
}


@media all and (max-width:520px) {
    #navtable > div.center {
     flex-grow: 1;
    }
}


#navtable > div:first-child a {
    padding-right: 1em;
    text-align: left;
}

#navtable > div.center a {
    padding-left: 1em;
    padding-right: 1em;
    text-align: center;
}

#navtable > div:last-child a {
    padding-left: 1em;
    text-align: right;
}

#navtable > div+div {
    border-left: 1px solid rgba(100, 100, 100, 0.3);
}


@media all and (max-width:520px){
    #navtable > div+div {
        border-left: 0;
        border-top: 1px solid gray;
    }
    .center + .center {
        border-left: 1px solid gray;
    }
}


#navtable li:first-child .box-link {
    padding-right: 1em;
}
#navtable li:last-child .box-link {
    padding-left: 1em;
}



/* internet explorer hider */

.ie {
    display: none;
}