body {
margin-top: auto;
margin-bottom: auto;
background-color: #000000;
}

/* INDEX */
#homepageStage {
background-image: url("images/index/stage.jpg");
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

.titles {
position: absolute;
z-index: 2;
}

#title2 {
left: 175px;
top: 0px;
}

#title1 {
left: 250px;
top: 0px;
}


#woody {
position: absolute;
left: 10px;
bottom: 0px;
z-index: 1;
}

.menu {
background-color: rgba(255,255,255,0.8);
padding: 50px;
position: absolute;
z-index: 3;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
text-shadow: 4px 4px 4px #aaa;
color: black;
text-decoration: none;
border-radius: 250px;
box-shadow: 5px 5px 2px rgba(0,0,0,0.8);
cursor: pointer;
font-weight: bold;
}

#story {
left: 350px;
bottom: 100px;
}

#start {
right: 350px;
bottom: 100px;
}

#homepageStage div:hover { 
color: white;
background-color: rgba(242, 57, 44, 0.7);
opacity: 2;
} 

#mute {
position: absolute;
left: 15px;
bottom: 15px;
z-index: 3;
cursor: pointer;
}

#unmute {
position: absolute;
left: 15px;
bottom: 15px;
z-index: 3;
}

/* PAGE 1 */
#page1stage {
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

.sync {
color: black;
font-family: 'Quicksand', sans-serif;
font-size: 22px;
position: absolute;
text-align: center;
left: 240px;
bottom: 15px;
height: 55px;
width: 700px;
padding: 10px;
background-color: rgba(255,255,255,0.8);
border-radius: 10px;
display: none;
z-index: 100;
font-weight: bold;
}

#videostory {
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
}

#question {
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 24px;
position: absolute;
text-align: center;
left: 240px;
bottom: 15px;
height: 60px;
width: 700px;
padding: 10px;
border-radius: 10px;
display: none;
z-index: 100;
font-weight: bold;
}

/* PAGE 2 */
#page2stage {
background-image: url("images/page2/stage.jpg");
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

#page2narration {
color: black;
position: absolute;
bottom: 10px;
left: 300px;
width: 600px;
padding: 10px;
font-family: 'Quicksand', sans-serif;
font-size: 22px;
text-align: center;
background-color: rgba(255,255,255,0.8);
border-radius: 10px;
font-weight: bold;
z-index: 101;
}

#mphHelp {
z-index: 2;
left: 250px;
top: 330px;
position: absolute;
opacity: 0.9;
display: none;
cursor: pointer;
}

#mphDandd {
z-index: 2;
left: 250px;
top: 330px;
position: absolute;
opacity: 0.9;
display: none;
cursor: pointer;
}

#woodyHelp {
z-index: 2;
left: 325px;
top: 150px;
position: absolute;
opacity: 0.9;
cursor: pointer;
display: none;
}

#mphHelpImg {
position: absolute;
z-index: 1;
right: 75px;
bottom: 25px;
cursor: pointer;
}

#woodyHelpImg {
position: absolute;
z-index: 1;
left: 0px;
bottom: 50px;
display: none;
}

#note {
color: black;
font-family: 'Quicksand', sans-serif;
font-size: 16px;
position: absolute;
text-align: center;
left: 15px;
top: 15px;
height: 40px;
width: 200px;
padding: 10px;
background-color: rgba(255,255,255,0.8);
border-radius: 10px;
z-index: 100;
}

#find {
position: absolute;
font-size: 30px;
width: 500px;
height: 160px;
top: 200px;
left: 350px;
font-family: 'Quicksand', sans-serif;
color: #000000;
text-align: center;
font-weight: bold;
background-color: rgba(237,216,95,0.8);
padding: 20px;
border-radius: 40px;
z-index: 101;
display: none;
}

.toys {
position: absolute;
z-index: 100;
bottom: 25px;
cursor: move;
}

#truck {
left: 25px;
}

#barbie {
right: 25px;
}

#bears {
left: 300px;
}

#robot {
left: 200px;
}

#boxer {
right: 100px;
}

/* PAGE 3 */
#page3stage {
background-image: url("images/page3/stage.jpg");
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

#mphbody {
position: absolute;
z-index: 1;
top: 150px;
left: 300px;
}

.draggables {
cursor: pointer;
}

.droppables {
opacity: 0.5;
}

#eyesTarget {
position: absolute;
z-index: 2;
left: 515px;
top: 200px;
}

