:root {

    --btn_background: lightgrey;
    --btn_background_active: grey;


	/* Primary colors: https://coolors.co/ad0035-7c0025-cd003e-190007-32000f */
	--vivid-burgundy: #ad0035ff;
	--burgundy: #7c0025ff;
	--cardinal: #cd003eff;
	--xiketic: #190007ff;
	--dark-sienna: #32000fff;
	/* Compliments: */
	--blue-pantone: #3423A6;
	/* --orange-pantone: #F75C03; */
	--orange-pantone: #fd6e1c;
	--sea-green-crayola: #44FFD1;
	--jet: #343031;

	/* text-on-bg colors: https://coolors.co/f2fffb-afffe3-b4a0e5-00e1ff-63ffe5 */
	--mint-cream: #f2fffbff;
	--magic-mint: #afffe3ff;
	--sky-blue-crayola: #00e1ffff;
	--turquoise-blue: #63ffe5ff;

	/* Other Colors: https://coolors.co/5bc3eb-839791-7698b3-726e97-444069-46445f-08415c-012622-13262f-274690 */
	--morning-blue: #839791;
	--cerulean-frost: #7698B3;
	--rhythm: #726E97;
	--purple-navy: #444069;
	--independence: #46445F; /* purple */
	--indigo-dye: #08415C;
	--phtalo-green: #012622;
	--gunmetal: #13262F; /* blue-grey */
	--dark-cornflower-blue: #274690;
	--vivid-sky-blue: #5BC3EB;

}

:root {
    /* --cHeadBG: var(--burgundy); */
    --cHeadBG: var(--color_primary);
    --cHeadFocusBG: var(--orange-pantone);
    --cHeadTitle: white;
    --cHeadTitleShadow: 1px 0px 10px var(--cardinal);
    --cHeadShadow: inset 0px -8px 12px 0px var(--dark-sienna);
    --cHeadShadow: inset -8px -8px 16px 0px var(--dark-sienna);

    --breadcrumbBorderWidth: 2px;
    --breadcrumbBorderColor: var(--orange-pantone);
    --cBreadcrumb: var(--xiketic);

    --footerBG: var(--jet);
    --footerHeader: white;;
    --footerLink: var(--orange-pantone);
    --footerLinkFocus: white;


    --cMain: white;
    --cFoot: grey;

    --contentWidth: 960px;
    /* --contentWidth: 1280px; */
    --minWidth: 200px;

    --colorContentBorder:rgba(150,150,150,0.5);
}

:root {
	font-size: 17px;
}


:root {
    /* #8b0000 */
    /* --color_primary: darkred; */
    /* --color_primary: #c01c28; */
    --color_primary: #990000;
    --color_primary_light: #ef3d47;
    /* --color_primary_dark: darkred; */
    --color_primary_dark: #800000;

    --color_contrast: white;
    --color_contrast_bright: darkred;
    --color_contrast_dark:#200070;

    --color_secondary: #111;
    --color_secondary_light: #222;
    --color_secondary_dark: #111;


    --color_primary_text: black;
    --color_text_one: yellow;


    --color_menu_background: #222;

    --color_off_white: #F8F8F8;
    --color_off_white_bright: #FEFEFE;
    --color_primary_tint: #50009211;

    --color_background_content: #FEFEFE;
    --color_background_footer:  lightgrey;

    --color_link_primary: rgb(94, 12, 12);
    --color_link_primary_active: rgb(21, 62, 151);
    --color_link_primary_visited: var(--color_contrast_bright);

    --color_link_secondary: blue;
    --color_link_secondary_active:pink;
    --color_link_secondary_visited:green;



    --height_header_item: 1.5rem;

    --padding_main: 0.0rem;
    --padding_main_small: 0.0rem;
    --padding_content:1.5rem 1.0rem 1.5rem 1.0rem;
    --padding_content: 0;
    --padding_content_side: 1.5rem;
    --padding_content_first_child: 1.5rem 1.0rem 1.5rem 1.0rem;
    --padding_content_first_child_vertical: 1.5rem;
    --padding_content_first_child_horizontal: 1.0rem;
    --padding_content_item: 0.5rem 1.5rem 0.5rem 1.5rem;


    --_legend_size: 2rem;

/*  */
}


