<style>
  .clearfix {
    margin-top: -125px;
  }
  br {
    line-height: 0px;
  }
  td td td br {
    line-height: auto;
  }
  table,
  tr,
  td {
    background-color: transparent !important;
  }
  table table {
    visibility: hidden;
  }
  table table table,
  table.blurbs td.text,
  span.orangetext15,
  #footerWarpper {
    display: none;
  }
  div table,
  table.blurbs,
  table.blurbs table {
    visibility: visible;
    display: table;
    _display: inline;
  }
  div div table div,
  div.clearfix a,
  input {
    display: none;
  }
  div.clearfix table div div,
  #footerWarpper {
    display: block;
  }



body {
background-image: url(https://i.imgur.com/Az6Ut21.png);
 font-family: arial;
    font-size: 8px;
    color: #b2b2b2;
}

 .container {
background-color: #transparent;
    width: 300px;
    height: 300px;
    margin: auto;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

.navi {
  background-color: #transparent;
  width: 15px;
  height: 100px;
  position: absolute;
  margin-left: 280px;
  margin-top: 10px;
}

.navi a {
  text-decoration: none;
  font-family: calibri;
  font-size: 10px;
  display: block;
  margin-top: 5px;
  color: #377378;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.navi a:hover {
  color: #377378;
}

.kisepic {
  background-color: #000000;
  position: absolute;
  width: 100px;
  height: 230px;
  padding: 10px;
  border: solid 1px #2f787e;
}

.headtitle {
  background-color: #000000;
  position: absolute;
  width: 150px;
  height: 50px;
  margin-left: 122px;
  border-top: solid 1px #2f787e;
  border-bottom: solid 1px #2f787e;
  border-right: solid 1px #2f787e;
}

.headtitle h1 {
  font-size: 20px;
  padding: 0px;
  text-align: right;
  margin: 13px 10px 0px 0px;
  color: #2f787e;
  font-family: ms mincho;
  font-weight: lighter;
}

.textbox {
  position: absolute;
  background-color: #000000;
  width: 150px;
  height: 170px;
  margin-left: 122px;
  margin-top: 50px;
  border-top: solid 1px #;
  border-bottom: solid 1px #d5d5d5;
  border-right: solid 1px #d5d5d5;
}

.musicbox {
  position: absolute;
  background-color: #000000;
  width: 150px;
  height: 30px;
  margin-top: 220px;
  margin-left: 122px;
  border-top: solid 1px #d5d5d5;
  border-bottom: solid 1px #d5d5d5;
  border-right: solid 1px #d5d5d5;
}

.player {
    background-color: #a70;
    position: absolute;
    overflow: hidden;
    width: 20px;
    margin-top: 4px;
}

.songtitle {
    background-color: #transparent;
    position: absolute;
    width: 120px;
    height: 20px;
    margin-top: 10px;
    margin-left: 30px;
      font-family: calibri;
  color: #939393;
  font-size: 8px;
  text-transform: uppercase;
}
.quote {
  background-color: #transparent;
  position: absolute;
  width: 274px;
  height: 40px;
  margin-top: 250px;
}

.quote h1 {
  font-family: calibri;
  color: #939393;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-align: left;
  padding: 0;
  margin: 2;
}

.quote h2 {
  font-family: calibri;
  color: #939393;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-align: right;
  margin-top: -3px;
  padding: 0;
}

.tabs input[type=radio] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.tabs {
  width: 150px;
  float: none;
  list-style: none;
  position: relative;
  padding: 0;
  margin-top: -5px;
  margin-left: 1px;
}
.tabs li {
  float: left;
}
.tabs label {
  text-align: center;
  display: inline-block;
  padding: 0px;
  color: #377378;
  font-size: 7px;
  line-height: 10px;
  letter-spacing: 2px;
  width: 49px;
  height: 10px;
  text-transform: uppercase;
  font-family: calibri;
  position: relative;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.tabs label:hover {
  background-color: #000000;
  color: #ffffff;
}

[id^=tab]:checked + label {
  background: #377378;
  color: #ffffff;
  letter-spacing: 3px;
}

[id^=tab]:checked ~ [id^=tab-content] {
  display: block;
}
.tab-content {
  z-index: 2;
  display: none;
  font-family: calibri;
  color: #939393;
  font-size: 8px;
  letter-spacing: .5px;
  width: 120px;
  height: 140px;
  text-transform: uppercase;
  text-align: justify;
  background: #transparent;
  position: absolute;
  top: 25px;
  left: 13px;
  padding-right: 7px;
  overflow: auto;
  -webkit-animation-duration: 0.7s;
  -o-animation-duration: 0.7s;
  -moz-animation-duration: 0.7s;
  animation-duration: 0.7s;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInDown {
  animation-name: fadeInDown;
}

::-webkit-scrollbar {
  width: 2px;
  height: 10px;
  padding-top: 40px;
}

::-webkit-scrollbar-track {
  background-color: #ffffff;
}

::-webkit-scrollbar-thumb {
  background-color: #377378;
  height: 30px;
  width: 2px;
}

::-webkit-scrollbar-track-piece {
  height: 30px;
  width: 30px;
  padding-left: 10px;
}

::-moz-selection, ::selection {
  background-color: #377378;
  color: #000;
}

::selection {
  background-color: #377378;
  color: #000;
}

b {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 9px;
  text-transform: uppercase;
  color: #377378;
}

i {
  font-family: georgia;
  font-size: 11px;
  color: #e4d1d3;
  letter-spacing: -1px;
}


</style>



<style>
.lovely {
  position: fixed;
  right: 3px;
  bottom: 3px;
}

.lovely a {
  font-family: calibri;
  font-size: 9px;
  text-transform: uppercase;
  color: #a1a1a1;
  letter-spacing: 0px;
  text-decoration: none;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
}

.lovely a:hover {
  color: #000;
}
</style>


<div class="lovely">
  <a href="http://loveatelier.tumblr.com/sites">R</a>
</div>






<div class="container">
  <div class="navi">
    <a href="/home.php">H</a>
    <a href="/send_message.php?member_id=472137">M</a>
    <a href="/add_comment.php?member_id=472137">C</a>
    <a href="/gallery.php?member_id=472137">P</a>
  </div>

  <div class="kisepic">
    <img src="https://i.imgur.com/D0iql7U.png">
  </div>
  <div class="headtitle">
    <h1>時透 無一郎</h1>
  </div>


  <div class="textbox">
    <ul class="tabs">
      <li>
        <input type="radio" checked name="tabs" id="tab1">
        <label for="tab1">main</label>
        <div id="tab-content1" class="tab-content animated fadeInDown">
          Muichiro Tokito (時とき透とう 無む一いち郎ろう Tokitō Muichirō?) is a Demon Hunter and the Mist Pillar of the Demon Killing Corps.
<br>
<br>
<center><B>Name</B>
Tokitō Muichirō</i><br><br>
<b>Nickname(s)</b>  Give me some?<br><br>
<B>Alias</B>  Mist Pillar <br><br>
<b>Gender</b> Male<br><br>
<B>Age</B> 14<br><br>
<b>Affiliation</b> Demon Killing Corps<br><br>
<B>Occupation</B> Demon Hunter | Pillar<br><br>
<b>Species</b> Human<br><br>


        </div>
      </li>
      <li>
        <input type="radio" name="tabs" id="tab2">
        <label for="tab2">Details</label>
        <div id="tab-content2" class="tab-content animated fadeInDown">
         <center>Muichiro is an air-headed individual who seems to constantly wander off in thought and never focus on one thing. However, he has been shown to get serious at times and is devoted to his work as a Demon Hunter and the Mist Pillar. Impassive and at times obtuse, Muichiro tends to think only for himself and operates on logic alone.
<br><br>
Muichiro's original personality was much more caring and kind having taken after his father. Despite this, he always held an omnipresent rage deeply suppressed inside of him that inevitably drove his training. After his memories returned, Muichiro has been more emotive such as displaying sarcasm and smugness towards the fifth upper moon, Gyokko.
        </div>
      </li>
      <li>
        <input type="radio" name="tabs" id="tab3">
        <label for="tab3">Abilities</label>
        <div id="tab-content3" class="tab-content animated fadeInDown">

          <center><b>First Form: Hanging Sky, Distant Mist </b> <br><br>A straightforward thrust attack.<br><br>
          <b>Second Form: Eight Layered Mist</b> <br><br>Muichiro unleashes multiple slashes one on top of the other in quick succession.<br><br>
          <b>Third Form: Demisting Blast</b> <br><br>A circular slash that blows away projectile attacks from enemies.<br><br>
          <b>Fourth Form: Advection Slash</b> <br><br>A quick slash from the sheathe reminiscent of an Iaidō technique.<br><br>
          <b>Fifth Form: Sea of Clouds and Haze</b> <br><br>Muichiro charges towards an enemy attack at high speed and unleashes a flurry of slashes.<br><br>
          <b>Six Form: Moonlit Mist</b> <br><br>Muichiro leaps high in the air and sends a series of countless ranged slashes downwards. <br><br>
          <b>Seventh form: Haze</b> <br><br>A technique in which Muichiro drastically changes the tempo of his movement to disorient an enemy. When he shows himself, his speed will appear to be extremely slow but when he hides, he moves in the blink of an eye.<br>



        </div>
      </li>
    </ul>

  </div>


  <div class="musicbox">
  <div class="player">

</div>
<div class="songtitle">
    <b>Moonlit Mist</b>
</div>
  </div>
  <div class="quote">
    <h1>I tried to catch some fog</h1>
    <h2>But I mist.</h2>
  </div>
 </div>

<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Open+Sans+Condensed:300|Oswald|Rochester" rel="stylesheet">