#moustacheTarget {
position: absolute;
z-index: 3;
left: 435px;
top: 285px;
}

#leftearTarget {
position: absolute;
z-index: 2;
left: 375px;
top: 190px;
}

#rightearTarget {
position: absolute;
z-index: 2;
left: 664px;
top: 190px;
}

#hatTarget {
position: absolute;
z-index: 2;
left: 485px;
top: 70px;
}

#eyes {
left: 200px;
bottom: 45px;
position: absolute;
z-index: 99;
}

#moustache {
left: 10px;
top: 395px;
position: absolute;
z-index: 99;
}

#leftear {
right: 250px;
top: 500px;
position: absolute;
z-index: 98;
}

#rightear {
right: 125px;
top: 500px;
position: absolute;
z-index: 98;
}

#hat {
right: 0px;
top: 400px;
position: absolute;
z-index: 99;
}

.bodyParts {
cursor: pointer;
}

#eyesDialogue {
position: absolute;
z-index: 100;
left: 25px;
top: 100px;
}

#earsDialogue {
position: absolute;
z-index: 100;
display: none;
left: 25px;
top: 100px;
}

#moustacheandhatDialogue {
position: absolute;
z-index: 100;
display: none;
left: 25px;
top: 100px;
}

#doneDialogue {
position: absolute;
z-index: 100;
display: none;
left: 25px;
top: 100px;
}

#fillinDialogue {
position: absolute;
z-index: 100;
display: none;
left: 25px;
top: 100px;
}

#mphcomplete {
position: absolute;
display: none;
left: 300px;
top: 70px;
z-index: 4;
display: none;
}

/* PAGE 4 */
#page4stage {
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

.syncBackground {
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 22px;
position: absolute;
text-align: center;
left: 240px;
bottom: 15px;
height: 55px;
width: 700px;
padding: 10px;
background-color: rgba(242,57,44,0.8);
border-radius: 10px;
display: none;
z-index: 99;
font-weight: bold;
}

#videobackground {
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
}

/* PAGE 5 */
#page5stage {
background-image: url("images/page5/stage.jpg");
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
z-index: 1;
}

#mphexplaining {
position: absolute;
left: 100px;
bottom: 50px;
z-index: 2;
}

.instructionspg5 {
position: absolute;
right: 170px;
top: 200px;
z-index: 3;
cursor: pointer;
}

#mphspeaktools2 {
display: none;
}

#mphspeaktools3 {
display: none;
}

#mphspeaktools4 {
display: none;
}

#mphspeaktools5 {
display: none;
}

#mphspeaktools6 {
display: none;
}

#helpdecision {
position: absolute;
font-size: 30px;
width: 500px;
height: 200px;
top: 200px;
left: 350px;
font-family: 'Quicksand', sans-serif;
color: #000000;
text-align: center;
font-weight: bold;
background-color: rgba(237,216,95,0.8);
padding: 20px;
border-radius: 40px;
z-index: 100;
display: none;
}

.choicehelp {
font-size: 18px;
background-color: rgba(255,255,255,0.9);
padding: 10px;
font-weight: bold;
text-decoration: none;
border-radius: 10px;
color: black;
width: 40px;
text-align: center;
cursor: pointer;
}

#yes {
position: absolute;
left: 150px;
}

#yes:hover {
background-color: rgba(242,57,44,0.9);
color: white;
}

#no {
position: absolute;
right: 150px;
}

#no:hover {
background-color: rgba(242,57,44,0.9);
color: white;
}


/* PAGE 6 */
#page6stage {
background-image: url("images/page6/stage.jpg");
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

#list {
position: absolute;
right: 372px;
top: 50px;
cursor: pointer;
}

#bag {
position: absolute;
right: 75px;
bottom: 75px;
cursor: pointer;
}

#board {
position: absolute;
left: 450px;
bottom: 125px;
cursor: move;
}

#gun {
position: absolute;
left: 280px;
bottom: 75px;
cursor: move;
}

#rope {
position: absolute;
left: 380px;
top: 300px;
cursor: move;
}

#light {
position: absolute;
right: 300px;
top: 380px;
cursor: move;
}

#binoculars {
position: absolute;
left: 610px;
top: 400px;
cursor: move;
}

/* PAGE 7 */

#page7stage {
background-image: url("images/index/stage.jpg");
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

