@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;*/
	
}

#texthelp{
	position:absolute;
	left:50px;
	top:90px;

	font-size:14px;
	font-weight:normal;
	font-family:"Courier New", Courier, monospace;
	color:#906;
	/*display:none;*/
}

.helpbox{
	position:absolute;
	text-align:left;

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	
	/*position:absolute;
	left:50px;
	top:90px;*/
	padding-top:20px;
	padding-left:10px;
	font-size:22px;/*12*/
	font-weight:bold;
	font-family:"Courier New", Courier, monospace;
	color:#609;

	/*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)); */	
	
	background: -moz-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0.6) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.9)), color-stop(50%,rgba(255,255,255,0.75)), color-stop(100%,rgba(255,255,255,0.6))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.75) 50%,rgba(255,255,255,0.6) 100%); /* Chrome10+,Safari5.1+ */

	/*display:block;
	width:200px;
	height:50px;*/

	/*opacity:1;*/

	-webkit-animation-name: alphahelp;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: none;
	-webkit-animation-direction: normal;
	-webkit-animation-duration: 0.5s;
	
	-moz-animation-name: alphahelp;
	-moz-animation-timing-function: ease-in;
	-moz-animation-iteration-count: none;
	-moz-animation-direction: normal;
	-moz-animation-duration: 0.5s;
}

.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.6;

}

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

.headtxt{
	font-size:16px;
	font-weight:bold;
	font-family:"Courier New", Courier, monospace;
	text-align:left;
	color:#000;
	cursor:default;
	border:medium;
}

.headtxtbonus{
	font-size:16px;
	font-weight:bold;
	font-family:"Courier New", Courier, monospace;
	text-align:left;
	color:#f00;
	cursor:default;
	border:medium;
}

.txtloading{

	margin-top:10px;
	font-size:18px;
	font-weight:bold;
	font-family:"Courier New", Courier, monospace;
	text-align:center;
	color:#000;
	cursor:default;
	border:medium;
	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;	
	
	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+ */	
	
	opacity:1;
	
}

.txtlevel{
	margin-top:3px;
	margin-left:120px;
	font-size:45px;
	font-weight:bold;
	font-family:"Courier New", Courier, monospace;
	text-align:center;
	color:#000;
	cursor:default;
	border:medium;
}

.txtbutton{

	margin-top:10px;
	font-size:45px;
	font-weight:bold;
	font-family:"Courier New", Courier, monospace;
	text-align:center;
	color:#000;
	cursor:default;
	border:medium;
	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;	
	
	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+ */	
	
	opacity:0.8;
	
	-webkit-animation-name: alpha;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: none;
	-webkit-animation-direction: normal;
	-webkit-animation-duration: 0.5s;
	
	-moz-animation-name: alpha;
	-moz-animation-timing-function: ease-in;
	-moz-animation-iteration-count: none;
	-moz-animation-direction: normal;
	-moz-animation-duration: 0.5s;	
	
}

.fadein{
	
	-webkit-animation-name: alpha;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: none;
	-webkit-animation-direction: normal;
	-webkit-animation-duration: 0.5s;
	
	-moz-animation-name: alpha;
	-moz-animation-timing-function: ease-in;
	-moz-animation-iteration-count: none;
	-moz-animation-direction: normal;
	-moz-animation-duration: 0.5s;	
	
}

.fadeout{
	
	-webkit-animation-name: alphaout;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: none;
	-webkit-animation-direction: normal;
	-webkit-animation-duration: 0.5s;
	
	-moz-animation-name: alphaout;
	-moz-animation-timing-function: ease-in;
	-moz-animation-iteration-count: none;
	-moz-animation-direction: normal;
	-moz-animation-duration: 0.5s;	
	
}

.moveup{
	
	-webkit-animation-name: move_up;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: none;
	-webkit-animation-direction: normal;
	-webkit-animation-duration: 0.5s;
	
	-moz-animation-name: move_up;
	-moz-animation-timing-function: ease-in;
	-moz-animation-iteration-count: none;
	-moz-animation-direction: normal;
	-moz-animation-duration: 0.5s;	
	
}

