<style>
@import url(https://fonts.googleapis.com/css?family=Sacramento);
@import url(https://fonts.googleapis.com/css?family=Yellowtail);
body{background-color:#73716f;}

::selection {color: grey; background-color:none;}
::-moz-selection {color: #ce938f; background-color:#ffffff;}

::-webkit-scrollbar { width: 4px; height:0px; }
::-webkit-scrollbar-thumb:vertical {
background-color: #646060; border: none; }
#fatale{position:absolute;bottom:0%;left:0%;background:url(http://i.picpar.com/h1bc.png)no-repeat center;background-size:100% 100%;height:100%;width:32%;}
#lineback{position:absolute;top:0%;left:10%;height:100%;width:15%;background:transparent;border-left:10px black solid;border-right:10px black solid;z-index:-5;}
#static{position:absolute;top:0;left:0;height:100%;width:100%;background:url(http://4vector.com/i/free-vector-red-background-pattern-vector-1_018185_blood_background_01.jpg)repeat center;opacity:0.7;}
.box1{position:absolute;top:0;left:0;right:0px;bottom:400px;margin:auto;width:475px;height:200px;border:3px solid maroon;background:url(http://i.picpar.com/o1bc.jpg)no-repeat center;background-size:100% 100%;border-radius:5px 50px;z-index:1;}
#title{position:absolute;bottom:-2%;right:1%;text-align:right;font-size:80px;height:85px;width:100%;font-family:Sacramento;text-shadow:1px 1px white;text-decoration:none;}
#line1{position:absolute;top:0;left:0;right:300px;bottom:80px;margin:auto;height:150px;width:5px;background-color:maroon;transition: 1s linear;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;}
#line2{position:absolute;top:0;left:0;right:200px;bottom:150px;margin:auto;height:150px;width:5px;background-color:maroon;transition: 1s linear;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;}
#line3{position:absolute;top:0;left:0;right:100px;bottom:190px;margin:auto;height:150px;width:5px;background-color:maroon;transition: 1s linear;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;}
#line4{position:absolute;top:0;left:0;right:0px;bottom:130px;margin:auto;height:150px;width:5px;background-color:maroon;transition: 1s linear;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;}
#line5{position:absolute;top:0;left:100px;right:0px;bottom:200px;margin:auto;height:150px;width:5px;background-color:maroon;transition: 1s linear;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;}
#line6{position:absolute;top:0;left:200px;right:0px;bottom:70px;margin:auto;height:150px;width:5px;background-color:maroon;transition: 1s linear;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;}
#line7{position:absolute;top:0;left:300px;right:0px;bottom:230px;margin:auto;height:150px;width:5px;background-color:maroon;transition: 1s linear;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;}
#m1{position:absolute;bottom:-20px;left:-12px;height:30px;width:30px;background-color:black;border-radius:50%;box-shadow:2px 2px white;transition: 1s linear;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;}

#line1:hover,#line2:hover,#line3:hover,#line4:hover,#line5:hover,#line6:hover,#line7:hover{background-color:black;;bottom:50px;transition: 0.5s linear;
-webkit-transition: 0.5s linear;
-moz-transition: 0.5s linear;
-o-transition: 0.5s linear;
-ms-transition: 0.5s linear; }

.menuitem{opacity:0;transition: 0.5s linear;
-webkit-transition: 0.5s linear;
-moz-transition: 0.5s linear;
-o-transition: 0.5s linear;
-ms-transition: 0.5s linear;}
.boxbottom1{position:absolute;top:430px;left:0;right:0px;bottom:0px;margin:auto;height:200px;width:500px;background-color:black;border-radius:25px 5px;border:5px solid maroon;overflow:auto;}
#titlebox{position:absolute;top:180px;left:0;right:220px;bottom:0px;height:50px;width:350px;margin:auto;font-size:40px;text-align:center;letter-spacing:3px;font-family:Sacramento;text-shadow:3px 5px maroon;color:white;}
#title2{font-size:15px;text-align:center;letter-spacing:3px;font-family:Yellowtail;color:white;}
#stats{padding-top:-30px;font-size:20px;text-align:justify;font-family:Yellowtail;padding-left:50px;padding-right:50px;letter-spacing:4px;color:white;}
#story{font-size:20px;text-align:justify;font-family:Yellowtail;padding-left:10px;padding-right:10px;letter-spacing:4px;color:grey;}
.kiss{position:absolute;bottom:1%;left:0%;height:40%;width:20%;z-index:0;opacity:0.7;}

.menuitem:target{opacity:1;transition: 1s linear;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;}
.menuitem:target .boxbottom1{z-index:5;}
</style>
<div id="lineback"><div id="static"></div></div>

<div id="fatale"></div>
<div class="box1"><img class="kiss" src="http://pngimg.com/upload/lips_PNG6237.png"><div id="title">Fatale</div></div>
<a href="#1" id="line1"><div id="m1"></div></a>
<a href="#2" id="line2"><div id="m1"></div></a>
<a href="#3" id="line3"><div id="m1"></div></a>
<a href="#4" id="line4"><div id="m1"></div></a>
<a href="#5" id="line5"><div id="m1"></div></a>
<a href="#6" id="line6"><div id="m1"></div></a>
<a href="#" id="line7"><div id="m1"></div></a>

<div id="1" class="menuitem">
<div id="titlebox">Basic Statistic</div>
<div class="boxbottom1">
<div id="title2">"I didn't know if you were stalking me..."</div>
<div id="stats">
<br>+ Moniker: <font style="float:right">Faye Natalia</font>
<br>+ Alias: <a title="Given since childhood"><font style="float:right;color:maroon;">Fatale*</font></a>
<br>+ Species: <a title="Half Breed"><font style="float:right;color:maroon;">Hybrid*</font></a>
<br>+ Age: <a title="Immortal, appearing in the age of 20's."><font style="float:right;color:maroon;">Ageless*</font>
<br>+ Gender: <font style="float:right">Female</font>
<br>+ Height: <font style="float:right">5'9 ft</font>
<br>+ Weight: <font style="float:right">Hmm.</font>
<br>+ Occupation: <font style="float:right">Redacted</font>
<br>+ Sexuality: <a title="...."><font style="float:right;color:maroon;">Pansexual</font></a>
<br>+ Fancy: <font style="float:right">Unbound</font>
</div>
</div>
</div>

<div id="2" class="menuitem">
<div id="titlebox">Tale of Fatale</div>
<div class="boxbottom1">
<div id="title2">"I didn't know if you were stalking me..."</div>
<div id="story">
Fatale was born into a high-income family, where both her parents were working as scientists. Thus, she had an strong interest toward science at a young age, and was fascinated by it greatly. However, her parents were hardly at home, almost always busy with their work, causing her to grow independent. WIP.
</div>

</div>
</div>

<div id="3" class="menuitem">
<div id="titlebox">Powers - Abilities</div>
<div class="boxbottom1">
<div id="title2">"I didn't know if you were stalking me..."</div>
<div id="story">
Powers and Abilities goes here.
</div>
</div>
</div>

<div id="4" class="menuitem">
<div id="titlebox">The Cherished One</div>
<div class="boxbottom1">
<div id="title2">"I didn't know if you were stalking me..."</div>
<div id="story">
Cherished page goes here.
</div>

</div>
</div>

<div id="5" class="menuitem">
<div id="titlebox">The Encounters</div>
<div class="boxbottom1">
<div id="title2">"You meant more than the world itself.."</div>
<center>
<br><br>
<a href=""><img src="" width="75" height="75" title="" border="1px solid brown"></a>
<a href=""><img src="" width="75" height="75" title="" border="1px solid brown"></a>
<a href=""><img src="" width="75" height="75" title="" border="1px solid brown"></a>
<a href=""><img src="" width="75" height="75" title="" border="1px solid brown"></a>
<a href=""><img src="" width="75" height="75" title="" border="1px solid brown"></a>
<a href=""><img src="" width="75" height="75" title="" border="1px solid brown"></a>
<br>
<a href=""><img src="" width="75" height="75" title="" border="1px solid brown"></a>
<a href=""><img src="" width="75" height="75" title="" border="1px solid brown"></a>
<a href=""><img src="" width="75" height="75" title="" border="1px solid brown"></a>
<a href=""><img src="" width="75" height="75" title="" border="1px solid brown"></a>
<a href=""><img src="" width="75" height="75" title="" border="1px solid brown"></a>
<a href=""><img src="" width="75" height="75" title="" border="1px solid brown"></a>
<br>
<a href=""><img src="" width="75" height="75" title="" border="1px solid brown"></a>
<a href=""><img src="" width="75" height="75" title="" border="1px solid brown"></a>
<a href=""><img src="" width="75" height="75" title="" border="1px solid brown"></a>
<a href=""><img src="" width="75" height="75" title="" border="1px solid brown"></a>
<a href=""><img src="" width="75" height="75" title="" border="1px solid brown"></a>
<a href=""><img src="" width="75" height="75" title="" border="1px solid brown"></a>
<br>
</center>
</div>
</div>

<div id="6" class="menuitem">
<div id="titlebox">Out of Character</div>
<div class="boxbottom1">
<div id="title2">"You meant more than the world itself.."</div>
<div id="stats"><br>
+ PM Friendly, depending on mood. <br><br>
+ Clean/Smut<br><br>
+ IC =/= OOC <br><br>
+ Brackets for OOC "]" <br><br>
+ I often get distracted or go afk without a warning so have patience with me. <br><br>
+ Semi Para + writer. <br><br>
+ Outside contacts are limited. Earn it. <br><br>
+ Code and Character are a WIP <br><br>
</div>

</div>
</div>