/**
 * CSS for Bestiary
 *
 * Created 20 May 2022
 * Updated 20 May 2022
 *
 * @author Allan A Beattie
 */


/*! normalize.css v3.0.1 | MIT License | git.io/normalize
------------------------------------------------------------ */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}fieldset{border:1px solid silver;margin:0;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse}


/* baseline styles / typography
------------------------------------------------------------ */

* {
    box-sizing: border-box;
}

html {
    overflow-y: scroll;
}

body {
    margin: 0;
    padding: 0;
    background-color: #333;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: normal;
    font-size: 18px;
    text-rendering: optimizeLegibility;
    color: #d3d3d3;
}

h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
}

h1,
.page_heading {
    font-weight: 600;
    font-size: 2.2rem;
    line-height: 1.3;
    padding: 0.6em 0;
    color: #ddba73;
    padding-bottom: .4em;
    border-bottom: 1px solid #4D4D4D;
}

h2,
.page_subheading {
    margin: 1.3em 0;
    font-size: 1.7rem;
    line-height: 0.9;
    color: #fff;
}

.page_subheading {
    font-weight: 700;
}


/* a11y links
------------------------------------------------------------ */

.skip_links {
    position: absolute;
    left: -9999px;
    top: auto;
}

.skip_links a {
    height: 1px;
    border-bottom: 4px solid #ddba73;
    text-decoration: none;
    font-weight: 700;
    transition: height 0.3s ease-out;
    color: #eee;
}

.skip_links a:focus {
    position: fixed;
    z-index: 1100;
    width: 100%;
    height: 3.5em;
    left: 0;
    top: 0;
    padding: 1em;
    background: #394a7b;
    outline: none;
}


/* Civic cookie control
------------------------------------------------------------ */

#ccc #ccc-content #ccc-statement a {
    text-decoration: none;
}


/* layout
------------------------------------------------------------ */

.container {
    max-width: 75rem;
    margin: 0 auto;
    padding: 0 1em;
}


/* header
------------------------------------------------------------ */

.header_wrapper {
    position: fixed;
    top: 0;
    width: 100%;
    min-height: 7em;
    padding: 0.6em 0;
    background-color: #333;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, .4);
    text-align: center;
    z-index: 1;
}

.uni_logo a {
    display: inline-block;
    width: 200px;
}

.uni_logo a:focus {
    outline: 0.3em solid #ddba73;
}

.uni_logo img {
    width: 100%;
    max-width: 200px;
    height: auto;
}

.section_nav_wrapper {
    margin-top: 1em;
}

.section_nav_wrapper ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.section_nav_wrapper li {
    display: inline-block;
}

.section_nav_wrapper a {
    display: inline-block;
    padding: 0.6em 1em;
    text-decoration: none;
    color: #d3d3d3;
}

.section_nav_wrapper a:hover,
.section_nav_wrapper a:focus {
    color: #ddba73;
}

.section_nav_wrapper a:focus {
    outline: 0.3em solid #ddba73;
}


/* main
------------------------------------------------------------ */

main {
    position: relative;
    margin-top: 10.4em;
    margin-bottom: 2em;
    z-index: 0;
}

.content * a,
figcaption a {
    color: #ddba73;
}

.content * a:hover,
figure a:hover,
.content * a:focus,
figure a:focus {
    text-decoration: none;
}

.content * a:focus,
figure a:focus {
    outline: 0.3em solid #ddba73;
}

.page_nav {
    margin: 0;
    padding: 0;
    list-style: none;
}

.page_nav a {
    display: block;
    padding: 0.3em 0.6em;
    border-bottom: 1px solid #444;
    text-decoration: none;
    color: #d3d3d3;
}

.page_nav a:hover,
.page_nav a:focus {
    border-bottom: 1px solid #ddba73;
    color: #ddba73;
}

.section {
    margin-top: 5em;
    padding-top: 5em;
    border-top: 1px solid #444;
}

.section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.page_subheading + .section {
    margin-top: 0;
}

