/* ═══════════════════════════════════════════════════
   THEME TOKENS  —  light defaults + dark overrides
   ═══════════════════════════════════════════════════ */
:root {
    --bg: #ffffff;
    --bg-selected: #e8f0fe;
    --surface: #f5f8fa;
    --surface2: #f2f7fb;
    --text: #222;
    --text-muted: #555;
    --text-faint: #888;
    --text-reverse: #eee;
    --accent: #4e92c9;
    --accent-2: #569ad4;
    --heading-color: steelblue;
    --link: #4e92c9;
    --link-visited: #6ea9d8;
    --link-hover: maroon;
    --border: #ddd;
    --border-light: lightgray;
    --header-bg: #333;
    --menu-bg: #535353;
    --sidebar-header-fg: #000;
    --code-inline-bg: rgba(27,31,35,.05);
    --code-inline-fg: #444;
    --blockquote-bg: #f2f7fb;
    --blockquote-border: #569ad4;
    --sponsor-bg: tan;
    --sponsor-fg: #444;
    --table-header-bg: #555;
    --table-header-fg: #eee;
    --table-alt-bg: #eee;
    --comment-inactive-bg: #fff1f1;
    --scrollbar-track: #505050;
    --scrollbar-thumb: #aaa;
    --pager-color: coral;
    --pager-bg: #f8f8f8;
    --footer-fg: #ccc;
    --input-bg: #F5F7FA;
    --input-color: #333;
    --borderbox-top: goldenrod;
    --dialog-header-from: steelblue;
    --dialog-header-fg: #383838;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    /* overrides*/
    /* overrides*/
    --bs-info-bg-subtle: #293954;
    --bs-info-text-emphasis: cornsilk;
    --bs-info-border-subtle: #2b4063;
    --bs-card-cap-bg: #2b4063;  
}

[data-theme="dark"] {
    --bg: #1a1d23;
    --bg-selected: #3a3a3a;
    --surface: #242830;
    --surface2: #1c2230;
    --text: #d4d8df;
    --text-muted: #9aa0aa;
    --text-faint: #606060;
    --text-reverse: #222;
    --accent: #6aaddf;
    --accent-2: #5a9dc9;
    --heading-color: #6aaddf;
    --link: #6aaddf;
    --link-visited: #618aa9;
    --link-hover: #f08080;
    --border: #3a3e47;
    --border-light: #3a3e47;
    --header-bg: #111318;
    --menu-bg: #1a1e26;
    --sidebar-header-fg: #c8cdd5;
    --code-inline-bg: rgba(255,255,255,.08);
    --code-inline-fg: #c9d1d9;
    --blockquote-bg: #1c2535;
    --blockquote-border: #4a8ab8;
    --sponsor-bg: #2a2410;
    --sponsor-fg: #c8a96e;
    --table-header-bg: #2d3542;
    --table-header-fg: #c8cdd5;
    --table-alt-bg: #2a2e38;
    --comment-inactive-bg: #2a1a1a;
    --scrollbar-track: #2a2e38;
    --scrollbar-thumb: #555;
    --pager-color: #e0886a;
    --pager-bg: #2a2e38;
    --footer-fg: #555;
    --input-bg: #2a2e38;
    --input-color: #ddd;
    --borderbox-top: #274b69;
    --dialog-header-from: #1e3a52;
    --dialog-header-fg: #bbb;
    /* overrides*/
    --bs-info-bg-subtle: #293954;
    --bs-info-text-emphasis: cornsilk;
    --bs-info-border-subtle: #2b4063;
    --bs-card-cap-bg: #2b4063;
}


/* BROWSER RESET (based on Eric Meyer's Reset) */
html, body, div, span, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, article, main, nav, ins {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    line-height: inherit;
    vertical-align: baseline;
    font-family: inherit;
    min-width: 0;
}

:focus {
    outline: 0;
}

body {
    background: var(--bg);
    line-height: 1.35;
    color: var(--text);
    transition: background-color 0.25s ease, color 0.25s ease;
}



ol, ul {
    list-style: disc;
    margin: 1.2em 1.5em;
}

li {
    margin: 0.7em 1.5em;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption, th, td {
    font-weight: normal;
    /* text-align: inherit; */
    padding: 4px;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}

blockquote, q {
    quotes: "" "";
    margin: 15px;
}

input, select, textarea {
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
}

p {
    margin-bottom: 1em;
}
/* END BROWSER RESET */


/* BUILT-IN ELEMENT CUSTOMIZATION */
/*, table, td, th, input, textarea, select*/
html, body {
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    height: 100%;
    box-sizing: border-box;
}

   /*::-webkit-scrollbar {
        width: 8px;
        height: 8px;
        background: var(--scrollbar-track);
    }

   ::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb);
    }*/
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  }

