/* ============================================================
   IMPORTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");


/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */
body {
    margin: 0 clamp(0.25em, 3vw, 5em);
    padding: 0;
    font-family: "Noto Serif", "Times New Roman", Georgia, serif;
    color: #333;
    background-color: #fff;
    font-size: clamp(15px, 1.4vw, 18px);
}

h1, h2, h3, h4, h4.reference {
    font-weight: 400;
}

.large, h1.title {
    font-weight: 700;
}

.large {
    font-size: 1.25em;
}

.small {
    font-size: .9em;
}

.smallcap {
    font-variant: small-caps;
    font-size: 1.2em;
}


/* ============================================================
   NAVIGATION
   ============================================================ */
.topnav {
    overflow: hidden;
    background-color: #fff;
    border-bottom: 1px solid #000;
    font-family: Verdana;
    width: 100%;
    box-sizing: border-box;
    padding: 0 clamp(0.5em, 3vw, 5em);
}

.topnav a {
    float: left;
    display: block;
    color: #000;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.topnav .icon {
    display: none;
}

@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {
        display: none;
    }
    
    .topnav a.icon {
        float: right;
        display: block;
        margin-right: 0;
        padding-right: 16px;
    }
}

@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
    }
    
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
        padding-right: 16px;
    }
    
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}


/* ============================================================
   LAYOUT - MAIN CONTAINER
   ============================================================ */
#content {
    max-width: 40em;
    margin: 1em auto;
    background: #FFF;
    padding: 1em clamp(0.5em, 2vw, 2.5em);
}


/* ============================================================
   HEADERS
   ============================================================ */
#ajv {
    text-align: center;
    font-family: "Noto Sans", Verdana, Arial, Helvetica, sans-serif;
    color: navy;
    font-weight: 400;
    font-size: 1.5em;
}

#copyright, h1, h2, h3, h4 {
    text-align: center;
    font-family: "Noto Sans", Verdana, Arial, Helvetica, sans-serif;
    color: navy;
}

#copyright {
    font-size: 0.9em;
}

h1.title {
    font-size: 1.5em;
    color: maroon;
}

h4.volume {
    text-align: left;
    color: #800040;
    margin: 0;
}


/* ============================================================
   LINKS
   ============================================================ */
a {
    text-decoration: none;
}


/* ============================================================
   TEXT ELEMENTS & UTILITY CLASSES
   ============================================================ */
.title-note {
    font-weight: 400;
    font-size: .8em;
    color: navy;
}

.blue {
    color: #009;
}
.green {
    color: green;
}
.maroon {
    color: #800040;
}
.red {
    color: red;
}
.blue, .green, .maroon, .red {
    font-weight: bolder;
}

.top {
    padding-top: .4em;
}
.right {
    text-align: right;
}
.left {
    text-align: left;
}
.center {
    text-align: center;
}


/* ============================================================
   SPECIAL CONTENT BLOCKS - POETRY & PROSE
   ============================================================ */
.poem {
    margin: 0 clamp(0.25em, 1.2vw, 3em) 0 clamp(0.5em, 2.5vw, 9em);
    line-height: 1.45em;
    column-count: 1 !important;
}
}

.longpoem {
    margin: 0 clamp(0.25em, 1vw, 2em) 0 clamp(0.5em, 2vw, 6em);
}

.prose {
    margin: 0 clamp(0.25em, 1.2vw, 3em);
}

.poem-note {
    margin: 0 clamp(0.5em, 2vw, 5em);
    font-size: .9em;
}

.prose-note, .smallquote {
    margin: 0 clamp(0.25em, 1vw, 2em) 0 clamp(0.25em, 0.75vw, 1em);
    font-size: .9em;
}

.memorial, .preface {
    margin: 0 clamp(0.25em, 1.5vw, 2em);
}


/* ============================================================
   INDENTATION & HANGING INDENTS
   ============================================================ */
.hang {
    padding-left: 3em;
    text-indent: -3em;
}

.hang-quote {
    padding-left: 1em;
    text-indent: -.5em;
}

.indent, .smallquote {
    padding: 0 2em;
}


/* ============================================================
   FOOTNOTES, DIVIDERS & SPECIAL ELEMENTS
   ============================================================ */
