@charset "utf-8";
/* CSS Document */

.hidden {
    display:none;
}


:root { /* Pink Theme */
    --bodyBackground:#FFF5F5;

    --dialog-backdrop-background:;
    --dialog-background: #edbb9d;
    --dialog-body-background: #FDD;
    --dialog-header-background: linear-gradient(#FFBAE4, #ffecec, #fff, #fff, #fff, #ffecec, #FFBAE4);

    --documentColor: #000000;
    --documentBackground:url(/images/alice-p.jpg) top right no-repeat;
    --documentBackgroundColor: #FDD;
    --documentFontFamily: 'Ubuntu', 'Liberation Sans', sans-serif;

    --documentLinkColor:#d437d9;
    --documentLinkColorActive:#A7A;
    --documentLinkColorHover:#FFF;
    --documentLinkColorVisired: #A7A;

    --document-title-div-background:url(/images/GC-p.jpg) center / 100% auto no-repeat;
    --document-title-div-height:120px;
    --document-title-div-liBefore-content:"💗";
    --document-title-div-width:auto;

    --article:;
    --articleBackground: transparent;
    --articleForeground: black;
    --article-header-background: linear-gradient(#FFADAD33, #FFE0C933, #FFE4D033, #FFE4D033, #FFE0C933, #FFADAD33);
    --article-header-border: 1px solid #FFADAD33;
    --article-header-text-color:#df354b;

    --aside:;
    --footer:;

    --header:;
    --header-divDisplay:block;

    --display-stealthy-block:block;
    --display-stealthy-block-alt:none;
    --display-stealthy-inline:inline;
    --display-stealthy-inline-alt:none;

    --form_inputBackgound: white;
    --form_inputForegound: black;

    --main:;
    --mainBackground:;

    --menu-li-aTextDecoration:underline;

    --navBackground: #EEE
        --navBorder: 1px solid #DDD;
    --navBorderRadius: 2px 2px 0 0;

    --nav_label_cb-toggleBackground:;
    --nav_label_cb-toggleBackground-checked:#9b2020;

    --nav_menuAnimationName: openNavMenuDownward;
    --nav_menuAnimationName2: openNavSubMenuDownward;
    --nav_menuAnimationDuration:0.75s;

    --nav_menuBackground: #f6fff8;
    --nav_menuBorder: solid 1px blue;
    --nav_menuColor: #000099;
    --nav_menuFontFamily: 'New Times Roman', serif;
    --nav_menuFontWeight: bold;
    --nav_menuTextShadow:;

    --nav_menu_liBorder:1px solid transparent;
    --nav_menu_liBorderRadius:3px;
    --nav_menu_liTextShadow:;
    --nav_menu_li-hoverBackground: pink;
    --nav_menu_li-hoverBorder: 1px solid #f752ac;

    --nav_menu_li_menuBorder: ridge 3px #f752ac;
    --nav_menu_li_menuBorderRadius: 5px;
    --nav_menu_li_menuBoxShadow: 2px 2px 1px 1px grey;
    --nav_menu_li_menuFontFamily: 'Ubuntu', 'Liberation Sans', sans-serif;
    --nav_menu_li_menuFontWeight: normal;

    --separator-background:url("/images/separator.gif") repeat-x;
    --separator-div-height:25px;

    --span-logo-afterContent:"📡";
    --span-logo-beforeContent:" GC";
    --span-logoTextShadow:2px 2px 3px darkgrey;

}


@media (prefers-color-scheme: dark) {

    --dialog-backdrop-background:;
    --dialog-background: #515151;
    --dialog-body-background: darkgrey;
    --dialog-header-background: linear-gradient(#DDF, #ececff, #ffffff, #ffffff, #ffffff, #ececff, #DDF);

    --documentColor:grey;
    --documentBackground: radial-gradient(at 8% 30px, #000055 10px, #00004400 30%, #000022 125%);
    --documentBackgroundColor: black;
    --documentFontFamily: 'Ubuntu', 'Liberation Sans', sans-serif;

    --documentLinkColor:#0066cc;
    --documentLinkColorActive:#A7A;
    --documentLinkColorHover:grey;
    --documentLinkColorVisired: #A7A;

    --document-title-div-background:url(/images/GC.jpg) center / 100% auto no-repeat;
    --document-title-div-height:120px;
    --document-title-div-liBefore-content:"💗";

    --aColor:#00cc00;

    --article:;
    --article-header-background: linear-gradient(#d8b2ff33, #EDFfff33, #F5EAFF33, #F5EAFF33, #EDFfff33, #d8b2ff33);
    --article-header-text-color:#bdbaba;

    --aside:;
    --footer:;
    --header:;

    --form_inputBackgound: lightgrey;
    --form_inputForegound: black;

    --main:;
    --mainBackground:;

    --navBackground: #EEE
    --navBorder: 1px solid #DDD;
    --navBorderRadius: 2px 2px 0 0;

    --nav_label_cb-toggleBackground:transparent;
    --nav_label_cb-toggleBackground-checked:#9b2020;

    --nav_menuBackground: #000022;
    --nav_menuBorder: solid 1px lightblue;
    --nav_menuColor: #59d97c;
    --nav_menuFontFamily: 'New Times Roman', serif;
    --nav_menuFontWeight: bold;
    --nav_menuTextShadow:;

    --nav_menu_liBorder:1px solid transparent;
    --nav_menu_liBorderRadius:3px;
    --nav_menu_liColor:;
    --nav_menu_li-hoverBackground: #DDD;
    --nav_menu_li-hoverBorder: 1px solid lightblue;

    --nav_menu_li_menuBorder: ridge 3px lightblue;
    --nav_menu_li_menuBorderRadius: 5px;
    --nav_menu_li_menuBoxShadow: 2px 2px 2px 1px darkblue;
    --nav_menu_li_menuFontFamily: 'Ubuntu', 'Liberation Sans', sans-serif;
    --nav_menu_li_menuFontWeight: normal;

    --separator-background:url("/images/separator.gif") repeat-x;
    --separator-div-height:25px;

    --span-logo-afterContent:"😎";
    --span-logo-beforeContent:"🕯️GC at Night";
    --span-logoTextShadow:2px 2px 3px black;

}



/*
 *
 *  *:lang(en-US) { outline: 2px solid pink; }
 *  *:lang(en) { outline: 2px solid deeppink; }
 */
:lang(de) > q {
    quotes: "»" "«" "\2039" "\203A";
}
:lang(en) > q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(en-US) > q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
    quotes: "« " " »";
}


nav > label.cb-toggle-label:before {
    content:"☰ GC Site Navigation";
    display:none;
}
nav > input[type="checkbox"].cb-toggle:checked ~ label.cb-toggle-label:before {
    content:"X Close Menu";
}

:lang(en-US) > nav > label.cb-toggle-label:before {
    content:"☰ GC Site Navigation";
}
:lang(en-US) > nav > input[type="checkbox"].cb-toggle:checked ~ label.cb-toggle-label:before {
    content:"X Close Menu";
}

:lang(de) > nav > input[type="checkbox"].cb-toggle:checked ~ label.cb-toggle-label:before {
    content:"X Navigation schließen🧭";
}
:lang(de) > nav > label.cb-toggle-label:before {
    content:"☰ GC-Navigation";
}

html {
    height: 100%;
    margin: 0;
    padding: 0;
    position:relative;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    position:relative;
} /* user-select: none; -webkit-user-select: none; /* Safari */


input[id="cb-theme-panel-toggle"]:not(:checked) ~
label.rb-theme-toggle-label,
label.rb-theme-toggle-label:after
{
    display:none;
}
input[id="cb-theme-panel-toggle"]:checked ~
label.rb-theme-toggle-label:after
{
    animation-name:var(--nav_menuAnimationName);
    animation-duration:var(--nav_menuAnimationDuration);
    display:block;
    padding:2px;
}

input[id="cb-theme-panel-toggle"]:not(:checked) ~
#css-theme-set-button
{
    display:none;
}
input[id="cb-theme-panel-toggle"]:checked ~
#css-theme-set-button
{
    animation-name:var(--nav_menuAnimationName);
    animation-duration:var(--nav_menuAnimationDuration);
    display:inline-block;
}

label[for="cb-theme-panel-toggle"] {
    cursor:pointer;
}

/*** Color adjustments for theme panel when theme is dark ***/
label[for="cb-theme-panel-toggle"]:has(~ input#rb-theme-toggle-darkest:checked)::before { color:#9d9d9d; }
label.rb-theme-toggle-label:has(~ input#rb-theme-toggle-darkest:checked)::after { background: black; color:#9d9d9d; }
input#rb-theme-toggle-darkest:checked ~ label.rb-theme-toggle-label { background: black; color:#9d9d9d; }

input.rb-theme-toggle {
    left:10px;
    position:relative;
}

input[id="rb-theme-toggle-default"] {
    left:120px;
    position:relative;
}

label[for="cb-theme-panel-toggle"]:before {
    color:var(--documentColor);
    content:"☰ Themes ";
    cursor:pointer;
    margin:0 0 10px 10px;
    position:absolute;
    text-decoration: none;
    top:0;
    z-index:20;
}

input[id="cb-theme-panel-toggle"]:checked ~ label[for="cb-theme-panel-toggle"]:before {
    content:"❌ Close ";
}

input[id="rb-theme-toggle-default"]:checked ~ label[for="rb-theme-toggle-default"]:after {
    text-decoration:underline dotted;
}
input[id="rb-theme-toggle-classic"]:checked ~ label[for="rb-theme-toggle-classic"]:after {
    text-decoration:underline dotted;
}
input[id="rb-theme-toggle-lavender"]:checked ~ label[for="rb-theme-toggle-lavender"]:after {
    text-decoration:underline dotted;
}
input[id="rb-theme-toggle-darkest"]:checked ~ label[for="rb-theme-toggle-darkest"]:after {
    text-decoration:underline dotted;
}
input[id="rb-theme-toggle-stealth"]:checked ~ label[for="rb-theme-toggle-stealth"]:after {
    text-decoration:underline dotted;
}

input.cb-theme-toggle-menu { }
label.cb-theme-panel-toggle-label {
    
}

label.rb-theme-toggle-label {
    background: darkgrey;
    border:1px solid black;
    border-radius:3px;
    cursor:pointer;
    left:0;
    margin:20px 0 10px 10px;
    position:absolute;
    width:65px;
    z-index:20;
}

label.rb-theme-toggle-label:hover {
    background:lightgrey;
    border:1px solid white;
}

label[for="rb-theme-toggle-default"]:after  {
    content:" Default  ";
}
/*label[for="rb-theme-toggle-classic"]:after  {
    content:" GC Classic ";
}*/
label[for="rb-theme-toggle-lavender"]:after {
    content:" Lavender ";
}
label[for="rb-theme-toggle-darkest"]:after  {
    content:" Dark ";
}
label[for="rb-theme-toggle-stealth"]:after  {
    content:" Stealth ";
}

label[for="cb-theme-panel-toggle"]:has(~ input#rb-theme-toggle-darkest:checked)::before {
    color:#9d9d9d;
}

label[for="rb-theme-toggle-default"] {
    top: .25rem;
}
/*label[for="rb-theme-toggle-classic"] {
    top: 1rem;
}*/
label[for="rb-theme-toggle-lavender"] {
    top: 1.75rem;
}
label[for="rb-theme-toggle-darkest"] {
    top: 3.25rem;
}
label[for="rb-theme-toggle-stealth"] {
    top: 4.75rem;
}

button#css-theme-set-button {
    cursor:pointer;
    position:absolute;
    z-index:20;
    top:7.5rem;
    left:10px;
}
button#css-theme-set-button::before {
    content:"Save";
}
button#css-theme-set-button:hover ~ label[for="css-theme-set-button"]:after {
    animation-name:var(--nav_menuAnimationName);
    animation-duration:var(--nav_menuAnimationDuration);
    background:yellow;
    border:1px solid black;
    border-radius:4px;
    color:black;
    content:"Click to save chosen theme by requesting a secure session cookie from our site. Close all browser tabs / windows to remove it.";
    cursor:pointer;
    display:block;
	font-family:var(--documentFontFamily);
    font-weight:normal;
    left:20px;
    margin-left:auto;
    margin-right:auto;
    max-width:300px;
    position:absolute;
    text-align:center;
    top:8.75rem;
    width:90%;
    z-index:30;
}


input#rb-theme-toggle-classic:checked ~ main {

    --dialog-backdrop-background:;
    --dialog-background: #edbb9d;
    --dialog-body-background: darkgrey;
    --dialog-header-background: linear-gradient(#DDF, #ececff, #ffffff, #ffffff, #ffffff, #ececff, #DDF);

    --documentColor: #000000;
    --documentBackground: repeat-x url(/images/alice-p.jpg);
    --documentBackgroundColor: #E0EAFF;
    --documentFontFamily: 'Times New Roman', serif;

    --documentLinkColor:#0045ff;
    --documentLinkColorActive:#A7A;
    --documentLinkColorHover:#FFF;
    --documentLinkColorVisired: #A7A;

    --document-TitlePic-URL:url(/images/GC-p.jpg) center no-repeat;
    --document-title-div-height:120px;
    --document-title-div-liBefore-content:"💗";

    --article:;
    --articleBackground: black;
    --articleForeground: white;
    --article-header-background: linear-gradient(#FFADAD, #FFE0C9, #FFE4D0, #FFE4D0, #FFE0C9, #FFADAD);
    --article-header-text-color:#df354b;

    --aside:;
    --footer:;
    --header:;

    --form_inputBackgound: white;
    --form_inputForegound: black;

    --main:;
    --mainBackground:;

    --navBackground: #EEE
        --navBorder: 1px solid #DDD;
    --navBorderRadius: 2px 2px 0 0;

    --nav_label_cb-toggleBackground:;
    --nav_label_cb-toggleBackground-checked:#9b2020;

    --nav_menuBackground: #f6fff8;
    --nav_menuBorder: solid 1px blue;
    --nav_menuColor: #000099;
    --nav_menuFontFamily: 'New Times Roman', serif;
    --nav_menuFontWeight: bold;
    --nav_menuTextShadow:;

    --nav_menu_liBorder:1px solid transparent;
    --nav_menu_liBorderRadius:3px;
    --nav_menu_li-hoverBackground: #DDD;
    --nav_menu_li-hoverBorder: 1px solid blue;

    --nav_menu_li_menuBorder: ridge 3px blue;
    --nav_menu_li_menuBorderRadius: 5px;
    --nav_menu_li_menuBoxShadow: 3px 4px 2px 1px grey;
    --nav_menu_li_menuFontFamily: 'Ubuntu', 'Liberation Sans', sans-serif;
    --nav_menu_li_menuFontWeight: normal;

    --separator-background:url("/images/separator.gif") repeat-x;
    --separator-div-height:25px;

    --span-logo-afterContent:"📡";
    --span-logo-beforeContent:" GC";
    --span-logoTextShadow:2px 2px 3px darkgrey;
}

input#rb-theme-toggle-lavender:checked ~ main {

    --dialog-backdrop-background:;
    --dialog-background: #bd8dbc;
    --dialog-body-background: #EDF;
    --dialog-header-background: linear-gradient(#DDF, #ececff, #ffffff, #ffffff, #ffffff, #ececff, #DDF);

    --documentColor: #000000;
    --documentBackground: url("/images/alice.jpg") top right no-repeat fixed;
    --documentBackgroundColor: #EDF;
    --documentFontFamily: 'Times New Roman', serif;

    --documentLinkColor:#0045ff;
    --documentLinkColorActive:#A7A;
    --documentLinkColorHover:#FFF;
    --documentLinkColorVisired: #A7A;

    --document-title-div-background:url(/images/GC.jpg) center / 100% auto no-repeat;
    --document-title-div-height:120px;
    --document-title-div-liBefore-content:"💗";

    --article:;
    --articleBackground: transparent;
    --articleForeground: black;
    --article-header-background: linear-gradient(#d8b2ff33, #EDFfff33, #F5EAFF33, #F5EAFF33, #EDFfff33, #d8b2ff33);
    --article-header-text-color:#ae00a3;

    --aside:;
    --footer:;
    --header:;

    --form_inputBackgound: transparent;
    --form_inputForegound: black;

    --main:;
    --mainBackground:;

    --navBackground: #EEE
        --navBorder: 1px solid #DDD;
    --navBorderRadius: 2px 2px 0 0;

    --nav_label_cb-toggleBackground:;
    --nav_label_cb-toggleBackground-checked:#9b2020;

    --nav_menuBackground: #f6fff8;
    --nav_menuBorder: solid 1px blue;
    --nav_menuColor: #000099;
    --nav_menuFontFamily: 'New Times Roman', serif;
    --nav_menuFontWeight: bold;
    --nav_menuTextShadow:;

    --nav_menu_liBorder:1px solid transparent;
    --nav_menu_liBorderRadius:3px;
    --nav_menu_li-hoverBackground: #DDD;
    --nav_menu_li-hoverBorder: 1px solid blue;

    --nav_menu_li_menuBorder: ridge 3px blue;
    --nav_menu_li_menuBorderRadius: 5px;
    --nav_menu_li_menuBoxShadow: 3px 4px 2px 1px grey;
    --nav_menu_li_menuFontFamily: 'New Times Roman', serif;
    --nav_menu_li_menuFontWeight: normal;

    --separator-background:url("/images/separator.gif") repeat-x;
    --separator-div-height:25px;

    --span-logo-afterContent:"📡";
    --span-logo-beforeContent:" GC";
    --span-logoTextShadow:2px 2px 3px darkgrey;
}


input#rb-theme-toggle-darkest:checked ~ main {

    --dialog-backdrop-background:;
    --dialog-background: #515151;
    --dialog-body-background: black;
    --dialog-header-background: linear-gradient(#DDF, #ececff, #ffffff, #ffffff, #ffffff, #ececff, #DDF);

    --documentColor:#9d9d9d;
    --documentBackground: radial-gradient(at 8% 30px, #000055 10px, #00004400 30%, #000022 125%);
    --documentBackgroundColor: black;
    --documentFontFamily: 'Ubuntu', 'Liberation Sans', sans-serif;

    --documentLinkColor:#0066cc;
    --documentLinkColorActive:#A7A;
    --documentLinkColorHover:grey;
    --documentLinkColorVisired: #A7A;

    --document-title-div-background:url(/images/GC.jpg) center / 100% auto no-repeat;
    --document-title-div-height:120px;
    --document-title-div-liBefore-content:"💗";

    --aColor:#00cc00;

    --article:;
    --articleBackground: transparent;
    --articleForeground: grey;
    --article-header-background: linear-gradient(#d8b2ff33, #EDFfff33, #F5EAFF33, #F5EAFF33, #EDFfff33, #d8b2ff33);
    --article-header-text-color:#bdbaba;

    --aside:;
    --footer:;
    --header:;

    --form_inputBackgound: transparent;
    --form_inputForegound: white;

    --main:;
    --mainBackground:;

    --navBackground: #EEE
        --navBorder: 1px solid #DDD;
    --navBorderRadius: 2px 2px 0 0;

    --nav_label_cb-toggleBackground:transparent;
    --nav_label_cb-toggleBackground-checked:#9b2020;

    --nav_menuBackground: #000022;
    --nav_menuBorder: solid 1px lightblue;
    --nav_menuColor: #59d97c;
    --nav_menuFontFamily: 'New Times Roman', serif;
    --nav_menuFontWeight: bold;
    --nav_menuTextShadow:;

    --nav_menu_liBorder:1px solid transparent;
    --nav_menu_liBorderRadius:3px;
    --nav_menu_liColor:;
    --nav_menu_li-hoverBackground: #DDD;
    --nav_menu_li-hoverBorder: 1px solid lightblue;

    --nav_menu_li_menuBorder: ridge 3px lightblue;
    --nav_menu_li_menuBorderRadius: 5px;
    --nav_menu_li_menuBoxShadow: 2px 2px 2px 1px darkblue;
    --nav_menu_li_menuFontFamily: 'Ubuntu', 'Liberation Sans', sans-serif;
    --nav_menu_li_menuFontWeight: normal;

    --separator-background:url("/images/separator.gif") repeat-x;
    --separator-div-height:25px;

    --span-logo-afterContent:"😎";
    --span-logo-beforeContent:"🕯️GC at Night";
    --span-logoTextShadow:2px 2px 3px black;
}


input#rb-theme-toggle-stealth:checked ~ main {

    --dialog-backdrop-background:;
    --dialog-background: #515151;
    --dialog-body-background:ghostwhite;
    --dialog-header-background: linear-gradient(#DDF, #ececff, #ffffff, #ffffff, #ffffff, #ececff, #DDF);

    --documentColor:black;
    --documentBackground:;
    --documentBackgroundColor: white;
    --documentFontFamily: 'Ubuntu', 'Liberation Sans', sans-serif;

    --documentLinkColor:#0045ff;
    --documentLinkColorActive:#A7A;
    --documentLinkColorHover:darkblue;
    --documentLinkColorVisired: #A7A;

    --document-title-div-background:;
    --document-title-div-height:0;
    --document-title-div-liBefore-content:"- ";
    --document-title-div-width:200px;

    --aColor:#00cc00;

    --article:;
    --article-header-background: linear-gradient(#d8b2ff33, #EDFfff33, #F5EAFF33, #F5EAFF33, #EDFfff33, #d8b2ff33);
    --article-header-text-color:black;

    --aside:;
    --footer:;
    --header:;

    --display-stealthy-block:none;
    --display-stealthy-block-alt:block;
    --display-stealthy-inline:none;
    --display-stealthy-inline-alt:inline;

    --main:;
    --mainBackground:;

    --navBackground: #EEE
        --navBorder: 1px solid #DDD;
    --navBorderRadius: 2px 2px 0 0;

    --nav_label_cb-toggleBackground:transparent;
    --nav_label_cb-toggleBackground-checked:#9b2020;

    --nav_menuBackground: #efefef;
    --nav_menuBorder: solid 1px grey;
    --nav_menuColor: #59d97c;
    --nav_menuFontFamily: 'New Times Roman', serif;
    --nav_menuFontWeight: bold;
    --nav_menuTextShadow:;

    --nav_menu_liBorder:1px solid transparent;
    --nav_menu_liBorderRadius:3px;
    --nav_menu_liColor:;
    --nav_menu_li-hoverBackground: #DDD;
    --nav_menu_li-hoverBorder: 1px solid lightgrey;

    --nav_menu_li_menuBorder: ridge 3px lightgrey;
    --nav_menu_li_menuBorderRadius: 5px;
    --nav_menu_li_menuBoxShadow: 2px 2px 2px 1px darkgrey;
    --nav_menu_li_menuFontFamily: 'Ubuntu', 'Liberation Sans', sans-serif;
    --nav_menu_li_menuFontWeight: normal;

    --separator-background:;
    --separator-div-height:0;

    --span-logo-afterContent:"😎";
    --span-logo-beforeContent:"🔥 GC Incognito";
    --span-logoTextShadow:2px 2px 3px black;
}


main {

    background:var(--documentBackground);
    background-color:var(--documentBackgroundColor);
    background-repeat: no-repeat;
    background-size:var(--bodyBackgroundSize);

    border-top:solid 1px black;

    color:var(--documentColor);
    font-family:var(--documentFontFamily);
    margin:0;
    padding:5px;
    padding-top:30px;
    position: relative;
    top:0;
    transition: background-size 0.5s ease;
    min-height:100%;
    transition: all 0.75s ease-out allow-discrete;
    z-index:10;
}



a {
    color:var(--documentLinkColor);
}
a:active {
    color:var(--documentLinkColorActive);
}
a:hover {
    color:var(--documentLinkColorHover);
}
a:visited {
    color:var(--documentLinkColorVisited);
}

article {

}

aside {

}

header {

}

header.main-head {
    display: flex;
    flex-direction: column;  /* Stacks the div elements vertically by default */
    gap: 10px;  /* Adds space between the rows */
}

header.main-head > div {
    align-items: center;  /* Centers content vertically */
    display: flex;  /* Enables flexbox */
    justify-content: center;  /* Centers content horizontally */
    padding:2px;
    text-align:left;
}

header.main-head > div.titpic {
    background: var(--document-title-div-background);
    height: var(--document-title-div-height); /* Keep the fixed height of 120px for bkg img except for when stealth */
    width: var(--document-title-div-width);  /* auto; Allow natural width, but it will be constrained by min-width/max-width and stealth */
    min-width: 280px; /* Ensure the minimum width is 280px */
    max-width: 425px; /* Ensure the maximum width is 425px */
    margin: 0 auto; /* Center the element horizontally */
}

header.main-head > div > ul {
    list-style-type:none;
    margin-left:0;
}
header.main-head > div > ul > li {
    margin-left:0;
    margin-bottom:5px;
}
header.main-head > div > ul > li:before {
    content: var(--document-title-div-liBefore-content);
    margin-right:6px;
}

@media screen and (min-width: 768px) {
    header.main-head {
        flex-direction: row;  /* Changes to a horizontal layout (3 columns) */
        justify-content: space-between; /* Distributes the columns evenly */
    }

    header.main-head > div {
        flex: 1;  /* Makes each item take up equal width */
        margin: 0 10px;  /* Adds space between columns */
    }
    /* Ensure the second item still has the same height and width constraints on larger screens */
    header.main-head > div.titpic {
        height: var(--document-title-div-height);  /* Keep the fixed height 120px; except for stealth theme */
        width: var(--document-title-div-width); /*  auto; Allow natural width, but it will be constrained by min-width/max-width */
        min-width: 280px; /* Ensure the minimum width is 280px */
        max-width: 425px; /* Ensure the maximum width is 425px */
    }
}



span.info {
    font-size:smaller;
}

span#logo {
    font-size:46pt;
}

span#logo > a {
    color:var(--documentColor);
    font-family:"Times New Roman", serif;
    font-weight:bold;
    text-decoration:none;
    text-shadow:var(--span-logoTextShadow);
}
span#logo > a:after {
    content:var(--span-logo-afterContent);
}
span#logo > a:before {
    content:var(--span-logo-beforeContent);
}

/*************************   ********************/
ul li a {
    white-space:nowrap;
    text-decoration:underline;
}

nav {
    background:var(--navBackground);
    border:var(--navBorder);
    border-radius:var(--navBorderRadius);
    clear:both;
    display:block;
    font-size:larger;
    text-align:center;
}

nav > input[type="checkbox"].cb-toggle {
    display:none;
}

nav > ul {
    color:var(--nav_menuColor);
    font-family:var(--nav_menuFontFamily);
    font-weight:var(--nav_menuFontWeight);
    display:block;
    left:0;
    margin:0 15px;
    padding:0;
    text-align:center;
}

/* Top-level items */
nav > ul > li {
    border:var(--nav_menu_liBorder);
    cursor:pointer;
    display:inline-block;
    margin-left:0;
    padding:0 5px;
    text-align:left;
    position:relative;
    vertical-align:top;
}

nav > ul > li:hover,
nav > ul > li:focus-within {
    background:var(--nav_menu_li-hoverBackground);
    border:var(--nav_menu_li-hoverBorder);
    border-radius:4px;
}

/* Top-level links */
nav > ul > li > a {
    display:inline-block;
    text-decoration:underline;
    width:100%;
    box-sizing:border-box;
}

/* Dropdown (level 2) */
nav > ul > li > ul {
    animation-name:closeSubMenu;
    animation-duration:var(--nav_menuAnimationDuration);
    background:var(--nav_menuBackground);
    border:var(--nav_menu_li_menuBorder);
    border-radius:var(--nav_menu_li_menuBorderRadius);
    box-shadow:var(--nav_menu_li_menuBoxShadow);
    font-family:var(--nav_menu_li_menuFontFamily);
    font-weight:var(--nav_menu_li_menuFontWeight);
    display:none;
    list-style:none;
    padding:0;
    position:absolute;
    text-align:left;
    top:100%;
    left:0;
    z-index:400;
    max-width:400px;
    min-width:125px;
}

/* Show dropdown on hover OR keyboard focus */
nav > ul > li:hover > ul,
nav > ul > li:focus-within > ul {
    display:block;
    animation-name:var(--nav_menuAnimationName2);
    animation-duration:var(--nav_menuAnimationDuration);
    padding:3px;
}

/* Level 2 items */
nav > ul > li > ul > li {
    list-style:none;
    margin-left:0;
    padding:2px;
    text-align:left;
    position:relative; /* Needed for level 3 positioning */
}

/* Level 2 links */
nav > ul > li > ul > li > a {
    display:inline-block;
    text-decoration:none;
    width:100%;
    box-sizing:border-box;
}

/* Hover/focus for level 2 */
nav > ul > li > ul > li:hover,
nav > ul > li > ul > li:focus-within {
    background:var(--nav_menu_li-hoverBackground);
}

/* Level 3 submenu */
nav > ul > li > ul > li > ul {
    animation-name:closeSubMenu;
    animation-duration:var(--nav_menuAnimationDuration);
    background:var(--nav_menuBackground);
    border:var(--nav_menu_li_menuBorder);
    border-radius:var(--nav_menu_li_menuBorderRadius);
    box-shadow:var(--nav_menu_li_menuBoxShadow);
    display:none;
    padding:0;
    position:absolute;
    top:0;
    left:100%;
    margin:0;
    z-index:410;
    max-width:400px;
    min-width:125px;
}

/* Show level 3 */
nav > ul > li > ul > li:hover > ul,
nav > ul > li > ul > li:focus-within > ul {
    display:block;
    animation-name:var(--nav_menuAnimationName2);
    animation-duration:var(--nav_menuAnimationDuration);
}

/* Level 3 items */
nav > ul > li > ul > li > ul > li {
    list-style:none;
    margin-left:0;
    padding:2px;
    text-align:left;
}

/* Level 3 links */
nav > ul > li > ul > li > ul > li > a {
    display:inline-block;
    text-decoration:none;
    width:100%;
    box-sizing:border-box;
}

/* Hover/focus level 3 */
nav > ul > li > ul > li > ul > li:hover,
nav > ul > li > ul > li > ul > li:focus-within {
    background:#DDD;
}

/* Accessibility focus styles */
nav a:focus {
    outline:2px solid #000;
    outline-offset:2px;
}

/* Optional: smoother keyboard UX */
nav li:focus-within > a {
    background:var(--nav_menu_li-hoverBackground);
}


@media screen and (max-width: 480px) {
    /* Show hamburger / toggle label */
    nav > label.cb-toggle-label {
        display:inline-block;
        cursor:pointer;
        padding:6px 10px;
        border:1px solid #000099;
        border-radius:var(--nav_menu_li_menuBorderRadius);
        background:transparent;
    }
    nav > label.cb-toggle-label:before {
        display:block;
    }
    nav > label.cb-toggle-label:hover {
        background:var(--nav_menu_li-hoverBackground);
    }
    /* Hide menu by default */
    nav > ul {
        display:none;
        position:absolute;
        width:80%;
        margin-top:5px;
        z-index:400;
    }
    /* Show menu when checkbox is checked */
    nav > input[type="checkbox"].cb-toggle:checked ~ ul {
        display:block;
        animation-name:var(--nav_menuAnimationName);
        animation-duration:var(--nav_menuAnimationDuration);
        background:var(--nav_menu_li-hoverBackground) ;
        border:1px solid #000099;
        border-radius:var(--nav_menu_li_menuBorderRadius);
    }
    /* Stack items vertically */
    nav > ul > li {
        display:block;
        width:100%;
        padding:6px;
    }
    /* Make submenus flow naturally in mobile */
    nav > ul > li > ul,
    nav > ul > li > ul > li > ul {
        position:relative;
        top:0;
        left:0;
        margin-left:15px;
        width:auto;
        z-index:410;
    }
}

@media screen and (max-width: 600px) {
    nav > ul > li {
        font-size:1.2em;
    }
    nav > ul > li > ul > li {
        font-size:1.1em;
    }
    nav > ul > li > ul > li > ul > li {
        font-size:1em;
    }
}

@keyframes detailsExpand {
    from {
        max-height: 2.5em;
    }
    to {
        max-height: auto;
    }
}
@keyframes detailsCollapse {
    from {
        max-height: auto;
    }
    to {
        max-height: 2.5em;
    }
}

@keyframes delayedFadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@keyframes fadeOut {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}

@keyframes openNavMenu {
    from {
        opacity:0;
        width:0;
    }
    to {
        opacity:1;
        width:auto;
    }
}
@keyframes openNavSubMenu {
    from {
        opacity:0;
        width:0;
    }
    to {
        opacity:1;
        width:auto;
    }
}

@keyframes openNavMenuDownward {
    from {
        opacity:0;
        height:0;
    }
    to {
        opacity:1;
        height:auto;
    }
}
@keyframes openNavSubMenuDownward {
    from {
        opacity:0;
        height:0;
    }
    to {
        opacity:1;
        height:auto;
    }
}

@keyframes closeMenu {
    from {
        opacity:1;
        width:auto;
    }
    to {
        opacity:0;
        width:0;
    }
}
@keyframes closeSubMenu {
    from {
        opacity:1;
        width:auto;
    }
    to {
        opacity:0;
        width:0;
    }
}

/************* User Menu ********************/
nav > ul#userMenu {
    color:#000099;
    display:inline;
    left:92%;
    list-style:none;
    margin:0;
    margin-right:5px;
    padding:0;
    position:absolute;
    text-align:right;
    top:1px;
}
nav > ul#userMenu > li {
    display:list-item;
    font-size:larger;
    margin-left:-1px;
    padding:0;
    padding-left:5px;
    padding-right:5px;
    text-align:left;
    vertical-align:top;
}
nav > ul#userMenu > li:before {
    content:"👷";
    border:solid 1px #CCC;
    border-radius:5px;
    font-size:larger;
}
nav > ul#userMenu > li:hover {
    background:#DDD;
}
nav > ul#userMenu > li:hover > ul {
    box-shadow:var(--nav_menu_li_menuBoxShadow);
    display:block;
    left:-100px;
    margin-top:0;
    padding:3px;
    position:absolute;
    z-index:100;
}
nav > ul#userMenu > li:hover > ul > li {
    margin-left:-1px;
    padding:2px;
    text-align:left;
    vertical-align:top;
}
nav > ul#userMenu > li:hover > ul > li#login:before {
    content:"🗝️ ";
}
nav > ul#userMenu > li:hover > ul > li#signup:before {
    content:"📝 ";
}
nav > ul#userMenu > li:hover > ul > li:hover {
    background:#DDD;
}
nav > ul#userMenu > li:hover > ul > li > a {
    display:inline-block;
    text-decoration:none;
    width:75%;
}
nav > ul#userMenu > li > a {
    text-decoration:none;
    text-transform:uppercase;
}
nav > ul#userMenu > li > ul {
    background:radial-gradient(#EEEEEE,#FFFFFF);
    border:var(--nav_menu_li_menuBorder);
    border-radius:var(--nav_menu_li_menuBorderRadius);
    display:none;
    list-style:none;
    margin-left:-1px;
    padding:0;
    position:absolute;
    text-align:left;
    vertical-align:top;
    width:130px;
}