.site_notice {
    padding:8px;
    background: var(--orange-pantone);
}


main > .header {
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
}

.breadcrumbs {
	padding:0.5em;
	cursor:default;
}
.breadcrumbs span {
	font-size: 0.7em;
	vertical-align: middle;
}

.breadcrumbs a, .breadcrumbs a:visited {
	display:inline-block;
 	border-bottom:  var(--breadcrumbBorderWidth) solid var(--breadcrumbBorderColor);
 	border-radius: 4px;
	text-decoration: none;
	font-size:0.9em;
	white-space:nowrap;
	padding: 0.3em 0.4em calc(0.2em - var(--breadcrumbBorderWidth)) 0.4em;
	margin: 0.4em 0.1em;
	
	color:var(--cBreadcrumb);
	cursor:pointer;
	
}

.breadcrumbs a:hover, .breadcrumbs a:focus {
	background:var(--breadcrumbBorderColor);
	border-bottom: var(--breadcrumbBorderWidth) solid transparent;
}

.breadcrumbs a:active {
	/* @TODO style active link (when it is being clicked) */
}


@media(max-width: 650px){
    main > .header {
        flex-direction:column;
    }
}


.follow {
    /* display:flex; */
    /* flex-direction:row; */
    /* justify-content:center; */
    border-top: 1px solid #CCCCCC;
    padding-top:8px;
    padding-bottom:8px;
    text-align:center;
    max-width:100%;
}

.follow a {
    text-decoration:none;
    display:inline-flex;
}

.follow a button {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    margin:4px;
    padding:6px;
    border: 1px solid #CCCCCC;
    background: #EEEEEE;
}
.follow a:hover button, .follow a:active button, .follow a:focus button {
    background:#CCCCCC;
    border-color: #AAAAAA;

}

.follow a button img {
    margin-right:4px;
    max-height:58px;
}

footer {
    position:relative;
    width: var(--contentWidth);
    padding: 0;
    margin:0;

    padding-bottom:200px;
    border-collapse:collapse;
    margin-left:auto;
    margin-right:auto;

    border: 1px solid var(--colorContentBorder);
    background: var(--footerBG);
}

footer nav {
    display:flex;
    flex-flow: row wrap;

    justify-content:space-evenly;
}
footer nav > div {
    min-width:200px;
    margin:0 16px 0 16px;
}

footer nav h4 {
    color: var(--footerHeader);
    padding-bottom:0;
    margin-bottom:0.4em;
}

footer nav ul {
    list-style-type:none;
    padding-left:0.4em;
    margin-top:0;
    padding-top:0;
}

footer nav a, footer nav a:visited {
    display:inline-block;
    color: var(--footerLink);
    text-decoration: none;
    padding: 0.1em 0.3em 0 0.3em;	
    margin-top: 0.3em;
    border-bottom: 0.1em solid transparent;
}

footer nav a:hover, footer nav a:focus {
    /* text-decoration:underline; */
    border-bottom: 0.1em solid var(--footerLink);	
    color:var(--footerLinkFocus);
}

.share {
    display:flex;
    flex-direction:row;
    justify-content:center;
}

.share a {
    text-decoration:none;
}

.share a button {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    margin:4px;
    padding:6px;
    border: 1px solid #CCCCCC;
    background: #EEEEEE;
}
.share a:hover button, .share a:active button, .share a:focus button {
    background:#CCCCCC;
    border-color: #AAAAAA;

}

.share a button img {
    margin-right:4px;
}


/* footer { */
/* 	width:40px; */
/* } */
/* .Controls { */
/* 	width:40px; */
/* } */
/* * { */
/* 	margin-left: 0; */
/* 	margin-right: 0; */
/* } */

/* main { */

/* } */

details > summary {

    padding:8px;
    border: 1px solid black;
    border-radius: 8px;
    margin-top: 8px;
    margin-left: 8px;
    margin-right: 8px;
    cursor: pointer;
}

p {
    max-width: 75ch;
}

main address {
    margin-left: 8px;
    padding-left:8px;
}

main a.standard, main a.standard:visited,
.markdown a, .markdown a:visited,
p > a, p > a:visited, 
li > a, li > a:visited,
.user_page a, .user_page a:visited
{
	text-decoration: underline;
	text-decoration-color: var(--orange-pantone);
	color: black;
	padding: 4px 6px;
	border-radius: 8px;
	text-decoration-thickness: 1.5px;
}

