
body {
    margin : 0;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-text-size-adjust: none;
    -webkit-user-select : none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
    overflow:  hidden;
    -ms-touch-action: none;
    background-color:black;
}


div.app { 
       -webkit-transform: translate3d(0,0,0); 
} 

a {
    color: black;
    
}

#site-header {

    /*background-image: linear-gradient(rgba(255,116,73,0.95), rgba(255,99,41,0.95));
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF7449), to(#FF6329), color-stop(1,#333333));*/
    height: 40%;
    width:100%;
    /*left: 0;
    right:5em;*/
    text-align:center;
    line-height: 40%;
    position:   absolute;
    top: 0;
 
    z-index: 100;
    display:none;
}

.logoheader {
    font-family : Righteous;
    text-align:center;
    
     display:inline;
     top:0px;
     line-height:100%;
    /*margin-left:3em;*/
    color : white;/*rgb(255,255,255);*/
    font-size : 100%;
 vertical-align:top;
    text-shadow : 0.03em  0.03em  0.03em rgb(30,40,0),
                 -0.03em -0.03em  0.03em rgb(30,40,0),
                  0.10em  0.15em  0.15em rgb(0,0,0);
}

.tmheader {
    font-family : Righteous;
    text-align:right;
    
     display:inline;
     top:0px;
     /*line-height:15%;*/
    /*margin-top:50%;*/
    color : white;/*rgb(255,255,255);*/
    font-size : 25%;
 /*vertical-align:text-top;*/
    text-shadow : 0.03em  0.03em  0.03em rgb(30,40,0),
                 -0.03em -0.03em  0.03em rgb(30,40,0),
                  0.10em  0.15em  0.15em rgb(0,0,0);
}
#bottombanner {
    position:absolute;
    background-color:green;
    color:gray;
  margin-top:90%;
    height:60px;
    align-content:center;
    text-align:center;
    text-anchor:middle;
 
    width:100%;
    display:none;
    z-index : 110;
}
.home-icon {

    display:inline;
    position:absolute;
    height: 1.5em;
    left:0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
    -moz-opacity: 0.9;
    opacity: 0.9;
    height: 100%;
    vertical-align:central;
     text-align : left;
        text-shadow : 0.03em  0.03em  0.03em rgb(30,40,0),
                 -0.03em -0.03em  0.03em rgb(30,40,0),
                  0.10em  0.15em  0.15em rgb(0,0,0);
}


.loginimage {
        display:inline-block;
    position:relative;
     padding-left : 8%;
     top: 25%;

}

.home-icon:hover {
    display: inline;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    background:black;
}

/*.home-icon:active {
    display: inline;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    background:black;
}*/


facejenson {
padding-left: 65px;
padding-right: 30px;
background-color: #3b5998;
background: #3b5998 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5986cc), color-stop(30%, #5986cc), color-stop(100%, #3b5998)) repeat-x;
background: #3b5998 -webkit-linear-gradient(top, #5986cc 0%,#5986cc 30%,#3b5998 100%) repeat-x;
background: #3b5998 -moz-linear-gradient(top, #5986cc 0%,#5986cc 30%,#3b5998 100%) repeat-x;
background: #3b5998 -o-linear-gradient(top, #5986cc 0%,#5986cc 30%,#3b5998 100%) repeat-x;
background: #3b5998 linear-gradient(top, #5986cc 0%,#5986cc 30%,#3b5998 100%) repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border-color: #0b1b3c;
color: #fff;
text-shadow: 0 1px 2px rgba(22,84,122,0.75);
-webkit-box-shadow: inset 0 1px 0 #99baff,0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0 1px 0 #99baff,0 1px 2px rgba(0,0,0,0.2);
box-shadow: inset 0 1px 0 #99baff,0 1px 2px rgba(0,0,0,0.2);
}

