@font-face {
  font-family: "OpenSans";
  src: url("OpenSans-Regular.ttf");
}

@font-face {
  font-family: "Light";
  src: url("OpenSans-Light.ttf");
}


body								{
										overflow:				hidden;
										background-color: 	whitesmoke;
										transition: 			background-color .5s;
									}
									
.toparea							{
										position:				absolute;
										left: 					0px;
										top:						0px;
										height:					100px;
										background: 			linear-gradient(#fbfbfb, #f5f5f5);
										background-image: 	url('images/MMbanner.png');
										background-size:		cover;
										background-repeat:	no-repeat;
										width:					100%;
										overflow:				hidden;	
										z-index: 				0;
									}


.header							
									{
										position:				absolute;							
										width:					100%;
										height:					90px;
										left:						0px;										
										top:						0px;
										overflow: 				hidden;									
										margin:					0px;
										text-align: 			center;					
									}
									
	.header .menubox
										{
										width:					70px;
										height: 					90px;
										left:						0px;
										padding:					0px;
										padding-left: 			0px;
										z-index: 				100;
									}
									
	.header .logo
									{
										width:					200px;
										height: 					90px;
										left:						70px;
										padding:					15px;
										padding-left: 			0px;
										z-index: 				100;
									}
									
	.header .logo img			{
										width:					150px;
										height:					70px;
									}
									
	.header .banner
									{
										width:					calc(100% - 520px);
										left:						250px;
										font-size: 				30px;
										font-weight: 			bolder;
										font-style: 			italic;
										text-shadow: 			white 1px 1px;
										color:					darkred;
										padding-top: 			10px;
										min-width: 				250px;
									}
									
	.header .login				
									{
										width:					300px;
										left:						calc(100% - 350px);
										padding:					5px;
										padding-top: 			10px;
										margin-right: 			10px;
										height:					70px;
									}
									
	.header .login input[type=email],
	.header .login input[type=password]
									{
										height:					15px;
										width:					200px;
										color: 					darkred;
										border-style: 			groove;
										border-color:			#cc0066;
										border-width:			thin;
										float:					right;
										padding-left: 			0%;
										margin-bottom: 		5px;
										font-size: 				13px;
										background-color: 	white;
										border-radius: 		5px;
										box-shadow: 			5px 5px 5px 0px rgba(0,0,0,0.2);	
									}
							
	.header .login	input[type=submit] 
									{
										display:					inline-block;
   								 	background-color: 	darkred;
   							    	color: 					white;
   							    	float:					right;
   							    	margin-right: 			5px;
   							    	border-radius: 		5px;
   							    	box-shadow: 			5px 5px 5px 0px rgba(0,0,0,0.2);	
									}
									
	.header .login	label
									{
										display:					inline-block;
										font-family: 			sans-serif;
										font-size: 				13px;
										color: 					#770000;
										text-shadow: 			white 1px 1px;
										float:					right;	
										line-height: 			13px;
										margin-right: 			5px;							
									}			
									
.loginerror
									{
										position:				absolute;
										width:					250px;
										top:						50px;									
										right:					100px;
										background-image:		linear-gradient(#eecccc, #f0f0f0);
										background-position: bottom;
										background-size: 		100%;
										height:					50px;
										border-radius: 		10px;
										border-style: 			ridge;
										border-color: 			darkred;
										box-shadow: 			5px 5px 5px 0px rgba(0,0,0,0.2);
										overflow: 				auto;
										padding: 				3px;
										color:					#330000;
										font-family: 			'Lato', sans-serif;
										font-weight: 			lighter;
										z-index: 				1000;									
									}	
									
.registererror
									{
										position:				absolute;
										width:					300px;;
										top:						300px;									
										right:					150px;
										background-image:		linear-gradient(#eecccc, #f0f0f0);
										background-position: bottom;
										background-size: 		100%;
										height:					80px;
										border-radius: 		10px;
										border-style: 			ridge;
										border-color: 			darkred;
										box-shadow: 			5px 5px 5px 0px rgba(0,0,0,0.2);
										overflow: 				auto;
										padding: 				3px;
										color:					darkred;
										font-family: 			'Lato', sans-serif;
										font-weight: 			lighter;
										z-index: 				1000;										
									}		
									
.forgottenpassworderror
									{
										position:				fixed;
										width:					250px;
										top:						550px;									
										right:					35%;
										background-image:		linear-gradient(#eecccc, #f0f0f0);
										background-position: bottom;
										background-size: 		100%;
										height:					70px;
										border-radius: 		10px;
										border-style: 			ridge;
										border-color: 			darkred;
										box-shadow: 			5px 5px 5px 0px rgba(0,0,0,0.2);
										overflow: 				auto;
										padding: 				3px;
										color:					darkred;
										font-family: 			'Lato', sans-serif;
										font-weight: 			lighter;
										z-index: 				1000;										
									}				
									
/*.menu								
									{
										display:					table;
										text-align: 			center;
										top:						90px;
										position:				absolute;
										height:					55px;
										width:					110%;
										padding: 				0%;
										left:						-10px;
										margin: 					0 auto;
										background-color: 	lightgrey;
										z-index: 				0;
									}										
.menu table		
									{
										display:					table;
										width:					100%;									
									}
									
	.menu ul						{
										display:					table;
										list-style: 			none;
										width:					100%;
									}
																								
	.menu li						
									{
										display:					table-cell;
										vertical-align: 		middle;
										float:					left;
										font-size: 				12px;
										width:					9%;
										min-width: 				50px;
										top:						55px;
										padding: 				5px;
										text-align: 			center;
										height:					26px;									
										line-height: 			12px;
										text-decoration: 		none;
										background: 			lightgrey;										
										margin: 					10px;
										margin-top: 			0px;
										color:					darkred;
										overflow: 				hidden;
										margin-bottom: 		2px;
										border-bottom-style: none;
										border-bottom-color: whitesmoke;	
									}
									
   .menu li th
   								{
										height:					26px;  
										vertical-align:		middle; 
										width: 					9%;
										min-width: 				50px;								
   								}									
									
	.menu li a
									{
										color:					darkred;
										font-family: 			sans-serif;	
										text-decoration: 		none;		
					
									}
									
									
	.menu li a:hover
									{
										font-size: 				13px;	
										line-height: 			13px;
										font-weight: 			bold;
										color:					#550000;
									}		
									*/
									
.main
									{
										width:					calc(70% - 60px);
										position: 				absolute;
										height:					calc(100% - 200px);	
										left:						0px;
										top:						110px;
										bottom:					60px;
										overflow: 				auto;	
										overflow-x: 			hidden;								
										/*color: 					#080808;	*/
										color:            gray;
										background-color: 	whitesmoke;
										padding:					30px;	
										padding-top: 			0px;
										padding-bottom: 		30px;	
										font-family: 			'OpenSans';	
										font-size: 				18px;	
									}
									

.main em 
									{
										color:					darkred;
										font-weight: 			bold;
										font-style:				italic; 									
									}
									
.main embed						{
										width:					100%;
										height:					100%;
									}
										
									
.games
									{
										width:					calc(30% - 60px);
										position: 				absolute;
										height:					calc(100% - 210px);	
										left:						70%;
										top:						110px;
										bottom:					60px;
										overflow: 				auto;	
										overflow-x: 			hidden;									
										padding:					10px;
										padding-left: 			30px;
										padding-bottom: 		30px;
									}
									
									
.footer							{
										position:				absolute;										
										width:					100%;
										min-width: 				600px;
										height:					60px;
										left:						0px;
										top:						calc(100% - 60px);
										bottom:					0px;
										overflow:				hidden;
										background: 			linear-gradient(#cc8888, #e0e0e0);
										margin:					0;
										text-align: 			center;
										line-height:			60px;	
										border-top-color: 	whitesmoke;
										border-top-style: 	solid;
										border-top-width: 	10px;
									}		
									
																								
.footerlogo						
									{
										display:					inline-block;
										width:					6%;
										top:						calc(100% - 70px);
										height:					30px;
										min-width: 				83px;
										float:					left;										
									}	
									
.footerlogo img
									{
										width:					80px;
										height:					25px;	
										padding: 				2px;
										padding-left: 			10px;								
									}	
									
.footerlogoright						
									{
										display:					inline-block;
										width:					6%;
										top:						calc(100% - 70px);
										height:					30px;
										min-width: 				83px;
										float:					right;										
										margin:					0;
										margin-bottom: 		9px;

									}	
									
.footerlogoright img
									{
										width:					80px;
										height:					25px;	
										padding: 				2px;
										padding-right: 		10px;								
									}			
									
									
.panel							{
										display:					inline-block;
										width:					95%;
										min-width: 				200px;									
										background-color: 	white;
										background-image:		linear-gradient(lightgrey, white);
										background-position: bottom;
										background-size: 		100%;
										height:					5%;
										border-radius: 		5px;
										box-shadow: 			5px 5px 5px 0px rgba(0,0,0,0.2);
										overflow: 				auto;
										padding: 				10px;
										padding-bottom: 		5px;
										padding-top: 			5px;
										color:					#330000;
										font-family: 			'Lato', sans-serif;
										font-weight: 			lighter;
										margin: 					0px;
										margin-right: 			10px;
										font-size: 				12px;
									}
									
									
									
	.panel p 					{
										font-weight: 			normal;
										font-size: 				12px;
										font-family: 			sans-serif;
										color: 					darkred;
										text-align: 			left;
										line-height: 			12px;
									}
									
	.panel h1					{
										font-weight: 			bold;
										font-size: 				15px;
										font-family: 			sans-serif;
										color: 					#880033;
										text-align: 			center;
										z-index: 				1000;	
									}

	.panel h2					{
										font-weight: 			normal;
										font-size: 				12px;
										font-family: 			sans-serif;
										font-style: 			italic;
										color: 					darkred;
										text-align: 			center;
										line-height: 			12px;
										z-index: 				1000;	
									}
									
	.panel h3					{
										font-weight: 			normal;
										font-size: 				12px;
										font-family: 			sans-serif;
										color: 					darkred;
										text-align: 			left;
										width:					50%;
										float:					left;
										line-height:			12px;
										z-index: 				1000;	
									}
	
										
	.panel input[type=email],
	.panel input[type=password],
	.panel input[type=input]
									{
										height:					20px;
										width:					200px;
										
										border-style: 			groove;
										border-color:			#cc0066;
										border-width:			thin;
										float:					right;
										padding-left: 			0%;
										margin-bottom: 		5px;
										font-size: 				12px;
										background-color: 	white;
										border-radius: 		5px;
										box-shadow: 			5px 5px 5px 0px rgba(0,0,0,0.2);	
									}
							
		.panel input[type=submit] 
									{
										display:					inline-block;
										width:					50px;
   								 	background-color: 	#aa0044;
   							    	color: 					white;
   							    	float:					right;
   							    	margin-right: 			5px;
   							    	margin-left: 			5px;
   							    	padding-left: 			5px;
   							    	border-radius: 		5px;
   							    	box-shadow: 			5px 5px 5px 0px rgba(0,0,0,0.2);	
									}
									
		.panel label
									{
										display:					inline-block;
										font-family: 			sans-serif;
										font-size: 				13px;
										color: 					darkred;
										float:					right;	
										line-height: 			20px;
										margin-right: 			5px;							
									}
									
.cominggames
									{
										display:					table;
										width:					98%;
										left:						1%;
										min-width: 				500px;
										overflow: 				auto;
										overflow-x: 			hidden;
										background-image:		linear-gradient(lightgrey, #f0f0f0);
										background-position: bottom;
										background-size: 		100%;
										border-radius: 		10px;
										border-style: 			thin;
										border-color: 			silver;
										box-shadow: 			5px 5px 5px 0px rgba(0,0,0,0.2);
									}
									
.datecol
									{
										display: 				table-cell;
										width:					8%;
										min-width: 				100px;
										font-family:			OpenSans;
										font-size: 				medium;
								 		margin-top: 			20px;
								 		padding: 				3px;
								 		left: 					1%;
								 		color: 					darkred;
								 		height: 					2em;
								 		text-align: 			left;
								 		vertical-align: 		middle;
									}
									
.namecol
									{
										display: 				table-cell;
										min-width: 				150px;
									   width:					13%;
								 		margin-right: 			5px;
								 		font-family:			OpenSans;
										font-size: 				medium;
										padding: 				3px;
										text-align: 			center;
										vertical-align: 		middle;
										line-height: 			1em;
										height: 					1em;
									}
									
.namecol a
									{
										color:					darkred;	
										text-decoration: 		none;										
									}
									
.namecol a:hover
									{
										color:					#998888;	
									}
									
.submitcol
									{
										display:					table-cell;
										width:					200px;
										height: 					4em;
										line-height: 			1em;
										padding: 				3px;
										vertical-align: 		middle;
									}
									
.inputcol
									{
										display: 				table-cell;
										text-align: 			left;
										width:					calc(98%-1000px);
										min-width: 				350px;
										height: 					4em;
										line-height: 			1em;
										padding: 				3px;
									}
									
.cominggames input[type=text]
									{
										width:					300px;
										background-color: 	white;
										font-family:			OpenSans;
										font-size: 				small;
										margin:					5px;
										height: 					20px;
										border-style: 			thin;
										border-radius:			5px;
										box-shadow: 			5px 5px 5px 0px rgba(0,0,0,0.2);
									}
									
.cominggames input[type=text]:disabled
									{
										background-color: 	#e0e0e0;
										border-color: 			silver;	
									}
									
.submitcol input[type=submit] 
									{
										width:					120px;
										height:					30px;
										float:					left;
										color:					darkred;
										background: 			grey:	
										box-shadow: 			5px 5px 5px 0px rgba(0,0,0,0.2);	
									}
									
.submitcol input[type=submit]:hover
									{
										color:					#998888;
									}
									
.notecol
									{
										display:					table-cell;									
										height: 					2.5em;
										line-height: 			1em;
										vertical-align: 		middle;
										padding-left: 			10px;
										width:					300px;
									}	
									
.bookingpanel					{
										display:					table;
										width:					98%;
										min-width: 				200px;									
										background-image:		linear-gradient(lightgrey, white);
										background-position: bottom;
										background-size: 		100%;
										height:					50px;
										border-radius: 		10px;
										border-style: 			ridge;
										border-color: 			silver;
										box-shadow: 			5px 5px 5px 0px rgba(0,0,0,0.2);
										overflow: 				auto;
										padding: 				5px;
										color:					darkred;
										font-family: 			'Lato', sans-serif;
										font-weight: 			lighter;
										margin: 					0px;
										margin-bottom: 		10px;
										left:						1%;
									}		
										
	.bookinginputcol input[type=input]
									{
										height:					20px;
										width:					calc(98%-250px);
										min-width: 				300px;
										border-style: 			groove;
										border-color:			#cc0066;
										border-width:			thin;
										float:					right;
										padding-left: 			0%;
										margin-bottom: 		5px;
										font-size: 				12px;
										background-color: 	#f8f8f8;
										border-radius: 		5px;
										box-shadow: 			5px 5px 5px 0px rgba(0,0,0,0.2);	
									}
							
		.bookingpanel input[type=submit] 
									{
										display:					inline-block;
										width:					150px;
   								 	background-color: 	#aa0044;
   							    	color: 					white;
   							    	float:					right;
   							    	margin-right: 			5px;
   							    	margin-left: 			5px;
   							    	padding-left: 			5px;
   							    	border-radius: 		5px;
   							    	box-shadow: 			5px 5px 5px 0px rgba(0,0,0,0.2);	
									}
									
		.bookingpanel input[type=input]:focus
									{
										border-width: 			medium;
										background-color: 	white;
										border-color: 			red;									
									}
									
		.bookingpanel input[type=input]:disabled,
		.bookingpanel input[type=text]:disabled
									{
										background-color: 	#e0e0e0;
										border-color: 			silver;									
									}
									
		.bookingpanel label
									{
										display:					inline-block;
										font-family: 			sans-serif;
										font-size: 				13px;
										color: 					darkred;
										float:					right;	
										line-height: 			20px;
										margin-right: 			5px;							
									}	
									
.bookingsubmitcol
									{
										display:					table-cell;
										width:					200px;
										height: 					20px;
										line-height: 			15px;
										padding: 				10px;
										vertical-align: 		middle;
									}
									
.bookinginputcol
									{
										display: 				table-cell;
										width:					calc(98%-210px);
										min-width: 				200px;
										height: 					20px;
										line-height: 			15px;
										padding: 				10px;
									}
									
.contentarea	 		{
									position: absolute;
									top: 70px;
									left:3%;
									width:94%;
									height:calc(100%-150px);
									font-family: sans-serif;
									font-size: 16px;
									text-decoration: none;
									overflow:scroll;
									overflow-x:hidden;
	
							}		
							
.contentarea table td, 
.contentarea table th   
							{
                           font-family:sans-serif;
								 	font-size: small;
								 	border: thin solid silver;
								 	background: whitesmoke;
								 	box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.2);	
                     }				
							
.contentarea a:hover
							{
									color: darkgrey;		
									font-size:	medium;					
							}
												
.eventarea	 			{
									display: inline-table;
	
							}		
							
.eventarea table td, 
.eventarea table th   
							{
                           font-family:sans-serif;
								 	font-size: small;
								 	border: thin solid silver;
								 	background: whitesmoke;
								 	box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.2);	
                     }				
							
.eventarea a:hover
							{
									color: darkgrey;		
									font-size:	medium;					
							}
												
								
							
.explanation
							{
									font-family: serif;
									color: black;
									font-size: small;				
							}
							
.explanation h1
							{
									color: darkred;
									font-weight: bold;
									font-size: larger;
									text-align: center;							
							}
							
.explanation h2
							{
									color: darkred;
									font-weight: bold;
									font-size: medium;
									font-style: italic;							
							}		

							
input:focus
							{
								border-width: medium;
								border-color: red;
								background-color: white;							
							}	
	

.sidenav 
							{
  								height: 100%;
  								width: 0;
  								position: fixed;
  								z-index: 1000;
  								top: 0px;
  								left: 0;
  								background-color: rgba(120,60,70,0.9);
  								overflow-x: hidden;
  								transition: 0.3s;
  								/*padding-top: 20px;*/
  								font-size: 18px;
							}

.sidenav a 				
							{
  								padding: 8px 8px 8px 20px;
  								text-decoration: none;
  								font-size: 18px;
  								color: #d0d0d0;
  								display: block;
  								transition: 0.3s;
							}

.sidenav a:hover 		{
  								color: #ffffff;
							}

.sidenav .closebtn 	{
  								position: absolute;
  								top: 0;
  								right: 25px;
  								font-size: 36px;
  								margin-left: 50px;
							}

#mainM 					{
  								transition: margin-left .3s;
  								padding: 16px;
							}