/*************************   ********************/

nav#Main_Navigation {
    font-size:larger;
    font-weight:bold;
    text-align:center;
}

nav#Main_Navigation a {
    margin-left:5px;
    margin-right:5px;
}


/********  ********/
article {
    padding:5px;

}
article > author {
    text-align:center;
    font-family:sans-serif;
    font-size:smaller;
}
article > header {
    text-align:center;
    background: var(--article-header-background);
    border:var(--article-header-border);
    border-radius:5px;
}
article > header > h1 {
    font-family: serif;
    color:var(--article-header-text-color);
    font-size:20pt;
    margin-bottom:10px;
    margin-top:10px;
    text-shadow:1px 1px 1px darkgrey;
}

article > section {

}

article > section > h2 {
    color:#0F0FFD;
    text-shadow:1px 1px 2px darkgrey;
}

section {

}


article > footer {
    text-align:left;
    font-family:sans-serif;
    /*font-size:smaller;*/
}

section > header {
    text-align:left;
    background: var(--article-header-background);
    border:var(--article-header-border);
    border-radius:5px;
    padding-left:8px;
}

section > header > h2 {
    color:var(--article-header-text-color);
    font-family:serif;
    margin-bottom:5px;
    margin-top:5px;
}


section#rules-n-guidlines {
    margin: 8px;
}
section#rules-n-guidlines > details {
    margin: 8px;
    /* animation-name: detailsClose;
    animation-duration:0.5s; */
}

section#rules-n-guidlines > details[open=""] {
    animation: detailsExpand 0.5s ease forwards;
    height:auto;
}

section#rules-n-guidlines > details[open=""] > div {
    animation: delayedFadeIn 0.5s ease 0.5s forwards; /* start after expand */
}

section#rules-n-guidlines > details > div {
    opacity:0;
    margin: 8px;
}

section#rules-n-guidlines > details > summary {

    background: var(--rules-n-guidelines-details-summary-background);
    border: var(--rules-n-guidelines-details-summary-border);
    border-radius: 5px;
    color: var(--rules-n-guidelines-details-summary-color);
    cursor: pointer;
    font-family:serif;
    font-size:larger;
    font-weight:bold;
    padding-left: 8px;
}


div.separator {
    background: var(--separator-background);
    height: var(--separator-div-height);
    left: 0px;
    position: relative;
    top: 0;
    width: 100%;
}

.stealthyBlock {
    display:var(--display-stealthy-block);
}
.stealthyBlockAlt {
    display:var(--display-stealthy-block-alt);
}
.stealthyInline {
    display:var(--display-stealthy-inline);
}
.stealthyInlineAlt {
    display:var(--display-stealthy-inline-alt);
}