.moveup2{
	
	-webkit-animation-name: move_up2;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: none;
	-webkit-animation-direction: normal;
	-webkit-animation-duration: 1s;
	
	-moz-animation-name: move_up2;
	-moz-animation-timing-function: ease-in;
	-moz-animation-iteration-count: none;
	-moz-animation-direction: normal;
	-moz-animation-duration: 1s;	
	
}

/*
#bgconfirm{
	position:absolute;
	width:320px;
	height:430px;	
}

#confirmbox{
	position:absolute;
	text-align:center;
	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	
	
	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%);	
	

	display:block;
	width:200px;
	height:150px;
	
	opacity:0.9;
	
	
  -webkit-animation-name: dialog;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: none;
  -webkit-animation-direction: alternate;
  -webkit-animation-duration: 0.5s;

  -moz-animation-name: dialog;
  -moz-animation-timing-function: ease-in;
  -moz-animation-iteration-count: none;
  -moz-animation-direction: alternate;
  -moz-animation-duration: 0.5s;	
}

.dialog_button{
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	
	text-align:center;
		
	font-size:14px;
	font-weight:bold;
	font-family:"Courier New", Courier, monospace;
	color:#fff;	
}

#dialog_txt{
	margin-top:20px;

	font-size:14px;
	font-weight:bold;
	font-family:"Courier New", Courier, monospace;
	color:#000;
	display:none;
}*/

#debugg{
	position:absolute;
	top:0px;
	left:65%;
	background-color:#CCCCFF;
	display:none;
}
/* moz animate */

@-moz-keyframes dialog {
  from { opacity:0; width:0px; height:0px; left:160px; top:207.5px;}
  to   { 
  opacity:0.9; 
  width:210px;
  height:150px;
  left:55px;
  top:132.5px;
  -webkit-animation-timing-function: ease-in;
  -moz-animation-timing-function: ease-in;
  }
}

@-moz-keyframes move_up {
  from { top:107.5px;  }
  to   { 
	  top:45px; 
	  -webkit-animation-timing-function: ease-in;
	  -moz-animation-timing-function: ease-in;
  }
}

@-moz-keyframes move_up2 {
  from { top:190px;  }
  to   { 
	  top:170px; 
	  -webkit-animation-timing-function: ease-in;
	  -moz-animation-timing-function: ease-in;
  }
}

@-moz-keyframes alphahelp {
  from { opacity:0; }
  to   { 
  opacity:1; 
  -webkit-animation-timing-function: ease-in;
  -moz-animation-timing-function: ease-in;
  }
}

@-moz-keyframes alpha {
  from { opacity:0; }
  to   { 
  opacity:1; 
  -webkit-animation-timing-function: ease-in;
  -moz-animation-timing-function: ease-in;
  }
}

@-moz-keyframes alphaout {
  from { opacity:1; }
  to   { 
  opacity:0; 
  -webkit-animation-timing-function: ease-in;
  -moz-animation-timing-function: ease-in;
  }
}

@-moz-keyframes travel2 {
  from { }
  30% {
    left: 150px;
    -webkit-animation-timing-function: ease-in;
	-moz-animation-timing-function: ease-in;
  }
  60% {
    left: -150px;
    -webkit-animation-timing-function: ease-out;
	-moz-animation-timing-function: ease-out;
  } 
  100% {
    left: 0px;
    -webkit-animation-timing-function: ease-in;
	-moz-animation-timing-function: ease-in;
  } 
}

@-moz-keyframes bounce2 {
  from { opacity:1;}
  
  to {
    top: 420px;
	opacity:0.3;
   /* margin-bottom: 300px;*/
    -webkit-transform: rotateZ(360deg) rotateY(360deg);
	-moz-transform: rotateZ(360deg) rotateY(360deg);
  }
}

/* moz animate */

@-webkit-keyframes dialog {
  from { opacity:0; width:0px; height:0px; left:160px; top:207.5px;}
  to   { 
  opacity:0.9; 
  width:210px;
  height:150px;
  left:55px;
  top:132.5px;
  -webkit-animation-timing-function: ease-in;
  -moz-animation-timing-function: ease-in;
  }
}

