/*
 Variant Light Design.
 */
:root {
    color-scheme: light dark;
    --body-background-color: #f4f4f4;
    --body-color: #2F469B;
    --header-background-color: #fff;
    --header-border-color: #dadada;
    --h1-color: #999;
    --h1-a-color: #2b669e;
    --h1-hover-color: #777;
    --h1-text-shadow-color: #ccc;
    --slogan-color: #467aa7;
    --topmenu-background-color: #f0f0f0;
    --topmenu-border-color: #dadada;
    --topmenu-p-color:#777;
    --topmenu-a-margin-color:#555;
    --topmenu-a-hover-color:#444;
    --topmenu-a-hover-background-color:#e8e8e8;
    --topmenu-a-hover-textshadow-color:#ccc;
    --topmenu-a-active-color:dark-blue;
    --topmenu-a-active-background-color:#dadada;
    --topmenu-a-active-text-shadow-color:#ccc;
    --topmenu-a-active-hover-color:light-blue;
    --a-color:#467aa7;
    --a-border-bottom-color:#dadada;
    --a-hover-border-bottom-color:#467aa7;
    --h2-color:#909090;
    --h2-border-bottom-color:#dadada;
    --h3-color:#909090;
    --h3-border-bottom-color:#dadada;
    --sidebar-color:#777;
    --sidebar-h2-border-bottom-color:#dadada;
    --sidebar-ul-sidemenu-border-top-color:#dadada;
    --sidebar-ul-sidemenu-li-a-color:#777;
    --sidebar-ul-sidemenu-li-a-hover-color:#a74646;
    --sidebar-ul-sidemenu-li-a-hover-border-bottom-color:#dadada;
    --sidebar-ul-sidemenu-li-a-active-color:#467aa7;
    --post-border-color:#dadada;
    --post-border-background-color:#fff;
    --postmeta-color:#666;
    --postmeta-border-top-color:#dadada;
    --footer-background-color:#f8f8f8;
    --footer-color:#777;
    --footer-border-bottom-color:#dadada;
    --footer-border-top-color:#dadada;
    --footer-a-color:#777;
    --footer-a-border-bottom-color:#888;
    --headerimage-border-color:#dadada;
}

@media (prefers-color-scheme: dark) {
    :root {
        --body-background-color: #0b0b0b;
        --body-color: #ffffff;
        --header-background-color: #000;
        --header-border-color: #252525;
        --h1-color: #999;
        --h1-a-color: #2b669e;
        --h1-hover-color: #777;
        --h1-text-shadow-color: #444;
        --slogan-color: #467aa7;
        --topmenu-background-color: #f0f0f0;
        --topmenu-border-color: #252525;
        --topmenu-p-color:#888;
        --topmenu-a-margin-color:#555;
        --topmenu-a-hover-color:#444;
        --topmenu-a-hover-background-color:#e8e8e8;
        --topmenu-a-hover-textshadow-color:#444;
        --topmenu-a-active-color:light-blue;
        --topmenu-a-active-background-color:#525252;
        --topmenu-a-active-text-shadow-color:#444;
        --topmenu-a-active-hover-color:dark-blue;
        --a-color:#a2bed6;
        --a-border-bottom-color:#525252;
        --a-hover-border-bottom-color:#467aa7;
        --h2-color:#eaeaea;
        --h2-border-bottom-color:#525252;
        --h3-color:#eaeaea;
        --h3-border-bottom-color:#525252;
        --sidebar-color:#eaeaea;
        --sidebar-h2-border-bottom-color:#eaeaea;
        --sidebar-ul-sidemenu-border-top-color:#eaeaea;
        --sidebar-ul-sidemenu-li-a-color:#eaeaea;
        --sidebar-ul-sidemenu-li-a-hover-color:#a74646;
        --sidebar-ul-sidemenu-li-a-hover-border-bottom-color:#525252;
        --sidebar-ul-sidemenu-li-a-active-color:#a2bed6;
        --post-border-color:#525252;
        --post-border-background-color:#000;
        --postmeta-color:#AAA;
        --postmeta-border-top-color:#525252;
        --footer-background-color:#080808;
        --footer-color:#aaa;
        --footer-border-bottom-color:#525252;
        --footer-border-top-color:#525252;
        --footer-a-color:#777;
        --footer-a-border-bottom-color:#888;
        --headerimage-border-color:#525252;
    }

    img {
        opacity: 1;
        transition: opacity .5s ease-in-out;
    }
    img:hover {
        opacity: 1;
    }

}

