@charset "UTF-8";
/* CSS Document */

/* viewport CSS */
@viewport {
	zoom:1.0;
	width:device-width;
}

/* the following media query applies to any situation using screen rules */
@media screen {

	body {
		background-color:#C0C0C0;
		font-family:serif;
		font-size:1em;
	}

	h1, h2, h3, h4, h5, h6 {
		text-align:center;
		font-family:sans-serif;
	}

	a:link {
		color:#0000FF;
		text-decoration:none;
	}

	a:visited {
		color:#FF0000;
	}

	a:hover, a:focus {
		font-weight:bold;
		text-decoration:underline;
	}

	a:active {
				font-style:italic;
				color:#FF0000;
			}

	#wrapper {
		background-color:#FFFFFF;
	}

	#banner {
		color:#F5F5DC;
		background: linear-gradient(#0099FF, #000F1A);
		background-color:#0099FF;
	}

	#banner h1, #banner h2, #banner h3, #banner h4, #banner h5, #banner h6 {
		text-align:left;
		word-wrap: break-word;
		overflow-wrap: break-word;
		word-break: break-all;
	}

	#banner p {
		margin:0;
		padding:0;
	}

	#banner a:link, #banner a:visited {
		color:#F5F5DC;
		text-decoration:none;
	}

	#banner a:hover, #banner a:focus {
		text-decoration:underline;
	}

	#header, #footer {
		clear:both;
		background: linear-gradient(#999999, #C0C0C0);
		background-color:#999999;
	}

	/* autoresize images */
	#content img {
		max-width:100%;
		height:auto;
	}

	#content p {
		line-height: 1.5;
	}

	table, td, th {
		border-color:#000000;
		border-style:solid;
		border-width:thin;
	}

}

/* the following media query is meant to apply a certain set of rules if width is less than or equal to 374px */
@media screen and (max-width:374px)
{
	body {
		font-size:2em;
	}
	
	#nav {
		width:100%;
	}

	#menu {
		list-style-type:none;
		margin:0;
		padding:10px 0 0 0;
	}

	#menu li {
		float:left;
		text-decoration:none;
		margin:0 0 0 10px;
		padding:0;
		position:relative;
	}

	#menu ul {
		display:none;
		list-style-type:none;
		position:absolute;
		top:100%;
		left:0;
		background:#FFFFFF;
		padding:0;
	}

	#menu ul li {
		float:none;
		margin-top:20px;
	}

	#menu li:hover > ul, #menu li:focus > ul, #menu li:active > ul {
		display:block;
	}

	#content {
		clear:left;
	}

	#content, #nav {
		clear:both;
	}

}

/* the following media query is meant to apply a certain set of rules if width is between 375px and 980px */
@media screen and (min-width:375px) and (max-width:980px)
{
	body {
		font-size:2em;
	}
	
	#nav {
		width:100%;
	}

	#menu {
		list-style-type:none;
		margin:0;
		padding:10px 0 0 0;
	}

	#menu li {
		float:left;
		text-decoration:none;
		margin:0 0 0 20px;
		padding:0;
		position:relative;
	}

	#menu ul {
		display:none;
		list-style-type:none;
		position:absolute;
		top:100%;
		left:0;
		background:#FFFFFF;
		padding:0;
	}

	#menu ul li {
		float:none;
		margin-top:20px;
	}

	#menu li:hover > ul, #menu li:focus > ul, #menu li:active > ul {
		display:block;
	}

	#content {
		clear:left;
	}

	#content, #nav {
		clear:both;
	}

}

/* the following media query sets rules for widths greater than or equal to 981px */
@media screen and (min-width:981px)
{
	#wrapper {
		width:90%;
		margin-left:auto;
		margin-right:auto;
	}

	#nav {
		float:right;
		clear:right;
		width:25%;
	}
	
	.arrow {
		display:none;
	}

	#content {
	float:left;
	clear:left;
	width:70%;
	}

	#menu {
	list-style-type:none;
	}

	#menu li {
		margin-bottom:20px;
	}

	#menu ul {
		list-style-type:none;
	}

	#menu ul li {
		margin-bottom:20px;
	}
}

/* the following are rules that apply to the printed page */
@media print {

	/*
	The following are the default rules for a page
	*/
	body {
			background-color:#FFFFFF;
			color:#000000;
			font-family:serif;
			font-size:1em;
		}

	/* make all headings centered  and have a sans-serif font */
	h1, h2, h3, h4, h5, h6 {
		font-family:sans-serif;
		text-align:center;
	}

	/* format page links */
	a:link, a:visited {
		color:#520;
		font-weight:bold;
		text-decoration:underline;
	}

	a:link:after, a:visited:after {
		display:inline-block;
		margin-left:5px;
		font-style:normal;
		content: " (" attr(href) ")";
	}

	/* format printing of acronyms and abbreviations */
	abbr:after, acronym:after {
		content: " (" attr(title) ")";
	}

	/* put content in center of page against a white background */
	#wrapper {
		color:#000000;
		width:100%;
	}

	/*
	banner rules
	*/
	#banner {
		display:none;
	}

	#banner h1 {
		text-align:left;
	}

	#banner p {
		margin:0;
		padding:0;
	}

	#banner a:link, #banner a:visited {
		color:#000000;
		text-decoration:none;
	}

	#banner a:hover, #banner a:focus {
		text-decoration:underline;
	}

	/* create separator for header and footer and keep them at the bottom */
	#header, #footer {
		display:none;
		clear:both;
		background-color:#000000;
	}

	/* content formatting */
	#content {
		color:#000000;
		width:100%;
	}

	/* autoresize images */
	#content img {
		max-width:100%;
		height:auto;
	}

	dd {
			margin-bottom:20px;
		}

	/* table formatting */
	table {
			margin-right:auto;
			margin-left:auto;
			border-style:solid;
			border-color:#000000;
			border-width:thin;
		}

	td, th {
			border-style:solid;
			border-color:#000000;
			border-width:thin;
	}

	th {
		font-family:sans-serif;
	}

	/* menu formatting */
	#nav {
			display:none;
			color:#000000;
			width:25%;
		}

	#fmess {
		display:none;
	}
}