@charset "utf-8";
/* CSS Document */

:root{
	--map-width: 1000px;
	--map-height: calc(var(--map-width) * 0.61776px);	
	--top-pad: 25px;
}

#UnitMapDiv{
	width: 95%;	
	margin:auto;
}

#MapIMG{
	position: absolute; 
	max-width: 1400px;
	max-height: 1200px;
	width: var(--map-width);
	height: --map-height: calc(var(--map-width) * 0.61776px);;
	top: 0px;
	left: 0px;
}

#WidenForMap{
	background-image: linear-gradient(#246, #024); 
	color:#fff;
	width: 100%;
	height: 20%;
	font-size: 4vw;
	visibility:visible;
	text-align:center;
	opacity: 0;
	transition: opacity .2s;
}

/*
.wrapper{
	width: 100%;
	height: 400px;
	max-width: 1400px;
	background-color:#e1e1e1;	
}
*/

.baseNameDiv{
	padding-left: 10px;	
}

.baseDot{
	position: absolute;
	left: -18px;
	top: 5px;	
	width: 14px;
}

.baseDetails{
	z-index: 2;	
	font-size:1.3vw; 
	border: 0.2em solid #ccc;
	color:#fff;
	background-image: linear-gradient(#246, #024);
	visibility: hidden;
	width: 30em;  
	position:absolute;
}

.hoverBox{
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: 0.8em;
	/*border: 1px solid #2469;*/ 
	background-image: linear-gradient(#257, #135); 
	opacity: .85;
	/*background-color: #2469; */
	color: white;
	width: 50px;
	height:calc(var(--map-width)*.02);
	position: absolute;
	top:0px;
	left:0px; 
	z-index: 1;  	
}


.hoverBox a:link, .hoverBox a:visited {
	color: white;
	text-decoration: none;	
}

.hoverBox a:hover{
	color: #c9f0ff;
	text-decoration: underline;
}

.hoverBox.nonAETCBase{
	background-image: linear-gradient(#608999, #507989); 
	opacity: .85;
}

#keeslerDot{
	left: 15px;
	top: -16px;	
}

.mapShield{
	width: 5em;  
	margin:1%; 
	float:left;
}

.unitDescriptions{
	padding: 1em; 
	padding-left:6.5em;
}

@media (max-width: 1199px) {
	/*
  	.wrapper{
		max-width:970px;
		padding:0; 
		background-color:#ccc;
	}
	*/
  	:root{
		--map-width: 870px;	
		--map-height: calc(var(--map-width) * 0.61776px);
  	}
  	.hoverBox{
		font-size: 0.7em;
	}
	.baseDot{
		left: -15px;
		top: 3px;	
		width: 12px;	
	}
	#keeslerDot{
		left: 12px;
		top: -15px;	
	}
@media (max-width: 991px) {
	/*
  	.wrapper{
		max-width:750px;  
		background-color:#aaa;
	}
	*/
 	 :root{
		--map-width: 650px;	
		--map-height: calc(var(--map-width) * 0.61776px);
 	 }
 	 .hoverBox{
		font-size: 0.5em;
	}
	.baseDot{
		left: -12px;
		top: 2px;	
		width: 9px;	
	}
	#keeslerDot{
		left: 10px;
		top: -10px;	
	}
@media (max-width: 767px) {
	/*
  	.wrapper{
		max-width:100%;  
	  	background-color:#999;
	}
	*/
  	:root{
		--map-width: 500px;
		--map-height: calc(var(--map-width) * 0.61776px);	
  	}
	.hoverBox{
		font-size: 0.4em;
  	}
  	.baseDot{
		left: -10px;
		top: 1px;	
		width: 7px;	
	}
	/*
  	#UnitMapDiv{
		visibility:hidden;  
	}
  
  	#WidenForMap{
		visibility:visible;
		transition: opacity 2s;
		opacity: 1;
  	}
  */