/* Global settings */

* {
    margin: 0;
    border: 0;
    padding: 0;
}

body {
    font-family: "Karmilla";
    background-color: hsl(20, 7%, 97%);
    margin: 0;
    font-size: 18px;
    line-height: 26px;
}

input,
form *,
button {
    font-family: "Karmilla", "sans-serif";
}

code {
    font-family: "Inconsolata", monospace;
}

/*
.about-page p {
    font-size: 28px;
    line-height: 36px;
}
*/

a {
    text-decoration: inherit;
    color: inherit;
    background-color: transparent;
    /*     text-transform: capitalize; */
}

header a,
footer a {
/*     text-decoration: inherit; */
}

p a {
    text-decoration: underline;
}

body main {
    color:hsl(180, 15%, 23%);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 102px;
}

.content-missing {
    font-style: italic;
}

.hidden {
    display: none;
}

*:focus {
    outline-color: hsl(180, 15%, 30%);
/*     outline-width: 30px; */
/*     outline-offset: 5px; */
}

ul {
    list-style: inside;
/*     margin: 0.5em 0; */
}

#lightbox-background {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: hsla(0, 0%, 0%, 85%);
    top: 0;
    left: 0;
    z-index: 30000;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
}

#lightbox-background.active {
    display: flex;
}

#lightbox-content {
    background-color: hsl(20, 7%, 97%);
    border-radius: 5px;
    padding: 12px 24px;
    text-align: center;
    border: solid 2px;
    border-color: hsl(180, 15%, 30%);
    color: hsl(180, 15%, 23%);
}

/*
body main p {
    margin-top: 16px;
    margin-bottom: 16px;
}
*/

/* Header and footer */

figure.landing-splash {
    width: 100%;
    /*
    display: flex;
    */
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    height: 800px;
}

figure.landing-splash > div {
    flex-grow: 1;
    max-height: 60px;
}

#onb-logo {
    flex-grow: 2;
    flex-shrink: 1;
    max-width: 360px;
    width: 100%;
    max-height: 360px;
    padding: 20px;
}

#onb-logo svg {
    min-width: 120px;
    min-height: 120px;
    width: auto;
    width: 100%;
    height: auto;
}

#onb-logo svg .cls-3 {
    fill: hsl(180, 05%, 05%);
}

#labs-doodle {
    position: relative;
    flex-grow: 0;
    flex-shrink: 0;
    /* height: 75px; */
    padding: 30px 0;
    margin-bottom: 24px;
    font-size: 36pt;
    vertical-align: middle;
    display: inline-flex;
    justify-content: flex-start;
    cursor: pointer;
    border-radius: 5px;
    /*border-style: solid;*/
    /*border-color: hsl(20, 7%, 97%);*/
    overflow: hidden;
    transition: text-shadow 0.05s;
    left: -44px;
}

#labs-doodle:not(:hover) {
    /*
    transition: text-shadow 0.6s;
    */
}

#labs-doodle:hover {
    /*
    transform-origin: center;
    transform: scale(1.03);
    transition: transform 0.2s ease-in-out;
    */
    /*
    text-shadow: 2px 2px 2px hsl(180, 40%, 50%);
    transition: text-shadow 0.5s;
    */
}

#labs-doodle > span {
}

#labs-doodle .light {
    color: hsl(180, 05%, 25%);
}

#labs-doodle .dark {
    color: hsl(180, 05%, 05%);
}

#labs-doodle .fine {
    font-weight: 400;
}

#labs-doodle .heavy {
    font-weight: 700;
}

#title_text_1 {
    width: 2.4em;
    text-align: right;
}

#title_text_2 {
    width: 2.4em;
    text-align: right;
}

#title_text_3 {
    width: 1.5em;
    text-align: center;
}

#title_text_4 {
    width: 2.6em;
    text-align: left;
}

#title_text_5 {
    width: 2.4em;
    text-align: left;
}

div.landing-page-splash-text {
    max-width: 900px;
    margin-bottom: 54px;
    margin-top: 24px;
    /* margin-bottom: 72px; */
}

div.landing-page-splash-text {
    font-size: 22px;
    line-height: 30px;
}

div.landing-page-splash-text p + p {
    margin-top: 24px;
    font-size: 18px;
    line-height: 26px;
}


div.landing-page-hero {
    background-color: hsl(180, 50%, 20%);
    color: hsl(180, 0%, 85%);
    border-radius: 5px;
    padding: 35px;
}