#app {
    position : absolute;
    left : 0;

    /*font-size : 40px;*/
    width : 100%;
    height : 100%;
    background-color : black;
    font-family : Righteous;
    color : rgb(255,165,0);
}


#app .screen {
    position : absolute;
  
    width : 100%;
    height : 100%;
    display : none;
    z-index : 10;
}

#app .screen.blaster.gamescreen {
    position : absolute;
  
    width : 100%;
    height : 100%;
    display : none;
    z-index : 11;
}

#app .screen.active {
    display : block;   
}


#splash-screen {
    text-align : center;
    padding-top : 1.5em;
}
#splash-screen .continue {
    cursor : pointer;
    font-size : 0.75em;
}

.popupmenu {
    position : absolute;
    left : 7%;
    top : 10%;
    width :86%;
    height : 80%;
  background-color :rgba(0,0,0,0.55);
    color :  rgba(255,255,255,0.85);
  

    display:none;
    text-align : left;
 
    /*z-index : 10;*/    
}


#previewpopup {
    position : absolute;
    left : 5%;
    right : 5%;
    top : 10%;
    width :90%;
    height : 85%;
    /*font-size:0.5em;*/
  background-color :rgb(0,0,0);
    color :  rgba(255,255,255,0.90);
    display:none;
    text-align : center;
    z-index : 20;
       
}

#previewpopup h2{
    font-size:7.5em;
}

.navi-item {
    	display: inline-block;
    position: absolute;
   background-color : rgba(0,0,0,0.3);
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}
.navi-item:hover {

background: black;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

.navi-item:active {

background: black;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}


.popupheader {
    font-family : Righteous;
    font-size: 78%;
    text-align:center;
      position : absolute;
    /*margin-top:2%;*/

    left:18%;
     display:block;
     top:1%;
  
    margin-left:0;
    color : rgb(255,255,255);
 
    vertical-align:central;

    
    text-shadow : 0.03em  0.03em  0.03em rgb(30,40,0),
                 -0.03em -0.03em  0.03em rgb(30,40,0),
                  0.10em  0.15em  0.15em rgb(0,0,0);
}

ul.menu {
    /*text-align : center;*/
    padding : 0;
    list-style : none;
    
    margin-top:2%;
    /*top:10%;*/
      margin-left: 18%;
}

ul.menu li {
    
    top:0.1em;
    margin : 0px 0px;   
   
}

ul.menu2 li {
    
    top:0em;
    margin : 0px 0px;   
   
}

/*ul.menu li button:hover {
    background : rgb(255,255,255);
}

ul.menu li button:active {
    color : rgb(255,255,5);
    background : rgb(30,40,0);
}*/

#gamepopup {
    position : absolute;
    left : 10%;
     font-family : Arial;
    top : 10%;
    width :80%;
    height : 80%;
  background-color :rgba(0,0,0,0.7);
    color :  rgba(255,255,255,0.90);
    display:none;
    text-align : center;
    z-index : 25;   
}


#helppopup 
{
    position : absolute;
    left : 2%;
     font-family : Arial;
    top : 2%;
    width :96%;
    height : 96%;
  background-color :rgba(0,0,0,0);
 /*// color :  rgba(255,255,255,0.90);*/
    display:none;
    text-align : center;
    z-index : 110;   
}

div.ratingpopup 
{
    position : absolute;
     left : 10%;
     
    top : 15%;
    width :80%;
    height : 61%;
    background-color :rgba(0,0,0,0.9);
  border:1px solid gray;
  /*opacity:0.9;*/
   margin:30px 50px;
  color :  rgba(255,255,255,0.90);
    display:none;
    text-align :left; 
    z-index : 180;   
    border-radius: 15px;
}


