@charset "UTF-8";
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/* Set core body defaults */
body {
min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeLegibility;
line-height: 1.5;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
a,
area,
button,
[role=button],
input,
label,
select,
summary,
textarea {
touch-action: manipulation;
}
/* Remove default padding */
ul[class],
ol[class] {
padding: 0;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}
/* Make images easier to work with */
img {
max-width: 100%;
display: block;
height: auto;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@font-face {
font-family: "ui";
font-style: normal;
src: url("../fonts/ui.woff2") format("woff2");
}
@font-face {
font-family: "Alegreya Sans";
font-weight: 300;
font-style: normal;
src: url("../fonts/AlegreyaSans-Light.woff2") format("woff2"), url("../fonts/AlegreyaSans-Light.woff") format("woff");
}
@font-face {
font-family: "Alegreya Sans";
font-weight: 400;
font-style: normal;
src: url("../fonts/AlegreyaSans-Regular.woff2") format("woff2"), url("../fonts/AlegreyaSans-Regular.woff") format("woff");
}
@font-face {
font-family: "Alegreya Sans";
font-weight: 400;
font-style: italic;
src: url("../fonts/AlegreyaSans-Italic.woff2") format("woff2"), url("../fonts/AlegreyaSans-Italic.woff") format("woff");
}
@font-face {
font-family: "Alegreya Sans";
font-weight: 500;
font-style: normal;
src: url("../fonts/AlegreyaSans-Medium.woff2") format("woff2"), url("../fonts/AlegreyaSans-Medium.woff") format("woff");
}
@font-face {
font-family: "Alegreya Sans";
font-weight: 600;
font-style: normal;
src: url("../fonts/AlegreyaSans-Bold.woff2") format("woff2"), url("../fonts/AlegreyaSans-Bold.woff") format("woff");
}
@font-face {
font-family: "Alegreya Sans";
font-weight: 700;
font-style: normal;
src: url("../fonts/AlegreyaSans-Bold.woff2") format("woff2"), url("../fonts/AlegreyaSans-Bold.woff") format("woff");
}
@font-face {
font-family: "Alegreya";
font-style: normal;
src: url("../fonts/Alegreya-Regular.woff2") format("woff2"), url("../fonts/Alegreya-Regular.woff") format("woff");
}
@font-face {
font-family: "Alegreya";
font-style: italic;
src: url("../fonts/Alegreya-Italic.woff2") format("woff2"), url("../fonts/Alegreya-Italic.woff") format("woff");
}
@font-face {
font-family: "Alegreya";
font-weight: 500;
font-style: normal;
font-variant: normal;
src: url("../fonts/Alegreya-Medium.woff2") format("woff2"), url("../fonts/Alegreya-Medium.woff") format("woff");
}
@font-face {
font-family: "Alegreya";
font-weight: 600;
src: url("../fonts/Alegreya-Bold.woff2") format("woff2"), url("../fonts/Alegreya-Bold.woff") format("woff");
}
@font-face {
font-family: "Alegreya";
font-weight: 500;
font-variant: small-caps;
font-style: italic;
src: url("../fonts/AlegreyaSC-MediumItalic.woff2") format("woff2"), url("../fonts/AlegreyaSC-MediumItalic.woff") format("woff");
}
@font-face {
font-family: "Alegreya SC";
font-weight: 400;
font-variant: small-caps;
font-style: normal;
src: url("../fonts/AlegreyaSC-Regular.woff2") format("woff2"), url("../fonts/AlegreyaSC-Regular.woff") format("woff");
}
@font-face {
font-family: "Alegreya SC";
font-weight: 500;
font-variant: small-caps;
font-style: normal;
src: url("../fonts/AlegreyaSC-Medium.woff2") format("woff2"), url("../fonts/AlegreyaSC-Medium.woff") format("woff");
}
/* Styles for handling egXML blocks, taken initially
* from MoEML's CSS. */
div.egXML {
font-family: monospace;
padding: 0.5em;
text-align: left;
word-break: break-all;
/* Default background for now, but
* we may want to switch depending
* on validity */
background-color: var(--eg-XML-color);
font-size: 0.937rem;
max-width: 100%;
}
/* Adding XML egXML stuff */
.egXML {
--xml-font: monospace;
--eg-XML-color: #efefef;
--xml-tag-color:#000099;
--xml-att-color:#f5844c;
--xml-val-color:#993300;
--xml-comment-color:#009900;
--xml-pi-color:#8B26C9;
}
.xmlTag, .xmlAttName, .xmlAttVal, .teiCode, .xmlProcessingInstruction {
font-family: var(--xml-font);
font-variant: normal;
}
.xmlTag, .xmlAttName, .xmlAttVal, .xmlProcessingInstruction {
font-weight: 700;
}
/* These colours are taken from oXygen's default colour scheme */
.xmlTag {
color: var(--xml-tag-color);
}
.xmlAttName {
color: var(--xml-att-color);
}
.xmlAttVal {
color: var(--xml-val-color);
}
.xmlComment {
color: var(--xml-comment-color);
}
.xmlProcessingInstruction {
color: var(--xml-pi-color);
}
/*
z-index
popup-container: 15;
popup-closer: 10;
left nav: 20
/*Test text*/
/*LEMDO Pat variables*/
/*
For Alegreya body text area
*/
/*
4.165em (66.64px)
3.903em (62.46px)
3.658em (58.53px)
3.429em (54.86px)
3.213em (51.41px)
3.012em (48.19px)
2.822em (45.16px)
2.645em (42.32px)
2.479em (39.67px)
2.323em (37.18px)
2.178em (34.84px)
2.041em (32.65px)
1.913em (30.60px)
1.793em (28.68px)
1.68em (26.88px)
1.575em (25.19px)
1.476em (23.61px)
1.383em (22.13px)
1.296em (20.74px)
1.215em (19.44px)
1.138em (18.22px)
1.067em (17.07px)
1em (16.00px)
0.937em (15.00px)
0.878em (14.05px)
0.823em (13.17px)
0.772em (12.34px)
0.723em (11.57px)
0.678em (10.84px)
/*
*/
:root {
-webkit-font-smoothing: antialiased;
--small: 1.138rem;
--primarySans: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;
--primarySerif: "Alegreya", "Georgia", "Times New Roman", serif;
--highlightColor: #009DFF;
--highlightColorNotActive: #BFE0FF;
--highlightColorActive: #009DFF;
/*The following variables are arranged mainly by region*/
--topnav-bg-color: #ffffff;
--topBarHeight: 50px;
--topnav-border-color: #e4e4e4;
--topnav-bg-color-desktop: #ffffff;
--topnav-closed-bg-color-mobile: rgba(45, 45, 45, 0.98);
--topnav-open-bg-color-mobile: rgba(45, 45, 45, 0.98);
--topnav-offset: 50px;
--mobile-toggler-color: #565656;
--topnav-searchfield-weight: 400;
--topnav-searchfield-button-bg-color: #ececec;
--topnav-searchfield-button-bg-color-active: #009DFF;
--topnav-searchfield-button-weight: 500;
--topnav-searchfield-button-hover-color: #ffffff;
--topnav-searchfield-button-font-color: #222222;
--clicky-font-family: var(--primarySans);
--clicky-font-size: 1.138rem;
--clicky-dropdown-border-color: #ebebeb;
--clicky-dropdown-font-size: 1rem;
--clicky-font-weight: 400;
--clicky-font-style: normal;
--clicky-color-inactive-desktop: #565656;
--clicky-color-active-desktop: ;
--clicky-color-inactive-mobile: #ffffff;
--clicky-color-active-mobile: ;
--clicky-button-bg-inactive: transparent;
--clicky-text-decoration: none;
--clicky-dropdown-inactive-desktop: #565656;
--clicky-dropdown-active-desktop: #ffffff;
--clicky-dropdown-active-bg: var(--highlightColor);
--clicky-svg-inactive-desktop: #565656;
--clicky-svg-inactive-mobile: #ffffff;
--ss-button-bg-color: #ececec;
--ss-button-bg-color-active: var(--highlightColor);
--ss-button-color: #222222;
--ss-buttong-color-active: #ffffff;
--ss-legend-font: var(--primarySans);
--ss-legend-bg-color: #ecececec;
--lefNav-width: 225px;
--leftNav-bg-color: #ffffff;
--leftNav-tabarea-bg-color: #ececec;
--leftNav-tab-heading-color: #000000;
--leftNav-tab-heading-size: 1.138rem;
--leftNav-tab-heading-font: var(--primarySans);
--leftNav-tab-color: #565656;
--leftNav-tab-font: var(--primarySans);
--leftNav-tab-weight: 600;
--leftNav-tab-subheading-weight: 600;
--leftNav-tab-subheading-size: 1.25rem;
--leftNav-tab-subheading-color: #000000;
--leftNav-tab-body-size: 1rem;
--leftNav-tab-body-weight: 400;
--leftNav-tab-body-color: #222222;
--leftNav-tab-body-font: var(--primarySans);
--leftNav-button-bg-color: #009DFF;
--leftNav-button-color: #fff;
--leftNav-border-color: #e4e4e4;
--popup-border-color: #ebebeb;
--popup-bg-color: #ffffff;
--popupCloserHeight: 35px;
--popup-closer-bg-color: #f5f5f5;
--noteHeaderFont: var(--primarySerif);
--noteHeaderSize: 1.296rem;
--noteHeaderMargin: 0 0 0 0;
--noteHeaderColor: #222;
--noteHeaderWeight: 600;
--noteFont: var(--primarySerif);
--noteSize: 1.138rem;
--smallNoteSize: 0.938rem;
--noteSize: 1.138rem;
--noteColor: #222222;
--noteBqSize: 1.067rem;
--noteBqMargin: .75rem 0 .75rem 2rem;
--noteBibl: .878rem;
--noteH2size: 1.476rem;
--noteH3size: 1.138rem;
--noteH3margin: 0 0 .25rem 0;
--noteParaSmall: .938rem;
--notePadding: 0 0 0 .25rem;
--glossFontSize: 1.138rem;
--glossMargin: 0 0 .75rem 0;
--glossPadding: 0 0 0 .25rem;
--longCaptionFontSize: .937rem;
--personMargin: 0.25rem .25rem .25rem 0;
--personHeaderFont: var(--primarySerif);
--personHeaderSize: 1.0rem;
--personHeaderColor: #222;
--personHeaderWeight: 400;
--personHeaderMargin: 0 0 0 1rem;
--bioMargin: 0.25rem;
--bioHeaderFont: var(--primarySerif);
--bioHeaderSize: 1.138rem;
--bioHeaderColor: #222;
--bioHeaderWeight: 700;
--bioHeaderMargin: 0 0 0 0;
--disambigHeaderFont: var(--primarySerif);
--disambigHeaderWeight: 600;
--disambigHeaderColor: #000;
--disambigHeaderSize: 1.296rem;
--disambigParaFont: var(--primarySerif);
--disambigParaWeight: 400;
--disambigParaSize: 1.138rem;
--disambigParaColor: #222222;
--mainBgColor: #fdfdfd;
--offPageBgColor: #ebebeb;
--annTextDecoration: underline;
--annTextDecorationColor: var(--highlightColorNotActive);
--annTextDecorationThickness: 3px;
--annTextDecorationStyle: solid;
--annSkipInk: auto;
--annTextOffset: from-font;
--link-color: #222222;
--link-hover-color: var(--highlightColor);
--link-text-decoration-color: rgba(34, 34, 34, 0.3);
--link-hover-text-decoration-color: var(--highlightColor);
--appMarkerBgColor: var(--highlightColorNotActive);
--appMarkerBgColorActive: var(--highlightColorActive);
--codeFont: monospace;
--codeColor: #000000;
--codeBgColor: #f0f0f0;
--codeFontSize: 1.067rem;
--codePadding: 0.25rem;
--identFontStyle: 1.067rem;
--light: 400;
--bodyText: #222222;
--figCaptionTextSize: 1.067rem;
--figcaptionTextColor: #414141;
--figureBgColor: #f7f7f7;
--headingFontColor: #222222;
--h1Size: 3.213rem;
--pageTitleSize: 2.645rem;
--pageTitleSizeMobile: 1.793rem;
--pageTitleSizeSans: 2.25rem;
--h1LineHeight: 1.15;
--pageTitleLineHeight: 1.15;
--h1MarginBottom: 2rem;
--pageTitleMarginBottom: .5rem;
--h1Weight: 400;
--pageTitleWeight: 400;
--h2Size: 1.68rem;
--h2MarginTitle: 0 0 1.5rem 0;
--h2Margin: 0 0 .5rem 0;
--h2LineHeight: 1.15;
--h2Weight: 500;
--h3Size: 1.575rem;
--h3Weight: 500;
--h3Margin: 0 0 .25rem 0;
--h4Size: 1.476rem;
--h4Weight: 500;
--h4Margin: 0 0 0 0;
--h5Size: 1.383rem;
--h5Weight: 500;
--h5Margin: 0 0 0 0;
--stageMargin: .75rem 0 .75rem 0;
--paraMargin: 0 0 1.5rem 0;
--listMargin: 0 0 .25rem 0;
--paraLineHeight: 1.5;
--paraFontSize: 1.215rem;
--paraFontSizeSans: 1.138rem;
--paraFontWeightSans: 400;
--paraFontColor: #222222;
--tableFontSizeHeader: 1.067rem;
--tableFontSize: 1.067rem;
--tableFontSizePopup: .878rem;
--tableFontWeightPopup: 400;
--tocTwoColTableCellMin: 20vh;
--nameValTableFirstColWidth: 15em;
--tableMargin: 0 0 1.5rem 0;
--table-border-color: #ebebeb;
--headingAppendixSize: 2.041rem;
--headingAppendixColor: #222222;
--headingAppendixMargin: 0 0 .75rem 0;
--appendixSize: 0.6rem;
--annotationMargin: 0 0 1.5rem 0;
--listIndent: 2.0625rem;
--blockquoteFontSize: 1.138rem;
--blockquoteMargin: 0 0 1.5rem 2rem;
--blockquoteFooterFontSize: 1.15rem;
--blockquoteParaMargin: .25rem .25rem .25rem 3rem;
--blockquoteMaxWidth: 34rem;
--videoWidth: 100%;
--asspLinkMargin: 8rem;
--assp-link-font-size: 1rem ;
--assp-link-font-size-mobile: .937rem;
/* --topBarBgColor: #ffffff;//Top navigation bar background color */
/* --navHoverColor: #009DFF;//Hover color for top navigation bar items */
/* --buttonBgColor: #ececec;//Left nav hide shot button bg color */
/* --borderColor: #e4e4e4;//bottom border for top navigation */
/* --iconColor: #565656;//For hamburger menu, close x's, and search icons */
/* --leftNavBgColor: #fff; */
/* --leftprimarySansColor: #000; */
/******* LINKS *******/
--collation-underline-color: #d6b5df;
--lineHeightPrimarySourceModern: 1.5;
--lineHeightBornDig: 1.5;
--pageTitleSize: 2.645rem;
--pageTitleSizeMobile: 1.793rem;
--h2primary: 2.041rem;
--h2primaryMobile: 1.383rem;
--stageFontSize: 1.215rem;
--stageFontSizeMobile: 1.067rem;
--paraFontSizePrimary: 1.215rem;
--paraFontSizePrimaryMobile: 1.067rem;
/*BornDigital Fonts*/
--pageTitleSizeBornDig: 2.178rem;
--pageTitleSizeBornDigMobile: 1.793rem;
--h2SizeBornDig: 1.68rem;
--h2SizeBornDigMobile: 1.215rem;
--paraFontSizeBornDig: 1.138rem;
--paraFontSizeBornDigMobile: 1rem;
--listIndentBornDig: .25rem;
/* ****** APPARATUS */
--app-margin-left:1rem;
--single-underline-size: 1px;
--double-underline-size: calc(var(--single-underline-size) * 1);
--omitted-content: "(Omitted)";
--footer-bg-color: #e7e7e7;
--footer-font-family: var(--primarySans);
--footer-font-color: #727272;
}
body {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
:root {
scroll-behavior: smooth;
}
body,
html {
background-color: var(--offPageBgColor);
}
#pageWrapper {
display: grid;
grid-template-columns: auto;
grid-template-rows: var(--topBarHeight) auto auto;
min-height: calc(100vh - var(--topBarHeight));
grid-template-areas: "header" "main" "footer";
position: relative;
width: 100%;
max-width: 1600px;
background-color: var(--mainBgColor);
}
@media only screen and (min-width: 1600px) {
#pageWrapper {
border-right: 1px solid #e4e4e4;
}
}
#topBarWrapper {
grid-area: header;
z-index: 15;
}
#documentWrapper {
grid-area: main;
}
footer {
grid-area: footer;
background-color: var(--footer-bg-color);
padding: 2rem 1rem 2rem 2.75rem;
}
@media only screen and (min-width: 500px) {
footer {
padding: 2rem 0 2rem 2rem;
}
}
*[id] {
scroll-margin-top: calc(var(--topBarHeight) + 0.75rem);
}
div.supporters {
width: 100%;
max-width: 44rem;
}
div.supporters > ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-flow: nowrap column;
}
div.supporters > ul > li {
margin-bottom: 1.5rem;
}
div.supporters > ul li:last-of-type {
margin-bottom: 0;
}
div.supporters > ul > li:first-of-type {
font-family: var(--primarySans);
font-weight: 300;
font-size: 0.9rem;
font-style: italic;
color: #141414;
}
img.sshrc {
width: 250px;
height: auto;
}
img.uvicLogo {
width: 300px;
height: auto;
}
div.compliance > ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-flow: nowrap column;
}
div.compliance > ul > li {
margin-bottom: 1.5rem;
}
div.compliance > .para {
font-family: var(--primarySans);
font-weight: 300;
font-size: 0.9rem;
font-style: italic;
color: #141414;
}
img.endingsLogo {
width: 56px;
height: auto;
}
div.timestamp ul {
list-style: none;
padding: 0;
font-family: var(--primarySans);
font-weight: 300;
font-size: 0.9rem;
font-style: italic;
color: #141414;
}
div.timestamp ul.contact li {
display: inline;
margin-right: 0.5rem;
font-size: 1rem;
font-style: normal;
}
div.timestamp ul.contact li a:link,
div.timestamp ul.contact li a:visited {
text-decoration: underline;
color: #141414;
}
div.timestamp ul.contact li:last-of-type {
margin-right: 0;
}
#topBar {
width: 100%;
max-width: 1600px;
display: flex;
flex-direction: row;
height: var(--topBarHeight);
position: fixed;
top: 0;
background-color: var(--topnav-bg-color);
border-bottom: 1px solid var(--topnav-border-color);
padding-left: 0.5rem;
}
@media only screen and (min-width: 1000px) {
#topBar {
padding-left: 2rem;
}
}
@media only screen and (min-width: 1600px) {
#topBar {
border-right: 1px solid var(--topnav-border-color);
}
}
header.topNav a:link,
header.topNav a:visited {
text-decoration: none;
}
#lemdoLogoTop {
height: 20px;
width: auto;
display: block;
max-width: none;
}
@media only screen and (min-width: 550px) {
#lemdoLogoTop {
height: 35px;
}
}
/*nav#navMain {
display: flex;
flex-direction: row;
margin-left: 1rem;
height: 100%;
@include bp-1024 {
margin-left: 2rem;
}
}*/
nav#site-navigation[data-state=closed] {
transform: translate3d(-100%, 0, 0);
position: fixed;
top: var(--topnav-offset);
left: 0;
background-color: var(--topnav-closed-bg-color-mobile);
border-radius: 0;
display: flex;
justify-content: center;
padding: 2rem 0.5rem 2rem 2rem;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
opacity: 1;
width: 100%;
height: 100%;
z-index: 10;
}
@media only screen and (min-width: 1000px) {
nav#site-navigation[data-state=closed] {
position: initial;
top: 0;
transform: translate3d(0, 0, 0);
background-color: var(--topnav-bg-color-desktop);
padding: 0;
}
}
nav#site-navigation[data-state=open] {
position: fixed;
transform: translate3d(0, 0, 0);
top: var(--topnav-offset);
left: 0;
background-color: var(--topnav-open-bg-color-mobile);
border-radius: 0;
display: flex;
justify-content: center;
padding: 2rem 0.5rem 2rem 2rem;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
opacity: 1;
width: 100%;
height: 100%;
z-index: 20;
}
@media only screen and (min-width: 1000px) {
nav#site-navigation[data-state=open] {
position: static;
transform: translate3d(0, 0, 0);
padding: 0;
background-color: var(--topnav-bg-color-desktop);
}
}
div#topBar button.topNavMobile {
appearance: none;
border: 0;
background-color: transparent;
transition: color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
padding: 1.25rem;
color: var(--mobile-toggler-color);
cursor: pointer;
position: static;
display: grid;
place-content: center;
z-index: 20;
}
@media only screen and (min-width: 1000px) {
div#topBar button.topNavMobile {
display: none;
}
}
span.lineContainer {
display: block;
width: 1.9rem;
height: 1.5rem;
position: relative;
}
.topNavTopBar,
.topNavBottomBar {
display: block;
width: 1.9rem;
height: 0.125rem;
border-radius: 9999px;
background-color: currentColor;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0.125rem;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.topNavTopBar {
top: 0.4375rem;
}
.topNavBottomBar {
bottom: 0.4375rem;
}
div#topBar[data-state=open] span.topNavTopBar {
top: 0.6875rem;
transform: rotate(45deg);
}
div#topBar[data-state=open] span.topNavBottomBar {
bottom: 0.6875rem;
transform: rotate(-45deg);
}
/**
* Initial state, hidden off screen
*/
.clicky-menu ul {
position: absolute;
top: 100%;
left: 0;
visibility: hidden;
/*[1]*/
}
/**
* No JS fallback
*
* Triggers menus on hover rather than click. Supports keyboard navigation in modern browsers.
*/
.clicky-menu.no-js li:hover > ul {
visibility: visible;
}
.clicky-menu.no-js li:focus-within > ul {
/*[2]*/
visibility: visible;
}
/**
* Open/Close Menu Behavior with JS
*/
.clicky-menu ul[aria-hidden=false] {
visibility: visible;
}
/* Prevent offscreen-submenus */
.clicky-menu .sub-menu--right {
left: auto !important;
right: 0 !important;
}
@media only screen and (min-width: 1000px) {
.clicky-menu .sub-menu--right {
left: auto;
right: 0;
}
}
header#bannerContainer {
display: flex;
align-items: center;
}
/* Top Level Items */
.clicky-menu > li {
position: relative;
display: flex;
flex-wrap: wrap;
margin-bottom: 0.5rem;
}
@media only screen and (min-width: 1000px) {
.clicky-menu > li {
justify-content: center;
margin-left: 1rem;
margin-bottom: 0;
align-items: center;
height: 100%;
}
}
/* Buttons with dropdowns */
.clicky-menu > li > button {
color: var(--clicky-color-inactive-mobile);
border: 0;
background-color: var(--clicky-button-bg-inactive);
transition: all 0.3s ease-in-out;
font-family: var(--clicky-font-family);
font-size: var(--clicky-font-size);
font-weight: var(--clicky-font-weight);
cursor: pointer;
display: grid;
grid-template-columns: auto auto;
gap: 0.3rem;
align-items: center;
padding: 0;
}
@media only screen and (min-width: 1000px) {
.clicky-menu > li > button {
color: var(--clicky-color-inactive-desktop);
}
}
/* Clicky nav top level no dropdown */
.clicky-menu > li > a,
.clicky-menu > li > a:visited {
font-family: var(--clicky-font-family);
font-size: var(--clicky-font-size);
font-weight: var(--clicky-font-weight);
color: var(--clicky-color-inactive-mobile);
text-decoration: var(--clicky-text-decoration);
}
@media only screen and (min-width: 1000px) {
.clicky-menu > li > a,
.clicky-menu > li > a:visited {
color: var(--clicky-color-inactive-desktop);
}
}
/*svg carrot*/
.clicky-menu button svg.arrow {
fill: var(--clicky-svg-inactive-mobile);
width: 12px;
height: auto;
transform: rotate(0deg);
transform-origin: center;
transform: rotate(0deg) translateX(0px) scale(1);
transition: all 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
@media only screen and (min-width: 1000px) {
.clicky-menu button svg.arrow {
fill: var(--clicky-color-inactive-desktop);
}
}
.clicky-menu > li > button[aria-expanded=true] svg.arrow {
transform: rotate(-180deg) translateX(0px) scale(1);
transform-origin: center;
}
/*nav_list is the top nav clicky menu*/
ul.nav_list {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
@media only screen and (min-width: 1000px) {
ul.nav_list {
display: flex;
flex-direction: row;
height: 100%;
align-items: center;
}
}
/* The blue lemdo underlines that appear on hover and active state*/
@media only screen and (min-width: 1000px) {
ul.nav_list > li > a::after,
ul.nav_list > li > a::before,
ul.nav_list > li > button::after,
ul.nav_list > li > button::before {
content: "";
position: absolute;
bottom: 0px;
height: 3px;
margin: 5px 0 0;
transition: all 0.35s ease-in-out;
opacity: 0;
width: 0px;
background-color: var(--highlightColor);
}
}
ul.nav_list > li > a::before,
ul.nav_list > li > button::before {
left: 50%;
}
ul.nav_list > li > a::after,
ul.nav_list > li > button::after {
right: 50%;
}
@media not all and (pointer: coarse) {
ul.nav_list > li:hover > a::after,
ul.nav_list > li:hover > a::before,
ul.nav_list > li:hover > button::after,
ul.nav_list > li:hover > button::before {
width: 50%;
opacity: 1;
background-color: var(--highlightColor);
}
}
ul.nav_list > li:has(button[aria-expanded=true]) > button::after,
ul.nav_list > li:has(button[aria-expanded=true]) > button::before {
width: 50%;
opacity: 1;
background-color: var(--highlightColor);
}
.clicky-menu ul[aria-hidden=true] {
display: none;
}
.clicky-menu ul[aria-hidden=false] {
position: static;
width: 100%;
flex: 0 0 auto;
list-style-type: none;
padding: 0 0 0 0.5rem;
}
@media only screen and (min-width: 1000px) {
.clicky-menu ul[aria-hidden=false] {
display: flex;
flex-direction: column;
overflow: hidden;
margin: 0;
padding: 0.5rem 0 0 0;
list-style-type: none;
position: absolute;
top: calc(var(--topBarHeight) - 1px);
background-color: #fff;
width: 15rem;
border-right: 1px solid var(--clicky-dropdown-border-color);
border-left: 1px solid var(--clicky-dropdown-border-color);
border-bottom: 1px solid var(--clicky-dropdown-border-color);
border-top: 0;
z-index: 15;
}
}
ul.nav_list > li > ul > li > a {
padding-left: 2rem;
}
ul.nav_list > li > ul > li > a,
ul.nav_list > li > ul > li > a:visited {
color: var(--clicky-color-inactive-mobile);
display: block;
transition: all 0.2s ease-in-out;
padding: 0 1rem;
font-size: var(--clicky-dropdown-font-size);
text-decoration: none;
font-family: var(--clicky-font-family);
font-weight: var(--clicky-font-weight);
font-style: var(--clicky-font-style);
}
@media only screen and (min-width: 1000px) {
ul.nav_list > li > ul > li > a,
ul.nav_list > li > ul > li > a:visited {
color: var(--clicky-dropdown-inactive-desktop);
}
}
ul.nav_list > li > ul > li > a:hover,
ul.nav_list > li > ul > li > a:visited:hover {
background-color: var(--clicky-dropdown-active-bg);
color: var(--clicky-dropdown-active-desktop);
}
form#searchForm {
margin-left: auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-left: 0.25rem;
}
@media only screen and (min-width: 1000px) {
form#searchForm {
width: initial;
}
}
button#searchToggle {
font-family: "ui";
appearance: none;
-webkit-appearance: none;
border: 0;
padding: 0;
cursor: pointer;
font-size: 20px;
width: 2.1875rem;
height: 2.1875rem;
display: table-cell;
vertical-align: middle;
margin-right: 1rem;
margin-left: auto;
background-color: var(--highlightColorNotActive);
border-right: 1px solid transparent;
border-bottom: 1px solid var(--highlightColorNotActive);
border-left: 1px solid var(--highlightColorNotActive);
}
span.wrap {
height: 2.1875rem;
}
form#search {
-webkit-appearance: none;
appearance: none;
margin: 0;
padding: 0;
}
span.inputWrapper {
position: relative;
display: flex;
align-items: center;
width: 100%;
justify-content: center;
padding-left: 0.25rem;
}
span.inputWrapper::after {
content: url(../images/magnifying-glass.svg);
width: 1.25rem;
height: 1.25rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 1rem;
pointer-events: none;
touch-action: none;
opacity: 1;
transition: opacity 0.75s ease-in-out;
}
@media only screen and (min-width: 1000px) {
span.inputWrapper::after {
right: 1rem;
}
}
div#topBar:focus-within > header {
display: none;
}
@media only screen and (min-width: 768px) {
div#topBar:focus-within > header {
display: flex;
}
}
/* MDH 2022-12-21: Temporary fix for Firefox bug on mobile, whereby
the logo disappears when you click on it, before the link is
activated. See GitHub issue #97, second main topic. */
div#topBar:focus-within > header:focus-within {
display: flex;
}
div#topBar:focus-within form#searchForm {
width: 100%;
}
@media only screen and (min-width: 768px) {
div#topBar:focus-within form#searchForm {
width: auto;
}
}
span.inputWrapper:focus-within::after {
opacity: 0;
}
input#q {
height: 2.1875rem;
font-size: 1rem;
padding: 0 0.5rem 0 0.5rem;
font-family: var(--primarySans);
font-weight: var(--topnav-searchfield-weight);
margin: 0;
border: 1px solid #ececec;
margin-right: 0.5rem;
outline: none;
width: 2.4rem;
}
@media only screen and (min-width: 768px) {
input#q {
padding: 0 0.5rem 0 0.5rem;
width: 12rem;
}
}
input#q:focus {
width: 100%;
min-width: 12rem;
}
@media only screen and (min-width: 768px) {
input#q:focus {
width: 12rem;
min-width: none;
}
}
input#q::placeholder {
color: transparent;
}
@media only screen and (min-width: 768px) {
input#q::placeholder {
color: initial;
}
}
input#submitSearch {
-webkit-appearance: none;
appearance: none;
margin: 0;
border: 0;
margin-right: 0;
height: 2.1875rem;
display: table-cell;
vertical-align: middle;
border-radius: 0px;
font-family: var(--primarySans);
font-weight: var(--topnav-searchfield-button-weight);
color: var(--topnav-searchfield-button-font-color);
font-size: 1rem;
cursor: pointer;
background-color: var(--topnav-searchfield-button-bg-color);
transition: all 0.3s ease-in-out;
margin-left: auto;
}
@media only screen and (min-width: 1000px) {
input#submitSearch {
margin-right: 1rem;
}
}
input#submitSearch:hover {
background-color: var(--topnav-searchfield-button-bg-color-active);
color: var(--topnav-searchfield-button-hover-color);
}
input#q:focus {
border: 1px solid var(--highlightColor);
}
span.inputWrapper:focus-within + input#submitSearch {
background-color: var(--topnav-searchfield-button-bg-color-active);
color: var(--topnav-searchfield-button-hover-color);
}
/* We hide the search controls when we're actually
* on the search page. */
html[id$=_search] input#q,
html[id$=_search] input#submitSearch {
display: none;
}
#asideMain {
position: fixed;
top: var(--topBarHeight);
left: 0;
height: calc(100vh - var(--topBarHeight));
background-color: var(--leftNav-bg-color);
border-right: 1px solid var(--leftNav-border-color);
width: var(--lefNav-width);
overflow: visible;
transition: transform 0.3s linear;
z-index: 10;
display: flex;
flex-direction: column;
}
#asideMain[data-state=closed] {
transform: translate3d(-225px, 0, 0);
will-change: transform;
}
#asideMain[data-state=open] {
transform: translate3d(0, 0, 0);
will-change: transform;
}
@media only screen and (min-width: 1000px) {
#asideMain[data-state=open] {
transform: none;
}
}
div#mainContainer {
transition: transform 0s linear;
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
position: relative;
-webkit-backface-visibility: hidden;
margin-bottom: 2rem;
}
@media only screen and (min-width: 550px) {
div#mainContainer {
padding: 0 3rem;
}
}
@media only screen and (min-width: 1100px) {
div#mainContainer {
margin-left: 5rem;
margin-right: initial;
padding: 0;
max-width: 45rem;
}
}
@media only screen and (min-width: 1000px) {
div#mainContainer[data-state=open] {
transform: translate3d(225px, 0, 0);
animation: opacityCycle 0.5s;
}
}
@media only screen and (min-width: 1000px) {
div#mainContainer[data-state=closed] {
transform: translate3d(0, 0, 0);
animation: opacityCycle2 0.5s;
}
}
@keyframes opacityCycle {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes opacityCycle2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
div#leftNavButton {
font-family: "ui";
appearance: none;
-webkit-appearance: none;
border: 0;
padding: 0;
cursor: pointer;
font-size: 24px;
width: 35px;
height: 35px;
display: table-cell;
vertical-align: middle;
margin-left: 1rem;
position: absolute;
top: 0;
right: -35px;
background-color: var(--leftNav-button-bg-color);
border-right: 1px solid transparent;
color: var(--leftNav-button-color);
transition: all 0.2s ease-in-out;
}
div#leftNavButton::after {
position: absolute;
display: table-cell;
vertical-align: middle;
width: 100%;
text-align: center;
font-family: "ui";
content: "≡";
transition: all 0.2s ease-in-out;
}
#asideMain[data-state=open] div#leftNavButton::after {
position: absolute;
text-align: center;
font-size: 1.793rem;
font-family: var(--primarySans);
font-weight: 700;
content: "x";
transition: all 0.2s ease-in-out;
width: 35px;
height: 35px;
line-height: 1;
}
#asideContentContainer {
flex-grow: 1;
overflow: auto;
padding-right: 1rem;
}
nav#tabNavContainer {
background-color: var(--leftNav-tabarea-bg-color);
padding-top: 0.5rem;
margin-bottom: 1rem;
}
nav#tabNavContainer h2 {
text-align: center;
font-family: var(--leftNav-tab-heading-font);
color: var(--leftNav-tab-heading-color);
margin-bottom: 0.25rem;
font-size: var(--leftNav-tab-heading-size);
font-weight: 600;
}
ul#tabNav {
list-style-type: none;
font-family: var(--leftNav-tab-font);
color: var(--leftNav-tab-color);
padding-left: 0;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
font-weight: var(--leftNav-tab-weight);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 0;
}
li.tabNavItem {
font-size: 1rem;
padding: 0 0.25rem 0.5rem;
cursor: pointer;
text-align: center;
transition: background-color 0.2s ease-in-out;
position: relative;
}
li.tabNavItem::after,
li.tabNavItem::before {
content: "";
position: absolute;
bottom: 5px;
height: 3px;
margin: 5px 0 0;
transition: all 0.35s ease-in-out;
opacity: 0;
width: 0px;
}
li.tabNavItem::before {
left: 50%;
}
li.tabNavItem::after {
right: 50%;
}
@media not all and (pointer: coarse) {
li.tabNavItem:hover::after,
li.tabNavItem:hover::before {
width: 35%;
opacity: 1;
background-color: var(--highlightColor);
}
}
li.tabNavItem.active::after,
li.tabNavItem.active::before {
width: 35%;
opacity: 1;
background-color: var(--highlightColor);
}
body div#asideCredits,
body div#asideContents,
body div#asideTools,
body div#asideAbout {
display: block;
}
body.JS div#asideTools,
body.JS div#asideCredits,
body.JS div#asideContents,
body.JS div#asideAbout {
display: none;
}
body.JS div#asideTools.active,
body.JS div#asideCredits.active,
body.JS div#asideContents.active,
body.JS div#asideAbout.active {
display: block;
animation: opacityCycle 0.5s;
}
#asideContents,
#asideCredits,
#asideAbout,
#asideTools {
padding-left: 0.5rem;
}
#asideContents {
padding-left: 0.5rem;
}
#asideContents div[data-el=list] div[data-el=item] {
font-size: var(--leftNav-tab-body-size);
line-height: 1.2;
list-style-type: none;
font-weight: var(--leftNav-tab-body-weight);
margin-bottom: 0.5rem;
font-family: var(--leftNav-tab-body-font);
}
#asideCredits div[data-el=respStmt] {
line-height: 1.2;
margin-bottom: 0.5rem;
font-family: var(--leftNav-tab-body-font);
font-weight: var(--leftNav-tab-body-weight);
font-size: var(--leftNav-tab-body-size);
}
#asideCredits span[data-el=resp] {
display: block;
font-weight: 500;
font-size: var(--leftNav-tab-body-size);
line-height: 1.1;
}
#asideCredits a[data-el=name] {
font-weight: var(--leftNav-tab-body-weight);
font-size: var(--leftNav-tab-body-size);
}
#asideAbout div[data-el=list] div[data-el=item] {
font-size: var(--leftNav-tab-body-size);
line-height: 1.2;
list-style-type: none;
font-weight: var(--leftNav-tab-body-weight);
margin-bottom: 0.5rem;
font-family: var(--primarySans);
}
#asideTools #annotationToggle,
#asideTools #collationToggle {
font-size: var(--leftNav-tab-body-size);
list-style-type: none;
font-weight: var(--leftNav-tab-body-weight);
margin-bottom: 0.5rem;
font-family: var(--leftNav-tab-body-font);
}
#asideAbout #seeXmlLink {
margin-bottom: 1.5rem;
}
#asideAbout #containingEditions {
font-size: var(--leftNav-tab-body-size);
line-height: 1.2;
font-weight: var(--leftNav-tab-body-weight);
font-family: var(--leftNav-tab-body-font);
}
#asideAbout #containingEditions p {
margin-bottom: 0.5rem;
}
#asideAbout #containingEditions div {
margin-bottom: 0.5rem;
}
label.control {
color: var(--leftNav-tab-body-color);
cursor: pointer;
font-weight: 400;
display: grid;
grid-template-columns: 1rem auto;
gap: 1rem;
}
label.control input[type=checkbox] {
-webkit-appearance: none;
appearance: none;
background-color: var(--highlightColor);
margin: 0;
font: inherit;
color: currentColor;
width: 1.5rem;
height: 1.5rem;
transform: translateY(-0.075em);
display: grid;
place-content: center;
}
label.control input[type=checkbox]::before {
content: "";
width: 0.75rem;
height: 0.75rem;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
transform: scale(0);
transform-origin: bottom left;
transition: 120ms transform ease-in-out;
box-shadow: inset 1em 1em #ffffff;
/* Windows High Contrast Mode */
background-color: CanvasText;
}
label.control input[type=checkbox]:checked::before {
transform: scale(1);
}
label.control input[type=checkbox]:focus {
outline: max(2px, 0.15em) solid var(--highlightColor);
outline-offset: max(2px, 0.15em);
}
#asideMain > div {
margin-bottom: 1rem;
}
#asideTools > div,
#asideAbout > div,
#asideCredits > div,
#asideContents > div {
padding-left: 0.25rem;
}
#asideMain h2 {
font-family: var(--leftNav-tab-heading-font);
font-weight: var(--leftNav-tab-subheading-weight);
font-size: var(--leftNav-tab-subheading-size);
color: var(--leftNav-tab-subheading-color);
margin-bottom: 0.5rem;
}
#asideMain a:link,
#asideMain a:visited {
color: var(--link-color);
text-decoration: underline;
text-decoration-color: var(--link-text-decoration-color);
text-decoration-thickness: 1px;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
#asideMain a:hover {
color: var(--link-hover-color);
text-decoration-color: var(--link-hover-text-decoration-color);
}
main {
background-color: var(--mainBgColor);
max-width: 100%;
padding: 2rem 0 0 0;
}
@media only screen and (min-width: 660px) {
main {
padding: 2rem 0 0 0;
}
}
@media only screen and (min-width: 1100px) {
main {
max-width: 40rem;
}
}
@media only screen and (min-width: 768px) {
main[id^=emd],
body[data-catrefs*=Primary] main,
body[data-catrefs*=BornDig] main {
margin-left: var(--asspLinkMargin);
}
}
#mainText.primarySource.modern [data-el=fw],
#mainText.primarySource.modern br,
#mainText.primarySource.modern [data-el=pb] {
/*display: none;*/
}
/* We now allow titlePages in modern texts, but
because we retain the canonical title as well, we
put a border around them. */
div.primarySource.modern div[data-el=titlePage] {
border: solid 1pt black;
padding: 1em;
text-align: center;
font-size: 1rem;
line-height: var(--lineHeightPrimarySourceModern);
margin: var(--paraMargin);
font-family: var(--primarySerif);
font-size: var(--paraFontSize);
color: var(--paraFontColor);
}
div.primarySource.modern div[data-el=titlePage] > * {
line-height: var(--lineHeightPrimarySourceModern);
margin: var(--paraMargin);
}
div.primarySource.modern div[data-el=titlePage] div.mainTitle {
font-size: var(--h3Size);
}
div.primarySource.modern div[data-el=titlePage] div[data-el=titlePart] {
display: block;
}
div.primarySource.modern div[data-el=titlePage] h3[data-el=byline] {
font-weight: normal;
font-family: var(--primarySerif);
font-size: var(--paraFontSize);
color: var(--paraFontColor);
}
input#annotations_showHide,
input#annotations_showHide + label,
input#characters_showHide,
input#characters_showHide + label,
input#orgography_showHide,
input#orgography_showHide + label,
a.closer {
display: none;
}
div#collations {
display: none;
}
.JS .apparatus.noteMarker {
display: none;
}
.JS [data-ann] {
cursor: pointer;
}
span.noteRef[data-ann] {
text-decoration: var(--annTextDecoration);
text-decoration-color: var(--annTextDecorationColor);
text-decoration-thickness: var(--annTextDecorationThickness);
text-decoration-style: var(--annTextDecorationStyle);
text-decoration-skip: edges;
text-underline-offset: var(--annTextOffset);
transition: all 0.2s ease-in-out;
}
@supports (text-decoration-skip-ink: none) {
span.noteRef[data-ann] {
text-decoration-skip-ink: var(--annSkipInk);
}
}
span.noteRef[data-ann*=" "] {
text-decoration-style: double;
}
.JS span.noteRef[data-ann].ann-hovered,
.JS span.noteRef[data-ann].selectedNote {
text-decoration-color: var(--highlightColorActive);
}
span.blockAnnotation[data-ann] {
position: absolute;
margin-left: -1.85rem;
height: 2rem; /* MDH: limit this, otherwise it extends to the bottom of the page for floated elements. */
width: 1rem;
border-left: 0.15rem solid var(--highlightColorNotActive);
display: block;
transition: all 0.2s ease-in-out;
}
span[data-el=speaker] span.blockAnnotation[data-ann] {
left: 0.5rem;
}
:not(.JS) span.blockAnnotation[data-ann]:hover,
span.blockAnnotation[data-ann].ann-hovered,
span.blockAnnotation[data-ann].selectedNote {
border-left-color: var(--highlightColorActive);
}
div#mainText.noAnnotations span.noteRef {
text-decoration: none;
}
div#mainText.noAnnotations span.blockAnnotation {
border-left-color: transparent;
}
a.asspLink {
display: block;
margin-left: 0;
width: auto;
color: var(--annTextDecorationColor);
font-size: var(--assp-link-font-size-mobile);
}
@media only screen and (min-width: 768px) {
a.asspLink {
display: inline-block;
margin-left: calc(var(--asspLinkMargin) * -1);
width: var(--asspLinkMargin);
font-size: var(--assp-link-font-size);
}
}
a.asspLink:hover {
color: var(--highlightColorActive);
}
html body[data-catrefs*=Primary] main a.asspLink {
color: var(--link-color);
text-decoration: underline;
text-decoration-color: var(--link-text-decoration-color);
text-decoration-thickness: 1px;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
html body[data-catrefs*=Primary] main a.asspLink:hover {
color: var(--link-hover-color);
text-decoration-color: var(--link-hover-text-decoration-color);
}
a.apparatus.appMarker:link,
a.appratus.appMarker:visited,
a.asspLink:link, a.asspLink:visited {
text-decoration: none;
}
.apparatus.appMarker {
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
border-radius: 100%;
background-color: var(--appMarkerBgColor);
width: 1rem;
height: 1rem;
font-family: var(--primarySans);
font-size: 0.8rem;
color: #fff;
line-height: 1;
vertical-align: middle;
margin-left: 0.25rem;
}
div#mainText.noCollations .apparatus.appMarker {
display: none;
}
.apparatus.appMarker img {
width: 70%;
height: auto;
}
@media not all and (pointer: coarse) {
.app-hovered,
[data-app].selectedApp,
a[data-app]:hover {
color: var(--highlightColorActive);
}
}
@media not all and (pointer: coarse) {
a[data-app].apparatus:hover,
a[data-app].apparatus.app-hovered,
a[data-app].apparatus.selectedApp {
background-color: var(--highlightColorActive);
}
}
video {
width: var(--videoWidth);
}
/* Specific styles for born-digital content. */
main.bornDigital span[data-el=emph] {
font-weight: bold;
}
main.bornDigital span[data-el=term]::before, div.popup span[data-el=term]::before {
content: "“";
}
main.bornDigital span[data-el=term]::after, div.popup span[data-el=term]::after {
content: "”";
}
main.bornDigital span[data-el=mentioned], main.modern span[data-el=mentioned], div.popup span[data-el=mentioned] {
font-style: italic;
}
main.bornDigital span[data-el=foreign], main.modern span[data-el=foreign], div.popup span[data-el=foreign] {
font-style: italic;
}
/* Exception to above: in primary source, emph is italics. */
main.primarySource span[data-el=emph] {
font-style: italic;
}
/* code and identifiers need to be distinct. */
code, span[data-el=ident] {
font-family: var(--codeFont);
color: var(--codeColor);
background-color: var(--codeBgColor);
font-size: var(--codeFontSize);
padding: var(--codePadding);
}
code.xmlTag {
background-color: transparent;
}
span[data-el=ident] {
font-style: var(--identFontStyle);
}
div:target ~ a.closer {
position: fixed;
top: 27%;
display: block;
right: 17%;
}
div:target .noteNum {
display: none;
}
.popup:nth-child(n+2) > .popup_closer {
display: none;
}
#popup_container {
position: fixed;
width: 100%;
height: calc(100% - var(--topBarHeight));
border-left: 1px solid var(--popup-border-color);
max-width: 100%;
top: calc(var(--topBarHeight));
right: 0;
overflow: auto;
z-index: 15;
background-color: var(--popup-bg-color);
}
@media only screen and (min-width: 660px) {
#popup_container {
width: 25rem;
}
}
@media only screen and (min-width: 1100px) {
#popup_container {
max-width: 25rem;
right: 0;
transform: none;
left: auto;
height: calc(100vh - var(--topBarHeight));
}
}
@media only screen and (min-width: 1600px) {
#popup_container {
left: 1200px;
right: auto;
}
}
.popup_closer {
font-family: var(--primarySans);
font-size: 1.793rem;
font-weight: 700;
cursor: pointer;
position: sticky;
height: var(--popupCloserHeight);
top: 0px;
right: 0;
width: 100%;
color: var(--highlightColor);
background-color: var(--popup-closer-bg-color);
border-bottom: 1px solid var(--popup-border-color);
border-left: none;
border-right: 1px solid var(--popup-border-color);
padding-left: 1rem;
line-height: 1;
transition: all 0.2s ease-in-out;
z-index: 10;
}
@media only screen and (min-width: 660px) {
.popup_closer {
width: 100%;
}
}
/* Thumbnails of page-images. */
div.facsPtr {
clear: both;
}
div.facsPtr a {
position: absolute;
right: 0;
width: 3em;
height: min-content;
padding: 0;
clear: both;
display: block;
opacity: 1;
}
div.facsPtr a :hover {
position: fixed;
width: 30wv;
}
div.facsPtr a img {
width: 100%;
height: auto;
}
/*Pat tester*/
@media not all and (pointer: coarse) {
.popup_closer:hover {
background-color: var(--highlightColor);
color: #fff;
}
}
#popup_container.hidden,
#lightbox_container.hidden {
display: none;
}
#popup_container.showing,
#lightbox_container.showing {
display: block;
}
.popup {
position: relative;
padding: 1rem 1rem 1rem 1rem;
background-color: var(--popupBgColor);
word-wrap: break-word;
font-size: 1.067rem;
}
.popup .returnFromNote,
.popup .noteNum {
display: none;
}
.JS.annotations div.annhighlight,
.JS.annotations div.annhighlight + [data-el=stage].annhighlight,
[data-el=stage].annhighlight + .JS.annotations div.annhighlight {
border-left: 3px solid var(--highlightColorRGBA);
}
main [data-el=supplied]::before {
content: "[";
}
main [data-el=supplied]::after {
content: "]";
}
body[data-catrefs*=BornDig] h1,
body[data-catrefs*=BornDig] h2,
body[data-catrefs*=BornDig] h3,
body[data-catrefs*=BornDig] h4,
body[data-catrefs*=BornDig] h5 {
font-family: var(--primarySans);
}
body[data-catrefs*=BornDig] h5 {
font-size: var(--h5Size);
font-weight: var(--h5Weight);
margin: var(--h5Margin);
}
body[data-catrefs*=Primary] h1,
body[data-catrefs*=Primary] h2,
body[data-catrefs*=Primary] h3,
body[data-catrefs*=Primary] h4,
body[data-catrefs*=Priary] h5 {
font-family: var(--primarySerif);
}
article h2 {
font-size: var(--pageTitleSizeMobile);
line-height: var(--pageTitleLineHeight);
font-weight: var(--pageTitleWeight);
margin-bottom: var(--pageTitleMarginBottom);
text-align: center;
letter-spacing: -0.07rem;
}
@media only screen and (min-width: 768px) {
article h2 {
font-size: var(--pageTitleSize);
}
}
body[data-catrefs*=Primary] div[data-type=titlePage] {
font-family: var(--primarySerif);
font-weight: 400;
margin-bottom: 1.5rem;
}
body[data-catrefs*=BornDig] article > h2:first-of-type {
font-size: var(--pageTitleSizeBornDigMobile);
font-family: var(--primarySans);
line-height: var(--pageTitleLineHeight);
font-weight: var(--pageTitleWeight);
margin-bottom: var(--pageTitleMarginBottom);
font-style: normal;
text-align: left;
font-weight: 700;
}
@media only screen and (min-width: 768px) {
body[data-catrefs*=BornDig] article > h2:first-of-type {
font-size: var(--pageTitleSizeBornDig);
}
}
body[data-catrefs*=Primary] h2[data-el=head] {
text-align: center;
font-variant: normal;
font-size: var(--h2primaryMobile);
font-weight: var(--h2Weight);
margin: 2rem auto 1rem auto;
font-style: italic;
}
@media only screen and (min-width: 768px) {
body[data-catrefs*=Primary] h2[data-el=head] {
font-size: var(--h2primary);
}
}
body[data-catrefs*=BornDig] h2[data-el=head],
body[data-catrefs*=BornDig] h2 {
text-align: left;
font-variant: normal;
font-size: var(--h2SizeBornDigMobile);
font-weight: 500;
margin: var(--h2Margin);
font-style: normal;
}
@media only screen and (min-width: 768px) {
body[data-catrefs*=BornDig] h2[data-el=head],
body[data-catrefs*=BornDig] h2 {
font-size: var(--h2SizeBornDig);
}
}
h2[data-el=head] span[data-el=supplied] {
font-size: var(--h2Size);
color: var(--headingFontColor);
}
body[data-catrefs*=Primary] h3[data-el=head],
body[data-catrefs*=Primary] h3 {
font-family: var(--primarySerif);
font-size: var(--h3Size);
color: var(--headingFontColor);
font-weight: var(--h3Weight);
margin: var(--h3Margin);
}
body[data-catrefs*=BornDig] h3[data-el=head],
body[data-catrefs*=BornDig] h3 {
font-family: var(--primarySans);
font-size: var(--h3Size);
color: var(--headingFontColor);
font-weight: var(--h3Weight);
margin: var(--h3Margin);
}
h4[data-el=head] {
font-family: var(--headingFont);
font-size: var(--h4Size);
color: var(--headingFontColor);
font-weight: var(--h4Weight);
margin: var(--h4Margin);
}
span[data-el=speaker],
body[data-catrefs*=Primary] article div[data-el=label][data-type=heading] {
font-family: var(--primarySerif);
font-weight: 500;
text-transform: uppercase;
font-size: var(--paraFontSizePrimaryMobile);
color: var(--paraFontColor);
display: inline-block;
}
@media only screen and (min-width: 768px) {
span[data-el=speaker],
body[data-catrefs*=Primary] article div[data-el=label][data-type=heading] {
font-size: var(--paraFontSizePrimary);
}
}
body[data-catrefs*=Primary] article div[data-el=label] {
font-family: var(--primarySerif);
font-weight: 500;
font-size: var(--paraFontSizePrimaryMobile);
color: var(--paraFontColor);
display: inline-block;
}
@media only screen and (min-width: 768px) {
body[data-catrefs*=Primary] article div[data-el=label] {
font-size: var(--paraFontSizePrimary);
}
}
span[data-el=speaker] + div,
span[data-el=speaker] ~ div,
body[data-catrefs*=Primary] article div[data-el=label] + div span[data-type*=entrance] {
padding-left: 0;
}
@media only screen and (min-width: 768px) {
span[data-el=speaker] + div,
span[data-el=speaker] ~ div,
body[data-catrefs*=Primary] article div[data-el=label] + div span[data-type*=entrance] {
padding-left: 0.5rem;
}
}
span[data-type=delivery],
span[data-type=sound],
span[data-type=business],
span[data-type=setting],
span[data-type=location],
span[data-type*=entrance] {
font-family: var(--primarySerif);
font-size: var(--stageFontSizeMobile);
font-style: italic;
}
@media only screen and (min-width: 768px) {
span[data-type=delivery],
span[data-type=sound],
span[data-type=business],
span[data-type=setting],
span[data-type=location],
span[data-type*=entrance] {
font-size: var(--stageFontSize);
margin: var(--stageMargin);
}
}
span[data-el=supplied] {
margin-left: 0.25rem;
}
span[data-type*=exit] {
font-family: var(--primarySerif);
font-size: var(--stageFontSize);
margin: var(--stageMargin);
display: block;
color: var(--paraFontColor);
font-style: italic;
text-align: right;
margin-right: 3rem;
}
body[data-catrefs*=Primary] main [data-el=lg],
body[data-catrefs*=Primary] main div[data-el=p],
body[data-catrefs*=Primary] main div[data-el=item],
body[data-catrefs*=Primary] main div[data-el=salute],
body[data-catrefs*=Primary] main div[data-el=signed],
body[data-catrefs*=Primary] main div[data-el=closer] {
line-height: var(--lineHeightPrimarySourceModern);
margin: var(--paraMargin);
font-family: var(--primarySerif);
font-size: var(--paraFontSizePrimaryMobile);
color: var(--paraFontColor);
width: 100%;
max-width: 38rem;
position: relative;
}
@media only screen and (min-width: 768px) {
body[data-catrefs*=Primary] main [data-el=lg],
body[data-catrefs*=Primary] main div[data-el=p],
body[data-catrefs*=Primary] main div[data-el=item],
body[data-catrefs*=Primary] main div[data-el=salute],
body[data-catrefs*=Primary] main div[data-el=signed],
body[data-catrefs*=Primary] main div[data-el=closer] {
font-size: var(--paraFontSizePrimary);
}
}
body[data-catrefs*=Primary] main div[data-el=item] {
margin: var(--listMargin);
}
body[data-catrefs*=Primary] main div[data-el=sp] {
line-height: var(--lineHeightPrimarySourceModern);
font-family: var(--primarySerif);
font-size: var(--paraFontSize);
color: var(--paraFontColor);
width: 100%;
max-width: 38rem;
position: relative;
margin-bottom: 1.5rem;
}
div[data-el=sp] div[data-el=p] {
margin-bottom: 0;
}
body[data-catrefs*=BornDig] [data-el=lg],
body[data-catrefs*=BornDig] div[data-el=p],
body[data-catrefs*=BornDig] p {
line-height: var(--lineHeightBornDig);
margin: var(--paraMargin);
font-family: var(--primarySans);
font-size: var(--paraFontSizeBornDigMobile);
color: var(--paraFontColor);
width: 100%;
max-width: 38rem;
position: relative;
font-weight: 400;
}
@media only screen and (min-width: 768px) {
body[data-catrefs*=BornDig] [data-el=lg],
body[data-catrefs*=BornDig] div[data-el=p],
body[data-catrefs*=BornDig] p {
font-size: var(--paraFontSizeBornDig);
}
}
main#bornDigitalArticle div[data-el=lg],
main#bornDigitalArticle div[data-el=p] {
max-width: 44rem;
}
div#appendix h2 {
font-family: var(--primarySerif);
font-size: var(--headingAppendixSize);
color: var(--headingAppendixColor);
margin: var(--headingAppendixMargin);
text-align: left;
}
div[data-type=annotation] {
margin: var(--annotationMargin);
}
/*
div.popup_content {
font-family: var(--noteFont);
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 100%;
padding-left: 1rem;
padding-right: 1rem;
@include bp-660 {
padding-left: 0;
padding-right: 0;
}
}
*/
div.popup a,
div.popup a:visited {
color: var(--link-color);
text-decoration: underline;
text-decoration-color: var(--link-text-decoration-color);
text-decoration-thickness: 1px;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
div.popup a:hover {
color: var(--link-hover-color);
text-decoration-color: var(--link-hover-text-decoration-color);
}
div[data-el=note][data-type=label] {
font-family: var(--noteHeaderFont);
font-size: var(--noteHeaderSize);
margin: var(--noteHeaderMargin);
color: var(--noteHeaderColor);
font-weight: var(--noteHeaderWeight);
display: inline;
padding-right: 0.5rem;
}
div[data-el=note][data-type=commentary],
div[data-el=note] div[data-el=p] {
line-height: var(--lineHeightPrimarySourceModern);
font-family: var(--noteFont);
font-size: var(--noteSize);
color: var(--noteColor);
width: 100%;
max-width: 38rem;
/*display: inline;*/
}
div[data-el=note][data-type=gloss],
div[data-el=note][data-type=lexical],
div[data-el=note][data-type=textual],
div[data-el=note][data-type=performance],
div[data-el=note][data-type=lineation] {
line-height: var(--lineHeightPrimarySourceModern);
margin: var(--glossMargin);
font-family: var(--noteFont);
font-size: var(--glossFontSize);
color: var(--noteColor);
width: 100%;
max-width: 38rem;
display: inline;
}
div.popup figure {
margin-bottom: 0.5rem;
}
div[data-el=note] blockquote {
font-family: var(--noteFont);
font-size: var(--noteBqSize);
margin: var(--noteBqMargin);
}
#characters_popup details blockquote {
font-family: var(--noteFont);
font-size: var(--noteParaSmall);
margin: var(--noteBqMargin);
}
div.popup div[data-el=lem], div.popup div[data-el=rdg] {
margin-bottom: 0.5rem;
font-family: var(--noteFont);
font-size: var(--noteSize);
font-weight: 400;
color: var(--noteColor);
}
/* MDH 2022-12-22: mark boundaries between apparatus
entries for the all-collations-only-collations pages. */
div[data-el=listApp] > div[data-el=lem] {
margin-top: 1em;
padding-top: 1em;
border-top: 1px solid var(--highlightColorNotActive);
}
#characters_popup div[data-type=castlist] {
margin-bottom: 1.5rem;
}
div.popup > div > div:not(.source),
div.popup div.wit-info,
div[data-el=rdg] div.wit-info,
div[data-el=lem] div.wit-info {
margin-bottom: 0.5rem;
font-family: var(--noteFont);
}
div[data-el=rdg] div.wit-info,
div[data-el=lem] div.wit-info {
margin-left: 2rem;
}
div[data-el=rdg],
div[data-el=note] {
margin-bottom: 0.5rem;
}
div.popup div.source a,
div.popup div.wit a {
font-family: var(--noteFont);
font-size: var(--noteSize);
font-weight: 500;
color: var(--link-color);
text-decoration: underline;
text-decoration-color: var(--link-text-decoration-color);
text-decoration-thickness: 1px;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
div.popup div.source a:hover,
div.popup div.wit a:hover {
color: var(--link-hover-color);
text-decoration-color: var(--link-hover-text-decoration-color);
}
div.popup .wit_info {
margin-bottom: 0.5rem;
}
figure {
max-width: 100%;
margin: 1rem 0 1rem 0;
text-align: center;
}
figure img {
margin-left: auto;
margin-right: auto;
}
figcaption {
font-size: 1rem;
font-family: var(--primarySans);
}
div[data-el=note] figure {
margin: 1.5rem auto 1.5rem auto;
text-align: center;
}
div[data-el=note] figure img {
width: 100%;
max-width: 36rem;
height: auto;
}
div[data-el=note][data-type=longCaption] {
width: 100%;
max-width: 36rem;
margin-left: auto;
margin-right: auto;
}
div[data-el=note][data-type=longCaption] {
font-family: var(--noteFont);
font-size: var(--longCaptionFontSize);
text-align: left;
padding: 0 0.25rem;
}
div[data-el=note][data-type=longCaption] div::before {
content: "— ";
}
div[data-el=note] a:link {
color: var(--link-color);
text-decoration: underline;
text-decoration-color: var(--link-text-decoration-color);
text-decoration-thickness: 1px;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
.popup div[data-el=note] a:link {
color: var(--link-color);
text-decoration: underline;
text-decoration-color: var(--link-text-decoration-color);
text-decoration-thickness: 1px;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
.popup div[data-el=note] a:hover {
text-decoration-color: var(--highlightColorActive);
}
div.disambig h3 {
font-family: var(--disambigHeaderFont);
font-weight: var(--disambigHeaderWeight);
font-size: var(--disambigHeaderSize);
color: var(--disambigHeaderColor);
}
div.disambig div[data-el=p] {
font-family: var(--disambigParaFont);
font-weight: var(--disambigParaWeight);
font-size: var(--disambigParaSize);
color: var(--disambigParaColor);
}
div.disambig div[data-el=p] ul {
font-family: var(--disambigParaFont);
font-weight: var(--disambigParaWeight);
font-size: var(--disambigParaSize);
color: var(--disambigParaColor);
}
div[data-el=person], details[data-el=person],
div[data-el=org], details[data-el=org] {
margin: var(--personMargin);
}
details[data-el=person] > summary {
font-family: var(--personHeaderFont);
font-size: var(--personHeaderSize);
color: var(--personHeaderColor);
font-weight: var(--personHeaderWeight);
margin: var(--personHeaderMargin);
text-indent: -1em;
}
div[data-el=listPerson] div[data-el=person] > h4,
div.popup div[data-el=person] > h4 {
font-family: var(--personHeaderFont);
font-size: var(--personHeaderSize);
color: var(--personHeaderColor);
font-weight: var(--personHeaderWeight);
margin: 0 0 0 0;
}
div.popup div[data-el=person] > h4[data-el=reg],
div.popup div[data-el=org] > h4[data-el=reg] {
font-family: var(--bioHeaderFont);
font-size: var(--bioHeaderSize);
color: var(--bioHeaderColor);
font-weight: var(--bioHeaderWeight);
margin: var(--bioHeaderMargin);
}
details[data-el=person] > summary {
cursor: pointer;
list-style-type: "+ ";
}
details[open][data-el=person] > summary {
list-style-type: "– ";
}
#characters_popup h2 {
font-weight: var(--h2Weight);
font-size: var(--noteH2size);
font-family: var(--primarySerif);
color: var(--noteColor);
}
#characters_popup h3 {
font-size: var(--noteH3size);
font-weight: var(--h3Weight);
font-family: var(--primarySerif);
color: var(--noteColor);
margin: var(--noteH3margin);
}
#characters_popup details div[data-el=p] {
font-family: var(--noteFont);
font-size: var(--noteParaSmall);
color: var(--noteColor);
display: block;
}
/*div#characters_popup div[data-el="person"] > h4 {
display: block;
margin-left: 2em;
}*/
div#characters div[data-el=note] {
display: inline;
}
div#characters div[data-el=note] p {
display: inline;
}
div#personography h4 {
display: inline;
padding-right: 0.5rem;
}
div#personography div[data-el=note] {
display: inline;
}
div#personography div[data-el=note] p {
display: inline;
}
body[data-catrefs*=BornDig] main a:link,
body[data-catrefs*=BornDig] main a:visited {
color: var(--link-color);
text-decoration: underline;
text-decoration-color: var(--link-text-decoration-color);
text-decoration-thickness: 1px;
transition: all 0.3s ease-in-out;
cursor: pointer;
line-height: var(--lineHeightPrimarySourceModern);
font-family: var(--primarySans);
}
body[data-catrefs*=BornDig] main a:hover {
color: var(--link-hover-color);
text-decoration-color: var(--link-hover-text-decoration-color);
}
body[data-catrefs*=Primary] main a:link,
body[data-catrefs*=Primary] main a:visited {
text-decoration: var(--annTextDecoration);
text-decoration-color: var(--annTextDecorationColor);
text-decoration-thickness: var(--annTextDecorationThickness);
text-decoration-style: var(--annTextDecorationStyle);
text-decoration-skip: edges;
text-underline-offset: var(--annTextOffset);
transition: all 0.2s ease-in-out;
line-height: var(--lineHeightPrimarySourceModern);
font-family: var(--primarySerif);
color: var(--paraFontColor);
}
@supports (text-decoration-skip-ink: none) {
body[data-catrefs*=Primary] main a:link,
body[data-catrefs*=Primary] main a:visited {
text-decoration-skip-ink: var(--annSkipInk);
}
}
body[data-catrefs*=BornDig] main table,
body[data-catrefs*=Primary] .popup table,
body[data-catrefs*=BornDig] .popup table {
font-family: var(--primarySans);
border-collapse: collapse;
margin: var(--tableMargin);
/* MDH added 2022-12-20 to handle issue with
tables on mobile. Pat should review. */
}
@media only screen and (max-width: 768px) {
body[data-catrefs*=BornDig] main table[data-simple=yes],
body[data-catrefs*=Primary] .popup table[data-simple=yes],
body[data-catrefs*=BornDig] .popup table[data-simple=yes] {
border: none;
}
body[data-catrefs*=BornDig] main table[data-simple=yes] thead tr,
body[data-catrefs*=Primary] .popup table[data-simple=yes] thead tr,
body[data-catrefs*=BornDig] .popup table[data-simple=yes] thead tr {
/*display: flex;
list-style-type: none;
border: none;*/
display: none;
}
body[data-catrefs*=BornDig] main table[data-simple=yes] tbody tr,
body[data-catrefs*=Primary] .popup table[data-simple=yes] tbody tr,
body[data-catrefs*=BornDig] .popup table[data-simple=yes] tbody tr {
display: list-item;
list-style-type: none;
margin-top: 1em;
border-width: 1pt 0 0 0;
border-style: solid;
}
body[data-catrefs*=BornDig] main table[data-simple=yes] td,
body[data-catrefs*=Primary] .popup table[data-simple=yes] td,
body[data-catrefs*=BornDig] .popup table[data-simple=yes] td {
display: list-item;
border: none !important;
list-style-type: none;
padding: 0.2em;
}
body[data-catrefs*=BornDig] main table[data-simple=yes] thead td,
body[data-catrefs*=Primary] .popup table[data-simple=yes] thead td,
body[data-catrefs*=BornDig] .popup table[data-simple=yes] thead td {
text-align: left;
}
body[data-catrefs*=BornDig] main table[data-simple=yes] tbody td[title]::before,
body[data-catrefs*=Primary] .popup table[data-simple=yes] tbody td[title]::before,
body[data-catrefs*=BornDig] .popup table[data-simple=yes] tbody td[title]::before {
content: attr(title) ": ";
font-weight: bold;
}
}
body[data-catrefs*=Primary] .popup table td,
body[data-catrefs*=BornDig] .popup table td {
font-size: var(--tableFontSizePopup);
font-weight: var(--tableFontWeightPopup);
}
table thead tr[data-role=label] td[data-el=cell] {
font-weight: 500;
font-size: var(--tableFontSizeHeader);
}
table td[data-role=label] {
font-weight: 700;
}
table tr[data-el=row] td[data-el=cell] {
font-size: var(--tableFontSize);
}
/* MH, JJ and KLB messing with tables 2021-03-26.*/
/*table tr {
border-bottom: 1px solid var(--borderColor);
}*/
table td {
padding: 0.5rem;
border: 1px solid var(--table-border-color);
vertical-align: top;
}
/* 2-col tables shouldn't have the last column too thin. */
table[data-type=ldtList] td:last-of-type:nth-of-type(2) {
min-width: var(--tocTwoColTableCellMin);
}
/* Tables used for TOC purposes shouldn't have vertical-align: middle
* or they look weird. */
/*table[data-type*="Toc"] td {
vertical-align: top;
}*/
table[data-type*=Toc] td {
border-style: none;
}
/* nameVal tables (e.g. production credit listings) need a
* fixed width for their left column. */
table[data-type=nameVal] > tbody > tr > td:first-of-type {
width: var(--nameValTableFirstColWidth);
}
div[data-el=listBibl][data-rend=grid], div[data-el=listPerson][data-rend=grid] {
display: grid;
grid-template-columns: auto auto;
grid-row-gap: 0.25em;
row-gap: 0.25em;
grid-column-gap: 0.25em;
column-gap: 0.25em;
align-items: center;
}
table[data-rend=grid] {
border-collapse: collapse;
border-width: 0;
padding: 0.25em;
}
table[data-rend=grid] td {
border-width: 0;
padding: 0.25em;
}
table[data-rend=grid] td[data-el=bibl] {
margin-left: 2em;
}
body[data-catrefs*=BornDig] table[data-el=table] td > div:last-child {
margin-bottom: 0;
}
body[data-catrefs*=BornDig] table[data-el=table] td > div[data-el=list] {
margin-left: 0;
}
body[data-catrefs*=BornDig] div[data-el=bibl],
body[data-catrefs*=BornDig] table[data-rend=grid] td[data-el=bibl] {
font-family: var(--primarySans);
font-weight: var(--light);
font-size: var(--paraFontSizePrimaryMobile);
color: var(--bodyText);
margin-left: 1.5rem;
text-indent: -1.5rem;
margin-bottom: 0.25rem;
}
@media only screen and (min-width: 768px) {
body[data-catrefs*=BornDig] div[data-el=bibl],
body[data-catrefs*=BornDig] table[data-rend=grid] td[data-el=bibl] {
font-size: var(--paraFontSizeSans);
}
}
.popup div[data-el=bibl] {
font-size: var(--noteBibl);
font-family: var(--noteFont);
font-weight: 400;
margin-left: 0;
text-indent: 0;
margin-bottom: 0;
}
span[data-el=title] {
font-style: italic;
}
span[data-el=byline] {
font-family: var(--primarySerif);
font-size: var(--paraFontSize);
color: var(--paraFontColor);
display: block;
}
body[data-catrefs*=BornDig] main ul,
body[data-catrefs*=BornDig] main ol,
body[data-catrefs*=BornDig] main div[data-el=list] {
font-family: var(--primarySerif);
font-size: var(--paraFontSizeBornDigMobile);
color: var(--paraFontColor);
margin: var(--paraMargin);
margin-left: var(--listIndentBornDig);
list-style-position: inside;
}
@media only screen and (min-width: 768px) {
body[data-catrefs*=BornDig] main ul,
body[data-catrefs*=BornDig] main ol,
body[data-catrefs*=BornDig] main div[data-el=list] {
font-size: var(--paraFontSizeBornDig);
}
}
div[data-el=salute] {
text-align: left;
}
/* Per JJ 2022-07-13: trailers should be centred by
default, but signed elements are right-aligned by default. */
div[date-el=signed] {
text-align: right;
line-height: var(--lineHeightPrimarySourceModern);
margin: var(--paraMargin);
font-family: var(--primarySerif);
font-size: var(--paraFontSizePrimaryMobile);
color: var(--paraFontColor);
width: 100%;
max-width: 38rem;
position: relative;
}
@media only screen and (min-width: 768px) {
div[date-el=signed] {
font-size: var(--paraFontSizePrimary);
}
}
div[data-el=trailer] {
text-align: center;
line-height: var(--lineHeightPrimarySourceModern);
margin: var(--paraMargin);
font-family: var(--primarySerif);
font-size: var(--paraFontSizePrimaryMobile);
color: var(--paraFontColor);
width: 100%;
max-width: 38rem;
position: relative;
}
@media only screen and (min-width: 768px) {
div[data-el=trailer] {
font-size: var(--paraFontSizePrimary);
}
}
div[data-el=p] > div[data-el=list] {
margin-top: 1.5rem;
}
body[data-catrefs*=BornDig] div[data-rend=simple] {
margin-left: 0;
margin-bottom: 1.5rem;
}
body[data-catrefs*=BornDig] main li,
body[data-catrefs*=BornDig] main div[data-el=item] {
font-family: var(--primarySans);
}
#bornDigitalArticle li,
#bornDigitalArticle div[data-el=item],
body[data-catrefs*=BornDig] main div[data-el=item] {
display: list-item;
list-style-type: disc;
margin-bottom: 0.25rem;
}
/* But we don't want discs in spec page output. */
html[id^=lemdo_spec] #bornDigitalArticle.documentation div[data-el=item] {
list-style-type: none;
}
#bornDigitalArticle div[data-rend=simple] > div[data-el=item] {
list-style-type: none;
margin-left: 0.1rem;
}
#bornDigitalArticle div[data-rend=numbered] > div[data-el=item] {
list-style-type: decimal;
}
#bornDigitalArticle li li,
#bornDigitalArticle div[data-el=item] div[data-el=item] {
list-style-type: circle;
}
body[data-catrefs*=Primary] article div.blockquote div[data-el=p],
body[data-catrefs*=Primary] article blockquote {
font-size: var(--paraFontSize);
margin: var(--blockquoteMargin);
width: 100%;
max-width: var(--blockquoteMaxWidth);
}
body[data-catrefs*=BornDig] blockquote,
body[data-catrefs*=BornDig] div.blockquote {
font-size: var(--blockquoteFontSize);
padding: var(--blockquoteMargin);
width: 100%;
max-width: var(--blockquoteMaxWidth);
}
@media only screen and (min-width: 768px) {
body[data-catrefs*=BornDig] blockquote,
body[data-catrefs*=BornDig] div.blockquote {
font-size: var(--blockquoteFontSize);
}
}
body[data-catrefs*=BornDig] div[data-el=p] > blockquote {
margin-top: 0.5rem;
}
body[data-catrefs*=BornDig] blockquote div[data-el=lg] {
margin-bottom: 0;
}
body[data-catrefs*=BornDig] blockquote span[data-el=bibl],
body[data-catrefs*=BornDig] div.blockquote span[data-el=bible] {
width: 100%;
text-align: right;
font-size: 0.937rem;
font-style: normal;
}
body[data-catrefs*=BornDig] blockquote:has(span[data-el=bibl]) > * {
margin-bottom: 0;
}
body[data-catrefs*=BornDig] blockquote span[data-el=bibl]::before {
content: "— ";
font-size: 0.937rem;
font-family: var(--primarySans);
}
article div.blockquote div[data-el=p],
article blockquote div[data-el=p] {
margin: var(--blockquoteParaMargin);
font-size: var(--blockquoteFontSize);
line-height: var(--blockquoteLineHeight);
}
div.blockquote footer,
blockquote footer {
font-size: var(--blockquoteFooterFontSize);
font-family: var(--primarySerif);
}
#asidePopUps {
position: fixed;
height: calc(100vh - var(--topBarHeight));
top: var(--topBarHeight);
right: 0;
width: 200px;
overflow: scroll;
background-color: fuchsia;
display: none;
}
#asidePopUps.closed {
flex-basis: 0px;
}
#documentWrapper {
display: flex;
flex-direction: row;
padding: 0 1rem 0 2.5rem;
}
@media only screen and (min-width: 500px) {
#documentWrapper {
padding: 0;
}
}
div[data-el=l] {
position: relative;
z-index: 1;
}
/* We need to indent medial and final line-parts
* in the case of broken lines. */
div[data-el=l][data-part=M] {
margin-left: 10rem;
}
div[data-el=l][data-part=F] {
margin-left: 20rem;
}
/*.annotation.gloss.apparatus:link,
.annotation.gloss.apparatus:visited {
color: #353535;
text-decoration: underline;
text-decoration-color: var(--highlightColorNotActive);
//text-decoration-thickness: 3px;
text-underline-offset: 6px;
text-decoration-skip-ink: none;
transition: text-decoration-color .2s ease-in-out;
}*/
@media not all and (pointer: coarse) {
.annotation.gloss.apparatus:hover {
text-decoration-color: var(--highlightColor);
}
}
/* JAVASCRIPT ONLY */
.JS.annotations span.annhighlight,
.JS.collations span.apphighlight {
cursor: pointer;
width: fit-content;
/*-webkit-animation: bottom fadein 2s; /\* Safari, Chrome and Opera > 12.1 *\/
-moz-animation: border-b0 fadein 2s; /\* Firefox < 16 *\/
-ms-animation: border fadein 2s; /\* Internet Explorer *\/
-o-animation: border fadein 2s; /\* Opera < 12.1 *\/*/
transition: border-bottom linear 0.25s;
}
.JS.annotations div.annhighlight,
.JS.collations div.apphighlight {
cursor: pointer;
/*-webkit-animation: bottom fadein 2s; /\* Safari, Chrome and Opera > 12.1 *\/
-moz-animation: border-b0 fadein 2s; /\* Firefox < 16 *\/
-ms-animation: border fadein 2s; /\* Internet Explorer *\/
-o-animation: border fadein 2s; /\* Opera < 12.1 *\/*/
transition: border-left linear 0.25s;
}
/* SPANS */
/* Single note containing one underline*/
.JS.annotations span.annhighlight {
text-decoration: underline;
text-decoration-color: var(--highlightColorNotActive);
text-decoration-thickness: 3px;
text-underline-offset: 7px;
transition: text-decoration-color 0.2s ease-in-out;
}
@media not all and (pointer: coarse) {
.JS.annotations span.annhighlight:hover {
text-decoration-color: var(--highlightColor);
}
}
/* DOUBLE NOTE */
/* SELECTED SINGLE NOTE */
/* SELEcTED DOUBLE NOTE */
/* DIVS */
.JS.annotations div.annhighlight[data-ann*=" note"],
.JS.collations div.apphighlight[data-app*=" app"] {
/* The margin left must be equivalent to the width of the underline size
* + the amount of padding */
}
/* COLLATIONS */
.JS.collations span.apphighlight {
border-bottom: var(--single-underline-size) solid var(--collation-underline-color);
}
/* DOUBLE NOTE */
.JS.collations span.apphighlight[data-app*=" app"] {
border-bottom: var(--double-underline-size) double var(--collation-underline-color);
}
/* SELECTED SINGLE NOTE */
.JS.collations span.apphighlight.selectedNote {
border-bottom: var(--single-underline-size) solid var(--selected-collation-underline-color);
}
/* SELECTED DOUBLE NOTE */
.JS.collations span.apphighlight.selectedNote[data-app*=" app"] {
border-bottom: var(--double-underline-size) double var(--selected-collation-underline-color);
}
.JS.collations div.apphighlight {
border-left: var(--single-underline-size) solid var(--collation-underline-color);
}
.JS.collations div.apphighlight[data-app*=" note"] {
border-left: var(--double-underline-size) double var(--collation-underline-color);
}
.JS.collations div.apphighlight.selectedNote {
border-left: var(--single-underline-size) solid var(--selected-collation-underline-color);
}
.JS.collations div.apphighlight[data-app*=" note"].selectedNote {
border-left: var(--double-underline-size) double var(--selected-collation-underline-color);
}
/* NOTE MARKERS */
.JS .primarySource.modern a.noteMarker,
.JS .primarySource.modern a.appMarker {
/* -webkit-animation: transform .5s forwards; /\* Safari, Chrome and Opera > 12.1 *\/
-moz-animation: transform .5s forwards; /\* Firefox < 16 *\/
-ms-animation: transform .5s forwards; /\* Internet Explorer *\/
-o-animation: transform .5s forwards; /\* Opera < 12.1 *\/*/
}
.JS .primarySource.modern + div#appendix > #notes,
.JS .primarySource.modern + div#appendix > #collations,
.JS .primarySource.modern + div#appendix > #characters,
.JS div#appendix > #metadata {
display: none;
}
div[data-type=scene] {
padding-top: calc(var(--topBarHeight) + 10px);
margin-top: calc(var(--topBarHeight) - 10px);
}
@supports (scroll-margin-top: calc(var(--topBarHeight) + 10px)) {
div[data-type=scene] {
scroll-margin-top: calc(var(--topBarHeight) + 10px);
margin-top: 0;
padding-top: 0;
}
}
/* Overrides for staticSearch forms. Because staticSearch
* CSS appears first in the head element, it's overridden
* by other CSS, which is sometimes not what we want. */
/* staticSearch list items (for descs etc.) should not
* have bullets etc. */
#bornDigitalArticle fieldset.ssFieldset ul {
margin: 0;
}
.omit::after {
content: var(--omitted-content);
}
dt.taxoPref {
font-family: var(--primarySans);
font-weight: 700;
color: var(--paraFontColor);
font-size: var(--paraFontSize);
}
main * {
overflow-wrap: break-word;
}
@media only screen and (min-width: 768px) {
main * {
overflow-wrap: normal;
}
}
#staticSearch ul {
padding: 0;
margin: 0;
position: relative;
}
#staticSearch ul li {
display: grid;
grid-template-columns: 1rem auto;
gap: 0.5rem;
color: var(--text-color);
font-size: 0.988rem;
padding: 0;
margin: 0 0 0 0.75rem;
}
#staticSearch ul li label {
font-family: var(--primarySans);
font-weight: 400;
color: #222222;
font-size: 0.988rem;
letter-spacing: -0.131966px;
}
#staticSearch ul li input[type=checkbox] {
-webkit-appearance: none;
appearance: none;
background-color: transparent;
margin: 0;
color: currentcolor;
width: 1.15em;
height: 1.15em;
border: 0.1em solid currentcolor;
border-radius: 0.15em;
transform: translateY(0.15em);
display: grid;
place-content: center;
padding: 0;
}
#staticSearch ul li input[type=checkbox]::before {
content: "";
width: 0.65em;
height: 0.65em;
transform: scale(0);
transition: 120ms transform ease-in-out;
box-shadow: inset 1em 1em var(--highlightColor);
transform-origin: bottom left;
/*Remove this for a square marker*/
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
/* Windows High Contrast Mode */
background-color: CanvasText;
}
#staticSearch ul li input[type=checkbox]:checked::before {
transform: scale(1);
}
#staticSearch ul li input[type=checkbox]:focus {
outline: max(1px, 0.1em) solid currentColor;
outline-offset: max(1px, 0.1em);
}
#staticSearch li + li {
margin-top: 0.25rem;
}
#ssForm button {
border: none;
background-color: var(--highlightColor);
font-family: var(--primarySans);
font-weight: 500;
color: #fff;
padding: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--highlightColor);
padding: 0.25em 0.75em;
min-width: 10ch;
min-height: 44px;
text-align: center;
line-height: 1.1;
transition: all 0.3s ease-in-out;
}
#ssForm button:focus {
outline-style: solid;
outline-color: transparent;
box-shadow: 0 0 0 2px #002C4F;
}
div.ssDescFilters fieldset, div.ssDateFilters fieldset, div.ssNumFilters fieldset, div.ssBoolFilters fieldset, div.ssSearchInFilters fieldset {
margin: 0.25em auto;
padding: 0.25em;
flex-grow: 1;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
form#ssForm {
width: 100%;
max-width: var(--page-text-width);
margin-bottom: 3rem;
}
#ssForm *[class^=ss] fieldset {
margin-bottom: 1rem;
}
#ssForm legend {
color: #222222;
font-family: var(--primarySans);
font-size: 1.1rem;
font-weight: 500;
}
#ssForm button + button {
margin-left: 1rem;
}
span.ssQueryAndButton {
margin-bottom: 0.5rem;
}
#ssForm *[class^=ss] input:not([type=checkbox]) {
border: 1px solid transparent;
border-radius: 3px;
width: 100%;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
font-family: var(--primarySans);
font-weight: 400;
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
color: #222222;
position: relative;
background-image: url(../images/search-inactive.svg);
background-repeat: no-repeat;
background-position: top 50% right 15px;
background-size: 27px 27px;
transition: all 0.3s ease-in-out;
outline: none;
margin-right: 0.5rem;
max-width: 100%;
font-size: 1rem;
}
@media only screen and (min-width: 1024px) {
#ssForm *[class^=ss] input:not([type=checkbox]) {
font-size: 0.878rem;
}
}
#ssForm *[class^=ss] input:focus:not([type=checkbox]) {
background-color: #fff;
background-image: url(../images/magnifying-glass.svg);
outline: none;
color: #222222;
border: 1px solid var(--highlightColor);
background-color: #fff;
color: #222222;
}
span.clearButton {
margin-bottom: 1.5rem;
}
div#ssResults > ul > li {
padding: 0;
margin: 0;
}
/*# sourceMappingURL=lemdo-dev.css.map */