/* CSS Document */

.bg1 {
    background: url('../assets/images/bg.png');
    transform: translateZ(0);
    background-repeat: no-repeat;
}

.bg2 {
    background: url('../assets/images/bg2.png');
    transform: translateZ(0);
    background-repeat: no-repeat;
}

.PageMover .TabBox {
   margin: 10px;	
}

.PageMover {
	width: 650px;
}

#upperTray {
    background: url('../assets/images/uppertrayborder.png');
    width: 609px;
    height: 52px;
    position: absolute;
    z-index: 200;
    left: 25px;
    top: 102px;
    background-repeat: no-repeat;
}

#middleTray {
    background: url('../assets/images/middletrayborder.png');
    width: 29px;
    height: 87px;
    position: absolute;
    z-index: 200;
    right: 159px;
    top: 132px;
    background-repeat: no-repeat;
}

#lowerTray {
    background: url('../assets/images/bottomtrayborder.png');
    width: 641px;
    height: 27px;
    position: absolute;
    z-index: 200;
    top: 234px;
    background-repeat: no-repeat;
}

#labels {
    width: 650px;
    height: 300px;
    position: absolute;
    transform: translateZ(0);
    color: black;
    text-align: center;
    line-height: 30px;
    vertical-align: middle;
    font-size: 26px;
}

#cherryLabel {
    width: 110px;
    height: 30px;
    position: absolute;
    left: 77px;
    top: 25px;
}

#bananaLabel {
    width: 110px;
    height: 30px;
    position: absolute;
    left: 250px;
    top: 8px;
}

#peachLabel {
    width: 110px;
    height: 30px;
    position: absolute;
    right: 145px;
    top: -3px;
}

#orangeLabel {
    width: 110px;
    height: 30px;
    position: absolute;
    left: 20px;
    bottom: 10px;
}

#lemonLabel {
    width: 110px;
    height: 30px;
    position: absolute;
    bottom: 12px;
    left: 180px;
}

#tomatoLabel {
    width: 110px;
    height: 30px;
    position: absolute;
    bottom: 18px;
    right: 182px;
}

#pearLabel {
    width: 110px;
    height: 30px;
    position: absolute;
    right: 30px;
    bottom: 25px;
}

#fruitsContainer {
    width: 650px;
    height: 300px;
    z-index: 1000;
}


.cherry, .banana, .peach, .orange, .lemon, .tomato, .pear {
    cursor: pointer;
}

#cherryContainer {
    width: 150px;
    height: 70px;
    position: absolute;
    top: 70px;
    left: 90px;
}

.cherry {
    width: 30px;
    height: 30px;
    position: absolute;
    margin-left: 7px;
    margin-top: 13px;
    z-index: 300;
}

#cherryImg1, #cherryPick1 {
    left: 2px;
    top: 0px;
}

#cherryImg2, #cherryPick2 {
    left: 31px;
    top: 0px;
}

#cherryImg3, #cherryPick3 {
    left: 58px;
    top: 2px;
}

#cherryImg4, #cherryPick4 {
    left: 85px;
    top: 0px;
}

#cherryImg5, #cherryPick5 {
    top: 27px;
    left: -10px;
}

#cherryImg6, #cherryPick6 {
    top: 28px;
    left: 22px;
}

#cherryImg7, #cherryPick7 {
    left: 60px;
    top: 25px;
}

#bananaContainer {
    width: 150px;
    height: 80px;
    position: absolute;
    top: 50px;
    left: 250px;
}

.banana {
    position: absolute;
    z-index: 300;
}

#bananaImg1, #bananaPick1, #bananaPick1_2 {
    top: -5px;
    left: 2px;
    z-index: 14;
}

#bananaPick1 {
    z-index: 250;
    width: 40px;
    height: 26px;
    top: 26px;
}

#bananaPick1_2 {
    z-index: 250;
    width: 26px;
    height: 32px;
    left: 36px
}

#bananaImg2, #bananaPick2, #bananaPick2_2 {
    top: -2px;
    left: 44px;
    z-index: 20;
}

#bananaPick2 {
    z-index: 240;
    width: 55px;
    height: 26px;
    top: 26px;
}

#bananaPick2_2 {
    z-index: 250;
    width: 22px;
    height: 32px;
    left: 80px
}

