Raxos

<style type="text/css">

@import url(https://fonts.googleapis.com/css?family=Clicker+Script);
@import url(https://fonts.googleapis.com/css?family=UnifrakturCook);
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(https://fonts.googleapis.com/css?family=Cormorant+Unicase);
@import url(https://fonts.googleapis.com/css?family=Cormorant+Upright);


body {
background-color: #314267;
background-image: url(http://i.imgur.com/iSLe24t.png);
background-attachment: fixed;
background-position:center;
background-repeat: repeat;
background-size:;
overflow:hidden;}

::-webkit-scrollbar-track {background-color:#;}
::-webkit-scrollbar-thumb {background-color:#AE0505; border:3px solid #;}
::-webkit-scrollbar {width:6px;height:5px;}


#frame {
 z-index: 10;
 background: url(http://i.imgur.com/vpdRMUd.png);
 background-size: 1;
 background-position: bottom left;
 background-repeat: repeat;
background-size: 100% 100%;
 position: absolute;
background-color:#A68D69;
border: 5px groove #062741;
 top: 50%;
 left: 30%;
 height:30%;
 width: 35%;
}

.name{position: absolute;
z-index:50;
left: 26%;
top:-122%;
color: #30648B;
text-shadow: 0.2vw 0.2vw 0.2vw #000;
font-family: Yanone Kaffeesatz;
line-height:80px;
text-align:center;
font-size: 5vw;
letter-spacing: 0vw;}

.box {position: absolute;
z-index: -1;
left: 0.9%;
top:-10%;
border: 2px solid #4D8BBB;
height:94%;
width:96.6%;
background-color:#1A253D;
overflow-x:auto;
overflow-y:auto;
font-family:arial;
font-size:12px;
line-height:17px;
padding:3px;
opacity:0;
color:#fff;
 transition: 0.8s;
 -moz-transition: 0.8s;
 webkit-transition: 0.8s;
 -o-transition: 0.8s;}

.box:target{position: absolute;
z-index: 3;
top:1%;
opacity:1;
transition: 0.8s;
-moz-transition: 0.8s;
webkit-transition: 0.8s;
-o-transition: 0.8s;}

.aimg {background-color: #fff;
position: absolute;
width: 100%;
height:75%;
left: -0.9%;
top:-95%;
overflow:auto;
border:5px groove #062741;}

.tab1 { z-index:10; position: absolute; top: -12%; left: 5%; width: 10%; height: 5%; border-radius: 0%;background-color: #1A253D;box-shadow:0px 0px 10px #4D8BBB;}
.tab1:hover { z-index:10; position: absolute; top: -12%; left: 5%; width: 10%; height: 5%; border-radius: 0%;background-color: #376283;box-shadow:0px 0px 10px #000;-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;}
.tab2 { z-index:10; position: absolute; top: -12%; left: 25%; width: 10%; height: 5%; border-radius: 0%;background-color: #1A253D;box-shadow:0px 0px 10px #4D8BBB;}
.tab2:hover { z-index:10; position: absolute; top: -12%; left: 25%; width: 10%; height: 5%; border-radius: 0%;background-color: #376283;box-shadow:0px 0px 10px #000;-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;}
.tab3 { z-index:10; position: absolute; top: -12%; left: 45%; width: 10%; height: 5%; border-radius: 0%;background-color: #1A253D;box-shadow:0px 0px 10px #4D8BBB;}
.tab3:hover { z-index:10; position: absolute; top: -12%; left: 45%; width: 10%; height: 5%; border-radius: 0%;background-color: #376283;box-shadow:0px 0px 10px #000;-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;}
.tab4 { z-index:10; position: absolute; top: -12%; left: 65%; width: 10%; height: 5%; border-radius: 0%;background-color: #1A253D;box-shadow:0px 0px 10px #4D8BBB;}
.tab4:hover { z-index:10; position: absolute; top: -12%; left: 65%; width: 10%; height: 5%; border-radius: 0%;background-color: #376283;box-shadow:0px 0px 10px #000;-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;}
.tab5 { z-index:10; position: absolute; top: -12%; left: 85%; width: 10%; height: 5%; border-radius: 0%;background-color: #1A253D;box-shadow:0px 0px 10px #4D8BBB;}
.tab5:hover { z-index:10; position: absolute; top: -12%; left: 85%; width: 10%; height: 5%; border-radius: 0%;background-color: #376283;box-shadow:0px 0px 10px #000;-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;}

h1 {width: 100%; height: auto; font-size: 20px;font-family:Cormorant unicase; margin: 0; text-align: center; border-bottom: 1px solid #fff; color: #4D8BBB;}

b, strong { color: #4D8BBB;}

a:active, a:link, a:visited {
color: #000;
text-decoration: none;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
a:hover {
color: #BAB463;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
transition-duration:0.5s;
}

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

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

<img src="http://i.imgur.com/f7H2ogD.png" height="100%" style="position:fixed; top:0%; right: 3%;">


<div id="frame">
<div class="name">
Raxos Kuro
</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>
<a href="#5"><div class="tab5"></div></a>
<div class="aimg">
<img src="http://i.imgur.com/GPEIYsD.png" Height="100%" Width="100%">
</div>
<div id="1" class="box">
<h1>Title</h1>
Tab1 <b>Bold</b> <i>Italics</i> <a href="link.com">Link</a>
</div>

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

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

<div id="4" class="box">
<h1>Title</h1>
Tab4
</div>
</div>