/* #region Custom Fonts */

@font-face {
    font-family: Garamond;
    src: url('../fonts/EBGaramond-Italic-VariableFont_wght.ttf');
}

@font-face {
    font-family: Garamond;
    font-weight: bold;
    src: url('../fonts/EBGaramond-VariableFont_wght.ttf');
}

/* #endregion */

/* #region General styling */

body {
    font-family: sans-serif;
    margin: 0;
    width: 100%;
    background-image: url(../img/background.jpg)
}

.header-image-wrap {
    margin: 0 auto;
    max-width: 798px
}

.header-image-wrap img {
    width: 100%
}

.content-wrap {
    max-width: 1024px;
    margin: 0 auto
}

.content-wrap figcaption {
    padding: top 5px;
    font-weight: bold;
    text-align: center;
    display: table-caption;
    caption-side: bottom;
}

/* not currently used */
.top-caption figcaption {
    caption-side: top;
}

/* this is used in edithpechey.html
   apparently, the figcaption inside the flex element doesn't follow the usual 'table' behaviour
   but stacks itself in a narrow column on the left
   adding display:table; to .flex-figure seems to achieve the same required result, so I have
   left this commented out for now

 .flex-item figcaption {
    display: block;
} */

.content-wrap cite {
    font-style: italic;
    font-size: 0.75em;
    text-align: right;
    display: block;
    margin-left: 15px;
    margin-right: 5px;
}

@media screen and (max-width:1034px) {
    .content-wrap {
        padding: 0 10px
    }
}

main {
    /* 
      this seems to be an unnecessary duplication of the specification above for 'body'
    background-image: url(../img/background.jpg); */
    padding-bottom: 20px;
}

main h1 {
    margin: 0;
    padding-top: .67em
}

main .content-wrap p {
    text-align: justify;
}

table {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
}

/* not currently used...*/
p:last-child {
    margin-bottom: 0;
    padding-bottom: 16px
}

/* the exhibition home page (TheVoteBeforeTheVote.html) uses flex layouts. These settings help */

