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


.StoryArticleInList {
    border:1px solid black;
    padding:8px;
    font-size:0.9em;
}

.Paginate {

    display:flex;
    padding:8px;
    flex-direction:row;
    justify-content:flex-end;
    margin-top:16px;
}

.Paginate a {
    margin:4px;
    /* color:black; */
}
.Paginate a:visited {
    color:inherit;
}

.NewsItem {
    border: 1px solid var(--color_primary);
    border-radius: 8px;
    margin: 0 8px;
    width:90%;
    max-width: 75ch;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:8px;
}

.NewsItem h2 {
    margin:0;
}
.NewsItem h2 a {
    text-decoration:none;
    border-bottom: 3px solid var(--orange-pantone);
    border-radius:6px;
    padding: 8px;
    display:block;
    color:black;
}
.NewsItem h2 a:hover, .NewsItem h2 a:active {
    background:var(--orange-pantone);
    border-color: var(--color_primary);
}
.NewsItem > p > a {
    text-decoration-color: var(--orange-pantone); 
    text-decoration-thickness: 2px; 
    color:black;
    padding: 0px 4px 0px 4px;
    margin-left: -4px;
    display:inline-block;
}

.NewsItem > p > a:hover, .NewsItem > p > a:active {
    background: var(--orange-pantone);
}


.ArticlesList {
    display:flex;
    flex-direction:column;
    align-items:center;
}
.ArticlesList > h1, .ArticlesList > h2 {
    text-align:center;
}

.ArticlesList > p {
    display:block;
    /* text-align:center; */
}


/* body {
    color: #768390;
    background: #FFF;
    font-family: "Effra", Helvetica, sans-serif;
    padding: 0;
    -webkit-font-smoothing: antialiased;
  } */
  /* h1, h2, h3, h4, h5, h6 {
    color: #3D4351;
    margin-top: 0;
  } */
  /* a {
    color: #FF6B6B;
  }
  a:hover {
    color: #ff9a9a;
    text-decoration: none;
  } */

  .timeline-info span {
      padding:1.0em;
  }
  /* .timeline-content p, .timeline-content h3{ */
    /* padding: 0.5em; */
  /* } */
  .timeline-content p {
    margin:0;
    padding:0.5em;
    margin-left:8px;
  }
  .timeline-content h3 {
    margin:0;
    padding:0.5em;
  }
  .example-header {
    background: #3D4351;
    color: #FFF;
    font-weight: 300;
    padding: 3em 1em;
    text-align: center;
  }
  .example-header h1 {
    color: #FFF;
    font-weight: 300;
    margin-bottom: 20px;
  }
  .example-header p {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
  }
  .container-fluid .row {
    padding: 0 0 4em 0;
  }
  .container-fluid .row:nth-child(even) {
    background: #F1F4F5;
  }
  .example-title {
    text-align: center;
    /* margin-bottom: 30px; */
    padding: 2em 0 1em 0;
    /* border-bottom: 1px solid #E4EAEC; */
  }
  .example-title p {
    margin: 0 auto;
    font-size: 16px;
    max-width: 400px;
  }
  /*==================================
   TIMELINE
   ==================================*/
  /*-- GENERAL STYLES
   ------------------------------*/
  .timeline {
    line-height: 1.4em;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }
  .timeline h1, .timeline h2, .timeline h3, .timeline h4, .timeline h5, .timeline h6 {
    line-height: inherit;
  }
  /*----- TIMELINE ITEM -----*/
  .timeline-item {
    padding-left: 40px;
    position: relative;
    border-bottom:1px solid lightgray;
  }
  .timeline-item:last-child {
    padding-bottom: 0;
  }
  /*----- TIMELINE INFO -----*/
  .timeline-info {
    /* font-size: 12px; */
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 3px;
    margin: 0 0 0.5em 0;
    text-transform: uppercase;
    white-space: nowrap;
    /* border-bottom:1px solid lightgray; */
    display:flex !important;
    justify-content:right;
    align-items:center;
  }
  /*----- TIMELINE MARKER -----*/
  .timeline-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15px;
  }
  .timeline-marker:before {
    background: #FF6B6B;
    border: 3px solid transparent;
    border-radius: 100%;
    content: "";
    display: block;
    height: 15px;
    position: absolute;
    top: 4px;
    left: 0;
    width: 15px;
    transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
  }
  .timeline-marker:after {
    content: "";
    width: 3px;
    background: #CCD5DB;
    display: block;
    position: absolute;
    top: 24px;
    bottom: 0;
    left: 6px;
  }
  .timeline-item:last-child .timeline-marker:after {
    /* content: none; */
  }
  .timeline-item:not(.period):hover .timeline-marker:before {
    background: transparent;
    border: 3px solid #FF6B6B;
  }
  /*----- TIMELINE CONTENT -----*/
  .timeline-content {
    padding-bottom: 40px;

    /* border-bottom:1px solid lightgray; */
    /* border-top:1px solid lightgray; */
  }
  .timeline-content p:last-child {
    margin-bottom: 0;
  }
  /*----- TIMELINE PERIOD -----*/
  .period {
    padding: 0;
  }
  .period .timeline-info {
    display: none;
  }
  .period .timeline-marker:before {
    background: transparent;
    content: "";
    width: 15px;
    height: auto;
    border: none;
    border-radius: 0;
    top: 0;
    bottom: 30px;
    position: absolute;
    border-top: 3px solid #CCD5DB;
    border-bottom: 3px solid #CCD5DB;
  }
  .period .timeline-marker:after {
    content: "";
    height: 32px;
    top: auto;
  }
  .period .timeline-content {
    padding: 40px 0 70px;
  }
  .period .timeline-title {
    margin: 0;
  }

  /* @media (min-width: 768px) { */
    /* .timeline-item .timeline-content { */
        /* display:flex; */
        /* flex-direction:column; */
        /* align-items:center; */
    /* } */
  /* } */
  /*----------------------------------------------
   MOD: TIMELINE SPLIT
   ----------------------------------------------*/
  /* @media (min-width: 768px) { */
  /*   .timeline-split .timeline, .timeline-centered .timeline { */
  /*     display: table; */
  /*   } */
  /*   .timeline-split .timeline-item, .timeline-centered .timeline-item { */
  /*     display: table-row; */
  /*     padding: 0; */
  /*   } */
  /*   .timeline-split .timeline-info, .timeline-centered .timeline-info, .timeline-split .timeline-marker, .timeline-centered .timeline-marker, .timeline-split .timeline-content, .timeline-centered .timeline-content, .timeline-split .period .timeline-info, .timeline-centered .period .timeline-info { */
  /*     display: table-cell; */
  /*     vertical-align: top; */
  /*   } */
  /*   .timeline-split .timeline-marker, .timeline-centered .timeline-marker { */
  /*     position: relative; */
  /*   } */
  /*   .timeline-split .timeline-content, .timeline-centered .timeline-content { */
  /*     padding-left: 30px; */
  /*   } */
  /*   .timeline-split .timeline-info, .timeline-centered .timeline-info { */
  /*     padding-right: 30px; */
  /*   } */
  /*   .timeline-split .period .timeline-title, .timeline-centered .period .timeline-title { */
  /*     position: relative; */
  /*     left: -45px; */
  /*   } */
  /* } */
  /*----------------------------------------------
   MOD: TIMELINE CENTERED
   ----------------------------------------------*/
  @media (min-width: 768px) {
    .timeline-centered, .timeline-centered .timeline-item, .timeline-centered .timeline-info, .timeline-centered .timeline-marker, .timeline-centered .timeline-content {
      display: block;
      margin: 0;
      padding: 0;
    }
    .timeline-centered .timeline-item {
      /* padding-bottom: 40px; */
      overflow: hidden;
    }
    .timeline-centered .timeline-marker {
      position: absolute;
      left: 50%;
      margin-left: -7.5px;
    }
    .timeline-centered .timeline-info, .timeline-centered .timeline-content {
      width: 50%;
    }
    .timeline-centered > .timeline-item:nth-child(odd) .timeline-info {
      float: left;
      text-align: right;
      justify-content:right;
      padding-right: 30px;
    }
    .timeline-centered > .timeline-item:nth-child(odd) .timeline-content {
      float: right;
      text-align: left;
      padding-left: 30px;
    }
    .timeline-centered > .timeline-item:nth-child(even) .timeline-info {
      float: right;
      text-align: left;
      justify-content:left;
      padding-left: 30px;
    }
    .timeline-centered > .timeline-item:nth-child(even) .timeline-content {
      float: left;
      text-align: right;
      padding-right: 30px;
    }
    .timeline-centered > .timeline-item.period .timeline-content {
      float: none;
      padding: 0;
      width: 100%;
      text-align: center;
    }
    .timeline-centered .timeline-item.period {
      padding: 50px 0 90px;
    }
    .timeline-centered .period .timeline-marker:after {
      height: 30px;
      bottom: 0;
      top: auto;
    }
    .timeline-centered .period .timeline-title {
      left: auto;
    }
  }
  /*----------------------------------------------
   MOD: MARKER OUTLINE
   ----------------------------------------------*/
  .marker-outline .timeline-marker:before {
    background: transparent;
    border-color: #FF6B6B;
  }
  .marker-outline .timeline-item:hover .timeline-marker:before {
    background: #FF6B6B;
  }
  







  /**
   * style the external link preview
   *
   */