#bananaImg3, #bananaPick3, #bananaPick3_2 {
    top: -13px;
    right: 15px;
    z-index: 14;
}

#bananaPick3 {
    z-index: 230;
    width: 58px;
    height: 26px;
    top: 18px;
}

#bananaPick3_2 {
    z-index: 250;
    width: 26px;
    height: 32px;
}

#bananaImg4, #bananaPick4, #bananaPick4_2 {
    top: 17px;
    left: 2px;
    z-index: 22;
}

#bananaPick4 {
    z-index: 245;
    width: 50px;
    height: 26px;
    top: 47px;
}

#bananaPick4_2 {
    z-index: 250;
    width: 26px;
    height: 26px;
    left: 36px;
    top: 23px;
}

#bananaImg5, #bananaPick5, #bananaPick5_2 {
    right: 9px;
    top: 10px;
    z-index: 18;
}

#bananaPick5 {
    z-index: 225;
    width: 40px;
    height: 23px;
    top: 38px;
    right: 16px;
}

#bananaPick5_2 {
    z-index: 250;
    width: 20px;
    height: 25px;
    top: 18px;
}

#bananaImg6, #bananaPick6, #bananaPick6_2 {
    left: 15px;
    top: 32px;
    z-index: 22;
}

#bananaPick6 {
    z-index: 242;
    width: 54px;
    height: 15px;
    top: 66px;
    right: 16px;
}

#bananaPick6_2 {
    z-index: 250;
    width: 20px;
    height: 30px;
    left: 50px;
    top: 36px;
}

#bananaImg7, #bananaPick7, #bananaPick7_2 {
    right: 30px;
    top: 25px;
    z-index: 22;
}

#bananaPick7 {
    z-index: 242;
    width: 50px;
    height: 18px;
    top: 58px;
    right: 36px;
}

#bananaPick7_2 {
    z-index: 250;
    width: 20px;
    height: 30px;
    top: 30px;
}

#bananaImg8, #bananaPick8, #bananaPick8_2 {
    right: -7px;
    top: 26px;
    z-index: 20;
}

#bananaPick8 {
    z-index: 220;
    width: 54px;
    height: 15px;
    top: 58px;
    right: 0px;
}

#bananaPick8_2 {
    z-index: 250;
    width: 20px;
    height: 25px;
    top: 33px;
}

.peach {
    z-index: 300;
    position: absolute;
    border-radius: 55px;
    width: 55px;
    height: 55px;
    box-sizing: border-box;
}

#peachContainer {
    width: 150px;
    height: 100px;
    position: absolute;
    top: 30px;
    right: 90px;
}

#peachImg1, #peachPick1 {
    left: 5px;
    top: 12px;
}

#peachPick1 {
    left: 8px;
}

#peachImg2, #peachPick2 {
    right: 26px;
    top: 9px;
}

#peachPick2 {
    right: 26px;
}

#peachImg3, #peachPick3 {
    left: 28px;
    top: 43px;
}

#peachPick3 {
    left: 31px;
}

#peachImg4, #peachPick4 {
    right: -8px;
    top: 38px;
}

#peachPick4 {
    right: -8px;
}

.orange {
    z-index: 300;
    position: absolute;
    border-radius: 55px;
    width: 55px;
    height: 55px;
    box-sizing: border-box;
}

#orangeContainer {
    width: 130px;
    height: 115px;
    position: absolute;
    top: 145px;
    left: 50px;
}

#orangeImg1, #orangePick1 {
    left: 0px;
    top: 10px;
}

#orangeImg2, #orangePick2 {
    right: 20px;
    top: 0px;
}

#orangePick2 {
    right: 27px;
    top: 5px;
}

#orangeImg3, #orangePick3 {
    left: 0px;
    top: 42px;
}

#orangePick3 {
    top: 47px;
}

#orangeImg4, #orangePick4 {
    right: 0px;
    top: 25px;
}

#orangePick4 {
    right: 5px;
    top: 30px;
}

#orangeImg5, #orangePick5 {
    left: 45px;
    top: 51px;
}

#orangePick5 {
    top: 53px;
}

.lemon {
    z-index: 300;
    position: absolute;
    border-radius: 55px;
    width: 55px;
    height: 55px;
    box-sizing: border-box;
}

