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

	top:0%;
	left:0%;

	margin:0;
	padding:0;	

	overflow: hidden;

	/*change only this*/

}

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

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

/*powerPlant image*/
#powerPlant{
	position: absolute;
	top:0%;
	left:10%;

	width:80%;
}

/*moreInfo for the powerPlant*/
#moreInfo{
	position: absolute;
	top:12%;
	left:10%;

	width: 80%;
	height: 76%;


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

/*parts of the nuclear chamber*/
#moreInfo > div{
	/*for all the div in the moreInfo change the cursor as help*/ 
	/*cursor:help; */
}

#moreInfo > div > p{
	color:whitesmoke; /*for all the para in the div in the moreInfo change the cursor as help*/ 
	font-size:1.3em;
}

#reactorChamber{
	position: absolute;
	top:43%;
	left:2.5%;

	width:17%;
	height: 55%;

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

#reactorChamber > p{
	position: absolute;
	top:40%;
	left:-65%;

	/*white-space: nowrap;*/
	
    transform: rotate(270deg) ;
    -webkit-transform: rotate(270deg) ;
}

#condensor{
	position: absolute;
	top:46%;
	left:28%;

	width:13%;
	height: 52%;

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

#condensor > p{
	position: absolute;
	top:100%;
	width: 100%;
	text-align: center;

	white-space: nowrap; /*keep this important*/
}

#turbine{
	position: absolute;
	top:5%;
	left:2%;

	width:26%;
	height: 15%;

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

#turbine > p{
	position: absolute;
	top:100%;
	width: 100%;
	text-align: center;

	white-space: nowrap; /*keep this important*/
}

#generator{
	position: absolute;
	top:2%;
	left:35%;

	width:13%;
	height: 22%;
	
	/*border: 1px solid red;*/
}

#generator > p{
	position: absolute;
	top:100%;
	width: 100%;
	text-align: center;

	white-space: nowrap; /*keep this important*/
}

#transformer{
	position: absolute;
	top:2%;
	left:59%;

	width:14%;
	height: 22%;
	
	/*border: 1px solid red;*/
}

#transformer > p{
	position: absolute;
	top:100%;
	left:50%;

	white-space: nowrap; /*keep this important*/
}

/* 
window image window1=topLeft, window2=topRight, window3=bottomLeft, window4=bottomRight
#window1, #window2, #window3, #window4{
	display: none;
	position:absolute;
	top:57.6%;
	left:68.8%;

	width:5.5%;
}

#window2{
	left:79.3%;
}

#window3{
	top:68.7%;
}

#window4{
	top:68.7%;
	left:79.3%;
}
 */

/*notify div*/
#notify{
	/*display: none;*/

	cursor:pointer;

	position: absolute;
	top:79%;
	left:11.2%;

	width: 15%;
	height:10%;

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

/*nuclear fission div*/
#nuclearFission{
	display: none;
	position:absolute;
	top:25%;
	left:10%;
	width: 60%;
	height:40%;

	border: 2px solid black;

	background-color: yellow;
}

/*all neutrons*/
#neutron, #splitNeutronTop, #splitNeutronBottom{
	position: absolute;
	top:44%;
	left:0%;

	width:3%;
	height:7%;
	
	border-radius: 50%;
	background-color: black;
}

#splitNeutronTop, #splitNeutronBottom{
	/*override position for the split neutron*/
	display: none;
	top:44%;
	left:33.5%;
}

/*all atoms*/
#mainAtom, #splitAtomTop, #splitAtomBottom{
	position: absolute;
	top:35%;
	left:30%;

	width:10%;
	height:23%;
	
	border-radius: 50%;
	background-color: #ED1F24;
	border:0.05em solid black;
}

 #splitAtomTop, #splitAtomBottom{
	/*override size and position for the split atoms*/
	display: none;

	width:5%;
	height:11.5%;

	top:33%;
	left:34%;
} 

#splitAtomBottom{
	/*override its top position*/
	top:50%;
}

/*for all labels of atom and neutron*/
#neutron > p, #mainAtom > p{
	display: none;
	position: absolute;
	top:100%;
	left:30%;
}

/*energy image*/
#energyShow{
	display: none;
	position:absolute;
	top:25%;
	left:40%;

	width:25%;
	height: 55%;

	/*border:1px solid;*/
}

#energyPic{
	position: absolute;
	top:0%;
	left:0%;

	width:100%;
}

#energyShow > p{
	position: absolute;
	top:32%;
	left:25%;
}

/*info1 pointer*/
#pointInfo1{
	position: absolute;
	top:67%;
	left:20%;
	width: 4%;

	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
}
	
/*information*/
#info1,#info2{
	display: none;
	position: absolute;
	top:74%;

	width:100%;
	text-align: center;

	font-size: 1.3em;

	color:darkblue;
}

/*override top position*/
#info2{
	top:2%;
}

/*facts on atomic energy*/
.facts{
	position: absolute;
	top:20%;
	left:98%;

	width: 25%;
	text-align: center;

	padding:0.2% 1%;

	border:0.1em solid rgba(0,0,0,0.5);

	background-color: rgba(255,244,32,0.7);

	-webkit-transition:left 1s ease-out 0s; /* For Safari 3.1 to 6.0 */
	transition:left 1s ease-out 0s;	
}

.facts:before{
	content:"?";
	position: absolute;
	top:-75%;
	left:-15%;

	font-size: 4em;
	
	color:darkred;
	text-shadow:0px 4px 4px black;

	font-weight: bolder;
	
}

.facts:hover{
	left:75%;
}

/*caution div*/
#caution{
	display: none;
	position: absolute;
	top:81%;
	left:11%;

	width: 78%;
	height: 20%;

}


#caution > img{
	position: absolute;

	top:7%;
	left:1%;
	
	width:6%;
}

#caution > p{
	position: absolute;

	top:0%;	
	
	width:100%;
	text-align: center;
	padding:0.2% 1 0.2% 5%;

	border:0.1em solid rgba(0,0,0,0.5);

	background-color: rgba(255,255,21,0.9);

	font-style: italic;

	font-size: 1.1em;
}

/*atomic energy*/
#atomicEnergy{
	/*display: none;*/
	position:absolute;
	top:93%;
	left:0%;
	
	/*width 100% and align center for making the text at center of screen*/
	width:100%;
	text-align: center;

	font-size: 1.7em;

	color:rgb(2,66,83);

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