@media screen {
BODY {
	font-family: Arial, sans-serif;
	margin: 0.5em;
	background-color: #101010;
}

div.main {

}

div.ads {
	
}

h1, h2, h3 {
	font-weight: bold;
	margin: 0em;
	color: #EEEEEE;
}

h1 {
	/* font-size: 1.6em; */
	font-size: xx-large;
	/* Padding order is TOP, RIGHT, BOTTOM, LEFT */
	padding: 1.5em 0em 0.5em 0em;
}


h2 {
	font-size: x-large;
	padding: .8em 0em 0.4em 0em;
}



h3 {
	font-size: large;
	padding: 0em 0em 0.1em 0em;
}


p {
	font-size: medium;
	font-family: arial, helvetica, sans-serif;
	padding: 0em 0em 0.5em 0.5em;
	margin: 0 0 0 0;
	color: #AAAAAA;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

p a {
	color: rgb(209, 201, 52);
}

p a:hover {
	color: rgb(250, 240, 60);
}

p a:visited {
	color: rgb(181, 174, 42);
}

img {
	padding: 0em 0em 0.5em 0.5em;
}

img.laurel {
	background-color: #FFFFFF;
	width: 10%;
}

img.laurelWide {
	background-color: #FFFFFF;
	width: 20%;
}

ol {
	font-size: medium;
	font-family: arial, helvetica, sans-serif;
	padding: 0em 0em 0.5em 0em;
	margin: 0 0 0 0;
	color: #DDDDDD;
	word-wrap: break-word;
	overflow-wrap: break-word;
}


li {
	font-size: medium;
	font-family: arial, helvetica, sans-serif;
	padding: 0.5em 0em 0em 1em;
	margin: 0 0 0 2em;
	color: #DDDDDD;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

li p {
	font-size: medium;
	font-family: arial, helvetica, sans-serif;
	padding: 0em 0em 0.5em 0.5em;
	margin: 0 0 0 1em;
	color: #AAAAAA;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

li ol li {
	font-size: medium;
	font-family: arial, helvetica, sans-serif;
	padding: 0.3em 0em 0em 1.5em;
	margin: 0 0 0 2em;
	color: #DDDDDD;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

table {
	border-collapse: collapse;
	color: #EEE;
}

span.code {
	font-size: medium;
	font-family: 'Courier New', Courier, monospace;
	padding: 0em 0.1em 0em 0.1em;
	color: #DDDDDD;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

caption {
	font-size: 1.1vw;
	font-weight: bold;
	text-align: left;
	color: #EEEEEE;
	background-color: #000000;
	padding: 0.2em .5em 0.2em .2em;
	margin: .2em;
}


th {
	padding: 0 1em 0 1em;
	color: #A0A0A0;
	font-weight: bold;
	font-size: 1.1em;
	text-align: left;
}


form th {
	font-size: 0.9em;
}


td {
	padding: 0 1em 0 1em;
	text-align: left;
}



img.clickable {
	cursor: pointer;
}


p.footer {
	font-family: arial, helvetica, sans-serif;
	font-style: italic;
	font-size: .8em;
	padding: 0em 0em 0em 0em;
	text-align: center;
}


hr {
	width:95%;
	padding: 0em 0em 0em 0em;
}


hr.footer {
	width:95%;
	padding: 0em 0em 0em 0em;
}



form {
	font-family: Arial, sans-serif;
	color: #EEEEEE;
	margin: 0;
	padding: 0;

	/* min-width: 500px;
	max-width: 800px; */
}



form fieldset {
	clear: both;
	border-color: #000022;
	border-width: 1px;
	border-style: solid;
	padding: 10px;   /* padding in fieldset support spotty in IE */
	margin: 0;
}



form fieldset legend {
	font-size: medium; /* bump up legend font size, not too large or it'll overwrite border on left */
                     /* be careful with padding, it'll shift the nice offset on top of border  */

}


form label { 
	display: block;  /* block float the labels to left column, set a width */
	float: left; 
	width: 22%; 
	padding: 0; 
	margin: .1em 0 0; /* set top margin same as form input - textarea etc. elements */
	text-align: right; 
	font-size:medium;
	color: #EEE;

}


form fieldset label:first-letter {  /* use first-letter pseudo-class to underline accesskey, note that */
	text-decoration:underline;	/* Firefox 1.07 WIN and Explorer 5.2 Mac don't support first-letter */
                            	/* pseudo-class on legend elements, but do support it on label elements */
                                /* we instead underline first letter on each label element and accesskey */
                                /* each input. doing only legends would lessen cognitive load */

}

form br {
	clear:left;
}


form fieldset p {
	color: #000;
	font-size: medium;
}



form p {
	margin: .1em .2em .1em .2em;
	color: #EEE;
	font-size: medium;
}



input {
	font-size: medium;
}


form input, form select, form textarea {
	font-size: medium;
	display: inline; /* inline display must NOT be set or will hide submit buttons in IE 5x mac */
	width:auto;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
	margin:5px 0 0 5px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
}



div.formSection {
	float: left;
	color: #EEE;
	background-color: #000;
	width: 98%;
	margin: 2px;
	clear: both;
}


/* The side navigation menu */
.sidenav {
	height: 100%; /* 100% Full-height */
	width: 0; /* 0 width - change this with JavaScript */
	position: fixed; /* Stay in place */
	z-index: 1; /* Stay on top */
	top: 0; /* Stay at the top */
	left: 0;
	background-color: #111; /* Black */
	overflow-x: hidden; /* Disable horizontal scroll */
	padding-top: 60px; /* Place content 60px from the top */
	transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
  }
  
  /* The navigation menu links */
  .sidenav a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 25px;
	color: #818181;
	display: block;
	transition: 0.3s;
  }
  
  /* When you mouse over the navigation links, change their color */
  .sidenav a:hover {
	color: #f1f1f1;
  }
  
  /* Position and style the close button (top right corner) */
  .sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
  }
  
  /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
  #main {
	transition: margin-left .5s;
	padding: 20px;
  }
}
  
  /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
  @media screen and (max-width: 600px) {
	.sidenav {padding-top: 15px;}
	.sidenav a {font-size: 18px;}

	h1 {
		/* font-size: 1.6em; */
		font-size:xx-large;
		/* Padding order is TOP, RIGHT, BOTTOM, LEFT */
		padding: 1.5em 0em 0.5em 0em;
	}
	
	
	h2 {
		font-size:x-large;
		padding: .8em 0em 0.4em 0em;
	}
	
	
	
	h3 {
		font-size:large;
		padding: 0em 0em 0.1em 0em;
	}
	
	
	p {
		font-size:medium;
		font-family: arial, helvetica, sans-serif;
		padding: 0em 0em 0.5em 0em;
		margin: 0 0 0 0;
		color: #CCCCCC;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}
	
	p a {
		color: #3636e1;
	}
	
	p a:hover {
		color: #2626fc;
	}
	
	p a:visited {
		color: #2c2cb9;
	}

	img.laurel {
		background-color: #FFFFFF;
		width: 30%;
	}

	img.laurelWide {
		background-color: #FFFFFF;
		width: 40%;
	}
  }