figure {
    margin: 0;
    border: 0.3em solid #444;
    border-radius: 0 0 0.6em 0.6em;
    background-color: #111;
    text-align: center;
}

figure img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-width: max-content;
    height: auto;
    margin: 0 auto;
    padding: 0.3em;
}

figcaption {
    padding: 0.3em;
    background-color: #444;
    text-align: left;
}

.read_more {
    display: block;
    text-align: right;
    color: #ddba73;
}

.read_more::after {
    display: inline-block;
    margin-left: 0.2em;
    font-family: 'Font Awesome 5 Pro';
    content: '\f105';
}


/* home page
------------------------------------------------------------ */

.home {
    background: url('../images/homepage-bg.jpg') no-repeat center center;
    background-size: cover;
    margin-bottom: 0;
}

.home_heading {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    border-bottom: none;
    letter-spacing: 2px;
    padding: 0;
    margin: 0;
    z-index: 999;
    text-shadow: 4px 5px 7px #111;
}

.home p {
    color: #fff;
    line-height: 1.75em;
    font-weight: 300;
    font-size: 1.2rem;
}

.home .button {
    margin-top: 20px;
    background-color: #394a7b;
    font-size: 1.5rem;
}

.home .button:hover,
.home .button:focus {
    color: #ddba73;
}

.home .button:focus {
    outline: 0.3em solid #ddba73;
}

.vertically_centered {
    display: flex;
    flex-flow: column;
    height: 90vh;
    justify-content: center;
    align-items: center;
}


/* manuscript index
------------------------------------------------------------ */

.item_index {
    margin-bottom: 0;
    padding-bottom: 2em;
    background-color: #000;
}

.index_wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 1em;
}

.pair {
    display: flex;
    flex-basis: 23%;
    min-width: 14em;
    flex-grow: 2;
}

.folio_v,
.folio_r {
    display: flex;
    flex-basis: 50%;
    background-color: #444;
    border-radius: 0 0 0.6em 0.6em;
}

.folio_item {
    display: flex;
    flex-flow: column;
    align-items: stretch;
    flex-grow: 1;
    text-decoration: none;
    color: #d3d3d3;
}

.folio_item:focus {
    outline: 0.3em solid #ddba73;
}

.folio_item img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.thumb_caption,
.thumb_folio {
    margin: 0;
    padding: 0.6em;
    font-size: 0.8em;
}

.thumb_caption {
    flex-grow: 2;
}

.thumb_folio {
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
}

.index_search_wrapper {
    margin-bottom: 2em;
    padding-bottom: 2em;
    border-bottom: 1px solid #4d4d4d;
}


/* search form
------------------------------------------------------------ */

.search_form fieldset {
    display: flex;
    margin: 0;
    padding: 0;
    border: 0;
}

.search_keywords,
.search_submit {
    padding: 0.6em 1em;
    border: 0;
}

.search_keywords {
    flex-grow: 1;
    max-width: 40%;
    border-radius: 0.3em 0 0 0.3em;
    color: #111;
}

.search_submit {
    border-radius: 0 0.3em 0.3em 0;
    background: #4D4D4D;
    color: #fff;
}

.search_submit::before {
    display: inline-block;
    margin-right: 0.3em;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 700;
    content: '\f002';
}

.search_submit:hover,
.search_submit:focus {
    background-color: #333;
    color: #ddba73;
}

.search_keywords:focus {
    background-color: #fdffce;
}

.search_keywords:focus,
.search_submit:focus {
    outline: 0.3em solid #ddba73;
}


/* search results
------------------------------------------------------------ */

.search_results {
    margin: 0;
    padding: 0;
    list-style: none;
}

.search_results_wrapper {
    max-width: 50em;
    margin: 0 auto;
}

.search_results li {
    margin: 0 0 2em;
}

.search_results a {
    display: flex;
    gap: 1em;
    border-radius: 0.3em;
    padding: 1em;
    background: #444;
    text-decoration: none;
    color: #d3d3d3;
    align-items: flex-start;
}

.search_results a:hover,
.search_results a:focus {
    background: #555;
    color: #ddba73;
}

