Wizarding Jobs Layout

<style>
table {
	display: none;
}
.page table {
	display: table;
}
body {
	background-image: url("http://i.imgur.com/Qp1VKJm.png");
}
#layout {
	width: 800px;
	height: 600px;
	margin: 0 auto;
	background-image: url("http://i.imgur.com/YDM0I2b.png");
}
#main {
	font: 10pt tahoma;
	color: #000000;
	top: 165px;
	left: 75px;
	width: 660px;
	height: 395px;
	overflow: hidden;
}
.page {
	height: 395px;
	overflow: auto;
}
.table {
	display: inline;
	text-align: left;
}
td {
	padding: 10px;
}
h1 {
	font: 11pt tahoma;
	color: #70533e;
	text-align: center;
	border-width: 1px;
	border-bottom-style: solid;
	border-color: #b98b60;
	letter-spacing: 4px;
	line-height: 20px;
}
h2 {
	font: 10pt tahoma;
	color: #b98b60;
	border-width: 1px;
	border-bottom-style: solid;
	border-color: #70533e;
	letter-spacing: 2px;
	line-height: 20px;
}
b {
	color: #c2a991;
	font: 10pt tahoma;
	font-weight: bold;
	line-height: 14px;
}
i {
	color: #70533e;
	font: 10pt tahoma;
	font-style: italic;
	line-height: 14px;
}
a:link, a:visited, a:active {
	color: #b98b60;
	font: 10pt tahoma;
	text-decoration: none;
}
a:hover {
	color: #70533e;
	font: 10pt tahoma;
	text-decoration: none;
}
.column {
	display: inline-block;
	width: 100px;
	padding: 5px;
}
.magizoologists {
	display: block;
	width: 100px;
	height: 100px;
	background-color: transparent;
	background-image: url("http://i.imgur.com/PafMk6b.png");
	background-repeat: no-repeat;
	background-position: top left;
}
.magizoologists:hover {
	display: block;
	width: 100px;
	height: 100px;
	background-color: transparent;
	background-image: url("http://i.imgur.com/hS61B4e.png");
	background-repeat: no-repeat;
	background-position: bottom left;
}
.potionsmaker {
	display: block;
	width: 100px;
	height: 100px;
	background-color: transparent;
	background-image: url("http://i.imgur.com/VSZ8jbA.png");
	background-repeat: no-repeat;
	background-position: top left;
}
.potionsmaker:hover {
	display: block;
	width: 100px;
	height: 100px;
	background-color: transparent;
	background-image: url("http://i.imgur.com/BSa48Z0.png");
	background-repeat: no-repeat;
	background-position: bottom left;
}
.proquidditchplayer {
	display: block;
	width: 100px;
	height: 100px;
	background-color: transparent;
	background-image: url("http://i.imgur.com/Emy28Cq.png");
	background-repeat: no-repeat;
	background-position: top left;
}
.proquidditchplayer:hover {
	display: block;
	width: 100px;
	height: 100px;
	background-color: transparent;
	background-image: url("http://i.imgur.com/Q5ENlGj.png");
	background-repeat: no-repeat;
	background-position: bottom left;
}
.wandmaker {
	display: block;
	width: 100px;
	height: 100px;
	background-color: transparent;
	background-image: url("http://i.imgur.com/vbjCaI1.png");
	background-repeat: no-repeat;
	background-position: top left;
}
.wandmaker:hover {
	display: block;
	width: 100px;
	height: 100px;
	background-color: transparent;
	background-image: url("http://i.imgur.com/mdw3wXE.png");
	background-repeat: no-repeat;
	background-position: bottom left;
}
.returnhome {
	display: block;
	width: 100px;
	height: 100px;
	background-color: transparent;
	background-image: url("http://i.imgur.com/2b8hgan.png");
	background-repeat: no-repeat;
	background-position: top left;
}
.returnhome:hover {
	display: block;
	width: 100px;
	height: 100px;
	background-color: transparent;
	background-image: url("http://i.imgur.com/OLBp3Uv.png");
	background-repeat: no-repeat;
	background-position: bottom left;
}
</style><br><br><br><div id="layout" style="position: relative;">


<div id="main" style="position: absolute;">
<a name="home"></a>
<div class="page">
<h1>Welcome!</h1>
<b>bold</b> <i>italic</i> <a href="/~">link</a>

<br><br><center>
<div class="column">
<a href="#magizoologist" class="magizoologists"></a>
</div>

<div class="column">
<a href="#potions" class="potionsmaker"></a>
</div>

<div class="column">
<a href="#quidditch" class="proquidditchplayer"></a>
</div>

<div class="column">
<a href="#wand" class="wandmaker"></a>
</div>
</center>
</div>




<a name="magizoologist"></a>
<div class="page">
<h1>Magizoologist</h1>
text goes here

<br><br><br><center>
<div class="column">
<a href="#home" class="returnhome"></a>

</div>
</center></div>




<a name="potions"></a>
<div class="page">
<h1>Potions Maker</h1>
text goes here

<br><br><br><center>
<div class="column">
<a href="#home" class="returnhome"></a>

</div>
</center></div>




<a name="quidditch"></a>
<div class="page">
<h1>Professional Quidditch Player</h1>
text goes here

<br><br><br><center>
<div class="column">
<a href="#home" class="returnhome"></a>

</div>
</center></div>




<a name="wand"></a>
<div class="page">
<h1>Wand Maker</h1>
text goes here

<br><br><br><center>
<div class="column">
<a href="#home" class="returnhome"></a>

</div>
</center></div>

</div></div>