/*keep this same for all*/
/*the main div container parallel to and above mainBox div*/
#cell9
{
	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/page9/image/bg.png");
}

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

/*------------------------------------------------------------------------------------------*/
#features > em {
  -webkit-animation-duration: 5s;
  -moz-animation-duration: 5s;
  animation-duration: 5s;

  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  animation-delay: 0s;
}

#heading, #explain, #instruction{
	-webkit-animation-duration: 5s;
  	-moz-animation-duration: 5s;
   	animation-duration: 5s;
}

#explain, #instruction{	
   	-webkit-animation-delay: 2s;
  	-moz-animation-delay: 2s;
   	animation-delay: 2s;
}
/*------------------------------------------------------------------------------------------*/
/*main part*/
#mainPart{
	position: absolute;
	top:0%;
	left:0%;
	width:100%;
	height: 100%;
	/*border:1px solid blue;*/
}

#heading{
	display: none;
	position: absolute;
	top:4%;
	left:0%;
	width:100%;
	padding: 0% 1%;
	text-align: center;
	font-size: 1.3em;
	color: rgb(10,130,190);
	text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4);
}

#amoeba{
	display: none;
	position: absolute;
	top:15%;
	left:0%;
	width:100%;
	height:50%;
	/*border:1px solid red;*/
}

#amoeba > img{
	position: absolute;
	top:0%;
	left:31%;
	width:37%;
}

/*amoeba labels*/
#amoeba > em{
	position: absolute;
	font-size:1.2em;
	color:black;
}

/*first two labels*/
#amoeba > em:nth-of-type(-n+2){
	top:27%;
	/*since this text should grow on its left define right*/
	right:69%;
}

#amoeba > em:nth-of-type(2){
	top:67%;
}

/*third label*/
#amoeba > em:nth-of-type(3){
	top:87%;
	/*since this text should grow on its right define left*/
	left:54%;
}

/*last three labels*/
#amoeba > em:nth-of-type(n+4){
	top:10%;
	/*since this text should grow on its right define left*/
	left:68%;
}

#amoeba > em:nth-of-type(5){
	top:25%;
}

#amoeba > em:nth-of-type(6){
	top:50%;
}

/*explaination*/
#explain{
	display: none;
	position: absolute;
	top:72%;
	left:0%;
	width:100%;
	padding: 0% 1%;
	text-align: center;
	font-size: 1.3em;
	color: rgb(10,130,130);
	text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4);
}

#instr{
	display: none;
	position: absolute;
	top:85%;
	left:0%;
	width:100%;
	padding: 0% 1%;
	text-align: center;
	font-size: 1.3em;
	color: rgb(180,10,130);
	text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4);
}

#features{
	visibility: hidden;
	position: absolute;
	bottom:0%;
	width:100%;	
	/*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;
}

#features > em{
	position: relative;
	cursor: pointer;
	padding:1% 2% ;
	color:yellow;
	font-size: 1.2em;
	font-weight: bold;
	background-color: #24B8B9;

	border-radius:10% 10% 0 0;
	border:0em solid rgba(0,0,0,0.5);
	
	-moz-box-shadow:inset 0 0 0.5em rgba(0,0,0,0.6);
   	-webkit-box-shadow:inset 0 0 0.5em rgba(0,0,0,0.6);
   	box-shadow:inset 0 0 0.5em rgba(0,0,0,0.6);

   	-webkit-transition:border-radius 0.5s, border 0.5s; /* For Safari 3.1 to 6.0 */
    transition: border-radius 0.5s, border 0.5s;
}

#features > em:hover{
	border:0.3em solid rgba(0,0,0,0.5);
	border-radius: 2%;
	color:white;
}

/*explain class here*/
.explain{
	display: none;
	position: absolute;
	top:13%;
	left:20%;
	width:60%;
	height:80%;
	border-radius: 2%;
	background-color: rgba(255,255,230,0.5);
	-moz-box-shadow:inset 0 0 0.5em rgba(255,25,255,0.4);
   	-webkit-box-shadow:inset 0 0 0.5em rgba(255,25,255,0.4);
   	box-shadow:inset 0 0 0.5em rgba(255,25,255,0.4);
	border:0.1em solid red;
}

.explain > b{
	position: absolute;
	top:1%;
	left:15%;
	width: 70%;
	text-align: center;
	font-size: 1.3em;
	color: rgb(90,10,150);
	-webkit-box-shadow:0 0.4em 0.3em -0.2em rgba(0,0,0,0.5);
	   -moz-box-shadow:0 0.4em 0.3em -0.2em rgba(0,0,0,0.5);
	        box-shadow:0 0.4em 0.3em -0.2em rgba(0,0,0,0.5);
}

.explain > img{
	position: absolute;
	top:15%;
	left:30%;
	width:40%;
}

/*replay gif button*/
.explain > span:nth-of-type(1){
	position: absolute;
	top:55%;
	right:15%;
	color:black;
	font-size: 1.8em;
	cursor:pointer;
	text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
}

/*close button*/
.explain > span:nth-of-type(2){
	position: absolute;
	top:3%;
	right:1%;
	color:darkred;
	font-size: 2em;
	cursor:pointer;
	text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
}

/*do not show the reload gif button for habitat movement and respiration not required*/
#habitat > span:nth-of-type(1), #movement > span:nth-of-type(1), #respiration > span:nth-of-type(1){
	display: none;
}

/*list for example*/
.explain > ul{
	position: absolute;
	top:65%;
	left:5%;
	width:90%;
	text-align: justify;
	font-size: 1.2em;
	list-style-type: disc;
	list-style-position: outside;
}

.explain > ul > li:nth-of-type(odd){
	color:rgb(10,150,150);
}

.explain > ul > li:nth-of-type(even){
	color:rgb(10,150,10);
}