@font-face {
    font-family: 'SubatomicGertie';
    src: url('SubatomicGertie.woff2') format('woff2'),
        url('SubatomicGertie.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


* {
   box-sizing: border-box; 
  }
  
  
  
/* BODY */
body {
    display: block;
	padding-left: 5%;
	padding-right: 5%;
	font-family: verdana, arial, Georgia; 
	color: #262946; 
	font-size: 14px;
	background-color: rgba(127, 126, 106,1.0);

  }

/* BACKGROUND IMAGE LAYER - 2 OPTIONS */

#bg1b {
	margin-top: 10px;
	background-image: url("images/gertiebg-1b.jpg");
	background-repeat: no-repeat;
	background-position: left 80px;
}

#bg1a {
	margin-top: 10px;
	background-image: url("images/gertiebg-1a.jpg");
	background-repeat: no-repeat;
	background-position: left 80px;
}
 


/* MAIN PAGE SETUP */


#main {
    display: flex;
    min-height: calc(100vh - 40vh);
	line-height: 1.25em;
	padding-top:80px;
  }
#main > article {
    flex: 1;
	max-width: 788px;
  }

/* WHITE PAGE AREA WITH BLUE TOP & BOTTOM */
article {
    padding-top: 0px;
	padding-bottom: 1em;
	padding-left: 10px;
	padding-right: 10px;
	background-image: url("images/bg-maintop.jpg"), url("images/copyright1a.jpg");
	background-repeat: repeat-x, no-repeat;
	background-position: top left, center bottom;
	background-size:auto, 100%;
	background-color: #fff;
	margin-top: -18px;
	margin-left:150px;
  }
/* TOP NAVIGATION BAR */  
#navi {
	font-family: 'SubatomicGertie', serif;
	margin-top:-5px;
	background-image: url('images/nav-transp.png');
	background-repeat: no-repeat;
	background-position: top left;
	background-size:auto;
	overflow:visible;
}

#navi p {
	font-size:7pt;
	color: #fff;
	text-align: left;
	line-height: 1em;
	text-shadow: 1px 1px 2px black;
	font-weight: 400;
}
#navi a:link {text-decoration: none; color: #fff;}    
#navi a:visited {COLOR: #d3d3d3; TEXT-DECORATION: none}
#navi a:hover {COLOR: #0099ff; TEXT-DECORATION: underline}
#navi a:active {color: #bbbbbb; text-decoration: none;}


/* HEADER TEXT */	
header {
    padding-top: 0.5em;
	padding-bottom: 0.5em;
    height: 123px;
	color: #7e7c8e;
  }
  
header p {
	margin: 0 0 3 0;
	padding: 10px;
	font-size:9pt;
	font-weight: bold;
	text-align: center;
	background-color: rgba(0,0,0,0.4);
}
/* FOOTER TEXT */

footer {
    height: auto;
	padding-top: 5px;
    border-top-style: solid;
    border-top-color: #f0f0f0;
    border-top-width: 1px;
	background-color: rgba(0,0,0,0.0);
  }
footer img {
	padding: 1;
}
footer p {
	font-family: 'Century Gothic', sans-serif;
	font-size:8pt;
	color: #fff;
	text-align: center;
}

/*MAIN CONTENT BELOW NAVI - SIDEBAR */
#content {
	float:left;
	margin: auto; 
	padding-top: 15px;
	padding: 1px 2px;
	max-width: 93%;
}
/*MAIN CONTENT BELOW NAVI - NO SIDEBAR */
#content1 {
	margin:auto;
	padding: 15px 10px 5px 10px;
}

/* SKINNY SIDE NAV */
article > .sidebar {
  margin: 0;
  font-family: monospace;
  margin-top:75px;
  padding: 0;
  width: 40px;
  background-color: #f1f1f1;
  float: right;
  right: 0;
  position: relative;
  overflow: visible;
}

