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

@font-face{ 
    font-family: "MontBold"; 
    src: local('☺'), url('../Media/fonts/NotoSans-Bold.ttf') format('woff');
}

@font-face{ 
    font-family: "MontRegular"; 
    src: local('☺'), url('../Media/fonts/NotoSans-Regular.ttf') format('woff');
}

@font-face{ 
    font-family: "Kunoichi"; 
    src: local('☺'), url('../Media/fonts/Kunoichi.woff') format('woff');
}

body {
	-webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.headingFont {
	font-family: Kunoichi;
	font-size: 30pt;
	color: #FFFFFF; /*#F5F538;*/
	text-shadow: 2px 2px 2px black, -2px -2px 2px black, -2px 2px 2px black, 2px -2px 2px black;

  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.boldFont {
	font-family: MontBold;
	font-size: 24pt;
	color: #FFFFFF; /*#F5F538;*/
	  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.copyFont {
	font-family: MontRegular;
	font-size: 16pt;
	color: #FFFFFF; /*#F5F538;*/
	  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
html {
	position:fixed;
}
html, body {
	overflow: hidden;
	height: 100vh; 
	padding: 0; 
	margin: 0;
}

div.content { height: 100%; }
div.spacer { height: 1px; }
body {
	margin: 0;
	background-color: black
}
canvas {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.mask {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	height:0px;
	background-color:#000000;
	z-index:99;
}
#levelMessage {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 10;
	/*background-color: #000000;*/
	cursor: default;
	visibility: visible;
	display: inline;
}
#levelMessageBackground {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 960px;
	height: 540px;
	background-color: #ffffff;
	background-image: url(../Media/UI/Title_BG_Nya.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0.5;
}
#levelBackground {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 960px;
	height: 540px;
	background-color: #000000;
	background-image: url(../Media/UI/Title_BG_Nya.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 1; 
}
.levelCharacter {
	position: absolute;
	background-repeat: no-repeat;
}
#levelMessageCharacter {
	background-image: url(../Media/EndScreen/End_Nya.png);
	top: 30px;
	left: 0px;
	width: 440px;
	height: 510px;
	background-size: 440px 510px;
	background-size: contain;
}
hitResponse {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 10;
	cursor: default;
	visibility: visible;
	display: inline;
}
#hitResponseCharacter {
	position: absolute;
	background-image: url(../Media/EndScreen/End_Nya.png);
	top: 30px;
	left: 260px;
	width: 440px;
	height: 510px;
	z-index: 9;
	background-size: contain;
	text-shadow: 0px 0px 300px cyan;
}
#hitResponseCharacterGlow {
	position: absolute;
	background-image: url(../Media/UI/BlueGlow.png);
	top: -270px;
	left: 60px;
	width: 840px;
	height: 840px;
	z-index: 8;
	background-size: contain;
}
#hitResponseText {
	position: absolute;
	text-align:center;
	z-index: 11;
	left: 330px;
	top: 437px;
	width: 300px;
	height: 135px;
	font-size:32px;
}
#levelText {
	color: white;
}

