Illya

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Kalam);
@import url(https://fonts.googleapis.com/css?family=Satisfy);
@import url(https://fonts.googleapis.com/css?family=Italianno);
@import url(https://fonts.googleapis.com/css?family=Caveat);

::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { border-radius: 2px; background-color: transparent; }
::-webkit-scrollbar-thumb { border-radius: 2px; background-color: #transparent; }

body {
background-image: url("http://i.picpar.com/HYXb.png");
background-repeat: no-repeat;
background-color: #fff;
background-size: 35%;
background-position: bottom left;
margin: 0;
}

.bar1, .bar2{
position:fixed;
overflow:hidden;
z-index:10000;
display:block;
}

.bar1 {
z-index:0;
right:0%;
bottom:0%;
height:40px;
width:50%;
margin-right:0px;
margin-bottom:0px;
-moz-border-radius-topleft: 90px;
-webkit-border-top-left-radius: 90px;
 border-top-left-radius: 90px;
text-align:right;
padding-top:15px;
}


.bar2 {
z-index:0;
left:0%;
top:0%;
height:55px;
width:95%;
margin-left:0px;
margin-top:0px;
 -moz-border-radius-bottomright: 90px;
-webkit-border-bottom-right-radius: 90px;
border-bottom-right-radius: 90px;
text-align:left;
}
.bar1, .bar2{background-color:AA2244;}


.box {position: absolute;
z-index: 3;
left: 48%;
top:15%;
border: 1px solid #;
box-shadow: 0.2vw 0.2vw 0.2vw #000;
height:60%;
width:30%;
background-color:#;
background: url(http://i.picpar.com/EYXb.png);
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
overflow:hidden;
font-family: indie flower;
font-size:14px;
color:#ccc;}

a {color: #897450; text-decoration: none; }

a:hover {color: pink; text-decoration: line-through;
cursor: url('http://media.tumblr.com/e7f72e808c4dbe5006b9c3a30dbc9b79/tumblr_inline_mh67vhwGnR1rdqsqf.png');}

h1{
color:#9B8050;
font-size:19px;
line-height: 14px;
font-family:Kalam;
text-align: center;
letter-spacing:5px;
margin: 5px 5px 5px;
text-shadow: 1px 0px 0px #,
0px 1px 0px #,
-1px 0px 0px #,
0px -1px 0px #,
0px 0px 20px #;
}

h3{ color:e7e4e2; background-color:e12255; border-color:ffffff; }

b, strong {color: #9B8050; font-family: Arial; font-size: 13px; font-style: normal; font-weight: bold; text-decoration: none; text-transform: ; font-style: italic;text-shadow: 0.0em 0 0 #;}

.tab1 {position: fixed; top: 25%;left: 23%; width: 9%; height: 18%; background-image: url(http://i.picpar.com/JYXb.jpg); background-size: 100% 100%; box-shadow: 0.2vw 0.2vw 0.2vw #000;}
.tab2 {position: fixed; top: 25%; left: 33.8%; width: 9%; height: 18%; background-image: url(http://i.picpar.com/KYXb.png); background-size: 100% 100%; box-shadow: 0.2vw 0.2vw 0.2vw #000;}
.tab3 {position: fixed; top: 45%; left: 23%; width: 9%; height: 18%; background-image: url(http://i.picpar.com/MYXb.png); background-size: 100% 100%; box-shadow: 0.2vw 0.2vw 0.2vw #000;}
.tab4 {position: fixed; top: 45%; left: 33.8%; width: 9%; height: 18%; background-image: url(http://i.picpar.com/NYXb.jpg); background-size: 100% 100%; box-shadow: 0.2vw 0.2vw 0.2vw #000;}

.content {
z-index: -1;
position: absolute;
background-color: #171616;
font-family: Segoe Print;
font-size: 12px;
padding: 5px;
color: #ccc;
height:100%;
top:0%;
left: 0%;
width: 100%;
line-height:19px;
overflow: auto;
opacity: 0;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.content:target {
z-index: 10;
opacity: 1;
position: absolute;
padding:5px;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

.circle{
border-radius:150px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
}

.circle:hover{
border-radius:150px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 -o-transform: rotate(0deg);
}

#music{ position:fixed;height: 55px;width: 55px;Bottom: 0%;right: 0%; margin: auto; z-index:99;}
#music1{ position:fixed; 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;}
#music1:hover #music2{ opacity:0; margin-top:-25px; z-index:-1;}
#music1:hover #music3{ opacity:0.7; margin-top:0px; z-index:99;}
#music1:hover #musiclist{ opacity:1;}
#music2{ opacity:1; background-color:#000000; 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{ opacity:0; position:fixed; background-color:#000000; background-image: url('http://assets.clickmotive.com/Designs/LEMidnight/playButton.png'); background-repeat: no-repeat; background-size: 25px; border:1px dotted #b3b3e5; 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;}


#credit{ position: fixed;
left: 1px;
bottom: 0px;
font-family: Arial;
font-variant: normal;
font-weight: normal;
font-size: 90%;
color: #000;
z-index:1;}

</style>
<div id="credit">
Layout © <a href="profile.php?user=Pachi" target="_blank">Pachi</a>
</div>
<div class="bar1"></div>
<div class="bar2"></div>

<a href="#1"><div class="tab1"></div></a>
<a href="#2"><div class="tab2"></div></a>
<a href="#3"><div class="tab3"></div></a>
<a href="#4"><div class="tab4"></div></a>

<div class="box">
<div id="1" class="content">
<p><h3>Legal</h3>
<BR><b>NAME:</b> Input info
<BR><b>NICKNAMES:</b> Input info
<BR><b>ALIASES:</b> Input info
<BR><b>DATE OF BIRTH:</b> Input info
<BR><b>PLACE OF BIRTH:</b> Input info
<BR><b>CURRENT RESIDENCE:</b> Input info

<p><h3>Physical</h3>
<BR><b>ETHNICITY:</b> Input info
<BR><b>HAIR COLOR:</b> Input info
<BR><b>EYE COLOR:</b> Input info
<BR><b>HEIGHT:</b> Input info
<BR><b>WEIGHT:</b> Input info
<BR><b>BIRTHMARKS/SCARS:</b> Input info

<p><h3>Personality</h3>
<BR><b>Traits:</b> Input Info
<BR><b>Disorders:</b> Input Info
<BR><b>Addictions:</b> Input Info
<BR><b>Likes:</b> Input Info
<BR><b>Dislikes:</b> Input Info
<BR><b>Quirks:</b> Input Info

<p><h3>Education</h3>
<BR><b>High School</b> Input Info
<br><b>College</b> Input Info
<br><b>Major</b> Input Info
<br><b>Degree</b> Input Info

<p><h3>Employment</h3>
<BR><b>OCCUPATION:</b> Input info
<BR><b>JOB DESCRIPTION:</b> Input info
<BR><b>EMPLOYER:</b> Input info
<BR><b>SKILLSET:</b> Input info

<p><h3>Family</h3>
<BR><b>MOTHER:</b> Input info
<BR><b>FATHER:</b> Input info
<BR><b>SISTER(S):</b> Input info
<BR><b>BROTHER(S):</b> Input info
<BR><b>Other Family:</b> Input info

<p><h3>Relationships</h3>
<BR><b>SEXUAL ORIENTATION:</b> Input info
<BR><b>RELATIONSHIP STATUS:</b> Input info
<BR><b>CURRENT RELATIONSHIP(S):</b> Input info
<BR><b>PAST RELATIONSHIP(S):</b> Input info

</div>

<div id="2" class="content">
<h3>Title here</h3>
Words
</div>

<div id="3" class="content">
<h3>Connections</h3>
<center>
<a href="profile.php?user=Name here" target="_blank"><img src="url image here" height="90" width="90" align="left"></a> - Name here -<br> Description<br><br><br>

<a href="profile.php?user=Name here" target="_blank" title="Words"><img src="url image here" height="90" width="90" align="right"></a> -Name Here -<br> Description here<br><br><br>

<a href="profile.php?user=Name here" target="_blank"><img src="url image here" height="90" width="90" align="left"></a> - Name here -<br> Description<br><br><br>

<a href="profile.php?user=Name here" target="_blank" title="Words"><img src="url image here" height="90" width="90" align="right"></a> -Name Here -<br> Description here<br><br><br>

<a href="profile.php?user=Name here" target="_blank"><img src="url image here" height="90" width="90" align="left"></a> - Name here -<br> Description<br><br><br>

<a href="profile.php?user=Name here" target="_blank" title="Words"><img src="url image here" height="90" width="90" align="right"></a> -Name Here -<br> Description here<br><br><br>
</center>

</div>

<div id="4" class="content">
<h3>Out of Character</h3>
</div>

<div id="music">
<div id="music1">
<div id="music2">
<img src="http://38.media.tumblr.com/tumblr_m7w2py1dEP1r6o8v2.gif" style="opacity: 0.8;"></div>
<div id="music3">
<Div style="margin-top:4px;">
<audio controls loop style="opacity: 0;"><source src="mpc url here"></audio>
</div>
</div>