.wepEx {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	font-size: 1.3em;
	background: #F6F7F1;
	box-shadow: inset 0 0 30px #f2f2f2;

}

.wepEx, .wepEx * {
	position: relative;
	margin: 0;
	padding: 0;
}

.wepEx .nextBtn{
	display: none;
	position: absolute;
	bottom:1%;
	right:10%;
	width: 6%;
	height: 10%;
	z-index: 30000;	/* make it to topmost */
}

/*********************************************************
***********************************************************************
****************************************************************************************/
/*label div*/
.label{
	/*display: none;*/
	z-index: 1500;
	position: absolute;
	top:0%;
	left:0%;
	width:100%;
	height:100%;
	padding:10px;
	background: rgba(255,255,255,0.6);
	border-radius: 5px;
	color:black;
}

/*arrow images*/
.arrowImages{
	position: absolute;
	top:0%;
	left:0%;
	width:100%;
	height:100%;
	background:transparent;
}

.arrowImages > img:nth-of-type(1){
	position: absolute;
	top:40%;
	left:37%;
	width:5%;
}

.arrowImages > img:nth-of-type(2){
	position: absolute;
	top:50%;
	left:3%;
	width:6%;
}

.arrowImages > img:nth-of-type(3){
	position: absolute;
	top:57%;
	left:19%;
	width:5%;
}

.arrowImages > img:nth-of-type(4){
	position: absolute;
	top:50%;
	left:90%;
	width: 5.5%;
}

.arrowImages > img:nth-of-type(5){
	position: absolute;
	top:80%;
	left:82%;
	width: 5%;
}

/*labels*/
.label > p{
	position: absolute;
	bottom:61%;
	left:23%;
	width:40%;
	text-align: center;
	font-size: 1.4em;
	color:#F22783;	
}

.label > em{
	font-size: 1.3em;
	color:#F22783;
}

.label > em:nth-of-type(1){
	position: absolute;
	bottom:50%;
	left:5%;
}

.label > em:nth-of-type(2){
	position: absolute;
	bottom:41%;
	left:25%;
}

.label > em:nth-of-type(3){
	position: absolute;
	bottom:50%;
	left:85%;
}

.label > em:nth-of-type(4){
	position: absolute;
	bottom:20%;
	left:26%;
}

.samplePlayOn{
	/*display: none;*/
	position: absolute;
	left:85%;
	top:92%;
	color:#F2E2AF;
	text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
	font-size: 1.7em;
	z-index:-1;
}

/*rules div*/
.rules{
	position: absolute;
	top:62%;
	left:10%;
	width:80%;
	height:36%;
	padding:8%;
	font-size: 1.5em;
	background: rgba(0,0,0,0.6);
	border-radius: 10px;
	color:lime;
}

.label > b{
	position: absolute;
	bottom:61%;
	left:23%;
	width:80%;
	white-space: nowrap;
	font-size: 2em;
	color:black;
}
/*go to game*/
.gameOn{
	/*display: none;*/
	position: relative;
	top:10%;
	left:3%;
	text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
	font-size: 1.3em;
	cursor:pointer;
}

/*background*/
.untilHome{
	cursor:none;
	/*display: none;*/
	position: absolute;
	top:0%;
	left:0%;
	width: 100%;
	height: 60%;
	/*border:1px solid green;*/
}