div.landing-page-hero h2 {
    font-weight: 700;
    margin-bottom: 16px;
}

div.landing-page-hero p {
    font-weight: 400;
}

div.landing-page-hero a {
    text-decoration: none;
}

div.landing-page-hero h2:hover {
    color: hsl(180, 20%, 100%);
}

div.landing-page-hero p + h2 {
    margin-top: 32px;
}

/* Navigation and menus */

header {
    background-color: hsl(20, 7%, 97%); /* fallback */
    background-color: hsla(20, 7%, 97%, 0.85);
    z-index: 20000;
}

header.fixed {
    position: fixed;
    width: 100%;
    top: 0;
}
/*
header.fixed + main {
    padding-top: 92px;
}
*/
header nav .left svg .cls-3 {
    fill: hsl(20, 7%, 97%);
    transition: fill .5s;
}

header.fixed nav .left svg .cls-3{
    fill: hsl(180, 5%, 30%);
    transition: fill .5s;
}

header nav .left > a {
    width: 48px;
    height: 48px;
}

header nav .left > a svg {
    width: 48px;
    height: 48px;
    /* transition: width .2s cubic-bezier(0.125, -0.600, 1.000, 1.650), height cubic-bezier(0.125, -0.600, 1.000, 1.650); */
}


header nav .language-selector {
    align-items: center;
    color: hsla(180, 5%, 35%, 1);
    display: flex;
    font-weight: bold;
    margin-left: 32px;
}

header nav .language-selector a {
    padding: 0px 8px;
    transition: background-color .2s;
}

header nav .language-selector :hover,
header nav .language-selector .selected {
    background-color: hsla(180, 5%, 35%, 1);
    color: white;
    border-radius: 2px;
    transition: background-color .2s;
}


header nav {
    display: flex;
    flex-flow: row wrap;
    height: 74px;
}

header nav .left,
header nav .right {
    flex-grow: 0;
    flex-basis: 50px;
}

header nav .left {
    padding-left: 16px;
}

header nav .right {
    padding-right: 16px;
}

header nav .center {
    flex-grow: 1;
    padding-right: 12px;
}

header nav .left {
    display: flex;
    justify-content: center;
    align-items: center;
}

header nav .center ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    height: 74px;
}

header nav .center ul li {
    position: relative;
    top: 9px;
    list-style-type: none;
    padding: 0px 20px;
    color: hsla(180, 5%, 35%, 1);
    font-size: 13pt;
    font-weight: 400;
    margin-top: -10px;
}

header nav .center ul li a::after {
    background-color: hsl(180, 50%, 30%);
    display: block;
    width: auto;
    max-width: 0;
    height: 2px;
    content: '';
    margin-top: 4px;
    transition: max-width 300ms;
}

header nav .center ul li a:hover::after {
    max-width: 100%;
    transition: max-width 500ms;
}

header nav .center ul li a:hover {
    color: hsl(180, 5%, 10%);
    transition: color 500ms;
}

header nav .right {
    min-width: 100px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}


header #user-menu {
    display: flex;
    justify-content: center;
    height: 31px;
    /*     width: 36px; */
    /* padding: 8px; */
    border-radius: 2px;
    letter-spacing: 1px;
    font-size: 18px;
    padding-top: 5px;
    cursor: pointer;
    border-color: hsl(180, 15%, 30%);
    border-width: 2px;
    border-style: solid;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.15s, background-color 0.25s;
}

header #user-menu span.button {
    padding-left: 8px;
    padding-right: 8px;
    min-width: 22px;
    text-align: center;
}

header #user-menu.logged-in,
header #user-menu.logged-out:hover {
    color: hsl(20, 5%, 89%);
    background-color: hsl(180, 15%, 30%);
}

header #user-menu.logged-out {
    color: hsl(180, 15%, 30%);
}

#toast-container {
    position: fixed;
    width: 400px;
    height: 70px;
    line-height: 70px;
    top: 30px;
    left: 50%;
    margin-left: -100px;

    padding: 12px 24px 20px 24px;
    border-radius: 5px;

    text-align: center;
}

#toast-container.active {
    z-index: 100;
    color: white;
    background-color: hsla(180, 15%, 20%, 0.8);
    transition: background-color 0.4s, color 0.4s;
}

#toast-container:not(.active) {
    /* z-index: -100; */
    color: hsla(180, 0%, 0%, 0.0);
    background-color: hsla(180, 0%, 0%, 0.0);
    transition: background-color 0.4s, color 0.4s;
}