main a.standard:hover, main a.standard:active, main a.standard:focus,
.markdown a:hover, .markdown a:active, .markdown a:focus,
p > a:hover, p > a:active, p > a:focus,
li > a:hover, li > a:active, li > a:focus
.user_page a:hover, .user_page a:active, .user_page a:focus
{
	cursor: pointer;
	text-decoration: none !important;
	color: black;
	background: var(--orange-pantone);
}

img {
    max-width:100%;
}


header {
    width: 100%;
    background: var(--cHeadBG);
    border-bottom: 1px solid black;
    box-shadow: var(--cHeadShadow);
    
    margin: 0;
    padding:0.5em 0;
/*     	0.5em 0.5em 0.5em; */

    display:flex;
    flex-flow: row wrap;
    vertical-align:middle;
    justify-content:space-around;
    justify-items:center;
    align-items:center;
    
    border-width:0 1px 0 0;
    border-top:1px solid black;
 	overflow-x:clip;   
}
header a {
	display:inline-block;
	white-space:nowrap;
}

header nav {
	display:inline-flex;
	flex-flow: row wrap;
	justify-content: center;
	
	min-width:400px;
}

header a.title, header a.title:visited {
	/* padding:0.5em 0.5em; */
    padding: 0.5em 0.5em 0.2em 0.5em;
	margin:0;
    
    display:flex;
    flex-direction:column;
    align-items:center;
    align-content:center;
    
    text-decoration: none;
    font-weight: bold;
    font-size: 2rem;
    cursor: pointer;
    text-overflow: ellipsis;
    color: var(--cHeadTitle);
}
header a.title:hover, header a.title:focus, header a.title:active{
	background:var(--cHeadFocusBG);
	border-radius: 1em;
	box-shadow: var(--headTitleShadow);
	color:#190007;
	border-bottom: 1px solid black;
    padding-bottom: calc(0.2em - 1px);
    /* padding-bottom:-3px; */
}

header a.title > span {
    font-size: 0.5em;
    /* font-weight:normal; */
}


header nav a, header nav a:visited {
	--borderWidth: 4px;
	padding: calc(0.1em + var(--borderWidth)) 0.5em 0.1em 0.5em;
	margin: 0.3em;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: bold;
    color: white;
    
	border-bottom: var(--borderWidth) solid transparent;
}

header nav a:hover, header nav a:focus {
	border-radius: 0.3em;
	box-shadow: var(--headShadow);
	border-bottom: var(--borderWidth) solid var(--cHeadFocusBG);
}

header nav a:active {
	/* @TODO style active link (when it is being clicked) */
}


html,
body {
    width:100%;
    min-height:100%;
    min-height: 100vh;
    max-width: 100%;
    min-width:var(--contentWidth);
    padding: 0;
    margin: 0;
/*     background: var(--color_off_white_bright); */
}
* {
    box-sizing: border-box;
}
body, body > main, header, footer {
	min-width: var(--minWidth);
}
body {
    display: flex;
    flex-direction: column;
    position:relative;
    background: var(--color_off_white);
}

body > main {
    display:flex;
    flex-direction:column;
    padding:0;
    flex: 1;

    background:var(--color_background_content);

    min-height:100%;
    width:var(--contentWidth);

    margin-left:auto;
    margin-right:auto;
    border-left: 1px solid var(--colorContentBorder);
    border-right: 1px solid var(--colorContentBorder);
}

body > main > .content {
    flex:1;
}

h1, h2, h3, h4, h5, h6 {
    margin: 8px 8px 4px 8px;
}
p {
    padding: 0px 8px 4px 16px;
}

div.errors > p, .error {
    background: #dcb30c;
    background: #ffcc00;
    padding:8px;
    border-radius: 8px;
}
div.errors > p::before, .error::before {
    content:"Error: ";
    font-weight:bold;
}

form button, form input[type="button"], form input[type="submit"], 
form input[type="checkbox"] {
    cursor:pointer;
}

@media (max-width: 972px) {
/* @media (max-width:1292px) { */
	:root {
		--contentWidth: 100%;
	}
  main {
    border-left:none;
    border-right:none;
  }
}

