<style type="text/css">
/* Copyright: Ron Mazier */


*,
*::before,
*::after {
  box-sizing: border-box;
}




/**** Body *********************/
	html {
		display: inline-bock;
		}
	body {
			font-family: 'Roboto', sans-serif;
            background-color: #f8f9fa;
            color: #333;
            margin: 0;
            padding: 20px;
        }
		
		p {
  line-height: 1.6; 
}
	video {
		width: 300px;
		}	
	iframe {
		margin-left: 	auto;
		margin-right: 	auto;
		width: 			100%;
		height:			400px;

}	
	form {
		margin: 0px;
		border: 0px;
		padding: 0px;
		}

/**** Header *******************/
	#header	{
		box-sizing:			border-box;
		display:			flex;
		width: 				100%;
		margin: 			0px;
		padding: 			0px;
		border: 			0px;
		text-align: 		right;
		vertical-align: 	center;
		font-weight:		bold;
		background-image:	url("../images/background.png");
		background-size: 	cover;
		background-position: 50% 50%;
		background-repeat: 	no-repeat;
		justify-content: 	space-between;
		align-items: 		center;
		border-bottom:		1px solid rgba(255,255,255,0.6);
		box-shadow: 		2px 2px 6px 0px rgba(0,0,0,0.5);
		color: 				white;
		}
	#header div {
		box-sizing:			border-box;
		display:			inline-block;
		width: 				80%;
		float:				left;
		text-align: 		left;
	}
 	#header div div {
		box-sizing:			border-box;
		display:			inline-block;
		width: 				200px;
		min-width:			200px;
		padding:			0px;
		float:				left;
		text-align: 		left;
	}
 	#header div div img 	{
		box-sizing:			border-box;
		display:			flex;
		height: 			90%;
		max-width: 			120px;
		margin-left:		15px;
		float: 				none;
		border: 			none;
	} 
	
/**** Navbar ****/
	#navbar	{
		box-sizing:	border-box;
		width: 		100%;
		box-sizing:	border-box;
		display:	inline-block;
		width:		100%;
		margin:		0px;
		border:		0px;
		clear:		both;
		font-size:120%;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		}
	#nav {
		margin: 0px;
		margin-left: 50px;
		padding: 0px;
		}
	#navleft		{
		box-sizing:	border-box;
		float: 		left;
		margin: 	2px;
		padding: 	2px;
		color: 		rgba(255,255,255,.5);
		-webkit-animation: mymove 3s alternate infinite; /* Chrome, Safari, Opera */
		animation: mymove 10s alternate infinite;
		}
	#navleft img	{
		height:100%;
		}	
	#nav ul {
		float: left;
		list-style: none;
		margin: 0px;
		margin-right: auto;
		padding: 0px;
		}
	#nav li {
			float: left;
			list-style: none;
			margin: 0px;
			margin-left: 0px;
			padding: 0px;
			}
		@media screen and (max-width:540px)	{
			#nav {
				margin-left: 10px;
			}
		}
		@media screen and (max-width:600px)	{
			#nav li {
				width: 25%;
				min-width: 25%;
			}
		}
			#nav li a {
				background: transparent;
				color: #111111;
				display: block;
				font-weight: bold;
				margin: 0px;
				padding: 8px 20px 8px 20px;
				text-decoration: none;
				}
			#nav li a:hover, #nav li a:active {
				background: rgba(0, 0, 0, 0.1);
				}
			#nav li li a, #nav li li a:link, #nav li li a:visited {
				background: rgba(255,255,200,0.4);
				width: 170px;
				color: #333333;
				float: none;
				font-weight: normal;
				margin: 0px;
				padding: 4px 10px 4px 10px;
				text-decoration: none;
				border-bottom: 1px solid #CCCCCC;
				border-left: 1px solid #CCCCCC;
				border-right: 1px solid #CCCCCC;
				}
			#nav li li a:hover, #nav li li a:active {
				background: transparent;
				color: #111111;
				}
			#nav li ul {
				z-index: 9999;
				position: absolute;
				left: -999em;
				height: auto;
				width: 190px;
				margin: 0px;
				padding: 0px;
				background: rgba(255,200,255,0.5);
		}
			#nav li li { 
			}
			#nav li ul a { 
				width: 160px;
			}
			#nav li ul a:hover, #nav li ul a:active { 
			}
			#nav li ul ul {
				margin: -32px 0 0 191px;
				}
			#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
				left: -999em;
			}
			#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
				left: auto;
			}
			#nav li:hover, #nav li.sfhover { 
				position: static;
			}
			#nav .current_page_item a {
				background: #FFFFFF;
				color: #333333;
			}