@-webkit-keyframes move_up {
  from { top:107.5px;  }
  to   { 
	  top:45px; 
	  -webkit-animation-timing-function: ease-in;
	  -moz-animation-timing-function: ease-in;
  }
}

@-webkit-keyframes move_up2 {
  from { top:190px;  }
  to   { 
	  top:170px; 
	  -webkit-animation-timing-function: ease-in;
	  -moz-animation-timing-function: ease-in;
  }
}

@-webkit-keyframes alphahelp {
  from { opacity:0; }
  to   { 
  opacity:1; 
  -webkit-animation-timing-function: ease-in;
  -moz-animation-timing-function: ease-in;
  }
}

@-webkit-keyframes alpha {
  from { opacity:0; }
  to   { 
  opacity:1; 
  -webkit-animation-timing-function: ease-in;
  -moz-animation-timing-function: ease-in;
  }
}

@-webkit-keyframes alphaout {
  from { opacity:1; }
  to   { 
  opacity:0; 
  -webkit-animation-timing-function: ease-in;
  -moz-animation-timing-function: ease-in;
  }
}

@-webkit-keyframes travel2 {
  from { }
  30% {
    left: 150px;
    -webkit-animation-timing-function: ease-in;
	-moz-animation-timing-function: ease-in;
  }
  60% {
    left: -150px;
    -webkit-animation-timing-function: ease-out;
	-moz-animation-timing-function: ease-out;
  } 
  100% {
    left: 0px;
    -webkit-animation-timing-function: ease-in;
	-moz-animation-timing-function: ease-in;
  } 
}

@-webkit-keyframes bounce2 {
  from { opacity:1;}
  
  to {
    top: 420px;
	opacity:0.3;
   /* margin-bottom: 300px;*/
    -webkit-transform: rotateZ(360deg) rotateY(360deg);
	-moz-transform: rotateZ(360deg) rotateY(360deg);
  }
}


#txtscore {
	position: absolute;
	left:5px;
	top:390px;
	font-size:14px;
	font-weight:bold;
	font-family:"Courier New", Courier, monospace;
	color:#FFFFFF;
}

.wingame{
  position: absolute;
  top:0px;
  left:0px;
  width: 320px;
  height: 415px;
  
	-moz-animation-name : alpha;
	-moz-animation-duration : 3s;
	-moz-animation-iteration-count : 1;
	-moz-animation-direction : normal;
	-moz-animation-delay : 1.5s;
	
	-webkit-animation-name : alpha;
	-webkit-animation-duration : 3s;
	-webkit-animation-iteration-count : 1;
	-webkit-animation-direction : normal;	
	-webkit-animation-delay : 1.5s;
}

.img_lose{
	
	-webkit-animation-duration : 3s;
	-webkit-animation-name : alpha;
	-webkit-animation-iteration-count : 1;
	-webkit-animation-direction : normal;
	
	-moz-animation-duration : 3s;
	-moz-animation-name : alpha;
	-moz-animation-iteration-count : 1;
	-moz-animation-direction : normal;	
	
	/*img_lose._style["-webkit-animation-duration"] = '3s';
	img_lose._style["-moz-animation-duration"] = '3s';
	img_lose._style["-webkit-animation-name"] = 'alpha';
	img_lose._style["-webkit-animation-iteration-count"] = 1;
	img_lose._style["-webkit-animation-direction"] = 'normal';*/
}

.win {
  position: absolute;
  top:0px;
  left:0px;
  width: 320px;
  height: 390px;

  -webkit-animation-name: travel2;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-duration: 4.8s;

  -moz-animation-name: travel2;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;
  -moz-animation-duration: 4.8s;
}



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

  -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;
}

/*@media all and (min-width: 320px){
	#enchant-stage {
		-webkit-transform: rotate(0deg);
		margin-top:0px;
		margin-left:0px;
	}
}			
@media all and (min-width: 390px){
	#enchant-stage {
		-webkit-transform: rotate(270deg);
		margin-top:-100px;
		margin-left:0px;
	}
}*/