main {
    display: block
}


img {
    border: none;
    margin: 0;
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
}

blockquote {
    background: var(--blockquote-bg);
    font-size: 1.02em;
    padding: 10px 20px;
    margin: 1.2em;
    border-left: 9px var(--blockquote-border) solid;
    border-radius: 4px 0 0 4px;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

    blockquote *:first-child {
        margin-top: 0;
    }

    blockquote *:last-child {
        margin-bottom: 0;
    }

hr {
    margin: 12px 0;
    height: 1px;
    border-width: 1px;
    color: var(--border);
}

.post-content a {
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

    .post-content a:hover {
        color: var(--heading-color);
    }

h1, h2, h3, h4, h5, .page-header {
    font-family: Trebuchet,'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: 600;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

#ArticleBody > h2, #ArticleBody > h3, #ArticleBody > h4, #ArticleBody > h5, #ArticleBody > h6 {
    cursor: pointer;
}

h1 {
    font-size: 1.7em;
    padding-bottom: 0.2em;
    color: var(--heading-color);
    border-bottom: 1px solid var(--border);
}

h2 {
    color: var(--heading-color);
    font-size: 1.4em;
}

h3 {
    color: var(--heading-color);
    font-size: 1.28em;
}

h4, h5, h6 {
    color: var(--text-muted);
    font-size: 1.12em;
}

h5, h6 {
    font-size: 1em;
}

.page-header {
    padding-bottom: 0.2em;
    border-bottom: 1px solid #eee;
    margin-bottom: 1em;
}

table {
    width: 100%;
    overflow: auto;
    display: block;
    border-spacing: 0;
    border-collapse: collapse;
    margin: 15px 0;
    border-color: var(--border);
}

td, th {
    border: 1px solid var(--border);
    padding: 6px 13px;
    display: table-cell;
    vertical-align: inherit;
}

th {
    font-weight: bold;
    background: var(--table-header-bg);
    color: var(--table-header-fg);
}

tbody > tr:nth-child(even) {
    background: var(--table-alt-bg);
}

table.blackborder td {
    border-width: 1px;
    border-color: lightgrey;
}

th {
    border-collapse: collapse;
    font-weight: bold;
    text-align: center;
}

a {
    color: var(--link);
}

    a:visited {
        color: var(--link-visited);
    }

    a:hover {
        color: var(--link-hover);
    }

small, .smalltext, .small {
    font-size: 0.85em;
    font-weight: normal;
}

.margin-bottom {
    margin-bottom: 1.5em;
}

.margin-top {
    margin-top: 1.5em;
}

hr {
    color: var(--border);
    background: var(--border);
    border: 0;
    height: 1px;
}

b, strong {
    font-weight: 600;
}

footer {
    margin: 20px 10px;
    height: 80px;
    color: var(--footer-fg);
}

fieldset {
    border: solid 1px darkgrey;
    margin-bottom: 5px;
    margin-top: 15px;
    padding: 10px;
    border-radius: 5px;
}

.fieldsetpadding {
    padding: 15px;
}

legend {
    font-weight: bold;
    background: #DE8079;
    color: White;
    padding: 2px 5px;
    margin: 3px;
    border: solid 1px maroon;
    text-align: left;
}

input[type=text], input[type=password], input[type=email], select, textarea, .form-control {
    color: var(--input-color);
    background-color: var(--input-bg);
    border: solid 1px lightsteelblue;
    box-sizing: border-box;        
    font-size: 1em;
    border-style: solid;
    border-radius: 2px;
    font-weight: 600;

    padding: 5px 10px;
}

    input[type]::placeholder, textarea::placeholder {
        color: var(--text-faint); 
    }
    .form-control:focus {
        color: var(--text) !important;
        background: var(--bg-selected) !important;
    }

    

.clearfix, .clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.hidden {
    display: none;
}

@media(max-width: 767px) {
    .hidable {
        display: none !important;
    }
}

@media(max-width: 500px) {
    .hidable-xs {
        display: none !important;
    }
}

/* flows child elements evenly to fill 100%*/
.responsive-container {
    display: flex;
    flex-direction: row;
    vertical-align: middle;
}

.responsive-container > * {
    margin-right: 0.5em;
    width: 100%;
}

.responsive-container > *:last-child {
    margin-right: 0;
}

.stackable {
}

@media(max-width: 767px) {
    .responsive-container {
        flex-direction: column;
    }

    .responsive-container > * {
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-top: 0.5em;
        width: 100% !important;
    }

    .stackable {
        display: block;
        margin-top: 0.5em;
    }
}


.shown {
    display: block;
}

.number {
    text-align: right;
}

.date {
    width: 75px;
}

.datetime {
    width: 100px;
}

.label, label, .label-left {
    font-weight: bold;
}

.label-left {
    float: left;
    width: 150px;
}

.rightalign {
    float: right;
    text-align: right;
}

.text-success {
    color: limegreen;
}

.text-info {
    color: rgb(48, 136, 209) !important
}

.text-error {
    color: firebrick
}

.text-warning {
    color: gold
}




.blackborder {
    border-style: solid;
    border-width: 2px;
    border-color: #003399;
    background: white;
    text-align: left;
}
/*
   used on the main page left table column
   the default contains the wave background
*/
.categorylistbackground {
    width: 170px;
    /* background: #fff8ad; */
    vertical-align: top;
    padding-left: 4pt;
}

/* block backgrounds for headers etc. */
.menuband, .gridheader, .gridheaderbig, .buttonlinks, .blockheader, .roundedcorner_center {
    color: cornsilk;
    background-color: #003399;
}
/* alternate background color color to offset the background
   used for the category list and banner strips for color
   variety. should be a companion color to the block background
   colors (previous tag
*/
.alternatebackground {
    color: white;
    background-color: #0066cc;
}

/* used for any block tags like headers on tables etc. */
.blockheader {
    font-weight: bold;
}

#toplevel {
    background: var(--header-bg);
    transition: background-color 0.25s ease;
}

.pagemarquee {
    position: relative;
}


.marquee-bottom-menu {
    background: var(--menu-bg);
    background-image: url('../../images/FloralBackground_darkgrey.gif');
    color: #eee;
    font-weight: 500;
    padding: 7px;
    padding-left: 215px;
    transition: background-color 0.25s ease;
}


    .marquee-bottom-menu a, .marquee-bottom-menu a:visited {
        color: #dadada;
    }
        .marquee-bottom-menu a:hover {
            color: #50addf;
        }
@media(max-width: 760px) {
    .marquee-bottom-menu {
        padding-left: 1em !important;
    }
}

.marquee-bottom-sharing {
    float: right;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-right: 10px;
    margin-top: -19px;
    font-size: 35px;
}

/* Theme toggle button */
.theme-toggle-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,0.85);
    font-size: 18px;
    padding: 2px 4px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.theme-toggle-btn:hover {
    color: white;
    opacity: 1;
}

