: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); */
    --cHeadShadow: inset -8px -8px 16px 0px var(--burgundy);

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


.Author {
    padding:8px;
}
.Author img {
    max-width:400px;
    max-height:300px;
    margin: 16px;
}


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 div {
    display:inline-block;
}

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

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

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

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

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

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

body > footer nav a, body > 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;
}

body > footer nav a:hover, body > 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;
}

/**
 * Creates a tiled layout. 
 * @usage add `class="AdsFooter"` to a container node, and nest `<div>`s inside to tile them.
 */
.AdsFooter {
    display:flex;
    flex-wrap:wrap;
    direction:row;
    justify-content:space-around;
    max-width:100%;
    border-top: 1px solid gray;
    padding-top:100px;
    margin-top:100px;
    margin-bottom:50px;
}
.AdsFooter > h1 {
    width:100%;
    text-align:center;
    display:none;
}
.AdsFooter > div {
    text-decoration:none;
    color:black;

    /* border: 1px solid black; */
    border: 1px solid var(--color_primary);
    border-radius: 8px;
    width:400px;
    max-width:80%;

    box-shadow:inset 0px -1px 2px var(--burgundy);
    padding-bottom:4px;
    
    margin: 8px;
    display:flex;
    align-items:center;
    flex-direction:column;

    min-height: 150px;
}
.AdsFooter > div > h3 {
    border-radius:8px;
    border-bottom: 3px solid var(--orange-pantone);
    width:100%;
    text-align:center;
    margin: 0;
    padding: 8px 0;
}

.AdsFooter > a:hover, .AdsFooter > a:active {
    border-color: var(--orange-pantone);
}
.AdsFooter > a:hover > h2, .AdsFooter > a:active > h2  {
    border-color:var(--color_primary);
    background:var(--orange-pantone);
}


/* 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);
}

small a, small a:visited 
{
	text-decoration: underline;
	text-decoration-color: var(--orange-pantone);
	color: black;
	border-radius: 8px;
    padding:4px;
}

small a:hover, small a:focus, small a:active 
{
	cursor: pointer;
	text-decoration: none !important;
	color: black;
	background: var(--orange-pantone);
}

img {
    max-width:100%;
}

small {
    padding-left:4px;
}


/**
 * Add `class="standard"` to a button or `<input type="submit">` for 'nice' styling
 * Use button.link if containing an `<a>`
 */
button.standard, input[type="submit"].standard {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    margin:4px;
    padding:6px;
    border: 1px solid #CCCCCC;
    background: #EEEEEE;
}
button.standard:hover, button.standard:active, button.standard:focus 
input[type="submit"].standard:hover,  input[type="submit"].standard:active,  input[type="submit"].standard:focus
{
    background:#CCCCCC;
    border-color: #AAAAAA;
}

button.standard a {
    text-decoration:none;
    width:100%;
    height:100%;
    color:black;
}

button.standard a:visited {
    text-decoration:none;
}

button.link {
    margin:0;
    padding:0;
    border: 1px solid #CCCCCC;
    background: #EEEEEE;
    text-align:center;
}
button.link a {
    display:inline-block;
    width:100%;
    height:100%;
    padding:6px;
    text-decoration:none;
    color:black;
}

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

/**
 * Make some text standout with extra padding and a background
 * @usage Add `class="notice"` to any element
 */
.notice {
    background: #dcb30c;
    background: #ffcc00;
    padding:8px;
    border-radius: 8px;
}

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

/**
 * Italicize & shrink some text
 *
 * @usage add `class='footnote'` to a `<p>`
 */
.footnote {
    font-size:0.8em;
    font-style:italic;
}

/**
 * For links only admin should be able to access
 */
a.admin {
    text-decoration:none;
    color:black;
    border: 1px solid black;
    background:lightgray;
    font-size:0.7em;
    padding:2px;
    border-radius:4px;
}


/**
 * horizontal center content using flexbox
 */
.flex-center {
    display:flex;
    flex-direction:column;
    align-items:center;
}


/**
 * Display heading containing a link with a white background and orange border
 * @usage add class="bordered" to an `<h1>` through `<h4>` and put all text inside an `<a>` within it
 */
h1.bordered, h2.bordered, h3.bordered, h4.bordered {
    width:90%;
    text-align:center;
}
h1.bordered a, h2.bordered a, h3.bordered a, h4.bordered a{
	text-decoration: none;
	color: black;
	font-size: 1.5em;
    width:100%;
	border-bottom: 4px solid var(--orange-pantone);
	border-radius: 8px;
	padding: 0 32px;
	display: inline-block;
	border-top: 1px solid var(--orange-pantone);
	border-left: 1px solid var(--orange-pantone);
	border-right: 1px solid var(--orange-pantone);
}

h1.bordered a:hover, h2.bordered a:hover, h3.bordered a:hover, h4.bordered a:hover,
h1.bordered a:active, h2.bordered a:active, h3.bordered a:active, h4.bordered a:active,
h1.bordered a:focus, h2.bordered a:focus, h3.bordered a:focus, h4.bordered a:focus
{
    border-color: var(--color_primary);
    background: var(--orange-pantone);
}

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