@charset "utf-8";

/* CSS Document */


body {
	margin-top:0px;
	margin-left:0px;
	background-color:#000;
}

test {
    background: #c5f6f2;
}

#enchant-stage {
	#background-color:#CCCCCC;
	width:320px;
	height:420px;
	left:50%;
	margin-left:-160px;
}

#debug{
	position:absolute;
	top:0px;
	left:70%;
	background-color:#CCCCFF;
	display:none;
}

/*
  new Fonr family
*/
@font-face {
    font-family: "APJapanesefont";
    src: url('APJapanesefont.ttf') format("truetype");
    unicode-range: U+0061-U+007A, U+0020-U+0040;
}

/*
   end font
*/
.runtext{
	background-image:url('../assets/runningtxt.png');
	background-repeat:repeat;
	
	-webkit-animation-name: movebg;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	-webkit-animation-duration: 5s;
	-webkit-animation-delay: 0s;
	-webkit-animation-timing-function:linear;

	-moz-animation-name: movebg;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: normal;
	-moz-animation-duration: 5s;
	-moz-animation-delay: 0s;
	-moz-animation-timing-function:linear;
}

.tomititle{
	background-size: 90% 90%;
}

.txtload{
	margin-top:10px;
	font-size:30px;
	font-weight:bold;
	font-family:"Courier New", Courier, monospace;
	color:#fff;
	cursor:default;
	border:medium;	
}