.hero-image {
    width: 100%;
    display: block;
    transition: height 0.7s ease-in-out;
}

.post-container {
    display: flex;
    width: 100%;
    background: var(--surface);
    transition: background-color 0.25s ease;
}

#ArticleBody {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    margin: 5px;
    position: relative;
    overflow: hidden;
}


.post-sidebar {
    flex: none;
    width: 220px;
    background: transparent;
    padding: 1.5em 0 1.2em 0.8em;
    z-index: 1;
    font-size: 1em;
    transition: top 0.5s;
}

    .post-sidebar.hide {
        display: none;
    }

.post-content {
    flex: 1 1 auto;
    width: 100%;
    font-size: 17px;
    min-height: 500px;
    background: var(--bg);
    margin: 15px 0 20px 10px;
    padding: 0 0.7em 2em 1em;
    transition: margin-left 0.5s, background-color 0.25s ease;
    border-radius: 6px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border: 1px solid var(--border-light);
    border-right: none;
}


    .post-content.expand {
        margin-left: 0;
        padding: 2em 3.5em 2em 3.5em;
    }
    @media(max-width: 760px) {
            .post-content.expand {
            padding: 1em 1em 2em .85em;
        }
    }

    .post-content h2 {
        margin-top: 0.8em;        
        padding-top: 0;
    }

/* Images in post content scale to container */
.post-content img, .postcontent img {
    max-width: 100%;
    height: auto;
    display: block;
}

.author-image {
    position: absolute;
    left: 15px;
    bottom: -45px;
    border-radius: 10px;
    border: 5px white solid;
    width: 178px;
    z-index: 1000;
    transition: bottom 0.7s ease-in-out;
}

