Code -6 tabs

-----------<Javascript part Just delete this, it's the divider>-----------

$(document).ready(function(){
    $('.wrapper').slideDown('slow');
    $('#navButton').click(function(){
        $('.menu').slideToggle('slow');
      togglemenu();
    });
});

function togglemenu() {
var div = document.getElementById("navButton");

if (div.className == "closed") {open();}
else{close();}
}

function open() {
document.getElementById("navButton").innerHTML="- Close -   <div class=\"bar left\"></div><div class=\"bar top\"></div><div class=\"bar right\"></div><div class=\"bar bottom\"></div>";
document.getElementById("navButton").className = "open";
}

function close() {
document.getElementById("navButton").innerHTML="- Menu - <div class=\"bar left\"></div><div class=\"bar top\"></div><div class=\"bar right\"></div><div class=\"bar bottom\"></div>";
document.getElementById("navButton").className="closed";
}

//gallery stuff

$(".galleryItem").mouseenter(function() {
  var thisoverlay = $(this).find('.galleryOverlay');

  thisoverlay.stop(true, true).animate({
    height: '200',
    marginTop: '-230px'
  });
});

$(".galleryItem").mouseleave(function() {
  var thisoverlay = $(this).find('.galleryOverlay');

  thisoverlay.stop(true, true).animate({
    height: '20',
    marginTop: '-45px'
  });
});

-----------<CSS-Just delete this, it's the divider>-----------
@import url(https://fonts.googleapis.com/css?family=Audiowide);
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);

* {
  margin: 0;
  padding: 0;n
}




body {
  background-image: url("http://i.imgur.com/RGrbt5o.png");
  background-repeat: repeat;
  background-size: 100% 100%;
  background-position: bottom right;
  font-family: 'Audiowide', Helvetica;
  line-height: 26px;
  color:#563333;
  text-shadow: 0 0 0.4em #f47142;
  padding:15px;
  margin: 0;

}


.bar{
  background: #f47142;
  box-shadow: 0px 0px 0 #f47142,
    0px 0px 4px #f47142,
    0px 0px 8px #f47142,
    0px 0px 16px #FFF;
  border-radius: 4px;
  position: absolute;
}
.left{
  width: 2px;
  -webkit-animation: left 10s linear infinite;
  -moz-animation: left 10s linear infinite;
}
@-webkit-keyframes left{
  0%  {height: 0; top: 100%; left: 0;}
  20% {height: 100%; top: 0; left: 0;}
  40% {height: 0; top: 0; left: 0;}
}
@-moz-keyframes left{
  0%  {height: 0; top: 100%; left: 0;}
  20% {height: 100%; top: 0; left: 0;}
  40% {height: 0; top: 0; left: 0;}
}
.top{
  height: 2px;
  -webkit-animation: top 10s linear infinite;
  -moz-animation: top 10s linear infinite;
}
@-webkit-keyframes top{
  0%  {width: 0; top: 0; left: 0;}
  20% {width: 0; top: 0; left: 0;}
  40% {width: 100%; top: 0; left: 0;}
  60% {width: 0; top:0; left: 100%;}
}
@-moz-keyframes top{
  0%  {width: 0; top: 0; left: 0;}
  20% {width: 0; top: 0; left: 0;}
  40% {width: 100%; top: 0; left: 0;}
  60% {width: 0; top:0; left: 100%;}
}
.right{
  width: 2px;
  -webkit-animation: right 5s linear infinite;
  -moz-animation: right 5s linear infinite;
}
@-webkit-keyframes right{
  0%  {height: 0; top: 0; left: 100%;}
  40% {height: 0; top: 0; left: 100%;}
  60% {height: 100%; top: 0; left: 100%;}
  80% {height: 0; top: 100%;left: 100%;}
}
@-moz-keyframes right{
  0%  {height: 0; top: 0; left: 100%;}
  40% {height: 0; top: 0; left: 100%;}
  60% {height: 100%; top: 0; left: 100%;}
  80% {height: 0; top: 100%;left: 100%;}
}
.bottom{
  height: 2px;
  -webkit-animation: bottom 5s linear infinite;
  -moz-animation: bottom 5s linear infinite;
}
@-webkit-keyframes bottom{
  0%  {width: 0; top: 100%; left: 100%;}
  60% {width: 0; top: 100%; left: 100%;}
  80% {width: 100%; top:100%; left: 0px;}
  100% {width: 0px; top:100%; left: 0px;}
}
@-moz-keyframes bottom{
  0%  {width: 0; top: 100%; left: 100%;}
  60% {width: 0; top: 100%; left: 100%;}
  80% {width: 100%; top:100%; left: 0px;}
  100% {width: 0px; top:100%; left: 0px;}
}

