/* Template - CSS */
/* The State of Queensland (Department of Education and Training */

*:not(input):not(area):not(map){
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	cursor: default;
	
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	
}

*::selection 
{
    background-color:transparent;
} 
*::-moz-selection
{
    background-color:transparent;
}

#PageMover area, #PageMover map{
  cursor: pointer !important;	
   -ms-user-select: auto;
    user-select: auto;
	display: block;
}



html {

}

body {
  background-color: #FFFFFF;
}

img[usemap], map area{
    outline: none;
}

footer small{
   text-align: center;
   font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;	
}

footer {
    text-align: center;	
}

.clear{
   clear: both;	
}

.floatleft{
   float: left;	
}



.canvas-holder{
   margin: 0px auto;
   text-align: left;	
}



#PageMover{
	width: 743px;
	height: 540px;
	background-image: url(../assets/images/bg.png);
	position: relative;
	margin: 0px auto;
	z-index: 2;
	overflow: hidden;
	text-align: left;
}

#PageArea{
	position: absolute;
   width: 690px;
   left: 30px;
   top: 120px;	
}

.PageOne{
  margin-top: 40px;	
}


#Maths{
     position: absolute;
	 top: 9px;
	 left: 30px;	
}

#Common{
	 position: absolute;
	 top: 9px;
	 right: 30px;
}

#Instructions{
   position: absolute;
   top: 50px;
   left: 30px;
   width: 635px;
   text-align: left;	
   background-color: #FFCCFF;
   border: 4px solid #CC99CC;
   padding-left: 15px;
   padding-right: 15px;
   border-radius: 20px;
}

#Maths, #Common, #Instructions{
	color: #996699;
	font-size: 16px;
	font-weight: bold;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#PageMover .command-buttons{
	position: absolute;
	top: 487px;
	left: 340px;
	width: 500px;
	height: 70px;
}



.button{
	border: 4px solid #CE9ECE;
	background-color: #996699;
	color: white;
	border-radius: 10px;
	display: block;
	padding: 5px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 22px;
	width: 60px;
	text-align: center;
	margin-right: 5px;
	font-weight: bold;
	cursor: pointer;
	float: left;
}

body.DeskTop .button:hover{
	background-color: #CE9ECE;
	
}

.arrow{
  border: 4px solid #CE9ECE;
  background-color: #996699;
  line-height: 22px;
  padding: 5px;
  width: 40px;
  height: 22px;
  background-repeat: no-repeat;
  background-image: url(../assets/images/nextbutton.png);
  background-size: 15px auto; 
  background-position: center center;
  border-radius: 10px;
  display: block;
  float: left;
  cursor: pointer;
  	
}



body.DeskTop .arrow div:hover, body.TouchDevice .arrow div{
   display: inline-block;
   opacity: 1;
  
}

.floor{
	position: relative;
margin-top: -500px;
top: -70px;
   width: 730px;
   z-index: 1;
   display: inline;	
}

#MainContent{
   text-align: center;
   width: 743px;
	height: 540px;
	position: relative;
	margin: 0px auto;	
}

.arrow div{
   font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
    font-weight: bold;
	display: inline-block;
	opacity: 1;
	color: white;
	cursor: pointer;
}

body.DeskTop .arrow:hover{
	background-image: url(../assets/images/nextbutton-selected.png);
	background-color: #CE9ECE;
}

.arrow.previous{
  margin-right: 5px;
  transform: scaleX(-1);	
}

.arrow.previous div{
	transform: scaleX(-1);
}

#PopupBox{
	text-align:left;
	position: absolute;
	width: 300px;
	left: 50%;
	top: 50%;
	margin-left: -150px;
	margin-top: -90px;
	z-index: 1000;	
	 border: 4px solid #CE9ECE;
  background-color: #FFCCFF;
	padding: 10px;
	color: #996699;
	border-radius: 20px;
	box-shadow: 5px 5px 10px #000000;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
}

#PopupBox.small-popup{
	width: 260px;
	min-height: 60px;
	left: 70%;
	top: 200px;
	margin-left: -130px;
	margin-top: -50px;
}

#PopupBox .close-button{
	margin-top: 8px;
	float:right;
    width:16px;
	height: 16px;
	text-align: center;
	 border: 2px solid #CE9ECE;
  background-color: #996699;
	border-radius: 5px;
	line-height: 16px;
	color: white;
	cursor: pointer;
	padding: 0px 2px 3px 2px;	
}

#PopupBox, #PopupBox *{
	cursor: pointer;
}

body.DeskTop #PopupBox .close-button:hover{
    background-color: #CE9ECE;
}

#PopupBox strong{
   color: black;	
}

#SpeachBox{
   	width: 165px;
	height: 92px;
	background-image: url(../assets/images/speach.png);
	color: #770000;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	top: 150px;
	left: 150px;
	position: absolute;
	padding-left: 25px;
	padding-right: 20px;
	font-weight: bold;
	text-align: left;
}

#SpeachBox p{
   margin-top: 15px;	
}

#SpeachBox .message{
   padding-top: 10px;	
}

#copyright{
   left: 30px;
   top: 495px;
   color: black;
   width: 265px;
   position: absolute;	
   font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 13px;
}



.help{
	border: 4px solid #FFFFFF;
	background-color: #770000;
	color: white;
	border-radius: 15px;
	display: block;
	padding: 5px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 22px;
	width: 30px;
	text-align: center;
	margin-right: 5px;
	font-weight: bold;
	cursor: pointer;
	float: left;
}