#lemonContainer {
    width: 120px;
    height: 115px;
    position: absolute;
    top: 145px;
    left: 205px;
}

#lemonImg1, #lemonPick1 {
    top: 5px;
    left: 0px;
}

#lemonPick1 {
    top: 12px;
}

#lemonImg2, #lemonPick2 {
    top: -5px;
    right: 15px;
}

#lemonPick2 {
    top: 2px;
}

#lemonImg3, #lemonPick3 {
    top: 25px;
    right: -8px;
}

#lemonPick3 {
    top: 32px;
}

#lemonImg4, #lemonPick4 {
    top: 45px;
    left: -7px;
}

#lemonPick4 {
    top: 52px;
}

#lemonImg5, #lemonPick5 {
    top: 45px;
    right: 22px;
}

#lemonPick5 {
    top: 52px;
}

.tomato {
    z-index: 300;
    position: absolute;
    border-radius: 55px;
    width: 55px;
    height: 55px;
    box-sizing: border-box;
}

#tomatoContainer {
    width: 120px;
    height: 115px;
    position: absolute;
    top: 140px;
    right: 180px;
}

#tomatoImg1, #tomatoPick1 {
    top: 12px;
    left: 6px;
    z-index: 10;
}

#tomatoPick1 {
    z-index: 20;
}

#tomatoImg2, #tomatoPick2 {
    top: 0px;
    right: 15px;
    z-index: 8;
}

#tomatoPick2 {
    z-index: 220;
}

#tomatoImg3, #tomatoPick3 {
    top: 50px;
    left: 15px;
    z-index: 12;
}

#tomatoPick3 {
    z-index: 240;
}

#tomatoImg4, #tomatoPick4 {
    top: 42px;
    right: 0px;
    z-index: 210;
}

#tomatoPick4 {
    z-index: 260;
}

.pear {
    z-index: 300;
    position: absolute;
}

#pearContainer {
    width: 120px;
    height: 130px;
    position: absolute;
    top: 130px;
    right: 55px;
}

#pearImg1, #pearPick1, #pearPick1_2 {
    left: 0px;
    top: 0px;
}

#pearPick1 {
    border-radius: 37px;
    width: 37px;
    height: 37px;
    box-sizing: border-box;
    top: 22px;
}

#pearPick1_2 {
    width: 20px;
    height: 20px;
    left: 25px;
    top: 15px;
}

#pearImg2, #pearPick2, #pearPick2_2 {
    right: 10px;
    top: 2px;
}

#pearPick2 {
    border-radius: 37px;
    width: 37px;
    height: 37px;
    box-sizing: border-box;
    top: 25px;
    right: 22px;
}

#pearPick2_2 {
    width: 20px;
    height: 20px;
    right: 17px;
    top: 15px;
}

#pearImg3, #pearPick3, #pearPick3_2 {
    top: 25px;
    left: 22px;
}

#pearPick3 {
    border-radius: 37px;
    width: 37px;
    height: 37px;
    box-sizing: border-box;
    top: 47px;
    right: 22px;
}

#pearPick3_2 {
    width: 20px;
    height: 20px;
    left: 47px;
    top: 40px;
}

#pearImg4, #pearPick4, #pearPick4_2 {
    top: 30px;
    right: 0px;
}

#pearPick4 {
    border-radius: 37px;
    width: 37px;
    height: 37px;
    box-sizing: border-box;
    top: 53px;
    right: 12px;
}

#pearPick4_2 {
    width: 20px;
    height: 20px;
    right: 5px;
    top: 45px;
}

#pearImg5, #pearPick5, #pearPick5_2 {
    top: 55px;
    left: 30px;
}

#pearPick5 {
    border-radius: 37px;
    width: 37px;
    height: 37px;
    box-sizing: border-box;
    top: 77px;
    right: 22px;
}

#pearPick5_2 {
    width: 20px;
    height: 20px;
    left: 53px;
    top: 70px;
}

#cherryImg1, #cherryImg2, #cherryImg3, #cherryImg4, #cherryImg5, #cherryImg6, #cherryImg7 {
    background: url('../assets/images/cherry.png');
    width: 52px;
    height: 43px;
    background-repeat: no-repeat;
    position: absolute;
}

