/*----------------- General changes to TwentyTwenty style ----------------*/

/*
Rules in this file will override those in the Twenty Twenty style.css, provided
that the selectors are at least as specific as those you want to override.
Note that the Twenty Twenty theme puts a lot of CSS rules in inline styles -
to override these you will have to use "!important".

The Twenty Twenty theme has a screen width break point "@(min-width: 1000px)"
that displays horizontal menu instead of mobile menu.
It also a width break point at 700px which changes '.site-description' from
'display: none' to 'display: block'.
I'm using a break point of "@(min-width: 50rem)" to distinguish PC from mobile.
*/

/* Define various things. */

:root
{
    /* Dropdown menu background colour. */
    --dropdown-bg-colour: #f8f8f8;

    /* Menu text colour. */
    --menu-colour: black;

    /* Link colour. */
    --link-colour: #0000ff;

    /* Link visited colour. */
    --link-visited-colour: #7000cf;

    /* Link active colour. */
    --link-active-colour: #ff0000;

    /* Maximum width of blocks. */
    --max-width: 80rem;

    /* Checkbox size. */
    --checkbox-size: 2.0rem;
}

/* Hide the huge automatic page title */

h1.entry-title
{
    display: none;
}

/* Hide the 'Edit' link when viewing page as admin user */
.post-meta-edit-link-wrapper
{
    display: none;
}

/* Set margins for headings. */

.entry-content h1,
.entry-content h1.fog_css,
.entry-content h2,
.entry-content h2.fog_css,
.entry-content h3,
.entry-content h3.fog_css,
.entry-content h4,
.entry-content h4.fog_css,
.entry-content h5,
.entry-content h5.fog_css,
.entry-content h6,
.entry-content h6.fog_css
{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    clear: both;
}

/* Set colours for headings. */

.entry-content h1,
.entry-content h1.fog_css
{
    color: #007de7;
}

.entry-content h2,
.entry-content h2.fog_css
{
    color: #007de7;
}

.entry-content h3,
.entry-content h3.fog_css
{
    color: #007de7;
}

.entry-content h4,
.entry-content h4.fog_css
{
    color: #007de7;
}

.entry-content h5,
.entry-content h5.fog_css
{
    color: #007de7;
}

.entry-content h6,
.entry-content h6.fog_css
{
    color: #33b60b;
}

/* Set fonts for headings. */

.entry-content h1,
.entry-content h1.fog_css
{
    font-size: 2.8rem;
}

.entry-content h2,
.entry-content h2.fog_css
{
    font-size: 2.6rem;
    font-family: sans-serif;
}

.entry-content h3,
.entry-content h3.fog_css
{
    font-size: 2.5rem;
    font-family: sans-serif;
}

.entry-content h4,
.entry-content h4.fog_css
{
    font-size: 2.2rem;
    font-family: sans-serif;
}

.entry-content h5,
.entry-content h5.fog_css
{
    font-size: 1.9rem;
    font-family: sans-serif;
}

.entry-content h6,
.entry-content h6.fog_css
{
    color: #33b60b;
    font-family: sans-serif;
    text-transform: none;
}


/* Remove the padding around the now hidden page title */

.singular .entry-header
{
	padding-top: 0;
	padding-bottom: 0;
}

/* Reduce header padding. */

.header-inner
{
    padding: 0 0;
}

/* Increase the maximum width */

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide),
[class*="__inner-container"] .wp-block-group:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright)
{
    max-width: var(--max-width);
}

/* Hide "Powered by WordPress" in the footer */

.footer-credits .powered-by-wordpress
{
    display: none;
}

/* Use sans serif for body text, and use a sensible size. */

body, .entry-content p, .entry-content ol, .entry-content ul,
    .entry-content dl, .entry-content dt, table
{
    font-family: sans-serif;
    font-size: medium;
}