.levelFont {
	position: absolute;
	font-family: Kunoichi;
	font-size: 24pt;
	color: #F5F538;
	text-shadow: 2px 2px 2px black, -2px -2px 2px black, -2px 2px 2px black, 2px -2px 2px black;
	/*float: left;*/
	/*text-align: center;*/
	  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.buttonText {
	position: relative;
	left:50%;
	top:50%;
	text-align: center;
	font-family: Kunoichi;
	font-size: 38pt;
	color: #FFFFFF;
	text-shadow: 2px 2px 2px black, -2px -2px 2px black, -2px 2px 2px black, 2px -2px 2px black;
	float: left;
	transform: translate(-50%, -50%);
	  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
#headingText {
	position: absolute;
	left: 320px;
	top: 92px;
	width: 320px;
	height: 90px;
	text-align:center;
}
#endGameText {
	position: absolute;
	left: 370px;
	top: 92px;
	width: 520px;
	height: 90px;
	text-align:center;
}
#level1Text {
	position: absolute;
	left: 460px;
	top: 337px;
	width: 50px;
	height: 50px;
	text-align:center;
}
#level2Text {
	position: absolute;
	left: 591px;
	top: 337px;
	width: 50px;
	height: 50px;
	text-align:center;
}
#level3Text {
	position: absolute;
	left: 715px;	
	top: 337px;
	width: 50px;
	height: 50px;
	text-align:center;
}
#level4Text {
	position: absolute;
	left: 851px;
	top: 337px;
	width: 50px;
	height: 50px;
	text-align:center;
}
.levelMarker {
	/*outline-color:black;
				//outline-width:2px;
				//outline-style:dashed;*/
	background-repeat: no-repeat;
}
#levelMarker1 {
	position: absolute;
	left: 430px;
	top: 150px;
	width: 100px;
	height: 150px;
	background-image: url(../Media/EndScreen/End_Level1Guy_01.png);
	background-size: 100px 150px;				
}
#levelMarker2 {
	position: absolute;
	left: 556px;
	top: 175px;
	width: 112px;
	height: 137px;
	background-image: url(../Media/EndScreen/End_Level2Guy_01.png);
	background-size: 112px 137px;				
}
#levelMarker3 {
	position: absolute;
	left: 690px;
	top: 160px;
	width: 100px;
	height: 140px;
	background-image: url(../Media/EndScreen/End_Level3Guy_01.png);
	background-size: 100px 140px;
}
#levelMarker4 {
	position: absolute;
	left: 815px;
	top: 150px;
	width: 113px;
	height: 150px;
	background-image: url(../Media/EndScreen/End_Level4Guy_01.png);
	background-size: 113px 150px;
}
#levelMarker1_Off {
	position: absolute;
	left: 430px;
	top: 150px;
	width: 100px;
	height: 150px;
	background-image: url(../Media/EndScreen/End_Level1Guy_02.png);
	background-size: 100px 150px;				
}
#levelMarker2_Off {
	position: absolute;
	left: 556px;
	top: 175px;
	width: 112px;
	height: 137px;
	background-image: url(../Media/EndScreen/End_Level2Guy_02.png);
	background-size: 112px 137px;				
}
#levelMarker3_Off {
	position: absolute;
	left: 690px;
	top: 160px;
	width: 100px;
	height: 140px;
	background-image: url(../Media/EndScreen/End_Level3Guy_02.png);
	background-size: 100px 140px;
}
#levelMarker4_Off {
	position: absolute;
	left: 815px;
	top: 150px;
	width: 113px;
	height: 150px;
	background-image: url(../Media/EndScreen/End_Level4Guy_02.png);
	background-size: 113px 150px;
}
#playAgain {
	cursor:pointer;
	position: absolute;
	left: 465px;
	top: 422px;
	width: 210px;
	height: 133px;
	background-image: url(../Media/EndScreen/UI_playAgain.png);
	background-size: 210px 105px;
	background-repeat: no-repeat;
}
#moreGames {
	cursor:pointer;
	position: absolute;
	left: 710px;
	top: 422px;
	width: 210px;
	height: 133px;
	background-image: url(../Media/EndScreen/UI_moreGames.png);
	background-size: 210px 105px;
	background-repeat: no-repeat;
}
#playAgainButton {
	cursor:pointer;
	position: absolute;
	left: 465px;
	top: 442px;
	width: 210px;
	height: 85px;
	font-family: Kunoichi;
	font-size: 24px;
	z-index:12;
	color: #FFFFFF;
	text-align:center;
	text-shadow: 2px 2px 2px black, -2px -2px 2px black, -2px 2px 2px black, 2px -2px 2px black;

	  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
#BottomGradient {
	position:fixed;
	bottom: -1px;
	height:20px;
	left:0px;
	width:100%;
	background-image: url(../Media/UI/BottomGradient.png);
	z-index:1;
}
#moreGamesButton {
	cursor:pointer;
	position: absolute;
	left: 710px;
	top: 442px;
	width: 210px;
	height: 85px;
	font-family: Kunoichi;
	font-size: 24px;
	z-index:12;
	color: #FFFFFF;
	text-align:center;
	text-shadow: 2px 2px 2px black, -2px -2px 2px black, -2px 2px 2px black, 2px -2px 2px black;

	  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