#sortable {
list-style-type: none; 
margin: 0; 
padding: 0; 
width: 720px; 
height: 480px; 
position: absolute;
left: 275px;
top: 75px;
display: none;
}
	
#sortable li { 
margin: 1px 1px 1px 0;
box-shadow: 0px 0px 2px 2px; 
padding: 1px; 
float: left;
width: 213px; 
height: 160px; 
cursor: move;
}

#mph {
position: absolute;
right: 187px;
bottom: 100px;
z-index: 99;
}

.instructionspuzzle {
position: absolute;
z-index: 99;
left: 187px;
top: 250px;
cursor: pointer;
}

#mphspeakpuzzle2 {
display: none;
}

#mphspeakpuzzle3 {
display: none;
}

#mphspeakpuzzle4 {
display: none;
}

#mphspeakpuzzle5 {
display: none;
}

#mphspeakpuzzle6 {
display: none;
}

#puzzleroom {
display: none;
position: absolute;
left: 80px;
top: 130px;
cursor: pointer;
}

.startclock {
position: absolute;
font-size: 48px;
height: 55px;
width: 300px;
padding: 10px;
background-color: rgba(255,255,255,0.7);
border-radius: 40px;
text-align: center;
left: 450px;
top: 250px;
display: none;
font-family: 'Quicksand', sans-serif;
cursor: pointer;
z-index: 100;
text-decoration: none;
color: #000000;
}

.startclock:hover {
background-color: rgba(242,57,44,0.9);
color: white;
}

#clock {
color: black;
height: 150px;
width: 99px;
font-size: 30px;
position: absolute;
top: 20px;
right: 0px;
z-index: 100;
text-align: center;
font-family:'Quicksand', sans-serif;
background-repeat: no-repeat;
display: none;
}

#countdownclock {
position: absolute;
top: 10px;
right: 0px;
z-index: 2;
}

h1#failNotification {
position: absolute;
font-size: 48px;
height: 60px;
width: 300px;
padding: 10px;
background-color: rgba(255,255,255,0.7);
border-radius: 40px;
text-align: center;
left: 440px;
top: 250px;
display: none;
cursor: pointer;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
font-weight: normal;
}

h1#failNotification:hover {
background-color: rgba(242,57,44,0.9);
color: white;
}

h1#successNotification {
position: absolute;
font-size: 48px;
height: 60px;
width: 300px;
padding: 10px;
background-color: rgba(255,255,255,0.7);
border-radius: 40px;
text-align: center;
left: 440px;
top: 250px;
display: none;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
font-weight: normal;
}

/* PAGE 8 */
#page8stage {
background-image: url("images/page8/stage1.jpg");
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

#mphpath {
position: absolute;
z-index: 1;
bottom: 25px;
right: 25px;
}

.speakpath {
position: absolute;
z-index: 1;
bottom: 125px;
right: 210px;
cursor: pointer;
}

#mphspeakpath2 {
display: none;
}

#mphspeakpath3 {
display: none;
}

#window {
position: absolute;
z-index: 1;
left: 487px;
top: 100px;
}

#bed {
position: absolute;
z-index: 1;
left: 300px;
top: 350px;
}

#desk {
position: absolute;
z-index: 1;
right: 300px;
top: 350px;
}

.paths {
display: none;
cursor: pointer;
}

/* PAGE 9 */
#page9stage {
background-image: url("images/page9/stage.png");
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

#surprisedmph {
position: absolute;
z-index: 1;
right: 200px;
top: 50px;
}

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

#sold1 {
left: 550px;
bottom: 70px;
}

#sold2 {
left: 130px;
bottom: 100px;
}

#sold3 {
left: 405px;
bottom: 100px;
}

#sold4 {
right: 405px;
bottom: 100px;
}

#sold5 {
right: 130px;
bottom: 100px;
}

#sold6 {
left: 10px;
bottom: 150px;
}

#sold7 {
left: 260px;
bottom: 150px;
}

#sold8 {
left: 550px;
bottom: 160px;
}

#sold9 {
right: 260px;
bottom: 150px;
}

#sold10 {
right: 10px;
bottom: 150px;
}

#sold11 {
left: 130px;
bottom: 200px;
}

#sold12 {
left: 405px;
bottom: 200px;
}

#sold13 {
right: 405px;
bottom: 200px;
}

#sold14 {
right: 130px;
bottom: 200px;
}

#sold15 {
left: 10px;
bottom: 250px;
}

