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

p {font-family: "Arial", "Arial", sans-serif; }

a { color: #960224; text-decoration: none; font-weight: 700;}
a:hover { text-decoration: underline; }
a img { display:none; }
a:hover img { display: block;}
a img { border: none; }

ul li { list-style-type:none; } 

.hidden { display: none; }

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh; /* Ensure the body takes at least full screen height */
	margin: 0;
	font-family: Arial, sans-serif;
	width: 100%;
	overflow-x: hidden;
	background: #393939;
}

.main {
  display: flex;
  width: 1024px;
}

.content {
	width: 715px;
	padding: 10px;
	padding-top: 20px;
}

.planetext { padding-left: 15px; }

.side-content {
	width: 1024;
	margin-right: 10px;
	padding: 10px;
	padding-top: 20px;
}

.side-menu {
  position: relative;
  width: 280px;
  margin-left: 47px;
}

.bottom-content {
width: 1024px;
background-color: #FFFFFF;
padding-left: 10px;
}

.header {
	width: 100%;
	width: 1024px;
	background-color: #f1f1f1;
	overflow: hidden;
	padding-bottom: 0; /* Removed bottom padding */
}

.header img {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

	.menu-bar {
		width: 100%;
		max-width: 1024px;
		height: 40px; /* Added height */
		line-height: 40px; /* Added line-height for vertical alignment */
		padding: 20px;

		background: #393939 url(images/menubar.webp) no-repeat; /* Background image and color */
		background-size: cover;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.menu-links {
		display: flex;
		gap: 15px;
	}

	.menu-links a {
		padding: 0px 6px 0px 6px;
		text-decoration: none;
		color: #F9F7ED;
		font-size: 14px;
		font-weight: 600;
	}
	
	.menu-links a:hover {
		color: #F9F7ED;
		background: url(images/menuover.webp) repeat-x;
}

	.topcontent {
		max-width: 744px;
	}
	
	.mapsfloat { position: absolute; top: -348px; left: 29px;}

	.containh3 { margin-right: -32px; }
	
	.bringitup { margin-top: -20px; }

	.bar {
		position: relative;
		left: 13px;
		width: 280px;
		height: 38px;
	}

	.hamburger {
		display: none;
		cursor: pointer;
		padding: 10px;
		z-index: 10;
		position: relative;
		top: 5px; /* Adjusted position of hamburger */
	}

	.hamburger .bar {
		display: block;
		width: 25px;
		height: 3px;
		margin: 5px auto;
		background-color: white; /* Set hamburger icon color to white */
	}

	.menu-bar-content {
		display: none;
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(255, 255, 255, 0.95);
		padding: 40px 20px;
		z-index: 1000;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}

	.menu-bar-content a {
		display: block;
		margin: 15px 0;
		text-decoration: none;
		color: #333;
		font-size: 18px;
	}

	.close-btn {
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 24px;
		cursor: pointer;
		z-index: 1100;
		color: #333;
		background: none;
		border: none;
	}

	@media (max-width: 768px) {
		.header, .menu-bar, .footer {
			width: 100%;
			text-align: center;
			padding: 0;
		}

		.menu-bar {
			max-height: 30px; /* Set the max-height to 30px for mobile view */
			overflow: hidden; /* Hide any content that exceeds the max height */
			padding: 0 20px; /* Adjust padding to fit the content */
		}

		.content-wrap {
			flex-direction: column;
			align-items: center;
		}
	
		.contenttitle {
			width: 100%;
		}
			
		.side-menu {
			display: none;
		}

		.menu-links {
			display: none;
		}

		.hamburger {
			display: block;
			top: 5px; /* Hamburger adjusted position */
		}

		.menu-bar-content.open {
			display: block;
		}

	}
				
	.centerh5 {
		text-align: left;
		position: relative;
		margin-top: -54px;
		margin-left: 40px;
		font-weight: 900;
		font-size: 26px;
		color: #FFFFFF;
		text-shadow: 1px 1px 2px black;
		text-transform: uppercase;
	}
		
	.containh5 {
		position: relative;
		left: -48px;
		width:1024px;
	}
	
	.containh4 {
	  position: relative;
	  text-align: center;
	  color: white;
	  left: 43px;
	}

	.centerh4 {
	  position: absolute;
	  top: 45%;
	  left: 22%;
	  transform: translate(-50%, -45%);
	  color: #FFFFFF;
	  font-family: "Helvetica", sans-serif; 
	  font-size: 22px;
	  text-align: center;
	  font-weight: bold;
	}

	.secondh4 {
		font-weight: bold;
		color: #990000;
		font-size: 21px;
		margin-top: -2px;
		text-align: center;
		padding-left: 40px;
	}
	
	.menu-bar-content { }
	.menu-bar-content p { font-size: 16px; color: #AA00AA; }
	.menu-bar-content ul { margin-top: -13px; margin-bottom: -10px;}
	.menu-bar-content ul li {}
	.menu-bar-content ul li a { font-size: 14px; }

	@media (min-width: 769px) {
		.close-btn {
			display: none;
		}
	}
	
.iframe { 
	width: 400px;
}
			
.centerh1 {
	text-align: left;
	position: absolute;
	margin-top: -49px;
	margin-left: 37px;
	font-weight: 900;
	font-size: 24px;
	color: #FFFFFF;
	text-shadow: 1px 1px 2px black;
	text-transform: uppercase;
}

.containh1 {
	position: relative;
	left: -47px;
}

.containh1 img { 
	max-width: 715px; width: 100%;
}

.centerh2 {
	text-align: left;
	position: absolute;
	margin-top: -48px;
	margin-left: 40px;
	font-weight: 900;
	font-size: 28px;
	color: #FFFFFF;
	text-shadow: 1px 1px 2px black;
	text-transform: uppercase;
}

.containh2 {
	position: relative;
	left: -40px;
	height: 25px;
}

.containh2 img { 
	height: 50px; max-width: 650px; width: 100%;
}

.tablehead { 
	width: 70px;
	background: url(images/smallbluebar.webp) no-repeat;
	font-family: Arial;
}
.tableheadtext {
	text-align: center;
	font-size: 16px; 
	color: #222222;
	margin-top: -3px;
}

.tablesub { 
	text-align: center;
	width: 72px;
	background-color: rgba(255, 255, 255, 0.5);
	border-right-color: #c0c0c0;
	border-right-style: solid;
	border-right-width: 2px;
	border-bottom-color: #B0B0B0;
	border-bottom-style: solid;
	border-bottom-width: 2px;
}

.map {
	position: absolute;
}

.mapbg { z-index: 10; position: absolute; top: 0; right: -6; width: 662px; height:660px;}
.zonemap { z-index: 10; position: absolute; top: 0; right: 5; width: 650px; height:650px;}
.cord1 { z-index: 20; position: absolute; top: 0; right: 5; display: none; width: 650px;}
.cord2 { z-index: 20; position: absolute; top: 0; right: 5; display: none; width: 650px;}
.cord3 { z-index: 20; position: absolute; top: 0; right: 5; display: none; width: 650px;}
.cord4 { z-index: 20; position: absolute; top: 0; right: 5; display: none; width: 650px;}
.cord5 { z-index: 20; position: absolute; top: 0; right: 5; display: none; width: 650px;}
.cord6 { z-index: 20; position: absolute; top: 0; right: 5; display: none; width: 650px;}
.cord7 { z-index: 20; position: absolute; top: 0; right: 5; display: none; width: 650px;}
.cord8 { z-index: 20; position: absolute; top: 0; right: 5; width: 650px;}

.zone1 { display: block; }
.zone2 { display: none; }
.zone3 { display: none; }
.zone4 { display: none; }
.zone5 { display: none; }
.zone6 { display: none; }

.zonedescript {
	font-weight: 600;
min-height: 120px;
max-height: 120px;
max-width: 700px;
}

.cbtn { 
border: none;
height: 80px;
width: 87px;
background: none;
}

.btnimg {
	max-height:	80px;
	max-width: 70px;
	z-index: 10;
}

.quotes {
	font-size: 14px;
	font-family: "Trebuchet MS","Georgia", monospace;
	font-style: italic;
	vertical-align: top;
	color: #000000;
}
	
.info {
color: #000000;
margin-left: 10px;
margin-top: 8px;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  bottom: 140%;
  left: 50%;
  margin-left: -60px;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

#data {
margin-left: -10px;
background-color: #FFFFFF;
}

#data hr {
	border-top: 1px solid blue;
	width: 570px;
	margin-left: 75px;
}

#data li {
	list-style: none;
	margin-left: 10px;
	font-size: 15px;
}

#data h1 {
	font-weight: bold;
	color: #990000;
	font-size: 21px;
	margin-top: -65px;
	text-align: center;
	margin-left: -40px;
}

