Mirror of Erised

<style>
table {
	background-color: transparent;
}
td a img {
	display: none;
}
.sf {
	display: none;
}
body {
	background: #DCDCDC;
	overflow: hidden;
	font: 8pt arial;
}
#main {
	top: 90px;
	left: 0px;
	background: url("http://i.imgur.com/WPTbSSW.png") no-repeat top center;
	width: 100%;
	height: 474px;
	overflow: hidden;
}
.box {
	top: 130px;
	width: 286px;
	height: 288px;
	overflow: auto;
	text-align: justify;
	padding: 10px;
	display: inline-block;
	margin-right: 140px;
}
.mirror {
	margin-right: 35px;
	top: 130px;
	width: 105px;
	height: 196px;
	overflow: hidden;
	padding: 10px;
	display: inline-block;
}
.anchor {
	width: 105px;
	height: 196px;
	overflow: auto;
	text-align: center;
	margin-bottom: 20px;
}
.anchor a {
	text-align: left;
	display: block;
	margin-top: 10px;
}
.anchor img {
	width: 50px;
	height: 50px;
}
h1 {
	font-weight: normal;
	font: bold 9pt Arial;
	text-transform: uppercase;
	color: #D5AB79;
	letter-spacing: 4px;
}
b {
	color: #6A482F;
	font: bold 9pt tahoma;
	line-height: 14px;
}
i {
	color: #8B7359;
	font: 9pt tahoma;
	font-style: italic;
	line-height: 14px;
}
a:link, a:visited, a:active {
	color: #6A482F;
	font: 9pt tahoma;
	text-decoration: none;
}
a:hover {
	color: #B8B8B8;
	font: 9pt tahoma;
	text-decoration: none;
}
blockquote {
	margin-left: 10px;
}
</style><div id="main" style="position: absolute;"><center>


<div class="box" style="position: relative;">
<h1>Information</h1>
I don't know if you want to use images or just a list but I did both (click <b>Name1</b> and <i>Name2</i> to see the differences). Maybe if they have a lot of wishes just do the list. It doesn't look best when there is a scroll bar on the Mirror.

<br><br><table style="width: 100%;"><tr><th style="text-align: left;"><a href="/~thecastle">⇠ hogwarts</a></th>
<th style="text-align: right;"><a href="/~thefloonetwork">floo network ⇢</a></th>
</tr></table><br><h1>Wishers</h1>
<blockquote>
<a href="#name1">Name1</a> (username) - Term #<br><a href="#name2">Name2</a> (username) - Term #<br><a href="#name3">Name3</a> (username) - Term #<br><a href="#name4">Name4</a> (username) - Term #<br><a href="#name5">Name5</a> (username) - Term #<br><a href="#name6">Name6</a> (username) - Term #<br><a href="#name7">Name7</a> (username) - Term #<br></blockquote>

</div>


<div class="mirror" style="position: relative;">
<div class="anchor" id="clear"></div>


<div class="anchor" id="name1"><b>Name1's Wishlist</b><br><br><img src="http://images.neopets.com/items/bvf_jam_blooblefruit.gif" title="Flaming Blooble Fruit Jam"><img src="http://images.neopets.com/items/tik_unlabeled_can.gif" title="Unlabeled Tin Can"><a href="#clear">⇠ back</a></div>


<div class="anchor" id="name2"><b>Name2's Wishlist</b><br><br>
ϟ Flaming Blooble Fruit Jam<br>
ϟ Unlabeled Tin Can<br>
ϟ Rose Lollyswirl<br><a href="#clear">⇠ back</a></div>


<div class="anchor" id="name3"><b>Name3's Wishlist</b><br><br><a href="#clear">⇠ back</a></div>


<div class="anchor" id="name4"><b>Name4's Wishlist</b><br><br><a href="#clear">⇠ back</a></div>


<div class="anchor" id="name5"><b>Name5's Wishlist</b><br><br><a href="#clear">⇠ back</a></div>


<div class="anchor" id="name6"><b>Name6's Wishlist</b><br><br><a href="#clear">⇠ back</a></div>


<div class="anchor" id="name7"><b>Name7's Wishlist</b><br><br><a href="#clear">⇠ back</a></div>




</div>



</center></div>