Another New Character?! A Kitsune.

<style>#profile-container {
  background: none;
}

body {
  background: #00356B;
}

body,
a:hover {
  cursor: url(http://i.imgur.com/cd7ZHDh.png), progress !important;
}

@font-face {
  font-family: text;
  src: url(https://dl.dropbox.com/s/15v1hgh6qf78bw5/Trirong-Regular.ttf?dl=0);
}

@font-face {
  font-family: tabs;
  src: url(https://dl.dropbox.com/s/9pd2xzrybifbnrt/IMFePIrm28P.ttf?dl=0);
}

@font-face {
  font-family: name;
  src: url(https://dl.dropbox.com/s/m9zlr98pa239bxk/typenoksidi.ttf?dl=0);
}

.name {
  z-index: 3;
  position: absolute;
  width: 694px;
  text-align: center;
  font-family: name;
  color: #436B95;
  font-size: 50px;
  left: 30px;
  top: -10px;
}

.pic {
  z-index: 3;
  position: absolute;
  border: 3px solid #436B95;
  left: 100px;
  top: 110px;
  height: 370px;
  width: 230px;
  background: url(https://i.imgur.com/OH3D3TS.jpg) center;
  background-size: auto 100%;
}

.backbox {
  z-index: 1;
  position: absolute;
  background: url(https://cdn.pixabay.com/photo/2016/03/25/22/13/background-1279718_960_720.jpg);
  border: 2px solid #436B95;
  width: 690px;
  height: 410px;
  top: 90px;
  left: 30px;
}

.tabbox {
  z-index: 1;
  position: absolute;
  background: #00356B;
  border-top: 2px solid #436B95;
  border-right: 2px solid #436B95;
  border-bottom: 2px solid #436B95;
  width: 55px;
  left: 30px;
  height: 330px;
  top: 130px;
}

.conbox {
  z-index: 3;
  position: absolute;
  border: 3px solid #436B95;
  width: 344px;
  left: 354px;
  top: 110px;
  height: 370px;
  background: #BCD4E6;
}

.tabs {
  position: absolute;
  width: 3px;

}

.tab label {
  top: 119px;
  left: -3px;
  height: 15px;
  margin: 15px;
  border: none;
  background: #72A0C1;
  width: 50px;
  padding: 5px;
  position: relative;
  z-index: 500;
  font-family: tabs;
  font-size: 12px;
  text-align: center;
  color: #1c1c1c;
  -webkit-transform: rotate(-90deg);
  -webkit-transition: all .5s ease;
}

.tab label:hover {
  background: #5D8AA8;
}

.tab [type=radio] {
  display: none;
}

.content {
  position: absolute;
  top: 121px;
  left: 350px;
  width: 308px;
  height: 334px;
  background: #BCD4E6;
  border: 5px solid #BCD4E6;
  padding: 5px;
  font-size: 13px;
  color: #007FFF;
  font-family: text;
  overflow: auto;
  z-index: 20;
}

[type=radio]:checked ~ label {
  background: #5D8AA8;
}

[type=radio]:checked ~ label ~ .content {
  z-index: 30;
}

table,
th,
td {
  font-family: text;
  font-size: 12px;
  padding: 5px;
}

td:nth-child(odd) {
  color: #007FFF;
}

td:nth-child(even) {
  color: #6CA0DC;
}

a:link,
a:visited,
a:active {
  text-decoration: none;
  color: #737CA1;
  text-shadow: 0 0 2px #848b79, 0 0 5px #617C58;
  -webkit-transition: all .5s ease;
}

a:hover {
  color: #617C58;
  text-shadow: none;
  -webkit-transition: all .5s ease;
}

hr {
  border: none;
  height: 1px;
  background: #617C58;
  width: 280px;
}

img {
  border: 2px solid #848b79;
  width: 79px;
  height: 79px;
  margin: 2px;
  object-fit: cover;
  -webkit-transition: all .5s ease;
}

img:hover {
  border: 2px solid #617C58;
  -webkit-transition: all .5s ease;
  box-shadow: 0 0 2px #848b79, 0 0 5px #617C58;
}

::-webkit-scrollbar {
  width: 4px;
  height: 1px;
}

::-webkit-scrollbar-thumb {
  background: #89CFF0;
  border: 1px solid #BCD4E6;
}

::-webkit-scrollbar-track {
  background: #BCD4E6;
}</style>
<div class="pic">
  <p>&nbsp;</p>
</div>
<div class="name">
  <p>Takumi Issui</p>
</div>
<div class="conbox">
  <p>&nbsp;</p>
</div>
<div class="backbox">
  <p>&nbsp;</p>
</div>
<div class="tabbox">
  <p>&nbsp;</p>
</div>
<div class="tabs">
  <br />
<table><td>
  <div class="tab">
    <input id="tab-1" checked="checked" name="tab-group-2" type="radio" />
    <label for="tab-1">Info<font style="visibility:hidden;">....</font></label>
    <div class="content">
      <p>&nbsp;</p>

      <table border="0" cellspacing="0" width="312">
        <tbody>
          <tr>
            <td style="text-align: right;">Alias</td>
            <td colspan="2" style="text-align:center;">Tai, Kamui, Tak, Taku</td>
          </tr>
          <tr>
            <td style="text-align: right;">Age</td>
            <td>122 (One Hundred Twenty-Two)</td>
            <td style="text-align: right;">Gender</td>
            <td>M</td>
          </tr>
          <tr>
            <td style="text-align: right;">Height</td>
            <td>6'2</td>
            <td style="text-align: right;">Weight</td>
            <td>180lbs</td>
          </tr>
          <tr>
            <td style="text-align: right;">Sexuality</td>
            <td>???</td>
            <td style="text-align: right;">Status</td>
            <td>Single</td>
          </tr>
        <tr>
            <td style="text-align: right;">Species</td>
            <td><a data-toggle="tooltip" title="The more tails a kitsune has the more powerful it is. A Kitsune grows another tail for every one hunred years it lives for.

Common forms assumed by kitsune include beautiful women, young girls, or elderly men. These shapes are not limited by the fox's age or gender. Foxes are particularly renowned for impersonating beautiful women. Common belief in medieval Japan was that any woman encountered alone, especially at dusk or night, could be a fox.

Kitsune have difficulty hiding their tails when they take human form; looking for the tail, perhaps when the fox gets drunk or careless, is a common method of discerning the creature's true nature. A particularly devout individual may in some cases even be able to see through a fox's disguise merely by perceiving them. Kitsune may also be exposed while in human form by their fear and hatred of dogs, and some become so rattled by their presence that they revert to the form of a fox and flee.">Kitsune</a></td>
            <td style="text-align: right;">Occupation</td>
            <td>Pirate</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</td><tr><td>
  <div class="tab">
    <input id="tab-2" name="tab-group-2" type="radio" />
    <label for="tab-2">Power<font style="visibility:hidden;">.</font></label>
    <div class="content">
      <p style="text-align: left;">WIP</p>
    </div>
  </div></td><tr><td>
  <div class="tab">
    <input id="tab-3" name="tab-group-2" type="radio" />
    <label for="tab-3">Story<font style="visibility:hidden;">..</font></label>
    <div class="content">
      <p style="text-align: left;">Coming Soon?</p>
    </div>
  </div>
</td></table>