#data h2 {
	color: #000000;
	font-size: 15px;
	line-height: 15px;
	padding-top: 5px;
	font-family: "Arial";
}

#data h3 {
	color: #000000;
	font-size: 18px;
	margin-left: -55px;
}

#data h4 {
	font-weight: bold;
	color: #990000;
	font-size: 21px;
	margin-top: -5px;
	text-align: center;
}

#data h5 {
	color: #000000;
	font-size: 18px;
	font-family: "Arial";
}

.fancy-table {
	width: 900px;
	border-collapse: collapse;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	overflow: hidden;
  }

.fancy-table th, .fancy-table td {
	padding: 12px 16px;
	text-align: left;
  }

.fancy-table thead {
	background-color: #4A90E2;
	color: white;
  }

.fancy-table tbody tr:nth-child(even) {
	background-color: #f4f6f8;
  }

.fancy-table tbody tr:hover {
	background-color: #e1e9f0;
  }
  
.fancy-table2 {
	width: 600px;
	border-collapse: collapse;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	overflow: hidden;
  }

.fancy-table2 th, .fancy-table2 td {
	padding: 2px 2px;
	text-align: right;
  }
  
 .fancy-table2 th:nth-child(even), .fancy-table2 td {
	padding: 2px 2px;
	text-align: left;
  }