.blog-name-container {
    font-family: Trebuchet,'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    position: absolute;
    background: #393939;
    opacity: 0.85;
    padding: 0.1em 0.1em 0.2em 0.7em;
    color: cornsilk;
    cursor: pointer;
    left: 170px;
    bottom: 7px;
    width: auto;
    z-index: 1001;
    border-radius: 4px;
    box-shadow: 4px 4px 6px #535353;
    transition: top 0.7s ease-in-out;
}

    .blog-name-container h2 {
        color: white;
        font-size: 2.35em !important;
        padding: 0;
        font-weight: bold;
    }

#SponsorPanel {
    clear: both;
    background-color: var(--sponsor-bg);
    color: var(--sponsor-fg);
    font-size: 0.9em;
    padding: 9px;
    display: flex;
    line-height: 1.45;
    transition: background-color 0.25s ease, color 0.25s ease;
}

    #SponsorPanel .ad-free-msg {
        font-weight: bold;
        flex: none;
        padding-right: 10px;
        margin-left: 208px;
    }

@media(max-width: 767px) {
    #SponsorPanel {
        flex-direction: column;
        padding: 4px 8px;
    }

        #SponsorPanel .ad-free-msg {
            margin-left: inherit;
            margin-top: 5px;
        }
}


.advert {
    margin: 10px auto;
    width: 100%;
}


.author-name {
    font-family: Trebuchet,'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 2em;
    font-weight: 800;
}

.twitter-name a {
    font-size: 1.1em;
    text-decoration: none;
    color: var(--accent);
}
/*.twitter-timeline {
    width: 220px !important;
}*/
/*#twitter-widget-0,#twitter-widget-2
{
    width: 194px;
    padding: 3px;
}*/
.sidebar-header {
    font-family: Trebuchet,'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 1.4em;
    font-weight: bold;
    margin-top: 10px;
    color: var(--sidebar-header-fg);
    transition: color 0.25s ease;
}

.sidebar-group {
    font-size: 0.925em;
    font-weight: normal;
    padding: 1px 0.4em;
    line-height: 1.6;
}

    .sidebar-group a {
        color: var(--accent);
    }

        .sidebar-group a:hover, .sidebar-group a:active {
            color: var(--text-muted);
        }




.contentpanel {
    margin-left: 240px;
    padding: 10px 15px 10px 10px;
    overflow: visible;
}

.borderbox {
    padding: 10px 15px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: linear-gradient(to bottom, var(--borderbox-top) 0, var(--bg) 60px);
    margin: 30px 0 10px;
    min-height: 30px;
}


.share-box {    
    line-height: 0;
    margin: 0;
    padding: 0;
    flex-direction: row;
    justify-content: flex-start;
    align-content: center;
}

.share-buttons {
    display: inline;
    padding: 0;
    margin: 0;
}

.share-box a {    
    display: inline;
    list-style: none;
    padding-right: 0;
    font-size: 35px;
    margin-top: 0.15em;
    margin-bottom: 0;
    color: #258cdf;
    text-decoration: none;
}

    .share-box a .fab {
        font-weight: normal
    }

.share-box .share-label {
    padding-top: 23px;
    padding-right: 11px;
}

.comment {
    margin-bottom: 1.2em;
    padding: 0.5em;
    transition: background-color 0.25s ease;
}

    .comment.inactive {
        opacity: 0.65;
        background: var(--comment-inactive-bg);
    }

.comment-textbox {
    height: 16em;
}
.comment-panel-left {
    width: 120px;
    line-height: 1.4;
    float: left;
}

    .comment-panel-left small {
        font-size: 0.7em;
    }

.comment-panel-right {
    min-height: 8.5em;
    margin: 0;
    margin-left: 130px;
    padding: 0 1em 0 0.9em;
    border-left: 1px solid var(--border-light);
}

.post-list-byline {
    font-style: italic;
    margin: 5px 0 10px 0;
    font-size: 0.8em;
}

@media(max-width: 550px) {
    .comment-panel-left {
        width: 120px;
        float: none;
        padding-left: 10px;
        margin-bottom: 10px;
        border-right: 1px solid var(--border-light);
    }

    .comment-panel-right {
        margin-left: 0;
    }
}

.commentheader, .commentheader:visited {
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: none;
    color: var(--accent);
}

    .commentheader:hover {
        text-decoration: underline;
        color: var(--link-hover);
    }

