/* Master styling specification
 * OWD, 2023--2024
 *
 * https://www-users.york.ac.uk/~od641 */

/* --- Begin generic styles --- */

body { background-color: white; }

div iframe {
    width: 100%;
    border: 0;
}

h1, h2, h3 { margin: 0; }
h2 { font-weight: normal; }
h3 { font-size: x-large; }

.tooltip {
    border-bottom: 1px dotted black;
    cursor: help;
}

/* .link-box: use when stacking hyperlinks in a vertical arrangement, or for
 * individual links that appear without surrounding elements. */

.link-box > a { border-top: 1px solid gray; }
.link-box > a:last-of-type { border-bottom: 1px solid gray; }

.subtle-text {
    color: gray;
    font-size: small;
}

/* .table-container: prepare the direct children of a block to appear
 * side-by-side. Use .table-right-box for italic right-aligned tips. */

.table-container { display: table; }
.table-container > * {
    display: table-cell;
    vertical-align: middle;
}

.table-container > .table-right-box {
    text-align: right;
    font-style: oblique;
}

.table-container > .table-right-box > a { text-decoration: none; }
.table-container > .table-right-box > a:hover { font-style: normal; }

/* .table-container .table-container: force nested table containers, which are
 * themselves table cells, to push elements rightwards correctly. */

.table-container .table-container { width: 100%; }

/* .grid-container: the outermost element of the body, creating a two-column
 * layout with a width-spanning header and footer. */

.grid-container {
    display: grid;
    gap: 10px;
    padding: 10px;
    grid-template-columns: 25% auto;
}

.grid-container > div {
    border: 1px solid black;
    padding: 10px;
}

.grid-container > div p {
    text-align: justify;

    /* The ancestral (not necessarily parental) grid container div provides
     * some padding; do not duplicate the spacing here. */
    margin: 0;
}

/* .grid-container > .iframe-section: create a non-special grid element whose
 * principal content - likely an iframe - should scale to the height of the
 * bounding box. */

.grid-container > .iframe-section {
    display: flex;
    flex-direction: column;
}

.grid-container > .iframe-section > iframe { flex-grow: 1; }

/* .grid-container .title-container: create a title bounding box for a single
 * grid body element. The title should be contained within an H3 tag. */

.grid-container .title-container {
    padding-bottom: 10px;
    border-bottom: 1px solid black;
    margin-bottom: 10px;
    overflow: clip;
}

/* --- End generic styles      --- */
/* --- Begin single-use styles --- */

.grid-container > div:first-of-type, .grid-container > div:last-of-type,
        .grid-container > .gridspan-box {
    /* The first and last block elements within the grid container should
     * certainly span the entire two-column layout. These can be interpreted as
     * a header and a footer, respectively. Additional width-spanning boxes can
     * be specified with the gridspan-box class. */
    grid-column: span 3;
}

.grid-container > .placement-note {
    background-color: #000;
    color: #fff;
    text-align: center;
    font-weight: bold;
    padding: 1em;
    display: table;
}

.grid-container > .placement-note > p {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

/* --- Begin two-image header styles --- */

.grid-container > div:first-of-type > img {
    width: 200px;
    height: 200px;
    border: 1px solid black;
}

.grid-container > div:first-of-type > img:first-of-type {
    box-shadow: 5px 5px gray;
    margin-right: 30px;
}

.grid-container > div:first-of-type > img:first-of-type:hover {
    box-shadow: 5px 5px black;
}

.grid-container > div:first-of-type > img:last-of-type {
    box-shadow: -5px 5px gray;
    margin-left: 30px;
}

.grid-container > div:first-of-type > img:last-of-type:hover {
    box-shadow: -5px 5px black;
}

/* --- End two-image header styles           --- */
/* --- Begin main body grid container styles --- */

.grid-container > #tree { grid-row: 2 / span 3; }

.grid-container > #calendar {
    grid-column: 2 / span 2;
    height: 600px;
}

.grid-container > #calendar-note {
    grid-column: 2;
    grid-row: 3;
}

.grid-container > #additional-notices { grid-column: 3; }
.grid-container > #additional-notices > ul {
    margin-top: .5ex;
    margin-bottom: .5ex;
}

/* --- End main body grid container styles --- */
/* --- End single-use styles               --- */