/*

*/
/* 
  
*/
body{
    margin: 0;
    padding: 0;
}
#container {    
    margin: 0;
    padding: 0;
    background-color:white;
    overflow: hidden;    
    color: white;  
    background-image: url("../images/espace.png");
    background-repeat:repeat;    
}
.precache {
    visibility: hidden;
    background-image: url("../images/pigs.png"),
    url("../images/nightEarth.jpg");
    background-repeat: no-repeat;    
}
#menuDiv {    
    width:100%;
    height: 100%;   
    display: flex;
    justify-content: center;
    align-items: center;    
}
.menupage {
    position: relative;
    display: none;
    font-size:0;
    width:90%;
    height:90%;
    text-align: center;
    color:white;
    background-color: rgba(30,70,75,0.5);
    border: 4px solid rgba(60,140,150,0.2);
    border-radius: 10%;
}
.menuShow{
  display: block;  
}
#space {
    position: relative;
    background-color:black;
    font-family: "Vedanda";
    background-image: url("../images/espace.png");
    background-repeat:repeat;
    
    height:calc(100% - 2px);
    width:calc(100% - 2px);  
    border: 1px solid green;   
    overflow: hidden;    
    backface-visibility: visible;    
    transform-style: preserve-3d;    
    perspective: 10000px;
    perspective-origin: 1000px -250px;   
    display:none;
}
.gameControl {
   position: absolute;
   height: 16px;
   top:5px;
   right:5px;   
   user-select:none;
   -moz-user-select:none;
   -webkit-user-select:none;
   -ms-user-select:none;     
}
.gameTime {
   display: inline-block;
   color:green;
}
.quitButton {
   display: inline-block;
   margin: 0 5px 0 5px;
   padding: 4px;
   width:20px;
   font-size: 16px;
   font-weight: bold;
   cursor: pointer;
   text-align: center;
   border-radius: 50%;
   color:red;
   background-color: grey;  
}
/***********
Arm selector panel start
*/
.selector {
    position:absolute;
    top:0;
    width:12%;
    height:18%;
    min-height: 80px;
    font-size: 0;
    z-index: 100;
}
.selectArm {
   width: calc(100% - 10px);
   height:calc(33% - 10px);
   margin: 4px;
   border: 2px outset darkorange;
   background: linear-gradient(135deg,rgb(240,125,0) 0%, rgb(255,200,50) 100%)  
}
.armSelected {
   border: 3px inset darkorange;
   background: linear-gradient(135deg, yellow 0%,  rgb(240,125,0) 100%);    
}
.armType {
   float: left;
   display: inline-block;
   width:calc(70% - 10px);
   height: 100%; 
}
.armType div {
   position:relative;
   width: 80%;
   left: 10%;
   top:40%;    
}
.missileType {
    height:33%;   
    border-top-right-radius: 40%;
    border-bottom-right-radius:40%;
    background-color: red;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0.2) 0%,
        rgba(255,255,255,1) 50%,
        rgba(255,0,0,1) 85%,
        rgba(255,255,255,1) 90%,
        rgba(255,255,255,1) 100%);
}
.laserType {
   border-bottom: 0.7vh solid green;  
}
.gunType {
   border-bottom: 0.7vh dashed red;  
}
.armQty {  
   float: right;
   display: inline-block;
   padding: 2px;
   font-size: 3.5vh;
   text-align: center;
   width: calc(30% - 8px);
   height: calc(100% - 4px);
   background-color: gray;
   color: white;
   user-select:none;
   -moz-user-select:none;
   -webkit-user-select:none;
   -ms-user-select:none;  
}
.qtyflash {
    animation: redflash 0.5s infinite;
}
@keyframes redflash {
    from {
        color:red;
    }
    to {
       color:white; 
    }
}
/* ************
Arm selector panel end
*/
.fadeout {
    opacity: 0;
}
#planet {
    position: absolute;
    width: 100%;
    height:150%;
    top:20%;
    left:60%;
    background-color: black;
    background-image:radial-gradient(black 20%, rgb(130,130,130)); 
    border-radius: 50%;
    border: 1px solid rgba(150,150,150,0.2);
    z-index: 0;
    background-image: url("../images/nightEarth.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.surround {
   position: absolute;   
   transition-property: opacity;
   transition-duration: 1s;
   transition-timing-function: ease-in;   
}
.pigsurround {
    width:9vh;
    height:9vh;
}
.pighelmet {
    position: absolute;
    top:-10%;
    width:100%;
    height:90%;
    border-radius: 45% 45% 0 0;
    background-image:radial-gradient(transparent 60%,whitesmoke);
}
.pig {
    width:75%;
    height:75%;
    margin: auto;
    background-image: url("../images/pigs.png");
    background-repeat: no-repeat;
    background-size: 533% 100%;
    background-position-x:100%;   
}
.gunsurround {
   height:8vh;
   width:12vh;
   z-index: 5000;
}
.carriage {
   position: relative;
   width:100%;
   background-color: silver;
   background-color: rgb(192,192,192);
   background:linear-gradient(135deg,rgb(100,100,100) 0%, rgb(255,255,255) 100%);   
}
.playercarriage {
   height: 70%;
   margin: auto;
   top:30%;
   border: 1px outset  darkslategray;
   border-radius: 40% 40% 0 0;
}
.pigcarriage {
    height:25%;
    border-radius: 30%;
}
.tint75 {
   background-color: rgb(220,150,150);
   background:linear-gradient(135deg,rgb(230,150,150) 0%, rgb(255,210,210) 100%);   
}
.tint50 {
   background-color: rgb(220,100,100); 
   background:linear-gradient(135deg,rgb(230,80,80) 0%, rgb(255,210,210) 100%);  
   
}
.tint25 {
   background-color: rgb(200,50,50);
   background:linear-gradient(135deg,rgb(210,40,40) 0%,rgb(255,210,210) 100%);   
}
.tint0 {
   background-color: rgb(128,0,0);
   border-color: rgb(128,0,0);
   background: rgb(128,0,0);   
}
.turret {
   position: relative;
   top:-40%;
   width:50%;
   height:100%;
   margin: auto;
   border: 1px outset darkslategray;    
   border-radius: 50%;
   background-color:inherit;
   background: inherit;
}
.pigturret {
    position: relative;
    top:30%;
    width:12.5%;
    height:50%;
    margin: auto;
    border-radius: 50%;
    background-color: lightblue;
    border: 2px solid black;
}
.barrel {
   position: relative;
   top:-30%;
   margin: auto;
   width:25%;
   height:90%;
   border: 1px outset darkslategray;    
   border-radius: 0 0 10px 10px;
   background-color: inherit;
   background: inherit;
}
.percent {
   position: absolute;
   top:70%;
   height:12%;
   width:calc(100% - 5px);
   background-color: darkslategray;
   border: 2px ridge rgb(140,140,140);

}
.percentBar {
    height:100%;
    width: 100%;
    background-color: green;
}

