<style type="text/css">
@import url(//fonts.googleapis.com/css?family=Song+Myung);
@import url(//fonts.googleapis.com/css?family=Oswald);
@import url(//fonts.googleapis.com/css?family=Josefin+Sans);
@import url(//fonts.googleapis.com/css?family=Courgette);
@import url(//fonts.googleapis.com/css?family=Poiret One);




.pfor { display: none; }
 #profile { background-color: transparent; border: none; overflow: auto;}
/*body*/

 body {
 background-color: #110f0b;
}

body, a {cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur829.cur), auto;}

b, strong { font-family: Song Myung; font-size: 14px;line-height: 15px; font-weight: bold;
 color: #28220f;
}

i, em {color:#da9e78; font-family: josefin sans; font-size:14px;}

/*scroll*/
::-webkit-scrollbar {
 width: 5px;
 height: 0px;
 background:;
 }

 ::-webkit-scrollbar-thumb {
 background-color: #272111;
 -webkit-border-radius: 10px;
 border-radius: 10px;
z-index: 999;
 }




/*aesthetics*/
#background img{
position: absolute;
width: 100%;
height:100%;
top:0px;
left: 0px;
z-index: 2;
}


/*navigation*/
#navi {
 position: fixed;
 left:74%;
right:26%;
 top:52%;
bottom: 48%;
 width: 5px;
 height: 2000px;
 padding:5px;
 z-index: 6;
display: inline-block;
 float: left;
 }

 #navi a:link, #navi a:visited {
 text-decoration:none;
 font-weight:normal !important;
 padding:5px;
 margin-left: 10px;
 width: 1px;
margin: 0px 0px 10px 0px;
height: 40px;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 background-color: #272111;
opacity: 0.4;
 float: left;
 }

 #navi a:hover {
 background-color:#606044;
opacity: 0.4;
 text-decoration:none;
 float: left;
 }

/*music*/
#music1{
 position:fixed;
left: 33.5%;
right: 66.5%;
top: 82%;
bottom: 20%;
 padding:2px;
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
z-index: 90;
}

#music1:hover #music2{
 opacity:0;
 margin-top:-25px;
 z-index:-1;
}

#music1:hover #music3{
 opacity:1;
 margin-top:-2px;
 z-index:99;
}

#music1:hover #musiclist{
 opacity:1;
}

#music2{
 /* First gif image*/
 opacity:1;
 background-color:#transparent;
 padding:6px;
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;}

#music3{
 /* Music player */
 opacity:0;
 position:fixed;
 background-color:#transparent;
 background-image:
 url('http://assets.clickmotive.com/Designs/LEMidnight/playButton.png');
 background-repeat: no-repeat;
 background-size: 25px;
 width:25px;
 height:25px;
 z-index:99
 margin-left:0px;
 overflow:hidden;
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;}

/*content*/
.box {
 position: fixed;
top:54%;
bottom: 46%;
left: 43%;
right: 57%;
 width: 29.8%;
 height: 33.5%;
 padding: 5px;
 font-size: 14px;
 line-height: 13px;
 text-align: center;
font-family: oswald;
 color: #606044;
 overflow: auto;
 opacity: 0;
 transition: all 0.7s ease-in-out;
 -webkit-transition: all 0.7s ease-in-out;
 -moz-transition: all 0.7s ease-in-out;
 -o-transition: all 0.7s ease-in-out;
 -ms-transition: all 0.7s ease-in-out;
 z-index:2;
 }

 .box:target {
top:54%;
left: 43%;
 overflow: auto;
 opacity: 1;
 transition: all 0.7s ease-in-out;
 -webkit-transition: all 0.7s ease-in-out;
 -moz-transition: all 0.7s ease-in-out;
 -o-transition: all 0.7s ease-in-out;
 -ms-transition: all 0.7s ease-in-out;
 z-index:4;
 }

/*tables*/
td.one{
 width: 500px;
 font-family: Song Myung;
 font-size: 14px;
 text-align: left;
 word-spacing: 1px;
 letter-spacing: 0px;
 line-height: 9px;
 font-weight: bold;
 color: #28220f;


 }

 td.two{
 width: 261px;
 font-family: oswald;
 font-size: 14px;
 text-align: right;
 word-spacing: 1px;
 letter-spacing: 0px;
 line-height: 9px;
 color: #606044;
 }

