#screenTooSmall{
	  display: none;
}


@media only screen and (max-width: 960px){
	#screenTooSmall{
	  display: block;
	  position: absolute;
	  background-color: black;
	  padding: 20px 20px 20px 20px;
	  color: white;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: 100%;
	  z-index: 10000;
	}
}


body, h1, h2, h3, h4, h5, h6, p, ol, ul, form, blockquote {
    font-size: 100%;
    margin: 0;
    padding: 0;
}

body.waiting *{			/* this is used to show javascript busy after clicking start new map */
    cursor: wait;
}

body.waiting {			/* this is used to show javascript busy after clicking start new map */
    cursor: wait;
}

p {
    color: black;
    font: 0.88em/120% Tahoma,"Lucida Grande",Arial,sans-serif;
}

body {background-color: #521C1C}

a	 { text-decoration: none; }
ul { list-style: none; }

div {cursor: default}


#gameMessageWindow ul { 
	list-style: disc; 
	padding-left: 25px;
}


/*			========================================   */
/*			|   	home_main.css				    |  */
/*			=========================================  */


#splashBackground{
	width: 100vw;
	height: 100vh;
    background-color: black;    
}

.splash_overlay_globe{
	position: absolute;
	top: 13%;
	left: 30.7%;
	width: 39.95%;
	height: auto; 
	max-height: 71.3%;

}



#splashImage_tank{
  cursor: pointer;
}




#splashImage_pic_1{
	position: absolute;
	top: 34%;
	left: 7%;
}

#splashImage_pic_2{
	position: absolute;
	top: 60%;
	left: 7%;
}

#splashImage_pic_3{
	position: absolute;
	top: 34%;
	left: 76%;
}

#splashImage_pic_4{
	position: absolute;
	top: 60%;
	left: 76%;
}



#splashTitleText{
	position: absolute;
	top:2%;
	left: 50.5%;
	color: #6EAD76;
	font-weight: bold;
	font: 5.0vw/120% Montserrat,sans-serif;
	font-weight: bold;
	
	        text-shadow: 0 1px 0 #000,
					 0 1px 0 #224F27,   1px 2px 0 #224F27,
                     2px 3px 0 #224F27, 3px 4px 0 #224F27,
                     4px 5px 0 #224F27, 5px 6px 0 #224F27;



}

.splash_pics{
	width: 17%;
	height: 20%;
	display: none;
}



#splashImage_icon_1{
	position: absolute;
	top:4%;
	left: 12%;
	width: 8%;
	height: 13%;
}

#splashImage_icon_2{
	position: absolute;
	top:3%;
	left: 81%;
	width: 8%;
	height: 13%;
}




#intro_header_1{
	position: absolute;
	top:19%;
	left: 6%;
	color: #0DF9E6;
	font-weight: bold;
	font-size: 1.2vw;
	font: 2.0vw/120% Helvetica,sans-serif;
}

#intro_header_11{
	position: absolute;
	top:26%;
	left: 7.0%;
	color: #0DF9E6;
	font-weight: bold;
	font-size: 1.2vw;
	font: 1.2vw/120% Helvetica,sans-serif;
}


#intro_header_2{
	position: absolute;
	top: 17%;
	left: 70%;
	color: #2AFA54;
	font-weight: bold;
	font-size: 1.2vw;
	font: 2.0vw/110% Helvetica,sans-serif;
		text-align: center;
}
#intro_header_21{
	position: absolute;
	top:26%;
	left: 74%;
	color: #2AFA54;
	font-weight: bold;
	font-size: 1.2vw;
	font: 1.2vw/120% Helvetica,sans-serif;
}


#splash_text_intro_box {
    display: table;
    position: absolute;
    top: 25%;
 	left: 36%;   
    height: 54%;
    width: 30%;
	text-align: center;

}