.commentauthor {
    background: url(images/lightorangegradient.png) repeat-x top;
}

[data-theme="dark"] .commentauthor {
    background: var(--surface2);
}

.byline {
    font-size: 0.8em;
    color: var(--text-muted);
}

.commenttime {
    background: transparent url(images/time.gif) no-repeat;
    padding-left: 16px;
    margin-left: 5px;
}

.commentcount {
    background: transparent url(images/comment.gif) no-repeat;
    padding-left: 20px;
    min-height: 18px;
    font-size: 8pt;
    float: right;
}

.postcontent {
    line-height: 1.6;
}


/* used on the category list as a standard link */
.menucolumn {
    padding: 5px;
    border-bottom: solid 1px white;
}

.menulink {
    color: black;
    font-size: 8pt;
    font-weight: normal;
    text-decoration: none;
    display: block;
    text-align: left;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 5px;
    margin-right: 5px;
    border: solid 1px transparent;
    border-radius: 4px;
}

    .menulink:visited {
        color: black;
    }

    .menulink:hover {
        color: navy;
        text-decoration: none;
        font-weight: normal;
        background: white url(images/menuhighlight.png) repeat-x;
        border: solid 1px darkgray;
    }

.menuband {
    font-weight: bold;
    height: 20px;
    padding-top: 5px;
    text-align: center;
}

.buttonlinks {
    font-weight: bold;
    text-decoration: none;
    display: block;
    padding: 2px;
}

    .buttonlinks:visited {
        color: cornsilk;
    }

    .buttonlinks:hover {
        color: navy;
        text-decoration: none;
        background: white;
    }

.submitbutton {
    cursor: pointer;
    padding: 7px 14px;
    border-radius: 4px;
    min-width: 150px;
    font-weight: bold;
    background: #0044cc;
    border: solid 1px;
    border-color: #0044cc;
    box-shadow: 2px 2px 4px #888888;
    color: White;
    transition: opacity linear 0.4s, box-shadow linear 0.4s;
    -webkit-appearance: none;
}

    .submitbutton:hover, .submitbutton:active {
        opacity: 0.85;
        box-shadow: 1px 1px 2px #0E0D0D;
    }

.smallbutton {
    border: 1px solid orange;
    padding: 4px 8px;
    min-width: 90px;
    font-size: 8pt;
    color: navy;
    background: url(images/dialogselection.png) !important;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 1px 3px #0E0D0D;
}

    .smallbutton:hover, .smallbutton:active {
        background-position: 0 -6px !important;
        box-shadow: 1px 1px 2px #0E0D0D;
        opacity: 0.85;
        -webkit-transition: opacity linear 0.2s, box-shadow linear 0.2s;
        -moz-transition: opacity linear 0.2s, box-shadow linear 0.2s;
        -o-transition: opacity linear 0.2s, box-shadow linear 0.2s;
        transition: opacity linear 0.2s, box-shadow linear 0.2s;
    }

.gradienthighlight {
    background: white url(images/horizontalgradient.gif) repeat-y;
}

.gridheader, .gridheaderbig {
    height: 18px;
    padding: 4px;
    background: #003399 url(images/headergradient.png) repeat-x;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
}

.gridheaderleft {
    text-align: left;
}

.gridheaderbig {
    background: url(images/headergradient.gif) repeat-x bottom;
}

.gridnormal {
    background-color: #eeeeee;
}

.gridalternate {
    background-color: #b5c7d6;
}

.gridhighlight {
    background-color: #ffcc66;
    cursor: pointer;
}

.errormessage {
    font-weight: bold !important;
    color: maroon !important;
}

.errordisplay {
    font-weight: normal;
    color: maroon !important;
    background-color: khaki !important;
    border: solid 2px maroon !important;
    margin: 7px 0;
    padding: 10px;
    box-shadow: 3px 3px 5px #535353;
    border-radius: 4px;
}

.errordisplay-warning-icon, .errordisplay-info-icon {
    width: 16px;
    height: 16px;
    float: left;
    margin: 0 5px;
    background-image: url(images/warning.gif);
}

.errordisplay-info-icon {
    background-image: url(images/info.gif);
}

.errordisplay-text {
    margin-left: 40px;
    font-weight: bold;
}

.errordisplay hr {
    background: maroon;
}

.errorhighlight {
    background-color: #FCEBF2 !important;
    border-color: Red !important;
    border-width: 2px !important;
}

.containercontent {
    padding: 20px;
}

