Riot

<style>

@font-face{
  src:url(https://dl.dropboxusercontent.com/u/4556289/DEMON%20SKER.ttf);
  font-family:'titlefont';
}

@font-face{
  src:url(https://dl.dropboxusercontent.com/u/4556289/Monitorica-Rg.ttf);
  font-family:'bodyfont';
}

::-webkit-scrollbar{
  background-color: transparent;
  width: 5px;
}

::-webkit-scrollbar-thumb{
  background-color: #1A1F25;
}

body{
  overflow: hidden;
  background-color: #2a2c2c ;
  background-image:url(http://i.imgur.com/Gr9UOBO.png);
}

#whole{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow: hidden;
  background-image:url(http://i.imgur.com/xRFc7YH.png);
  background-repeat: no-repeat;
  background-size: auto 170%;
  background-position: center right 10%;
}

#whole *{
  box-sizing: border-box;
}

#contentarea{
  position: absolute;
  top: 0px;
  right: 50vw;
  bottom: 0px;
  margin: auto;
  height: 430px;
  width: 230px;
  z-index: 0;
  box-shadow: 0px 0px 3px black;
}

#contentarea:before{
  content:'';
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
    box-shadow: 0px 0px 5px 3px black;
  background-image:url(http://i.imgur.com/qqI0E9J.png);
  background-color: #b1b8ba;}

#contentarea:after{
  content:'Riot';
  position: absolute;
  left: 7px;
  right: 0px;
  top: -40px;
  font-size: 30pt;
  font-family:'titlefont';
  letter-spacing: 20px;
  color: #b1b8ba;
  text-shadow: 0px 0px 5px black;
}



.contentcontent{
  position: absolute;
  top: 40px;
  left: 37px;
  right: 0px;
  bottom: 7px;
  z-index: 5;
  overflow: auto;
  font-family:'bodyfont';
  font-size: 12pt;
  text-align: justify;
  padding: 2px;
  padding-right: 8px;
  padding-top: 5px;
  color: black;
  text-shadow: 0px 0px 1px black;
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0;
  letter-spacing: .2px;
  line-height: 17px;
}

.contentcontent a{
  color: black;
  font-weight: 800;
}

#content1{
  opacity: 1;
  -webkit-transition: all 1s 1s;
  transition: all 1s 1s;
  z-index: 6;
  letter-spacing: 0px;
  right: 7px;
}

#div2:target ~ #whole #content2,
#div3:target ~ #whole #content3{
  opacity: 1;
  z-index: 6;
  -webkit-transition: all 1s 1s;
  transition: all 1s 1s;
  letter-spacing: 0px;
  right: 7px;
}

#div2:target ~ #whole #content1,
#div3:target ~ #whole #content1{
  opacity: 0;
  z-index: 5;
  letter-spacing: 0.2px;
  right: 7px;
  -webkit-transition: all 1s;
  transition: all 1s;
}

#multicat{
  position: absolute;
  top: 5px;
  left: 4px;
  right: 5px;
  height: 30px;
  z-index: 5;
  background: rgba(0, 0, 0, 0.7);
  box-shadow: 0px 2px 1px .5px black;
  font-family:'bodyfont';
  color: black;
  font-weight: 600;
  font-size: 12pt;
  text-align: center;
  padding-top: 5px;
}

#multicat b{
  color: #b1b8ba;
}

#catsel{
  position: absolute;
  left: 5px;
  top: 36.6px;
  bottom: 5px;
  width: 32px;
  border: 0px solid red;
  overflow: hidden;
}

#catsel a{
  float: left;
  height: 92.6px;
  margin-top: 4px;
  width: 30px;
  background: rgba(0, 0, 0, 0.7);
  text-align: justify;
  word-break: break-all;
  box-shadow: 1px 0px 1px 1px black;
  border-bottom: 1px solid rgba(0, 0, 0, 0.8);
  border-top: 1px solid rgba(0, 0, 0, 0.8);
  font-family:'bodyfont';
  color: black;
  font-weight: 600;
  font-size: 25pt;
  text-decoration: none;
  overflow: hidden;
  padding-top: 23px;
  text-align: center;
  -webkit-transition: all 1s;
  transition: all 1s;
}

#catsel a:nth-child(1){
  background: rgba(0, 0, 0, 0.9);
  color: #012D35;
}

#div2:target ~ #whole #catsel a:nth-child(1),
#div3:target ~ #whole #catsel a:nth-child(1){
  background: rgba(0, 0, 0, 0.7);
  color: black;
}

#div2:target ~ #whole #catsel a:nth-child(2),
#div3:target ~ #whole #catsel a:nth-child(3){
  background: rgba(0, 0, 0, 0.9);
  color: #012D35;
}

#catsel a:nth-child(2),
#catsel a:nth-child(3){

}

#catsel a:hover{
  color: #b1b8ba;
  background: rgba(0, 0, 0, 0.9);
}

#catsel a audio{
    zoom: 297%;
    position: Relative;
    top: -22px;
  opacity: 0;
}

#catsel a:nth-child(4):active{
  color: #012D35;
  -webkit-transition: all .05s;
  transition: all .05s;
}


</style>

<div id="div2"></div>
<div id="div3"></div>

<div id="whole">

  <div id="contentarea">
    <div id="multicat">
      seraph / <b>the gardener</b> / 6'5" / male
    </div>
    <div id="catsel">
      <a href="#">I</a>
      <a href="#div2">II</a>
      <a href="#div3">III</a>
      <a>M
        <audio controls src="http://k003.kiwi6.com/hotlink/ydhcb27vab/glxy_-_3_am_VOL.mp3" loop=3></audio></a>
    </div>
    <div class="contentcontent" id="content1">
      <span style="text-align:left; position: absolute; word-spacing: 5px; top: 3px;">
        <i>"Trees are earth's endless effort to speak to the listening heaven." <br>- <b>Rabindranath Tagore</b></i></span>
      <br><br>
      <br><br><br>
      <i>The Gardener</i>.<br>
      Riot is tasked with maintaining the multi-dimensional nexus and structural pillar that is the Great Tree, <i>Yggdrasil</i>. This is a task he takes to with great love, traveling through bough and bush tirelessly and adjusting the various small issues that crop up. In the role of tending to its needs, Riot is enabled to act as its defender. Violence is rarely needed, but when required the seraph will commit himself without hesitation.<br><br>As the Tree can primarily maintain itself with only some light assistance for the most part, Riot has a fair amount of free time that is often used in greeting travelers who visit this often confusing destination and acting as a guide. When not engaged with this, he can most often be found simply observing others and sipping various teas.
    </div>

    <div class="contentcontent" id="content2">
      <i>The Seraphim</i> are often regarded as the highest of the celestial order within the <i>Angelic Hierarchy</i> with abilities that reflect their status.<br><br>
      More easily defined abilities include...
      <ul>
        <li>Flight</li>
        <li>Telepathy</li>
        <li>Telekinesis</li>
        <li>Supernatural strength</li>
        <li>Invulnerability</li>
      </ul>

      ... though it should be noted that these are not the least of their abilities, with each being capable of the highest strength and intensity.
    </div>


    <div class="contentcontent" id="content3">
      Code is <a href="http://roleplay.chat/profile.php?user=Digital" target=_blank>mine</a>.<br>
      Character art is owned.<br>
      Artist is <a href="http://furaffinity.net/user=kiguri" target=_blank>kiguri</a>.<br>

    </div>

  </div>

</div>