/* CSS - "MousePaw Blue"
 * Version 3.0
 *
 * Author(s): Jason C. McDonald
 *
 * == LICENSE ==
 *
 * Copyright (c) 2021 MousePaw Media.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 *
 * 1. Redistributions of source code must retain the above copyright
 *    notice, this list of conditions and the following disclaimer.
 *
 * 2. Redistributions in binary form must reproduce the above copyright
 *    notice, this list of conditions and the following disclaimer in the
 *    documentation and/or other materials provided with the distribution.
 *
 * 3. Neither the name of the copyright holder nor the names of its
 *    contributors may be used to endorse or promote products derived from
      this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED
 * TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
 * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
 * LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

/* == FONT ==
 * The website uses the font "Days" by Alexander Kalachev.
 * Licensed under Creative Commons Attribution v3
 *
 * The font is made available in the site files. It may also
 * be downloaded from FontSquirrel.
 * http://www.fontsquirrel.com/fonts/Days
 */
@font-face {
    font-family: 'days';
    src: url('/common/fonts/days/days-webfont.eot');
    src: url('/common/fonts/days/days-webfont.eot?#iefix') format('embedded-opentype'),
         url('/common/fonts/days/days-webfont.woff') format('woff'),
         url('/common/fonts/days/days-webfont.ttf') format('truetype'),
         url('/common/fonts/days/days-webfont.svg#days') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sourcesans';
    src: url('/common/fonts/sourcesans/sourcesans-webfont.eot');
    src: url('/common/fonts/sourcesans/sourcesans-webfont.eot?#iefix') format('embedded-opentype'),
         url('/common/fonts/sourcesans/sourcesans-webfont.woff2') format('woff2'),
         url('/common/fonts/sourcesans/sourcesans-webfont.woff') format('woff'),
         url('/common/fonts/sourcesans/sourcesans-webfont.ttf') format('truetype'),
         url('/common/fonts/sourcesans/sourcesans-webfont.svg#source_sans_proregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sourcecode';
    src: url('sourcecode-webfont.eot');
    src: url('sourcecode-webfont.eot?#iefix') format('embedded-opentype'),
         url('sourcecode-webfont.woff2') format('woff2'),
         url('sourcecode-webfont.woff') format('woff'),
         url('sourcecode-webfont.ttf') format('truetype'),
         url('sourcecode-webfont.svg#source_code_proregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* == COLOR PALETTE ==
 * The color palette is based on the main accent color - which was
 * sourced from the MousePaw Games logo - using split-complements.
 * The lighter colors are saturation 13 variants on the main three
 * colors in the palette.
 *
 * MousePaw Yellow: #FFCB05
 * Dark Background: #000EFE
 * Light Background: #B1DEFF
 */

html {
    /* Use our background blue as a fallback, if the background
	 * image does not load. */
    background: #0075E5;

	/* Load our background image and make sure it does not scroll
	 * with the page. */
	/*background-image: url(/img/webback.jpg);
	background-attachment: fixed;
	background-size: 100%;*/
}

/* Define the page itself, in preparation to configure the banner
 * as fixed and the content as scrollable. */
body {
    position: absolute;

    /* Potentially redundant whatnot to make sure the page is
     * as wide as possible.*/
    width: 100%;
    left: 0;
    margin: 0;
    padding: 0;
}

/**************** HEADER ****************/

header {
    /* Fix the banner base to the top of the page. */
    position: fixed;
    top:0;
    left:0;
	width:100%;

	/* Ensure the banner is always above everything else. */
	z-index:2;

	/* Define the font as "Days", with a fallback on
	 * the system sans-serif.*/
	font-family:'days', sans-serif;
    font-size:20px;

	/* Center and align everything. */
	white-space: nowrap;
	text-align: center;
}

/* Set all header hyperlinks to be "quiet" (act like text). */
header a {
    /* The text color should be derived from the original text's
	 * formatting, and not changed with hyperlink state. */
	color:inherit;
	/* Do not underline the text! */
	text-decoration: none;
}

/* The header content *besides* the navbar.*/
.headerbox {
    /* Give the banner a semi-transparent background so we
     * can see the content through it as we scroll.*/
    /*background:rgba(222, 242, 255, 0.8);*/
    background:rgba(177, 222, 255, 0.8);

    /* Add a nice border to the bottom.*/
    border-bottom: solid black 2px;
}

/* The navigation menu. */
nav {
    margin: 0px;
    padding: 0px;
}

/* The main, ever-present menu of navbar buttons. */
nav ul {
    display: inline-table;
    position: relative;

    /* Make flush with the headerbox or top of page. */
    margin: 0px;
    padding: 0px;
    width:100%;

    /* Hide the bullet points.*/
    list-style: none;
}

/* Each button on the main navbar. */
nav ul li {
    /* The display, margin, and padding ensure the list is horizontal. */
    display:inline-block;
    vertical-align: top;
    margin: 0px;
    padding: 0px;
    font-size:20px;
}

/* Hovering over top-level buttons. */
nav ul li:hover > ul {
    /* Display the relevant submenu. Items should be vertically stacked now.*/
    display: block;
}

/* Second-level navbar menus. */
nav ul ul {
    /* Hide by default.*/
    display: none;

    /* Look and behave like submenus: open BELOW the parent button and
     * stretch to the right as far as necessary without disturbing the
     * top-level layout. */
    position: absolute;
    width: auto;
    top: 100%;

    /* Create either a solid or gradient background. */
    background: #7d99ff;
	background: linear-gradient(top, #7d99ff 0%, #c3d2ff 100%);

    /* Give the menus rounded black borders. */
    border-radius: 5px 5px 5px;
    border: 1px solid black;

    /* The default text color is black. */
    color:#000000;
}

/* Second-level navbar menu buttons. */
nav ul ul li {
    /* Items should be vertically stacked. */
    display: list-item;
    /* Position relative within the parent submenu. */
    position: relative;

    /* Put some horizontal space between the text and the menu edge. */
    padding-left: 10px;
    padding-right: 10px;
}

/* Third-level navbar menu. */
nav ul ul ul {
    /* Technically, 'none' is being inherited, but we'll list it anyway.
     * The submenu is hidden until called upon to appear. */
    display: none;
    /* Position absolutely in relation to the parent button. */
	position: absolute;
    /* Appear at the right edge of the parent menu. */
    left: 100%;
    /* Line the top of the menu up with the top of the parent button. */
    top: 0px;
}

/* The left decorative bevel. */
.nav_bevelleft {
    display: block;

    /* Set a fixed size for this. It fits on any screen. */
    width: 41px;
    height: 41px;

    /* It should be flush with adjacent elements. */
    margin: 0px;
    padding: 0px;
    vertical-align: top;

    /* Display the specified background SVG within */
    background-image: url('/img/icons/menu_bevelleft.svg');
    background-size: contain;
}

.nav_bevelright {
    display: block;

    /* Set a fixed size for this. It fits on any screen. */
    width: 41px;
    height: 41px;

    /* It should be flush with adjacent elements. */
    margin: 0px;
    padding: 0px;
    vertical-align: top;

    /* Display the specified background SVG within */
    background-image: url('/img/icons/menu_bevelright.svg');
    background-size: contain;
}

/* These are the individual text-filled nav button elements. */
.nav_buttonwide {
    display: block;
    vertical-align: top;

    /* Set a fixed size for this. Our adaptive design will handle
     * things if this is too big for a screen. */
    width: 123px;
    height: 41px;

    /* It should be flush with adjacent elements. */
    margin: 0px;
    padding: 0px;
    vertical-align: top;

    /* Display the specified background SVG within */
    background-image: url('/img/icons/menu_btnwide.svg');
    background-size: contain;

    /* Define the font as "Days", with a fallback on the system sans-serif.*/
	font-family:'days', sans-serif;
    font-size:18px;

    /* Black text. */
    color:#000000;
}

.nav_buttonsquare {
    display: block;
    vertical-align: top;

    /* Set a fixed size for this. Our adaptive design will handle
     * things if this is too big for a screen. */
    width: 41px;
    height: 41px;

    /* It should be flush with adjacent elements. */
    margin: 0px;
    padding: 0px;
    vertical-align: top;


    /* Display the specified background SVG within */
    background-image: url('/img/icons/menu_btnsquare.svg');
    background-size: contain;

    /* Define the font as "Days", with a fallback on the system sans-serif.*/
	font-family:'days', sans-serif;
    font-size:18px;

    /* Black text. */
    color:#000000;
}

.nav_btn {
    /* Make the span behave like a button, instead of like
     * the text field that it really is. */
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 40px;
}

/* When we hover over a button, change its text color to the
 * light yellow accent.*/
.nav_btn:hover > span {
    color:#FFF8DE;
}

/* Images on nav buttons should be displayed with 5% margin on each side. */
.nav_btn span img {
    width:80%;
    margin:10%
}

/* Every nav button containing an inline SVG should set its
 * fill to black by default. */
.nav_btn span svg path {
    fill: #000000;
}

/* When we hover over a button, change the inline SVG fill
 * to the light yellow accent, the same as we do for text. */
.nav_btn:hover > span svg path {
    fill: #FFF8DE;
}

/* Large SVG images on nav buttons should be displayed with 5% margin on
 * each side, in the same way images are. */
.nav_iconsvg {
    width:80%;
    margin:10%;
}

/* SVGs appearing alongside button text need to be a small, fixed size. */
.nav_inlinesvg {
    width:15px;
}

/**************** CONTENT LAYOUT ****************/

main {
    position: relative;
    left: 0;

    /* Make sure we are fully clear of the header - we don't want to have
     * content hidden underneath. */
    margin-top: 150px;
    margin-bottom: 50px;
}

section.border-top {
    border-top: solid black 1px;
}

section.border-bottom {
    border-bottom: solid black 1px;
}

/* Section should contain its elements and prevents overflow into
 * adjacent sections. Works best with border-top */
section.contain {
    clear: both;
}

article.banner{
    background: none;
    position: relative;
    display: block;
    width: 100%;
    margin: 0px;
    padding: 0px;
    left: 0;
    top: -65px;
    margin-bottom: -50px;
}

article.normal {
    position: relative;
    float: left;
    /* This should take up roughly 2/3 of the page. */
    width: 60%;

    /* 2% margin on both sides, but the right margin shares the space with
     * the sidebar's left margin. */
    margin-left: 2%;
    margin-right: 1%;

    /* This is somehow needed for the footer's margin to work. */
    margin-bottom: 20px;

    padding-left: 1%;
    padding-right: 1%;

    /* Round the corners of the frame. */
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius:8px;

    background:rgba(177, 222, 255, 0.8);
}

article.center {
    position: relative;
    float: left;
    width: 70%;
    margin-left: 15%;
    margin-right: 15%;

    /* This is somehow needed for the footer's margin to work. */
    margin-bottom: 20px;

    padding-left: 1%;
    padding-right: 1%;

    /* Round the corners of the frame. */
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius:8px;

    background:rgba(177, 222, 255, 0.8);
}

article.full {
    position: relative;
    float: left;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;

    /* This is somehow needed for the footer's margin to work. */
    margin-bottom: 20px;

    padding-left: 1%;
    padding-right: 1%;

    /* Round the corners of the frame. */
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius:8px;

    background:rgba(177, 222, 255, 0.8);
}

/* Floating content box, float left. */
div.float_left {
	width:25%;
	vertical-align:top;
	float:left;
	margin:1%;
}

/* Floating content box, float right. */
div.float_right {
	width:25%;
	vertical-align:top;
	float:right;
	margin:1%;
}

div.center {
    width: 45%;
    margin: 0 auto;
    padding: 5px;
}

/* Add green background with black border to floating content box. */
div.blue {
	background: #000066;
    color: #FFFFFF;
	border:2px solid black;
}

/* Add green background with black border to floating content box. */
div.green {
	background: #66FF66;
	border:2px solid black;
}

/* Add green background with black border to floating content box. */
div.purple {
	background: #6600CC;
    color: #FFFFFF;
	border:2px solid black;
}

/* Add red background with black border to floating content box. */
div.red {
	background: #FF6666;
	border:2px solid black;
}

/* Add yellow background with black border to floating content box. */
div.yellow {
	background: #FFFF66;
	border:2px solid black;
}

/* Flexbox */
div.flex {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

div.flex_item_equal {
    flex: 1 1 1%;
}

div.flex_item {
    flex: 1 0 30%;
}

div.center_content {
    vertical-align: top;
    text-align: center;
}

aside.sidebar {
    position: relative;
    float: left;
    /* This should take up roughly 2/3 of the page. */
    width: 30%;
    margin-left: 1%;
    margin-right: 2%;
    margin-bottom: 20px;

    padding-left: 1%;
    padding-right: 1%;

    /* Sidebar content really should be centered. */
    text-align: center;

    background:rgba(177, 222, 255, 0.8);
}

/*************** RESPONSIVE DESIGN ****************/

/* When the viewport is less than 700px wide, we switch to
 * Mobile mode. */

/* Mobile mode. */
@media (max-width: 865px) {
    /* Hide the desktop stuff. */
    .visible-desktop {
        display: none !important;
    }

    span.mobile {
        display: inline;
    }

    span.desktop {
        display: none;
    }

    /* Change "normal" articles to take up the whole page. */
    article.normal {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }

    /* The sidebar switches from static to a slider. */
    aside.sidebar {
        /* The sidebar should take up the entire right side of the page. */
        position: fixed;
        float: none;

        /* Set flush with top. */
        top: 0%;

        /* By default, it will be hidden off the right side of the page. */
        right: -100%;
        margin-right: 0px;

        /* When visible, it will be the entire height of the page, and take up
         * most *but not all) of the width. */
        width: 70%;
        height: 100%;

        /* It must appear above everything else, even the header. */
        z-index: 3;

        /* Keep it the same color as before, but with full opacity. */
        background:rgba(177, 222, 255, 1);

        /* Give it a left border; the other three edges are flush with page edge. */
        border-left: solid #000000 3px;

        /* If we can't fit all the content on the screen, show the scrollbar. */
        overflow: auto;

        /* Slide effect. */
        transition: right 0.5s ease-out;
    }

    /* The button to toggle the sidebar. */
    div.toggle {
        /* The toggle button needs to be ever-present in the same spot. */
        position: fixed;
        display: block;
        /* Hover the button a little down the page, and keep it flush with
         * the right of the page. */
        top: 65px;
        right: 0%;
        /* The size is constant.*/
        width: 40px;
        height: 40px;
        /* Hover it above everything. Only the sidebar itself will cover it. */
        z-index: 3;

        text-align: center;

        /* Display the specified background SVG within */
        background-image: url('/img/icons/menu_btnsquare.svg');
        background-size: contain;

        /* Add a nice shadow. */
        -webkit-box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.7);
        -moz-box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.7);
        box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.7);

    }

    /* The toggle button's text... */
    div.toggle > p {
        /* Keep the font from overflowing the container.*/
        display: inline;

        font-family:'days', sans-serif;
        color: #000000;
        font-size:24px;
        line-height: 50px;

        /* Make the text behave like a button, instead of like
         * the text that it really is. */
        cursor: default;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        line-height: 40px;
    }

    /* Keep the sidebar open as long as we're over it. */
    aside.sidebar:hover {
        right: 0%;
        transition: right 0.5s ease-out;
    }

    /* Keep the sidebar open as long as we're clicking/tapping in it. */
    aside.sidebar:focus {
        right: 0%;
        transition: right 0.5s ease-out;
    }

    /* If we hover over the toggle button, open the sidebar. */
    div.toggle:hover {
        background:rgba(177, 222, 255, 1);
    }

    /* If we click the toggle button, open the sidebar. */
    div.toggle:hover + aside.sidebar {
        right: 0%;
        transition: right 0.5s ease-out;
    }
}

/* Desktop mode. */
@media (min-width: 865px) {
    /* Hide the mobile stuff. */
    .visible-mobile {
        display: none !important;
    }

    span.mobile {
        display: none;
    }

    span.desktop {
        display: inline;
    }

    div.toggle {
        display: none;
    }

    /* The sidebar ONLY has rounded corners in desktop mode. */
    aside.sidebar {
        /* Round the corners of the frame. */
    	-webkit-border-radius: 8px;
    	-moz-border-radius: 8px;
    	border-radius:8px;
    }
}

/**************** EXPANDERS **********************/

/* HTML USAGE:
    <div class=expander tabindex=1>
        <p>
            Visible content.
        </p>
        <div><p>
            Hidden content.
        </p></div>
    </div>
*/

div.expander {
    padding: 0px;
}

/* Hide the contained div by default. */
div.expander > div {
    z-index: 1;
    overflow: hidden;
    max-height: 0px;
    transition: max-height 0.5s ease-out;
}

div.expander > p {
    margin: 10px auto;
}

div.expander > div > p {
    margin: 10px auto;
}

/* Change the highlight color on hover. */
div.expander:hover {
    background:rgba(255, 248, 222, 1.0);
}

/* Also change the highlight color on click. */
div.expander:focus {
    background:rgba(255, 248, 222, 1.0);
}

div.expander:hover > div {
    max-height: 500px;
    transition: max-height 0.5s ease-out;
}

/* Show the hidden content on click. */
div.expander:focus > div {
    max-height: 500px;
    transition: max-height 0.5s ease-out;
}

/**************** TEXT FORMATTING ****************/
h1 {
	font-family:'days', sans-serif;
    font-size:24px;
    text-align: center;
}

h2 {
    font-family:'days', sans-serif;
    font-size:20px;
    text-align: center;
}

h3 {
    font-family:'days', sans-serif;
    font-size:16px;
    text-align: center;
}

h4 {
    font-family:'days', sans-serif;
    font-size:16px;
    text-align: left;
}

pre {
    font-family:'sourcecode', monospace;
    font-size: 16px;
}

code {
    font-family:'sourcecode', monospace;
    font-size: 16px;
    background-color: #bcd3d8
}

p {
    font-family:'sourcesans', sans-serif;
    font-size: 18px;
}

main {

}

p.center {
    text-align: center;
}

p.right {
    text-align: right;
}

p.small {
    font-size: 14px;
}

p.days {
    font-family:'days', sans-serif;
}

main ul {
    font-family:'sourcesans', sans-serif;
    font-size:18px;
    text-align: left;
}

main ol {
    font-family:'sourcesans', sans-serif;
    font-size:18px;
    text-align: left;
}

ul.days {
    font-family:'days', sans-serif;
}

main table {
    margin-left: auto;
    margin-right: auto;
    font-family:'sourcesans', sans-serif;
    font-size:18px;
}

main table th {
    border: 3px double black;
    font-weight: bold;
    padding: 5px;
    text-align: center;

}

main table td {
    border: 1px solid black;
    padding: 5px;
}

/**************** IMAGES ****************/

img.icon_social {
    height: 40px;
    margin: 5px;
}

img.icon_large {
    height: 100px;
    margin: 5px;
}

img.icon_medium {
    height: 70px;
    margin: 5px;
}

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Three sizes of image, based on WIDTH (not height). */
img.small {
    width: 20%;
}

img.med {
    width: 30%;
}

img.large {
    width: 40%
}

img.x-large {
    width: 60%
}

img.profile {
    width: 25%;
    /* Based on float_right */
    float: right;
	margin-bottom:10px;
	margin-left:10px;
}

img.banner {
    width: 100%;
}

/* Framed image. */
img.framed {
	/* Add a black border on the photo. */
	border: 3px solid black;

	/* Round the corners of the frame. */
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius:8px;
}

img.hoverable {
    background: #FFF8DE;
}

/* When we hover over a button image, switch its background color
 * to MousePaw Yellow. */
img.hoverable:hover
{
    background: #FFCB05;
}

img.float_left {
    float: left;
	/* Leave a little room below the image, so things don't
	 * look crowded. */
	margin-bottom:10px;
	/* Leave a little room to the right of the image, so the
	 * text isn't crowded. */
	margin-right:10px;
}

img.float_right {
    float: right;

    /* Leave a little room below the image, so things don't
	 * look crowded. */
	margin-bottom:10px;
	/* Leave a little room to the right of the image, so the
	 * text isn't crowded. */
	margin-left:10px;
}

/***************** CLICKABLE IMAGE ************************/
/* Display an image thumbnail, and display the full image
 * in a popup box by clicking the thumbnail. The popup
 * box may be closed by clicking anywhere.
 *
 * Based On: http://cssdemos.tupence.co.uk/image-popup.htm
 *
 * Use the following to create a thumbnail/popup pair. Replace
 * "thumb_left" with "thumb_right" to float the thumbnail
 * to the right.
	<div class="thumb thumb_left" tabindex=-1>
		<img class="thumb" src="/img/image.png" alt="Caption."/>
		<p class="small_caption">Click to Enlarge</p>
		<span tabindex=-1>
		    <p class="small_caption">Click Anywhere to Close</p>
		    <img class="popup" src="/img/image.png"/>
		    <p><br/>Caption.</p>
	</span></div>
*/

/* The image thumbnail. */
div.thumb{
	display:inline-block;
	position: relative;

	z-index:0;
	margin-left:10px;
	margin-right:10px;
	margin-bottom:10px;

    width:30%;

	/* Define our thumbnail frame and give it an accent color... */
	padding: 1%;
	background-color:#DEF2FF;

	/* We'll also give the frame a drop shadow. */
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .75);
	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .75);
	box-shadow: 0 0 5px rgba(0, 0, 0, .75);

	/* Round the corners of the frame. */
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

div.thumb p {
    font-family:'days', sans-serif;
    font-size: 18px;
}

div.thumb p.small_caption {
    font-family:'days', sans-serif;
    font-size: 14px;
}

/* This is a variant on the thumbnail that floats left. */
div.thumb.thumb_left{
	float:left;
}

/* This is necessary for the click effect. */
div.thumb:focus{
	z-index:1;
}

/* This is a variant on the thumbnail that floats right. */
div.thumb.thumb_right{
	float:right;
}

img.thumb
{
    display: block;
	width:100%;
}

img.popup
{
    display: block;
	width:100%;
}

/* The popup window displaying the full-size image when the
 * thumbnail image is clicked. */
div.thumb span{
	/* The default position is completely off the screen. The
	 * click behavior will move it into focus. */
	position: fixed;
	left:-9999px;

	/* Define the frame and frame color for the popup. */
	padding:10px;
	background:#DEF2FF;

    width:60vw;

	/* Give the frame a drop shadow. */
	-webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, .75);
	-moz-box-shadow: 5px 5px 20px rgba(0, 0, 0, .75);
	box-shadow: 5px 5px 20px rgba(0, 0, 0, .75);

	/* Round the corners of the frame. */
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius:8px;
}

