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

body {
    background: white;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
    -webkit-touch-action: manipulation;
    -moz-touch-action: manipulation;
    touch-action: manipulation;
}

body::after {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
    content: url(../assets/images/bay_hover.png) url(../assets/images/bees.png) url(../assets/images/birds.png) url(../assets/images/dongato_hover.png) url(../assets/images/fish.png) url(../assets/images/frog_hover.png) url(../assets/images/intro.png) url(../assets/images/loopdeloop_hover.png) url(../assets/images/meadow_hover.png) url(../assets/images/meadowbg.png) url(../assets/images/play_mini1.png) url(../assets/images/play_mini2.png) url(../assets/images/play1.png) url(../assets/images/play2.png) url(../assets/images/rats.png) url(../assets/images/stop_mini1.png) url(../assets/images/stop_mini2.png) url(../assets/images/stop1.png) url(../assets/images/stop2.png) url(../assets/images/turtles.png) url(../assets/images/title.png) url(../assets/images/willabee_hover.png);
}

main {
	/*IE*/
	display:block;
    width: 760px;
    height: 500px;
    margin: 0 auto;
    background: #003366;
    position: relative;
}

#header {
    width: 760px;
    height: 53px;
    position: absolute;
    background-color: #003366;
    z-index: 150;
}

#body {
    width: 760px;
    height: 400px;
    position: absolute;
    top: 52px;
    z-index: 100;
}

#imageTitle {
    background: url('../assets/images/title.png');
    z-index: 100;
    width: 380px;
    height: 53px;
}

#intro {
    position: absolute; 
    display: block; 
    width: 760px; 
    height: 400px;
    background: url('../assets/images/intro.png');
}

#loadText {
    display: none;
    position: absolute;
    z-index: 1000;
    top: 200px;
    left: 330px;
    width: 100px;
    height: 25px;
    font-size: 18px;
    text-align: center;
    line-height: 25px;
    vertical-align: middle;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px #000000, 0 0 5px #000000;
}

/* Videos and backgrounds */
#video1 {
    position: absolute;
    left: 45px;
    display: none;
    z-index: 100;
    width: 670px;
    height: 400px;
}

#video3 {
    top: 104px;
    position: absolute;
    left: 217px;
    display: none;
    z-index: 100;
    width: 326px;
    height: 195px;
}

#videoBG, #videoPlayerBG {
    position: absolute;
    left: 45px;
    width: 670px;
    height: 400px;
    display: none;
}

#videoPlayerBG {
    z-index: 85;
}

/* Main menu buttons */
#frogBut {
    width: 105px;
    height: 97px;
    top: 234px;
    left: 402px;
}

#frogBut:hover {
    width: 105px;
    height: 97px;
    background: url('../assets/images/frog_hover.png') no-repeat center;
    top: 234px;
    left: 402px;
}

#frogBut.hover {
    width: 105px;
    height: 97px;
    background: url('../assets/images/frog_hover.png') no-repeat center;
    top: 234px;
    left: 402px;
}

#frogBut.hover:hover {
    width: 105px;
    height: 97px;
    background: url('../assets/images/frog_hover.png') no-repeat center;
    top: 234px;
    left: 402px;
}

#dongatoBut {
    width: 115px;
    height: 97px;
    left: 361px;
    top: 116px;
}

#dongatoBut:hover {
    width: 115px;
    height: 97px;
    background: url('../assets/images/dongato_hover.png') no-repeat center;
    left: 361px;
    top: 116px;
}

#loopBut {
    width: 104px;
    height: 89px;
    left: 493px;
    top: 143px;
}

#loopBut:hover {
    width: 104px;
    height: 89px;
    left: 493px;
    top: 143px;
    background: url('../assets/images/loopdeloop_hover.png') no-repeat center;
}

#bayBut {
    width: 110px;
    height: 90px;
    left: 459px;
    top: 56px;
}

#bayBut:hover {
    width: 110px;
    height: 90px;
    left: 459px;
    top: 56px;
    background: url('../assets/images/bay_hover.png') no-repeat center;
}

#meadowBut {
    width: 102px;
    height: 113px;
    left: 604px;
    top: 120px;
}

#meadowBut:hover {
    width: 102px;
    height: 113px;
    left: 604px;
    top: 120px;
    background: url('../assets/images/meadow_hover.png') no-repeat center;
}

#willabeeBut {
    width: 112px;
    height: 113px;
    left: 543px;
    top: 248px;
}

#willabeeBut:hover {
    width: 112px;
    height: 113px;
    left: 543px;
    top: 248px;
    background: url('../assets/images/willabee_hover.png') no-repeat center;
}

.buttonMenu {
    position: absolute;
    cursor: pointer;
}

#bodyDrop {
    position: absolute;
    z-index: 120;
    width: 760px;
    height: 400px;
    display: none;
}

/* Footer content */
#footer {
    width: 760px;
    height: 47px;
    position: absolute;
    top: 452px;
    background-color: #003366;
    z-index: 50;
}

footer {
	font-family: Arial, Helvetica, sans-serif;
    margin: 0 auto;
    width: 760px;
    text-align: center;
}

/* Page controls */
.button {
    position: absolute;
    width: 120px;
    height: 30px;
    border-radius: 0.5em;
    background: white;
    color: #003366;
    cursor: pointer;
    text-align: center;
    line-height: 30px;
    vertical-align: middle;
    font-weight: bold;
}

.button.hover {
    position: absolute;
    width: 120px;
    height: 30px;
    border-radius: 0.5em;
    background: white;
    color: #003366;
    cursor: pointer;
    text-align: center;
    line-height: 30px;
    vertical-align: middle;
    font-weight: bold;
}