#toast-container span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    font-weight: 700;
    font-size: 24px;
}

#site-footer.sticky {
    position: absolute;
    bottom: 0;
    width: 100%;
}

footer {
    margin-top: 42px;
    background-color: hsl(180, 15%, 13%);
}

footer a {
    color: #d3d3d3;
    font-decoration: none;
    font-size: 18px;
    text-transform: none;
/*     font-weight: 700; */
}

footer div.logo {
    display: inline-block;
    vertical-align: top;
    margin: 10px 10px 10px 0px;
}

footer div.links {
    display: inline-block;
    vertical-align: top;
    margin: 10px;
    margin-right: 100px;
}

footer div.links ul {
    list-style-type: none;
}

footer div.links li {
    margin-bottom: 0.5em;
}

footer div.disclaimer {
    color: #909090;
    display: inline-block;
    margin: 10px;
}

footer .disclaimer p {
    margin-bottom: 1em;
}

footer .disclaimer b {
    color: #c3c3c3;
}

footer section.upper {
    /*
    display: flex;
    justify-content: space-between;
    */
    padding: 12px 25px 22px 25px;
    vertical-align: middle;
    text-align: center;
    color: #f4f4f4;
    font-size: 18px;
}

footer section.upper ul {
    list-style-type: none;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

footer section.upper ul li {
    margin: 0px 44px;
}

footer section.upper a {
    color: #d3d3d3;
    font-decoration: none;
    font-size: 18px;
    text-transform: none;
    align-content: center;
}

footer section div.main {
    width: 1008px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer section.lower {
    padding: 30px 25px 25px 25px;
    vertical-align: middle;
    text-align: center;
    background-color: hsl(180, 15%, 5%);
    color: #f4f4f4;
    font-size: 12px;
}

footer section.lower ul {
    list-style-type: none;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}

footer section.lower ul li {
    margin: 0px 22px;
}

footer section.lower a {
    color: #d3d3d3;
    font-decoration: none;
    font-size: 14px;
    text-transform: none;
}

footer section.upper ul li.logo {
    margin-left: 18px;
    margin-right: 18px;
}

footer #onb-logo {
    position: relative;
    width: 170px;
    top: 23px;
    fill: white;
    cursor: pointer;
    transition: transform 0.3s;
}

footer #onb-logo:hover {
    transform: scale(1.05);
}

/* Articles */

main {
    /*
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    */
}

main h1 {
    text-align: left;
    width: 100%;
    max-width: 1008px;
    font-size: 36pt;
    padding: 30px 0;
    line-height: initial;
}

main h1 + article {
    margin-top: 38px;
}

main article {
    max-width: 1008px;
    width: 100%;
}

main article .textblock {
    width: 100%;
    margin-bottom: 74px;
}

.textblock > div {
    display: inline-block;
    vertical-align: top;
}

.textblock > .article-title {
    width: 300px;
    font-size: 18px;
}

.textblock > .article-body {
    width: 568px;
}

.about-page .textblock > .article-body {
    width: 703px;
    font-size: 18px;
    line-height: 26px;
}


.textblock > div:nth-child(1)::after {
    content: "";
    width: 72px;
    height: 10px;
    display: inline-block;
    border-bottom-style: solid;
    border-width: 4px;
    border-color: hsl(180, 5%, 5%);
}

.textblock h3 {
    /* background-color: magenta; */
    margin-block-start: 0;
    margin-block-end: 0;
}


.textblock p:nth-child(1) {
    /* background-color: cyan; */
    padding-top: 42px;
}

.textblock p + p {
    margin-top: 12px;
}

.textblock p a {
    text-decoration: underline;
}


/* Landing page faceted search */

#faceted-search {
    margin-top: 42px;
    margin-bottom: 28px;
}

#faceted-search li {
    list-style-type: none;
    display: inline-block;
}

#faceted-search .facets {
    margin-bottom: 12px;
}

#faceted-search .facets ul {
    display: flex;
    justify-content: center;
}


#faceted-search .facets li a {
    text-transform: uppercase;
    padding: 0.9em 1.3em;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: hsl(20, 5%, 84%);
}

#faceted-search .facets li a:hover {
    background-color: hsl(20, 5%, 89%);
}

#faceted-search .facets li.menu-open a {
    border-color: hsl(210, 80%, 70%);
    border-width: 2px;
}