#splash_text_intro_box_2 {
    display: table;
    position: absolute;
    top: 44%;
 	left: 32.9%;   
    height: 20%;
    width: 30%;
	text-align: center;

}


.splash_text_intro {
	color: black;
	font-weight: bold;
	font-size: 1.2vw;
}



#splash_text_0{
	position:absolute;
	color:#D4FCC2;
	top: 95%;
	left: 15%;
	font-size: 1.2vw;
}

#intro_line_6{
	position:absolute;
	top: 95%;
	left: 15%;
}


#contact_me{
  font-weight: bold;
	color:#B8FC9A;  
}

#startGame {
  position:absolute;
  top: 86%;
  left:44.5%;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.7vw;
  margin: 4px 2px;
  cursor: pointer;
  background: url(../images/splashScreen/startButton.png) center top no-repeat;	
  background-size:100% 100%;
}

#startupDisplay{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100vw;
	height: 100vh;
    background-color: rgba(255,255,255,0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: white;   
}



#startupDisplay p{
    color: white;    
}



#header{
  display: block;
  position: absolute;
  z-index: 30;
  top: 0px;
  left: 0px;
  width: 990px;       /* overwriten by javascript when window loads or resizes */
  height: 20px;
  border: 1px solid black;
}

.header_data{
  float: left;
  display: block;
  padding-top: 3px;
  width: 100px;
  font: 0.70em/120% Tahoma,"Lucida Grande",Arial,sans-serif;
  font-weight: bold;
  text-align:center;
  color:white;     
}

.header_menu{
  float: right;
  display: block;
  width: 70px;
  font: 0.70em/120% Tahoma,"Lucida Grande",Arial,sans-serif;
  font-weight: bold;
  text-align:center;
  color:white; 
  z-index: 100;  /* set high so menu appears over unit graphics */
}


.header_menu li{
	cursor: pointer;
}


#testAarea{
    display: block;
    position: absolute;
    top: 650px;
    left: 0px;
    width: auto;
    height: auto;
    padding: 0 px;
}


#AIprogressBarContainer {
  position: absolute;
  top: 30px;
  left: 20px;
  width: 900px;
  z-index: 5;
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
}

#AIprogressBarContainer h1 {
    display: block;
    position: absolute;
    width: 100%;
    top: 5px;
    text-align: center;   
}

#AIprogressBar {
  width: 50px;
  height: 30px;
  border-radius: 5px;
  background-color: green;
}



#battleMomentumBarContainer {
  position: absolute;
  width: 380px;
  background-color: #34F8F8;
  border: 1px solid black;
  border-radius: 5px;
}

#battleMomentumBarContainer h1 {
    display: block;
    position: absolute;
    width: 100%;
    top: 5px;
    text-align: center;   
}

#battleMomentumBar {
  width: 160px;
  height: 30px;
  border-radius: 5px 0 0 5px;
  background-color: #26D80A;
}



#mapAndControls {
    display: block;
    position: absolute;
    top: 20px;
    left: 0px;
    width: auto;
    height: auto;
    padding: 5px 5px 5px 5px;
    background-color: #2F1616;
    border: 1px solid black;
}


#rightSideMenu {		/*  note that this div is on the main page, the rest are on the popup*/		
    display: block;
    position: absolute;
    left:610px;           /* overwriten by javascript when window loads or resizes */
	top: 5px;
    bottom: 0px;
    padding: 0 px;
    width: 380px;
    height: 860px;
}

#unitInfopanel {		/*  note that this div is on the main page, the rest are on the popup*/		
	display: block;
    position: relative;
    top: 40px;
    left: 0px;
	width: 380px;
	height: 550px;
	padding: 0;
	margin: 0;
	background: url(../images/unitInfo/unitInfo.png) center top no-repeat;	
}

#unitControlpanel {
    display: block;
    position: relative;
    left:0px;
    top: 50px;
    padding: 0 px;
    width: 380px;
    height: 60px;
    background: url(../images/unitControlPanel/unitControlPanel.png) center top no-repeat;	
}

