/*keep this same for all*/
#wepLab2 {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;

  margin: 0;
  padding: 0;
  /*border:1px solid red;	*/

  /*change only this*/

}

#workDef {
  position: absolute;
  top: 0%;

  /*height: 10%;*/
  width: 100%;
  padding: 2%;

  text-align: center;

  color: royalblue;

  border-radius: 5%;

  background-color: #ffffcc;

  font-size: 1.4em;

  -moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.7);
  box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.7);
}

#workDef .parsedString:nth-of-type(4) {
  color: inherit !important;
}

/*pushBox div*/

#pushDiv {
  /*display:none;*/
  position: absolute;
  top: 30%;
  left: 0%;

  width: 100%;
  height: 30%;

  /*border:1px solid red;*/
}

#pushTable {
  position: absolute;
  top: 65%;
  left: 18%;

  width: 64%;
}

#pushFinger {
  position: absolute;
  top: 30%;
  left: 10%;
  /*left:63%;*/
  width: 10%;

  cursor: pointer;
}

#pushBoxRight,
#pushBoxLeft {
  position: absolute;
  top: 35%;
  /*left:73%;*/
  left: 20%;

  width: 7%;
}

#pushBoxLeft {
  display: none;
  opacity: 0.3;
}

/*friction force div for arrow and label*/
#pushForce,
#pushFriction {
  display: none;
  position: absolute;
  top: 32%;
  left: 0%;
  /*left:52%;*/

  width: 10%;
  height: 10%;

  /*border:1px solid red;*/
}

#pushFriction {
  top: 70.5%;
  left: 19%;
  /*left:72%;*/
}

#forceArrow {
  position: absolute;
  top: 0%;
  left: 0%;

  width: 110%;
  height: 130%;
}

#frictionArrow {
  position: absolute;
  top: 0%;
  left: 0%;

  width: 100%;
  height: 130%;
}

#forceLabel,
#frictionLabel {
  position: absolute;
  top: 80%;
  left: 50%;

  color: brown;
  font-size: 1.3em;
}

/*cartoon image*/
#wl2cartoon {
  position: absolute;
  top: 65%;
  left: 85%;

  width: 10%;
}

/*instruction first*/
#wl2instruction {
  position: absolute;
  top: 33%;
  left: 5%;
  font-size: 1.3em;
}

/*what happens while pushing the  box on table text*/
#whatHappenFrictionPart1 {
  display: none;
  position: absolute;
  top: 35%;
  left: 15%;
  color: royalblue;
  font-size: 1.3em;
}

#whatHappenFrictionPart2 {
  display: none;
  position: absolute;
  top: 49%;
  left: 35%;
  color: darkblue;
  font-size: 1.3em;
}

#whatHappenFrictionPart3 {
  display: none;
  position: absolute;
  top: 75%;
  width: 100%;
  text-align: center;
  color: royalblue;
  font-size: 1.3em;
}

/*the following span tag for transition between pushDiv and gravity div*/
#enterGravity {
  display: none;
  position: relative;
  top: 55%;
  left: 90%;

  font-size: 2em;
  color: brown;

  cursor: pointer;
  width: 8%;
}

/*gravity division for bucketpull animation*/
#gravityDiv {
  display: none;
  position: absolute;
  top: 20%;
  left: -5%;

  width: 50%;
  height: 75%;

  /*border: 1px solid red;*/
}

/*the arrow and label divs*/
#forceAgainstGravity,
#gravity {
  display: none;
  position: absolute;
  top: 72%;
  left: 25%;

  width: 3%;
  height: 25%;

  /*border:1px solid red;*/
}

#gravity {
  top: 72%;
  left: 53%;
}

#forceAgainstGravityArrow {
  position: absolute;
  top: 0%;
  left: 0%;

  width: 100%;
  height: 100%;
}

#gravityArrow {
  position: absolute;
  top: 0%;
  left: 0%;

  width: 100%;
  height: 70%;
}

#forceAgainstGravityLabel,
#gravityLabel {
  /*display: none;*/
  position: absolute;
  top: 50%;
  left: -250%;

  color: brown;

  font-size: 1.3em;
}

#gravityLabel {
  top: 30%;
  left: 200%;
}

#openHand {
  position: absolute;
  top: 0%;
  /*top:40%;*/
  left: 37%;

  width: 12.5%;

  cursor: pointer;
}

#bucket {
  position: absolute;
  top: 60%;
  left: 30%;

  width: 22.5%;
}

#pickBucket {
  position: absolute;
  top: 40.2%;
  left: 30%;

  width: 22.5%;

  opacity: 0;
}

/*what happens while pulling the bucket*/
#whatHappenGravityPart1 {
  display: none;
  position: absolute;
  top: 80%;
  left: 23%;
  color: royalblue;
  font-size: 1.3em;
}

#whatHappenGravityPart2 {
  display: none;
  position: absolute;
  top: 49%;
  left: 35%;
  color: royalblue;
  font-size: 1.3em;
}

#whatHappenGravityPart3 {
  display: none;
  position: absolute;
  top: 21%;
  width: 100%;
  text-align: center;
  color: royalblue;
  font-size: 1.3em;
  right: 0;
}

/*show next speech on clicking this*/
#conclusionSpeech {
  display: none;
  position: absolute;
  top: 53%;
  left: 90%;

  font-size: 1.7em;

  color: green;

  cursor: pointer;

  width: 8%;
}

#conclusionWork {
  display: none;
  position: absolute;
  top: 18%;

  width: 100%;
  text-align: center;

  font-size: 1.3em;

  color: royalblue;
}

#workAgainstFrictionDef,
#workAgainstGravityDef {
  display: none;
  position: absolute;
  top: 80%;
  left: 15%;

  width: 30%;
  text-align: center;

  font-size: 1.2em;
  color: brown;
}

#workAgainstFrictionDef {
  top: 50%;
  left: 55%;
}

#enterGravity:hover #activityNextHoverBtn,
#conclusionSpeech:hover #activityNextHoverBtn {
  display: block;
}

#enterGravity:hover #activityNextBtn,
#conclusionSpeech:hover #activityNextHoverBtn {
  display: none;
}