/* Body should at least fill screen, and content should be centred vertically */
body
{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
#site-content
{
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
article
{
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.post-inner
{
    max-width: var(--max-width);
    min-width: 60%;
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-radius: 0.5rem;
}

body.home .post-inner,
body.home .entry-content
{
    max-width: unset;
}

body.home article
{
    align-items: unset;
}

.footer-widgets
{
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
}
.footer-widgets .widget,
.footer-widgets .widget:first-child
{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-left: 2rem;
    max-width: 30rem;
}
.widget_text p,
.widget_text ul
{
    font-family: sans-serif;
    font-size: medium;
}

.footer-top
{
    padding: 2.5rem;
}

#site-footer
{
    position: relative;
    bottom: 0;
}

#site-footer a[href]
{
    color: #000000;
}

/* Change menu colour and font. */

body:not(.overlay-header) ul.primary-menu.reset-list-style li a
{
    color: var(--menu-colour);
    font-size: medium;
    font-weight: bold;
    text-decoration: none;
}

/* Reduce width of sub-menu. */
.primary-menu ul
{
	width: 15rem;
}

/* Reduce margin above footer */
.footer-top-visible .footer-nav-widgets-wrapper
{
    margin-top: 1rem;
}

/* Reduce footer padding */
.footer-widgets-outer-wrapper
{
    padding: 2rem 0;
}
#site-footer
{
    padding: 1rem 0;
}

/* Change sub-menu background colour, and move it up and to the right so
it's immediately below the heading in the main menu.
The "left: 9999rem" is to move the sub-menu out of the way when it's hidden
so you can't make it appear by hovering over it.
*/

ul.primary-menu > li ul.sub-menu
{
    background: var(--dropdown-bg-colour);
	top: 100%;
    padding: 0;
    position: absolute;
    left: -9999rem;
}
.primary-menu li.menu-item-has-children:hover > ul,
.primary-menu li.menu-item-has-children.focus > ul
{
    top: 0;
    left: -15rem;
}
.primary-menu > li.menu-item-has-children:hover > ul,
.primary-menu > li.menu-item-has-children.focus > ul
{
    left: -2rem;
}

/* Hide triangle above sub-menu. */

.primary-menu li ul::after
{
    display: none;
}

/* Link behaviour and colours. */

a[href]:link
{
    text-decoration: none;
    color: var(--link-colour);
}
a[href]:visited
{
    text-decoration: none;
    color: var(--link-visited-colour);
}
a[href]:hover
{
    text-decoration: underline;
}
a[href]:active
{
    color: var(--link-active-colour);
}

/* Change colour of mobile menu text. */

.modal-menu > li .ancestor-wrapper a
{
    color: var(--menu-colour);
    text-decoration: none;
}

/* Popups */

#fog_popup
{
    display: none;
    padding: 0.4rem;
    border: 0.1rem solid #88c;
    border-radius: 0.4rem;
    background-color: #f0f0ff;
    color: #000;
    font-size: small;
    font-family: sans-serif;
}

#fog_popup[data-fog-link]
{
    cursor: pointer;
}

#fog_popup *
{
    word-break: normal;
}

[data-fog-toggle]
{
    cursor: pointer;
}

.fog_block_link
{
    cursor: pointer;
}

/* Popup trigger colour */
[data-fog-trigger]
{
    color: #0000ff;
}

[data-fog-trigger].fog_help
{
    cursor: help;
}

[data-fog-goto]
{
    cursor: pointer;
}

.fog_collapse,
.fog_collapse_all,
.fog_expand_all
{
    cursor: pointer;
}

/* Hide widget titles */

.widget-title
{
    display: none;
}

/* Inline images */
p > img
{
    display: inline;
}

/* Style social menu images */
#menu-social-links img,
#menu-socialmedia img
{
    width: 4rem;
}

/* Style social media menu */
.social-icons a[href]
{
    color: white;
    background-color: blue;
}

[class^=fog_icon_] a[href]
{
    background-repeat: no-repeat;
    background-position: left;
    background-size: 100% 100%;
    padding-left: 5px;
    display: block;
    height: 5rem;
    width: 5rem;
    text-indent: -9999px;
}

#wpmem_login,
#wpmem_reg
{
    width: 100%;
}

input[type="submit"].fog_form_submit:hover:not([disabled]),
button[type="submit"].fog_form_submit:hover:not([disabled]),
.fog_button input[type="submit"]:hover:not([disabled]),
.fog_button button:hover:not([disabled]),
#menu-social-links img:hover,
.fog_print_button:hover:not([disabled]),
#wpmem_login input[type="submit"]:hover,
#wpmem_reg input[type="submit"]:hover
{
	transform: scale(1.1);
	text-decoration: none;
    cursor: pointer;
}
input[type="submit"].fog_form_submit:hover,
button[type="submit"].fog_form_submit:hover,
.fog_button input[type="submit"]:hover,
.fog_button button:hover,
#menu-social-links img:hover,
.fog_print_button
{
	text-decoration: none;
}
.fog_button input[type="submit"]:active,
.fog_button button:active
{
    box-shadow:none;
}

.wp-block-file a.wp-block-file__button[href]
{
    text-transform: none;
	text-decoration: none;
    color: #000000;
    background-color: #fdd012;
    border-radius: 2rem;
    border: 1px solid;
    border-color: #707070;
    box-shadow: 5px 5px 10px #a0a0a0;
    padding: 0.5rem;
    font-family: sans-serif;
    font-size: medium;
    font-weight: normal;
}
.wp-block-file a.wp-block-file__button:hover
{
	transform: scale(1.1);
    cursor: pointer;
}

.fog_button .fog_download_button
{
    text-transform: none;
	text-decoration: none;

    color: #000000;
    background-color: #fdd012;
    border-radius: 35px;
    border: 1px solid;
    border-color: #707070;
    box-shadow: 5px 5px 10px #a0a0a0;
    padding: 4px;
    border-style: double;
}
.fog_download_button:hover
{
	transform: scale(1.1);
    cursor: pointer;
}
.fog_download_button a[href],
.wp-block-file a.wp-block-file__button[href]
{
    color: #000000;
	text-decoration: none;
}

.social-icon:hover .social-icon-background
{
    opacity: 1 !important;
}

.social-icon:active .social-icon-background
{
    opacity: 1 !important;
    fill: red !important;
}

.entry-content .wp-block-group.fog_expandable:not(.has-background):not(.alignwide):not(.alignfull),
body.template-full-width [class*="__inner-container"] > .wp-block-group.fog_expandable:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide),
.wp-block-columns:not(.alignwide):not(.alignfull),
.wp-block-group:not(.has-background):not(.alignwide):not(.alignfull)
{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    clear: both;
}

div.wp-block-group__inner-container
{
    display: flow-root;
}

.entry-content > *
{
    margin-bottom: 0.5rem;
}

.wp-block-buttons .wp-block-button
{
    margin-top: 0;
}

.wp-block-column
{
    margin-bottom: 1rem;
}

/*
[data-fog-expanded="yes"].wp-block-group__inner-container
{
    border: 0.1rem solid;
    border-color: #d0d0d0;
    border-radius: 0.6rem;
    padding: 0.5rem;
}
*/

[data-fog-expanded]
{
    border: 0.1rem solid;
    border-color: #c0c0c0;
    border-radius: 0.6rem;
}

[data-fog-expanded] .wp-block-group__inner-container
{
    padding: 0;
    margin: 0.2rem;
}

.wp-block-group__inner-container > .fog_expander:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide)
{
    margin-top: 0;
    border-radius: 0.6rem;
    margin: 0;
    cursor: pointer;
}

.wp-block-group__inner-container > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide)
{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.wp-block-group__inner-container > .has-background:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide)
{
    margin-top: 1rem;
    border-radius: 0.6rem;
}

.wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter)
{
    margin-top: 0;
    margin-bottom: 1rem;
}

p.has-background, .wp-block-group.has-background
{
    padding: 0;
}

@media screen and (min-width: 50rem), print
{
    .fog_indent_both:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide)
    {
        margin-left: 3rem;
        margin-right: 3rem;
        width: auto;
    }

    .fog_indent:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide)
    {
        margin-left: 3rem;
        width: auto;
    }

    .fog_small_indent:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide)
    {
        margin-left: 1.5rem;
        width: auto;
    }
}

#fog_large_image
{
    border: 0.3rem solid;
    border-color: #808080;
    box-shadow: 0.5rem 0.5rem 1.0rem #a0a0a0;
    background-color: #ffffffff;
}

#fog_large_image svg
{
    width: 100%;
}

/* --------------- Post and Print Buttons ----------------------*/

.fog_button_container
{
    display: flex;
}

.fog_post_button
{
    flex-shrink: 0;
}

.fog_button
{
    margin-top: 1rem;
    display: flex;
    align-items: center;
    font-family: sans-serif;
    font-size: medium;
}

.fog_spacer
{
    flex-grow: 1;
    padding: 0;
}

.fog_button input[type="submit"],
.fog_button button,
.fog_button .fog_print_button
{
    text-transform: none;

    color: #000000;
    background-color: #fdd012;
    border-radius: 2rem;
    border: 0.1rem solid #000000;
    border-color: #707070;
    box-shadow: 0.5rem 0.5rem 1.0rem #a0a0a0;
    padding: 0.5rem;
    border-style: single;
}

