html {
    height: 100%;
}

* {
    margin: 0;
    padding: 0;
}

body {
    font: normal 1em 'trebuchet ms', arial, sans-serif;
    background: #e8e8e8;
}

div {
}

p {
}

img {
}

a {
    color: #7E2451;
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'century gothic', arial, sans-serif;
    font-weight: normal;
    color: #7E2451;
    clear: both;
    padding-top: 15px;
}

h1 {
    font-size: 3.00em;
}

h2 {
    font-size: 1.80em;
}

h3 {
    font-size: 1.25em;
    padding-bottom: .5em;
}

h4 {
    font-size: 1.25em;
}

h5 {
    font-style: italic;
    font-size: 1em;
}

h6 {
    font-style: italic;
    font-size: .75em;
}

blockquote {
    font-size: 80%;
    font-family: italic;
    padding: 2% 2% 2% 3%;
}

/* ------------------------------------------------------------------ */
/* Center the main enclosing divs */

#main,
#header,
#site_content,
#footer {
    margin-left: auto; 
    margin-right: auto;
}

/* ------------------------------------------------------------------ */
/* Fills top of #main l-r, above #site_content */

#header {
    position: relative;
    width: 95%;
    height: 100px;
    border-bottom: 2px solid #7E2451;
    /*
    border: 1px solid black;
    */
}

#header_left {
    position: absolute;
    box-sizing: border-box; /* >> Magic <<  */
    width: 80%;
    height: 100%;
    bottom: 0;
    /*
    border: 1px solid green;
    */
}

#header_right {
    position: absolute;
    box-sizing: border-box; /* >> Magic <<  */
    width: 20%;
    height: 100%;
    bottom: 0;
    right: 0;
    /*
    border: 1px solid red;
    */
}

#header h1 {
    position: absolute;
    bottom: 0;
    left: 0;
    color: black;
    /*
    border: 1px solid yellow;
    */
}

#header h2 {
    position: absolute;
    padding: 0 0 3px 0;
    bottom: 0;
    right: 0;
    color: black;
    /*
    border: 1px solid yellow;
    */
}

/* ------------------------------------------------------------------ */
/* Below #header, fills #main l-r, contains #content & #sidebar */

#site_content {
    width: 100%;
    overflow: hidden;
    margin: 0 auto 0 auto;
    /*
    border: 1px solid blue;
    */
}
/* ------------------------------------------------------------------ */
/* Right side of #site_content */

#sidebar {
    float: right;
    width: 20%;
    padding-right: 3%;
    box-sizing: border-box; /* >> Magic <<  */
    /*
    border: 1px solid green;
    */
}

#sidebar a,
.dropdown-btn {
    color: #7E2451;
    display: block;
    cursor: pointer;
    text-decoration: none;
    font-size: 1.25em;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    outline: none;
    /*
    border: 1px solid red;
    */
}

#sidebar a {
    padding-top: 5%;
    font-size: 1.0em;
    text-decoration: underline;
}

.dropdown-btn {
    padding-top: 10%;
}

.dropdown-container {
    display: none;
    padding-left: 5%;
}

.fa-caret-down,
.fa-caret-right {
    float: right;
}

/* ------------------------------------------------------------------ */
/* Left side of #site_content fills to #sidebar, contains several .contentblocks  */

#content {
    width: 80%;
    text-align: left;
    float: left;
    padding-left: 3%;
    padding-right: 3%;
    box-sizing: border-box; /* >> Magic <<  */
    /*
    border: 1px solid green;
    */
}

/* ------------------------------------------------------------------ */
/* viewer.php */
#view_image {
    width: 100%;
    /*
    border: 1px solid green;
    */
}

#image_content {
    width: 94%;
    overflow: scroll;
    padding: 1% 0 2% 3%;
    /*
    border: 1px solid green;
    */
}

#viewer_nav {
    width: 94%;
    margin: 1% 0 0 3%;
    /*
    border: 1px solid green;
    */
}

/*
 * See comments for .contentblock::after, elsewhere
 */
#viewer_nav::after {
    content: "";
    clear: both;
    display: table;
}

#back_button {
    float: right;
    margin-right: 2%;
    height: 30px;
}

/* ------------------------------------------------------------------ */

.image {
    width: 100%;
    /*
    border: 1px solid red;
    */
}

.headingblock {
    padding-bottom: 10px;
    /*
    border: 1px solid red;
    text-decoration: underline;
    text-decoration-color: #7E2451;
    */
}

/*
 * ----------------------------
 * Things marked >> Magic << came from
 * https://www.w3schools.com/css/css_float_examples.asp
 * and were the only way I could get the images
 * to display and align the way I wanted.
 * NOTE: elements with the property box-sizing: border-box
 * _include_ padding, margin, and border in their width
 * and height, unlike the default behavior where those
 * properties are added to the width and height.
 * The above link recommends using
 *    * {
 *      box-sizing: border-box;
 *      }
 * so that all elements are consistant and behave
 * the same way. I may try that.
 */

/* >> Magic << */
/* Described in https://www.w3schools.com/cssref/pr_class_float.asp
 * as 'the clearfix hack':
 *      If a floating element is taller than the containing element,
 *      it will overflow outside its container. It is possible to
 *      fix this with the "clearfix hack"
 * It ensures that the <div class='contentblock'> element wrapping the
 * images and text expands to fully contain the things inside it.
 * Without this, the <div> shrinks to 0 height and the image overflows.
 */
.contentblock::after {
    content: "";
    clear: both;
    display: table;
}

.contentblock {
    /*
    border: 1px solid red;
    */
}

.left {
    float: left;
    width: 50%;
    padding: .7% 2% 3% 2%;
    box-sizing: border-box; /* >> Magic <<  */
    /*
    border: 1px solid green;
    */
}

.center {
    float: left;
    width: 40%;
    padding: .7% 30% 3% 30%;
    /*
    border: 1px solid green;
    */
}

.right {
    float: right;
    width: 50%;
    padding: .7% 2% 3% 2%;
    box-sizing: border-box; /* >> Magic <<  */
    /*
    border: 1px solid green;
    */
}

.full {
    float: left;
    width: 100%;
    padding: .7% 2% 3% 2%;
    box-sizing: border-box; /* >> Magic <<  */
    /*
    border: 1px solid green;
    */
}

.center_small {
    float: left;
    width: 40%;
    padding: .7% 2% 3% 2%;
    box-sizing: border-box; /* >> Magic <<  */
    /*
    border: 1px solid green;
    */
}

.bq {
    /*
    border: 1px solid green;
    */
}


.quote {
    font-size: 100%;
    font-style: italic;
    padding: 2% 2% 2% 3%;
    /*
    border: 1px solid red;
    */
}

/* ------------------------------------------------------------------ */

#footer {
    position: relative;
    width: 95%;
    font: normal 50% 'lucida sans unicode', arial, sans-serif;
    height: 33px;
    padding: 24px 0 5px 0;
    text-align: center; 
    background: transparent;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-top: 2px solid #7E2451;
    /*
    border-left: 1px solid green;
    border-right: 1px solid green;
    border-bottom: 1px solid green;
    */
}