Kazuki

<style type="text/css">

@import url(https://fonts.googleapis.com/css?family=Play|Arizonia);


b, strong { font-family: arial; color: #D50E0E;font-size: 12px; }

a {
 color: #0B0541;
 font-family: play;
 font-size: 12px;
 font-weight:bold;
 text-decoration: none;
 transition: all 0.8s ease-in-out;
 -moz-transition: all 0.8s ease-in-out;
 -webkit-transition: all 0.8s ease-in-out;}
a:hover {
 color: #C9B506;
 text-decoration: none;
 transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -webkit-transition: all 0.4s ease-in-out;
cursor: url('http://31.media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png'), progress;
}


::selection {color: #b0996b; background-color:#3F2E49;}
::-moz-selection {color: #b0996b; background-color:#3F2E49;}

::-webkit-scrollbar { width: 5px; height:0px; }
::-webkit-scrollbar-thumb:vertical {
background-color: #3F2E49; border: 1px solid #242424; }

body {
background-color: #336699;
background-image: url(' ');
background-size: 100% 100%;
background-position: bottom left;
background-attatchment: fixed;
background-repeat: no-repeat;
overflow-x:hidden;
cursor: url('http://31.media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png'), progress;
 }


#dex { position: fixed; left: 20px; top: 100px; z-index: -2;}
#dex img { height: 75%;}

.menu{position:absolute;top:455px;left:296px;height:216px;background-color:#;width:292px;border-radius:2%;border:;text-align:center;opacity:0;z-index:-1;transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;overflow:auto;}
.menu:target{z-index:1;opacity:1;transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;}

.menu2{position:absolute;top:455px;left:296px;height:216px;background-color:#;width:292px;border-radius:2%;border:;text-align:center;opacity:0;z-index:-1;transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;overflow:auto;}
.menu:target{z-index:1;opacity:1;transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;}

.menu3{position:absolute;top:455px;left:296px;height:216px;background-color:#;width:292px;border-radius:2%;border:;text-align:center;opacity:0;z-index:-1;transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;overflow:auto;}
.menu:target{z-index:1;opacity:1;transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;}

.menu4{position:absolute;top:455px;left:296px;height:216px;background-color:#;width:292px;border-radius:2%;border:;text-align:center;opacity:0;z-index:-1;transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;overflow:auto;}
.menu:target{z-index:1;opacity:1;transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;}

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

#Up + label {
text-decoration:none;
position:absolute;
top:492px;
left:195px;
border-radius:0%;
height:2%;
width:1%;
background-color:;
border:;
-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;
}

#Up:checked ~ .menu {
opacity: 1;
z-index: 1;
-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;
}

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

#Left+ label {
text-decoration:none;
position:absolute;
top:524px;
left:162px;
border-radius:0%;
height:3%;
width:1%;
background-color:;
border:;
-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;
}

#Left:checked ~ .menu2 {
opacity: 1;
z-index: 1;
-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;
}

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

#Right + label {
text-decoration:none;
position:absolute;
top:524px;
left:233px;
border-radius:0%;
height:3%;
width:1%;
background-color:;
border:;
-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;
}

#Right:checked ~ .menu3 {
opacity: 1;
z-index: 1;
-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;
}

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

#Down+ label {
text-decoration:none;
position:absolute;
top:560px;
left:195px;
border-radius:0%;
height:2%;
width:1%;
background-color:;
border:;
-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;
}

#Down:checked ~ .menu4 {
opacity: 1;
z-index: 1;
-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;
}


#content{padding-top:10px;padding-left:25px;padding-right:25px;text-align:left;font-family:play;font-size:12px;}


.poke{position:absolute;top:139px;left:297px;height:216px;;background-color:#;width:292px;border-radius:2%;border:;text-align:left;opacity:0;z-index:2;transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;overflow:auto;}
.menu:target{z-index:1;opacity:1;transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;}

.poke:target {
opacity: 1;
z-index: 1;
transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
}

#content2{padding-top:10px;padding-left:10px;padding-right:10px;text-align:center;font-family:play;font-size: 12px;}

td.pokie{
line-height: 65px;
width: 80px;
padding: 0px;
text-align: left;
}

#credit{ position: fixed;
left: 10px;
bottom: 0px;
font-family: PLAY;
font-variant: normal;
font-weight: normal;
font-size: 16PX;
color: #FF0000;
z-index:1;}


</style>

<div id="credit">
<a href="profile.php?user=Pachi" target="_blank" title="Note: You must double click the arrows!!
Once to bring up the page and once to make it go away.
Or they will overlap!
The Pokemon sprites are clickable for more information.
Code was done by Pachi with the help of Eika.">HOVER HERE FOR INSTRUCTIONS!!!</a>
</div>


<div id="dex"><img src="http://i.imgur.com/IKXG12T.png"></div>
<img src="http://i.imgur.com/pbv8pDC.png" height="100%" style="position:fixed; bottom:0%; right: 0%;">
</div>

<input type="checkbox" name="toggle" id="Up" />
<label for="Up">▲</label>

<div class="menu">
<div id="content">
<b>Bold</b> tab1 <a href="link.com">Link</a>

</div></div>


<input type="checkbox" name="toggle" id="Left" />
<label for="Left">◀</label>

<div id="2" class="menu2">
<div id="content">
tab 2

</div>
</div>


<input type="checkbox" name="toggle" id="Right" />
<label for="Right">▶</label>

<div id="3" class="menu3">
<div id="content">
<table>
<tr>
<td class="pokie"><a href="#PD1"><img src="http://i.imgur.com/5c3MNAg.gif"></a></td><td class="pokie"><a href="#PD2"><img src="http://i.imgur.com/uB7CmRa.gif"></a></td><td class="pokemontab"><a href="#PD3"><img src="http://i.imgur.com/GahjKHI.gif"></a></td>
</tr><tr>
<td class="pokie"><a href="#PD4"><img src="http://i.imgur.com/L5Ye2sG.gif"></a></td><td class="pokie"><a href="#PD5"><img src="http://i.imgur.com/e2pJWmq.gif"></a></td><td class="pokie"><a href="#PD6"><img src="http://i.imgur.com/I35KTbK.gif"></a></td>
</tr>
</table>

</div>
</div>


<input type="checkbox" name="toggle" id="Down" />
<label for="Down">▼</label>

<div id="4" class="menu4">
<div id="content">
tab 4

</div>
</div>


<div id="PD1" class="poke"><div id="content2">
<div style="float:left;">
test
</div></div></div>

<div id="PD2" class="poke"><div id="content2">
<div style="float:left;">
test2
</div></div></div>

<div id="PD3" class="poke"><div id="content2">
<div style="float:left;">
test3
</div></div></div>

<div id="PD4" class="poke"><div id="content2">
<div style="float:left;">
test4
</div></div></div>

<div id="PD5" class="poke"><div id="content2">
<div style="float:left;">
test5
</div></div></div>

<div id="PD6" class="poke"><div id="content2">
<div style="float:left;">
test6
</div></div></div>