/* Main containers */
body {
    padding: 0;
    margin: 0;
    font: 84% Georgia, Times New Roman, serif;
    font-family: system-ui;
    background-color: var(--body-background-color);
    color: var(--body-color);
    text-align: center;
    line-height: 1.5em;
}

#wrap {
    width: 920px;
    text-align: left;
    margin: 0 auto;
    padding: 0 0 0 0;
}

/* Header */
#header {
    width: 100%;
    margin: 0;
    background-color: var(--header-background-color);
    border-top: 1px solid var(--header-border-color);
    border-bottom: 1px solid var(--header-border-color);
}

#title {
    width: 920px;
    padding: 20px 0;
    margin: 0 auto;
    text-align: left;
}

h1 {
    font: Verdana, Arial, Helvetica, sans-serif;
    margin: auto 0 auto 17px;
    padding: 0px;
    font-size: 2.3em;
    font-weight: 1000;
    color: var(--h1-color);
    line-height: 1em;
    text-shadow: var(--h1-text-shadow-color) 3px 3px 9px;
}

h1 a {
    color: var(--h1-a-color);
    font-weight: 400;
    text-decoration: none;
    border: 0;
}

h1 a:hover {
    color: var(--h1-hover-color);
    text-decoration: none;
    border: 0;
}

.slogan {
    color: var(--slogan-color);
    font-size: 1.4em;
    margin: 0;
    padding: 0;
}

* /

/* Top menu */
#topmenu {
    text-align: center;
    margin: 0;
    width: 100%;
    background-color: var(--topmenu-background-color);
    border-bottom: 1px solid var(--topmenu-border-color);
}

#topmenu p {
    width: 920px;
    text-align: left;
    font-size: 1.2em;
    line-height: 2.2em;
    color: var(--topmenu-p-color);
    margin: 0 auto;
    overflow: hidden;
}

#topmenu a {
    padding: 12px 21px 9px 21px;
    font-weight: 400;
    margin: 0 20px 0px color: var(--topmenu-a-margin-color);
    border: 0;
}

#topmenu a:hover {
    color: var(--topmenu-a-hover-color);
    background-color: var(--topmenu-a-hover-background-color);
    text-decoration: none;
    text-shadow: var(--topmenu-a-hover-text-shadow-color) 1px 1px 3px;
    padding: 12px 21px 9px 21px;
}

#topmenu a.active {
    color: var(--topmenu-a-active-color);
    background-color: var(--topmenu-a-active-background-color);
    text-shadow: var(--topmenu-a-active-text-shadow-color) 1px 1px 3px;
    padding: 12px 21px 9px 21px;
}

#topmenu a.active:hover {
    color: var(--topmenu-a-active-hover-color);
    padding: 12px 21px 9px 21px;
}

/* HTML Tags */
a {
    text-decoration: none;
    font-weight: 400;
    color: var(--a-color);
    border-bottom: 1px solid var(--a-border-bottom-color);
}

a:hover {
    text-decoration: none;
    border-bottom: 1px solid var(--a-hover-border-bottom-color);
}

a img {
    border: 0;
}

h2 {
    margin: 0 0 18px 0;
    padding: 0 0 7px;
    color: var(--h2-color);
    font-size: 1.7em;
    font-weight: 400;
    border-bottom: 1px solid var(--h2-border-bottom-color);
}

h2 a {
    font-weight: 400;
}