.fog_button input[type="image"]
{
    padding: 0;
    margin-bottom: 0;
}

.fog_button img
{
    padding: 0;
    margin-bottom: 0;
}

.fog_button .fog_text
{
    margin: 0;
    padding: 0.4rem;
}

/*------------------------ Forms ------------------------------*/

form.fog_form,
fieldset.fog_fieldset,
.fog_grid,
#wpmem_login fieldset,
#wpmem_reg fieldset
{
    display: flex;
    flex-direction: column;
    /* If you change the grid padding, change it in script.js too */
    padding: 1rem;
    margin: 0;
    border-radius: 0.5rem;
}

form.fog_form:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright):not(.is-style-wide),
#wpmem_login fieldset div.button_div
{
    margin: 0;
    max-width: 90%;
}

#wpmem_login fieldset,
#wpmem_reg fieldset
{
    margin-top: 2.0rem;
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (min-width: 50rem), print
{
    body.page .fog_grid
    {
        /* Initially use flex layout. Javascript uses width data from the
           flex layout to control the grid layout. */
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-start;

        grid-template-columns: none;
        grid-auto-columns: auto;
        /* If you change the grid-column-gap, change it in script.js too */
        grid-column-gap: 2rem;
        align-items: start;
    }

    .fog_grid p
    {
        margin-top: 1rem;
    }

    body.page #wpmem_login fieldset,
    body.page #wpmem_reg fieldset
    {
        display: grid;
        grid-template-columns: max-content auto;
        grid-column-gap: 2rem;
    }

    #wpmem_login .button_div
    {
        text-align: left;
    }

    .fog_radio_label
    {
        display: inline;
    }

    div.fog_form_help
    {
        display: block;
    }

    div.block-editor form.fog_form
    {
        flex-direction: row;
        margin-top: 1rem;
    }

    form.fog_form input.fog_form_input,
    form.fog_form input.fog_form_submit,
    form.fog_form button.fog_form_submit,
    form.fog_form textarea
    {
        margin-bottom: 0;
    }

    div.block-editor form.fog_form input.fog_form_input
    {
        margin-left: 1em;
    }

    body.page #wpmem_login label,
    body.page #wpmem_reg label
    {
        grid-column: 1;
    }

    form.fog_form input.fog_form_input,
    form.fog_form textarea,
    #wpmem_login .div_text input,
    #wpmem_reg .div_text input
    {
        margin-top: 0.6rem;
    }

    #wpmem_login .div_text,
    #wpmem_reg .div_text
    {
        width: 100%;
    }

    body.page #wpmem_login fieldset div.button_div
    {
        grid-column: 1 / span 3;
        max-width: 100%;
        margin-bottom: 0;
    }

    body.page #wpmem_login .link-text
    {
        grid-column: 1 / span 3;
        text-align: left;
    }
}

form.fog_form label.fog_form_label,
#wpmem_login label,
#wpmem_reg label
{
    font-family: sans-serif;
    font-size: medium;
    font-weight: bold;
    margin-left: 0 !important;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

.fog_radio_label,
.fog_form_label
{
    font-family: sans-serif;
    font-size: medium;
}

.fog_form_label
{
    font-weight: bold;
}

#wpmem_reg select
{
    width: 100%;
    padding: 0.3rem;
    border: 0.1rem solid #dbdbdb;
    border-radius: 0.5rem;
    color: #2b2b2b;
    margin: 0;
}

.fog_form select
{
    font-size: medium;
    max-width: 25rem;
}

input.fog_form_input,
form.fog_form textarea,
#wpmem_login .div_text input,
#wpmem_reg .div_text input[type="email"],
#wpmem_reg .div_text input[type="password"],
#wpmem_reg .div_text input[type="text"]
{
    padding: 0.3rem;
    font-family: sans-serif;
    font-size: medium;
    border-radius: 0.5rem;
    border: 0.1rem solid black;
    color: black;
}

.fog_form textarea
{
    margin-right: 0;
    height: auto;
    max-width: 100%;
}

input[type="checkbox"].fog_form_input
{
    margin-top: 0.5rem;
    width: var(--checkbox-size);
    min-width: var(--checkbox-size);
    height: var(--checkbox-size);
    padding: 0;
}

input[type="checkbox"].fog_form_input
{
    margin-top: 0.5rem;
    padding: 0;
}
input[type="checkbox"].fog_form_input,
#wpmem_login input[type="checkbox"],
#wpmem_reg input[type="checkbox"]
{
    appearance: none;
    padding: 0;
    border: 0.1rem solid black;
    margin: 1rem 0 0 0;
}
input[type="checkbox"].fog_form_input::before,
#wpmem_login input[type="checkbox"]::before,
#wpmem_reg input[type="checkbox"]::before
{
    content: "✔";
    position: relative;
    font-size: 2rem;
    width: var(--checkbox-size);
    min-width: var(--checkbox-size);
    height: var(--checkbox-size);
    padding: 0;
    visibility: hidden;
    margin: -0.2rem 0 0 -0.0rem;
}
input[type="checkbox"].fog_form_input:checked::before,
#wpmem_login input[type="checkbox"]:checked::before,
#wpmem_reg input[type="checkbox"]:checked::before
{
    visibility: visible;
}

form.fog_form input[type="submit"].fog_form_submit,
form.fog_form button[type="submit"].fog_form_submit,
#wpmem_login input[type="submit"],
#wpmem_reg input[type="submit"]
{
    width: max-content;
    text-transform: none;
    padding: 1rem;
    margin-top: 1rem;
    margin-left: 3rem;
    color: black;
	background-color: #fdd012; 			 /* light orange */
    border-radius: 10rem;
    border: 0.1rem solid #000000;
    box-shadow: 0.5rem 0.5rem 1.0rem #a0a0a0;
}

#wpmem_login .button_div,
#wpmem_reg .button_div
{
    width: max-content;
}

legend.fog_legend,
#wpmem_login legend,
#wpmem_reg legend
{
    width: auto;
    margin-left: 2.0rem;
    padding: 0;
    font-family: sans-serif;
    font-size: medium;
}

div.fog_form_help
{
    font-family: sans-serif;
    font-size: small;
    font-style: italic;
}

.entry-content div.wpmem_msg:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide)
{
    width: max-content;
    padding: 1rem;
    border: 0.1rem solid #888;
    border-radius: 0.5rem;
    font-weight: bold;
    margin: auto;
}

.entry-content div.wpmem_msg.fog_error:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide),
.wpmem_msg.fog_error
{
    background-color: #ffc0cb;
}

