@font-face{
    font-family: "Big Noodle Titling";
    src: url('http://chazu.arkku.net/files/font/big_noodle_titling.ttf');
	xsrc: url('font/big_noodle_titling.ttf');
}

@font-face{
    font-family:"Big Noodle Titling Oblique";
    src: url('http://chazu.arkku.net/files/font/big_noodle_titling_oblique.ttf');
	xsrc: url('font/big_noodle_titling_oblique.ttf');
}

@font-face {
    font-family:"Droid Sans";
    src: url("font/DroidSans.ttf");
}
@font-face {
    font-family:"Droid Sans";
    src: url("font/DroidSans-Bold.ttf");
    font-weight: bold;
}


body{
	xfont-family:Arial;
	xfont-family:"Droid Sans";
	xbackground: #000000 url("http://chazu.arkku.net/misc/diablo/d3_random/background/bg-08.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	Xbackground-color:black;
	background-color:#394743;
	xmax-width:1000px;
	xmargin: auto;
	
	xmax-height: 100vh;
	xmax-width:100vw;
	width:100vw;
	height:100vh;
	max-height:100vh;
	overflow-x:hidden;
	overflow-y:hidden;
	xpadding-left:0px;
	xpadding:0px;
	
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */

}

div{
	xborder:1px solid white;
}

section{
	xborder: 1px solid orange;
	padding :10px;
	xwidth:100vw;
}

container{
	xborder: 1px solid red;
	width:100vw;
}

#enemyImgCon{
	xborder:1px solid white;
	xborder-radius:500px;
	xbackground-color:rgba(0,0,0,0.5);

	xpadding:15px;
	xtext-align:center;
	width:100vw;
	height:65%;
	xmax-height:65%;
	transition: height 0.1s;
	
	display: flex;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
	position:relative;
	z-index:1;
}

#enemyImgFlipCon{
	xborder: 1px solid lime;
}

#enemyImgBackground{
	xborder:1px solid red;
	position:absolute;
	width:300px;
	height:300px;
	border-radius:150px;
	background-color:rgba(255,255,255,0.1);
	xbackground-color:rgba(0,0,0,0.5);
	transition: all 0.1;
	
	
}


img#enemyImage{
	xborder:1px solid cyan;
	xposition:relative;
	xwidth:200px;
	max-height:200px;
	xmargin-top: -100px; /* Half the height */
	xmargin-left: -100px; /* Half the width */
	filter: drop-shadow(0px 0px 3px  rgba(0, 0, 0, 1.0));

}


#atkAnimationContainer{
	xborder:1px solid red;	
	width:100vw;
	position:absolute;
	text-align:center;	
	display: flex;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */	
}

canvas#myCanvas {
	xborder:1px solid yellow;
	xposition:absolute;
	xwidth:256px;
	xheight:256px;
	xwidth:256px;
	xheight:256px;	
	xz-index:5;
}



/*
#mainContainer{
	xborder:1px solid grey;
	xmax-width: 1000px;
	xheight: 800px;
	xmin-height: 300px;
	xpadding-left: 20px;
	xpadding-right: 40px;
	xpadding-bottom: 40px;
	xpadding-top:40px;
	margin-left:auto;
	margin-right:auto;
	text-align: center;
} */


/*#bigNum{
	xborder:1px solid grey;
	color: #f3e6d0;
	font-size: 30vw;
	letter-spacing:	1px;	
	font-family: "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
	font-weight: bold;
	text-shadow: 2px 2px 4px #000000;
	xmargin-top: 30vh;
	xmargin-left: 40px;
}*/


#hardReloadBtn{
	position:fixed;
	right:0;
	top:0;
	width:100px;
	height:50px;
	background:green;
	z-index:100;
}	

#enemyNameContainer{
	text-align:center;
	xbackground-color:rgba(0,0,0,0.5);
	xoverflow-x:hidden;
	xoverflow-y:hidden;

}

.enemyName{
	xborder:1px solid grey;
	xcolor: grey;	
	xmargin-left:auto;
	xmargin-right:auto;
	margin-top: 3vh;
	margin-bottom: 1vh;
	xwidth:400px;
	xtext-align:center;
	
	color: #dbc7a3;
	font-size: 18px;
	xletter-spacing:	1px;	
	xfont-family: "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;	
	text-rendering: optimizeLegibility;
	font-weight: bold;
	text-shadow: 2px 2px 4px #000000;
	
	xmargin-left: 40px;
	text-shadow:-1px 0px 0px #000, 
				0px -1px 0px #000,
				1px 0px 0px #000,
				0px 1px 0px #000,
				0px 0px 2px #000,
				0px 0px 3px #000,
				0px 0px 4px #000,
				0px 0px 5px #000,
				0px 0px 8px #000;	
				
	position: relative;
	z-index:1;			
}




#enemyLevel{
	xborder:1px solid grey;
	xcolor:white;	
	color: #f3e6d0;
	xtext-align:center;
	font-weight: bold;
	xtext-shadow: 2px 2px 4px #000000;
	position: relative;
	z-index:1;	
}




.progress{
	background-color: rgba(0,0,0,0.0);
	background:none;
	
}

#healthBarContainer{
	xborder:1px solid yellow;
	text-align:center;
	xpadding:5px;
	width:100%;
	height:30px;
	position:relative;
	xmargin-left:auto;
	xmargin-right:auto;
	xbackground-color: rgba(0,0,0,0.5);
	
	display: flex;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
	
	
}