/**** Wrap **********************/
	#wrap		{
			box-sizing:		border-box;
			width: 			100%;
			margin: 		0px;
			padding:		0px;
			border: 		0px;
			display:		block;
			color: 			#333333;
		}
	#content	{
			box-sizing:		border-box;
			width: 			100%;
			margin: 		0px;
			padding:		0px; 
			border: 		0px;
			display:		block;
			margin-left: 	auto;
			margin-right: 	auto;
		}
	#homepage	{
			box-sizing:		border-box;
			width: 			100%;
			background: 	transparent;
			float: 			none;
			clear: 			both;
			display:		inline-block;
			padding: 		20px;
			margin-left: 	auto;
			margin-right: 	auto;
			min-height:		500px;
			text-align:		center;
			font-family: Trebuchet MS, Tahoma, Times New Roman, Arial, Verdana;
		}

/**** Footer *******************/
	#footer {
		box-sizing:border-box;
		display:			inline-block;
		width:		100%;
		margin:		0px;
		padding: 	20px;
		clear:		both;
		font-size:	88%;
		font-style:	italic;
		text-align:	center;
		border-top:		1px solid orange;
		border-bottom:	2px solid black;
		}

/**** 2-columns	****************/
	#leftcolumn		{
		box-sizing:		border-box;
		width: 			20%;
		max-width: 		200px;
		min-width: 		100px;
		padding: 		0px;
		margin: 		0px;
		margin-left: 	auto;
		margin-right:	auto;
		text-align: 	center;
		display:		inline-block;
		clear:			left;
		float:			left;
		}
	#leftcolumn > div {
		box-sizing:		border-box;
		display: 		inline-block;
		width:			100%;
		margin-left:	auto;
		margin-right:	auto;
		padding:		10px;
		float: 			left;
		clear: 			both;
		margin-right:	auto;
		margin-left:	auto;
		text-align: 	left;
		}
	#rightcolumn		{
		box-sizing:		border-box;
		width:			80%;
		max-width: 		500px;
		padding: 		10px;
		margin-top:		0px;
		margin-left: 	auto;
		margin-right:	auto;
		text-align: 	center;
		clear: 			right;
		float: 			left;
	}
/*
	#rightsidepage	div	{
		box-sizing:		border-box;
		width:			100%;
		margin:			3px;
		margin-top: 	7px;
		padding: 		0px;
		border: 		1px solid #CCCCCC;
		border-bottom: 	1px solid #999999;
		border-right: 	1px solid #999999;
		border-radius: 	5px;
		float: 			left;
		clear: 			both;
		text-align: 	left;
		display: 		inline-block;
		background-color: white;
	    box-shadow: 	4px 4px 4px rgba(51,150,197,0.1);
	}
*/
	@media screen and (max-width:900px) and (min-width:540px) {
			
		#headerleft img 	{
			background: url(logo_MAZI.jpg) no-repeat;
			background-size: 40px;
			max-height: 30px;
			margin: 	15px;
			}
		}
	@media screen and (max-width:539px)	{
		#headerright, #headerleft, #leftcolumn, #rightsidepage {
			width:		100%;
			display: 	inline-block;
			}
		#headerleft img 	{
			max-height: 30px;
			margin: 	5px;
			}
		}

/**** BUTTONS and HTML ELEMENTS ****/
	a:hover {
		text-decoration: underline;
	}
	a:focus {
		outline: 2px solid #0056b3;
	}
	
	input {
		border-radius: 		5px;
		padding:			5px;
		height:				32px;
		font-size:			16pt;
		margin: 		 	5px;
		width: 		  	100%;
		max-width:  	112px;
	}
	input[type="button"], input[type="submit"] {
		box-sizing:		border-box;
		display:		in-line;
		margin-left: 	auto;
		margin-right: 	auto; 
		word-wrap: 		normal;
		white-space: 	normal;
		border:			1px;
		transition: 	width 2s;
		transition-timing-function: linear;
		text-align: 	center;
		background-color: rgba(255, 165, 0, 1);
		box-shadow: 	1px 2px 4px rgba(0,0,0,0.6);
	}
	
	input[type="button"]:hover,	input[type="submit"]:hover {
		text-decoration: underline;
		box-shadow: 	2px 2px 2px rgba(0,0,0,0.6);
		transform: 		translateY(-1px);
		background-color: 	rgba(255, 165, 0, 0.9);
		}

	.go	{
		width: 			32px;
		height: 		32px;
		border:			1px;
		border-radius: 	16px;
	}

	textarea {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		border: 1px solid #ccc;
		border-radius: 5px;
		margin-right:auto;
		margin-left:auto;
		background-color: #f8f8f8;
	}

