— ɢɪᴠᴇ ᴍᴇ ᴀ ʀᴇᴀsᴏɴ.

<style type="text/css">
.pfor { display: none; }
#profile { background-color: transparent; border: none; }
</style>

<style type="text/css">
body {
font-family: verdana;
font-size: 10px;
background-color: #F7F7F7;
background-image: url('http://i.picpar.com/DR6.png');
background-attachment: fixed;
background-position: bottom right;
background-repeat: repeat;
text-align: justify;
color: #888888;
cursor: url('http://cur.cursors-4u.net/others/oth-7/oth666.cur'), default;
}

b, strong {font-family:'verdana'; font-variant: small-caps; font-size:10px; color:#838894; font-weight:normal; margin-left: 10px; letter-spacing: -1px;}
i {color: #666666; font-family: 'calibri'; font-variant: small-caps; font-size:10pt; letter-spacing:0px}
u {color: #666; font-size: 12px; font-weight: light; letter-spacing: 0px; word-spacing: 6px; font-family:Romans; text-transform: normal; font-weight: normal; text-align: center; border-bottom: 1px dotted #889e9f;}
s {color: #99D6FF; font-size: 11px; font-weight: light; letter-spacing: 0px; font-family:Romans; text-transform: normal; text-decoration: none; font-weight: normal; text-shadow: #FF99D6 0px 0px 1px;}
big {color: #303646; font-size: 20px; font-weight: light; letter-spacing: 0px; font-family:Century Gothic; text-transform: normal; text-decoration: none; font-weight: normal; text-align: center; Text-shadow: #DED6AA 0px 0px 1px;}
small {color: #555555; font-size: 11px; font-weight: light; letter-spacing: -1px; font-family:Romans; font-variant: small-caps; text-transform: lowercase; text-decoration: none; font-weight: normal; text-align: center;}

::-webkit-scrollbar-button:vertical:{background-color: transparent;
-moz-border-radius: 0px 0px 0px 0px;
border-radius:0px 0px 0px 0px;}
::-webkit-scrollbar-thumb:vertical {background-color: transparent; height:20px;
-moz-border-radius: 0px 0px 0px 0px;
border-radius:0px 0px 0px 0px;}
::-webkit-scrollbar-thumb:horizontal {background-color: transparent; height:20px !important;
-moz-border-radius: 0px 0px 0px 0px;
border-radius:0px 0px 0px 0px;}
::-webkit-scrollbar { height:20px;width:3px; background-color:transparent;}

@import url(http://fonts.googleapis.com/css?family=Lavanderia delicate);

h2{
font: 12px verdana;
font-variant: small-caps;
color: #121212;
text-transform: none;
letter-spacing: 1px;
border-bottom: none;
background-color: none;
line-height: 8px;
text-align: right;
margin: 1px;
padding: 0px;
border-left: 23px solid #2B2D41;
}

#Pic {
position: fixed;
top: 70px;
left: 230px;
width: 900px;
height: 500px;
background-color: #FCF6EC;
background-image:url('https://31.media.tumblr.com/fe81923edd9ae108644459adb88560b1/tumblr_myyh89QooT1qz6f9yo1_500.png');
background-repeat: no-repeat;
background-position: 0px 0px;
background-size: 400px 500px;
border: #92233D 5px solid;
}

#Navi {
position: fixed;
left: 265px;
top: 488px;
width: auto;
z-index: 200;
}

a.nav:link, a.nav:active, a.nav:visited{
text-decoration: none;
width: 150px;
height: 20px;
margin: 2px;
font-size: 15px;
font-family: century gothic;
font-weight: normal;
text-shadow: #435B82 2px 3px 4px;
display: inline-block;
background-color: transparent;
cursor: url(http://cur.cursors-4u.net/user/use-1/use169.cur), default;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
}

a.nav:hover{
background-color: transparent;
width: 150px;
height: 25px;
margin: 2px;
border:none;
text-decoration: none;
cursor: url(http://cur.cursors-4u.net/user/use-1/use169.cur), default;
}

.box {
position: fixed;
left: 200px;
top: 80px;
width: 495px;
height: 380px;
color: #212121;
font-family: verdana;
font-variant: small-caps;
text-align: justify;
font-size: 10px;
line-height: 3px;
overflow: auto;
border: 3px Solid #212121;
background-color: #EDEDEE;
opacity: 0;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
}

.box:target {
top: 80px;
left: 635px;
opacity: 1;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
}

#line{
position:fixed;
background-image: url('http://i.picpar.com/RR6.png');
background-attachment: fixed;
background-position: fixed;
background-repeat: repeat;
z-index: 100;
left: 235px;
height: 80px;
width: 900px;
top: 480px;
z-index: 9;
border-top: 5px Solid #92233D;
border-bottom: 5px Solid #92233D;
background-color: #FCF6EC;
}

a {
color: #690000;
text-decoration: none;
cursor: url(http://cur.cursors-4u.net/user/use-1/use169.cur),default;
}

a:hover {
color: transparent;
text-decoration: none;
cursor: url(http://cur.cursors-4u.net/user/use-1/use169.cur),default;
}

.snow {
margin-top: 1px;
height: 80px;
width: 80px;
margin-left: 5px;
margin-top: 2px;
border: #838894 2px solid;
opacity: 0.7;
z-index: 300;
}

.snow:hover {
margin-top: 1px;
height: 80px;
width: 80px;
margin-left: 5px;
margin-top: 2px;
border: #838894 2px solid;
opacity: 1;
z-index: 300;
}


</style>

<div id="pic"></div>
<div id="line"></div>

<div id="Navi">
<a class="nav" href="#one">Guidelines</a>
<a class="nav" href="#two">Persona</a>
<a class="nav" href="#three">Abilities</a>
<a class="nav" href="#four">Relations</a>
<a class="nav" href="#five">History</a>
<a class="nav" href="#six">Other</a>
</div>

<div id="one" class="box">

</div>

<div id="two" class="box">
<b>Name</b>:
<br><b>Goes by</b>: Esme.
<br><b>Gender</b>: Female
<br><b>Age</b> Permanently Twenty-two
<br><b>Date of Birth</b>:
<br><b>Zodiac Sign</b>:
<br><b>Race</b>: Vampire
<br><b>Hair Colour</b>: Black, Mid-back length
<br><b>Eye Hue</b>: Light Blue
<br><b>Body Type</b>: Feminine
<br><b>Weight</b>: One hundred and twenty-one pounds.
<br><b>Height</b>: Five feet, two inches.
<br><b>Family</b>: Mother (Deceased) / Father (Unknown)
<br><b>Alignment</b>: True Neutral
<br><b>Skin Colour</b>: Pale
<br><b>M. Status</b>: Singular, partner selective.
<br><b>Orientation</b>: Pansexual
</div>

<div id="three" class="box">
Abilities
</div>

<div id="four" class="box">
<div style="width: 490px; height: 237px; align="center" >
<a href="profile.php?user=" target="_blank" title="description here."><img src="http://placehold.it/80x80" class="snow"></a>
<a href="profile.php?user=" target="_blank" title="description here."><img src="http://placehold.it/80x80" class="snow"></a>
<a href="profile.php?user=" target="_blank" title="description here."><img src="http://placehold.it/80x80" class="snow"></a>
<a href="profile.php?user=" target="_blank" title="description here."><img src="http://placehold.it/80x80" class="snow"></a>
<a href="profile.php?user=" target="_blank" title="description here."><img src="http://placehold.it/80x80" class="snow"></a>
<a href="profile.php?user=" target="_blank" title="description here."><img src="http://placehold.it/80x80" class="snow"></a>
<a href="profile.php?user=" target="_blank" title="description here."><img src="http://placehold.it/80x80" class="snow"></a>
<a href="profile.php?user=" target="_blank" title="description here."><img src="http://placehold.it/80x80" class="snow"></a>
<a href="profile.php?user=" target="_blank" title="description here."><img src="http://placehold.it/80x80" class="snow"></a>
<a href="profile.php?user=" target="_blank" title="description here."><img src="http://placehold.it/80x80" class="snow"></a>
<a href="profile.php?user=" target="_blank" title="description here."><img src="http://placehold.it/80x80" class="snow"></a>
<a href="profile.php?user=" target="_blank" title="description here."><img src="http://placehold.it/80x80" class="snow"></a>
</div></div>

<div id="five" class="box">
History
</div>

<div id="six" class="box">
Misc.
</div>