#faceted-search .facets li.active a {
    color: hsl(0, 0%, 100%);
    background-color: hsl(180, 22%, 39%);
    border-color: hsl(180, 22%, 39%);
}

#faceted-search .facets li.active a:hover {
    background-color: hsl(180, 22%, 32%);
    border-color: hsl(180, 22%, 32%);
}

#faceted-search .category-options-container {
    position: fixed;
    z-index: 1010;
    background-color: hsl(20, 7%, 97%);
    margin-top: 20px;
    padding: 15px;
    border-radius: 5px;
}

#faceted-search .category-options-container ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}


#faceted-search .category-options-container li {
    margin: 5px 14px 2px 14px;
    padding-bottom: 5px;
    border-bottom: 2px hidden;
    text-transform: uppercase;
}

#faceted-search .category-options-container li:hover {
    margin-bottom: 0px;
    border-bottom: 2px solid hsl(180, 15%, 23%);
}

#faceted-search .category-options-container {
    display: none;
}

#faceted-search .category-options-container.selected {
    display: initial;
}

/* Landing page topic display */

#topics {
    max-width: 1008px;
    cursor: default;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 36px;
}

.topic .topic-image {
    overflow: hidden;
    height: 470px;
}

.topic .topic-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#topics > .topic.deselected {
    /* flex-basis: 0; */
}

#topics > .topic:nth-child(4n+2):not(.deselected) {
    display: inline-block;
    flex-grow: 0;
    height: 470px;
    width: 380px;
    overflow: hidden;
}

#topics > .topic:nth-child(4n+1):not(.deselected) {
    display: inline-block;
    flex-grow: 0;
    height: 470px;
    width: 614px;
    overflow: hidden;
}

#topics > .topic:nth-child(4n+4):not(.deselected) {
    display: inline-block;
    flex-grow: 0;
    height: 470px;
    width: 614px;
    overflow: hidden;
}

#topics > .topic:nth-child(4n+3):not(.deselected) {
    display: inline-block;
    flex-grow: 0;
    height: 470px;
    width: 380px;
    overflow: hidden;
}

#topics > .topic {
    /* margin: 8px; */
    display: inline-block;
    padding: 0px;
    width: 350px;
    height: 470px;
    overflow: hidden;
    margin-bottom: 12px;
}

#topics > .topic > a {
    display: inline-block;
    width: 100%;
    height: 100%;
}

#topics > .topic > a  > div{
    display: inline-block;
    width: 100%;
    height: 100%;
}

@keyframes deselect-transition {
    0% {
        width: inherit;
    }

    100%  {
        width: 10px;
    }
}

#topics section.topic {
    /* transition: width 1s; */
    /* flex-grow: inherit; */

    transition: width 0.5s,
        opacity 0.5s,
        margin 0.5s,
        border 0.5s;

        /*
    transition:
        opacity 0.5s,
        margin 0.5s,
        padding 0.5s,
        border 0.5s
        flex-basis 0.5s
        ;
        */
}

#topics section.topic.deselected {
    width: 0;
    /* opacity: 0; */
    margin-left: 0;
    margin-right: 0;
    /* border: 0; */
    /* flex-basis: 0; */
    /* border: 2px solid magenta; */
}

.topic-section-overlay {
    position: fixed;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: hsla(180, 10%, 90%, 0);
    z-index: -1000;
}

.topic-section-overlay a {
    display: inline-block;
    width: 100%;
    height: 100%;
}

.topic-section-overlay.active {
    position: fixed;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: hsla(180, 10%, 90%, 0.9);
    z-index: 1000;
}

.topic .topic-overlay {
    position: relative;
    height: 470px;
    background-color: rgba(0, 0, 0, 0.63);
    top: -600px;
    transition: top 0.3s, color 0.6s;
}

.topic .topic-invisible-overlay-sibling {
    width: 100%;
    height: 100%;
    position: relative;
    top: -470px;
    z-index: 20;
}

.topic .topic-invisible-overlay-sibling > a {
    width: 100%;
    height: 100%;
}

.topic .topic-invisible-overlay-sibling + .topic-overlay {
    color: white;
}

.topic .topic-overlay h3.topic-subtitle {
    color: white;
}

.topic .topic-invisible-overlay-sibling:hover + .topic-overlay {
    top: -940px;
    color: hsla(180, 0%, 60%, 0.7);
}