#inGameElements {
	z-index:3;
	

}
#siteLink {
	cursor:pointer;
	position:absolute;
	top:5px;
	left:744px;
	width:216px;
	height:80px;
	z-index:11;
	background-image:url(../Media/UI/SiteLink_Left.png);
	background-size:216px 80px;
}
#siteLinkText {
	cursor:pointer;
	position: absolute;
	left:765px;
	top:25px;
	width: 200px;
	height: 100%;
	font-family: Kunoichi;
	font-size: 16px;
	z-index:12;
	color: #FFFFFF;
	text-align:center;
	/*text-shadow: 2px 2px 2px black, -2px -2px 2px black, -2px 2px 2px black, 2px -2px 2px black;*/

	  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
#siteLink2 {
	cursor:pointer;
	position:absolute;
	top:440px;
	left:0px;
	width:216px;
	height:80px;
	z-index:11;
	background-image:url(../Media/UI/SiteLink_Left.png);
	background-size:216px 80px;
}
#siteLinkText2 {
	cursor:pointer;
	position: absolute;
	left:5px;
	top:460px;
	width: 210px;
	height: 100%;
	font-family: Kunoichi;
	font-size: 16px;
	z-index:12;
	color: #FFFFFF;
	text-align:center;
	/*text-shadow: 2px 2px 2px black, -2px -2px 2px black, -2px 2px 2px black, 2px -2px 2px black;*/

	  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#pauseGameWindow {
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index:200;
	visibility:hidden;
	  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
#pauseGameWindowBackground {
	position:absolute;
	width:100%;
	height:100%;
	opacity:0.75;
	background-color:black;
}
#pauseWindowAlignment {
	position:absolute;
	left:50%;
	top:50%;
	width:500px;
	height:400px;
	margin:-200px -250px;
}
.pauseGameHeading {
	cursor: default;
	margin-bottom:30px;
	font-family: MontBold;
	font-size: 48px;
	color: #FFFFFF;
	text-align:center;
	/*text-shadow: 2px 2px 2px black, -2px -2px 2px black, -2px 2px 2px black, 2px -2px 2px black;*/

  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.pauseGameOptions {
	cursor:pointer;
	margin-bottom:30px;
	font-family: Kunoichi;
	font-size: 32px;
	color: #FFFFFF;
	text-align:center;
	/*text-shadow: 2px 2px 2px black, -2px -2px 2px black, -2px 2px 2px black, 2px -2px 2px black;*/

  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
@media only screen and (max-height: 600px) {
	 .pauseGameHeading {
		
		margin-bottom:24px;
		font-size: 40px;
		
	}
	.pauseGameOptions {
		
		margin-bottom:20px;
		font-size: 32px;
		
	}
	#pauseWindowAlignment {
		height:300px;
		margin: -150px -250px;
	}
}

@media only screen and (max-height: 400px) {
	 .pauseGameHeading {
		
		margin-bottom:12px;
		font-size: 36px;
		
	}
	.pauseGameOptions {
		
		margin-bottom:12px;
		font-size: 30px;
		
	}
	#pauseWindowAlignment {
		height:250px;
		margin: -125px -250px;
	}
}
@media only screen and (max-height: 320px) {
	 .pauseGameHeading {
		
		margin-bottom:8px;
		font-size: 26px;
		
	}
	.pauseGameOptions {
		
		margin-bottom:9px;
		font-size: 20px;
		
	}
	#pauseWindowAlignment {
		top:40%;
		height:160px;
		margin: -80px -250px;
	}
}
#pauseGameHeadingText {
	
}
#IEMessage {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #000000;
	cursor: default;
	visibility: hidden;
	z-index:200;
}
#IEMessageText {
	position:absolute;
	left:0px;
	top:50%;
	width:100%;
	height:150px;
	/*margin-top:-75px;*/
	cursor: default;
	font-family: Kunoichi;
	font-size: 32px;
	color: white;
	z-index:201;
	text-align: center;
	/*text-shadow: 2px 2px 2px black, -2px -2px 2px black, -2px 2px 2px black, 2px -2px 2px black;*/

  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
#blocker {
	background-color:black;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index:250;
}