@import "exclude.css";

/* use a more readable font, document should not have margins, font size changes with screen resolution */
BODY {font-family: arial, helvetica, verdana, sans-serif; margin: 0em; padding: 0em; font-size: calc(12px + (32 - 14) * ((100vw - 300px) / (2800 - 300))); line-height: calc(1.2em + (1.5 - 1.2) * ((100vw - 300px)/(2800 - 300))); background-color: grey;}

H2, H4		{text-align: center; margin: 0em;}
H2			{font-size: 2em; padding: 1em; line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(2800 - 300)));} /* needs more line height to wrap correctly */
P			{text-align: justify; margin: 1em; padding-left: 1em; padding-right: 1em; font-size: 1em}
LI			{text-align: justify; margin: 0em; padding-left: 0em; padding-right: 0em; font-size: 1.5em}
P.copyright {margin: 1em; font-size: 1em}
H3 			{text-align: left; margin: 0em;}

IMG 		{padding-left: 0em; padding-right: 0em;}
IMG.place	{position:relative; left: calc(80vw - 200px); top: -100px; z-index:1;}

DIV.screenonly, PRE	 {text-align: left;}
DIV.navigation       {text-align: center;}

/* Draw the navigation menu and adjust the size depending on screen */
UL.navigation { list-style-type:none; margin:0; padding:0; position: fixed; top:0; display: flex; flex-wrap: wrap; overflow:hidden; border-bottom: 0.12em solid #000000; border-right: 0.12em solid #000000; border-left: 0.12em solid #000000; z-index:255;}
LI.navigation { float:left; z-index:255}
A:link.navigation,A:visited.navigation { display:block; width: calc(42px + 14vw); font-weight:bold; color:white; background-color: rgba(0, 0, 255, 0.5); text-align:center; padding:4px; text-decoration:none;}
A:hover.navigation,A:active.navigation { background-color:rgba(128, 128, 128, 0.5);}

/* when printing, change font for readability, don't show navigational items or boxes */
@media print {
	BODY {font-family: times, serif;}
	.screenonly, .navigation, .smallscreen, .place {display: none;} /* certain elements should not be printed */
	A:link, A:visited, A:hover, A:active	{ color:black; text-decoration:none; }	/* links to stay nondescript */
	H3 {border: none;}
}

/* make things look a little nicer on screen */
@media screen { 
	BODY {margin-left: 0em; margin-right: 0em; background-attachment: fixed; background-size: auto 100%;}
	H3 {padding: 0.5em 1em 0.5em; margin-left: 1.6em; margin-right: 2.2em;  box-shadow: 0.5em 0.5em #333333;}
	.frame {margin-right: 4%; margin-left: 4%; margin-bottom:4%; padding-bottom:0.5%; background-color: white;}
}

@media only screen and (max-width: 600px)  {
	.frame {margin-right: 3.5%; margin-left: 3.5%; margin-bottom:3.5%;}
	LI.smallscreen, IMG.place {display: none;} /* topnav wraps from one into two rows */
	A:link.smallscreen,A:visited.smallscreen { display:block; width: calc(42px + 14vw); font-weight:bold; color:white; background-color: rgba(0, 0, 255, 0.5); text-align:center; padding:4px; text-decoration:none; }
	A:hover.smallscreen,A:active.smallscreen { background-color:rgba(128, 128, 128, 0.5); }	 
}
@media only screen and (min-width: 600px)  {A.smallscreen {display: none;}}
@media only screen and (min-width: 1000px) {.frame {margin-right: 4.5%; margin-left: 4.5%; margin-bottom:4.5%;}}
@media only screen and (min-width: 1600px) {.frame {margin-right: 5%;   margin-left: 5%;   margin-bottom:5%;  }}
@media only screen and (min-width: 2400px) {.frame {margin-right: 5.5%; margin-left: 5.5%; margin-bottom:5.5%;}}
@media only screen and (min-width: 3600px) {.frame {margin-right: 6%;   margin-left: 6%;   margin-bottom:6%;  }}