div.smallhelppopup 
{
    position : absolute;
    /*left : 2%;
     font-family : Arial;
    top : 2%;
    width :96%;
    height : 96%
    color:rgba(238,221,130,0.3);;*/
    background-color:rgba(255,255,102,0.92);
  border:1px solid black;
  /*opacity:0.9;*/
   margin:30px 50px;
 /*// color :  rgba(255,255,255,0.90);*/
    display:none;
    text-align :left;
  
    z-index : 180;   
    border-radius: 15px;
}

    div.smallhelppopup p {

        
  font-weight:bold;
  font-family : Righteous;
  color:#000000;
    }


#inputpopup {
    position : absolute;
    left : 0%;
     font-family : Righteous;
    top : 0%;
    /*width :100%;
    height : 100%;*/
  background-color :rgba(0,0,0,0.7);
    color :  rgba(255,255,255,0.90);
    display:none;
    text-align : center;  
    z-index : 25;  
}


    #gamepopup char {
        font-size:500%;
  margin-top: 6em;
  
    }


.logo {
    font-family : Arial;
    margin : 0;
    text-align : center;
    
    color : white;/*rgb(255,151,99);*/
    font-size :250%;
     line-height : 15%;
    line-height : 0.9em;
    text-shadow : 0.03em  0.03em  0.03em rgb(30,40,0),
                 -0.03em -0.03em  0.03em rgb(30,40,0),
                  0.10em  0.15em  0.15em rgb(0,0,0);
}



.logosmall {
    font-family : Righteous;
    margin : 0.5em;
    text-align : center;
    color : rgb(255,151,99);
    /*font-size : 40px;*/
    font-size :120%;
    line-height : 11%;
    text-shadow : 0.03em  0.03em  0.03em rgb(30,40,0),
                 -0.03em -0.03em  0.03em rgb(30,40,0),
                  0.10em  0.15em  0.15em rgb(0,0,0);
}


.logosmaller {
    font-family : Righteous;
    margin-top : 80%;
    text-align : center;
    color : rgb(255,255,255);
    font-size : 120%;
    line-height : 9%;
    text-shadow : 0.03em  0.03em  0.03em rgb(30,40,0),
                 -0.03em -0.03em  0.03em rgb(30,40,0),
                  0.10em  0.15em  0.15em rgb(0,0,0);
}


.no-textshadow .logo {
    filter : dropshadow(color=#000000,offX=3,offY=3);
}

/* Progress bar */
.progress {
    position : absolute;
    left:20%;
    top:25%;

}

/* Background */
#app .background {
    position : absolute;
    left : 0;

    width : 100%;
    height : 100%;
    z-index : 0;
}

/*#app .background canvas {
  
    width : 100%;
    height : 100%;
}*/
/* Game screen - Announcement */
#anipoppis {
    position : absolute;
    left: 0;
    top : 50%;
    margin-top : 2em;
    width : 100%;

    font-family : Slackey, sans-serif;
    color : rgb(255,255,255);
    text-shadow : 0.03em 0.03em 0.03em rgb(255,255,0),
                 -0.03em -0.03em 0.03em rgb(255,255,0),
                  0.1em 0.15em 0.15em rgb(0,0,0);
    text-align : center;
    white-space : nowrap;

    z-index : 2000; /* in front of everything else */
    opacity : 0; /* start out transparent */
    cursor : default;
}

.no-textshadow  #anipoppis {
    filter: glow(color=#ffff00,strength=1),
            dropshadow(color=#000000,offX=3,offY=3);
}

/* Announcement animation */
/* Keyframes for webkit */
@-webkit-keyframes zoomfade {
    0% {
        opacity : 1;
        -webkit-transform : scale(0.5);
    }
    25% { /* stay at full opacity for a bit */
        opacity : 1;
    }
    100% { /* and then fade to 0 */
        opacity : 0;
        -webkit-transform : scale(1.5);
    }
}
/* Keyframes for webkit */
@-moz-keyframes zoomfade {
    0% {
        opacity : 1;
        -moz-transform : scale(0.5);
    }
    25% { /* stay at full opacity for a bit */
        opacity : 1;
    }
    100% { /* and then fade to 0 */
        opacity : 0;
        -moz-transform : scale(1.5);
    }
}
/* zoom-fade animation class */
.zoomfade {
    -webkit-animation-name : zoomfade;
    -webkit-animation-duration : 2s;
    -moz-animation-name : zoomfade;
    -moz-animation-duration : 2s;
}

/* Fallback for browsers without CSS animations */
.no-cssanimations #anipoppis {
    display : none;
}
.no-cssanimations #anipoppis.active {
    opacity : 1;
    display : block;
}