.loading{

	position:absolute;
	text-align:center;

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

	background: -moz-linear-gradient(top, #a8cee0 0%, #e3edf7 44%, #e8eaed 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8cee0), color-stop(44%,#e3edf7), color-stop(100%,#e8eaed)); 

	
	display:block;
	width:200px;
	height:50px;
	opacity:0.8;
}


.button{
	position:absolute;
	text-align:center;

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background: -moz-linear-gradient(top, #a8cee0 0%, #e3edf7 44%, #e8eaed 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8cee0), color-stop(44%,#e3edf7), color-stop(100%,#e8eaed)); 

	display:block;
	width:200px;
	height:50px;
	opacity:0.9;
}



.txtbutton{
	margin-top:10px;
	font-size:18px;
	font-weight:bold;
	font-family:"Courier New", Courier, monospace;
	color:#000;
	cursor:default;
	border:medium;
}



.txtscore{
	margin-top:10px;
	text-align:right;
	font-size:18px;
	font-weight:bold;
	font-family:"Courier New", Courier, monospace;
	color:#000;
	cursor:default;
}



.txterr{
	margin-top:10px;
	text-align:center;
	font-size:18px;
	font-weight:bold;
	font-family:"Courier New", Courier, monospace;
	color:#000;
	cursor:default;
}



.txtcoin{
	margin-top:10px;
	text-align:center;
	font-size:45px;
	font-weight:bold;
	font-family:"Courier New", Courier, monospace;
	color:#fff;
	cursor:default;
}



.paper {
  position: absolute;
  top:0px;
  left:100px; 
  width: 20px;
  height: 20px;   

  -webkit-animation-name: bounce2;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 4.2s;

  -moz-animation-name: bounce2;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: normal;
  -moz-animation-duration: 4.2s;
}


.bell {
   position: absolute;

  -webkit-animation-name: rotebell;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0.3s;

  -moz-animation-name: rotebell;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: normal;
  -moz-animation-duration: 1s;	
  -moz-animation-delay: 0.3s;	

}



.ropedown{
  position: absolute;

  -webkit-animation-name: rdown;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 1s;

  -moz-animation-name: rdown;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: normal;
  -moz-animation-duration: 1s;	
}



.showhelp{
  position: absolute;

  -webkit-animation-name: helpup;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 0.5s;

  -moz-animation-name: helpup;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: normal;
  -moz-animation-duration: 0.5s;	

}



.hidehelp{
  position: absolute;

  -webkit-animation-name: helpdown;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 0.5s;

  -moz-animation-name: helpdown;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: normal;
  -moz-animation-duration: 0.5s;	
}



.bg2show{
  opacity:1;
  -webkit-animation-name: alpha;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 0.5s;

  -moz-animation-name: alpha;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: normal;
  -moz-animation-duration: 0.5s;	
}

.bg2fadeOut{
  opacity:0;
  -webkit-animation-name: alpha;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 2.5s;

  -moz-animation-name: alpha;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: normal;
  -moz-animation-duration: 2.5s;	
}

.fadeout{
  -webkit-animation-name: fadehide;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0s;

  -moz-animation-name: fadehide;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: normal;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 0s;
}
.moveup{
  -webkit-animation-name: upmove;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-delay: 0s;


  -moz-animation-name: upmove;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: normal;
  -moz-animation-duration: 0.5s;
  -moz-animation-delay: 0s;
}
.fadein{

  -webkit-animation-name: fadeshow;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0s;


  -moz-animation-name: fadeshow;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: normal;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 0s;
}

.leftToRight{

  -webkit-animation-name: leftToRight;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0s;


  -moz-animation-name: leftToRight;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: normal;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 0s;
}

.rightToLeft{

  -webkit-animation-name: rightToLeft;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0s;


  -moz-animation-name: rightToLeft;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: normal;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 0s;
}
@-webkit-keyframes leftToRight {
	from {
		left:-360px;
		opacity:0;
	}
	to {
		left:0px;
		opacity:1; 
		-webkit-animation-timing-function: ease-in;
		-moz-animation-timing-function: ease-in;
	}
}

@-moz-keyframes leftToRight {
	from {
		left:-360px;
		opacity:0;
	}
	to {
		left:0px;
		opacity:1; 
		-webkit-animation-timing-function: ease-in;
		-moz-animation-timing-function: ease-in;
	}
}

@-webkit-keyframes rightToLeft {
	from {
		left:320px;
		opacity:0;
	}
	to {
		left:0px;
		opacity:1; 
		-webkit-animation-timing-function: ease-in;
		-moz-animation-timing-function: ease-in;
	}
}

@-moz-keyframes rightToLeft {
	from {
		left:320px;
		opacity:0;
	}
	to {
		left:0px;
		opacity:1; 
		-webkit-animation-timing-function: ease-in;
		-moz-animation-timing-function: ease-in;
	}
}

@-webkit-keyframes movebg {
	from { background-position:0px 0px;}
		
	to{
	   background-position:-195px 0px;
	}
}

@-webkit-keyframes upmove {
  from { top:88px; }

  to   { 

  top:20px;

  -webkit-animation-timing-function: ease-in;

  -moz-animation-timing-function: ease-in;

  }
}

@-moz-keyframes upmove {
  from { top:88px; }

  to   { 

  top:20px;

  -webkit-animation-timing-function: ease-in;

  -moz-animation-timing-function: ease-in;

  }
}

@-webkit-keyframes slidein {

  from { left:-150px; }

  to   { 

  left:-60px;

  -webkit-animation-timing-function: ease-in;

  -moz-animation-timing-function: ease-in;

  }

}



@-moz-keyframes slidein {

  from { left:-150px; }

  to   { 

  left:-60px;

  -webkit-animation-timing-function: ease-in;

  -moz-animation-timing-function: ease-in;

  }

}



@-webkit-keyframes fadeshow {

  from { opacity:0; }

  to   { 

  opacity:1; 

  -webkit-animation-timing-function: ease-in;

  -moz-animation-timing-function: ease-in;

  }

}



@-moz-keyframes fadeshow {

  from { opacity:0; }

  to   { 

  opacity:1; 

  -webkit-animation-timing-function: ease-in;

  -moz-animation-timing-function: ease-in;

  }

}



@-webkit-keyframes fadehide {

  from { opacity:1; }

  to   { 

  opacity:0; 

  -webkit-animation-timing-function: ease-in;

  -moz-animation-timing-function: ease-in;

  }

}



@-moz-keyframes fadehide {

  from { opacity:1; }

  to   { 

  opacity:0; 

  -webkit-animation-timing-function: ease-in;

  -moz-animation-timing-function: ease-in;

  }	

}



@-webkit-keyframes fail {

	from{ 

		top:260px; 

		

	}

	

	to{ 

		top:450px; 

		-webkit-animation-timing-function: ease-out;

		-moz-animation-timing-function: ease-out;

	}

}



@-moz-keyframes fail {

	from{ top:260px; }

	

	to{ 

		top:450px; 

		-webkit-animation-timing-function: ease-out;

		-moz-animation-timing-function: ease-out;

	}	

}



@-webkit-keyframes alpha {

  from { opacity:0; }

  to   { 

  opacity:0.5; 

  -webkit-animation-timing-function: ease-in;

  -moz-animation-timing-function: ease-in;

  }

}



@-moz-keyframes alpha {

  from { opacity:0; }

  to   { 

  opacity:0.5; 

  -webkit-animation-timing-function: ease-in;

  -moz-animation-timing-function: ease-in;

  }

}



@-webkit-keyframes helpdown {

	from {

		top: 0px;

	}

	

	to {

		top: 420px;

	}

}



@-moz-keyframes helpdown {

	from {

		top: 0px;

	}

	

	to {

		top: 420px;

	}

}



@-webkit-keyframes helpup {

	from {

		top: -420px;

	}

	

	to {

		top: 0px;

	}

}


@-moz-keyframes helpup {

	from {

		top: 420px;

	}

	

	to {

		top: 0px;

	}

}

@-webkit-keyframes rdown {

  from { 	  

  		top: 53px;

  }

  

  50%{

	 top: 73px;

  }

  

  to {

	  top: 53px;

  }

}



@-moz-keyframes rdown {

  from { 	  

  		top: 53px;

  }

  

   50%{

	 top: 73px;

  } 

  

  to {

	  top: 53px;

  }

}





@-webkit-keyframes rotebell {

  from { 	  

  		-webkit-transform: rotateZ(0deg);

	  	-moz-transform: rotateZ(0deg);

		-webkit-transform-origin: 50% 0%;

		-moz-transform-origin: 50% 0%;

  }

  

  20%{

  		-webkit-transform: rotateZ(10deg);

	  	-moz-transform: rotateZ(10deg);	

		-webkit-transform-origin: 50% 0%;

		-moz-transform-origin: 50% 0%;		 

  }

  

  40%{

  		-webkit-transform: rotateZ(-10deg);

	  	-moz-transform: rotateZ(-10deg);

		-webkit-transform-origin: 50% 0%;

		-moz-transform-origin: 50% 0%;			 

  }  

  

  to {

	  -webkit-transform: rotateZ(0deg);

	  -moz-transform: rotateZ(0deg);

	  -webkit-transform-origin: 50% 0%;

	  -moz-transform-origin: 50% 0%;	  

  }

}



@-moz-keyframes rotebell {

  from { 	  

  		-webkit-transform: rotateZ(0deg);

	  	-moz-transform: rotateZ(0deg);

		-webkit-transform-origin: 50% 0%;

		-moz-transform-origin: 50% 0%;

  }

  

  20%{

  		-webkit-transform: rotateZ(10deg);

	  	-moz-transform: rotateZ(10deg);	

		-webkit-transform-origin: 50% 0%;

		-moz-transform-origin: 50% 0%;		 

  }

  

  40%{

  		-webkit-transform: rotateZ(-10deg);

	  	-moz-transform: rotateZ(-10deg);

		-webkit-transform-origin: 50% 0%;

		-moz-transform-origin: 50% 0%;			 

  }  

  

  to {

	  -webkit-transform: rotateZ(0deg);

	  -moz-transform: rotateZ(0deg);

		-webkit-transform-origin: 50% 0%;

		-moz-transform-origin: 50% 0%;	  

  }

}



@-webkit-keyframes bounce2 {

  from { opacity:1;}

  

  to {

    top: 420px;

	opacity:0.3;

    -webkit-transform: rotateZ(360deg) rotateY(360deg);

	-moz-transform: rotateZ(360deg) rotateY(360deg);

  }

}



@-moz-keyframes bounce2 {

  from { opacity:1;}

  

  to {

    top: 420px;

	opacity:0.3;

    -webkit-transform: rotateZ(360deg) rotateY(360deg);

	-moz-transform: rotateZ(360deg) rotateY(360deg);

  }

}