/* Position the popup relative to the left-floating thumbnail,
 * thereby bringing it into view upon clicking the thumbnail. */
div.thumb:focus span {
	top: 10vh;
    left: 20vw;
}

/* If we click the popup, return it to its offscreen position
 * to hide it. */
div.thumb span:focus {
	left:-9999px;
}

/**************** EMBEDDED STUFF ****************/
iframe.archiveaudio {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 30px;
    width: 50%;
}

/* This locks the aspect ratio of the contained iframe.
 * The padding-bottom is the aspect ratio of the iframe in percent.
 * See https://fettblog.eu/blog/2013/06/16/preserving-aspect-ratio-for-embedded-iframes/
 */
div.youtube {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56%;
}

div.youtube iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0; top: 0;
}

/**************** UTILITY STUFF ****************/

/* ANCHOR OFFSET
 * We need to offset our anchors to account for our banner's
 * height, otherwise the anchor jump will show the content
 * under the banner, instead of at the top of the readable area.
 *
 * Based on: http://stackoverflow.com/a/13184714/472647
 *
 * Use the following to create an offset anchor:
	<a class="anchor" id="amcdonald"></a>
 *
 * WARNING: You MUST have seperate open and close tags,
 * or else the entire div will vanish
 *
 */
a.anchor {
	display:block;
	position:relative;
	top:-42px;
	visibility:hidden;
}

