/*keep this same for all*/
/*the main div container parallel to and above mainBox div*/
#wepLab8 {
  position: relative;
  width: 100%;
  height: 100%;

  top: 0%;
  left: 0%;

  margin: 0;
  padding: 0;

  /*background-color: #37C2DA;*/

  /*change only this*/
}

/*instruction for torch play*/
#instructLab8,
#conclusionLab8,
#conclusionLab8second {
  position: absolute;
  top: 3%;

  font-size: 1.5em;
  width: 100%;
  text-align: center;

  color: darkblue;
}

#conclusionLab8 {
  display: none;

  top: 18%;
  left: 9%;

  text-align: left;
}

#conclusionLab8second {
  display: none;
  top: 65%;
  left: 0%;
  width: 100%;
  text-align: center;

  color: yellow;
}

/*arrow pointer for conclusionLab8Second*/
#pointBattery {
  display: none;
  position: absolute;
  top: 25%;
  left: 30%;
  width: 6%;

  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

/*torch division*/
#torch {
  position: absolute;
  top: 20%;
  left: 10%;

  width: 80%;
  height: 40%;

  /*border:1px solid;*/
}

/*torch images*/
#torchOff,
#torchOn {
  position: absolute;
  top: 20%;
  left: 20%;

  width: 37%;
}

#torchOn {
  display: none;
}

/*battery droppable div*/
#batteryDrop {
  position: absolute;
  top: 41%;
  left: 23.1%;

  width: 18%;
  height: 20%;

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

/*effect to glow the batteryDrop droppable div when the batteryOut draggable image is over it*/
.batteryDropGlow {
  -moz-box-shadow: 0 0 2em gold;
  -webkit-box-shadow: 0 0 2em gold;
  box-shadow: 0 0 2em gold;
}

#batteryIn {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;

  width: 100%;
  height: 100%;
}

#rays {
  display: none;
  position: absolute;
  top: 15%;
  left: 57%;

  width: 8%;
}

/*image for battery outside the torch*/
#batteryOut {
  position: absolute;
  top: 70%;
  left: 30%;

  width: 20%;

  cursor: move;
}

/*the chemical energy text*/
#chemEnergy {
  display: none;
  position: absolute;
  top: 85%;
  left: 0%;

  /*width 100% and align center for making the text at center of screen*/
  width: 100%;
  text-align: center;

  font-size: 2em;

  color: rgb(2, 66, 83);

  padding: 0% 2%;

  border-radius: 5%;
  background-color: rgba(185, 228, 238, 0.7);
}