/* -------------------------------------------------------------------------- */
/* BODY ELEMENTS */
/* -------------------------------------------------------------------------- */
body {
    width: 100%;
    height: calc(100vh - var(--header-height));
    background-color: lightgray;
    margin-top: var(--header-height);
    justify-content: center;
    align-items: center;
    z-index: var(--header-height);
    color: black;
    font-size: 18px;
    line-height: 26px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: normal;
}

body .blue_body {
    color: white;
    background-color: var(--pitt-blue); /* or #ccccc */
}

body .gold_body {
    color: black;
    background-color: var(--pitt-gold);
}

body .gray_body {
    color: black;
    background-color: lightgray; /* or #ccccc */
}


/* -------------------------------------------------------------------------- */
/* IFRAME ELEMENTS */
/* -------------------------------------------------------------------------- */
iframe {
    /* 
    REF:
        - https://stackoverflow.com/questions/11516291/css-get-height-of-screen-resolution
    */
    overflow: hidden;
    width: 99vw;
    height: 100vh;
}

iframe:focus {
    outline: none;
}

iframe[seamless] {
    display: block;
}


/* -------------------------------------------------------------------------- */
/* TABLE ELEMENTS */
/* -------------------------------------------------------------------------- */
table {
    width: 100%;
    align-items: center;
    justify-content: center;
    border-collapse: initial;
    text-align: center;
    vertical-align: top;
    line-height: 30px;
}

th {
    font-weight: bold;
    line-height: 36px;
    /* border: 1px solid black; */
}

td {
    text-align: center;
    vertical-align: top;
    /* border: 1px solid black; */
}

/* -------------------------------------------------------------------------- */
/* TEXT OPTIONS (FOR SPAN ELEMENTS */
/* -------------------------------------------------------------------------- */
.ordinal {
    font-size: 75%;
    position: relative;
    top: -0.5em;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.under {
    text-decoration: underline;
}

.bold_under {
    font-weight: bold;
    text-decoration: underline;
}

.bold-italic {
    font-weight: bold;
    font-style: italic;
}

.bold_under_italic {
    font-weight: bold;
    text-decoration: underline;
    font-style: italic;
}


/* -------------------------------------------------------------------------- */
/* PARAGRAPH OPTIONS */
/* -------------------------------------------------------------------------- */
p {
    color: black;
    margin-left: 5px;
}


/* -------------------------------------------------------------------------- */
/* MAIN LINKS AND LISTS */
/* -------------------------------------------------------------------------- */
main a {
    color: var(--pitt-blue);
    text-decoration: underline;
    font-size: 18px;
    line-height: 24px;
    margin-left: 5px;
}

main a:hover {
    color: var(--site-color-01-hover);
}

main ol li {
    list-style: decimal;
    list-style-type: decimal;
    margin-left: 40px;
    padding-left: 5px;
    padding-bottom: 20px;
}

main ol li a {
    margin-left: 0px;
}

/* main ol li a {
    color: var(--site-color-01);
} */