/*link*/
a:link,a:active,a:visited {
 color: #606044;
 font-family: Courgette;
 font-size: 14px;
 line-height: 10px;
 letter-spacing: 0px;
 display: ;
 font-weight: bold;
 margin-bottom: px;
 word-spacing: 0px;
 text-transform: none;
 text-align: center;
 text-decoration: none;
 transition: all .3s ease-in-out;
 -webkit-transition: all .3s ease-in-out;
 -moz-transition: all .3s ease-in-out;
 -o-transition: all .3s ease-in-out;
 -ms-transition: all .3s ease-in-out;
z-index: 20;
 }

 a:hover {
 color: #000000;
 font-family: Courgette;
 font-size: 14px;
 line-height: 10px;
 letter-spacing: 0px;
 display: ;
 font-weight: bold;
 margin-bottom: px;
 word-spacing: 0px;
 text-align: center;
 text-decoration: none;
 transition: all .3s ease-in-out;
 -webkit-transition: all .3s ease-in-out;
 -moz-transition: all .3s ease-in-out;
 -o-transition: all .3s ease-in-out;
 -ms-transition: all .3s ease-in-out;
text-shadow: 1px 0px 0px #606044,
	0px 1px 0px #606044,
	-1px 0px 0px #606044,
	0px -1px 0px #606044,
	0px 0px 20px #606044;

z-index: 20;
}

h1 {
font-family: Poiret One;
color: #000000;
text-shadow: 1px 0px 0px #392e1c,
    0px 1px 0px #392e1c,
    -1px 0px 0px #392e1c,
    0px -1px 0px #392e1c,
    0px 0px 20px #392e1c;
font-size: 15px;
line-height: 12px;
text-align: center;
letter-spacing: 1px;
border-left: 4px solid #392e1c;
border-right: 4px solid #392e1c;
}
</style>
<div id="navi">
 <a href="#nung" class="text" ></a>
 <a href="#song" class="text"></a>
<a href="#sam" class="text" ></a>
<a href="#si" class="text"></a>
</div>

<div id="background"><img src="http://i.picpar.com/2cPc.png"></div>

<div id="nung" class="box">
<h1>Stats</h1>
 <table>
 <tr><td class="one">
 Designation
 </td><td class="two">
 Orc
 </td></tr><tr>

 <tr><td class="one">
 Serial
 </td><td class="two">
 O24R576C8
 </td></tr><tr>

 <tr><td class="one">
 Model Type
 </td><td class="two">
 Combat
 </td></tr><tr>

 <tr><td class="one">
 Age
 </td><td class="two">
 <s>24</s> 1
 </td></tr><tr>

<tr><td class="one">
 Height
 </td><td class="two">
 8'2"
 </td></tr><tr>

 <tr><td class="one">
 Weight
 </td><td class="two">
 1465lbs
 </td></tr><tr>

 <tr><td class="one">
 Fuctionality
 </td><td class="two">
 <s>100$</s> unknown.
 </td></tr><tr>

 <tr><td class="one">
 Operator
 </td><td class="two">
 <a href="https://roleplay.chat/profile.php?user=Aliice">Aliice</a>
 </td></tr><tr>

<tr><td class="one">
 Matrix
 </td><td class="two">
 <s>Stable</s> Operable
 </td></tr><tr>


</table>
 </div>

 <div id="song" class="box">
<h1>History</h1>
Nothing before Aliice can be retrieved at this time. Please try again later.
 </div>

<div id="sam" class="box" text-align: justify;>
<h1>Aquaintences</h1>
<a href=""><img src="http://i.picpar.com/7cPc.png"  title="Vaeldra"></a><br>[Description]<br><br
<a href="hyper link"><img src="https://vignette.wikia.nocookie.net/mafiagame/images/2/23/Unknown_Person.png/revision/latest/scale-to-width-down/464?cb=20151119092211" width= 80px; title="Aliice"></a><br>[Description]<br><br>
 </div>


<div id="si" class="box">
<h1>Out of Character</h1>
01. I'm not your buddy, guy. But we can probably change that in time. PM Friendly.<br>
02. Discord available to those that show a prolonged interest, if requested.<br>
03. Character is an original design, brain baby of moi.<br>
04. Muse can be sometimes sporadic, be patient.<br>
05. Smut <i>could</i> happen? Very mood based.<br><br>

reg<b>bold</b><i>italics</i><a href="">link</a><h1>Header</h1>
 </div>

<div id="music1">
<div id="music2">


<img src="http://68.media.tumblr.com/tumblr_m7vxuuzOHZ1r6o8v2.gif" style="opacity: 1;"></div>

<div id="music3">
<Div style="margin-top:4px;">

<audio controls style="opacity: 0;"><source src="https://my.mixtape.moe/uzrtoy.mp3
"></audio>
</div>

</div>