.mphspeakbed {
position: absolute;
z-index: 100;
left: 210px;
top: 120px;
cursor: pointer;
}

#mphspeakbed2 {
display: none;
}

#mphspeakbed3 {
display: none;
}

h1#successNotificationBed {
position: absolute;
font-size: 48px;
height: 60px;
width: 300px;
padding: 10px;
background-color: rgba(255,255,255,0.7);
border-radius: 40px;
text-align: center;
left: 440px;
top: 250px;
display: none;
cursor: pointer;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
font-weight: normal;
z-index: 100;
}

h1#failNotificationBed {
position: absolute;
font-size: 48px;
height: 60px;
width: 300px;
padding: 10px;
background-color: rgba(255,255,255,0.7);
border-radius: 40px;
text-align: center;
left: 440px;
top: 250px;
display: none;
cursor: pointer;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
font-weight: normal;
z-index: 100;
}

h1#failNotificationBed:hover {
background-color: rgba(242,57,44,0.9);
color: white;
}

/* PAGE 10 */
#page10stage {
background-image: url("images/page10/stage.jpg");
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

#chest {
position: absolute;
z-index: 2;
bottom: 58px;
left: 170px;
}

#arrow {
position: absolute;
z-index: 3;
left: 300px;
top: 80px;
display: none;
}

#mphduck {
position: absolute;
z-index: 1;
right: 460px;
top: 140px;
}

.mphspeakduck {
position: absolute;
z-index: 2;
right: 30px;
top: 150px;
cursor: pointer;
}

#mphspeakduck2 {
display: none;
}

#mphspeakduck3 {
display: none;
}

h1#successNotificationDesk {
position: absolute;
font-size: 48px;
height: 60px;
width: 300px;
padding: 10px;
background-color: rgba(255,255,255,0.7);
border-radius: 40px;
text-align: center;
left: 440px;
top: 250px;
display: none;
cursor: pointer;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
font-weight: normal;
z-index: 100;
}

h1#failNotificationDesk {
position: absolute;
font-size: 48px;
height: 60px;
width: 300px;
padding: 10px;
background-color: rgba(255,255,255,0.7);
border-radius: 40px;
text-align: center;
left: 440px;
top: 250px;
display: none;
cursor: pointer;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
font-weight: normal;
z-index: 100;
}

h1#failNotificationDesk:hover {
background-color: rgba(242,57,44,0.9);
color: white;
}

.ducks {
position: absolute;
z-index: 3;
display: none;
cursor: move;
}

#duck1 {
top: 250px;
}

#duck2 {
top: 225px;
}

#duck3 {
top: 250px;
}

#duck4 {
top: 225px;
}

#duck5 {
top: 270px;
}

#duck6 {
top: 250px;
}

#duck7 {
top: 225px;
}

/* PAGE 11 */
#page11stage {
background-image: url("images/page11/stage.jpg");
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

#shapetip {
color: black;
font-family: 'Quicksand', sans-serif;
font-size: 16px;
position: absolute;
text-align: center;
left: 15px;
top: 15px;
height: 58px;
width: 200px;
padding: 10px;
background-color: rgba(255,255,255,0.8);
border-radius: 10px;
z-index: 100;
display: none;
}

.mphspeakwindow {
position: absolute;
z-index: 1;
top: 400px;
right: 300px;
cursor: pointer;
}

#mphwindow {
position: absolute;
z-index: 1;
top: 450px;
left: 250px;
}

#mphspeakwindow2 {
display: none;
}

#mphspeakwindow3 {
display: none;
}

.shapes {
position: absolute;
z-index: 1;
display: none;
}

#circle {
left: 150px;
top: 100px;
}

#circleform {
left: 200px; 
top: 320px;
}

#octagon {
left: 500px;
top: 100px;
}

#octagonform { 
left: 555px; 
top: 320px;
}

#pentagon {
right: 150px;
top: 100px;
}

#pentagonform { 
right: 200px; 
top: 320px;
}

#triangle {
left: 300px;
top: 350px;
}

#triangleform {
left: 360px; 
top: 570px;
}

#hexagon {
right: 300px;
top: 350px;
}

#hexagonform { 
right: 360px; 
top: 570px;
}

#submitshapes {
position: absolute;
z-index: 5;
left: 575px;
top: 580px;
font-size: 24px;
display: none;
font-family: 'Quicksand', sans-serif;
}

