Class Page

<style>
table, .sf {
	display: none;
}
.page table {
	display: table;
}
body {
	background-image: url("http://i.imgur.com/JY5o1SB.png");
}
#layout {
	width: 800px;
	height: 800px;
	margin: 0 auto;
	background-image: url("http://i.imgur.com/kPNQczn.png");
}
#main {
	font: 9pt tahoma;
	color: #000000;
	top: 320px;
	left: 170px;
	width: 520px;
	height: 380px;
	overflow: hidden;
}
.page {
	height: 380px;
	overflow: auto;
}
#nav {
	top: 200px;
	left: -200px;
	width: 190px;
	height: 600px;
	overflow: hidden;
	text-align: center;
}
.table {
	display: inline;
	text-align: left;
}
td {
	padding: 5px;
	font: 8pt tahoma;
	color: #000000;
}
h1 {
	font: 10pt tahoma;
	color: #6e5674;
	border-width: 1px;
	border-bottom-style: solid;
	border-color: #a2aeba;
	letter-spacing: 2px;
	line-height: 20px;
}
h2 {
	font: 10pt tahoma;
	color: #6e5674;
	text-align: center;
	background-color: #dffbe7;
	letter-spacing: 2px;
	line-height: 18px;
}
h2:hover {
	font: 10pt tahoma;
	color: #dffbe7;
	text-align: center;
	background-color: #6e5674;
	letter-spacing: 2px;
	line-height: 18px;
}
h3 {
	font: 10pt tahoma;
	color: #a2aeba;
	border-width: 1px;
	border-bottom-style: solid;
	border-color: #6e5674;
	letter-spacing: 2px;
	line-height: 18px;
}
h4 {
	font: 10pt tahoma;
	color: #f5ebe3;
	border-width: 1px;
	border-bottom-style: solid;
	border-color: #6e5674;
	letter-spacing: 2px;
	line-height: 18px;
}
b {
	color: #a787a1;
	font: 9pt tahoma;
	font-weight: bold;
	line-height: 14px;
}
i {
	color: #6e5674;
	font: 9pt tahoma;
	font-style: italic;
	line-height: 14px;
}
a:link, a:visited, a:active {
	color: #94aba6;
	font: 10pt tahoma;
	text-decoration: none;
}
a:hover {
	color: #6e5674;
	font: 10pt tahoma;
	text-decoration: none;
}
.column {
	display: inline-block;
	width: 130px;
	padding: 5px;
}
</style><br><br><br><div id="layout" style="position: relative;">


<div id="nav" style="position: absolute;">
<h4>Navigation</h4>
<a href="#home" class="nav"><h2>Home</h2></a>
<a href="#common" class="nav"><h2>Common Room</h2></a>
<a href="#alchemy" class="nav"><h2>Alchemy</h2></a>
<a href="#astronomy" class="nav"><h2>Astronomy</h2></a>
<a href="#comc" class="nav"><h2>COMC</h2></a>
<a href="#charms" class="nav"><h2>Charms</h2></a>
<a href="#dada" class="nav"><h2>DADA</h2></a>
<a href="#ghoul" class="nav"><h2>Ghoul Studies</h2></a>
<a href="#herbology" class="nav"><h2>Herbology</h2></a>
<a href="#muggle" class="nav"><h2>Muggle Studies</h2></a>
<a href="#potions" class="nav"><h2>Potions</h2></a>
<a href="#transfiguration" class="nav"><h2>Transfiguration</h2></a>
<a href="#dueling" class="nav"><h2>Dueling Club</h2></a>
<a href="#gourmet" class="nav"><h2>Gourmet Food Club</h2></a>
<a href="#hermione" class="nav"><h2>Hermione's Study</h2></a>
<a href="#slughorn" class="nav"><h2>Slughorn's Upkeep</h2></a>
<a href="#travel" class="nav"><h2>Travel Club</h2></a>
<a href="#news" class="nav"><h2>Witch Bi-Weekly</h2></a>
<a href="#yearbook" class="nav"><h2>Yearbook</h2></a>
</div>


<div id="main" style="position: absolute;">
<a name="home"></a>
<div class="page">
<center>
<a href="/~projectstar"><img src="http://i.imgur.com/pfUC2Uy.png"></a>
<br><table width="100%"><tr align="center"><td width="33%">
<img src="http://i.imgur.com/I0zBm6P.png"><br>
Dogwood Wand with Unicorn Tail Hair Core
</td>
<td width="33%">
<img src="http://imgur.com/JFH2pjD.png"><br>
Animagus<br>Bat Eared Fox
</td>
<td width="33%">
<img src="http://i.imgur.com/kUdeaDP.png"><br>
Patronus<br>Niffler
</td>
</tr></table></center>
</div>


<a name="common"></a>
<div class="page">
<h1>Common Room</h1>
-
</div>


<a name="alchemy"></a>
<div class="page">
<h1>Alchemy</h1>
-
</div>


<a name="astronomy"></a>
<div class="page">
<h1>Astronomy</h1>
-
</div>


<a name="comc"></a>
<div class="page">
<h1>Care of Magical Creatures</h1>
-
</div>


<a name="charms"></a>
<div class="page">
<h1>Charms</h1>
-
</div>


<a name="dada"></a>
<div class="page">
<h1>Defense Against the Dark Arts</h1>
-
</div>


<a name="ghoul"></a>
<div class="page">
<h1>Ghoul Studies</h1>
-
</div>


<a name="herbology"></a>
<div class="page">
<h1>Herbology</h1>
-
</div>


<a name="muggle"></a>
<div class="page">
<h1>Muggle Studies</h1>
-
</div>


<a name="potions"></a>
<div class="page">
<h1>Potions</h1>
-
</div>


<a name="transfiguration"></a>
<div class="page">
<h1>Transfiguration</h1>
-
</div>


<a name="dueling"></a>
<div class="page">
<h1>Dueling Club</h1>
-
</div>


<a name="gourmet"></a>
<div class="page">
<h1>Gourmet Food Club</h1>
-
</div>


<a name="hermione"></a>
<div class="page">
<h1>Hermione's Study Group</h1>
-
</div>


<a name="slughorn"></a>
<div class="page">
<h1>Slughorn's Upkeep Club</h1>
-
</div>


<a name="travel"></a>
<div class="page">
<h1>Travel Club</h1>
-
</div>


<a name="news"></a>
<div class="page">
<h1>Witch Bi-Weekly</h1>
-
</div>


<a name="yearbook"></a>
<div class="page">
<h1>Yearbook Submissions</h1>
-
</div>



</div></div>