h1 {
        margin-left: auto;
        margin-right: auto;
        text-align:center;

}

#gameCanvas {
        border: 2px solid black; /* Add a black border of 2px */
        display: block; /* Ensure proper alignment and spacing */
        margin: 20px auto; /* Center it with margin */
    }

/* Table Properties ******************/
	table {
        margin-left: auto;
        margin-right: auto;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		}

	table tr {
        min-height: 32px;
		}

	th {
		background-color: rgb(60,190,255,0.5);
		text-align: center;
		font-size:	120%;
		font-weight:	bold;
		border-bottom: 1px solid white;
		padding:	10px;
		}
	tr:nth-child(even) {background-color: rgba(60,190,255,0.2)}
	
	td {
		padding: 5px;
	}

	form .inputer {text-align:center;} 
	.button:active {
			box-shadow: 	1px 1px rgba(0,0,0,0.6);
			transform: 		translateY(2px);
	}
	#HomeButton {
		float: right;
		position:absolute;
		top:100;
		left:200;
		}
	form {
		margin: 0px;
		border: 0px;
		padding: 0px;
		}
	video {
		width: 300px;
		}	


/*** bbox ***/
	.bbox	{ 
		box-sizing:		border-box;
		display:		inline-block;
		width: 			90%;
		max-width: 		1024px;
		width:			100%;
        margin: 20px auto;
		padding: 20px;
		text-align: 	left;
		clear:			both;
		color: #333;
		border: 		1px solid rgba(0,0,0,0.5);
		box-shadow: 	1px 1px 1px 1px rgba(0,0,0,0.2);
		background-color: 	#ffffff;
		border-radius: 8px;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

	} 
	.bbox:hover {
		border: 		1px solid rgba(0,0,0,1);
		box-shadow: 	1px 1px 2px 2px rgba(0,0,0,0.5);
		transition:		box-shadow 0.3s ease;
		

	} 

	.bbox .radios {
		box-sizing:	border-box;
		display:	block;
		border: 	1px;
		float:		right;
	}
	.bbox .title {
		box-sizing:	border-box;
		display:	block;
		padding: 	2px;
		border-bottom: 	1px solid black;
		font-weight:bold;
		text-align: left;
		float:		left;
		width:		50%;
		font-size:	120%;
		clear:		right;
		background-color: 	#ffffbb;
	}
 
	.bbox .topcell {
		box-sizing:	border-box;
		display:	block;
		float:		right;
		width:		100px;
		padding: 	5px;
		border: 	1px solid black;
		background-color: 	#ccffff;
	}
 
	.bbox .cell {
		box-sizing:	border-box;
		display:	inline-block;
		float:		left;
		padding: 	2px;
		min-width:		100px;
		border: 	1px solid black;
		text-align: left;
		background-color: 	#ffccff;
	}
	.bbox .values {
		box-sizing:	border-box;
		display:	block;
		color:blue;
	}
 
	.bbox input[type="submit"] {
		width:		40px;
		height:		40px;
		float:		left;
		display:	inline;
	} 
	.bbox input[type="button"] {
		width:		40px;
		height:		40px;
		float:		left; 
		display:	inline; 
	} 
	.bbox input[value="X"] {
		float: left;
		display:	inline;

	} 
	.bbox input[type="text"] {
		box-sizing:	border-box;
		display:	inline-block;
		width:		300px;
		max-width:	100%;
		border: 	1px;
		background-color: #ffefef;

		border-color:black;
		float:		left;
	}
	.bbox input[type="checkbox"] {
		box-sizing:	border-box;
		display:	inline-block;
		height:		32px;
		border: 	1px;
	}
	.bbox input[type="radio"] {
		box-sizing:	border-box;
		display:	inline;
		border: 	1px;
		height:		32px;
	}
	.bbox ul {
		box-sizing:			border-box;
		display:			inline-block;
		width: 				100%;
		list-style-type: 	none;
		margin: 			0px;
		padding: 			0px;
		border: 			0px solid black;
	}
	.bbox ul li {
		box-sizing:		border-box;
		display:		block;
		list-style-type: none;
		padding: 	0px;
	}

	.bbox .A {
		width: 100%;
		float: left;
		clear:left;
	} 
	.bbox .B {
		width: 100%;
		max-width:350px;
		float: left;
	} 
	.bbox .name {
		width: 100%;
		font-size:	140%;
		font-weight:	bold;
		float: left;
		clear: both;
		
	} 

	.bbox .date {
		width: 100%;
		font-weight:	bold;
		float: right;
		clear: both;
		
	} 
	.bbox .calendar {
		max-width:	320px;
		border:		1px;
		float: 		right;
	} 
	.bbox .calendar span {
		float: right;
		clear:left;
	} 

