
/* * * * *   HEADINGS    * * * * * */

h1 {
	font-family: Arial, Georgia, Times, serif;
	margin-left: 40px;
	margin-right: 60px;
	text-align: center; 
	font-size: 48px;
	font-weight: bold;
	color: #90C;
	background-color: #FFFF03;
	padding-bottom: 3px;
	border-bottom: 2px solid #009;
	margin-bottom: 10px;
	margin-top: 2px;
	}

h2 {
	font-family: Arial, Georgia, Times, serif;
	text-align: center; 
	font-size: 48px;
	font-weight: bold;
	background-color: #FF0;
	color: #90C;
	}
	
h3 {
	font-family: Arial, Georgia, Times, serif;
	text-align: center; 
	font-size: 36px;
	font-weight: bold;
	background-color: #FF0;
	color: #90C;
	padding: 30px, none, 30px, none;
	}
	
h4 {
	font-family: Arial, Georgia, Times, serif;
	text-align: center; 
	font-size: 40px;
	font-weight: bold;
	background-color: #FF0;
	color: #90C;
	margin-left: 140px;
	}
	
/* * * *       CLASSES    * * * * * */

  .navbar li {
	color: #90C;
	font-size: 18px;
	display: inline;
	background-color:  #F93;
	border: 3px solid;
	border-color: #F33 #900 #900 #F33;
	margin-bottom: 10px;
	padding: 25px;
	padding-left: 60px;
	padding-right: 50px;
	}
	
	<!---    Internal Styles   ---->
			<!---
			/* * * * * * * * * *
			* * *
					Borders,etc.
					Borders need a colon: behind the function name
					Borders needs a semi-colon at the end of the attributes
					Border attributes are JUST separated by a space, NO commas
			* * *
			* * * * * * * * * * */
			--->

		* {
			margin: 0px;
			padding: 0px;
			border: 0px;
			}			
		body {
			font-family: Verdana, Arial;
			background-image: url("Images/MCSGiantLogo.png");
			background-repeat: no-repeat;
			background-size: 400px, 440px;
			background-position: center;
			
			<!---   
				background-image: url("www.marioninhsgbbstats.com/Images/MCSGiantLogo.png");
			--->
			}
		.darrow {
			font-size: 9pt;
			position: absolute;
			top: 8px;
			left: 180px;
			}
		.rarrow {
			font-size: 9pt;
			position: absolute;
			top: 3px;
			left: 215px;
			}
		.rarrow2 {
			font-size: 9pt;
			position: absolute;
			top: 3px;
			left: 150px;
			}
		.rarrow3 {
			font-size: 9pt;
			position: absolute;
			top: 2px;
			left: 100px;
			}
		.larrow {
			font-size: 9pt;
			position: absolute;
			top: 3px;
			left: 5px;
			}
		.lev3 {
			position: absolute;
			top: 0;
			left: 235px;
			width: 240px;
			list-style: none;
			padding: 0;
			margin: 0;
			display: none;
			}
		.lev3 > li {
			height: 30px;
			background: #FFB4FF;
			}
		.lev3 > li:hover { 
			background: #CCCCCC;
			}
			
		.lev3_left {
			position: absolute;
			top: 0;
			left: -205px;
			width: 205px;
			list-style: none;
			padding: 0;
			margin: 0;
			display: none;
			}
		.lev3_left > li {
			height: 30px;
			background: #FFB4FF;
			}
		.lev3_left > li:hover { 
			background: #CCCCCC;
			}
			
		.lev3a {
			position: absolute;
			top: -60px;
			left: 235px;
			width: 240px;
			list-style: none;
			padding: 0;
			margin: 0;
			display: none;
			}
		.lev3a > li {
			height: 30px;
			background: #999999;
			}
		.lev3a > li:hover { 
			background: #CCCCCC;
			}
			
		.lev3b {
			position: absolute;
			top: -120px;
			left: 235px;
			width: 240px;
			list-style: none;
			padding: 0;
			margin: 0;
			display: none;
			}
		.lev3b > li {
			height: 30px;
			background: #999999;
			}
		.lev3b > li:hover { 
			background: #CCCCCC;
			}
			
		.lev3bt {
			position: absolute;
			top: -112px;
			left: 170px;
			width: 200px;
			list-style: none;
			padding: 0;
			margin: 0;
			display: none;
			}
		.lev3bt > li {
			height: 30px;
			background: #999999;
			}
		.lev3bt > li:hover { 
			background: #CCCCCC;
			}
			
		.lev3c {
			position: absolute;
			top: -240px;
			left: 235px;
			width: 240px;
			list-style: none;
			padding: 0;
			margin: 0;
			display: none;
			}
		.lev3c > li {
			height: 30px;
			background: #999999;
			}
		.lev3c > li:hover { 
			background: #CCCCCC;
			}
			
		.lev3d {
			position: absolute;
			top: -180px;
			left: 235px;
			width: 250px;
			list-style: none;
			padding: 0;
			margin: 0;
			display: none;
			}
		.lev3d > li {
			height: 30px;
			background: #999999;
			}
		.lev3d > li:hover { 
			background: #CCCCCC;
			}
			
		.lev3ss {
			position: absolute;
			top: 0;
			left: 115px;
			width: 210px;
			list-style: none;
			padding: 0;
			margin: 0;
			display: none;
			}
		.lev3ss > li {
			height: 30px;
			background: #FFB4FF;
			}
		.lev3ss > li:hover { 
			background: #CCCCCC;
			}
			
		.lev3t {
			position: absolute;
			top: 0;
			left: 170px;
			width: 225px;
			list-style: none;
			padding: 0;
			margin: 0;
			display: none;
			}
		.lev3t > li {
			height: 30px;
			background: #999999;
			}
		.lev3t > li:hover { 
			background: #CCCCCC;
			}
			
		.lev3ts {
			position: absolute;
			top: 0;
			left: 235px;
			width: 185px;
			list-style: none;
			padding: 0;
			margin: 0;
			display: none;
			}
		.lev3ts > li {
			height: 30px;
			background: #999999;
			}
		.lev3ts > li:hover { 
			background: #CCCCCC;
			}
			
		.lev2 {
			position: absolute;			
			left: 0;
			height: 45px;
			width: 240px;
			list-style: none;
			padding: 0;
    		margin: 0 0 0 -10px;
			display: none;
			}	
							
		.lev2a {
			position: absolute;			
			left: 0px;
			height: 45px;
			width: 175px;
			list-style: none;
			padding: 0;
    		margin: 0 0 0 -10px;
			display: none;
			}
		.lev2ss {
			position: right-side;			
			left: 0;
			height: 45px;
			width: 240px;
			list-style: none;
			padding: 0;
    		margin: 0 0 0 -10px;
			display: none;
			}
		.lev2ssmd {
			position: absolute;			
			left: 0;
			height: 45px;
			width: 240px;
			list-style: none;
			padding: 0;
    		margin: 0 0 0 -10px;
			display: none;
			}
			
		.lev4 {
			position: absolute;			
			left: 0;
			width: 200px;
			list-style: none;
			padding: 0;
    		margin: 0 0 0 -10px;
			display: none;
			}
		.lev4a {
			position: relative;			
			left: -25px;
			width: 200px;
			height: 30px;
			list-style: none;
			padding: 0;
    		margin: 0 0 0 -10px;
			display: none;		
			}	
		.lev4b {
			position: relative;			
			left: -50px;
			width: 200px;
			height: 30px;
			list-style: none;
			padding: 0;
    		margin: 0 0 0 -10px;
			display: none;		
			}				
		.lev4n {
			position: absolute;
			top: 0;
			left: 235px;
			width: 240px;
			list-style: none;
			padding: 0;
			margin: 0;
			display: none;
			}
		.lev4n > li {
			height: 30px;
			background: #999999;
			}
		.lev4n > li:hover { 
			background: #CCCCCC;
		}
		
		#nav2 {
			list-style: none;
			padding: 0;
			margin: 20px 0 0 70px;
			height: 550px;
			width: 1200px;
			border: 1px dashed aqua;
			}
		#nav2 > li {
			position: relative;
			float: left;
			height: 30px;
			width: 200px;
			background: #FFF200;
			text-align: center;
			}
		#nav2 > li:hover { 
			background: #F9CDAA;
			}
		#nav2 > li:hover .lev2 {
					/* * * *      On hover, display the next level's menu              * * * */
			display: block;
			position: relative;
			height: 37px;
			text-align: left;
			width: 240px;
			margin-left: -40px;
			}
		#nav2 > li:hover .lev2a {
					/* * * *      On hover, display the next level's menu              * * * */
			display: block;
			position: relative;
			height: 37px;
			text-align: left;
			width: 175px;
			margin-left: -40px;
			}
		#nav2 > li:hover .lev2ss {
					/* * * *      On hover, display the next level's menu              * * * */
			display: block;
			position: relative;
			height: 37px;
			text-align: left;
			width: 120px;
			margin-left: -40px;
			}
		#nav2 > li:hover .lev2ssmd {
					/* * * *      On hover, display the next level's menu              * * * */
			display: block;
			position: relative;
			height: 37px;
			text-align: left;
			width: 120px;
			margin-left: -40px;
			}
		#nav2 > li:hover .lev22 {
					/* * * *      On hover, display the next level's menu              * * * */
			display: block;
			position: relative;
			height: 37px;
			text-align: left;
			width: 240px;
			margin-left: -40px;
			}
			
		#nav2 > li:hover .lev4 {
					/* * * *      On hover, display the next level's menu              * * * */
			display: block;
			position: relative;
			height: 30px;
			text-align: left;
			width: 200px;
			margin-left: -40px;
			}
		#nav2 > li:hover .lev4b {
					/* * * *      On hover, display the next level's menu              * * * */
			display: block;
			position: relative;
			height: 30px;
			text-align: left;
			width: 200px;
			margin-left: -40px;
			}
		#nav2 li:hover > .lev2_nav {
			background-color: #A4D5E2;
			border: 2px solid blue;
			height: 30px;
			margin-top: -30px;
			}
		#nav2 li:hover > .lev2a_nav {
			background-color: #A4D5E2;
			border: 2px solid blue;
			height: 30px;
			margin-top: -30px;
			}
		#nav2 li:hover > .lev2ss_nav {
			background-color: #A4D5E2;
			border: 2px solid blue;
			height: 30px;
			margin-top: -30px;
			}
		#nav2 li:hover > .lev22_nav {
			background-color: #A4D5E2;
			border: 2px solid blue;
			height: 30px;
			margin-top: -30px;
			}
		.lev3:hover {
			position: relative;
			background-color: #24FF24;  	/* *	GREEN	* */
			border: 2px solid blue;
			height: 30px;
			margin-top: -2px;
			}
		.lev3_left:hover {
			position: relative;
			background-color: #24FF24;  	/* *	GREEN	* */
			border: 2px solid blue;
			height: 30px;
			margin-top: -2px;
			}
		.lev3a:hover {
			position: relative;
			background-color: #FF6CFF;		/* *	NEON PURPLE 	* */
			border: 2px solid blue;
			height: 30px;
			margin-top: -2px;
			}
		.lev3b:hover {
			position: relative;
			background-color: #90FFFF;		/* *	CYAN		* */
			border: 2px solid blue;
			height: 30px;
			margin-top: -2px;
			}
		.lev3bt:hover {
			position: relative;
			background-color: #90FFFF;		/* *	CYAN		* */
			border: 2px solid blue;
			height: 30px;
			margin-top: -2px;
			}
		.lev3c:hover {
			position: relative;
			background-color: #FFD8D8;		/* *	MAGENTA		* */
			border: 2px solid blue;
			height: 30px;
			margin-top: -2px;
			}
		.lev3d:hover {
			position: relative;
			background-color: #24FF24;		/* *	Light Green		* */
			border: 2px solid blue;
			height: 30px;
			margin-top: -2px;
			}
		.lev3ss:hover {
			position: relative;
			background-color: #24FF24;  	/* *	GREEN	* */
			border: 2px solid blue;
			height: 30px;
			margin-top: -2px;
			}	
		.lev3t:hover {
			position: relative;
			background-color: #24FF24;  	/* *	GREEN	* */
			border: 2px solid blue;
			height: 30px;
			margin-top: -2px;
			}
		.lev3ts:hover {
			position: relative;
			background-color: #24FF24;  	/* *	GREEN	* */
			border: 2px solid blue;
			height: 30px;
			margin-top: -2px;
			}
			
		#nav2 li:hover > .lev2_nav .lev3 {
					/* * * *      On hover, display the next level's menu              * * * */
			display: block;
			position: relative;
			color: #000999;
			margin-left: -40px;			
			}
		#nav2 li:hover > .lev2a_nav .lev3 {
					/* * * *      On hover, display the next level's menu              * * * */
			display: block;
			position: relative;
			color: #000999;
			margin-left: -40px;			
			}
		#nav2 li:hover > .lev2ss_nav .lev3 {
					/* * * *      On hover, display the next level's menu              * * * */
			display: block;
			position: relative;
			color: #000999;
			margin-left: -40px;			
			}
		#nav2 li:hover > .lev2_nav .lev3a {
					/* * * *      On hover, display the next level's menu              * * * */
			display: block;
			position: relative;
			color: #000999;
			margin-left: -40px;			
			}
		#nav2 li:hover > .lev2_nav .lev3b {
					/* * * *      On hover, display the next level's menu              * * * */
			display: block;
			position: relative;
			color: #000999;
			margin-left: -40px;			
			}
		#nav2 li:hover > .lev2_nav .lev3bt {
					/* * * *      On hover, display the next level's menu              * * * */
			display: block;
			position: relative;
			color: #000999;
			margin-left: -40px;			
			}
		#nav2 li:hover > .lev2_nav .lev3c {
					/* * * *      On hover, display the next level's menu              * * * */
			display: block;
			position: relative;
			color: #000999;
			margin-left: -40px;			
			}
		#nav2 li:hover > .lev2_nav .lev3d {
					/* * * *      On hover, display the next level's menu              * * * */
			display: block;
			position: relative;
			color: #000999;
			margin-left: -40px;			
			}
		#nav2 li:hover > .lev2_nav .lev3ts {
					/* * * *      On hover, display the next level's menu              * * * */
			display: block;
			position: relative;
			color: #000999;
			margin-left: -40px;			
			}
		#nav2 li:hover > .lev2ss_nav .lev3ss {
					/* * * *      On hover, display the next level's menu              * * * */
			display: block;
			position: relative;
			color: #000999;
			margin-left: -40px;			
			}	
		#nav2 li:hover > .lev2a_nav .lev3t {
					/* * * *      On hover, display the next level's menu              * * * */
			display: block;
			position: relative;
			color: #000999;
			margin-left: -40px;			
			}
		#nav2 li:hover > .lev2a_nav .lev3bt {
					/* * * *      On hover, display the next level's menu              * * * */
			display: block;
			position: relative;
			color: #000999;
			margin-left: -40px;			
			}
		#nav2 li:hover > .lev2a_nav .lev3_left {
					/* * * *      On hover, display the next level's menu              * * * */
			display: block;
			position: relative;
			color: #000999;
			margin-left: -40px;			
			}
		.lev3_nav {
			position: relative;
			left: 235px;
			top: -30px;
			width: 200px;
			display: none;
		}
		.lev4 {
			/* * 	width: 120px;	* */
		}
		
		.lev3:hover .lev3_nav {
			display: block;
		}
		
		.lev3:hover .lev4a {
			display: block;
		}
		
		.lev4a:hover {
			background-color: #ff6cFF;
			border: 2px solid black;
		}
		.lev3:hover .lev4b {
			display: block;
		}
		
		.lev3ts:hover .lev3_nav {
			display: block;
		}
		.lev3ts:hover .lev4a {
			display: block;
		}
		.lev3ts:hover .lev4b {
			display: block;
		}
		
		.lev4b:hover {
			background-color: #ff6cFF;
			border: 2px solid black;
		}
/* * * *
		* * *             Menu Link Styles               * * * *
															* * */

		#nav2 a {
					/* * * *        Apply to all links inside the multi-level menu      * * * */
			font: bold 14px Arial, Helvetica, sans-serif;
			color: #000;
			text-decoration: none;
			padding: 0 0 0 10px;

					/* * * *         Make the link cover the entire list item-container      * * * */
			display: block;
			line-height: 30px;
			}
		.lev1 a:hover { 
			color: #000000; 
			}
		.lev1c a:hover { 
			color: #000000; 
			}
					/* * * *			Body after the menu				* * * * */
		.instrc {
			margin-left: 50px;
			margin-right: 100px;
			top: 70px;
			}
		.instrc_2 {
			margin-left: 50px;
			margin-right: 100px;
			top: 70px;
			}
		.instrc_3 {
			margin-left: 50px;
			margin-right: 100px;
			top: 70px;
			}
		.info {
			margin-left: 50px;
			margin-right: 100px;
			top: 70px;
			}
	