/* @media (max-width: 750px) { */
    /* .Controls { */
        /* justify-content: center; */
    /* } */
/*  */
/* } */

@media (max-width: 412px) {
	header nav {
		min-width: 100% !important;
	}
}


table.simple {
    border-collapse: collapse;
}
table.simple th, table.simple td{
    border: 1px solid black;
    padding:0;
    padding: 6px;
    margin:0;
}


.BlockForm {
    padding: 1em;
}
.BlockForm label:not(.inline) input:not([type=checkbox]),
.BlockForm label:not(.inline) select,
.BlockForm label:not(.inline) textarea 
{
    display:block;
}
.BlockForm input, .BlockForm textarea, .BlockForm select{
    font-size:0.9em;
}
.BlockForm option {
    font-size: 1.0em;
}
.BlockForm label:not(.inline) {
    display:block;
    padding: 0.5em;
    max-width:100%;
}
.BlockForm textarea {
    resize:vertical;
    display:inline-block;
    width:75%;
    min-height:15ch;
}
.BlockForm input, .BlockForm textarea, .BlockForm select {
    margin-left:0.5em;
    margin-top:0.2em;
}
/* .BlockForm label.inline input[type=checkbox], .BlockForm label.inline select{
    display:inline-block;
} */

.BlockForm .help {
    font-size:0.9em;
    display:inline-block;
    margin:0;
    padding:0;
    margin-left:0.5rem;
}

.BlockForm .disclaimer {
    color:red;
}
.BlockForm .alert {
    color:red;
    font-size: 0.9em;
    display:none;
}


.flexGrid {
    display:flex;
    flex-flow: wrap row;
    list-style-type: none;
    justify-content:center;
    padding:0;
}
.flexGrid > li {
    padding:0.5rem 1.0rem;
    flex: 1;
    min-width:20ch;
    max-width:40ch;
    position:relative;
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
    align-items:center;
}


.twoColumnsWrapper {
    /* display:flex;
    justify-content:center; */
}
.twoColumns {
    columns: 2 250px;
    column-gap: 4em;
    column-rule: 1px solid #ddd;
    width:100%;
}
.twoColumns .column {
    display:inline-block;
    min-width:50%;
} 

/* ****** the base wrappers ****** */
.waControls {
    --leaderHeight: 10px;
    --selectedColor: #a11;
    /* --menuBG: #481111; */
    --menuBG: var(--color_primary_dark);
    --menuTxtColor: white;
    /* --menuTxtColor: black; */
    --maxItemWidth: 110px;
    --minItemWidth: 72px;
    --appBarHeight: 64px;
    --borderColor: black;
    --gapColor: rgba(0,0,0,0.8);
    --closeBtnSize:42px;
    --itemBG: var(--orange-pantone);
    --fullWidth: var(--contentWidth); /* the actual width for content on a page */
    --minWidth: inherit; /* the min width allowed for content on a page */
    --footerBG: inherit; /* The color of your pages' footers */
    --emptySpaceColor: var(--footerBG);
    --menuRadius: 14px 14px 0 0;
    

	  z-index:1000;
    position:fixed;
    bottom:0;
    border-collapse:collapse;

    display:flex;
    flex-direction:row;
    justify-content:flex-end;

    padding: 0;
    margin:0;

    width:var(--contentWidth); 
    min-width:var(--minWidth);
    height:var(--appBarHeight);

    border-top:3px solid var(--borderColor);
    background: var(--emptySpaceColor);
    box-shadow: 0px -12px 18px -1px rgba(0,0,0,0.6)
                /* ,0px 0px 12px 0 rgba(0,0,0,0.0) */
    ;
}

.waControls .wacWrapper {
    display:flex;
    position:relative;
    width:calc(4 * var(--maxItemWidth));
}




/* ****** menu ****** */
.waControls .wacMenu {
    --borderHeight: 1px;
    position:absolute;
    left:0;
    right:0;
    bottom:calc(100% + var(--leaderHeight) - var(--borderHeight)); /* the -1px is for the border. the -leaderHeight is to push it up and make empty space */

    border: var(--borderHeight) solid var(--borderColor);
    border-radius: var(--menuRadius);;

    color:var(--menuTxtColor);
    background:var(--menuBG);
}