.button.hover:hover {
    position: absolute;
    width: 120px;
    height: 30px;
    border-radius: 0.5em;
    background: #85BBF1;
    color: #003366;
    cursor: pointer;
    text-align: center;
    line-height: 30px;
    vertical-align: middle;
    font-weight: bold;
}

#backBut {
    left: 10px;
    top: 8px;
}

#checkBut {
    left: 140px;
    top: 8px;
}

#printBut {
    right: 140px;
    top: 8px;
}

#nextBut {
    right: 10px;
    top: 8px;
}

.disabled {
    pointer-events: none;
}

#checkBut.disabled {
    pointer-events: none;
    background: #98ACC1;
    color: #3E648B;
}

/* Droppables */
#dropContainer {
    position: absolute;
    top: 22px;
    left: 550px;
}

#droppables {
    left: 75px;
    position: absolute;
}

#drop2 {
    top: 75px;
}

#drop3 {
    top: 150px;
}

#drop4 {
    top: 225px;
}

#drop5 {
    top: 300px;
}

.drop {
    width: 80px;
    height: 60px;
    background: black;
    position: absolute;
    z-index: 150;
}

#dropLabels {
    position: absolute;
    left: 20px;
}

#label1 {
    top: 5px;
}

#label2 {
    top: 78px;
}

#label3 {
    top: 154px;
}

#label4 {
    top: 230px;
}

#label5 {
    top: 304px;
}

.label {
    background: white;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    text-align: center;
    vertical-align: middle;
    line-height: 50px;
    font-size: 20px;
    position: absolute;
}

/* Draggables */
#dragContainer {
    position: absolute;
    left: 80px;
    top: 22px;
}

#drag1 {
    top: 0px;
    left: 0px;
}

#drag2 {
    top: 75px;
    left: 0px;
}

#drag3 {
    top: 150px;
    left: 0px;
}

#drag4 {
    top: 225px;
    left: 0px;
}

#drag5 {
    top: 300px;
    left: 0px;
}

.handle {
    position: absolute;
    cursor: pointer;
    width: 80px;
    height: 60px;
    z-index: 1;
}

.birds {
    background: url('../assets/images/birds.png') no-repeat center;
}

.rats {
    background: url('../assets/images/rats.png') no-repeat center;
}

.turtles {
    background: url('../assets/images/turtles.png') no-repeat center;
}

.bees {
    background: url('../assets/images/bees.png') no-repeat center;
}

.fish {
    background: url('../assets/images/fish.png') no-repeat center;
}

.drag {
    position: absolute;
    cursor: default;
    width: 80px;
    height: 60px;
    z-index: 150;
    -ms-touch-action: none;
    touch-action: none;
}

/* Audio control buttons */
#play1, #play2, #play3, #play4, #play5 {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 100;
}

#play1.play, #play2.play, #play3.play, #play4.play, #play5.play {
    width: 20px;
    height: 20px;
    background: orange;
    position: absolute;
    cursor: pointer;
    top: 5px;
    background: url('../assets/images/play_mini1.png') no-repeat center;
}

#play1.play.hover, #play2.play.hover, #play3.play.hover, #play4.play.hover, #play5.play.hover {
    width: 20px;
    height: 20px;
    position: absolute;
    cursor: pointer;
    top: 5px;
    background: url('../assets/images/play_mini1.png') no-repeat center;
}

#play1.play.hover:hover, #play2.play.hover:hover, #play3.play.hover:hover, #play4.play.hover:hover, #play5.play.hover:hover {
    width: 20px;
    height: 20px;
    position: absolute;
    cursor: pointer;
    top: 5px;
    background: url('../assets/images/play_mini2.png') no-repeat center;
}
#play1.stop, #play2.stop, #play3.stop, #play4.stop, #play5.stop {
    width: 20px;
    height: 20px;
    position: absolute;
    cursor: pointer;
    top: 5px;
    background: url('../assets/images/stop_mini1.png') no-repeat center;
}

#play1.stop.hover, #play2.stop.hover, #play3.stop.hover, #play4.stop.hover, #play5.stop.hover {
    width: 20px;
    height: 20px;
    position: absolute;
    cursor: pointer;
    top: 5px;
    background: url('../assets/images/stop_mini1.png') no-repeat center;
}

#play1.stop.hover:hover, #play2.stop.hover:hover, #play3.stop.hover:hover, #play4.stop.hover:hover, #play5.stop.hover:hover {
    width: 20px;
    height: 20px;
    position: absolute;
    cursor: pointer;
    top: 5px;
    background: url('../assets/images/stop_mini2.png') no-repeat center;
}

#instructions {
    width: 390px;
    top: 22px;
    left: 170px;
    position: absolute;
    z-index: 140;
}

#playIns {
    width: 27px;
    height: 27px;
    position: absolute;
    cursor: pointer;
    top: 5px;
}

#playIns.play {
    background: url('../assets/images/play1.png') no-repeat center;
}

#playIns.play.hover {
    background: url('../assets/images/play1.png') no-repeat center;
}

#playIns.play.hover:hover {
    background: url('../assets/images/play2.png') no-repeat center;
}

#playIns.stop {
    background: url('../assets/images/stop1.png') no-repeat center;
}

#playIns.stop.hover {
    background: url('../assets/images/stop1.png') no-repeat center;
}

#playIns.stop.hover:hover {
    background: url('../assets/images/stop2.png') no-repeat center;
}

#instructionsText {
    position: absolute;
    top: 8px;
    left: 35px;
}

.noSelect {
    cursor: default;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}