#healthBarBorder{
	xborder:5px solid white;
	xborder-radius:10px;
	xposition:absolute;	
	xwidth:82%;
	xheight:25px;
}

#healthBarBackground{
	xborder:1px solid grey;
	border-radius:10px;
	position:absolute;	
	width:80%;
	height:20px;
	background-color: rgba(0,0,0,0.4);
	box-shadow: 5px 3px 10px #000;

				
}

progress#enemyHealth{
	xborder:1px solid #364049;
	position:absolute;	
	width:80%;
	height:20px;	
	xz-index:1;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
	background-color: rgba(0,0,0,0.0);
	background:none;
}

progress#enemyHealth::-webkit-progress-bar {
  background-color: rgba(0,0,0,0.0);   
}

progress#enemyHealth::-webkit-progress-value {
    -webkit-transition: width 0.05s ease-out;
       -moz-transition: width 0.05s ease-out;
        -ms-transition: width 0.05s ease-out;
         -o-transition: width 0.05s ease-out;
            transition: width 0.05s ease-out;	
	background-color: #e60000; 	
	
			 
}

progress#enemyHealthYellow{
	position:absolute;
	width:80%;
	height:20px;
	padding:1px;
	background-color: rgba(0,0,0,0.0);
	background:none;
	margin-bottom:0px;
}

progress#enemyHealthYellow::-webkit-progress-bar {
	background-color: rgba(0,0,0,0.0);  
}

progress#enemyHealthYellow::-webkit-progress-value {
	background:#ffcc00;
    -webkit-transition: width 0.2s;
       -moz-transition: width 0.2s;
        -ms-transition: width 0.2s;
         -o-transition: width 0.2s;
            transition: width 0.2s;  
}




#vTextContainer {
	xborder:1px solid lime;
	position:absolute;
	xbackground-color: rgba(0,0,0,0.1);
	display: flex;
	justify-content: center;
	align-items: center;
	width:100vw;
	height:100vh;
	text-align:center;
	z-index:5;
	pointer-events: none;
}

#demoCanvas {
	xborder:1px solid magenta;
	width:100%;
	height:100%;
}

.victoryText{
	xborder:1px solid blue;
	xopacity:1.0;
	xposition:relative;
	position:absolute;
	z-index:100;
	visibility:hidden;
	color:white;
	font-size:40px;	

	font-family:"Big Noodle Titling Oblique";
	text-shadow: 2px 2px 4px #000000;
	margin: auto auto;
    -webkit-transition: padding-bottom 1s;
       -moz-transition: padding-bottom 1s;
        -ms-transition: padding-bottom 1s;
         -o-transition: padding-bottom 1s;
            transition: margin-left 0.5s; 

    -webkit-transition: opacity 2s;
       -moz-transition: opacity 2s;
        -ms-transition: opacity 2s;
         -o-transition: opacity 2s;
           transition: opacity 2s;  	
		   
	transition: transform 3s; 
	transform: translateY(0px);
			
 		


}

#topBar{
	background-color:#5b716b;
	height:29px;
	position: relative;
	z-index:2;
	xborder-bottom:1px solid #262626;
	
	
	background-color:#394743;
	xbox-shadow: 2px 2px 4px #000000;
	
	background-color: #138630;
	border-bottom: 5px solid #0d5920;
	xborder-radius: 5px;
	color: #000;

}


#killCountContainer, #goldContainer{
	xborder:1px solid white;
	color: #cfc2af;
	font-size: 15px;
	font-weight: bold;
	margin-left: 20px;
	margin-right:30px;
	position:absolute;
}


#tapDamageContainer{
	xborder:1px solid white;
	color: #cfc2af;
	font-size: 15px;
	font-weight: bold;
	position:absolute;
	margin-left:50%;
}


.killIcon{
	xborder:1px solid grey;
	width:15px;
	margin-right:2px;
}

#goldIcon{
	xborder:1px solid grey;
	margin-right:4px;	
}

#tapIcon{
	width:15px;
	margin-right:4px;
}

#zoneContainer{
	xborder:1px solid magenta;
	xcolor:white;
	text-align:center;	
	color: #cfc2af;
	font-size: 15px;
	xfont-family: "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;	
	font-weight: bold;
	xtext-shadow: 2px 2px 4px #000000;
	xmargin-top: 10vh;
	xmargin-bottom: 5px;
	xmargin-left: 40px;
	xbackground-color:rgba(0,0,0,0.5);
	position: relative;
	z-index:1;
}




.flippedHor{
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";

}


#lightBg{
	position:absolute;
	width:100vw;
	height:100vh;
	background-color: rgba(255,255,255,0.5);
}


#darkBg{
	position:absolute;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	background-color: rgba(0,0,0,0.3);
	z-index:0;
}


.heavy-text-shadow{
	text-shadow:-1px 0px 0px #000, 
			0px -1px 0px #000,
			1px 0px 0px #000,
			0px 1px 0px #000,
			0px 0px 2px #000,
			0px 0px 3px #000,
			0px 0px 4px #000,
			0px 0px 5px #000,
			0px 0px 8px #000;	
}

.bottom-text-shadow{
	text-shadow:0px 1px 2px #000; 	
}


.bold {
	font-weight:bold;
}

.helpTab{
	xtext-shadow: 2px 2px 4px #000000;
	xfont-size:18px;
	    -webkit-font-smoothing: none;
}