.inputshapes {
font-family: 'Quicksand', sans-serif;
position: absolute; 
width: 85px; 
height: 27px; 
font-size: 14px;
display: none;
}

h1#successNotificationShapes {
position: absolute;
z-index: 100;
font-size: 48px;
height: 60px;
width: 300px;
padding: 10px;
background-color: rgba(255,255,255,0.9);
border-radius: 40px;
text-align: center;
left: 440px;
top: 250px;
display: none;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
font-weight: normal;
}

h1#failNotificationShapes {
position: absolute;
font-size: 48px;
height: 60px;
width: 300px;
padding: 10px;
background-color: rgba(255,255,255,0.9);
border-radius: 40px;
text-align: center;
left: 440px;
top: 250px;
display: none;
cursor: pointer;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
z-index: 100;
font-weight: normal;
}

h1#failNotificationShapes:hover {
background-color: rgba(242,57,44,0.9);
color: white;
}

/* PAGE 12 */
#page12stage {
background-image: url("images/page12/stage.jpg");
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
display: none;
}

#page12stagepart1 {
background-color: black;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

#videoattic {
position: absolute;
z-index: 200;
width: 1200px;
height: 700px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

#page12narration {
color: black;
font-family: 'Quicksand', sans-serif;
font-size: 22px;
position: absolute;
text-align: center;
left: 250px;
bottom: 15px;
height: 55px;
width: 700px;
padding: 10px;
background-color: rgba(255,255,255,0.8);
border-radius: 10px;
z-index: 100;
font-weight: bold;
}

#mphblock {
position: absolute;
z-index: 1;
left: 0px;
bottom: 75px;
display: none;
}

.mphspeakblock {
position: absolute;
z-index: 2;
left: 300px;
bottom: 300px;
cursor: pointer;
display: none;
}

#mphspeakblock2 {
display: none;
}

#mphspeakblock3 {
display: none;
}

#mphspeakblock4 {
display: none;
}

.blocks {
position: absolute;
z-index: 100;
right: 10px;
bottom: 10px;
display: none;
cursor: move;
}

.blockholder {
position: absolute;
display: none;
opacity: 0.4;
}

#block1holder {
right: 400px;
bottom: 100px;
z-index: 1;
}

#block2holder {
right: 400px;
bottom: 175px;
z-index: 1;
}

#block3holder {
right: 400px;
bottom: 250px;
z-index: 1;
}

#block4holder {
right: 400px;
bottom: 325px;
z-index: 1;
}

h1#climbrope {
position: absolute;
font-size: 48px;
height: 60px;
width: 400px;
padding: 10px;
background-color: rgba(255,255,255,0.7);
border-radius: 40px;
text-align: center;
left: 400px;
top: 100px;
display: none;
cursor: pointer;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
font-weight: normal;
}

h1#climbrope:hover {
background-color: rgba(242, 57, 44, 0.7);
color: white;
}

/* PAGE 13 */
#page13stage {
background-image: url("images/page13/stage.png");
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

#page13narration {
color: black;
font-family: 'Quicksand', sans-serif;
font-size: 30px;
position: absolute;
text-align: center;
left: 350px;
top: 150px;
height: 40px;
width: 500px;
padding: 10px;
background-color: rgba(237,216,95,0.8);
border-radius: 40px;
z-index: 100;
font-weight: bold;
display: none;
}

.arrows {
position: absolute;
z-index: 1;
cursor: pointer;
display: none;
}

#woodyback {
position: absolute;
z-index: 1;
left: 518px;
bottom: 0px;
}

#left {
left: 300px;
top: 450px;
}

#right {
right: 300px;
top: 450px;
}

#woodythought {
position: absolute;
z-index: 2;
right: 125px;
bottom: 340px;
}

.mphspeakway {
position: absolute;
z-index: 2;
display: none;
}

#mphfake {
left: 50px;
top: 150px;
}

#mphreal {
right: 50px;
top: 200px;
}

/* PAGE 14 */
#page14stage {
background-image: url("images/page14/stage.jpg");
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

#baby {
position: absolute;
z-index: 1;
left: 0px;
top: 75px;
}

.page14narration {
color: black;
font-family: 'Quicksand', sans-serif;
font-size: 22px;
position: absolute;
text-align: center;
left: 250px;
bottom: 15px;
height: 55px;
width: 700px;
padding: 10px;
background-color: rgba(255,255,255,0.8);
border-radius: 10px;
z-index: 100;
font-weight: bold;
}