.fancy-table2 thead {
	background-color: #4A90E2;
	color: white;
  }

.fancy-table2 tbody tr:nth-child(even) {
	background-color: #f4f6f8;
  }

.fancy-table2 tbody tr:hover {
	background-color: #e1e9f0;
  }
  
.rewards {
	width: 990px;
	border-collapse: collapse;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	font-size: 15px;
	overflow: hidden;
	position: relative;
	margin-left: 60px;
  }

.rewards th, .rewards td {
	padding: 1px 1px;
	text-align: left;
  }
  
 .rewards th:nth-child(even), .rewards td {
	padding: 1px 1px;
	text-align: left;
			padding-left: 10px;
			padding-right: 5px;

  }

.rewards thead {
	background-color: #4A90E2;
	color: white;
  }

.rewards tbody tr:nth-child(even) {
	background-color: #f4f6f8;
  }

.footer {
	position: relative;
	background: url('images/footer.webp') no-repeat center center;
	background-size: cover;
	color: white; /* Ensure text is readable */
	text-align: center;
	padding: 20px;
	width: 1024px; /* Restrict maximum width */
	margin: 0 auto; /* Center the footer */
	font-size: 10px; /* Set font size */
	box-sizing: border-box; /* Ensures padding doesn’t affect width */
}

.footer p { 
	padding: 0;
	margin: 0; 
}
.footer a { 
	color: #F9F7ED;
}
.footer a:hover { 
	text-decoration: underline;
}