.contentcontainer {
    margin: 15px;
    padding: 20px;
    background: white;
    border-top: solid 1px silver;
    border-left: solid 1px silver;
    border-right: solid 2px #535353;
    border-bottom: solid 2px #535353;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -opera-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: #535353 2px 2px 3px;
    -webkit-box-shadow: #535353 2px 2px 3px;
    box-shadow: 3px 3px 5px #535353;
}

.boxshadow {
    -moz-box-shadow: 3px 3px 5px #535353;
    -webkit-box-shadow: 3px 3px 5px #535353;
    box-shadow: 2px 3px 6px #535353;
}

.roundbox {
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px 6px 6px 6px;
}

.roundbox-top {
    -moz-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
}

.roundbox-bottom {
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}

.dialog {
    background: White;
    overflow: hidden;
    border: solid 1px steelblue;
    -moz-border-radius: 6px 6px 4px 4px;
    -webkit-border-radius: 6px 6px 4px 4px;
    border-radius: 6px 6px 3px 3px;
}

.dialog-header {
    background-image: url(images/headergradient.png);
    background-repeat: repeat-x;
    text-align: left;
    color: cornsilk;
    padding: 5px;
    padding-left: 10px;
    font-size: 1.02em;
    font-weight: bold;
    position: relative;
    -moz-border-radius: 4px 4px 0px 0px;
    -webkit-border-radius: 4px 4px 0px 0px;
    border-radius: 4px 4px 0px 0px;
}

.dialog-top {
    -moz-border-radius: 4px 4px 0px 0px;
    -webkit-border-radius: 4px 4px 0px 0px;
    border-radius: 4px 4px 0px 0px;
}

.dialog-bottom {
    -moz-border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
}

.dialog-content {
    padding: 15px;
    text-align: left;
}

.dialog-statusbar, .dialog-toolbar {
    background: #eeeeee;
    background-image: url(images/dialogstrip.png);
    background-repeat: repeat-x;
    padding: 5px;
    padding-left: 10px;
    border-top: solid 1px silver;
    border-bottom: solid 1px silver;
    font-size: 0.8em;
}

.dialog-statusbar {
    -moz-border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    padding-right: 10px;
}

.toolbarcontainer {
    background: #eeeeee;
    background-image: url(images/dialogstrip.png);
    background-repeat: repeat-x;
    border: solid 1px silver;
    vertical-align: top;
    padding: 5px;
}

.statusbar {
    position: fixed;
    bottom: 5px;
    left: 0px;
    right: 0px;
    height: 16px;
    padding: 5px;
    background: black;
    color: white;
    border: solid 1px lightgray;
    opacity: .70;
    filter: alpha(opacity="70");
    z-index: 200;
    overflow: hidden;
    overflow-y: auto;
}

.statusbarhighlight {
    font-weight: bold;
    background-color: khaki;
    color: Maroon;
    border: solid 1px silver;
}

.statusbarclose {
    position: absolute;
    right: 10px;
    top: 2px;
    color: red;
    font-size: 12pt;
    font-weight: bold;
    cursor: pointer;
}

.hoverbutton {
    text-decoration: none;
    padding: 6px;
    font-size: 8pt;
    border: solid 1px transparent;
    cursor: hand;
    border-radius: 4px;
}

    .hoverbutton img {
        vertical-align: text-bottom;
    }

    .hoverbutton:hover {
        background: white url('images/dialoghighlight.png');
        border: outset 1px silver;
        cursor: pointer;
    }

    .hoverbutton a {
        text-decoration: none;
    }

.closebox {
    position: absolute;
    right: 2px;
    top: 2px;
    background-image: url(images/close.gif);
    background-repeat: no-repeat;
    width: 14px;
    height: 14px;
    cursor: pointer;
    opacity: 0.60;
    filter: alpha(opacity="80");
}

    .closebox:hover {
        opacity: 1;
        filter: alpha(opacity="95");
    }


.tabbutton, .tabbutton-selected, .tabbutton-disabled {
    float: left;
    background: #B0C4DE;
    color: Black;
    cursor: pointer;
    text-align: center;
    min-width: 80px;
    padding: 7px;
    margin-right: 3px;
    margin-top: 2px;
    border-radius: 6px 6px 0 0;
    box-shadow: 3px 0px 4px #535353;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.tabbutton-selected {
    font-weight: bold;
    background: #4062A7;
    color: White;
    cursor: default;
}

.tabbutton:hover {
    background: #3366CC;
    color: white;
}