.waControls .wacMenu::after {
    content: " ";

    display:block;
    overflow:hidden;

    position:absolute;
    left: -1px;
    bottom:calc(-1 * var(--leaderHeight));

    height: var(--leaderHeight);
    width: calc(100% + 2px);

    background: var(--gapColor);
}
.waControls .wacMenuHeader {
    display:flex;
    justify-content:flex-end;
    /* padding:8px 8px 0px 8px; */
    padding: 6px 8px;
    align-items:center;
    border-bottom: 1px solid var(--itemBG);
}

.waControls .wacMenuHeader .wacMenuTitle {
    flex:1;
    padding: 0 0 0 18px;
}

.waControls .wacMenuHeader button {
    cursor:pointer;
    background:none;
    margin:0;
    border:none;

    border-radius:8px;
    padding:0 6px;

    font-size: var(--closeBtnSize);
    line-height:var(--closeBtnSize);

    color:var(--menuTxtColor);
}
.waControls .wacMenuHeader button:hover {
    background: var(--itemBG);
    color:black;
}

/* the leader is nested under the item in order to set its width, but it only shows when the menu is open. */
.waControls .wacItem.wacSelected .wacLeader {
    position:absolute;
    right:0;
    left:0;
    bottom: 100%;

    height: var(--leaderHeight);

    border-left: 1px solid var(--borderColor);
    border-right: 1px solid var(--borderColor);

    background:var(--menuBG);
    background-image: linear-gradient(var(--menuBG), var(--selectedColor));
}





/* ****** submenu ****** */
/* ** .wacSubMenu IS a <ul> in this implementation ** */
.waControls .wacSubMenu {
    overflow-y:auto;
    max-height: calc(80vh - var(--leaderHeight) - var(--appBarHeight));
    list-style-type: none;
    margin:0;
    padding:0;
}

.waControls .wacSubMenu li {
    margin:0;
    border-bottom: 1px solid var(--borderColor);
}
.waControls .wacSubMenu li:last-child {
    border-bottom:none
}

.waControls .wacSubMenu li > * {
    display:block;
    width:100%;
    height:100%;

    margin:0;
    padding:12px 12px 12px 36px;

    color:var(--menuTxtColor);

}

.waControls .wacSubMenu li > a {
    cursor:pointer;
    text-decoration: none;

    transition-property: padding-left;
    transition-duration: 0.2s;
    transition-timing-function: linear;
}

.waControls .wacSubMenu li > a:hover, 
.waControls .wacSubMenu li > a:focus {
    background: var(--selectedColor);
    color:var(--menuTxtColor);
    padding-left: 48px;
}






/* ****** The items that you click to open the menu ****** */
.waControls .wacItem{
    position:relative;
}

.waControls .wacItem {
    display:flex;
    flex:1;
    justify-content:center;

    height:100%;
    max-width: var(--maxItemWidth);
    min-width: var(--minItemWidth);

    padding: 0;
    margin: 0;
    border-collapse:collapse;
    white-space:nowrap;

    background: var(--itemBG);

}

.waControls .wacItem a {
    display:flex;
    flex:1;
    justify-content:center;

    max-width: var(--maxItemWidth);
    min-width: var(--minItemWidth);
    height:100%;

    text-decoration: none;
    white-space:nowrap; /* i don't know why this is here, but I don't wanna break anything */
    padding: 0.5em;

    border-collapse:collapse;
    border-right: 1px solid #333;
    border-left: 1px solid #333;

    background: var(--itemBG);
}

.waControls .wacItem.selected a,
.waControls .wacItem a:hover, 
.waControls .wacItem a:focus 
{
    color: #000;
    background: var(--selectedColor);
}

.waControls .wacItem a div {
	height: 100%;

	background-size: contain;
	background-repeat: no-repeat;
}

.waControls .wacItem a img {
	height: 100%;
}




/* ****** no-brainers, nothing complex ****** */
.waControls .wacItem .wacSubMenu {
    /* the sub-menu when underneath the item button should be hidden. */
    display:none;
}
.waControls .wacHidden,
.waControls .wacTitle {
    display:none;
}


@media screen and (max-width: 650px) {
    .waControls {
        max-height: 50px;
    }
}