#cherryImg1.active, #cherryImg2.active, #cherryImg3.active, #cherryImg4.active, #cherryImg5.active, #cherryImg6.active, #cherryImg7.active {
    background: url('../assets/images/cherry2.png');
    width: 50px;
    height: 42px;
    background-repeat: no-repeat;
    position: absolute;
}

#bananaImg1, #bananaImg2, #bananaImg3, #bananaImg4, #bananaImg5, #bananaImg6, #bananaImg7, #bananaImg8 {
    background: url('../assets/images/banana.png');
    width: 58px;
    height: 57px;
    background-repeat: no-repeat;
    position: absolute;
}

#bananaImg1.active, #bananaImg2.active, #bananaImg3.active, #bananaImg4.active, #bananaImg5.active, #bananaImg6.active, #bananaImg7.active, #bananaImg8.active {
    background: url('../assets/images/banana2.png');
    width: 58px;
    height: 57px;
    background-repeat: no-repeat;
    position: absolute;
}

#orangeImg1, #orangeImg2, #orangeImg3, #orangeImg4, #orangeImg5 {
    background: url('../assets/images/orange.png');
    width: 62px;
    height: 68px;
    background-repeat: no-repeat;
    position: absolute;
}

#orangeImg1.active, #orangeImg2.active, #orangeImg3.active, #orangeImg4.active, #orangeImg5.active {
    background: url('../assets/images/orange2.png');
    width: 62px;
    height: 68px;
    background-repeat: no-repeat;
    position: absolute;
}

#peachImg1, #peachImg2, #peachImg3, #peachImg4 {
    background: url('../assets/images/peach.png');
    width: 58px;
    height: 52px;
    background-repeat: no-repeat;
    position: absolute;
}

#peachImg1.active, #peachImg2.active, #peachImg3.active, #peachImg4.active {
    background: url('../assets/images/peach2.png');
    width: 58px;
    height: 52px;
    background-repeat: no-repeat;
    position: absolute;
}

#lemonImg1, #lemonImg2, #lemonImg3, #lemonImg4, #lemonImg5 {
    background: url('../assets/images/lemon.png');
    width: 58px;
    height: 67px;
    background-repeat: no-repeat;
    position: absolute;
}

#lemonImg1.active, #lemonImg2.active, #lemonImg3.active, #lemonImg4.active, #lemonImg5.active {
    background: url('../assets/images/lemon2.png');
    width: 58px;
    height: 67px;
    background-repeat: no-repeat;
    position: absolute;
}

#tomatoImg1, #tomatoImg2, #tomatoImg3, #tomatoImg4 {
    background: url('../assets/images/tomato.png');
    width: 58px;
    height: 58px;
    background-repeat: no-repeat;
    position: absolute;
}

#tomatoImg1.active, #tomatoImg2.active, #tomatoImg3.active, #tomatoImg4.active {
    background: url('../assets/images/tomato2.png');
    width: 58px;
    height: 58px;
    background-repeat: no-repeat;
    position: absolute;
}

#pearImg1, #pearImg2, #pearImg3, #pearImg4, #pearImg5 {
    background: url('../assets/images/pear.png');
    width: 50px;
    height: 60px;
    background-repeat: no-repeat;
    position: absolute;
}

#pearImg1.active, #pearImg2.active, #pearImg3.active, #pearImg4.active, #pearImg5.active {
    background: url('../assets/images/pear2.png');
    width: 50px;
    height: 60px;
    background-repeat: no-repeat;
    position: absolute;
}

footer {
    width: 650px;
    margin: auto;
}

.sparkle.animate {
    width: 46px;
    height: 55px;
    position: absolute;
    background: url('../assets/images/sparklesprite.png');
    -webkit-animation: sparkle 0.9s steps(15) infinite;
    -moz-animation: sparkle 0.9s steps(15) infinite;
    animation: sparkle 0.9s steps(15) infinite;
}

.bananaAll > .sparkle {
    position: absolute;
    left: 20px;
}

@-webkit-keyframes sparkle {
    100% { background-position: -690px; }
}

@-moz-keyframes sparkle {
    100% { background-position: -690px; }
}

@keyframes sparkle {
    100% { background-position: -690px; }
}

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