body
{
	background-color:		black;
	background-image:		url("pics/bck.bmp");
}

.root
{
	position:			absolute;
	left:				0%;
	top:				0px;
	width:				100%;
	background-color:		black;
}

.cotitle
{
	position:			absolute;
	left:				0%;
	top:				10px;
	width:				100%;
	text-align:			center;
}

.welcome
{
	font-size:			1.0em;
	background-color:		black;
}

.mynav
{
	position:			static;
	width:				100%;
	font-size:			0.9em;
	text-align:			center;
	background-color:		black;
}

.navigation
{
	position:			relative;
	left:				2%;
	width:				96%;
	background-color:		white;
	text-align:			center;
}

.mainbody
{
	position:			relative;
	left:				2%;
	width:				96%;
	color:				#000000;
	background-color:		white;
}

.motto
{
	position:			relative;
	left:				0%;
	width:				100%;
	font-size:			1.0em;
	text-align:			center;
	background-color:		white;
}

.small
{
	font-size:			1.0em;
	color:				#FFD700;
}

.large
{
	font-size:			1.25em;
	color:				yellow;
}

@media only screen and (min-width: 100px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			100px;
		margin-left:		-50px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			11px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		1.3em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 126px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			126px;
		margin-left:		-63px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			11px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		1.3em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 150px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			150px;
		margin-left:		-75px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			11px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		1.3em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 176px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			176px;
		margin-left:		-88px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			11px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		1.3em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 200px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			200px;
		margin-left:		-100px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			11px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		1.3em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 226px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			226px;
		margin-left:		-113px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			11px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		1.3em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 250px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			250px;
		margin-left:		-125px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			11px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		1.3em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 276px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			276px;
		margin-left:		-138px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			11px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		1.3em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 300px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			300px;
		margin-left:		-150px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			11px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		1.3em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 326px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			326px;
		margin-left:		-163px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			11px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		1.3em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 350px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			350px;
		margin-left:		-175px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			12px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		1.35em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 376px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			376px;
		margin-left:		-188px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			13px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		1.4em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 400px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			400px;
		margin-left:		-200px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			14px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		1.45em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 426px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			426px;
		margin-left:		-213px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			15px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		1.5em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 450px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			450px;
		margin-left:		-225px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			16px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		1.55em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 476px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			476px;
		margin-left:		-238px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			17px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		1.6em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 500px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			500px;
		margin-left:		-250px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			18px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		1.65em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 526px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			526px;
		margin-left:		-263px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			19px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		1.7em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 550px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			550px;
		margin-left:		-275px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			20px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		1.75em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 576px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			576px;
		margin-left:		-283px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			21px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		1.8em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 600px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			600px;
		margin-left:		-300px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			22px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		1.85em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 626px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			626px;
		margin-left:		-313px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			23px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		1.9em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 650px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			650px;
		margin-left:		-325px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			24px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		1.95em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 676px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			676px;
		margin-left:		-338px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			25px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		2em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 700px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			700px;
		margin-left:		-350px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			26px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		2.05em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 726px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			726px;
		margin-left:		-363px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			27px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		2.1em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 750px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			750px;
		margin-left:		-375px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			28px;
		width:			100%;
		text-align:		center;
	}

	.large
	{
		font-size:		2.15em;
		color:			#FFD700;
	}
}

@media only screen and (min-width: 776px)
{
	.root
	{
		position:		absolute;
		left:			50%;
		top:			0px;
		width:			776px;
		margin-left:		-388px;
		background-color:	black;
	}

	.cotitle
	{
		position:		absolute;
		left:			0%;
		top:			29px;
		width:			100%;
		text-align:		center;
	}

	.welcome
	{
		font-size:		1.75em;
		text-align:		center;
	}

	.motto
	{
		position:		static;
		left:			0%;
		width:			100%;
		font-size:		1.4em;
		text-align:		center;
		background-color:	black;
	}

	.mynav
	{
		position:		static;
		width:			100%;
		font-size:		1.3em;
		text-align:		center;
		background-color:	black;
	}

	.small
	{
		font-size:		1.25em;
		color:			#FFD700;
	}

	.large
	{
		font-size:		2.2em;
		color:			#FFD700;
	}
}
.myToc		{ color:yellow; text-decoration: none; cursor: hand; }
a.myToc:LINK	{ text-decoration: none; }
a.myToc:VISITED { text-decoration: none; }
a.myToc:HOVER	{ color: #3366ff; text-decoration: none; }

.toc		{ text-decoration: none; cursor: hand; }
a.toc:LINK	{ text-decoration: none; }
a.toc:VISITED	{ text-decoration: none; }
a.toc:HOVER	{ color: #3366ff; text-decoration: none; }


.thumbnail
{
	display: inline-block;
	z-index:			0;
}

.thumbnail:hover
{
	background-color:		transparent;
	z-index:			50;
}

.thumbnail span
{
	/*CSS for enlarged image*/
	position:			fixed;
	background-color:		yellow;
	padding:			5px;
	top:				50%;
	left:				50%;
	transform:			translate(-50%, -50%);
	border:				1px solid gray;
	visibility:			hidden;
	color:				black;
	text-decoration:		none;
}

.thumbnail span img
{
	/*CSS for enlarged image*/
	width:				80vw;
	border-width:			0;
	padding:			2px;
}

.thumbnail:hover span
{
	/*CSS for enlarged image on hover*/
	position:			fixed;
	visibility:			visible;
	top:				50%;
	left:				50%;
	transform:			translate(-50%, -50%);
	/*position where enlarged image should offset horizontally */
}

/* CSS class for the responsive layout */
.responsive-divs
{
	display:			flex;
	justify-content:		space-between;
}

.responsive-divs .div-section
{
	width:				50%;
	padding:			10px;
}

/* Media query for screens smaller than a certain width */
@media only screen and (max-width: 200px)
/* @media (max-width: 768px) */
{
	.responsive-divs
	{
		flex-direction:		column;
	}

	.responsive-divs .div-section
	{
		width:			100%;
	}
}