div.fog_error
{
    font-family: sans-serif;
    font-size: medium;
    font-weight: bold;
    background-color: #ffdcdc;
}

.entry-content div.wpmem_msg.fog_success:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide),
.wpmem_msg.fog_success
{
    background-color: #ccffcc;
}

.wpmem_msg p
{
    margin: 0;
}

.wp-block-image figcaption
{
    margin-top: 0.5rem;
}

/* Get rid of space above footer */
.footer-top-hidden #site-footer,
.footer-top-visible .footer-nav-widgets-wrapper
{
    margin-top: auto;
}

/* Reduce space around centred image */
figure.aligncenter
{
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Grey-out disabled elements */
.fog_disabled
{
    opacity: 0.5;
}

/* Cursor for disabled inputs */
input[disabled]
{
    cursor: default;
}

@media print
{
    /* Various things not to print */
    .fog_button_container,
    input[type='submit'].fog_form_submit,
    button.fog_form_submit,
    #site-footer
    {
        display: none;
    }
    *
    {
        font-family: sans-serif;
    }
}

/* Use the Wordpress "Tagline" as the main title in the header.
This assumes that there is a "Logo" image, which suppresses display of the
"Site Title". */
.header-titles .site-description
{
    display: block;         /* Display even on mobile */
    font-weight: bold;
    font-size: 2rem;        /* On mobile - overridden below for PC  */
    margin-right: 0;
    margin-left: 0;
}
.header-titles .site-logo
{
    margin-right: 0;
    margin-left: 0;
}

@media (min-width: 50rem)
{
    /* If we have sufficient screen width, put Tagline to right of logo image */
    .header-titles
    {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    body:not(.enable-search-modal) .header-titles-wrapper
    {
        margin-right: 2rem;
        justify-content: space-between;
        /* Leave space for menu */
        max-width: 80%;
    }
    .wp-custom-logo .header-titles
    {
        align-items: center;
    }
    .header-titles .site-logo
    {
        /* Put space between logo and "tagline" */
        /* margin-right: 4rem; */
    }
    .header-titles .site-description
    {
        font-size: 3rem;      /* Use larger font on tablet */
        margin-right: 0;
        margin-left: 1rem;
    }
}
@media (min-width: 1000px)
{
    .header-titles .site-logo
    {
        /* Put space between logo and "tagline" */
        /* margin-right: 6rem; */
    }
    .header-titles .site-description
    {
        margin-right: 0;
        margin-left: 1rem;
        font-size: 4.5rem;      /* Use larger font on PC */
    }
}

.error404 #site-content,
body.error404 main > article:first-of-type
{
    padding-top: 0;
}
.error404 .post-inner
{
    background-color: #ffdcdc;
    padding-bottom: 3rem;
}
.error404 h2
{
    color: black;
}

.fog_block_rows:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide)
{
    margin: 0;
}

.fog_block_rows > .wp-block-group__inner-container
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0;
}