/*sky*/
.sky{
	position: absolute;
	top:0%;
	left:0%;
	width:100%;
	height:90%;

	background: rgb(129,208,211); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(129,208,211,1) 0%, rgba(209,238,252,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(129,208,211,1)), color-stop(100%,rgba(209,238,252,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(129,208,211,1) 0%,rgba(209,238,252,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(129,208,211,1) 0%,rgba(209,238,252,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(129,208,211,1) 0%,rgba(209,238,252,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(129,208,211,1) 0%,rgba(209,238,252,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#81d0d3', endColorstr='#d1eefc',GradientType=0 ); /* IE6-9 */
}

/*sun*/
.sun{
	position: absolute;
	top:0%;
	left:85%;
	width:8%;

	background: -moz-radial-gradient(center, ellipse cover, rgba(243,160,38,1) 0%, rgba(243,160,38,0) 61%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(243,160,38,1)), color-stop(61%,rgba(243,160,38,0))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover, rgba(243,160,38,1) 0%,rgba(243,160,38,0) 61%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover, rgba(243,160,38,1) 0%,rgba(243,160,38,0) 61%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover, rgba(243,160,38,1) 0%,rgba(243,160,38,0) 61%); /* IE10+ */
	background: radial-gradient(ellipse at center, rgba(243,160,38,1) 0%,rgba(243,160,38,0) 61%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3a026', endColorstr='#00f3a026',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

/*clouds*/
.cloud1{
	position: absolute;
	top:10%;
	left:14%;
	width:13%;
}

.cloud2{
	position: absolute;
	top:25%;
	left:50%;
	width:3%;
}

.cloud3{
	position: absolute;
	top:10%;
	left:90%;
	width:10%;
}

.bush{
	position: absolute;
	bottom:0%;
	left:0%;
	width:130%;
	height:12%;
	background: url("http://gituploads.olenepal.org/epaath_media/activity/grade7/science/scwep01/exercise/images/bush.png") repeat-x;
	background-size: contain;
	/*border: 1px solid red;*/
}

/*main character*/
.mainChar{
	position: absolute;
	bottom:7%;
	left:30%;
	width:7%;
	height:25%;
	z-index: 30;
	/*border: 1px solid red;*/
}

.mainChar > img{
	position: absolute;
	bottom:4%;
	left:0%;
	width:100%;
	height:100%; 
	/*border: 1px solid red;*/

}

.mainChar > .walk{
	display: none;
}

.ground{
	z-index: 10;
	position: absolute;
	top:90%;
	left:0%;
	width:100%;
	height:10%;
	background: #A79958;
	-moz-box-shadow:0 1px 5px #A79958;
   -webkit-box-shadow:0 1px 5px #A79958;
   box-shadow:0 1px 5px #A79958;
}

.environment{
	position: absolute;
	bottom:10%;
	left:0%;
	width:100%;
	height:50%;
	/*border: 1px solid red;*/
}

.environment .objClass{
	position: absolute;
	left: 100%;
	bottom: 0;
}

/*div containing animations*/
.animEnvironment{
	position: absolute;
	bottom:10%;
	left:0%;
	width:100%;
	height:50%;
	/*border: 1px solid red;*/
}

.jumpboy{
	display: none;
	position:absolute;
	bottom:-4%;
	left:30%;
	width:7%;
}

/*home div for home scene*/
.home{
	cursor:none;
	position: absolute;
	top:0%;
	left:0%;
	width: 100%;
	height: 60%;
	display: none;
	/*border:1px solid green;*/
}

.studyroom{
	position: absolute;
	top:0%;
	left:0%;
	width:100%;
	height:90%;
	/*border:3px dotted red;*/
	-webkit-transition: left 1s linear 0.5s; /* For Safari 3.1 to 6.0 */
    transition: left 1s linear 0.5s;

}

.bathroom{
	position: absolute;
	top:0%;
	left:100%;
	width:100%;
	height:90%;
	/*border:3px dotted blue;*/
	-webkit-transition: left 1s linear 0.5s; /* For Safari 3.1 to 6.0 */
    transition: left 1s linear 0.5s;
}

/*floor*/
.floor{
	z-index: 10;
	position: absolute;
	top:90%;
	left:0%;
	width:100%;
	height:10%;
	background: #A93E24;
	-moz-box-shadow:0 1px 5px #A93E24;
   -webkit-box-shadow:0 1px 5px #A93E24;
   box-shadow:0 1px 5px #A93E24;
}

/*stones div*/
.stones{
	cursor:none;
	position: absolute;
	top:60%;
	left:0%;
	width:100%;
	height:40%;
	background: url("http://gituploads.olenepal.org/epaath_media/activity/grade7/science/scwep01/exercise/images/stone.png");

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

.textbox{
	cursor: default;
	position: absolute;
	top:5%;
	left:10%;
	width:80%;
	height:90%;
	padding:10px;
	background: rgba(0,0,0,0.8);
	border-radius: 10px;
	color:lime;
}

/*play on button inside text box*/
.playOn{
	display: none;
	position: absolute;
	left:97%;
	top:85%;
	color:#F2E2AF;
	text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
	font-size: 1.5em;
	cursor:pointer;
	z-index: 3000;
}

/*life div*/
.life{
	cursor:none;
	position: absolute;
	top:5%;
	left:2%;
	width:5%;
	height:90%;
	font-size: 1.3em;
	background:rgba(0, 255, 255,0.7);
	border-radius: 10px;
	color:#BE1623;

	/*use of css flex here - promising eh!*/
	display: flex;
	display: -webkit-flex;
	flex-flow: column wrap;
    -webkit-flex-flow: column wrap;
    justify-content: space-around;
    align-content: space-around;
    align-items: center;
}

/*energy div*/
.energy{
	cursor:none;
	position: absolute;
	top:5%;
	right:2%;
	width:5%;
	height:90%;
	font-size: 1.3em;
	background:black;
	border:0.4em solid #2A2A2A;
	border-radius: 10px;
	-moz-box-shadow:inset 0 0 2px rgba(255,255,255,0.5);
   -webkit-box-shadow:inset 0 0 2px rgba(255,255,255,0.5);
   box-shadow:inset 0 0 2px rgba(255,255,255,0.5);
}

.juice{
	cursor:none;
	position: absolute;
	bottom:0%;
	right:5%;
	width:90%;
	height:10%;
	background:rgba(255, 89, 0,0.85);
	border-radius: 2px;
	/*following transitions animate the changes when chaged even with js*/
	-webkit-transition: height 0.01s, background 0.01s; /* For Safari 3.1 to 6.0 */
    transition: height 0.01s, background 0.01s;
}

.juice:before{
	opacity:0.45;
	content: "";
	position: absolute;
	top:0%;
	left:0%;
	width:100%;
	height:100%;
	background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0.46) 34%, rgba(255,255,255,0) 63%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(34%,rgba(255,255,255,0.46)), color-stop(63%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0.46) 34%,rgba(255,255,255,0) 63%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0.46) 34%,rgba(255,255,255,0) 63%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0.46) 34%,rgba(255,255,255,0) 63%); /* IE10+ */
    background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0.46) 34%,rgba(255,255,255,0) 63%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}

/*conversation div*/
.conversation, .instruction, .qbank{
	position: absolute;
	top:6%;
	left:3%;
	width: 94%;
	height: 94%;
	font-size: 0.9em;
	/*background: red;*/
}

.conversation > p, .instruction > p{
	position: relative;
	display:none;
}

.instruction > p > span{
	font-size: 0.7em;
	color:lawngreen;
}

.conversation img{
	width:5%;
}


.conversation > p.person1 > span{
	margin-left:10px;
	padding:0.1% 1%;
	color:black;
	width: 50%;
	background:#F6F6F6;
	border:1px outset black;
	border-radius: 5px;
}

.conversation > p.person1 > span {
	margin : auto;
	width: 90%;
}

.conversation > p.person1 > span:before{
	content: "";
	position: absolute;
	left:-10px;
	top:3px;
	width:0;
	height:0;
	border-top: 1px outset transparent;
	border-right: 10px outset #F6F6F6;
	border-bottom: 8px outset transparent;
}

.conversation > p.person2 > span{
	margin-right:10px;
	min-width: 50%;
	padding:0.1% 1%;
	color:black;
	background:#B0E650;
	border:1px outset black;
	border-radius: 5px;
}

.conversation > p.person2 > span:after{
	content: "";
	position: absolute;
	right:-10px;
	top:3px;
	width:0;
	height:0;
	border-top: 1px outset transparent;
	border-left: 10px outset #B0E650;
	border-bottom: 8px outset transparent;
}

.conversation > p.person3 {
	position: absolute;
	margin-right:10px;
	width: 100%;
	padding:0.1% 1%;
	bottom: 20%;
	text-align: center;
	color:black;
	background:#fff;
	border:1px outset black;
	border-radius: 5px;
}

.conversation > p.person1{
	direction: ltr;
	text-align:left;
}

.conversation > p.person2{
	direction: rtl;
	text-align:right;
}

.questions{
	position: relative;
	top:0%;
	width: 100%;
	text-align: center;
	font-size: 1.2em;
	color:#0CDBE8;
}

.correctsign{
	font-size: 1.4em;
	padding:0% 2%;
	color:green;
}

.opt{
	position:relative;
	top:0%;
	left:0%;
	width:100%;
	height:40%;
	/*border: 1px solid red;*/
	/*use of css flex here - promising eh!*/
	display: flex;
	display: -webkit-flex;
	flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    justify-content: space-between;
    align-content: space-between;
    align-items: center;
}

.opt > img{
	width:20%;
	height: 100%;
	cursor:pointer;
}

.opt > p{
	width: 22%;
	padding:0.1% 0.5%;
  	color:black;
  	background:#F6F6F6;
  	border:1px double black;
  	border-radius: 5px;
  	text-align: center;
	font-size: 1.1em;
	cursor: pointer;
}

.explain{
	display: none;
	position: relative;
	top:0.1%;
	width:100%;
	text-align:center;
}

.gamefinaldiv{
	z-index: 1501;
	position: absolute;
	top:-100%;
	left:0%;
	width:100%;
	height:100%;

	-webkit-transition: top 1s linear 0.5s; /* For Safari 3.1 to 6.0 */
    transition: top 1s linear 0.5s;
}

.gamefinaldiv > img{
	position: absolute;
	top:0%;
	left:0%;
	width: 100%;
	height:100%;
}

/*energy div*/
.progress{
	cursor:none;
	position: absolute;
	top:5%;
	right:2%;
	width:5%;
	height:90%;
	font-size: 1.3em;
	background:black;
	border:0.4em solid #2A2A2A;
	border-radius: 10px;
	-moz-box-shadow:inset 0 0 2px rgba(255,255,255,0.5);
   -webkit-box-shadow:inset 0 0 2px rgba(255,255,255,0.5);
   box-shadow:inset 0 0 2px rgba(255,255,255,0.5);
}

.progressreport{
	cursor:none;
	position: absolute;
	bottom:0%;
	right:5%;
	width:90%;
	height:0%;
	background:rgba(255, 89, 0,0.85);
	border-radius: 2px;
	/*following transitions animate the changes when chaged even with js*/
	-webkit-transition: height 1.5s, background 1.5s; /* For Safari 3.1 to 6.0 */
    transition: height 1.5s, background 1.5s;
}

.progressreport:before{
	opacity:0.5;
	content: "";
	position: absolute;
	top:0%;
	left:0%;
	width:100%;
	height:100%;
	background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0.46) 34%, rgba(255,255,255,0) 63%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(34%,rgba(255,255,255,0.46)), color-stop(63%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0.46) 34%,rgba(255,255,255,0) 63%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0.46) 34%,rgba(255,255,255,0) 63%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0.46) 34%,rgba(255,255,255,0) 63%); /* IE10+ */
    background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0.46) 34%,rgba(255,255,255,0) 63%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}

