Kurin darkfell

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Parisienne);
@import url(https://fonts.googleapis.com/css?family=Itim);
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
@import url(https://fonts.googleapis.com/css?family=Allura);
@import url(https://fonts.googleapis.com/css?family=Pinyon+Script);
@import url(https://fonts.googleapis.com/css?family=Alex+Brush);
@import url(https://fonts.googleapis.com/css?family=Yellowtail);

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

body {
background-image: url("http://i.imgur.com/uYbwhaO.png");
background-repeat: repeat;
background-color: #0B091D;
background-size: ;
background-position: bottom right;
margin: 0;
}

.name{
 position: absolute;
 z-index:2;
 left: 28%;
 top: 13.8%;
 color: #424190;
 text-shadow: 0.1vw 0.1vw 0.1vw #000;
 font-family: Pinyon Script;
 font-size: 8vw;
 letter-spacing: 0.5vw;
 opacity:1;
}


#mainpic {
 position:fixed;
 z-index: 3;
 width:21%;
 height: 100%;
 left: 0px;
 bottom: 0px;
 background: #6D6D6B;
 color: #6D6D6B;
 font-size:2vh;
 border-right: 0.8vh solid #120E32;
 box-shadow: 5px 2px 6px #000000;
 overflow:hidden;
}
#mainpic img {
 width: 100%;
height: 100%}

.bar {
position:absolute;
z-index:1;
background-color: #0B091D;
box-shadow:0px 0px 10px #000;
width: 100%;
height: 41%;
margin: 0;
top: 28%;
right:0%;
overflow:auto;
}

.box {position: absolute;
z-index: -1;
left: 30%;
top:-15%;
border: 1px groove #;
height:99%;
width:70%;
background-color:#;
overflow-x:auto;
overflow-y:auto;
font-family: arial;
font-size:14px;
opacity: 0;
color:#ccc;
-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;}

.box:target {position: absolute;
z-index:4;
top: 4%;
background-color:#;
overflow-x:auto;
overflow-y:auto;
opacity: 1;
-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;}



.elf {
position: absolute;
background-color: #;
border: 1px solid #;
border-radius:0%;
box-shadow: -1vh 1vh 1vh #;
font-family: arial;
font-size: 14px;
padding: ;
color: #ddd;
height:98%;
bottom:0%;
left: 5%;
width: 32%;
line-height:19px;
overflow-y: auto;
overflow-x:auto;
opacity: 1;
padding:1px;
}

.elf2 {
position: absolute;
background-color: #;
border: 1px solid #;
border-radius:0%;
box-shadow: -1vh 1vh 1vh #;
font-family: arial;
font-size: 14px;
padding: ;
color: #ddd;
height:98%;
bottom:0%;
left: 55%;
width: 32%;
line-height:19px;
overflow-y: auto;
overflow-x:auto;
opacity: 1;
padding:1px;
}
.tab1 { z-index:10; position: absolute; top: 70%; left: 47%; width: 3%; height: 1%; border: 1px solid black;background-color: #424190;box-shadow:0px 0px 10px #000;}
.tab2 { z-index:10; position: absolute; top: 70%; left: 50.8%; width: 3%; height: 1%; border: 1px solid black;;background-color: #424190;box-shadow:0px 0px 10px #000;}
.tab3 { z-index:10; position: absolute; top: 70%; left: 54.5%; width: 3%; height: 1%; border: 1px solid black;background-color: #424190;box-shadow:0px 0px 10px #000;}
.tab4 { z-index:10; position: absolute; top: 70%; left: 58.2%; width: 3%; height: 1%; border: 1px solid black;background-color: #424190;box-shadow:0px 0px 10px #000;}

h1 {width: 100%; height: auto; font-size: 25px;font-family:Pinyon Script;margin-top:0px; margin-bottom: 5px;margin-top: 5px; text-align: center; border-bottom: 2px solid #2E5B8F; color: #424190;}
b, strong { color: #67788B;}

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

#credit{ position: fixed;
right: 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 id="mainpic">
<img src="http://i.imgur.com/GbSRMLj.jpg">
</div>
<div class="name">
Kurin Darkfell
</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="bar">
<div id="1" class="box">
<div class="elf">
<h1>Dossier</h1>
Words <b>Bold</b> <i>Italics</i> <a href="Url" target="_blank">Link</a>
</div>
<div class="elf2">
<h1>Title</h1>
words
</div>
</div>


<div id="2" class="box">
<div class="elf">
<h1>Title</h1>
words

</div>

<div class="elf2">
<h1>Title</h1>
words
</div>
</div>

<div id="3" class="box">
<div class="elf">
<h1>Title</h1>
Words
</div>


<div class="elf2">
<h1>OOC</h1>
Words
</div>
</div>
</div>
</div>