/* SIDE NAV LINKS */
.sidebar a {display: block; color: black; padding: 16px; text-align: center; float: none; text-decoration: none;}
.sidebar a:link {text-decoration: none;	color: #262946; }
.sidebar a.active {background-color: rgba(127, 126, 106,1.0); color: white; text-decoration: none;}
.sidebar a:hover:not(.active) {text-decoration: none; background-color: #262946; color: white;}

/* large text for mobile hyperlinks */
.links {
line-height: 1.4em;
font-family:monospace;
font-size: 2.8em;
margin: 0.6em;
text-align: center;
}
.links a:link {
	text-decoration: none;
}

/* general */
hr {text-align: center;
	width: 60%;
	margin: auto;
	margin-top: 15;
	margin-bottom: 15;
}
  
p {margin: 1em 0;
  }
h1 {
	margin: 0.6em 0; 
	font-size: 3.5vw; 
	font-weight: bold;
	}
h2 {
	margin: 0.6 0 0.6em 0; 
	font-size: 2.25vw; 
	font-weight: bold;
	line-height: 1em;
	}
	
h3 {
	font-size: 2vw;
	font-weight: bold;
	margin: 8px 0;
	padding-top: 20px;
	padding-bottom: 6px;
	text-align: center;
}
a:link {text-decoration: underline; color: #222741; }    
a:visited {color: #999999; TEXT-DECORATION: none}
A:hover {text-decoration: none; background-color: #262946; color: #FFFFFF;}
a:active {color: #460497; text-decoration: none;}

small {
	font-size: 0.66em;
	margin: 6 0 3 0;
	}



/* Page content. The value of the margin-left property should match the value of the sidebar's width property
div.content {
  margin-left: 200px;
  padding: 1px 16px;
  height: 1000px;
} */

/* On screens that are less than 700px wide, make the sidebar into a topbar
@media screen and (max-width: 700px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar a {float: right;}
  div.content {margin-right: 0;}
}
 */
/* On screens that are less than 400px, display the bar vertically, instead of horizontally 
@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
}
*/


/* SEARCH BOX */
#search {
	color: #fff;
	font-size: 12pt;
	padding: 0 5%;
	background-color: #9c9b8d;
	max-width: 520px;
	margin: auto;
	border: #222741 ridge 4px;
	padding: 15px;
}

.smalltext {
	FONT: 10px verdana; COLOR: #ffffff; LETTER-SPACING: -1px
}
.button {
	BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 11px; BORDER-LEFT: 1px solid; COLOR: #000000; height: 30px;BORDER-BOTTOM: 1px solid; FONT-FAMILY: Tahoma,Verdana,Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #ffffff
}
.searchinput {
	BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 11px; BORDER-LEFT: 1px solid; WIDTH: 200px; HEIGHT: 30px; COLOR: #000000; BORDER-BOTTOM: 1px solid; FONT-FAMILY: Tahoma,Verdana,Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #ffffff
}


/* ****** SMALLER SCREENS ****** */
@media only screen and (max-width: 1000px) {
body {
	padding-left: 4%;
}

#navi p {
	font-size:7pt;
}
#content {
	margin-right: 5px;
	padding-top: 15px;
	padding: 1px 2px;
	max-width: 90%;
}

}
/* ****** GETTING SMALLER ****** */
@media only screen and (max-width: 880px) {
body {
	padding-left: 4%;
}
#navi p {
	font-size:7pt;
}
article {
	padding-left:6px;
	min-height: 600px;
	margin-top: -40px;
	margin-left:20px;
}
#content {
	margin-right:4px;
	padding-top: 15px;
	padding: 1px 2px;
	max-width: 92%;
}

.sidebar {
  margin: 0;
margin-right: 70px;}
}

/* ****** TABLETS ****** */

@media only screen and (max-width: 720px) {
#navi p {
font-size:6pt;
}
body {padding-left: 4px;}
.sidebar {
  margin: 0;
margin-right: 0px;}
header { 
	padding-top: 0;
	padding-left: 2vw;
	padding-right: 2vw;
	margin-right: 0;
	height: 123px;}
header p {font-size:9pt;
	line-height:12pt;
	color: #a59fd3;}
article { 
	margin-left: 5px;
	margin-right: 5px;
}
}
/* ****** MOBILE PHONES ****** */
@media only screen and (max-width: 615px) {
body {
	padding-top: 0em;
	padding-bottom: 0.5em;
	padding-left: 0%;
	padding-right: 2%;
	background-size: 180px;
}

article {
    margin-left:4px;
	margin-right:4px;
	min-height: 600px;
	max-width: 93%;
  }
footer  {
	padding-top: 0;
	padding-bottom: 0.5em;
	padding-left: 2%;
	padding-right: 2%;
	margin: 0 3%;
}
h1 {font-size: 4vw;}
h2 {font-size: 3.5vw;}
h3 {font-size: 3vw;}
img {
max-width: 100%;
height: auto;
margin: auto;
}
#bg1a, #bg1b {background-position: 5px 10px;}
#main {margin-top: -50px;}
article > .sidebar {
  margin: auto;
  margin-top:75px;
  padding: 0;
  width: 30px;
  background-color: #f1f1f1;
  float: right;
  right: 0;
  position: relative;
  overflow: visible;
}
.sidebar a {
    text-align: center;
    float: none;
  }
}

/* ****** X-SMALL MOBILE SCREENS ****** */
@media only screen and (max-width: 400px) {
body {
	padding-top: 0em;
	padding-bottom: 0.5em;
	padding-left: 0%;
	padding-right: 0%;
	background-size: 180px;
}
#main > article {
	max-width: 390px;
	padding-left: 2px;
  }

article {
	background-image: url("images/bg-maintop.jpg"), url("images/copyright-m.jpg");
	background-repeat: repeat-x, no-repeat;
    margin-left:2px;
	margin-right:2px;
	min-height: 600px;
  }
footer  {
	padding-top: 0;
	padding-bottom: 0.5em;
	padding-left: 5px;
	padding-right: 5px;
	margin: 0 3%;
}

h1 {font-size: 4vw;}
h2 {font-size: 3.5vw;}
h3 {font-size: 3vw;}
img {
max-width: 100%;
height: auto;
margin: auto;
}
#bg1a, #bg1b {background-position: 5px 10px;}
#main {margin-top: -50px;}
#content {
	float:left;
	margin:0; 
	padding-top: 15px;
	padding: 1px 5px;
	max-width: 90%;
}
#search {max-width: 375px;}
#navi {
	font-family: 'SubatomicGertie', serif;
	margin-top:-5px;
	background-image: url('images/nav-transp-m.png');
	background-repeat: no-repeat;
	background-position: top left;
	background-size:auto;
	overflow:visible;
}

#navi p {
	font-size:4pt;
	padding-top:2px;
}

}