Stein

<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: 2px; }

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

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

b, strong {color: #ff0000; font-family: IM Fell English SC; font-size: 13px; font-style: normal; font-weight: bold; text-decoration: none; font-style: italic; font-weight: normal; text-shadow: 0 0 0.5em #000;}

strong {color: #7D7DEE; font-family: IM Fell English SC; font-size: 13px; font-style: normal; font-weight: bold; text-decoration: none; font-style: italic; font-weight: normal; text-shadow: 0 0 0.5em #000;}

a {
color: #E00202;
font-size:12px;
text-decoration: none;
}

a:link, a:active, a:visited {
font-size:12px;
letter-spacing:0px;
text-decoration: none;
color: #E00202;
text-shadow: 0 0 0.5em #000;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
}

a:hover {
font-size:12px;
color:#000;
text-shadow: 0 0 0.5em #9C0404;
text-decoraction: line-through;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
}

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

.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;}


</style>


<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 class="Boxcontent">
<center>
<div style="height: 100%; overflow-y: hidden;">
<a name="1"></a>
<div style="width:95%; height: 100%; top: 0px; overflow: auto;" align="left">
<br>
<h1>Title</h1>
Tab1


</div>
</div>

<div style="height: 100%; overflow-y: hidden;">
<a name="2"></a>
<div style="width:95%; height: 100%; top: 100px; overflow: auto;" align="left">
<br>
<h1>Title</h1>
Tab2
</div>
</div>


<div style="height: 100%; overflow-y: hidden;">
<a name="3"></a>
<div style="width:95%; height: 100%; top: 100px; overflow: auto;" align="left">
<br>
<h1>Title</h1>
Tab3
</div>
</div>


<div style="height: 100%; overflow-y: hidden;">
<a name="4"></a>
<div style="width:95%; height: 100%; top: 100px; overflow: auto;" align="center">
<br>
<h1>Title</h1>
Tab4


</div>
</div>

<div style="height: 100%; overflow-y: hidden;">
<a name="5"></a>
<div style="width:95%; height: 100%; top: 100px; overflow: auto;" align="center">
<br>
<h1>Title</h1>
Tab5

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