body {
    background-color: #fff;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* full height */
    font-family: Arial, sans-serif;
}

/* Header styles */
.page-header {
    width: 100%;
    color: white;
    text-align: center;
    padding: 15px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Center the map vertically & horizontally */
.page-container {
    flex: 1; /* take remaining space */
    display: flex;
	margin-top:20px;
    justify-content: center; /* horizontal center */
    align-items: center;     /* vertical center */
}

/* Map itself */
#map {
    position: relative;
    width: 884px;
    height: 884px;
    background: url(landforms.jpg) top left no-repeat #fff;
    font-size: 10pt;
    font-family: arial, helvetica, sans-serif;
}

/* Footer styles */
.page-footer {
    width: 100%;

    text-align: center;
    padding: 10px 0;
}



		
		#map li {
			margin:0;
			padding:0;
			list-style:none;
		}
		
		#map li a {
			position:absolute;
			display:block;
			/*
			   Specifying a background image
			   (a 1px by 1px transparent gif)
			   fixes a bug in older versions of
			   IE that causeses the block to not
			   render at its full dimensions.
			*/
   			background:url(blank.gif);
   			text-decoration:none;
			color:#000;
		}
		
		#map li a span { display:none; }
		
		#map li a:hover span {
			position:relative;
			display:block;
			width:200px;
			left:20px;
			top:20px;
			border:1px solid #000;
			background:#fff;
			padding:5px;
 			filter:alpha(opacity=80);
			opacity:0.8;
  		}
	
		#map a.ocean {
	top: 68px;
	left: 132px;
	width: 78px;
	height: 36px;
		}
		
		#map a.mountain {
	top: 26px;
	left: 170px;
	width: 98px;
	height: 32px;
		}
		
		#map a.iceberg {
	top: 109px;
	left: 43px;
	width: 80px;
	height: 31px;
		}
		
		#map a.fjord {
	top: 128px;
	left: 162px;
	width: 65px;
	height: 29px;
		}
		
		#map a.waterfall {
	top: 85px;
	left: 332px;
	width: 109px;
	height: 35px;
		}
		#map a.plateau {
	top: 190px;
	left: 333px;
	width: 54px;
	height: 35px;
		}
			#map a.cape {
	top: 179px;
	left: 214px;
	width: 54px;
	height: 35px;
		}
			#map a.tundra {
	top: 158px;
	left: 582px;
	width: 75px;
	height: 35px;
		}
			#map a.volcano {
	top: 52px;
	left: 624px;
	width: 79px;
	height: 35px;
		}
			#map a.glacier {
	top: 87px;
	left: 489px;
	width: 69px;
	height: 35px;
		}
			#map a.stream {
	top: 146px;
	left: 375px;
	width: 74px;
	height: 29px;
		}
			#map a.swamp {
	top: 272px;
	left: 82px;
	width: 74px;
	height: 29px;
		}
			#map a.valley {
	top: 238px;
	left: 33px;
	width: 74px;
	height: 29px;
		}
			#map a.hill {
	top: 180px;
	left: 116px;
	width: 74px;
	height: 29px;
		}
		#map a.sea {
	top: 143px;
	left: 50px;
	width: 74px;
	height: 29px;
		}
			#map a.geyser {
	top: 174px;
	left: 433px;
	width: 74px;
	height: 29px;
		}
#map a.jungle {
	top: 321px;
	left: 21px;
	width: 74px;
	height: 29px;
		}
			#map a.canyon {
	top: 286px;
	left: 619px;
	width: 74px;
	height: 29px;
		}
			#map a.cave {
	top: 293px;
	left: 509px;
	width: 74px;
	height: 29px;
		}
		#map a.plateau {
	top: 235px;
	left: 558px;
	width: 74px;
	height: 29px;
		}
			#map a.gulf {
	top: 271px;
	left: 414px;
	width: 74px;
	height: 29px;
		}
		#map a.delta {
	top: 369px;
	left: 355px;
	width: 74px;
	height: 29px;
		}
			#map a.lake {
	top: 193px;
	left: 328px;
	width: 74px;
	height: 29px;
		}
			#map a.lagoon {
	top: 336px;
	left: 164px;
	width: 74px;
	height: 29px;
		}
		#map a.plateau {
	top: 232px;
	left: 551px;
	width: 74px;
	height: 29px;
		}
			#map a.river {
	top: 351px;
	left: 482px;
	width: 74px;
	height: 29px;
		}
		#map a.peninsula {
	top: 468px;
	left: 266px;
	width: 85px;
	height: 29px;
		}
			#map a.strait {
	top: 447px;
	left: 362px;
	width: 74px;
	height: 29px;
		}
			#map a.desert {
	top: 440px;
	left: 626px;
	width: 74px;
	height: 29px;
		}
		#map a.mesa {
	top: 438px;
	left: 441px;
	width: 50px;
	height: 29px;
		}
			#map a.oasis {
	top: 389px;
	left: 520px;
	width: 74px;
	height: 29px;
		}
		#map a.island {
	top: 629px;
	left: 268px;
	width: 74px;
	height: 29px;
		}
				#map a.beach {
	top: 495px;
	left: 22px;
	width: 74px;
	height: 29px;
		}
				#map a.archipelago {
	top: 519px;
	left: 293px;
	width: 115px;
	height: 29px;
		}
	#map a.cove {
	top: 574px;
	left: 561px;
	width: 74px;
	height: 29px;
		}
	#map a.prairie {
	top: 529px;
	left: 617px;
	width: 74px;
	height: 29px;
		}
				#map a.dune {
	top: 479px;
	left: 527px;
	width: 74px;
	height: 29px;
		}
		#map a.pond {
	top: 836px;
	left: 305px;
	width: 52px;
	height: 29px;
		}
			#map a.marsh {
	top: 823px;
	left: 110px;
	width: 52px;
	height: 29px;
		}
				#map a.canal {
	top: 846px;
	left: 465px;
	width: 74px;
	height: 29px;
		}
				#map a.plain {
	top: 806px;
	left: 401px;
	width: 74px;
	height: 29px;
		}
				#map a.forest {
	top: 699px;
	left: 22px;
	width: 74px;
	height: 29px;
		}
				#map a.isthmus {
	top: 761px;
	left: 603px;
	width: 74px;
	height: 29px;
		}
				#map a.cliff {
	top: 705px;
	left: 419px;
	width: 74px;
	height: 29px;
		}