/* Valid history.css 31 DEC 2020 */
/* Variable Declarations */
:root {
--text: #000000;
--back: #d6d6ff;
--anchorback: #ffffa5;
--anchorborder: #a0a0a0;
--menuborder: #0c7f00;
}
/* -----	Reset Styles start (from meyerweb.com) ----- */
html, body, div, span, h1, h2, h3, h4, h5, h6, p,
a, em, font, img, ul, li,
table {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-family: inherit; }
	table {border-collapse: collapse; border-spacing: 0;}

/* -----	Reset Styles end (from meyerweb.com) ----- */

/* HTML, WRAPPER, HEADER, FOOTER ---------- */
html {
		 font-family:	Verdana, Arial, sans-serif; 
		 color: var(--text);
		 background-color: var(--back);
		 font-size: 0.9em;
		 }
		 
.wrapper {width: 98%;	margin: 1.5em auto;}
@media screen and (max-width: 1600px) and (min-width: 1025px) 
{.wrapper {width: 50%;	margin: 1.5em auto;}}
@media screen and (max-width: 1024px) and (min-width: 900px) 
{.wrapper {width: 70%;	margin: 1.5em auto;}}

header {text-align: center; height: 4.5em; margin-bottom: 1em;}

.navigator {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr ));
    grid-auto-rows: 100px;}
	
footer {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: auto;
    grid-template-areas: 
		"a b c"
		"d d d";
		justify-content: center;
		margin-top: 30px;
		}
.foot1 {grid-area: a; text-align: center; margin-top: 15px;}
.foot2 {grid-area: b; text-align: center; margin-top: 15px;}
.foot3 {grid-area: c; text-align: center; margin-top: 15px;}
.foot4 {grid-area: d; text-align: center; margin-bottom: 15px;}
.foot4 a {display: inline; text-decoration: underline;}

header, footer, .menubutton, .navigator > div {
		 background-color: var(--anchorback);
		 border: 4px solid var(--anchorborder);
		 border-radius: 5px;
		 box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
		 }

a {text-decoration: none; display: block; width: 100%; height: 100%;}
/* ----- display: block; width: 100%; height: 100% makes whole div clickable ----- */
a:link 		{color: var(--text); background-color: var(--anchorback); border-color: var(--anchorborder);}	 		/* unvisited link */		
a:visited {color: var(--text); background-color: var(--anchorback); border-color: var(--anchorborder);}	 		/* visited link */		
a:hover, .navigator > div:hover 	{color: var(--text); background-color: var(--anchorback); border-color: var(--text);}							/* hover link */
a:active 	{color: var(--text); background-color: var(--anchorback); border-color: var(--anchorborder);}	 		/* selected link */		
a.margin3 {margin-left: 130px; background-color: var(--back);}

footer a:link	{color: var(--text); background-color: transparent;}					/* unvisited link */		
footer:hover	{color: var(--text); background-color: var(--anchorback); border-color: var(--text);}			/* hover link */

/* TEXT ---------- */
.textPage {}

.textarea {text-align: justify; margin: 0 1em;}
.textarea p {margin-bottom: 1em;}

/* MISC ---------- */

.lefting  {float: left;}
.righting {float: right;}
.clear 		{clear: both;}

/* .auto {width: 100%; margin: 0 auto; text-align: center;} /* width set to allow margin: auto to work */

br {margin-top: 10px;}
.center {text-align: center;}
.spacer10	{height: 10px;}
.spacer20	{height: 20px;}
.spacer30	{height: 30px;}
.spacer40	{height: 40px;}
.spacer60	{height: 60px;}

.margin1 {padding: 10px 4px 0 4px; text-align: center;}
.margin2 {margin-top: 3em;}
.margin3 {margin: 1.5em 0; text-align: center;}
.margin4 {margin: 3em; text-align: center;}
.margin5 {padding: 30px 10px 0 10px; text-align: center;}


.soundfile	{width: 670px; height: 460px; padding: 25px 25px 5px 20px; margin: 30px 0;}

/*  --------- To make images responsive --------- */
img			 {max-width: 100%; height: auto;}

/*  --------- Images --------- */