.particle {
    position: absolute;
    width:8px;
    height:8px;
    border-radius: 50%;
    transition-property: all;
    background-color:yellow;
}

@keyframes yellowRed {
    from {
        background-color:yellow;
    }
    to {
        background-color:darkred;
    }
}
.laser {
    background-color: green;
}
.blueray {
    background-color: blue;
}
.missile {
    border-top-left-radius: 40%;
    border-top-right-radius: 40%;   
    background: linear-gradient(
        to bottom,
        rgba(250,250,250,1) 0%,
        rgba(250,250,250,1) 2%,
        rgba(255,0,0,0.5) 4%,        
        rgba(200,200,200,0.2) 20%,
        rgba(200,200,200,0 ) 100%);
}
.gun {
   border-left: 3px dashed red;
}
.armbase {
    position:absolute;
    width:10px;
    height:10px;
}
.arm {
    position: relative;
    margin: auto;
    opacity: 1;
    transition-property: opacity;
}
.hit {
    width:100%;
    height:2px;
    background-color: rgba(128,0,0,0.7);
}
#g8games {
	position: absolute;
    top: 550px;
	
	}
	 .modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}
.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	width: 340px;
	position: relative;
	margin: 20% auto;
	padding: 12px;
	top: -60px;
	border-radius: 10px;
	text-align: center;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
}
.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #006699; }