.page {
    border-top: 1px solid green;
    padding-top: 0.8em;
    text-align: right;
    font-size: 0.8em;
    color: green;
}

.toc {
    text-align: right;
    padding-right: 2em;
}

.poetry-sq,
.prose-sq {
    display: inline-block;
    font-size: 1em;
    vertical-align: middle;
    margin-left: 0.5em;
    line-height: 1;
    position: relative;
    top: -2px;
}

.poetry-sq {
    color: #d55fe1;
}
.prose-sq {
    color: #39be35;
}


/* ============================================================
   TABLES
   ============================================================ */
.tablecenter, table {
    margin: 0 auto;
}

td, th {
    padding: 0 .8em .25em;
    font-family: "Noto Sans";
    font-size: 1.1em;
    border: none;
}

td.item {
    font-family: "Noto Serif";
    text-align: left;
}

td.price {
    font-family: "Noto Serif";
    text-align: right;
    vertical-align: bottom;
}

td.woman, th.woman {
    font-family: "Noto Serif";
    font-size: .8em;
}

td.woman {
    text-align: left;
    vertical-align: top;
    padding-left: 1em;
    text-indent: -1.5em;
}

th.woman {
    text-align: center;
}


/* ============================================================
   BOXES & CONTAINERS (FLOATS)
   ============================================================ */
.BoxLeft, .TextBoxLeft, .TextBoxRight {
    margin: 0 1em;
    padding: 1em;
}

.BoxLeft, .TextBoxLeft {
    float: left;
}
.TextBoxRight {
    float: right;
}

.TextBoxLeft, .TextBoxRight {
    width: 14em;
    border-style: solid;
    border-width: thin;
    font-size: xx-small;
}

.BoxLeft {
    display: inline;
}


/* ============================================================
   SPECIAL LAYOUT ELEMENTS
   ============================================================ */
#index, .memorial, hr.short {
    text-align: center;
}

hr.short {
    width: 50%;
}

.stage {
    margin: 0 0 -.75em 1em;
    font-style: italic;
    color: #800040;
}

.source {
    text-align: right;
    margin-top: 2em;
    color: navy;
}

.centre-divider, .scan, p.divider {
    text-align: center;
    font-weight: 700;
    color: navy;
    margin-top: 1.5em;
}

p.divider, .centre-divider {
    margin-left: 8em;
}


/* ============================================================
   COLUMNS & FLEX LAYOUTS
   ============================================================ */
.column2 {
    column-count: 2;
    column-width: clamp(150px, 30vw, 200px);
    column-fill: auto;
}

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: clamp(280px, 50vw, 500px);
    flex-wrap: wrap;
}

.flex-container > div {
    margin: 0 10px;
    text-align: center;
    line-height: 75px;
    font-size: 1.2rem;
    font-family: "Noto Sans";
}


/* ============================================================
   SEARCH
   ============================================================ */
.search {
    width: clamp(15em, 50vw, 25em);
    height: 2em;
    border: 1px solid silver;
}


/* ============================================================
   LISTS
   ============================================================ */
/* Only the list styles confirmed as used are retained */
ol.u {
    list-style-type: none;
}

ol p, ul p {
    margin-bottom: 0;
}

li {
    margin: .75em 0;
}


/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes highfade {
    0%, 100% { background-color: transparent; }
    20% { background-color: #ff0; }
}

a:target,
ol#footnotes li:target,
ol#footnotes2 li:target,
sup a:target {
    animation: highfade 3s ease-in-out 1;
    border: 0;
    outline: 0;
}


/* ============================================================
   HOVER EFFECTS
   ============================================================ */
td a:hover {
    color: #66F;
    border-top: 2px solid #009;
    border-bottom: 2px solid #009;
    background-color: #fff;
}

.category, .vardill a:hover {
    color: #999;
    background-color: #fff;
}

.vardill a:hover {
    border-top: 1px solid #009;
    border-bottom: 1px solid #009;
}

.category {
    border-top: 2px solid #009;
    border-bottom: 2px solid #009;
}


/* ============================================================
   MEDIA QUERIES
   ============================================================ */
@media (max-width: 800px) {
    .flex-container {
        flex-direction: column;
    }
}