.topic .topic-text {
    position: relative;
    height: 80px;
    text-decoration: none;
    padding-left: 21px;
    padding-right: 21px;
    padding-top: 34px;
    padding-bottom: 34px;
/*     color: #e5e3e2; */
}

.topic .topic-invisible-overlay-sibling {
    background-color: transparent;
}

.topic h2.topic-title-top {
    opacity: 0.9;
    text-decoration: none;
    font-size: 22px;
    font-weight: 400;
    margin-top: 4px;
}

.topic h2.topic-title-bottom {
    opacity: 0.9;
    text-decoration: none;
    font-size: 26px;
    line-height: 29px;
    font-weight: 700;
}

.topic h3.topic-subtitle {
    margin-top: 134px;
    font-size: 26px;
    line-height: 38px;
}

.topic p {
    margin-top: 24px;
    font-weight: 700;
    font-size: 18px;
}


/* About page feature matrix */

#why-register table {
    border-collapse: collapse;
    width: 100%;
}

#why-register table,
#why-register th,
#why-register td {
    border-style: solid;
    border-width: 2px;
    border-color: hsl(180, 15%, 85%);
    padding: 4px;
    margin-top: 48px;
}

#why-register img {
    max-width: 20px;
    max-height: 20px;
    padding-top: 4px;
}

#why-register tr:nth-child(1) {
    height: 36px;
}

#why-register td {
    text-align: center;
}

#why-register td:nth-child(1) {
    text-align: left;
    padding-left: 1em;
}

#why-register .category-heading {
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
}


/* Landing page latest additions display */

#news {
    padding-top: 16px;
}

#news > h2 {
    font-size: 22px;
    font-weight: 700;
}

#news .news-head {
    padding-top: 22px;
    padding-bottom: 6px;
}

#news .news-body {
    padding-bottom: 12px;
}

#news .news-date {
    display: inline-block;
/*     width: 100px; */
/*     padding-right: 12px; */
    font-weight: 700;
}

#news .news-title {
    display: inline-block;
    font-weight: 700;
}

#news .news-text {

}


/* Landing page events display */

#events {
    margin-top: 80px;
    width: 1008px;
    cursor: pointer;
    margin-bottom: 24px;
    padding-left: 54px;
    padding-right: 54px;
    padding-top: 36px;
    padding-bottom: 24px;
}

#events > h1 {
    text-transform: uppercase;
    font-size: 140%;
    text-align: center;
    margin-bottom: 30px;
}

#events.columns {
    display: inline-flex;
}

#events-current, #events-past {
    display: inline-block;
    width: 40%;
    padding: 30px;
}

#events-current > h2, #events-past > h2 {
    text-transform: uppercase;
    font-size: 120%;
}

div.events-columns h2 {
    text-align: center;
    padding-bottom: 20px;
}

ul.events {
    list-style-type: none;
}

ul.events li {
    display: inline-flex;
    margin-bottom: 20px;
}

li .event-date {
    display: inline-block;
    border: 2px solid hsl(180, 15%, 23%);
    box-shadow: 10px 10px 5px hsl(180, 7%, 45%);
    width: fit-content;
    min-width: 3em;
    height: fit-content;
    padding: 5px;
    margin-right: 20px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
}

li .event-description {
    display: inline-block;
}


/* Topic page elements */
/*
main > section:nth-child(3) {
    margin-top: 90px;
}
*/

section.subsection {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: left;
    width: 1008px;
    /* margin-top: 28px; */
    margin-bottom: 24px;
    padding-left: 54px;
    padding-right: 54px;
    /* padding-bottom: 24px; */
    font-size: 18px;
    line-height: 26px;
    border-radius: 5px;
    cursor: default;
}

section.subsection section.sub-text p + p {
    padding-top: 18px;
}

.sub-text ul {
    margin-top: 24px;
    margin-bottom: 32px;
    list-style: none;
}

.sub-text li {
    margin-bottom: 12px;
}

.sub-text li a {
    text-decoration: underline;
}

.sub-text p + h2 {
    margin-top: 36px;
}

.subsection h2 {
    font-size: 22px;
    font-weight: normal;
    margin-bottom: 20px;
}

.subsection h2 a {
    display: flex;
    width: fit-content;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.1, 0.3, 0.7, 0.9);
}

.subsection h2 a:hover {
    transform: scale(1.02);
}

.subsection h2 a img,
.subsection h2 a svg {
    height: 44px;
    width: 44px;
    margin-right: 18px;
}


.subsection section {
    padding: 0 0 48px 0;
}

