@charset "utf-8";

/* CSS Document */



body {
	margin-top:0px;
	margin-left:0px;
	/*margin:0 auto;*/
	background-color:#000;
}



#enchant-stage {
	#background-color:#CCCCCC;
	width:320px;
	height:430px;
	left:50%;
	margin-left:-160px;
	/*top:50%;
	margin-top:-207.5px;*/
}



#debug{
	position:absolute;
	top:0px;
	left:70%;
	background-color:#CCCCFF;
	display:none;
}


.runtext{
	background-image:url('../assets/runningtxt.png');
	background-repeat:repeat;
	/*background-position:0px 0px;*/
	
	-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%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8cee0), color-stop(44%,#e3edf7), color-stop(100%,#e8eaed)); /* Chrome,Safari4+ */	

	
	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-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.06, rgb(230,230,230)),
		color-stop(0.53, rgb(173,173,173)),
		color-stop(0.77, rgb(122,122,122))
	);	
	background-image: -moz-linear-gradient(bottom, rgb(230,230,230) 6%, rgb(173,173,173) 53%, rgb(122,122,122) 77%);	*/
	background: -moz-linear-gradient(top, #a8cee0 0%, #e3edf7 44%, #e8eaed 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8cee0), color-stop(44%,#e3edf7), color-stop(100%,#e8eaed)); /* Chrome,Safari4+ */	

	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);

  }

}