#adviser {
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;

}

#adviser_open_close{
    display: block;
    position: absolute;
    z-index: 60;
    top: 20px;
    left: 20px;
    width: 24px;  
    height:24px; 
    background: url(../images/adviser/open_close.png) center top no-repeat;
    cursor: pointer;	   
}


#adviser_sound_ctrl{
    display: block;
    position: absolute;
    z-index: 60;
    top: 20px;
    left: 53px;
    width: 24px;  
    height:24px; 
    background: url(../images/adviser/sound.png) center top no-repeat;
    cursor: pointer;	   
}

#adviserHist_openDOMtag{
    display: block;
    position: absolute;
    z-index: 60;
    top: 50px;
    left: 84px;
    width: 24px;  
    height:24px; 
    background: url(../images/adviser/history.png) center top no-repeat;
    cursor: pointer;
}


#adviser_img {
    display: block;
    position: absolute;
    z-index: 60;
    top: 5px;
    left:5px;
    background-color: #BBBBBB;
    background: url(../images/adviser/adviser.png) center top no-repeat;	
    width: 68px;  
    height: 116px;
    pointer-events: none; 
}

#adviser_msg{
    display: block;
    position: absolute;
    z-index: 60;
    top: 5px;
    left: 100px;
    background-color: #EEEEEE;	
    width: 250px;  
    height: 120px; 
    border: 1px solid black;
    padding: 10px;
    border-radius: 20px;
    pointer-events: none;
    font-family: "HCo Operator Mono", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 0.8em;
}

.adviser_msg_flash{
  animation: flashMsgBackground 2s;
  animation-timing-function: ease-out;
}


@keyframes flashMsgBackground {
  0%   {background-color: #EEEEEE;}
  10%   {background-color: #FDFD74;}
  100% {background-color: #EEEEEE;}
}


#adviser_msg_open{
    display: block;
    position: absolute;
    z-index: 60;
    top: 65px;
    left: 75px;
    width: 7px;
    height: 25px;
    background: url(../images/adviser/open_arrow.png) center top no-repeat;	
    cursor: pointer;	
}

#adviser_msg_close{
    display: block;
    position: absolute;
    z-index: 60;
    top: 60px;
    left: 363px;
    width: 7px;
    height: 25px;
    background: url(../images/adviser/close_arrow.png) center top no-repeat;
    cursor: pointer;   		
}


#canvasWindow {
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;   
    background-color: #BBBBBB;
    padding: 0px;
    width: 600px;    /* overwriten by javascript when window loads or resizes */
    height: 600px;   /* overwriten by javascript when window loads or resizes */
    overflow:auto;
}

#canvasHolder {

    padding: 5px 5px 5px 10px;
}

#unitStatusPanel {
  display: block;
  position: absolute;  
  left: 5px;
  top: 630px;         /* overwriten by javascript when window loads or resizes */
  width: 820px;       /* overwriten by javascript when window loads or resizes */
  height: 65px;
  background-color: #2F1616;  	
}

#unitStatusPanelControls {
  display: block;
  position: absolute;  
  left: 5px;
  top: 630px;         /* overwriten by javascript when window loads or resizes */
  width: 64px;       /* overwriten by javascript when window loads or resizes */
  height: 64px;
  background-color: #2F1616; 
}

.unitStatusPanelControls{
  display: block;
  position: absolute;  
  width: 32px;       /* overwriten by javascript when window loads or resizes */
  height: 32px;
  background-color: white; 
  cursor: pointer;   	
}

#unitStatusPanelControls_unit{
	top: 0px;
	left: 0px;
    background: url(../images/unitStatusPanel/unit.png) center top no-repeat;		
}

#unitStatusPanelControls_move{
	top: 0px;
	left: 33px;
    background: url(../images/unitStatusPanel/move.png) center top no-repeat;		
}