/* .img1	{float: left; margin: 10px 20px 10px 0;}  THIS PARAMETER MAY BE DELETED IF NOT USED SAME WITH IMG2 AND IMG3 */
.img1	{text-align: center; margin: 1em 0;}
.img2	{float: right; margin: 0 0 10px 20px;}
.img3, .img4	{float: left; margin: 0 20px 0 0;}
.img5	{float: left; margin: 10px 20px 0 0;}
@media screen and (max-width: 360px) and (min-width: 0px) 
{.img3 {float: none; margin: 0; } }


.imagebox img {float: left; margin: 0 5px 5px 0;}

/*  --------- Borders --------- */
.imagebox img, .soundfile {border:3px ridge var(--anchorborder);}
.imagebox img, .soundfile {border-radius: 10px;}

/* ------------------------ FONT  ------------------------------ */
.justification {text-align: justify;}
.fontsize1 {font-size: 0.7em;}

h1 {font: normal 1.6em/2.0em Verdana, Arial, sans-serif;}
h1.caps {font: normal 1.6em/3em Verdana, Arial, sans-serif; font-variant: small-caps; margin: auto;}
h2 {font: normal 1.6em/1.6em Verdana, Arial, sans-serif;}
h3 {font: normal 1.4em/1.8em Verdana, Arial, sans-serif;}
h3.caps {font: normal 1.4em/1.8em Verdana, Arial, sans-serif; font-variant: small-caps; margin-bottom: 1em;}
h4 {font: normal 1.2em/1.2em Verdana, Arial, sans-serif;}
h5 {font: normal 1.0em/1.0em Verdana, Arial, sans-serif;}

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on August 6, 2012 03:09:27 PM America/New_York */
@media screen and (max-width: 1500px) and (min-width: 639px) 
{
    @font-face {
    	font-family: 'RedressedRegular';
      src: url('/fonts/redressed/Redressed-webfont.eot');
      src: url('/fonts/redressed/Redressed-webfont.eot?#iefix') format('embedded-opentype'),
      url('/fonts/redressed/Redressed-webfont.woff') format('woff'),
      url('/fonts/redressed/Redressed-webfont.ttf') format('truetype'),
      url('/fonts/redressed/Redressed-webfont.svg#RedressedRegular') format('svg');
      font-weight: normal;
      font-style: normal;
    	}
    h1.redressed {font-family: RedressedRegular, Verdana, Arial, sans-serif; font-size: 2.2em;}
		h1.caps 		 {font: normal 2em/2em RedressedRegular, Verdana, Arial, sans-serif; font-variant: small-caps; margin: auto;}
    h2.redressed {font-family: RedressedRegular, Verdana, Arial, sans-serif; font-size: 2.0em;}
    h3.redressed {font-family: RedressedRegular, Verdana, Arial, sans-serif; font-size: 1.8em;}
    h4.redressed {font-family: RedressedRegular, Verdana, Arial, sans-serif; font-size: 1.4em;}
    h5.redressed {font-family: RedressedRegular, Verdana, Arial, sans-serif; font-size: 1.2em;}
}

/* BUTTONS ---------- */
.menubutton {
	text-align: center;
	padding: 0.5em;
	width: 200px;
}

/* TABLES ---------- */
table.one {
  width: 90%;
	margin-left: 12px;
	font-size: 0.95em;
	background: transparent;
  border: 2px ridge #ffffff;
	}
@media screen and (max-width: 360px) and (min-width: 0px) 
{table.one {width: 100%; margin: 0; } }
	

table.one td  {border: 1px ridge #ffffff; padding: 2px;}

table.one .tdwidth1	{width: 15%;	padding: 1%; vertical-align: top;}
@media screen and (max-width: 360px) and (min-width: 0px) 
{table.one .tdwidth1{width: 20%; margin: 0; } }

table.one .tdwidth2	{width: 70%;	padding: 1%;}
table.one .tdwidth3	{width: 46px;}

/* TEST BORDERS ---------- */
.testblack			{border: 2px solid #000000;}
.testgreen			{border: 2px solid #00ff00;}
.testblue				{border: 2px solid #0000ff;}