#page14narration2 {
display: none;
}

#woodybackpage14 {
position: absolute;
bottom: 0px;
right: 0px;
z-index: 1;
}

.babyspeak {
position: absolute;
z-index: 2;
right: 260px;
top: 225px;
cursor: pointer;
display: none;
}

#babyspeak2 {
display: none;
}

#babyspeak3 {
display: none;
}

#babyspeak4 {
display: none;
}

#babyspeak5 {
display: none;
}

#babyspeak6 {
display: none;
}

#babyspeak7 {
display: none;
}

#babyspeak8 {
display: none;
}

#babyspeak9 {
display: none;
}
#spotdiff1 {
position: absolute;
display: none;
right: 200px;
top: 25px;
z-index: 1;
}

#spotdiff2 {
position: absolute;
display: none;
right: 200px;
bottom: 25px;
z-index: 1;
}

.difference {
position: absolute;
display: none;
cursor: pointer;
}

#ball {
right: 250px;
top: 85px;
z-index: 99;
}

#bucket {
right: 550px;
top: 380px;
z-index: 99;
}

#bin {
right: 649px;
top: 85px;
z-index: 99;
}

#book {
right: 550px;
top: 25px;
z-index: 99;
}

#witcheshat {
right: 710px;
top: 400px;
z-index: 99;
}

#playpyramid {
right: 280px;
top: 380px;
z-index: 99;
}

#successNotificationBaby {
position: absolute;
z-index: 100;
left: 270px;
top: 110px;
display: none;
}

/* PAGE 15 */
#page15stage {
background-image: url("images/page15/stage.png");
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

#drawboard {
position: absolute;
z-index: 1;
left: 300px;
top: 65px;
}

#worriedmph {
position: absolute;
z-index: 2;
right: 225px;
bottom: 60px;
}

.mphspeakeqn {
position: absolute;
z-index: 3;
left: 225px;
bottom: 210px;
cursor: pointer;
}

#mphspeakeqn2 {
display: none;
}

#mphspeakeqn3 {
display: none;
}

#mphspeakeqn4 {
display: none;
}

#mphspeakeqn5 {
display: none;
}

#mphspeakeqn6 {
display: none;
}

.eqn {
position: absolute;
z-index: 99;
left: 400px;
display: none;
}

#eqn1 {
top: 160px;
}

#eqn2 {
top: 210px;
}

#eqn3 {
top: 260px;
}

#eqn4 {
top: 310px;
}

#eqn5 {
top: 360px;
}

#total {
top: 405px;
left: 500px;
}

.inputequations {
font-family: 'Quicksand', sans-serif;
position: absolute; 
width: 75px; 
height: 30px; 
font-size: 20px;
display: none;
z-index: 99;
right: 400px;
text-align: right;
}

#eqn1form {
top: 160px;
}

#eqn2form {
top: 210px;
}

#eqn3form {
top: 260px;
}

#eqn4form {
top: 310px;
}

#eqn5form {
top: 360px;
}

#eqn6form {
top: 410px;
right: 520px;
}

#submitequations {
position: absolute;
z-index: 99;
left: 575px;
top: 500px;
font-size: 14px;
display: none;
font-family: 'Quicksand', sans-serif;
}

/* PAGE 16 */
#page16stage {
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

#videocages {
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
margin-left: auto;
margin-top: auto;
margin-right: auto;
}

.syncCage {
color: black;
font-weight: bold;
font-family: 'Quicksand', sans-serif;
font-size: 22px;
position: absolute;
text-align: center;
left: 240px;
bottom: 15px;
height: 55px;
width: 700px;
padding: 10px;
background-color: rgba(255,255,255,0.8);
border-radius: 10px;
display: none;
z-index: 2;
}

/* PAGE 17 */
#page17stage {
background-image: url("images/page17/stage.png");
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

#padlock {
position: absolute;
z-index: 1;
left: 325px;
top: 56px;
}

#mphcode {
position: absolute;
z-index: 3;
left: 235px;
bottom: 20px;
}

.mphspeakcode {
position: absolute;
z-index: 3;
right: 235px;
bottom: 220px;
cursor: pointer;
}

#mphspeakcode2 {
display: none;
}

#mphspeakcode3 {
display: none;
}

.inputcode {
position: absolute;
z-index: 100;
width: 60px; 
height: 50px; 
font-size: 36px;
font-family: 'Quicksand', sans-serif;
display: none;
}