#unitStatusPanelControls_ammo{
	top:33px;
	left: 0px;
    background: url(../images/unitStatusPanel/ammo.png) center top no-repeat;		
}

#unitStatusPanelControls_fuel{
	top: 33px;
	left: 33px;
    background: url(../images/unitStatusPanel/fuel.png) center top no-repeat;		
}






/*   ================= Game Panel ======================= */


.footer_data{
  float: left;
  display: block;
  padding-top: 3px;
  width: 100px;
  font: 0.70em/120% Tahoma,"Lucida Grande",Arial,sans-serif;
  font-weight: bold;
  text-align:center;
  color:white;     
}

#nextTurn_btn {
  display: block;
  position: absolute;
  z-index: 1000; 
  left:50%;
  transform: translate(-50%, 0%);
  top: 80%;
  margin: 20px 15px 0px 10px;  
  width: 100px; 
  height: 80px;
  padding-top: 20px;
  border-radius: 50%;
  font: 1.2em/120% Tahoma,"Lucida Grande",Arial,sans-serif;
  text-shadow: 2px 2px 2px grey;
  text-align: center;  
}


.nextTurnEnable {
   background-color: #07C118;
   border: 5px double grey; 
}

.nextTurnDisable {
   background-color: #C0C0C0; 
   border: 5px double grey;    
}

.nextTurnEnable:hover {
   cursor: pointer;
   border: 5px solid #505050;     
}

.nextTurnDisable:hover {
    cursor: wait;  
}


/*   ================= Control Panel ======================= */


.unitActionButtons {
  display: block;
  position: absolute;
  width: 66px;
  height: 21px;
  background: url(../images/unitControlPanel/unitActionButton.png) center top no-repeat;
  color: black;
  font: 0.70em/120% Tahoma,"Lucida Grande",Arial,sans-serif;
  font-weight: bold;
  text-align:center;
  padding-top: 5px;  	
}

.unitActionButtons:hover {
    cursor: pointer;
}

#unitActionButton_0 {
    top: 20px;
    left:15px;
}

#unitActionButton_1 {
    top: 20px;
    left:90px;
}

.unitActionButton_normal {
  background-position: 0px 0px;
}

.unitActionButton_pressed {
  background-position: 0px -26px;
}

.unitActionButton_selected {
  background-position: 0px -52px;
}


/*   ================= unitStatusPanel ======================= */


.panelGroup{
	display: block;
	position: absolute;
	width: 70px;
	height: 25px;
	top: 900px;			/* re-writem be resize viewport */
	border: 2px solid black;   /*  background color matches body background color */
	cursor: pointer;
	font: 0.90em/120% Tahoma,"Lucida Grande",Arial,sans-serif;
	background-color: #2F1616;
	color: white;
	text-align:center;
	padding-top: 3px;
	border-radius: 20% 20% 0 0
}

.panelGroup_selected{
	background-color: #77FD89;
	color: black;
}

.panelGroup_dropOver{
	background-color: #762A2A;
}

#panelGroup_10{
	left: 7px;
}

#panelGroup_1{
	left: 102px;
}

#panelGroup_2{
	left: 177px;
}

#panelGroup_3{
	left: 252px;
}
#panelGroup_4{
	left: 327px;;
}

#panelGroup_5{
	left: 402px;
}

#panelGroup_10{
	left: 7px;
}


.unitStatusPanel {
	display: block;
	position: relative;
	float: left;
	width: 28px;
	height: 28px;
	border: 2px solid #521C1C;   /*  background color matches body background color */
	cursor: pointer;
}

.unitDeadStatus{
	display: block;
	position: absolute;
	top: 1px;
	left: 5px;
	width: 26px;
	height: 26px;
	font: 25px Arial, bold, sans-serif;
	color: red;
	cursor: pointer;
}