/* EMAIL OBFUSCATOR
 * This is shown to block email address scraping.
 * Based on http://techblog.tilllate.com/2008/07/20/ten-methods-to-obfuscate-e-mail-addresses-compared/
 *
 * Use the following to list an email address:
    <span class=email>info@<span>null</span>mousepawmedia.com</span>
 */

span.email span {
    display:none;
}

/**************** FOOTER ****************/

footer {
	position: relative;
    left:0px;
    bottom: 0px;

    /* The footer should visually match the header. */
	width:100%;
	text-align: center;
    align-content: center;

    /* Make some room between the footer and the main content. */
	margin-top:4%;

	/* Add some narrow padding to the top of the footer. */
	padding-top:0.5%;

    /* We need slightly more padding on the bottom of the footer
	 * than we do on the top, to make it visually obvious that
	 * there is no more content. */
	padding-bottom:1%;

    /* Prevent the footer from overrunning the page content. */
    clear: both;

    /* Our footer should have the same background as the header. */
	background:rgba(177, 222, 255, 0.8);

    border-top: solid black 2px;

    /* Use the Days font, falling back on the system sans-serif. */
	font-family:'days', sans-serif;
}

/* Yes, we're using a table for the six-column mini-sitemap. So sue me. */
div.footer_flex {
    display: flex;
    flex-direction: row;
    /* The table should have comfortable spacing on the
	 * left and right. */
	width:80%;

    justify-content: center;
    flex-flow: nowrap;

    /* Make sure all of the content is centered. */
	margin-left: auto;
	margin-right: auto;
}

div.footer_flex > div {
    /* The content should be be aligned to the top of the table. */
    vertical-align: top;
    text-align: center;

    padding-left: 20px;
    padding-right: 20px;

    /* Only set a border on the right - we don't want double lines
     * between columns. */
    border-right: solid black 1px;
}

/* The leftmost footer table column. */
div.leftcell {
    /* Set a border on the left as WELL as the right. */
    border-left: solid black 1px;
}

/* Heading text for the sitemap. */
footer h1 {
    /* Make sure it isn't *too* much larger than the standard footer text. */
    font-size: 18px;
}

/* Footer text (except headings). */
footer p {
    /* This should be smallish, but not too small, as it will be important
     * to some site naviagation. */
    font-family:'days', sans-serif;
    font-size: 14px;
}

/* The div containing everything *other* than the footer sitemap. */
.footer_bottom {
    position: relative;
    /* Should be as wide as the footer. */
    width: 100%;
    /* Separate this from the sitemap table above it. */
    border-top: solid black 1px;
}