#code1form {
top: 400px;
left: 465px;
}

#code2form {
top: 400px;
left: 535px;
}

#code3form {
top: 400px;
left: 605px;
}

#code4form {
top: 400px;
left: 675px;
}

#submitcode {
position: absolute;
z-index: 100;
left: 550px;
top: 480px;
font-size: 14px;
width: 100px;
display: none;
font-family: 'Quicksand', sans-serif;
}

/* PAGE 18 */
#page18stage {
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

#videowrongcode {
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
}

/* PAGE 19 */
#page19stage {
background-image: url("images/page19/stage.png");
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
} 

#topcage {
position: absolute;
z-index: 3;
left: 175px;
top: 50px;
}

#cagebars {
position: absolute;
z-index: 3;
left: 175px;
top: 133px;
height: 440px;
width: 850px;
}

#bottomcage {
position: absolute;
z-index: 1;
left: 180px;
bottom: 125px;
}

.group {
position: absolute;
z-index: 2;
left: 250px;
top: 180px;
}

.quote {
position: absolute;
z-index: 2;
display: none;
}

#green {
right: 250px;
top: 150px;
}

#pink {
top: 250px;
right: 215px;
}

#red {
top: 165px;
left: 350px;
}

#yellow {
top: 100px;
left: 480px;
}

#orange {
top: 125px;
right: 425px;
}

#blue {
top: 225px;
left: 275px;
}

.page19narration {
color: black;
font-family: 'Quicksand', sans-serif;
font-size: 22px;
position: absolute;
text-align: center;
left: 250px;
bottom: 15px;
height: 55px;
width: 700px;
padding: 10px;
background-color: rgba(255,255,255,0.8);
border-radius: 10px;
z-index: 100;
font-weight: bold;
display: none;
}

/* PAGE 20 */

#videocontainer {
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

p.syncAmbush {
color: black;
font-family: 'Quicksand', sans-serif;
font-size: 22px;
position: absolute;
text-align: center;
left: 250px;
bottom: 15px;
height: 55px;
width: 700px;
padding: 10px;
background-color: rgba(255,255,255,0.8);
border-radius: 10px;
display: none;
font-weight: bold;
z-index: 100;
}

#videoambush {
position: relative;
z-index: 1;
top: 0px;
left: 0px;
}

/* PAGE 21 */
#page21stage {
background-image: url("images/page21/stage.jpg");
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
} 

#sarge {
position: absolute;
z-index: 1;
right: 125px;
bottom: 0px;
}

.sargespeak {
position: absolute;
z-index: 1;
left: 125px;
top: 200px;
cursor: pointer;
}

#sargespeak2 {
display: none;
}

#sargespeak3 {
display: none;
}

#sargespeak4 {
display: none;
}

#sargespeak5 {
display: none;
}

/* PAGE 22 */

#page22stage {
background-image: url("images/page22/stage.jpg");
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
overflow: hidden;
}

#output {
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
color: black;
font-size: 30px;
font-family: 'Quicksand', sans-serif;	
width: 85px;
text-align: center;
margin-top: 24px;
margin-left: -2px;
}

#heart {
position: absolute;
z-index: 1;
left: 10px;
top: 10px;
}

#enemy {
position: absolute;
top: 10px;
left: 10px;
}

#woodyshoot {
position: absolute;
top: 275px;
left: 100px;
}

#gameTimer {
width: 300px;
height: 30px;
background-color: rgba(237,216,95,0.7);
position: absolute;
top: 0;
left: 0;
}

#gameTimerContainer {
width: 300px;
height: 30px;
border: 1px solid rgba(242,57,44,0.7);
background-color: rgba(242,57,44,0.7);
position: absolute;
top: 10px;
right: 10px;
}

#startshoot {
position: absolute;
font-size: 48px;
height: 55px;
width: 300px;
padding: 10px;
background-color: rgba(255,255,255,0.7);
border-radius: 40px;
text-align: center;
left: 450px;
top: 250px;
display: none;
font-family: 'Quicksand', sans-serif;
cursor: pointer;
z-index: 100;
text-decoration: none;
font-weight: normal;
text-decoration: none;
color: #000000;
}

#startshoot:hover {
background-color: rgba(242,57,44,0.9);
color: white;
}

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

#soldiershoot1 {
top: 50px;
right: 0px;
}