.tabbutton-disabled {
    cursor: default;
    color: #535353;
    opacity: 0.60;
    filter: alpha(opacity="60");
}

.notebox {
    background: lightsteelblue;
    padding: 7px;
    border: solid 1px navy;
    margin: 5px 40px 15px 30px;
    font-size: 0.8em;
    border-radius: 4px;
    box-shadow: #535353 2px 2px 3px;
}

.busy {
    background-image: url(images/loading_small.gif);
    background-repeat: no-repeat;
    background-position: right;
}

.smallprogress, .smallprogress-right {
    width: 16px;
    height: 16px;
    background-image: url(images/loading_small.gif);
    background-repeat: no-repeat;
    display: none;
}

.smallprogress-right {
    float: right
}

.statusbar {
    position: fixed;
    bottom: 5px;
    left: 0;
    right: 0;
    height: 16px;
    padding: 5px;
    background: black;
    color: white;
    border: solid 1px lightgray;
    opacity: .70;
    filter: alpha(opacity="70");
    z-index: 200;
    overflow: hidden;
    overflow-y: auto;
}

.statusbarhighlight {
    font-weight: bold;
    background-color: khaki;
    color: Maroon;
    border: solid 1px silver;
}

.statusbarclose {
    position: absolute;
    right: 10px;
    top: 2px;
    color: red;
    font-size: 12pt;
    font-weight: bold;
    cursor: pointer;
}

pre {
    overflow-x: auto;
    background: #333;
    color: #eee;
    line-height: 1.45;
    margin: 10px 0 !important;
    font-family: monospace;
    font-size: 0.82em !important;
    border-radius: 4px;
}



/* legacy */
.comment pre, blockquote pre {
    margin: 0 !important;
}
/* legacy */
pre[style="MARGIN: 0px"], pre[style="margin: 0px"] {
    background: transparent !important;
    color: #333;
    font-size: 1.1em !important;
}
/* legacy */
pre.code span {
    color: #eee !important;
}

code {
    background: var(--code-inline-bg);
    padding: .2em .4em;
    color: var(--code-inline-fg);
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.9em;
    font-family: consolas,monospace;
    transition: background-color 0.25s ease, color 0.25s ease;
}

pre > code, pre.code, pre.csharpcode {
    color: #f5f5f5 !important;
    font-weight: normal;
    padding: 0.95em !important;
    background: #303030 !important; /* Old browsers */
    display: block;
}

    pre > code::-webkit-scrollbar {
        width: 8px;
        height: 8px;
        background: #777;
    }

    pre > code::-webkit-scrollbar-thumb {
        background: #eee;
    }



/* Book Display */
.authorimage {
    box-shadow: 2px 2px 3px #535353;
    border-radius: 4px;
    text-align: center;
}

#divBookHighlight img {
    box-shadow: 2px 2px 3px #535353;
    border-radius: 4px;
}

#SideBar {
    position: absolute;
    top: 898px;
    left: 10px;
    width: 200px;
    overflow: hidden;
    overflow-y: hidden;
    border-radius: 6px;
    box-shadow: #535353 2px 2px 3px;
}

.sidebarheader {
    padding: 4px;
    background: #003399 url(images/headergradient.png) repeat-x;
    text-align: center;
    font-size: 0.8em;
    font-weight: bold;
    text-decoration: none;
    border-radius: 0 4px 4px 0;
    box-shadow: 2px 2px 3px #535353;
    color: White;
    margin: 0 5px 0 0;
}

#divBookHighlights {
}

#divBookHighlight {
    margin-bottom: 20px;
}

    #divBookHighlight img {
        margin-bottom: 3px;
    }

#divCommentPreview {
    border: solid 1px silver;
    padding: 10px;
    background-color: White;
    background-repeat: repeat-x;
    margin-top: 5px;
}

#SocialLinks {
    text-align: right;
}

.twitter-share-button {
    width: 85px;
}

.topbannerad {
    margin: 10px auto 20px;
    text-align: center;
}

.inlinead {
    float: left;
    padding: 5px 10px 5px 0;
}

@media (max-width: 700px ) {
    .hide-small {
        display: none;
    }

    #SideBar {
        display: none;
    }

    .contentpanel {
        margin-left: 1px;
        padding: 1.5em;
    }

    .weblogbanner {
        font-size: 8pt;
    }

    #SubTitle {
        display: none;
    }


    SocialLinks {
        top: 78px;
    }
}