h3 {
    font-size: 1.5em;
    font-weight: 400;
    margin: 0 0 10px 0;
    padding: 2px 0;
    color: var(--h3-color);
    font-size: 1.2em;
    font-weight: 400;
    border-bottom: 1px solid var(--h3-border-bottom-color);
}

p {
    margin: 0 0 18px 0;
}

ul {
    margin: 0 0 18px 20px;
    padding: 0;
}

li {
    margin: 0;
    padding: 0 0 0 5px;
}

/* Sidebars */
#sidebar {
    width: 200px;
    float: right;
    margin: 0;
    padding: 0;
    color: var(--sidebar-color);
}

#sidebar h2 {
    font-size: 1.3em;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--sidebar-h2-border-bottom-color);
    margin-bottom: 5px;
}

#sidebar ul {
    list-style: none;
    margin: 0 0 15px 0;
}

#sidebar ul ul {
    list-style: none;
    margin: 0 0 0 15px;
    font-size: 0.9em;
}

#sidebar li {
    padding: 0;
    margin: 0;
}

#sidebar ul.sidemenu {
    width: 200px;
    padding: 0;
    margin: 0 0 20px 0;
    border-top: 1px solid var(--sidebar-ul-sidemenu-border-top-color);
}

#sidebar ul.sidemenu li a {
    color: var(--sidebar-ul-sidemenu-li-a-color);
    display: block;
    padding: 5px 0 4px;
    margin: 0;
    font-size: 1.3em;
}

#sidebar ul.sidemenu li a:hover {
    color: var(--sidebar-ul-sidemenu-li-a-hover-color);
    text-decoration: none;
    border-bottom: 1px solid var(--sidebar-ul-sidemenu-li-a-hover-border-bottom-color);
}

#sidebar ul.sidemenu li a.active {
    color: var(--sidebar-ul-sidemenu-li-a-active-color);
}

#sidebar ul.sidemenu ul {
    width: 180px;
    padding: 0;
    margin: 0 0 0 20px;
    border-top: 0;
}

#sidebar ul.sidemenu ul li a {
    padding: 2px 0;
    margin: 0;
    font-size: 1.1em;
}

/* Content area */
#content {
    text-align: left;
    padding: 0;
    margin: 0 0 15px 0;
    width: 680px;
}

#content img {
    margin: 5px 0;
}

#feature {
    margin: 0 0 20px 0;
}

.post {
    margin: 0 0 50px 0;
    padding: 15px 20px 0 20px;
    width: 660px;
    line-height: 1.7em;
    border: 1px solid var(--post-border-color);
    background-color: var(--post-border-background-color);
}

.postmeta {
    text-align: right;
    color: var(--postmeta-color);
    padding: 10px 0 0;
    border-top: 1px dotted var(--postmeta-border-top-color);
    font-size: 0.9em;
}

/* Footer */
#footer {
    clear: both;
    width: 100%;
    background-color: var(--footer-background-color);
    font-size: 0.9em;
    line-height: 1.8em;
    color: var(--footer-color);
    font-weight: 400;
    margin: 20px 0;
    border-bottom: 1px solid var(--footer-border-bottom-color);
    border-top: 1px solid var(--footer-border-top-color);
}

#footer p {
    width: 920px;
    margin: 10px auto;
    text-align: left;
    visibility: hidden;
}

#footer p:before {
    visibility: visible;
    width: 920px;
    margin: 10px auto;
    text-align: left;
    content:'Copyright © 2021 frostmd LLP';
}

#footer a {
    color: var(--footer-a-color);
    font-weight: 400;
    text-decoration: none;
    border-bottom: 1px dotted var(--footer-a-border-bottom-color);
}

/* Various classes */
.headerimage {
    width: 720px;
    height: 120px;
    overflow: hidden;
    border: 1px solid var(--headerimage-border-color);
    margin-bottom: 20px;
}

.centered {
    text-align: center;
}

.hide {
    display: none;
}

.clear {
    clear: both;
    visibility: hidden;
}