/*the WEP lab div*/
#wepLab1 {
  position: relative;
  width: 100%;
  height: 100%;
  /*border:1px solid red;*/
  /*background-color: #D9E8F5;*/
  top: 0%;
  /*make sure this div does not inherit margin and padding from above*/
  margin: 0;
  padding: 0;
  /*-moz-box-shadow:inset 0px 0px 3px 3px #FF6633;
    -webkit-box-shadow:inset 0px 0px 3px 3px #FF6633;
    box-shadow:inset 0px 0px 3px 3px #FF6633;*/
  background-image: url("http://gituploads.olenepal.org/epaath_media/activity/grade7/science/scwep01/page1/image/page1background.png");
}

/*3-D effect for any text add this class to any text*/
.Three-Dee {
  line-height: 1em;
  color: royalblue;
  font-weight: bold;
}

/*worktopic*/
#workTopic {
  position: absolute;
  top: 0%;
  width: 100%;
  text-align: center;
  font-size: 2.5em;
  /*text-decoration: underline;*/
}

/*work example div*/
#workEg {
  position: absolute;
  top: 10%;
  left: 2%;
  width: 96%;
  height: 40%;
  /*border: 1px solid red;*/
}

#whatIsWork {
  position: absolute;
  top: 0%;
  font-size: 1.3em;
  width: 100%;
  text-align: center;
  color: black;
}

/*add this for effects on work examples on mouseOver and onClick*/
.workEgHoverEffect {
  -webkit-box-shadow: 0px 0px 4px 2px orange;
  -moz-box-shadow: 0px 0px 4px 2px orange;
  box-shadow: 0px 0px 4px 2px orange;
}

.workEgClickEffect {
  -webkit-box-shadow: 0px 0px 4px 2px green;
  -moz-box-shadow: 0px 0px 4px 2px green;
  box-shadow: 0px 0px 4px 2px green;
}

/*examples on work*/
#eg1, #eg2, #eg3, #eg4 {
  position: absolute;
  top: 22%;
  left: 2%;
  width: 20%;
  height: 74%;
  cursor: pointer;
  border-radius: 50%;
}

#eg1 {
  left: 2%;
}

#eg2 {
  left: 27%;
}

#eg3 {
  left: 52%;
}

#eg4 {
  left: 78%;
}

#eg1Image, #eg2Image, #eg3Image, #eg4Image {
  position: absolute;
  top: 5%;
  left: 15%;
  width: 55%;
}

#eg2Image {
  top: 0%;
  left: 0%;
  width: 80%;
}

#eg3Image {
  width: 75%;
}

#eg4Image {
  left: 20%;
  width: 55%;
}

#eg1Caption, #eg2Caption, #eg3Caption, #eg4Caption {
  position: absolute;
  color: royalblue;
  /*text-shadow:0px 8px 8px #000000;*/
  font-size: 1.3em;
  top: 80%;
}

#eg1Caption {
  top: 60%;
  left: 60%;
}

#eg2Caption {
  left: 50%;
}

#eg3Caption {
  left: 24%;
}

#eg4Caption {
  left: 5%;
}

/*examples of work explanation*/
#workEgExplain {
  position: absolute;
  top: 49%;
  left: 0.5%;
  width: 99%;
  height: 50%;
  /*-webkit-box-shadow: 0px 0px 4px 2px green;
	-moz-box-shadow:0px 0px 4px 2px green;
	box-shadow:0px 0px 4px 2px green;

	border-radius: 2%;*/
  /*border: 1px solid red;*/
}

/*the cartoon speaking at one position*/
#boySpeaks {
  position: absolute;
  top: 00%;
  left: 70%;
  width: 30%;
  height: 100%;
  /*border: 1px solid;*/
}

/*cartoon talk text*/
#speech {
  position: relative;
  top: 10%;
  width: 80%;
  padding: 2%;
  text-align: center;
  color: darkred;
  border-radius: 10%;
  border: 0.15em solid rgba(0, 0, 0, 0.5);
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 1;
}

#speechPoint {
  position: relative;
  top: 6%;
  left: 56%;
  width: 10%;
}

/*cartoon image*/
#cartoon {
  position: absolute;
  top: 39%;
  left: 65%;
  width: 30%;
}

/*first example explain div*/
#eg1Explain, #eg2Explain, #eg3Explain, #eg4Explain {
  display: none;
  /*border: 1px solid red;*/
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
}

#eg1Explain, #eg3Explain, #eg4Explain {
  display: none;
}

/*example images*/
#womanBg, #boyBg, #boxBg, #girlBg {
  /*border: 1px solid red;*/
  position: absolute;
  top: 1%;
  left: 0.1%;
  border-radius: 2%;
  width: 70%;
  height: 98%;
}

/*woman image*/
#womanSit {
  position: absolute;
  top: 29%;
  left: 12%;
  width: 13.8%;
  /*important*/
  opacity: 1;
}

#womanUp {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 11.25%;
  /*important*/
  opacity: 0;
}

#womanWalk {
  position: absolute;
  top: 27%;
  left: 16%;
  width: 18%;
  opacity: 0;
}

/*arrow div for woman*/
#arrow1 {
  /*border:1px solid red;*/
  position: absolute;
  top: 20%;
  left: 17%;
  width: 0%;
  height: 3.5%;
  opacity: 0;
}

/*bulb images*/
#bulbOn {
  opacity: 0;
  position: absolute;
  top: -8%;
  left: 20%;
  width: 28%;
}

#bulbOff {
  position: absolute;
  top: 30%;
  left: 27.8%;
  width: 12%;
}

/*box push images*/
#boxLeft {
  position: absolute;
  top: 37%;
  left: 5%;
  width: 18.7%;
  /*important*/
  opacity: 1;
}

#boxRight {
  position: absolute;
  top: 37%;
  left: 45%;
  width: 19.6%;
  /*important*/
  opacity: 0;
}

#boxWalk {
  position: absolute;
  top: 37%;
  left: 4%;
  width: 20%;
  opacity: 0;
}

#arrow3 {
  position: absolute;
  top: 30%;
  left: 18%;
  width: 32%;
  height: 3.5%;
  opacity: 1;
}

/*magnet example images*/
#magnetEx {
  position: absolute;
  top: 0%;
  left: 20%;
  width: 30%;
}