/*** Start Box ***/

	.StartBox		{
		box-sizing: 	border-box;
		padding:		5px; 
		border: 		0px solid  rgba(51,150,197,0.95);
		width:			100%;
		max-width:		500px;
		display:		inline-block;
		margin:			0px;
		color: 			#111111;
 		}
	.GrayScreen .closebutton	{ 
			clear:		right;
			float:		right;
			position: 	relative;
		}
	.GrayScreen .closebutton:hover{ 
			font-weight:	bold;
		}	
	.StartBox .boxheader	{ 
		box-sizing:		border-box;
		width:			100%;
		border: 		0px solid  rgba(51,150,197,0.95);
		margin-bottom: 	10px;
		margin-left:	auto;
		margin-right: 	auto;
		text-align: 	center;
		font-size:		14pt;
		font-weight:	bold;
		float:			left;
		clear: 			left;
 		}
	.StartBox input[type="text"] {
		width:			100%;
		height:			28px;
		font-size:		12pt;
		background-color: white;
 		}
	.StartBox input[type="button"] {
		
		width:			100%;
		color: 			white;
		text-align: 	center;
		font-size:		12pt;
		font-weight:	bold;
		margin-left: 	auto;
		margin-right: 	auto; 
		float: 			right;
		background-color: 	rgba(109,208,255,0.95);
		}
	
/******	Image Sizes *********/
	.NRrightside_image {
		width: 350px;
		float: left;
		margin: 10px;
	}
	.large_image {
		width: 500px;
		float: left;
		margin: 20px;
	}
	.medium_image {
		width: 240px;
		float: left;
		margin: 20px;
		margin-left: 10px;
	}
	.mini_image {
		height: 100px;
		margin: 5px;
		float: left;
	}
	.small_image {
		width: 40px;
		float: left;
		margin: 3px;
	}


/*****	Sidebar ********************/
	#leftsidebar {
		width: 200px;
		border: 0px;
		margin: 0px;
		padding: 0px;
		float: left;
		border-top: 5px solid #bcbcbc;
	}
	#leftsidebar a, #leftsidebar a:visited  {
		color: #343471;
		text-decoration: none;
	}
	#leftsidebar a:hover {
		color: #343471;
		text-decoration: underline;
	}
	#leftsidebar h4 {
		color: #333333;
		font-size: 14px;
		font-weight: normal;
		margin: 0px 0px 5px 0px;
		padding: 0px 0px 0px 0px;
	}
	#leftsidebar p {
		margin: 0px;
		padding: 0px;
		line-height: 20px;
	}
	#leftsidebar a img {
		margin: 1px;
		padding: 0px;
		border: none;
	}
	#leftsidebar .widget  {
		background: #EEEEEE;
		margin: 0px 0px 10px 0px;
		padding: 5px 10px 5px 10px;
		border: 1px solid #CCCCCC;
	}
	#leftsidebar ul {
		list-style-type: none;
		margin: 0px;
		padding: 0px;
	}
	#leftsidebar ul li {
		list-style-type: none;
		margin: 0px 0px 5px 0px;
		padding: 0px;
	}
	#leftsidebar ul ul li a, #leftsidebar ul ul li a:visited {
		color: #333333;
		text-decoration: none;
	}
	#leftsidebar ul ul li a:hover {
		color: #343471;
		text-decoration: underline;
	}
	#leftsidebar ul ul {
		list-style-type: none;
		margin: 0px 0px 0px 5px;
		padding: 0px;
	}
	#leftsidebar ul ul ul {
		list-style-type: none;
		margin: 0px 0px 0px 0px;
		padding: 0px;
	}
	#leftsidebar ul li li {
		padding: 0px 0px 0px 15px;
		margin: 0px 0px 0px 0px;
	}
	#leftsidebar ul li ul li {
		padding: 0px 0px 0px 15px;
		margin: 0px 0px 0px 0px;
	}
	#leftsidebar .textwidget {
		margin: 0px;
		padding: 0px;
	}

	/* Chrome, Safari, Opera */
	@-webkit-keyframes myslide {
			from {background-position: 	20% 70%;}
			to {background-position: 	25% 70%;}
		} 

	/* Standard syntax */
	@keyframes myslide {
			from {background-position: 	20% 70%;}
			to {background-position: 	25% 70%;}
		}

/* Copyright: Ron Mazier */
</style>