.jenson {
        /*background-image: linear-gradient(rgba(255,116,73,0.95), rgba(255,99,41,0.95));
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF7449), to(#FF6329), color-stop(1,#333333));*/
 
	display: inline-block;
    position: relative;
	outline: none;
	cursor: pointer;
    left:auto;
    width:73%;
      /*height:13%;*/
	text-align: center;
    color:rgb(250,235,215);
    padding: .0em 0% .00em;
  
	/*text-decoration: none;*/
	/*font:  Righteous;
    font-size : 3em;*/
    /*height: 3em;*/
	/*padding: .05em 0.1em .05em;*/
    /*letter-spacing:1px;*/

  text-shadow : 0.03em  0.03em  0.03em rgb(30,40,0),
                 -0.03em -0.03em  0.03em rgb(30,40,0),
                  0.10em  0.15em  0.15em rgb(0,0,0);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.leveljenson {

	
  
    width:16%;
       text-align:left;
      padding: 0% 5% 0% 5%;
    color:rgb(250,235,215);
    
	/*text-decoration: none;*/
	/*font:  Righteous;
    font-size : 3em;*/
    /*height: 3em;*/

    /*letter-spacing:1px;*/
        text-shadow : 0.03em  0.03em  0.03em rgb(30,40,0),
                 -0.03em -0.03em  0.03em rgb(30,40,0),
                  0.10em  0.15em  0.15em rgb(0,0,0);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
   
}

.quizjenson {
        /*background-image: linear-gradient(rgba(255,116,73,0.95), rgba(255,99,41,0.95));
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF7449), to(#FF6329), color-stop(1,#333333));*/
 
	display: inline-block;
    position: relative;
	outline: none;
	cursor: pointer;
    left:auto;
    width:73%;
      /*height:13%;*/
      border-color:white;
	text-align: center;
    color:rgb(250,235,215);
    /*padding: .0em 0% .00em;*/
  
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;

}


ul.levelmenu {
     /*margin-top:18%;*/
     margin-left:10%;
    display:inline-block;
    line-height:0px;
    /*height:80%;*/
    overflow:hidden;
   padding : 0;
  /*   list-style : none;
    
   
    /*top:10%;*/
       /*left: 20%;*/
}

ul.levelmenu li {
    display:inline-block;
    /*top:0.4em;*/
    /*margin-top:3%;*/
    margin-right:3%;
    text-align:center;
    /*margin-right : 0.2em ;   
    margin-left:0;*/
    /*padding-left:0;*/
 
}

/*.jenson:hover {
	
     background : #FFFFFF;
     
}
.jenson:active {
   
    background : #FFFFFF;
    
}*/

.tabjenson {
	display: inline-block;
    position: absolute;
	outline: none;
	cursor: pointer;
    left:0%;
    /*width:50%;*/
	text-align: left;
    color:rgb(255,255,255);
}


.loginjenson {
	display: block;
    position: relative;
	outline: none;
	cursor: pointer;
    left:auto;
    width:20%;
    height:20%;

}

/* Install screen for iOS devices */
#install-screen  {
    padding-top : 0.5em;
    text-align : center;
}

#install-screen span {
    font-size : 0.75em;
    display : inline-block;
    padding : 0 0.5em;
}

.alien-size {
    font-size : 40px;
}
#alienMSizeTester {
    position : absolute;
    width : 1em;
    height : 1em;
    left : -1000px;
}