:root{
	/*Header-specific colors*/
	--primarycolor: #f7f5e1; /* gray #e3e3e3;*/ /*000099*/ /*#025FAC*/
	--headerhover: #4d79ff;
	--activeheaderlink: #1aa3ff;

	/*Paragraph link colors*/
	--linkcolor: #000099;
	--linkhover: #B4242E;
	--linkvisited: #3A93E8;

	/*Other colors*/
	--mainheadingcolor: #000000;/*#0d7030;*/ /*For h1*/   /*#CC7103; /*#0890A6;*/
	--accentcolor: #B4242E; /*For headings h2, h3*/
	--bgcolor: #FFFFFF;/*#f7f5e1;*/

	/*Other standard values*/
	--footerheight: 75px;
	--defaultfont: 22px/22px Tahoma, Helvetica, sans-serif;
	--largerfont: 24px/24px Tahoma, Helvetica, sans-serif;
	--wildcardheight: 100px;
	--unosetheight: 150px;
	--unosetwidth: 150px;
	--actioncardboxheight: 200px;

	/*Logo parameters (for mobile formatting)*/
	--logowidth: 600;  /*has to be unitless*/
	--logoheight: 100;  /*has to be unitless*/
	--mobilelogoheight: 50px;  /*has to be in pixel units*/
	--mobilelogowidth: calc((var(--mobilelogoheight) / var(--logoheight)) * var(--logowidth));
	--minlogoscreenwidth: calc(var(--logowidth) + 40px); /*Because variables are not supported in media queries, this value of 340px has been hardcoded below*/
}

html{
	height: 100%;
}

body {
	min-height:100%;
	padding: 0;
	position: relative;
	background-color: var(--bgcolor);
	width:100%;
	margin: 0;
}

body::after {
	content:'';
	display:block;
	height: var(--footerheight);
}

.content{
	max-width: 900px;
	margin: 0 auto;
}
img {
	display: block;
	border: 0;
	max-width: 95%;
}

/*------------ HEADER ------------*/
.header {
	width: 100%;
	height: 61px;
	background: var(--primarycolor);
}

.header a {
	background-color: var(--primarycolor);
  border: none;
  color: black;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
	text-decoration: none;
	font: var(--defaultfont);
	padding: 14px 14px;
}

/*Makes the dropdown menu of limited width*/
.headerlinks {   
	position: absolute;
	left: 0;
}

.headerlinks a:hover {
  background-color: var(--headerhover);
  color: black;
}

.headerlinks a.active{
	background-color: var(--activeheaderlink);
  color: white;
}

/*Desktop formatting*/
@media screen and (min-width:601px) {
/*	.header {text-align: center;}
	.header .icon {display: none;}
	.dropdown:hover .dropdown-content1, .dropdown:hover .dropdown-content2 {display: block;}*/

	.header {
		position: fixed;
		margin-top: -78px;
	}
	.content {margin-top: 78px;}
	.header a:not(:first-child) {display: none;}
	.header button {display:none;}
	.header .icon {margin-bottom: -21px;}
	.header.responsive .icon {margin-bottom:0;}
	.header.responsive {position: fixed;}
  .header.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
	.header.responsive button {
		float: none;
    display: inline-block;
    text-align: left;
		margin-left: -7px;
	}
	.dropdown:hover .dropdown-content1, .dropdown:hover .dropdown-content2 {display: inline-block;}
	.logo img{
		height: var(--mobilelogoheight);
		position: absolute;
		top: 5px;
		left: calc(50% - (var(--mobilelogowidth) / 2) + 20px); This centers the logo
	}

	.footer {height: var(--footerheight);}
/*	.logo {padding: 12px 0;}*/
	h1 {font: 37px/37px Tahoma, Helvetica, sans-serif;}
	h2 {font: 32px/32px Tahoma, Helvetica, sans-serif;}
	h3 {font: 28px/28px Tahoma, Helvetica, sans-serif;}
	p, li, label, input, textarea, figcaption, .figcaption {font: var(--defaultfont);}
}

/*Mobile formatting*/
@media screen and (max-width: 600px) {
	.header {
		position: fixed;
		margin-top: -78px;
	}
	.content {margin-top: 78px;}
	.header a:not(:first-child) {display: none;}
	.header button {display:none;}
	.header .icon {margin-bottom: -21px;}
	.header.responsive .icon {margin-bottom:0;}
	.header.responsive {position: fixed;}
  .header.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
	.header.responsive button {
		float: none;
    display: inline-block;
    text-align: left;
		margin-left: -7px;
	}
	.dropdown:hover .dropdown-content1, .dropdown:hover .dropdown-content2, .dropdown:focus .dropdown-content1, .dropdown:focus .dropdown-content2 {display: block;}
	.logo img{
		height: var(--mobilelogoheight);
		position: absolute;
		top: 5px;
		left: calc(50% - (var(--mobilelogowidth) / 2) + 20px); This centers the logo
	}
	h1 {font: 37px/37px Tahoma, Helvetica, sans-serif;}
	h2 {font: 32px/32px Tahoma, Helvetica, sans-serif;}
	h3 {font: 28px/28px Tahoma, Helvetica, sans-serif;}
	p, li, label, input, textarea, figcaption, .figcaption {font: var(--defaultfont);}
}

/* Hides the logo if the screen is too small */
@media screen and (max-width: 340px) {.logo{display: none;}}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}
/*
.dropdown-content1, .dropdown-content2 {
  position: relative;
  display: inline-block;
}*/