.sub-text p a {
    text-decoration: underline;
}

.sub-text p a:hover {
    color: initial;
}

.sub-text img {
    max-width: 100%;
}

/* Topic page banner */

main > section.subsection:hover:nth-child(1) {
    background-color: inherit;
}

section.banner {
    width: 100%;
    height: 594px;
    background-repeat: no-repeat;
    background-size: cover;
}

section.banner img {
    display: block;
    margin: 0 auto;
}

section.summary {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #f7f4f1;
    color: #433237;
    height: 92px;
    padding-left: 54px;
    padding-right: 54px;
}

section#summary h2 {
    text-align: left;
    width: 100%;
    max-width: 1008px;
    font-size: 36pt;
    font-weight: 700;
    padding: 30px 0;
    line-height: initial;
}

section.summary div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-basis: 10%;
    flex-grow: 1;
    font-size: 22px;
}

section.summary div span {
    margin-right: 36px;
    padding-top: 10px;
    padding-bottom: 10px;
}

section.summary div span:hover {
    color: white;
    border-bottom: solid 2px white;
    padding-bottom: 8px;
}


/* Topic page tables */

.sub-table table {
    border-collapse: collapse;
    width: 100%;
}

.sub-table th, .sub-table td {
    padding: 8px 16px 8px 16px;
}

tr.sub-table.header-row {
    background-color: hsla(180, 9%, 84%, 1);
}

tr.sub-table.row td {
    padding-top: 18px;
    padding-bottom: 18px;
}

.sub-table th {
    /* border-bottom: 1px solid #fff; */
    width: 33%;
}

.sub-table th:nth-child(1),
.sub-table td:nth-child(1),
.sub-table th:nth-child(3),
.sub-table td:nth-child(3)
 {
    width: 26%;
    vertical-align: top;
}

.sub-table th:nth-child(2),
.sub-table td:nth-child(2)
 {
    width: 48%;
}

.sub-table th:nth-child(2) p,
.sub-table td:nth-child(2) p
 {
    width: 75%;
}


.sub-table td {
    text-align: center;
    vertical-align: top;
}

.sub-table a {
    color: black;
    text-decoration: underline;
}

/* Four-column tables */

.four-columns th:nth-child(1),
.four-columns td:nth-child(1),
.four-columns th:nth-child(2),
.four-columns td:nth-child(2),
.four-columns th:nth-child(3),
.four-columns td:nth-child(3),
.four-columns th:nth-child(4),
.four-columns td:nth-child(4) {
    width: auto;
}

/* Topic page galleries */

.sub-gallery {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.sub-gallery div.image {
    height: 300px;
    height: 300px;
    border: 16px solid white;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.sub-gallery div.text {
    padding: 16px 24px 24px 16px;
    background-color: white;
    text-align: center;
    color: hsl(180, 15%, 30%);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.sub-gallery h3 {
    /* padding-top: 8px; */
    margin-bottom: 12px;
}

.sub-gallery div.gallery-item {
    vertical-align: top;
    border-radius: 5px;
    max-width: 470px;
    margin-bottom: 48px;
}

.sub-gallery div.gallery-item a:hover {
    background-color: white;
    transform: scale(1.01);
    box-shadow: 3px 3px 5px hsla(180, 6%, 80%, 0.33);
}

.sub-gallery div.gallery-item li, .sub-gallery div.gallery-item h3 {
    /* padding-left: 10px; */
    padding-right: 10px;
}

.sub-gallery div.gallery-item a {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.1, 0.3, 0.7, 0.9), box-shadow 0.3s cubic-bezier(0.1, 0.3, 0.7, 0.9);
    border-radius: 5px;
    width: -webkit-fill-available;
    background-color: white;
    border: 2px solid hsla(180, 15%, 30%, 0.09);
}

.sub-gallery div.gallery-item a:nth-child(1) {
    /* padding-top: 10px; */
}

.sub-gallery div.gallery-item li a {
    text-decoration: underline;
}

.sub-gallery img {
    width: 100%;
    height: 300px;
    /* opacity: 0.95; */
}

.sub-gallery img ~ * {
    /* padding-left: 10px;*/
}

.sub-gallery ul {
    list-style-type: none;
}

/* Reference
   padding/border/margin:
     top  right  bottom  left
     top  horizontal  bottom
     vertical  horizontal
     all
*/

.highlight {
  color: black;
  text-shadow:
   -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
     1px 1px 0 #fff;
}

.lowBrightness {
    filter: brightness(0.4);
}

.span-lighter {
    font-weight: 400;
    font-size: small;
}

button,
.pseudo-button {
    padding: 4px 8px;
    margin: 6px 0px;
    border-radius: 5px;
    background: hsl(180, 10%, 90%);
    color: hsl(180, 10%, 10%);
}

.pseudo-button:hover {
    background: hsl(180, 10%, 10%);
    color: hsl(180, 10%, 90%);
}

section.subsection#viewer,
section.subsection#plot-carousel {
    background-color: hsl(180, 0%, 94%);
    margin: 0;
    padding: 0;
    width: 100%;
}

#viewer .dataset-viewer {
    height: calc(100vh - 60px);
}

