Heavenly Chains- Description Codes

<center>

<img src="http://i.imgur.com/oFHJiib.png" />

<style>
.overlay {
width: 800px;
height: 825px;
background: #770036;
position: relative;
border: 1px dotted #c48d8a;
border-radius: 5px;
}

.innerbox {
overflow: auto;
border: 1px dotted #c48d8a;
border-radius: 5px;
background: #e84653;
position: absolute;
opacity: 0.5;
}

#History {
top: 4px;
left: 4px;
width: 500px;
height: 300px;
}

#Elite {
top: 310px;
left: 4px;
width: 500px;
height: 300px;
}

#Laws {
top: 4px;
left: 525px;
width: 270px;
height: 400px;
}

#Purchased {
top: 410px;
left: 525px;
width: 270px;
height: 200px;
}

#Immunity {
top: 617px;
left: 4px;
width: 400px;
height: 200px;
}

#Starlight {
top: 617px;
left: 410px;
width: 385px;
height: 200px;
}
</style>

<div class="overlay">
<div class="innerbox" id="History"><center><img src="http://i.imgur.com/Qdr8I5y.png" /></center>
<hr />
</div>
<div class="innerbox" id="Elite"><center><img src="http://i.imgur.com/wJwsOdq.png" />
<hr />
<a href="link" class="ft" title="Name||Play-by"><img src="img here" /></a>
<a href="link" class="ft" title="Name||Play-by"><img src="img here" /></a>
<a href="link" class="ft" title="Name||Play-by"><img src="img here" /></a>
<a href="link" class="ft" title="Name||Play-by"><img src="img here" /></a>
<a href="link" class="ft" title="Name||Play-by"><img src="img here" /></a>
<a href="link" class="ft" title="Name||Play-by"><img src="img here" /></a>
<a href="link" class="ft" title="Name||Play-by"><img src="img here" /></a>
<a href="link" class="ft" title="Name||Play-by"><img src="img here" /></a>
<a href="link" class="ft" title="Name||Play-by"><img src="img here" /></a>
<a href="link" class="ft" title="Name||Play-by"><img src="img here" /></a>
<a href="link" class="ft" title="Name||Play-by"><img src="img here" /></a>
</center>
</div>

<div class="innerbox" id="Laws"><center><img src="http://i.imgur.com/xPXyoqv.png" />
<hr />
</center>
</div>

<div class="innerbox" id="Purchased"><center><img src="http://i.imgur.com/S6lw1gc.png" />
<hr />
<a href="link" class="ft" title="Name||Play-by"><img src="img here" /></a>
<a href="link" class="ft" title="Name||Play-by"><img src="img here" /></a>
<a href="link" class="ft" title="Name||Play-by"><img src="img here" /></a>
<a href="link" class="ft" title="Name||Play-by"><img src="img here" /></a>
<a href="link" class="ft" title="Name||Play-by"><img src="img here" /></a>

</center>
</div>

<div class="innerbox" id="Immunity"><center><img src="http://i.imgur.com/Ivniv4Z.png" />
<hr />
<a href="link" class="ft" title="Name||Play-by"><img src="img here" /></a>
<a href="link" class="ft" title="Name||Play-by"><img src="img here" /></a>
<a href="link" class="ft" title="Name||Play-by"><img src="img here" /></a>
<a href="link" class="ft" title="Name||Play-by"><img src="img here" /></a>
<a href="link" class="ft" title="Name||Play-by"><img src="img here" /></a>
<a href="link" class="ft" title="Name||Play-by"><img src="img here" /></a>

</center>
</div>

<div class="innerbox" id="Starlight"><center><img src="http://i.imgur.com/y0KGRXy.png" />
<hr />
<a href="link" class="ft" title="Name||Reason4Featured"><img src="img here" /></a>
<a href="link" class="ft" title="Name||Reason4Featured"><img src="img here" /></a>
<a href="link" class="ft" title="Name||Reason4Featured"><img src="img here" /></a>
<a href="link" class="ft" title="Name||Reason4Featured"><img src="img here" /></a>
<a href="link" class="ft" title="Name||Reason4Featured"><img src="img here" /></a>
<a href="link" class="ft" title="Name||Reason4Featured"><img src="img here" /></a>

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

<style>

.navi {
top: 0px;
left: 30px;
width: 150px;
height: 25px;
position: absolute;
overflow: hidden;
background: #770036;
border-radius: 5px;
border: 1px solid #c48d8a;
border-radius: 0px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
}


.navi:hover {
height: 200px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
}

.navilink {
display: block;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
border-radius: 0px;
border: 2px solid #c48d8a;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 4px;
font: 8pt century gothic;
color: #000000;
background: transparent;
}

.navilink:hover {
display: block;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
border-radius: 0px;
border: 2px solid #c48d8a;
text-decoration: none;
text-transform: lowercase;
letter-spacing: 4px;
font: 8pt century gothic;
color: #fff;
background: transparent;
}

</style>

<center><div class="navi">
<h3>Navigation</h3>
<a href="http://vampirefreaks.com/profiles/home.php" class="navilink">VF Home</a>
<a href="http://vampirefreaks.com/cults/controlpanel.php?c=HeavenlyChains" class="navilink">Control Panel</a>
<a href="http://vampirefreaks.com/group_invite.php?c=HeavenlyChains" class="navilink">Invite</a>
<a href="http://vampirefreaks.com/profiles/show_notifications.php" class="navilink">Responses</a>
<a href="http://vampirefreaks.com/group_comment.php?entry=6369049" class="navilink">Graphics</a>
<a href="http://vampirefreaks.com/members/Whispered-Deaths/Drifting+Prophecies+Designs" title="Layout Credit" class="navilink">©2015</a>
<a href="http://vampirefreaks.com/KonekoHime" title="Nav Credit" class="navilink">©2015</a>
</div>