.search_results a:focus {
    outline: 0.3em solid #ddba73;
}

.search_result_image {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}


/* details
------------------------------------------------------------ */

.item_detail {
    margin-bottom: 2;
    background-color: #000;
}

.item_details_wrapper {
    margin-bottom: 2em;
}

#zoom_container {
    width: 100%;
    height: 550px;
    margin-bottom: 2em;
}

.item_navigation {
    height: 550px;
}

.zoomify_controls,
.zoomify_controls * {
    display: inline-block;
    user-select: none;
    touch-action: none;
}

.zoomify_controls {
    display: block;
    margin-bottom: 1em;
    text-align: center;
}

.zoomify_controls img,
.zoomify_controls input {
    vertical-align: top;
    margin-top: 0;
    position: relative;
}

.zoomify_controls input:focus,
.zoomify_controls a:focus {
    outline: 0.3em solid #ddba73;
}

#MessageDisplay {
    display: none !important;
}

.mid_background {
    background-color: #333;
}

.mid_background a {
    color: #ddba73;
}


/* tabcordion overrides
------------------------------------------------------------ */

main .tabcordion > dt a,
main .tabcordion_wrapper > .tabcordion_nav > li a {
    color: #fff;
}

main .tabcordion.tabcordion_mode_tabs > dt a,
main .tabcordion_wrapper > .tabcordion_nav > li a {
    position: relative;
    bottom: -3px;
}

main .tabcordion_wrapper > .tabcordion_nav > li a[aria-selected="true"] {
    box-shadow: 0 -6px 0 #ddba73 inset
}

main .tabcordion_loaded.tabcordion > dt a {
    background: #444;
}

main .tabcordion_mode_accordion > dt > a::after {
    font-family: 'Font Awesome 5 Pro';
    content: '\f107';
}

main .tabcordion_mode_accordion > dt > a[aria-selected="true"]::after {
    content: '\f106';
}

main .tabcordion_loaded.tabcordion > dt a:hover,
main .tabcordion_loaded.tabcordion > dt a:focus {
    background-color: #777;
}

main .tabcordion_loaded.tabcordion > dt a:focus,
.tabcordion_nav li a:focus {
    outline: 0.3em solid #ddba73;
}

main .tabcordion_mode_accordion > dd {
    background: #5555;
    border: 0;
}

.tabcordion_wrapper {
    padding-top: 1em;
}

.tabcordion_wrapper.tabcordion_mode_tabs {
    padding-top: 0;
}


/* split screen
------------------------------------------------------------ */

.split_screen {
    display: flex;
    gap: 4em;
}

.split_screen > div {
    flex-basis: 50%;
}

.split_screen.headings {
    margin-bottom: 2em;
}

.split_screen.headings > div {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #4D4D4D;
}

.split_screen.headings h2 {
    margin-top: 1.3em;
    text-align: center;
}

.split_screen .button_wrapper {
    text-align: center;
}

.button {
    display: inline-block;
    margin: 2em auto 0;
    padding: 0.6em 1.2em;
    background-color: #394a7b;
    border-radius: 0.3em;
    font-size: 0.9em;
    text-align: center;
    text-decoration: none;
    color: #fff;
}

.button:hover,
.button:focus {
    background-color: #485e9b;
    color: #ddba73;
}

.button:focus {
    outline: 0.3em solid #ddba73;
}


/* help
------------------------------------------------------------ */

.toolbar_icons_help {
    display: grid;
    grid-template-columns: max-content auto;
    grid-row-gap: 0.6em;
    grid-column-gap: 1em;
    align-items: center;
}

.toolbar_icons_help dt {
    text-align: center;
}

.toolbar_icons_help dd {
    margin: 0;
}

.toolbar_icons_help img {
    display: block;
    margin: 0 auto;
}


/* footer
------------------------------------------------------------ */

footer {
    padding-top: 2em;
}

footer .container {
    border-top: 1px solid #444;
}

footer a {
    color: #ddba73;
}

footer a:hover,
footer a:focus {
    text-decoration: none;
}