@media (max-width: 400px ) {
    /*html, body { font-size: 0.95em; }*/
    .topbannerad {
        margin: 10px 0;
        margin-left: -8px;
    }

    pre {
        margin: 10px 0 !important;
    }

}


@media(max-width: 767px) {
    body {
        font-size: 16px;
    }
    .author-image {
        left: 0.5em;
        bottom: 0;
        width: 100px;
    }


    .blog-name-container {
        left: 7.5em;
        bottom: 8px;
        font-size: 0.73em;
        width: auto;
        padding: 4px 6px;
    }

    .hero-image {
        width: 100%;
    }

    .pagemarquee {
    }

    .post-container {
        margin-top: 10px;
    }

    .post-content {
        margin: 0;
        border: none;
    }

    .post-sidebar {
        display: none;
        width: 0;
    }
    
    #ArticleBody {
    }
}

@media(min-width: 767px) {
    .pagemarquee {
        height: auto
    }

    .post-sidebar {
        top: 590px;
    }

    .post-content {
        font-size: 1.13em;
        line-height: 1.65;
    }

    #Article {
        padding-left: 0.7em;
    }
}


.posthits-page {
    margin-top: 1rem;
}

.posthits-header,
.posthits-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.posthits-header-top {
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.posthits-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.posthits-actions .btn {
    white-space: nowrap;
}

.posthits-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-weight: 600;
}

.posthits-section-count {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.posthits-table-wrap {
    overflow-x: auto;
}

.posthits-table {
    width: 100%;
    margin-bottom: 0;
}

.posthits-table thead th {
    background: var(--surface2);
    color: var(--text);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    white-space: nowrap;
}

.posthits-table tbody td {
    vertical-align: top;
    border-color: var(--border);
    padding: 0.9rem 1rem;
}

.posthits-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--surface2) 75%, transparent);
}

.posthits-period {
    font-weight: 600;
}

.posthits-number {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--heading-color);
}

.posthits-link {
    color: var(--link);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.posthits-link:hover {
    color: var(--link-hover);
}

.posthits-title {
    margin-top: 0.35rem;
    color: var(--text-muted);
    font-size: 0.92rem;
}

.referrers-table td:nth-child(1),
.referrers-table td:nth-child(2) {
    min-width: 280px;
}

.posthits-hits-column {
    width: 120px;
    text-align: right;
    white-space: nowrap;
}

.posthits-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.25rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--heading-color);
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .posthits-actions {
        width: 100%;
        flex-direction: column;
    }

    .posthits-actions .btn {
        width: 100%;
    }

    .posthits-table thead {
        display: none;
    }

    .posthits-table,
    .posthits-table tbody,
    .posthits-table tr,
    .posthits-table td {
        display: block;
        width: 100%;
    }

    .posthits-table tbody tr {
        padding: 0.85rem 1rem;
        border-bottom: 1px solid var(--border);
    }

    .posthits-table tbody td {
        padding: 0.35rem 0;
        border: 0;
    }

    .posthits-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.15rem;
        color: var(--text-muted);
        font-size: 0.82rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .posthits-hits-column {
        width: auto;
        text-align: left;
    }
}

@media(min-width: 1400px) {
    #toplevel {
        max-width: 1600px;
        margin: 0 auto;
        color: var(--text);
    }

    .post-content {
        font-size: 1.2em;
        line-height: 1.7;
    }

    #page-wrapper {
        background: linear-gradient(to bottom, #333 0, #444 100%) !important;
        color: #eee;
    }

    [data-theme="dark"] #page-wrapper {
        background: linear-gradient(to bottom, #0e1015 0, #111318 100%) !important;
    }
}

@media print {
    html, body {
        font-family: "Segoe UI Emoji", "Apple Color Emoji", -apple-system, BlinkMacSystemFont,"Segoe UI", Helvetica, Helvetica, Arial, sans-serif;
        text-rendering: optimizeLegibility;
        height: auto;
    }

    .banner, #SponsorPanel, .post-sidebar, .marquee-bottom-menu, .share-box, .theme-toggle-btn {
        display: none;
    }

    pre {
        white-space: pre-wrap;
        word-break: normal;
        word-wrap: normal;
    }

        pre > code {
            white-space: pre-wrap;
            padding: 1em !important;
            /* match highlightjs theme colors - must override for <code> override */
            background: #1E1E1E;
            color: #DCDCDC;
        }

    /* keep paragraphs together */
    p, li, ul, code, pre {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* keep headers and content together */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        break-after: avoid;
    }
}