* {
		
			margin:0;
		
		
		}
		
		body {
			
			background-color:#fef5e4;
			text-align:center;
		
		}
		
		
		header {
		
			border-bottom:1px solid #cdc4e8;
			background-color:#faf4e8;
			opacity:1;
			height:90px;
			
			padding-left:20px;
			padding-top:30px;
			padding-right:20px;
		
		
		}
		
		header h2 {
		
			font-size:48pt;		
			font-family:"Lucida Bright";
			color:white;
			text-shadow:0 0 0.08em black;
			display:inline-block;
		}
		
		#login_panel {
		
			position:relative; /*change to absolute if you have header enabled*/
			top:0;	
			right:0;
			left:0;/*setting both right and left to 0 will stretch it*/
			height:auto !important;
			background:white;
			margin-bottom:0px;
			opacity:1;
			padding:5px;
			text-align:left;
			font-size:18pt;
			font-family:Calibri;
			border-bottom:2px solid #444;

		}
		
		#login_panel:hover {
			border-bottom:2px solid #999;
		
		}
		
		/*title bar ul*/
		#login_panel ul {
		
			border:2px solid black;
			border-radius:5px;
			background:#efefef;
			color:black;
			padding:5px;
			display:inline-block;
			list-style:none;
			padding-left:0;
			cursor:pointer;
		
		}
		
		#login_panel ul:hover {
			background:#bfbfbf;
		
		}
		
		/*title bar*/
		#login_panel ul li {
		
			position:relative;
			padding-left:0px;
		
		}
		
		/*title bar's submenu is being hidden*/
		#login_panel ul li ul {
			background:none;/*need to overwrite previous ul*/
			display:none;
			position:absolute;
			border:0;
		}
		
		#login_panel ul li ul:hover {
			background:none;
		}
		
		/*title bar's submenu is active upon title bar (not just the text) being hovered upon*/
		#login_panel ul:hover ul {
			
			display:block;
			width:100px;
			margin-left:0px;
			z-index:1001; /*while testing this, just realized that the map's zoom buttons have a z-index of 1000*/
		}
		
		#login_panel ul:hover ul li {
			
			background-color:#424242;
			color:white;
			text-align:center;
			font-family:Arial;
			margin-top:5px;
			border:2px solid #222;
			border-radius:5px;
			width:130px;
			opacity:0.6;

			
			
		}
		
		#login_panel ul:hover ul li:hover {
			
			border-bottom:1px solid black;
			background:#525252;
			opacity:0.95;
		}
		
		#login_panel ul {
		
		margin:0 auto;
		padding-left:5px;
		
		
		}
		
		#login_panel {
			text-align:center;
		
		}
		
		#login_panel input {
		
			width:100px;
			border:1px solid black;
			background-color:#444;
			color:#ffaa00;
			padding:3px;
			color:white;
			border-radius:10px;
			opacity:0.5;
		
		}
		
	/*=======end login panel======*/
	
		
		h1,h2,h3,h4 {
		
			background-color:#aaaaaa;
			padding:0;
			color:white;
			text-shadow:0 0 0.09em black;
			-moz-text-shadow:0 0 0.09em black;
			-webkit-text-shadow:0 0 0.09em black;
			-o-text-shadow:0 0 0.09em black;

			border-radius:3px;
			padding:3px;
			opacity:0.9;
		
		
		}
		
		h1 {
		
			font-size:25pt;
		
		}
		
		#map {
		
			height:450px;
			border-bottom:3px solid black;
			border-top:2px solid black;
		
		}
		
		#remainder {
		
			color:white;
			padding:5px;
			padding-left:3px;
			padding-bottom:0;
			padding-top:0;
		
		}
		
		h1 + p { /*selects the paragraph immediately after h1, '+' is a CSS3 selector - adjacent sibling operator*/
		
			
			margin-left:10px;	
			margin-right:10px;
			margin-top:5px;
			font-family:Arial;
			color:#fafafa;
			background-color:#999;
			padding:5px;
			border-radius:5px;
			margin-bottom:10px;
			border-bottom:1px solid #444;
		
		
		
		}
		
		green {
		
			color:#00ff00;
		
		}
		
		
		/*Popup stuff*/
		
		
		/*The big background behind the popup to overlay all other page elements and prevent interaction with them*/
		#popupBackgroundCustom {
			z-index:1002;
			position:absolute;
			width:100%;
			height:100%;
			background-color:black;
			opacity:0.7;
			display:none;
		}
		
		/*the popup itself*/
		#popupCustom {
			z-index:1003;
			position:absolute;
			top:25%;
			left:50%;
			width:35%;
			margin-left:-17.5%;
			height:300px;
			overflow:auto;
			font-family:Calibri;
			opacity:0.9;
			border:1px solid #444;
			border-radius:5px;
			background-color:black;
			background-color:white;
			color:white;
			color:black;
			border:1px solid black;
			background:linear-gradient(#fff,#808080);

			background:-moz-linear-gradient(#fff,#808080);
			background:-webkit-linear-gradient(#fff,#808080);
			background:-o-linear-gradient(#fff,#808080);
			
			border-top-right-radius:15px;
			display:none;
		
		
		}
		
		/*popup title*/
		#popupCustom h2 {
		
			color:#ffba00;
			text-shadow:0 0 5px black;
			text-align:center;
			background-color:#333;
			background:linear-gradient(#000,#333);
			background:-moz-linear-gradient(#000,#333);
			background:-webkit-linear-gradient(#000,#333);
			background:-o-linear-gradient(#000,#333);


			border:1px solid #111;
			margin-top:5px;
			margin:0;
			padding:0;
			border-top-right-radius:15px;
			border-bottom:1px solid #999;
			padding-left:5px;
			padding-right:16px; /*width of popupClose +1 */
		
		}
		
		/*popup content*/
		#popupCustom h2+p {
		
			margin-left:10px;
			margin-top:3px;
			padding:10px;
		
		}
		
		/*popup close button*/
		#popupClose {
			position:absolute;
			color:#ff0000;
			right:0px;
			top:0;
			z-index:100;
			background-color:#111;
			width:15px;
			text-align:center;
			cursor:pointer;
			border-top-right-radius:15px;
			padding:3px;
			border-bottom:1px solid #444;
			border-left:1px solid #000;
		}
		
		#popupClose:hover {
		
			background:#555;
		
		
		}
		
		
		.infoBox {
			
			display:none;
		
		}
		
		
		.clueInput {
			
			display:block;
			background-color:#222;
			margin:3px;
			border:1px solid black;
			color:#ffaa00;
			margin-top:6px;
			padding:6px;
			border-radius:5px;
		
		
		}
		

		
		#popupCustom a {
		
			color:black;
			font-size:14pt;
			text-decoration:none;
			float:left;
			
		
		}
		
		#popupCustom a:hover {
			color:orange;
			text-decoration:underline;
		
		}
		
		
		.infoBox p{ /*findGameMode box details*/
		
			height:150px;
			overflow:auto;
			
		
		}
		
		#remainder {
			text-align:center;
		}
		
		
		.infoBox {
			position:absolute;
			top:63px;
			right:5px;
			opacity:0.45;
			width:300px;;
			background-color:orange;
			font-family:Calibri;
			border-radius:5px;
			box-shadow:0em 0em 0.5em 0.2em #991100; /*left top blur stroke-width color*/
			-moz-box-shadow:0em 0em 0.5em 0.2em #991100;
			-o-box-shadow:0em 0em 0.5em 0.2em #991100;
			-webkit-box-shadow:0em 0em 0.5em 0.2em #991100;
		
		
		}
		
		.infoBox p {
		
			background-color:#dd6600;
			
		
		}
		
		.caption {
		
			font-size:11pt;
			text-shadow:0 0 0.1em white;
			color:black;
		
		}
		
		.infoBox h1{
			background-color:#ff4400;
			text-align:center;
			border-bottom:1px solid #dd1100;
			cursor:pointer;
			font-size:18pt;
		}
		

		
		.infoBox h1:hover, #menu_screen li:hover {
			background-color:#ff6600;
		
		}
		
		#games_list_table {
		
			margin:0 auto;
		}
		
		#games_list_table td {
		
			border:1px solid #444;
			border-radius:5px;
			
		
		}
		
		
		
		
	
		.infoBox input { /*styles for create game*/
		
			
			color:white;
			background-color:#444;
			border:2px solid #000;
			padding:2px;
			font-size:13pt;	
			margin-bottom:2px;
		
		
		
		}
		
		 .buttonR {
			background:-moz-linear-gradient(#ccc,#777,#000);
			background:-webkit-linear-gradient(#ccc,#777,#000);
			background:-o-linear-gradient(#ccc,#777,#000);
			background:linear-gradient(#444,#000);
			background-color:#222;
			border-radius:10px;
			font-size:12pt;
			cursor:pointer;
			color:white;
			
		
		
		}
		
		.buttonR:hover {
		
			background:-moz-linear-gradient(#ccc,#777,#000);
			background:-webkit-linear-gradient(#ccc,#777,#000);
			background:-o-linear-gradient(#ccc,#777,#000);
			background:linear-gradient(#ccc,#777,#000);
		
		}
		
		
		.minmax { /*the minimize/maximize indicator on infobox h1's*/
			
			opacity:0.6;
			float:left;
			font-size:10pt;
			margin-left:-2px;
			margin-top:-5px;
		
		}
		
		
		
		#menu_screen {

			position:fixed;
			z-index:1001;
			background:none;
			left:50%;
			top:50%;
			margin-left:-100px;
			margin-top:-100px;
		}
		
		#menu_screen ul {
			background:none;
			border:0;
		
		}
		#menu_screen ul:hover {
			background:none;
		}
		
		#menu_screen li {
		
			background-color:#dd6600;
			display:block;
			
			opacity:0.9;
			margin:5px;
			color:white;
			text-shadow:0 0 0.09em yellow;
			-moz-text-shadow:0 0 0.09em yellow;
			-webkit-text-shadow:0 0 0.09em yellow;
			-o-text-shadow:0 0 0.09em yellow;


			border-radius:3px;
			padding:3px;
			opacity:0.8;
			width:200px;
			background-color:#ff4400;
			text-align:center;
			border-bottom:1px solid #dd1100;
			cursor:pointer;
			font-size:25pt;
		
		}
		
		#toggleMenuButton {
		
			font-size:25pt;
			margin-top:0;
			padding-top:5px;
			margin-top:-10px;
			margin-left:50px;
		
		}
		
		#toggleMenuButton img {
			
			position:absolute;
			left:-50px;
			top:-5px;
		
		}
		
		footer {
			position:absolute;
			background-color:#e4e4e4;
			opacity:0.5;
			color:black;
			font-size:10pt;
		
		}
		
		footer a{
			color:black;
			font-weight:bold;
		}
		
		@media (max-width:900px) {
		/*only for popup since popups look messed up below 900*/
	
			#popupCustom {
			
				width:329.50px;
				margin-left:-164.75px;
			
			}
		
		}
		
		
		@media (max-width:640px) {
		/*stuff to do when the layout is smaller in width*/
		
			header { /*don't want header text to break*/
				text-align:center;
			}
			header h2 {
			
				font-size:34pt;
			
			}
			
			
		
		}