div.fog_block_rows > div.wp-block-group__inner-container > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide)
{
    width: 30rem;
}

/* Override stupid handling of word-breaks in twentytwenty theme */
*,
*::before,
*::after
{
    word-break: normal;
}

/* Classes for clearing floats */
.fog_clear
{
    clear: both;
}
.fog_clear_left
{
    clear: left;
}
.fog_clear_right
{
    clear: right;
}
.fog_clear_none
{
    clear: none;
}

.fog_full_width
{
    width: 100%;
}

html
{
    scroll-behavior: auto;
}

#fog_message
{
    display: block;
    position: absolute;
    width: max-content;
    padding: 1rem;
    border: 0.1rem solid #888;
    border-radius: 0.5rem;
    font-weight: bold;
    margin: auto;
    background-color: #ccffcc;
}

#fog_message.fog_error
{
    background-color: #ffc0cb;
}

figure svg
{
    margin-left: auto;
    margin-right: auto;
}

a[href].fog_heading_link
{
    opacity: 0;
    color: #aaa;
}
p:hover a[href].fog_heading_link,
ul:hover a[href].fog_heading_link,
h2:hover a[href].fog_heading_link,
h3:hover a[href].fog_heading_link,
h4:hover a[href].fog_heading_link,
h5:hover a[href].fog_heading_link,
h6:hover a[href].fog_heading_link 
{
    opacity:1
}

/* Override silly WP theme rule that limits width of right or left aligned
elements to 26rem if window width is less than 480px. */
figure.alignright,
figure.alignleft
{
    max-width: 60%;
}

table.fog_count_table,
table.fog_count_table th,
table.fog_count_table td
{
    border-collapse: collapse;
    border: 0.1rem solid black;
}

table.fog_count_table th,
table.fog_count_table td
{
    text-align: center;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

table.fog_count_table td.fog_count_label
{
    text-align: left;
    padding-left: 2%;
}

table.fog_count_table td.fog_count_count
{
    text-align: right;
    width: 20%;
    padding-right: 5%;
}

table.fog_count_table td.fog_count_rank
{
    text-align: right;
    width: 15%;
    padding-right: 6%;
}

.fog_menu_image img
{
    height: 1.8rem;
    margin-top: -0.3rem;
}

.primary-menu .fog_menu_image .icon::before,
.primary-menu .fog_menu_image .icon::after
{
    display: none;
}