/* CSS Document */

.PageMover .TabBox {
   margin: 10px;	
}

.background{
	position: absolute;
	top: 0px;
	left: 0px;
   height: 405px;
   width: auto;	
}

.PageMover, footer{
   width: 648px;	
}

.DragBox{
   left: 20px;
   top: 20px;
   position: absolute;	
}

.DragBox .WrapBox {
   padding: 10px;
    background-color: #DEA1DC !important;
}

.drag-button{
    display: block;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;	
	cursor: pointer;
}
.Locked .drag-button{
    cursor: default;	
}

#ChookLeft{
	position: absolute;
	top: 130px;
	left: 230px;
   width: 204.8px;
   height: 170px;
   
   background-image:url(../assets/images/chooks-left.png);
   
   background-size: 703%;
   animation: chookleft 0.8s steps(6) infinite; 	
}

#ChookLeft.Stopped{
    animation: none;	
}

.MessageBox{
	border: 3px solid #791379;
	background-color: white;
	color: #444444;
	position: absolute;
	top: 20px;
	left: 180px;
	padding: 20px;
	text-align: center;
}

.NumberBox{
   border: 3px solid #791379;
	background-color: white;
	color: #444444;
	padding: 5px;
	padding-left: 20px;
	padding-right: 20px;
	z-index: 100000;	
}

.ui-droppable{
    z-index: 1;	
}

.NumberBox input{
   width: 60px;
   text-align: center;
   background-color: transparent;
   outline: none;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-appearance: none;
   border-radius: 0;
   color: #444444;
   font-size: 22px;
   border: none;
   border-bottom: 1px solid #444444;
   	
}

@keyframes chookleft{
    100%{
	    background-position-x: 101%;	
	}
}


#ChookRight{
	position: absolute;
	top: 80px;
	left: 420px;
   width: 220px;
   height: 220px;
   
   background-image:url(../assets/images/chooks-right.png);
   
   background-size: 1030%;
   animation: chookright 0.8s steps(9) infinite; 	
}

#ChookRight.Stopped{
	animation: none;
}

@keyframes chookright{
    100%{
	    background-position-x: 97.5%;	
	}
}

.Bee{
	position: absolute;
    width: 50px;
	height: 40px;
	background-size: 200%;
	animation: bee 0.2s steps(2) infinite;
	background-image: url(../assets/images/bee-fly.png); 	
}

.Bee.stopped {
    animation: none;	
}

@keyframes bee{
   100%{ background-position-x: 200%; }	
}

.Bee2{
	position: absolute;
    width: 50px;
	height: 40px;
	background-size: 200%;
	animation: bee2 0.2s steps(2) infinite;
	background-image: url(../assets/images/bee2-fly.png); 	
}

.Bee2.stopped {
   animation: none;	
}

@keyframes bee2{
   100%{ background-position-x: 200%; }	
}

.Frog{
   position: absolute;
   z-index: 1;	
}

.frog.drag-button{
	z-index: 1000;
}

.bee.drag-button{
	z-index: 1000;
}

.chook.drag-button{
	z-index: 1000;
}

.rabbit.drag-button{
	z-index: 1000;
}

.Frog-frame{
  position: absolute;
  top: 0px;
  left: 0px;
  display: none;	
}

.Rabbit{
   position: absolute;
   top: 240px;
   left: 300px;	
}

.Rabbit-frame{
  position: absolute;
  top: 0px;
  left: 0px;
  display: none;	
}

@media print{
    
	
  html{
	   display: table;	
	   width: 580px;
	   height: 970px;
	   position: absolute;
	   top: 0px;
	   left: 0px;
	}
	
    body{  
	text-align: left;
	vertical-align: middle;
	display: table-cell;
	height: 970px;
	width: 580px;
	max-width: 580px;  
	max-height: 100%;    
   }
   
   body.IsAndroid{
	   padding-left: 240px;   
   }
    
   #wrapper{
	   transform: rotate(90deg);
	   display: inline-block;
	   margin-left: -200px;
	      
   }
   
   body.IsAndroid #wrapper{
	   transform:  rotate(90deg) scale(0.8);   
   }
   
  
}