Filing Page Plot Layout

<style>
body {
	margin-top: -14px;
	color: #cccccc;
	line-height: 200%;
	font-family: verdana;
	font-size: 13px;
background: #494949;
}
.sf {
	display: none;
}
#box {
	width: 450px;
	height: 500px;
	left: 50%;
	margin-left: 300px;
	top: 50%;
	margin-top: -250px;
}
#nav {
	float: right;
	height: 500px;
	width: 200px;
}
#nav a {
	background: url("http://i.imgur.com/klDc1C6.png");
	width: 450px;
	text-indent: 10px;
	line-height: 50px;
	display: block;
	color: #bbbbbb;
	text-decoration: none;
	height: 50px;
	letter-spacing: -1px;
}
#nav a:hover {
	text-indent: 25px;
	width: 215px;
}
.anchor {
	width: 450px;
	height: 500px;
	background: url("http://i.imgur.com/klDc1C6.png");
	padding: 0;
	float: left;
}
.screen {
	margin: 25px 5px 25px 25px;
	overflow: hidden;
	height: 450px;
}
.text {
	overflow: auto;
	height: 650px;
	padding-right: 10px;
}
p {
	text-indent: 25px;
}
h1 {
	color: #93828E;
	border-left: 100px solid #93828E;
	border-right: 100px solid #93828E;
	text-align: center;
	font-family: georgia;
	line-height: 5px;
	font-size: 22px;
	font-weight: normal;
	margin-bottom: 30px;
	margin-top: 40px;
	font-variant: small-caps;
	letter-spacing: 4px;
}
h2 {
	font-size: 16px;
	font-family: georgia;
	font-weight: normal;
	letter-spacing: 5px;
	color: #6B5C66;
	line-height: 3px;
	border-right: #6B5C66 200px solid;
	border-left: #6B5C66 50px solid;
	text-align: center;
	margin-top: 40px;
	margin-bottom: 20px;
}
a {
	color: #96A5BE;
}
a:hover {
	color: #93828E;
}
b {
	color: #687C8B;
}
i {
	color: #6B5C66;
}
.section {
	border-left: 5px solid #6B5C66;
	background: url("http://i.imgur.com/owjPpcZ.png");
	margin: 10px;
	padding: 15px;
	line-height: 175%;
}
.space {
	background: url("http://i.imgur.com/klDc1C6.png");
	height: 25px;
}
</style>

<img src="https://imgur.com/EoFNqPJ.jpg" usemap="#image-map">

<map name="image-map">
    <area target="" alt="Pull this box out from under the others" title="Pull this box out from under the others" href="#firstbox" coords="165,277,173,334,253,328,253,271" shape="poly">
    <area target="" alt="Ruffle through these pages" title="Ruffle through these pages" href="#secondbox" coords="443,400,378,475,432,511,491,449" shape="poly">
    <area target="" alt="Peek inside this box" title="Peek inside this box" href="#thirdbox" coords="731,279,729,314,755,311,757,279" shape="poly">
    <area target="" alt="Pick these papers up off of the ground" title="Pick these papers up off of the ground" href="#papers" coords="105,515,113,588,182,616,252,592,209,508,172,471,141,490" shape="poly">
    <area target="" alt="Take these boxes down" title="Take these boxes down" href="#fourthbox" coords="379,130,429,149,429,237,402,242,374,225" shape="poly">
</map>


<div id="box" style="position: fixed;">
<div class="anchor"><div class="screen">

<div class="text" id="main">

You made it into the filing room of Azkaban. Dear lord... it is atrocious in here! You think silently to yourself that it must just be a place where everything is thrown - clearly no filing has ever been done!<br><br>
<center><i>Click around on the boxes and papers to look for anything useful.</i></center>

</div>

<div class="text" id="firstbox">

This is just a stack of payroll papers. Who even gets paid here? Do the Dementors get paid? Hmm. Either way, this isn’t useful.


</div>


<div class="text" id="secondbox">

Here’s a stack of old Wanted posters. Woah - Sirius Black’s is here and so is Harry Potter’s wanted poster! You don’t want to draw attention to anything missing, so you can only take one. Choose wisely!<br><br><center><a href="/neomessages.phtml?type=send&recipient=pvaaux&subject=Sirius+Wanted+Poster"><img src="https://imgur.com/4B8e1dZ.png"></a><a href="/neomessages.phtml?type=send&recipient=pvaaux&subject=Harry+Wanted+Poster"><img src="https://imgur.com/zzhkzF5.png"></a>


</div>


<div class="text" id="thirdbox">

You found a stack of Birth Certificate copies. This is not going to be helpful to you.



</div>

<div class="text" id="papers">

You seem to be getting closer. Here’s a list of convictions dates.



</div>

<div class="text" id="fourthbox">

Here it is… the file of all the known information about each prisoner and their modus operandi. You have found the last known hideout of Bodach. You decide to take this file with you just in case you need it later. Head to <a href="/~Xurplip">Bodach’s hideout.</a>



</div>






<div class="space"></div></div></div></div></div>