Stein Profile

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Special+Elite);
@import url(https://fonts.googleapis.com/css?family=IM+Fell+English+SC);
@import url(https://fonts.googleapis.com/css?family=Share+Tech+Mono);

body {
background-image:url('http://i.imgur.com/bEQy2ZC.jpg');
background-color: #000;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:100% 100%;
}

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


h1 {width: 100%; height: auto; font-size: 20px;font-family:Arial;margin-top:1px; margin-bottom: 5px; text-align: center; color: #000;}
b, strong { color: #8B8B8B;text-shadow: 0.1vw 0.1vw 0.1vw #;}

a {color: #000000; text-decoration: none; }
a:hover {color: #878686; text-decoration: line-through;}

#stein {
 position:absolute;
 left:-100%;
 top:-100%;
}

#stein + label {
width: 50%;
height: 100%;
position: absolute;
left: 24%;
margin: 0;
bottom: 0%;
background-image: url('http://i.imgur.com/J399xwb.png');
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
opacity: 1;
z-index: 2;
transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}

#stein:checked + label {
position: absolute;
bottom: 0;
left: 0%;
height: 100%;
width: 65%;
background-image: url('http://i.imgur.com/dWwEVyu.png');
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
z-index: 3;
transition: all 0.6s ease-out;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}

#stein:checked ~ .Box {
position: absolute;
width: 25%;
left: 65%;
opacity: 1;
z-index: 1;
transition: all 2s ease-out;
-webkit-transition: all 2s ease-out;
-moz-transition: all 2s ease-out;
-ms-transition: all 2s ease-out;
-o-transition: all 2s ease-out;
transition: all 2s ease-out;
}

#stein:checked ~ .Navi {
position: absolute;
width: 25%;
left: 65.5%;
opacity: 1;
z-index: 1;
transition: all 2s ease-out;
-webkit-transition: all 2s ease-out;
-moz-transition: all 2s ease-out;
-ms-transition: all 2s ease-out;
-o-transition: all 2s ease-out;
transition: all 2s ease-out;
}

.Box {
position: absolute;
height: 30%;
width: 25%;
left: 65%;
background-color: #282626;
border: 5px solid #000;
top: 36%;
opacity: 0;
color: #fff;
font-family: arial;
font-size: 13px;
line-height:11px;
padding:2px;
z-index: -1;
overflow: auto;
-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;
}

.Landing {
position: absolute;
height: 100%;
width: 100%;
left: 0%;
background-color: #282626;
top: 0%;
opacity: 1;
color: #fff;
font-family: arial;
font-size: 13px;
line-height:11px;
padding:2px;
z-index: 1;
overflow: auto;
}

.Boxcontent {
position: absolute;
height: 100%;
width: 100%;
left: 0%;
background-color: #282626;
top: 0%;
opacity: 0;
color: #fff;
font-family: arial;
font-size: 13px;
line-height:11px;
padding:2px;
z-index: -1;
overflow: auto;
-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;
}

.Boxcontent:target {
opacity: 1;
z-index: 2;
-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;
}

.Navi {
position: absolute;
height: 2%;
width: 25%;
left: 65.5%;
background-color: #;
border: 1px solid #;
top: 69%;
opacity: 0;
z-index: -1;
overflow:auto;
transition: all 1s ease-out;
-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;
}

.tab1 { z-index:10; position: absolute; top: 0%; left: 1%; width: 45px; height: 10px; border:2px solid #000;background-color: #777777;}
.tab2 { z-index:10; position: absolute; top: 0%; left: 23%; width: 45px; height: 10px; border:2px solid #000;background-color: #777777;}
.tab3 { z-index:10; position: absolute; top: 0%; left: 44%; width: 45px; height: 10px; border:2px solid #000;background-color: #777777;}
.tab4 { z-index:10; position: absolute; top: 0%; left: 65%; width: 45px; height: 10px; border:2px solid #000;background-color: #777777;}
.tab5 { z-index:10; position: absolute; top: 0%; left: 87%; width: 45px; height: 10px; border:2px solid #000;background-color: #777777;}

#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" title="This profile was made for this character.
Do not take, alter, change, or take the credit off in any way without permission.
If you wish something like this then contact the creator.">Pachi</a>
</div>

<input type="checkbox" name="toggle" id="stein" />
<label for="stein"></label>
<div class="Navi">
<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>


<div class="Box">
<div id="1" class="Landing">
<br>
<h1>Title</h1>
Tab1 <b>Bold</b> <i>Italic</i> <a href="link.com" target="_blank">Link</a>

</div>

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


</div>

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


</div>

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


</div>

<div id="5" class="Boxcontent">
<br>
<h1>Title</h1>
Tab5


</div>
</div>
</div>