.home-item-set {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.home-item {
    /* height: 330px; */
    margin-left: 0;
    width: 298px;
    display: table;
    border: none;
}

.home-item:hover {
    border-style: solid;
    border-color: blue;
}

.home-item img {
    /* height: 300px; */
    width: 100%
}

.about-poster {
    width: 95%;
    max-width: 440px;
    margin: 0 auto;
    display: table;
    text-align: center;
}

.about-list {
    padding: 0;
    list-style: none
}

.fig-std {
    display: table;
    float: left;
    clear: both;
    margin: 0;
    margin-bottom: 1em;
    margin-right: 15px;
}



.img-std {
    float: left;
    clear: both;
    width: 300px;
    padding-right: 15px;
    padding-top: 10px;
}


.img-600 {
    width: 95%;
    max-width: 600px
}


.full-width {
    width: 95%;
    max-width: 960px;
    display: block;
    margin: 0 auto;
    float: none
}

.medium-width {
    width: 60%;
    max-width: 640px;
    display: block;
    margin: 0 auto;
    float: none
}

.fig-medium-width {
    width: 60%;
    padding-right: 30px;
}

.width-40 {
    width: 40%;
}

.width-50 {
    width: 50%;
}

.width-60 {
    width: 60%;
}

.width-100 {
    width: 95%;
}

.fig-centered {
    /* figures are typically display:table elements (to allow proper layout of figcaption), so
       centring them requires that the default float:left be overridden, and that right and left
       margins are 'auto'
    */

    float: none;
    margin: 0 auto;
}

.img-medium-width {
    width: 100%;
    /* vertical-align: middle */
}

.fig-full-width {
    width: 95%;
    float: none;
    margin: 0 auto;
}

.img-full-width {
    width: 100%;
    /* vertical-align: middle */
}

@media screen and (max-width:550px) {

    .fig-std {
        float: none;
    }

    .fig-std,
    .fig-medium-width,
    .width-40,
    .width-50,
    .width-60,
    .medium-width {
        width: 95%;
        clear: both;
            float: none;
    margin: 0 auto;
    padding-right:0%

    }
}

.clearfix {
    clear: both;
    padding-top: 20px
}

.divider {
    margin: 0 auto;
    width: 95%;
    max-width: 256px;
    clear: both;
    border: 0;
    background: url(../img/divider.png);
    height: 50px;
    background-size: 256px 50px
}

.bordered-text,
blockquote {
    box-sizing: border-box;
    border: ridge 10px;
    width: auto;
    padding: 20px;
    margin: 5px auto;
    max-width: 90%;
}


.centered-quote {
    text-align: center;
    font-size: 150%;
}

img.bordered-text {
    float: none;
    margin: 0 auto;
    display: block
}

.span-side-by-side {
    vertical-align: top;
    display: inline-block
}

.side-by-side {
    display: flex;
    text-align: center;
}

.fig-side-by-side {
    width: 50%;
    float: left;
    margin: 0;
    text-align: center;
    padding: 0;
    display: table;
    margin-bottom: 1em;
}

.img-side-by-side {
    width: 95%;
}

@media screen and (max-width:500px) {

    .side-by-side {
        flex-direction: column;
    }

    .fig-side-by-side {
        width: 100%;
    }

}

.centered-heading {
    text-align: center;
}

.flex-container {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

.flex-item {
    flex-grow: 1;
    margin: auto auto;
}

.flex-figure {
    margin: 0 auto;
    text-align: center;
    display: table;
}

.flex-img {
    min-width: 100px;
    max-width: 400px;
}

@media screen and (max-width:400px) {

    .flex-img {
        max-width: 100%;
    }
}

@media screen and (max-width:1034px) {

    .flex-container {
        flex-flow: row;
    }
}

@media screen and (max-width:800px) {

    .flex-container {
        flex-flow: column;
    }
}

details summary {
    cursor: pointer;
}

details summary>* {
    display: inline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Garamond", serif;
    color: #570100
}

/* not currently used */
.text-between-images {
    display: flex;
    height: auto;
}

@media screen and (max-width:850px) {

    /* not currently used */
    .text-between-images {
        flex-direction: column;
    }
}

/* not currently used - was initially related to text-between-images above */
.fig-std-right {
    float: right;
}

/* not currently used - was originally attempt in ellenheaton.html to achieve side-by-side */
.no-float {
    float: none;
    display: inline-block
}

/* #endregion */

/* #region Table styles */

table {
    border: 2px solid black;
    border-collapse: collapse;
}

th {
    border: 2px solid black;
}

td {
    border: 1px solid goldenrod;
    border-left: 2px solid black;
    padding: 5px;
}

td.centered {
    text-align: center;
}

tr:nth-child(odd) {
    background-color: LightCyan;
    opacity: 0.6;
}

tr:nth-child(even) {
    background-color: White;
    opacity: 0.6;
}

/* #endregion */

/* #region Gallery styles */

.gallery-wrap a {
    display: inline-block;
    height: 330px;
    width: auto
}

.gallery-wrap a img {
    height: 300px;
    width: auto
}

/* #endregion */

/* #region Footer styles */

footer {
    background: #000;
    color: #fff
}

.footer-wrap {
    margin: 0 auto;
    max-width: 1024px;
    padding: 10px;
    position: relative
}

.footer-content {
    display: inline-block
}

.footer-left p {
    margin-bottom: 0;
    max-width: 385px
}

.footer-left ul {
    list-style: none;
    padding: 0;
    margin-top: 0
}

.footer-right {
    width: 240px;
    text-align: right;
    position: absolute;
    right: 10px
}

.footer-right a {
    text-decoration: none;
    color: #fff
}

@media screen and (max-width:620px) {

    .footer-left ul {
        margin-bottom: 0
    }

    .footer-right {
        text-align: left;
        position: static;
        right: auto
    }
}

/* #endregion */

/* #region Styling for navigation bar */

/*
    This stylesheet provides the necessary styles for the drop-down menu at the top of each page, as defined in header.html
*/

.dropdown-main {
    /* styles for the outer list of top-level entries */
    margin: 0;
    /* no margins required ... */
    margin-left: 25px;
    /* except for a small indentation from the left of the screen */
    display: flex;
    /* arrange the list elements horizontally */
    flex-wrap: wrap;

    /* z-index: 9; */
}

.dropdown-top {
    /* styles for each top-level entry */
    border-radius: 5px;
    /* pretty corners */
    margin: 0 1px;
    /* flush at top and bottom, and a slight horizontal separation */


}

.dropdown-sub {
    /* styles for each list of sub-options */
    display: none;
    /* hide them by default */
    padding: 0%;
    /* make content flush with border */
    margin-right: -1000px;
    /* allow long content to continue on one line */
    border-radius: 5px;
    /* pretty corners (to the whole list - not to individual
                                entries) */
}

.dropdown-top,
.dropdown-sub {
    /* styles common to top-level and sub-entries */
    background-color: #570100;
    /* the dark brown colour from the site's main livery */
    font-family: Garamond, serif;
    /* ditto the font */
    font-size: 20px;
}

.dropdown-top:hover {
    /* change background colour when hovering on a top-level item - this is done here as well as on each link, as below, because it seems to be the only way to colour the whole tag, right up to the border - applying this stype to the link only coloured what looks like an inner content box, and didn't go right up to the margin. */
    background-color: darkgoldenrod;
}

.menu {
    /* some elements on pages (in particular the table on the Leeds School Board page) always
    place thenselves 'on top' of the dropped-down menus. The menu items show as translucent,
    so they are visible but dim, and when the cursor tries to hover over them, the
    table seems to claim focus and dismisses the menu. Forcing a high z-index on the menu seems
    to eliminate this problem. z-index is not currently required or used anywhere else here,
    but this may need to be re-examined if it ever does become needed
    NB the 'position' is irrelevent, but is required to allow a z-index specification
    */

    position: relative;
    z-index: 9;
}

.menu ul {
    /* styling common to all lists in the menu */
    list-style: none;
    /* cancel the button list glyphs */
}

.menu a {
    /* styling common to all links in the menu */

    /* a nice off-white text colour to harmoinise with the brown theme ... */
    color: cornsilk;

    /* ... and remove the default underline */
    text-decoration: none;

    /*
     * for some reason the margins and paddings carefully set up below are lost
     * without this "block" specification - otherwise I can't see that it should have
     * any effect
     */

    display: block;
    padding: 2px 10px;
    /* small padding above and below and some horizontal padding */
    margin-bottom: 5px;
    /* vertical spacing  between items */

    /*
    position:relative;
    z-index:9;
    */

}

.menu a:hover {
    /* lighten the background when hovering on an option */
    background-color: darkgoldenrod;
}

.dropdown-top:hover .dropdown-sub {

    /* when hovering on a top-level option ... */
    display: block;
    /* ... make the sub-options visible */
    position: absolute;
    /* and make sure they stay put */
}

@media screen and (max-width:1034px) {
    .dropdown-main {
        margin-left: 0;
        padding: 0;
    }
}

/* #endregion */

/* #region Styling for LightGallery timeline */

.lg-download {
    display: none
}

.lg-backdrop.in {
    opacity: .85
}

.fixed-size.lg-outer .lg-inner {
    background-color: #fff
}

.fixed-size.lg-outer .lg-sub-html {
    position: absolute;
    text-align: left
}

.fixed-size.lg-outer .lg-toolbar {
    background-color: transparent;
    height: 0
}

.fixed-size.lg-outer .lg-toolbar .lg-icon {
    color: #fff
}

.fixed-size.lg-outer .lg-img-wrap {
    padding: 12px
}

/* #endregion */