#soldiershoot2 {
top: 175px;
right: 0px;
}

#soldiershoot3 {
top: 300px;
right: 0px;
}

#soldiershoot4 {
top: 425px;
right: 0px;
}

#soldiershoot5 {
top: 550px;
right: 0px;
}

#soldiershoot6 {
top: 135px;
right: 100px;
}

#soldiershoot7 {
top: 260px;
right: 100px;
}

#soldiershoot8 {
top: 375px;
right: 100px;
}

#soldiershoot9 {
top: 490px;
right: 100px;
}

#soldiershoot10 {
top: 175px;
right: 200px;
}

#soldiershoot11 {
top: 425px;
right: 200px;
}

#soldiershoot12 {
top: 300px;
right: 200px;
}

#soldiershoot13 {
top: 260px;
right: 300px;
}

#soldiershoot14 {
top: 375px;
right: 300px;
}

#instruct {
position: absolute;
font-size: 24px;
height: 120px;
width: 300px;
padding: 10px;
background-color: rgba(242,57,44,0.7);
border-radius: 10px;
text-align: center;
left: 440px;
top: 250px;
font-family: 'Quicksand', sans-serif;
color: #ffffff;
}

/* PAGE 23 */
#page23stage {
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

#videofail {
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
}

.syncfail {
background-color: rgba(255,255,255,0.8);
font-family: 'Quicksand', sans-serif;
font-size: 22px;
position: absolute;
width: 500px;
height: 55px;
left: 350px;
bottom: 15px;
padding: 10px;
border-radius: 10px;
text-align: center;
font-weight: bold;
z-index: 2;
display: none;
}


/* PAGE 24 */
#page24stage {
background-image: url("images/page24/stage.jpg");
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

.sargefail {
position: absolute;
z-index: 5;
left: 300px;
top: 50px;
cursor: pointer;
}

#sargefail2 {
display: none;
top: 325px;
left: 250px;
}

#sargefail3 {
display: none;
}

#sargefail4 {
display: none;
}

#sargefail5 {
display: none;
}

#sargefail6 {
display: none;
}

.sarges {
position: absolute;
}

.sargesoldier {
position: absolute;
}

#sargeend {
top: 75px;
left: 100px;
}

#sargeend1 {
top: 145px;
left: 100px;
display: none;
}

#sargeend2 {
top: 75px;
left: 100px;
display: none;
}

#soldierarmy1 {
left: 1000px;
bottom: 0px;
z-index: 3
}

#soldierarmy2 {
left: 1000px;
bottom: 140px;
z-index: 2;
}

#soldierarmy3 {
left: 1000px;
bottom: 280px;
z-index: 1;
}

#soldierarmy4 {
left: 850px;
bottom: 70px;
z-index: 2;
}

#soldierarmy5 {
left: 850px;
bottom: 210px;
z-index: 1;
}

#soldierarmy6 {
left: 700px;
bottom: 140px;
}

#page24stagepart2 {
background-color: black;
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
display: none;
}

#success {
position: relative;
z-index: 1;
top: 0px;
left: 0px;
}

/* PAGE 25 */
#page25stage {
background-image: url("images/page25/stage.jpg");
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

.page25narration {
color: black;
font-family: 'Quicksand', sans-serif;
font-size: 22px;
position: absolute;
text-align: center;
left: 250px;
bottom: 15px;
height: 55px;
width: 700px;
padding: 10px;
background-color: rgba(255,255,255,0.8);
border-radius: 10px;
z-index: 100;
font-weight: bold;
}

#page25narration2 {
display: none;
}

#page25narration3 {
display: none;
}

#page25narration4 {
display: none;
}

/* PAGE 26 */
#conclusion {
background-image: url("images/page26/cloud.jpg");
background-repeat: no-repeat;
width: 1200px;
height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

#conclusiontext {
position: absolute;
font-size: 36px;
width: 500px;
height: 200px;
top: 200px;
left: 350px;
font-family: 'Quicksand', sans-serif;
color: #000000;
text-align: center;
font-weight: bold;
background-color: rgba(237,216,95,0.7);
padding: 20px;
border-radius: 40px;
}

#again {
font-size: 18px;
background-color: rgba(255,255,255,0.9);
padding: 10px;
font-weight: bold;
text-decoration: none;
border-radius: 10px;
color: black;
}

#again:hover {
background-color: rgba(242,57,44,0.9);
color: white;
}