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

.hidden { display:none; }


:root { /* Pink Theme */
    --bodyBackground:#FFF5F5;
    
	--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:;
    --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;

	--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;

    --rules-n-guidelines-details-summary-background: linear-gradient(#DDF, #ececff, #ffffff, #ffffff, #ffffff, #ececff, #DDF);

    --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) {
	--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:;

	--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;

    --rules-n-guidelines-details-summary-background: linear-gradient(#DDF, #a7cff7, #a7cff7, #a7cff7, #a7cff7, #a7cff7, #DDF);
    --rules-n-guidelines-details-summary-border: solid 1px #DDF;
    --rules-n-guidelines-details-summary-color: blue;

    --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"; }


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

body > input.rb-theme-toggle { left:10px; position:relative;  }
body > input[checked].rb-theme-toggle ~ label.rb-theme-toggle-label
body > input[id="rb-theme-toggle-default"] { left:120px; position:relative; }

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

body > label.rb-theme-toggle-label { cursor:pointer; left:0; margin:20px 0 10px 10px; position:relative; }
body > label[for="rb-theme-toggle-default"]:before { content:" Choose a Theme: "; cursor:default; left:-5px; position:relative; text-decoration: none; }
body > label[for="rb-theme-toggle-default"]:after  { content:" Default  ";  }
body > label[for="rb-theme-toggle-classic"]:after  { content:" GC Classic ";  }
body > label[for="rb-theme-toggle-lavender"]:after { content:" Lavender "; }
body > label[for="rb-theme-toggle-darkest"]:after  { content:" Dark ";  }
body > label[for="rb-theme-toggle-stealth"]:after  { content:" Stealth ";  }

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

	--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:;
    --article-header-background: linear-gradient(#FFADAD, #FFE0C9, #FFE4D0, #FFE4D0, #FFE0C9, #FFADAD);
    --article-header-text-color:#df354b;

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

	--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;

    --rules-n-guidelines-details-summary-background: linear-gradient(#DDF, #ececff, #ffffff, #ffffff, #ffffff, #ececff, #DDF);

    --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;
}

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

	--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:;
    --article-header-background: linear-gradient(#d8b2ff33, #EDFfff33, #F5EAFF33, #F5EAFF33, #EDFfff33, #d8b2ff33);
    --article-header-text-color:#ae00a3;

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

	--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;

    --rules-n-guidelines-details-summary-background: linear-gradient(#DDF, #ececff, #ffffff, #ffffff, #ffffff, #ececff, #DDF);

    --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;
}


body > input#rb-theme-toggle-darkest:checked ~ main {
	--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:;

	--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;

    --rules-n-guidelines-details-summary-background: linear-gradient(#DDF, #a7cff7, #a7cff7, #a7cff7, #a7cff7, #a7cff7, #DDF);
    --rules-n-guidelines-details-summary-border: solid 1px #DDF;
    --rules-n-guidelines-details-summary-color: blue;

    --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;
}


body > input#rb-theme-toggle-stealth:checked ~ main {
	--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;

    --rules-n-guidelines-details-summary-background: linear-gradient(#DDF, #ececff, #ffffff, #ffffff, #ffffff, #ececff, #DDF);
    --rules-n-guidelines-details-summary-border:;
    --rules-n-guidelines-details-summary-color:;

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

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

body {
	background:var(--bodyBackground);
}

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;
	transition: background-size 0.5s ease;
	min-height:100%;
    transition: all 0.75s ease-out allow-discrete;
}



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:center;
	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); }