.unitStatusShotAt {
	display: block;
	position: absolute;
	top: 1px;
	left: 1px;
	width: 26px;
	height: 26px;
	background-color: red;
	opacity: 0;
	cursor: pointer;
}

#unitStatusPanel img {
	display: block;
	position: absolute;
	top: 1px;
	left: 1px;
	width: 26px;
	height: 26px;
	cursor: pointer;	
}

.unitStatusIcon{
	cursor: pointer;
}

.unitStatusSelected {
	border: 2px solid lightGreen;
	cursor: pointer;
}

.unitStatusDragging{
	border: 2px solid yellow;
	cursor: pointer;
}

.unitStatusUnFiltered{
	background-color: #ECECD1;   /*   Same color as background for players units in unit info popup==   */
}

.unitStatusFiltered{
	background-color: #01E11E;
}


.shotAt {
  animation-name: opacityBlinker;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;

}

@keyframes opacityBlinker {

	0%    {opacity: 0;}
	10%   {opacity: 0.02;} 
	20%   {opacity: 0.07;}
	30%   {opacity: 0.15;}
	40%   {opacity: 0.2;}
	50%   {opacity: 0.25;} 
	60%   {opacity: 0.3;}
	70%   {opacity: 0.35;}	
	80%   {opacity: 0.42;}	
	90%   {opacity: 0.47;}	
	100%  {opacity: 0.5;}	
	
}

/*   ================= STARTUP SCREEN ======================= */

#startupDisplay button{

	width: auto;
	background-color: #A9A4A4;
	border-radius: 10px;
	font: 0.8em/120% Tahoma,"Lucida Grande",Arial,sans-serif;		
	font-weight: bold; 
	padding: 3px;

}
#newMapSelector{
	width: 20em;
	margin-right: 2em;
} 
 
#startup_userid_input{
    width: 10em
}

#startupDisplay h1 {
    color: white;
    font-size: 200%;
    text-align: center;
}

#startupDisplay h2 {
    color: yellow;
    font-size: 150%;
}

#startupDisplay h3 {
    color: white;
    font-size: 120%;
}


#exitGame_btn {
	display: block;
	position: absolute;
	top: 20px;
	left: 900px;
}

#resumeGame_btn {
	display: block;
	position: absolute;
	top: 20px;
	left: 820px;
}


/*   ================= startup screen grid layout ======================= */

#startupDisplay_gridHolder{
	color: white;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 4fr 8fr;
	width: 950px;
	height: 700px;
	background-color: #003333;
	border: 3px solid black; 
	
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

.startupDisplay_grid_item{
    margin: 0px;
	padding: 15px;
	border-radius: 10px;
}



.startupDisplay_grid_A{
	grid-column: 1 / 3;
	grid-row: 1;
}

.startupDisplay_grid_B{
	grid-column: 2;
	grid-row: 2;
}

.startupDisplay_grid_C{
	grid-column: 1;
	grid-row: 2;
}

.startupDisplay_grid_D{
	grid-column: 2;
	grid-row: 3;
}

.startupDisplay_grid_E{
	grid-column: 1;
	grid-row: 3;
}



/*   ================= LOAD SAVE GAMES  ======================= */


.savedGamesTable , #autoSaveGamesTable{
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 2px solid grey;
}

#autoSaveGamesTable{
  width: 60%;
}


.savedGamesTable th {
  text-align: center;
  padding: 3px;
  border: 1px solid grey;
}

.savedGamesTable td , #autoSaveGamesTable td{
  text-align: center;
  padding: 3px;
  border: 1px solid grey;
}


.savedGamesTableSelectCol {
  width: 15%
}	 				
.savedGamesTableDateCol{
  width: 25%
}
.savedGamesTableMapCol{
  width: 15%
}
.savedGamesTableTurnCol{
  width: 15%
}				

/*   ================= Slide Panel ======================= */