footer a:focus {
    outline: 0.3em solid #ddba73;
}

.utility_links ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.utility_links li {
    display: inline-block;
}

.utility_links a {
    display: inline-block;
    padding: 0.3em 0.6em;
}

.utility_links a::before {
    display: inline-block;
    margin-right: 0.2em;
    font-family: 'Font Awesome 5 Pro';
}

.utility_links a.help::before {
    content: '\f059';
}

.utility_links a.copyright::before {
    content: '\f1f9';
}


/* misc
------------------------------------------------------------ */

.offscreen {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip-path: inset(100%);
    clip: rect(1px 1px 1px 1px);
    /* IE 6/7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.inactive {
    display: none;
}


/* breakpoints
------------------------------------------------------------ */

@media screen and (min-width: 321px) {
    .search_keywords {
        max-width: none;
        width: calc(100% - 7em);
    }

    .search_submit {
        min-width: 7em;
    }
}

@media screen and (min-width: 371px) {
    main {
        margin-top: 8em;
    }
}

@media screen and (min-width: 640px) {
    .section {
        display: flex;
        gap: 2em;
    }

    .section .content {
        flex-basis: 50%;
    }

    .section figure {
        flex-basis: 50%;
        height: max-content;
    }

    .section:first-child h2 {
        margin-top: 1.3em;
    }

    .section:first-child figure {
        margin-top: 2em;
    }
}

@media screen and (min-width: 760px) {
    .header_wrapper {
        text-align: left;
        min-height: 4.6em;
    }

    .uni_logo {
        float: left;
    }

    .section_nav_wrapper {
        float: right;
        margin-top: 0.6em;
    }

    main {
        margin-top: 4.6em;
    }

    .index_search_wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 0;
    }

    .search_form {
        margin-left: 2em;
    }

    .project_background_wrapper {
        display: flex;
        gap: 2em;
        margin-top: 2em;
    }

    .project_background_wrapper div:first-child {
        min-width: 13em;
    }

    .project_background_wrapper div:last-child {
        max-width: 40em;
    }

    .item_details_wrapper {
        display: flex;
    }

    .prev_record,
    .next_record {
        flex-basis: 10%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .prev_record a,
    .next_record a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 100%;
        text-align: center;
        text-decoration: none;
        border-radius: 0.2em;
        color: #d3d3d3;
        transition: background-color 0.2s ease-out;
    }

    .prev_record a::before,
    .next_record a::before {
        display: inline-block;
        font-family: 'Font Awesome 5 Pro';
        font-size: 4em;
        font-weight: 700;
    }

    .prev_record a::before {
        content: '\f104';
    }

    .next_record a::before {
        content: '\f105';
    }

    .prev_record a:hover,
    .prev_record a:focus,
    .next_record a:hover,
    .next_record a:focus {
        background-color: #111;
        color: #ddba73;
        transition: background-color 0s ease-out;
    }

    .prev_record a:focus,
    .next_record a:focus {
        outline: 0.3em solid #ddba73;
    }

    .item_image {
        text-align: center;
        flex-basis: 100%;
        max-width: 80%;
    }

    .item_image.has_translation {
        flex-basis: 40%;
        max-width: 40%;
    }

    .tabcordion_wrapper {
        padding-top: 0;
    }

    #translation {
        flex-basis: 40%;
        min-width: 40%;
        margin-left: 2em;
        padding-right: 1em;
    }

    .transcription_wrapper {
        display: flex;
        gap: 4em;
    }

    .transcription_wrapper div {
        flex-basis: 50%;
    }

    footer .contact {
        float: left;
    }

    footer .utility_links {
        float: right;
        margin-top: 1em;
    }
}

@media screen and (min-width: 1024px) {
    .column_wrapper {
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 30% 1fr;
        column-gap: 2em;
    }

    .section {
        display: flex;
        gap: 2em;
    }

    .about .section {
        justify-content: center;
    }

    .section .content {
        flex-basis: 30em;
    }

    .section figure {
        flex-basis: 20em;
        height: max-content;
    }   
}