/* Dropdown Button*/
.dropbtn1, .dropbtn2 {
  background-color: var(--primarycolor);
  border: none;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content1, .dropdown-content2 {
  background-color: var(--primarycolor);
	display: none;
  position: absolute;
	min-width: 215px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content1 a, .dropdown-content2 a {width: 100%;}

/*Menu Bars*/
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 3px;
  background-color: #000000; /*#FFFFFF;*/
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-6px, -5px);
  transform: rotate(45deg) translate(-6px, -5px);
}

.logo img{
	margin-left: auto;
	margin-right: auto;
}

/*------------ CONTENTS ------------*/
.overview {
	max-width: 400px;
	border-style: solid;
	margin: 0 0 12px;
	margin-left: auto;
	margin-right: auto;
	display: none;
}

.overview h2{
	text-align: center;
	padding: 12px 0 0;
}

.toc {
	max-width: 600px;
	max-width: 95%;
	border-style: solid;
	padding: 6px;
}

.toc h2{
	text-align: center;
}

.toc ul {
	list-style: none;
}

ul.noindent {
	margin-left: 5px;
  padding-left: 10px;
}

.toc li {
	font-weight: bold;
}

.wildcard, .unoset, .actioncardbox {
	display: block;
	padding: 10px 0;
}

.wildcard img, .unosetimg, .actioncardbox img {
	clear: left;
	float:left;
	margin-right: 12px;
}

.wildcard {min-height: var(--wildcardheight);}
.wildcard img {
	height: var(--wildcardheight);
	padding: 6px;
}
.wildcard a {font-style: bold;}

.unoset {min-height: var(--unosetheight);}
.unosetimg {
	height: var(--unosetheight);
	width: var(--unosetwidth);
	display: flex;
	justify-content: center;
	align-items: center;
}
.unoset img{max-height: var(--unosetheight)}
.unosettext{
	display: flex;
  align-items: center;
	min-height: var(--unosetheight);
}

.actioncardbox {min-height: var(--actioncardboxheight);}
.actioncardbox img {
	height: var(--actioncardboxheight);
	padding: 6px;
}

.regimg img{
	max-width: 95%;
	padding-top: 6px;
	padding-bottom: 36px;
	margin-left: auto;
  margin-right: auto;
}

.relatedcontent {
	border-style: solid;
	border-width: thin;
	padding: 10px;
	margin: 50px 10px 14px;
}

.relatedcontent figure {
	margin: 0;
	padding: 5px;
}

.relatedcontent figure img {
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 12px;
}

.relatedcontent figure p{
	font-weight: bolder;
	text-transform: uppercase;
	font-size: 125%;
	line-height: 125%;
	color: var(--linkcolor);
}

.relatedcontent a {text-decoration: none;}

.relatedcontent figcaption {
	color: #000000;
	padding: 0 10px;
	font-size: 90%;
}

.unocount p {
	text-align: center;
	font-weight: bolder;
	font: 24px/24px Tahoma, Helvetica, sans-serif;
	padding-top: 14px;
}

h1 {
	color: var(--mainheadingcolor);
	margin: 25px 0;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	padding-top: 14px;
}

h2 {
	color: var(--accentcolor);
	margin: 25px 0 14px;
	text-transform: uppercase;
	font-weight: 600;
	text-align: center;
}

h3 {
	color: var(--accentcolor);
	margin: 18px 10px;
	font-weight: 550;
	text-align: center;
}

p, li, label, input, textarea {
	color: #000000;
	margin: 0 10px 14px;
}

p a, li a, .home a {
	color: var(--linkcolor);
	text-decoration: none;
}

p a:hover, li a:hover {
	color: var(--linkhover);
	text-decoration: none;
}

p a:visited, li a:visited {
	color: var(--linkvisited);
	text-decoration: none;
}

ul {
	color: #000000;
	margin: 0 0 14px;
}
hr{
	height: 3px;
	border-width:0;
	color:black;
	background-color:black;
}
#negativemargin {
	margin-bottom: -78px;
}
.row {
  display: flex;
	max-width: 100%;
}
.column {
	flex: 100%;
}
.figure{
	font: 11px/20px Tahoma, Helvetica, sans-serif;
	text-align: center;
}
.iframe{max-width: 95%;}

/*------------ CONTACT FORM ------------*/
input[type=text], select, textarea {
  width: 95%;
  padding: 12px; /* Some padding */
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: var(--mainheadingcolor);
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
	margin-top: -20px;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}

.hidden{
	visibility:hidden;
	font-size: 0px;
	margin: 0;
	padding: 0;
}

.aligncenter { /*This should center the Amazon ad banner, but doesn't quite*/
	margin-left: auto;
  margin-right: auto;
	padding-bottom: 20px;
}

/*------------ FOOTER ------------*/
.footer {
	background: var(--primarycolor);
	border-top: 2px solid #fff;
	position:absolute;
	bottom:0;
	width: 100%;
}

.footer a{
	color: #b5c1aa;
	text-decoration-line: underline;
}

.footnote {
	border-top: 1px solid #fff;
}

.footnote p {
	color: #000000; /*b5c1aa;*/
	font: 11px/20px Tahoma, Helvetica, sans-serif;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
	line-height: normal;
	padding-top: 7px;
	padding-bottom: 3px;
}