#plot-carousel .full-width-carousel {
    width: calc(100% - 72px);
    margin: 24px 36px 36px 36px;
}

#plot-carousel div.plotly-graph-div {
    margin-bottom: 36px;
}

.dataset-viewer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 36px 36px 36px;
    /* width: 100%; */
}

.dataset-viewer .button-group {
    display: flex;
    align-items: flex-start;
}

.dataset-viewer .search-interface-elements {
    width: calc(100% - 24px);
    display: flex;
    flex-flow: column nowrap;
    padding-left: 8px;
    padding-right: 16px;
}

.dataset-viewer .search-interface-elements .search-interface-placeholder {
    display: inline-block;
    width: 20%;
}

.dataset-viewer .search-interface-elements .flex-grow {
    display: inline-block;
    width: 0%;
    flex-grow: 1;
}

.dataset-viewer #collection-block {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.dataset-viewer #manifest-block {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    /* padding: 16px 0px 24px 0px; */
    margin-top: 8px;
    margin-bottom: 8px;
    justify-content: space-between;
}

.dataset-viewer #current-collection-name {
    font-size: 14px;
    font-weight: 400;
    min-width: 150px;
}

.dataset-viewer #manifest-info {
    font-size: 24px;
    font-weight: 700;
    width: 70%;
}

.dataset-viewer .iiif-viewer {
    display: flex;
    width: 100%;
    flex-grow: 1;
}

.dataset-viewer form {
    display: flex;
}

.dataset-viewer button,
.dataset-viewer input {
    cursor: pointer;
    border-radius: 2px;
}

.dataset-viewer .osd-html-buttons {
    display: flex;
    justify-content: flex-end;
    position: relative;
}

.dataset-viewer input.display-only {
    font-size: 14px;
    height: 38px;
    font-weight: 700;
    padding: 0px 8px 0px 12px;
    margin-bottom: 16px;
    color: white;
    background-color: hsl(180, 2%, 68%);
    border: none;
}

.dataset-viewer .collection-block {
    position: relative;
}

.dataset-viewer .osd-html-buttons .horizontal-spacer {
    width: 8px;
    display: inline-block;
}

.dataset-viewer .flyout {
    z-index: 99;
    position: absolute;
    width: 184px;
    padding: 0;
    margin-top: 4px;
    border-bottom-radius: 2px;
    list-style: none;
    display: flex;
    flex-flow: column nowrap;
}

.dataset-viewer .flyout:not(.active) {
    display: none;
}

.dataset-viewer #flyout-download,
.dataset-viewer #flyout-download-collection,
.dataset-viewer #flyout-download-manifest {
    right: 0;
}

.dataset-viewer #flyout-add,
.dataset-viewer #flyout-add-collection,
.dataset-viewer #flyout-add-manifest {
    left: 0;
}

.dataset-viewer #flyout-add,
.dataset-viewer #flyout-download {
    top: 54px;
}

.dataset-viewer #flyout-download-collection,
.dataset-viewer #flyout-download-manifest,
.dataset-viewer #flyout-add-collection,
.dataset-viewer #flyout-add-manifest {
    top: 150px;
}

.dataset-viewer .flyout a.pseudo-button {
    background-color: hsla(180, 10%, 90%, 0.85);
    font-weight: 400;
    font-size: 18px;
    width: 100%;
    display: inline-block;
}

.dataset-viewer .flyout a.pseudo-button:hover {
    background-color: hsl(180, 15%, 30%);
    color: hsl(180, 15%, 80%);
}

.dataset-viewer .flyout a.pseudo-button.disabled,
.dataset-viewer .flyout a.pseudo-button.disabled:hover {
    background-color: hsla(180, 10%, 90%, 0.85);
    color: hsl(180, 15%, 55%);
    cursor: inherit;
}