.progresslabel{
	cursor:none;
	position: absolute;
	top:6%;
	right:8%;
	width:40%;
	height:86%;
	font-size: 1.3em;	
	/*border:1px solid red;*/
}

.progresslabel > div{
	position:relative;
	top:0%;
	left:95%;
	width:5%;
	height:33%;
	border-top:2px solid #2A2A2A;
	border-bottom:2px solid #2A2A2A;
	border-right:2px solid #2A2A2A;
	margin-top: 1%;
}

.progresslabel > div:nth-of-type(1){
	border-color: rgba(44, 98, 23,1);	
}

.progresslabel > div:nth-of-type(2){
	border-color: rgba(255, 81, 0,1);
}

.progresslabel > div:nth-of-type(3){
	border-color: rgba(255, 38, 56,1);
}


.progresslabel > em:nth-of-type(1){
	position: absolute;
	top:10%;
	right:2%;
	width: 70%;
	text-align: right;
	color: rgba(44, 98, 23,1);
	text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;

}

.progresslabel > em:nth-of-type(2){
	position: absolute;
	top:45%;
	right:2%;
	width: 70%;
	text-align: right;
	color: rgba(255, 81, 0,1);
	text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
}

.progresslabel > em:nth-of-type(3){
	position: absolute;
	top:75%;
	right:2%;
	width: 70%;
	text-align: right;
	color: rgba(255, 38, 56,1);
	text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
}

.yourreport{
	position: absolute;
	font-size: 1.3em;
	top:5%;
	left:3%;
	width: 70%;
	text-align: center;
	color: rgba(25, 158, 56,1);
	text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
}

/*************************
* scene objects from here
*************************/
#wheelbag{
	bottom:-2%;
	width:6%;
}

#tree{
	bottom:-5%;
	width:27%;
}

#tank {
	width: 20%;
	bottom: -35%;
	z-index: 100;
}

#cat {
	width: 10%;
}     

#pullKey {
	/*background: #000;*/
	z-index: 15;
	height:70%;
	left: 30%;
	top: 60%;
	width: 20%;
}

#house {
	cursor:pointer;
	position: absolute;
	width: 50%;
	/*top: 0%;*/
	z-index: 20;
	bottom: -10;
}