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

	top:0%;
	left:0%;	

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

	overflow: hidden;
	
	/*change only this*/
	background-image: url("http://gituploads.olenepal.org/epaath_media/activity/grade7/science/sci_cell_01/page1/image/bg.png");
}

/*for all elements make sure that it does not inherit margin and padding*/
#cell1 *{
	margin:0;
	padding:0;	
}
/*------------------------------------------------------------------------------------------*/

/*for all p tag inside these common property*/
#cell1 p{
	font-size: 1.4em;
	color:darkblue;
}

/*environ div*/
#environ{
	position: absolute;
	top:0%;
	left:0%;
	width:100%;
	height: 100%;	
}

/*environment image without man*/
#env{
	position: absolute;
	top:0%;
	left:0%;
	width:100%;
}

/*man outline*/
#man{
	position: absolute;
	top:51%;
	left:49.5%;
	width:9%;
	height:50%;
	cursor: pointer;
}

#manCell{
	display: none;
	position: absolute;
	top:42%;
	left:48%;
	width:5%;
	height:8%;

	border:0.2em solid red;
	border-radius: 50%;
}

/*cell image collection div*/
#cellScatter{
	display: none;
	position: absolute;
	top:0%;
	left:0%;
	width: 100%;
	height: 100%;

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

#cellScatter > img:nth-of-type(1){
	position: absolute;
	top:5%;
	left:0%;
	width:25%;
}

#cellScatter > img:nth-of-type(2){
	position: absolute;
	top:10%;
	left:75%;
	width:25%;
	
	-webkit-transform:rotate(180deg);
	transform:rotate(180deg);
	
}

#cellScatter > img:nth-of-type(3){
	position: absolute;
	top:65%;
	left:0%;
	width:20%;
	
	-webkit-transform:rotate(270deg);
	transform:rotate(270deg);
	
}

#cellScatter > img:nth-of-type(4){
	position: absolute;
	top:65%;
	left:75%;
	width:20%;
	
	-webkit-transform:rotate(50deg);
	transform:rotate(50deg);
	
}

#animalCell{
	position: absolute;
	top:20%;
	left:20%;
	width:60%;
	height:80%;
	/*border:1px solid red;*/
}

#animateCell{
	position: absolute;
	top:0%;
	left:2%;
	width:88%;

	transform:scale(0);
	-webkit-transform:scale(0);
	cursor: pointer;
}

#cellBody{
	display: none;
	position: absolute;
	top:0%;
	left:0%;
	width:100%;
}

/*cell wall*/
#wall{
	/*to make it uneffected by mouse event till needed when needed show*/
	display: none;
	position: absolute;
	top:0%;
	left:-2%;
	width:95%;
	height: 90%;
	/*border: 1px solid green;*/
	border-radius: 50%;
	transform: rotate(-30deg);
	-webkit-transform: rotate(-30deg);
	cursor:pointer;
}



#cytoplasm{
	/*to make it uneffected by mouse event till needed when needed show*/
	display: none;
	position: absolute;
	top:5%;
	left:3%;
	width:85%;
	height: 80%;
	/*border: 1px solid red;*/
	border-radius: 50%;
	transform: rotate(-30deg);
	-webkit-transform: rotate(-30deg);
	cursor:pointer;
}

#nucleus{
	/*to make it uneffected by mouse event till needed when needed show*/
	display: none;
	position: absolute;
	top:17%;
	left:64%;
	width:21%;
	height: 30%;
	/*border: 1px solid blue;*/
	border-radius: 50%;
	cursor:pointer;	
}

/*labels for cell*/
/*cell wall */
#animalCell > p:nth-of-type(1){
	display: none;
	position: absolute;
	top:4%;
	left:-7%;
}

/*cytoplasm*/
#animalCell > p:nth-of-type(2){
	display: none;
	position: absolute;
	top:70%;
	left:102%;
}

/*nucleus*/
#animalCell > p:nth-of-type(3){
	display: none;
	position: absolute;
	top:25%;
	left:102%;
}

/*cell description*/
#cellDesc{
	display: none;
	position: absolute;
	top:94%;
	width: 100%;
	text-align: center;
	color: brown !important;
	/*border: 1px solid red;*/
}

/*cell1 instruction para*/
#cell1instr{
	position: absolute;
	top:5%;
	width:100%;
	padding:0% 2%;
	text-align: center;
	font-weight: bolder;
}