h1 { 
	letter-spacing: 1px; 
	margin-bottom: 0px; 
	color: black;
	text-align: center;
	}
h2 { 
	letter-spacing: 1px; 
	margin-bottom: 0px; 
	color: blue;
	text-align: center;
	}
.hsub { 
	letter-spacing: 1px; 
	margin-bottom: 0px; 
	color: green;
	text-align: center;
	}
h3 { 
	letter-spacing: 1px; 
	margin-bottom: 0px; 
	color: green;
	text-align: center;
	}
h4 { 
	letter-spacing: 1px; 
	margin-bottom: 0px; 
	color: black;
	text-align: left;
	}

a:link, a:visited, a:active { 
	text-decoration: none; 
	color: brown;
	}
a:hover { 
	text-decoration: underline; 
	color: #9685BA;
	}
a.email:link, a.email:visited, a.email:active { 
	text-decoration: none; 
	color: green;
	}
a.email:hover { 
	text-decoration: underline; 
	color: #9685BA;
	}
body { background: #eeeeff;
	font-size: 12pt;
	font-family: Verdana, Arial, Helvetica;
	color: black;
	}
.explanatorybox{
	position: absolute;
	height: 80%;
	width: 25%;
	top: 10%;
	left: 70%;
	border: 2px solid red;
	vertical-align: middle;
	text-align: left;
	overflow-y:scroll;
	font-size:10pt;
	background-color:#ffff66;
	padding:10px;
	}
.storybox{
	position: absolute;
	height: 120px;
	width: 30%;
	top: 60%;
	left: 35%;
	border: 2px solid blue;
	vertical-align: middle;
	text-align: center;
	background-color:#ffffcc;
	}
.leftpanebox{
	position: absolute;
	height: 500px;
	width: 30%;
	top: 10%;
	left: 3%;
	border: 2px solid blue;
	vertical-align: middle;
	text-align: center;
	background-color:#ffffcc;
	}
.picturebox{
	position: absolute;
	width: 20%;
	top: 10%;
	left: 40%;
	border: none;
	vertical-align: middle;
	text-align: center;
	}
.tooltip {
  position:relative; /* making the .tooltip span a container for the tooltip text */
  border-bottom:1px dashed #000; /* little indicater to indicate it's hoverable */
}
.tooltip:before {
  content: attr(data-text); /* here's the magic */
  position:absolute;
  
  /* vertically center */
  top:50%;
  transform:translateY(-50%);
  
  /* move to right */
  left:100%;
  margin-left:15px; /* and add a small left margin */
  
  /* basic styles */
  width:200px;
  padding:10px;
  border-radius:10px;
  background:#000;
  color: #fff;
  text-align:center;

  display:none; /* hide by default */
}
.tooltip:hover:before {
  display:block;
}