.dataset-viewer input[type=search] {
    cursor: text;
    margin-right: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    color: white;
    background-color: hsl(180, 2%, 68%);
    border: none;
}

.dataset-viewer button {
    box-sizing: content-box;
}

.dataset-viewer #collection-block form {
    margin-right: 8px;
}

.dataset-viewer #collection-block input[type=search] {
    padding: 0;
    font-size: inherit;
    padding: 2px 8px 2px 8px;
}

.dataset-viewer #collection-block button,
.dataset-viewer #collection-block .pseudo-button {
    font-weight: 700;
    font-size: inherit;
    transition: .25s background-color, .1s color;
    margin: 0;
    cursor: pointer;
}

.dataset-viewer button,
.dataset-viewer .pseudo-button {
    width: 168px;
    text-align: center;
    /* height: 38px; */
    border-radius: 2px;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 38px;
    min-height: 38px;
}

.dataset-viewer li a.pseudo-button {
    padding: 0;
    margin: 4px 0 0 0;
    cursor: pointer;
}

.dataset-viewer .pseudo-button,
.dataset-viewer button[type=submit] {
    /* height: 38px; */
    margin-bottom: 16px;
}

.dataset-viewer .scrollable-div {
    height: 100%;
    /*     width: 300px; */
    width: 20%;
    overflow-y: scroll;
    overflow-x: hidden;
}

.dataset-viewer .scrollable-div ul {
    list-style: none;
    margin-right: 4px;
}

.dataset-viewer .scrollable-div li {
    padding: 8px;
    border-bottom: 1px solid hsla(180, 5%, 60%, 0.5);
    cursor: pointer;
}

.dataset-viewer .scrollable-div li:hover {
    background-color: hsl(180, 30%, 70%);
}

.dataset-viewer .scrollable-div ul {
    max-height: 300px;
}

.dataset-viewer .scrollable-div #manifest-list li:last-child {
    border-bottom: none;
}

.dataset-viewer #openseadragon1 {
    /* height: 650px; */
    width: 100%;
    padding-left: 36px;
}

.dataset-viewer #osd-html-button-add {
}

.dataset-viewer .draconic-button {
    margin-top: 16px !important;
    margin-left: 16px !important;
}

.dataset-viewer button,
.dataset-viewer .pseudo-button {
    color: hsl(180, 15%, 30%);
    font-weight: 700;
    font-size: 21px;
    transition: .25s background-color, .1s color;
    /* height: 38px; */
    margin: 0;
    cursor: pointer;
}

.dataset-viewer button:hover,
.dataset-viewer .pseudo-button:hover {
    background-color: hsl(180, 15%, 30%);
    color: hsl(180, 15%, 80%);
}

.dataset-viewer button.active,
.dataset-viewer .pseudo-button.active,
.dataset-viewer .flyout a.pseudo-button.active {
/*     background-color: hsl(180, 15%, 95%); */
    background-color: hsl(180, 15%, 30%);
    color: hsl(180, 15%, 80%);
}

.dataset-viewer .flyout input.pseudo-button {
    font-weight: 400;
    font-size: 15px;
    text-align: left;
}

.dataset-viewer .flyout input.pseudo-button::placeholder {
    font-style: italic;
    text-align: center;
}

.dataset-viewer #postcard-date,
.dataset-viewer #newspaper-date {
    font-weight: 400;
}

.plotly-notifier {
    top: 80px;
}

.filter-selected {
    background-color: green;
}

.collectionManifest {
    display: inline-block;
    padding: 3px 30px;
    border: solid #e6e6e6 1px;
    margin: 5px;
}

.collectionManifest:hover {
    background-color: #e6e6e6;
    cursor: pointer;
}

#osdLoader {
    width: 64px;
    height: 64px;
    margin: auto;
    margin-top: 300px;
    text-align: center;
}

#osdLoader:after {
  content: " ";
  display: block;
  width: 46px;
  height: 46px;
  margin: 1px;
  border-radius: 50%;
  border: 5px solid #fff;
  border-color: #415858 transparent #415858 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}






/*
     FILE ARCHIVED ON 6:23:53 Oct 4, 2020 AND RETRIEVED FROM THE
     AN OPENWAYBACK INSTANCE ON 7:32:14 Dec 25, 2025.
     JAVASCRIPT APPENDED BY OPENWAYBACK, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/