.story_container {
    display:flex;
    height:100%;
    justify-content:center;
    align-items:center;
}

.news_story {
    display:flex;
    white-space:normal;

    border: 1px solid black;
    padding:6px;
    width:100%;
    margin-right:8px;
}

.news_story p{
    padding:0;
    margin:0;
    font-size:0.9rem;
    font-weight:normal;
    letter-spacing:normal;
    text-transform:none;
}

.news_story h3 {
    padding:0;
    margin:0;
    font-weight:700;
    letter-spacing:normal;
    text-transform:none;
    text-align:left;
}

.timeline-centered > .timeline-item {
    /* display:flex; */
}
.timeline-centered > .timeline-item:nth-child(2n) {
    flex-direction:row-reverse;
}





/**
 * Center header text & enable nice date bubbles
 * @usage add `class='Story'` to root node & create an `<ul class="Dates">`
 */
.Story {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.Story > p {
    margin-left:auto;
    margin-right:auto;
}

.Story .container-fluid {
    width:100%;
}

.Story > ul.Dates {
    padding: 8px 0;
    text-align:center;
    list-style-type:none;
    display:flex;
    justify-content:space-around;
}
.Story > ul.Dates > li {
    font-size:1.2em;
    background: var(--orange-pantone);
    padding:8px 16px;
    border-radius:20px;
    display:inline-block;
}

.Story .example-title {
    border-bottom: 1px solid #E4EAEC;
}

@media(max-width: 650px){
    .Story > ul.Dates {
        display:block;
    }
    .Story > ul.Dates > li {
        margin-top:8px;
    }
}


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