body.DeskTop .help:hover{
	color: #770000;
	background-color: white;
}

.detective{
   top: 90px;
   left: 50px;
   position: absolute;
   display: block;	
}

.detectiveshaddow{
   top: 220px;
   left: 120px;
   position: absolute;
   display: block;	
}

.Boy1{
    background-image: url(../assets/images/kid1.png);
	background-size: 797px 110px;
	background-position: 0px 0px;
	height: 110px;
	width: 113.85px;	
}

.Boy1.animate{
    animation: boy1 0.5s steps(6);  	
}

.Boy1.down{
	background-position: 99.40% 0px;
}

/* 98.3% = 100 */
@keyframes boy1 {
	
	100% { background-position: 99.40% 0px; }
}

.Boy2{
    background-image: url(../assets/images/kid2.png);
	background-size: 714px 115px;
	background-position: 0px 0px;
	height: 115px;
	width: 102px;	
}

.Boy2.animate{
    animation: boy1 0.5s steps(6);  	
}

.Boy2.down{
	background-position: 99.40% 0px;
}

/* 98.3% = 100 */
@keyframes boy2 {
	
	100% { background-position: 99.40% 0px; }
}


.Boy3{
    background-image: url(../assets/images/kid3.png);
	background-size: 694px 117px;
	background-position: 0px 0px;
	height: 117px;
	width: 99px;	
}

.Boy3.animate{
    animation: boy3 0.5s steps(7);  	
}

.Boy3.down{
	background-position: 99.40% 0px;
}

/* 98.3% = 100 */
@keyframes boy3 {
	
	100% { background-position: 116% 0px; }
}

.Boy4{
    background-image: url(../assets/images/kid4.png);
	background-size: 714px 117px;
	background-position: 0px 0px;
	height: 117px;
	width: 102px;	
}

.Boy4.animate{
    animation: boy4 0.5s steps(6);  	
}

.Boy4.down{
	background-position: 99.40% 0px;
}

/* 98.3% = 100 */
@keyframes boy4 {
	
	100% { background-position: 99.40% 0px; }
}


.Boy5{
    background-image: url(../assets/images/kid5.png);
	background-size: 868px 117px;
	background-position: 0px 0px;
	height: 117px;
	width: 124px;	
}

.Boy5.animate{
    animation: boy5 0.5s steps(6);  	
}

.Boy5.down{
	background-position: 99.40% 0px;
}

/* 98.3% = 100 */
@keyframes boy5 {
	
	100% { background-position: 99.40% 0px; }
}


.Cat1{
    background-image: url(../assets/images/cat1.png);
	background-size: 728px 114px;
	background-position: 0px 0px;
	height: 114px;
	width: 104px;	
}

.Cat1.animate{
    animation: cat1 0.5s steps(6);  	
}

.Cat1.down{
	background-position: 100% 0px;
}

/* 98.3% = 100 */
@keyframes cat1 {
	
	100% { background-position: 100% 0px; }
}

.Cat2{
    background-image: url(../assets/images/cat2.png);
	background-size: 652px 114px;
	background-position: 0px 0px;
	height: 114px;
	width: 94px;	
}

.Cat2.animate{
    animation: cat2 0.5s steps(6);  	
}

.Cat2.down{
	background-position: 100% 0px;
}

/* 98.3% = 100 */
@keyframes cat2 {
	
	100% { background-position: 100% 0px; }
}

.Cat3{
    background-image: url(../assets/images/cat3.png);
	background-size: 686px 117px;
	background-position: 0px 0px;
	height: 117px;
	width: 98px;	
}

.Cat3.animate{
    animation: cat3 0.5s steps(6);  	
}

.Cat3.down{
	background-position: 100% 0px;
}

/* 98.3% = 100 */
@keyframes cat3 {
	
	100% { background-position: 100% 0px; }
}

.Cat4{
    background-image: url(../assets/images/cat4.png);
	background-size: 730px 117px;
	background-position: 0px 0px;
	height: 117px;
	width: 105px;	
}

.Cat4.animate{
    animation: cat4 0.5s steps(6);  	
}

.Cat4.down{
	background-position: 99.5% 0px;
}

/* 98.3% = 100 */
@keyframes cat4 {
	
	100% { background-position: 99.5% 0px; }
}

.TabOnRail{
   cursor: pointer;	
}

.TabOnRail.down{
   cursor: default;	
}

#KidsTrack{
	position: absolute;
   top: 260px;
   display: block;	
   left: 160px;
}

#CatTrack{
	position: absolute;
   top: 270px;
   display: block;	
   left: 160px;
}

#html2canvas{
   display: none;	
}


@media print{
   #TabPane .tabs{
	   display: none;   
   }
   
   #MainContent{
	  display: none;
   }
   
   #html2canvas{
   transform: rotate(90deg);
   display: block;
   }
    body{  
  margin-top: 2cm;
  margin-left: 1cm;
  margin-right: 1cm; 
	     
   }
   
   body.Android {
	  margin-top: 5cm;  
	  margin-left: 4cm; 
   }
   
   #PageMover{
	  
	      
   }
   
   #PageMover .command-buttons{
	   display: none;   
   }
   
   #copyright {
	   display: none;   
   }
}