.cs{
  font-family: 'Audiowide', Helvetica;
  font-size: 3em;
  line-height: 26px;
  color:#f47142;
  text-shadow: 0 0 0.4em #f47142;
  padding-bottom:10px;
  padding-left:25px;
  margin-top:50px;
  margin-left:20%;
  margin-right: 20%;
  position:relative;
  z-index:4;
  border-bottom:3px dotted #E6E6E6;
  border-left:25px solid #E6E6E6;
  opacity:.9;
  //display:none;
}

@-webkit-keyframes blink{
  0%  {border-left:25px solid #E6E6E6;}
  50% {border-left:25px solid #222;}
  100% {border-left:25px solid #E6E6E6;}
}
@-moz-keyframes blink{
  0%  {border-left:25px solid #E6E6E6;}
  50% {border-left:25px solid #222;}
  100% {border-left:25px solid #E6E6E6;}
}

.cs:hover{
  opacity:1;
  text-shadow: 0 0 .6em #f47142;
  -webkit-animation: blink 1s ease infinite;
  -moz-animation: blink 1s ease infinite;
}

p{
  color:#f47142;
}

.circle.cir{
  position:absolute;
  left:13%;
  height:75px;
  width:75px;
  border-radius: 75px;
  -moz-border-radius: 75px;
  -webkit-border-radius: 75px;
  background:#f47142;
  z-index:4;
  box-shadow: 0px 0px 15px #f47142;
}

.c{
  position:relative;
  color:#222;
  font-size:3em;
  line-height: 27px;
  left:17px;
  top:25px;
  text-shadow: 0 0 0.4em #222;
}

.wrapper {
  width: 70%;
  padding: 1%;
  margin: 2% auto;
  border:1px solid #f47142;
  border-radius:5px;
  box-shadow: 0px 0px 15px #ffe763;
  position:relative;
  z-index:2;
  background: rgba(160,36,36,.6);
  opacity:.9;
  display: none;
  min-height: 500px;
}


.clear {
  clear: both;
}

.circle.one {
border: 15px solid;
top: -27px;
left: -27px;
position: absolute;
border-color: rgba(200,200,255,0.3) rgba(200,200,255,0.3) rgba(0,0,0,0) rgba(0,0,0,0);
border-radius: 50%;
margin: 0px;
height: 100px;
width: 100px;
z-index:-1;

 animation: move 10s ease infinite;
-moz-animation: move 10s ease infinite;
-webkit-animation: move 10s ease infinite;
-o-animation: move 10s ease infinite;
}

.circle.two {
border: 3px dotted;
padding: 0px;
margin: 0px;
border-color: rgba(183,110,0,0.7) rgba(0,0,0,0);
border-radius: 50%;
top: -66px;
left: -40px;
height: 150px;
width: 150px;
position:relative;

animation: move 15s ease infinite;
-moz-animation: move 15s ease infinite;
-webkit-animation: move 15s ease infinite;
-o-animation: move 15s ease infinite;
}


.circle.three {
color: #000;
border: 25px solid;
padding: 0px;
margin: 10px;
position: absolute;
z-index:-1;
border-color: rgba(255,255,255,0.7) rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);
border-radius: 50%;
top: -6px;
left: -6px;
height: 90px;
width: 90px;
animation: move 25s ease infinite;
-moz-animation: move 25s ease infinite;
-webkit-animation: move 25s ease infinite;
-o-animation: move 25s ease infinite;
}

@keyframes move
{
0%   {transform: rotate(0deg);}
50%{transform: rotate(200deg);}
100% {transform: rotate(0deg);}
}

@-webkit-keyframes move
{
0%   {-webkit-transform: rotate(0deg); -webkit-transform-origin: center;}
50%{-webkit-transform: rotate(200deg); -webkit-transform-origin: center;}
100% {-webkit-transform: rotate(0deg); -webkit-transform-origin: center;}
}

@-moz-keyframes move
{
0%   { -moz-transform: rotate(0deg);}
50%{ -moz-transform: rotate(200deg);}
100% { -moz-transform: rotate(0deg);}
}

@-o-keyframes move
{
0%   {-o-transform: rotate(0deg);}
50%{-o-transform: rotate(200deg);}
100% {-o-transform: rotate(0deg);}
}


a:link {
  text-decoration:none;
  color: #FFFFFF;
}
a:visited {text-decoration:none; color: #FFFFFF;}


 .my{
position:absolute;
top:5%;
left:5%;
width:75%;
height: 450px;
background: #0b0f16;
opacity: 0.85;
 filter: alpha(opacity=85);
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;}

#nav {
 position: absolute;
 height: 5%;
 width: 40%;
 top: 9%;
 right: 20.5%;
 font-family: 'lato';
 font-size: 50px;
 animation: shuffle 3s 1;
 -webkit-animation: shuffle 3s 1;
 z-index: 99;}

#bio, #persona, #info, #friends, #skills, #ooc {
 height:96%;
 width:95%;
 overflow:auto;
 font-family: 'Lato';
 font-size: 2vh;
 letter-spacing: -1.5px;
 padding: 10px;
 z-index:1;
 }



@keyframes shuffle{
 from{
 bottom: -50%;
 opacity: 0;
 }
}

@-webkit-keyframes shuffle{
 from{
 bottom: -50%;
 opacity: 0;
 }
}

#host{
 height: 100%;
 width: 100%;
 overflow: hidden;
 z-index: 22;
 }
.r {float:right;}

.pushit{
 animation: shuffle 3s 1;
 -webkit-animation: shuffle 3s 1;
 }

h2{
font-size: 22px;
width: 100%;
color: #f5973c;
font-family: 'Audiowide';
letter-spacing: 4px;
font-weight: normal;
line-height: 16px;
text-transform: uppercase;
text-align: center;
border-bottom: 1px solid #fff;}

h3{
font-size: 16px;
width: 100%;
color: #f5973c;
font-family: 'Audiowide';
letter-spacing: 4px;
font-weight: normal;
line-height: 16px;
text-transform: uppercase;
text-align: center;
border-bottom: 1px solid #fff;}

.wrapper{
height:19px;
line-height:18px;
padding:5px;
font-size:15px;
text-align:left;
color:ffe766;
font-family: 'lato';
word-spacing: 5px;}

b{
 color:#f47142; /}



table {
 margin-top:-9px;
 width: 100%;
 margin-left:-2px;
 background-color: transparent;
 border-collapse: collapse;}

td {
 font-size: 11px;
 letter-spacing: 1px;
 height: 100px;
 overflow: auto;}

#rel img {
 margin:8px;
 border:5px solid #fff; /* relationships icon border color */
 width:80px;
 height:80px;
 padding:5px;
 -webkit-transition:all 0.3s ease-out;
 -moz-transition:all 0.3s ease-out;
 transition:all 0.3s ease-out;}

#rel:hover img {
 border:5px solid #529ecc; /* relationships icon border hover color */
 -webkit-transition:all 0.3s ease-out;
 -moz-transition:all 0.3s ease-out;
 transition:all 0.3s ease-out;}

::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-thumb:vertical {
height: 10px;background-color: #ffe763;}
::-webkit-scrollbar-thumb:horizontal {
height: 10px;background-color: #ffe763;border: 0px ;width: 12px;}

.lovely {
position: fixed;
bottom: 50px;
right: 8%;
background-color: transparent;
z-index: 20; }


-----<HTML Just delete this, it's the divider>------------------

 <div id="nav">
 <center><a href="#info"><img src="https://cdn.bigmouthclothing.com/assets/images/designs/resized/300/DES-VIEW-1281-523b14b6215f3.png" width="30px"></a> <a href="#persona"><img src="https://cdn.bigmouthclothing.com/assets/images/designs/resized/300/DES-VIEW-1281-523b14b6215f3.png" width="30px"></a>
<a href="#bio"><img src="https://cdn.bigmouthclothing.com/assets/images/designs/resized/300/DES-VIEW-1281-523b14b6215f3.png" width="30px"></a> <a href="#friends"><img src="https://cdn.bigmouthclothing.com/assets/images/designs/resized/300/DES-VIEW-1281-523b14b6215f3.png" width="30px"></a> <a href="#skills"><img src="https://cdn.bigmouthclothing.com/assets/images/designs/resized/300/DES-VIEW-1281-523b14b6215f3.png" width="30px"></a> <a href="#ooc"><img src="https://cdn.bigmouthclothing.com/assets/images/designs/resized/300/DES-VIEW-1281-523b14b6215f3.png" width="30px"></a></center>
</div>

<div class="pushit"><p id="wrap">

</p>

<h1 class="cs">Son Pan</h1>

<div class="circle cir"><p class="c"><font color="#a02424">✮</font></p>
<div class="circle one"></div>
<div class="circle two">
 <div class="circle three">
</div>
</div>
</div>
<div class="wrapper">

<div class="my">
 <div id="host">
 <div id="info">
 <center><h2>Statistics</h2></center>
<br>
<b>Given Name</b><div class="r">Son Pan</div><br>
<b>Nicknames</b><div class="r">Panny, Pan-chan, Pan</div><bR>
<b>Title</b><div class="r">Hero of Time</div><bR>
<b>Age</b><div class="r">20 y.o</div><bR>
<b>Gender</b><div class="r">Female</div><bR>
<b>Height + Weight</b><div class="r">5'5" + 115 lbs</div><br>
<b>Hair</b><div class="r">Spikey/Bobbed Black//Blond<a href="" target="_blank" title="SSJ">*</a></div><bR>
<b>Eyes</b><div class="r">Black//Green-Teal<a href="" target="_blank" title="SSJ.">*</a></div><bR>
<b>Species//Nationality</b><div class="r">1/4 Human, 3/4 Human</div><bR>
<b>Sexual orientation</b><div class="r">Pansexual</div><bR>
<b>Relationship Status</b><div class="r">Single, uninterested</div><bR>
<b>Affiliation</b>
<div class="r">Time Patrollers/Supreme Kai of Time/Z-warriors</div></br>
<b>Occupation</b><div class="r">Time Patroller <a href="" target="_blank" title="Stranded">*</a></div>


</center> </div>
 <br>
<div id="persona">
 <center><h2>Personality</h2><bR>
<p>---</p> </center>
</div>
<br>
 <div id="bio">
 <center><h2>Biography</h2><bR>
<p> ---</p>
</center>
 </div>
 <br>
 <div id="friends">
 <center><h2>Friends</h2></center>

<br><br>
<table>



<tr><td> <div id="rel">

<a href="/">


<img src="https://orig00.deviantart.net/d2f7/f/2011/018/2/c/bunny_icon_by_artiedrawings-d37h460.jpg" /></a></div></td>


<td><div style="height:100px; overflow:auto">--</div></td></tr>



<tr><td> <div id="rel">

<a href="/">

<img src="https://orig00.deviantart.net/d2f7/f/2011/018/2/c/bunny_icon_by_artiedrawings-d37h460.jp" /></a></div></td>

<td><div style="height:100px; overflow:auto">A </div></td></tr>

<tr><td> <div id="rel">

<a href="/">

<img src="https://orig00.deviantart.net/d2f7/f/2011/018/2/c/bunny_icon_by_artiedrawings-d37h460.jpg" /></a></div></td>

<td><div style="height:100px; overflow:auto">---</div></td></tr>



</table>


 </div>
<br>
 <div id="skills">
 <center><h2>Skills</h2><bR></center><br><br>
<b>Super Saiyan 1-</b>
Pan is capable of going Super Saiyan one and is working towards two.<br>

<b>Flight –</b>
Pan can manipulate her ki to counter gravity and fly.<br>

<b>Ki Blast –</b>
A simple bolt of energy launched at the opponent. Pan's version is yellow.<br>

<b>Ki enfused strikes–</b> Encasing her hands and or feet in a decent amount of Ki she gains an aura or wrap around them giving her more strike power. This ability was self taught.<BR>

<b>Kamehameha –</b>
The legendary energy wave invented by the great Master Roshi, launches a very powerful, whitish-blue blast at the opponent.<br>

<b>Maiden's Rage –</b>
When angered by an enemy, Pan forms a ki orb on each hand and then combines them to unleash a huge ki blast.<br>

<b>Maiden Blast–</b>
A short-ranged version of Maiden's Rage, where combines the energy collected into each hand to create a large energy sphere directly in front of her.<br>

<b>Maiden Flash –</b>
A weaker version of the Maiden's Rage. <br>

<b>Reliable Friend –</b>
Pan charges yellowish-orange energy spheres in both of her hands in a fashion similar to her Maiden's Rage energy wave and fires several powerful energy blasts at a very rapid rate.<br>

<b>Scatter Kamehameha–</b> A kamehameha that bursts into multiply blasts.<Br>

<b>Dual Destructo disk–</b> Learned from Krillin in her own time.<br>

<b>Spirit bomb –</b> Learned from Goku. <br>

<b>Final Shine attack </b><Br>

<b>Spirit Sword</b><Br>

<b>Maiden's Burst –</b><Br>

<b>Masenko –</b>
An energy attack passed down from her father Gohan, who was taught the technique to him by Piccolo. Pan's version is red and orange.<br>

<b>Feint Shot –</b>
Uses Rapid Movement while moving sideways then suddenly reappears to fire off a pink-colored ki blast. <br>

<b>Afterimage Strike –</b>
A technique that allows one to move at high speeds and appear to disappear and reappear. <Br>

<b>Explosive Wave –</b>
Pan uses an Explosive Wave.<br>

<b>Spirit Attack –</b>
A blue blast of energy fired from both hands used by Pan.<br>

<b>Spirit Shot –</b>
A sparkling yellow energy ball with a pink outline.<br>

<b>Destructo-Disc</b><Br>
<b>Solar Flare</b></div>
 <br>

 <div id="ooc">
 <center><h2>OOC/RULES</h2><br><Br>
01. <b>PM friendly 99.9999999% of the time.</b><bR>
02. <b>Don't like how I play her. Please don't approach me then. </b><bR>
03. <b>Code is a heavily modified from open source off of codepen. If you want a copy please PM me. And if you use it please give me some credit.</b><bR>
04. <b>Art commissioned by me. The artist is  Ishida1694 on deviantart. Givem em a look. They have soem good deals going on. </b><bR>
05. <b>Constant work in progress.</b><bR>
06. <b>I can be as sweet as sugar or the biggest bitch you'll ever meet.</b><bR>
07. <b>Smut can happen. Most likely won't though. Story is required though!</b><bR>
08. <b>I play MY character not one you give me.</b><bR>
09. <b>For the most part I'm a nice person.</b><bR>
10. <b> Start with a post if you really want. But I can't promise I'll be up for responding.</b><bR>
11. <b>IC =/= OOC.</b><bR>
 </center>
 </div>
 <br>


 <br>
</div>







</div>
 <div class="bar left"></div>
 <div class="bar top"></div>
 <div class="bar right"></div>
 <div class="bar bottom"></div>
 <div class="clear"></div>
</div>


<div class="lovely">
<img src="https://i.imgur.com/JhOW0uR.png" height="80%"></div>

<div style="position: fixed; bottom: 20px; left: 0px; background-color: transparent;">
<a href="https://roleplay.chat/profile.php?user=Mimi+ray" target="_blank" title="Code was created by MimiRay. Do NOT touch. Please! If you want a copy or want it please ask. She will share. "><img src="http://i.imgur.com/vY7rSz9.png" height="10%"></a>