.cb_slide_panel {
/*    background: url(../images/slidePanel/panel_bg_default.jpg) repeat;     */
    background-color: #D9D9D9; 
    border-right: 1px solid #E0E0E0;
    box-shadow: 1px 1px 23px rgba(0, 0, 0, 0.17), -1px -1px 0 rgba(255, 255, 255, 0.85) inset;
    position: fixed;
    z-index: 65000;
    display: none;
}

.cb_slide_panel.panel_right {
    width: 678px;
    height: 100%;
    top: 0px;
    right: -678px;
}
.cb_slide_panel.panel_right {
    box-shadow: 1px 1px 23px rgba(0, 0, 0, 0.17), 1px 1px 0 rgba(255, 255, 255, 0.85) inset;
}

a.slidepanelClose {
    background: url(../images/slidePanel/panel_close_default.jpg) no-repeat;
    border: 1px solid #E0E0E0;
    height: 40px;
    position: absolute;
    text-indent: -9999em;
    width: 40px;
    display: none;
}
.cb_slide_panel.panel_right a.slidepanelClose {
    left: 0px;
    top: 0px;
}

.cb_slide_panel a.slidepanelClose:hover {
    background-position: -40px 0;
}

.cb_slide_panel .inner {
    padding: 20px 0 0 20px;
    width: 648px;
}

.popupTouchScreenPressed{
    background-color: #0FF31A;
    border: 1px solid black;
}


#busyMsg{
	color: white;
	text-align: center;
	z-index: 2000;

	width: 400px;
	height: 250px;
	background-color: #061F1F;
	border: 3px solid black; 
	
    position: absolute;
    top: 50vh;     /*  overwriten by resizeViewport() */
    left: 50vw;     /*  overwriten by resizeViewport() */
    margin-right: -50%;
    transform: translate(-50%, -50%);
    

}


#hourglass{
	width: 50px;
	height: 50px;
}



/*   ================= Game Message Window ======================= */

#gameMessageWindow{
	color: white;
	display: block;
	z-index: 1000;

	width: 400px;
	height: 250px;
	background-color: #003333;
	border: 3px solid black; 
	
    position: absolute;
    top: 50vh;     /*  overwriten by resizeViewport() */
    left: 5vw;     /*  overwriten by resizeViewport() */
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

#gameMessageWindow h1{
	display: block;
	position: absolute;
	left: 140px;
	color: yellow;
}

#gameMessageWindow #gameMessageWindow_close_button{
	display: block;
	position: absolute;
	left: 380px;
	color: white;
}

#gameMessageWindow #gameMessageWindow_contentWindow{
	display: block;
	position: absolute;
	top:50%;
	left: 50%;
	width: 98%;
	height:80%;
	border-top: white 1px solid;
    transform: translate(-50%, -50%);	
    overflow: auto;

}

#gameMessageWindow #gameMessageWindow_content{
	display: inline-block;
	position: relative;
	padding: 15px;
	margin-top: 15px;
	height: 100%;
	top:50%;
	left: 50%;
    transform: translate(-50%, -50%);	
}


#gameMessageWindow p{
	color: white;
	text-align: center;	
}

#gameMessageWindow h2{
	color: white;
	text-align: center;
	font: 1.2em/120% Georgia, Times New Roman,serif;	
}

#gameMessageWindow a{
	display: block;
	text-align: center;
	color: #00FFF6;
	text-align: center;
	font: 1.0em/130% Verdana, sans-serif;	
	text-decoration: underline;   
}

#gameMessageWindow a:hover{
	color: white; 
	cursor: pointer;     
}

/*   ================= HELP DISPLAY ======================= */

#helpDisplay{
	display: block;
	position: absolute;
	background-color: #003333;
	z-index: 2000;
	height: 80vh;
	width: 60vw;
	left: 20vw;
	top: 10vh;
	border-radius: 50px;
	border: 2px solid black;
	box-shadow: 0px 0px 50px 20px black
}