Arc

<style>

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

@font-face{
 src:url(https://dl.dropboxusercontent.com/u/4556289/decindar.ttf);
 font-family:'oocfont';
 src:url(https://dl.dropboxusercontent.com/u/4556289/Heartbeat%20Synchronicity.ttf);
}

@font-face{
 src:url(https://dl.dropboxusercontent.com/u/4556289/NOsferatu.TTF);
 font-family:'detailfont';
}

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

::-webkit-scrollbar
{
	width: 4px;
 background-color: #D2C0C1;
background-color: #571209;
}

::-webkit-scrollbar-thumb
{
	border-radius: 0px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: black ;
box-shadow: 0px 0px 3px #571209;
border-radius: 5px;

}

#whole{
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background-image:url(http://i.imgur.com/lgmSQ5n.png);
 background-size: cover;
 background-position: center;
 background-color: black;
border: 10px solid black;
border-left: 20px solid black;
border-right: 20px solid black;
}

#infobox{
 position: absolute;
 top: 0%;
 left: 0px;
 right: 2%;
 bottom: 0px;
 margin: auto;
 height: 400px;
 width: 250px;
 border: 0px solid black;
 border-radius: 5px;
 background-color: rgba(0,0,0,0.85);
 box-shadow: 0px 0px 10px #571209;
 -webkit-transition: all 2s 2s ease-in;
 transition: all 2s 2s ease-in;
 opacity: 0;
}

#whole:hover #infobox{
 -webkit-transition: all 2s ease-in-out, opacity 3s;
 transition: all 2s ease-in-out, opacity 3s;
 opacity: 1;
 top: 20%;
}

#infobox:before{
 content:'';
 position: absolute;
 top: 4px;
 left: 4px;
 right: 4px;
 bottom: 4px;
 box-sizing: border-box;
 box-shadow: 0px 0px 5px #571209;
}

#contentbox{
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 z-index: 1;
 overflow: hidden;
 box-sizing: border-box;
}

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

#headerbox{
 position: absolute;
 top: 5px;
 left: 0px;
 right: 0px;
 height: 40px;
 border-bottom: 0px solid red;
 font-family:'headerfont';
 font-size: 20pt;
 color: rgba(255, 0, 0, 0.29);
 text-align: left;
 overflow: hidden;
 padding: 10px;
 letter-spacing: 3px;
 text-shadow: -1px 0px 2px #571209;
}

.miniexplain{
 float: right;
 margin-top: -5px;
 right: 10px;
 height: 17px;
 width: 100px;
 border: 0px solid red;
 font-size: 13pt;
 text-align: center;
 letter-spacing: 1px;
 color: #571209;
 text-shadow: 0px 0px 1px black;
}

.miniexplain:nth-child(2){
 margin-top: -13px;
}

#explainbox{
 position: absolute;
 top: 49px;
 left: 0px;
 right: 0px;
 height: 80px;
 border-top: 0px solid white;
 border-bottom: 0px solid white;
 font-family:'explainfont';
 font-size: 11pt;
 color: #FE4F17;
 text-shadow: 0px 0px 10px black;
 letter-spacing: 1px;
 padding: 5px;
}

#explainbox b{
 float: left;
 text-align: center;
 width: 57px;
 height: 20px;
 box-sizing: border-box;
 padding-top: 2px;
 letter-spacing: 1px;
 margin-top: 2px;
 font-weight: 400;
 font-style: italic;
}

#explainbox b:nth-child(odd){
 border-right: 0px solid transparent;
 border-radius: 5px 0px 0px 5px;
 background: rgba(255, 0, 0, 0.29);
 color: gray;
 margin-left: 3px;
}

#explainbox b:nth-child(even){
 border-radius: 0px 5px 5px 0px;
 background-color: rgba(128, 128, 128, 0.36);
 color: black;
 border-left: 0px solid transparent;
 text-shadow: 0px 0px 0px black;
 padding-top: 2px;
}

#detailsbox{
 position: absolute;
 top: 130px;
 left: 4px;
 right: 4px;
 height: 175px;
 overflow: auto;
 font-family:'detailfont';
 font-size: 12pt;
 overflow: hidden;
 color: gray;
 padding: 5px;
 text-align: center;
 line-height: 25px;
 text-shadow: 0px 0px 3px #571209;
 background-color: rgba(0, 0, 0, 0.5);
}

#detailsbox:before{
 content:'';
 position: absolute;
 top: 3px;
 left: -3px;
 right: -3px;
 height: 1px;
 box-shadow: 0px -3px 3px #571209;
 border-top: 1px solid #571209;
}

#detailsbox:after{
 content:'';
 position: absolute;
 bottom: 3px;
 left: -3px;
 right: -3px;
 height: 1px;
 border-top: 1px solid #571209;
}

.detailcontent{
 position: absolute;
 z-index: -1;
 top: 6px;
 left: 2px;
 right: 2px;
 bottom: 6px;
 border: 0px solid green;
 overflow: auto;
 padding: 5px;
 opacity: 0;
 -webkit-transition: all .5s;
 transition: all .5s;
}

#maindetail{
 z-index: 1;
 opacity: 1;
 -webkit-transition: all 1s;
 transition: all 1s;
 padding-top: 15px;
 font-style: italic;
}

#div1:target ~ #whole #div11,
#div2:target ~ #whole #div22{
 -webkit-transition: all 1s;
 transition: all 1s;
 opacity: 1;
 z-index: 2;
}

#div1:target ~ #whole #maindetail,
#div2:target ~ #whole #maindetail{
 opacity: 0;
 z-index: 0;
 -webkit-transition: all .5ss;
 transition: all .5s;
}

#selectbox{
 position: absolute;
 bottom: 55px;
 left: 0px;
 right: 0px;
 height: 40px;
 border-top: 0px solid red;
 border-bottom: 0px solid red;
 padding-left: 5px;
}

#selectbox:after{
 content:'';
 position: absolute;
 bottom: 0px;
 left: 3px;
 right: 3px;
 height: 1px;
 box-shadow: 0px 0px 3px #571209;
 border-top: 1px solid #571209;
}

.selectlinks{
 float: left;
 margin: auto;
 height: 34px;
 width: 80px;
 border: 0px solid white;
 text-align: center;
 font-family:'headerfont';
 font-weight: 400;
 color: gray;
 font-size: 17pt;
 padding-top: 9px;
 -webkit-transition: all 1s;
 transition: all 1s;
 background: rgba(255, 0, 0, 0.29);
 color: black;
 border-right: 1px solid black;
 border-left: 1px solid black;
 text-decoration: none;
}

.selectlinks:hover,
#linkdefault,
#div1:target ~ #whole #link1,
#div2:target ~ #whole #link2{
 background: transparent;
 color: #571209;
}

#div1:target ~ #whole #linkdefault,
#div2:target ~ #whole #linkdefault{
 background: rgba(255, 0, 0, 0.29);
 color: black;
}

#oocinfo{
 position: absolute;
 bottom: 0px;
 left: 0px;
 right: 0px;
 height: 50px;
 border-top: 0px solid white;
 border-bottom: 0px solid white;
 font-family:'oocfont';
 font-size: 12pt;
 color: gray;
 text-shadow: 0px 0px 10px black;
 font-weight: 400;
 letter-spacing: 0px;
 padding: 15px;
 padding-top: 0px;
 line-height: 20px;
 text-shadow: 0px 0px 3px #571209;
}


#musicbar{
 position: absolute;
 margin-left: 0px;
 bottom: -30px;
 height: 15px;
 width: 250px;
 background: black;
 box-shadow: 0px 0px 7px #571209;
 z-index: 1;
 border-radius: 2px;
 -webkit-transition: all .2s;
 transition: all .2s;
overflow: hidden;
}

#musicbar:active{
box-shadow: 0px 0px 7px black;}

#musicbar:hover{
 box-shadow: 0px 0px 7px gray;
}

#musicbar audio{
 zoom: 1000%;
 opacity: 0;
 margin-top: -13px;
 margin-left: -2px;
}

#musicmarquee{
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 border: 0px solid red;
 z-index: -1;
 text-align: center;
 color: #571209;
 font-family: 'oocfont', Times, Arial;
 font-size: 10pt;
 box-border-box;
 padding-top: 2px;
 font-weight: 800;
 letter-spacing: 3px;
 font-style: italic;
}

</style>

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

<div id="whole">

 <div id="infobox">
 <div id="contentbox">
 <div id="headerbox">
 Arc Arsenal
 <div class="miniexplain">
 Demonologist
 </div>
 <div class="miniexplain">
 Extraordinaire
 </div>
 </div>
 <div id="explainbox">
 <b>Height</b>
 <b>6'6"</b>
 <b>Sex</b>
 <b>Male</b>
 <b>Build</b>
 <b>Slim</b>
 <b>Orient</b>
 <b>Pansex.</b>
 <b>Species</b>
 <b>Demon</b>
 <b>Stat.</b>
 <b>Open</b>
 </div>
 <div id="detailsbox">
 <div class="detailcontent" id="maindetail">
 To gain the knowledge he needed to destroy demons, he took in the power of demons.<br><br>
 This is a Faustian tale.<br><br>

 <div style="text-align:left; font-size:11pt;">Arc Arsenal is not his original name. This is not his original appearance, nor is a tail something that he was overly desiring of as he lived through his life. Arc's original name is a subject unavailable through conventional methods of discovery, but the way he has come to look is a thing that he would readily introduce to any curious persons with a short tale. Some details would be left deliberately vague (no scientist gives up the method of their discovery while a patent hasn't yet been applied to it) but it's somewhat easy to understand just what happened to him all the same.<br><br>
Some time ago (quite some time ago, in fact) Arc was a chemist in search of a solution to the problem that he even now pursues: how does one destroy a hellborne? His original theory was that as demons and devils came to the earth's surface in search of souls to either corrupt or consume, that perhaps the soul itself could be used as both bait and trap. Certainly this was the case with mouse traps using cheese, was it not? Thus he prepared his own soul using any number of religious rites from varying belief systems and denominations. Once he felt he was ready, he applied as many preparations as he could from the archaic tomes that he discovered during this religious journey and combined them with what he knew of the more solid sciences - his chemistry most of all. Over the course of that long night, many things changed... His understanding of what he had done to his soul, his understanding of the true form of demons, of religions. Most of all, however, Arc himself changed. Physically, mentally, many things were altered in ways that could not be rectified. The demons that flooded into him became a part of him within the housing that he had created with the partial sacrifice of his soul. Their abilities became Arc's own, though their knowledge remained walled off; only through conversation with these creatures he had considered his mortal enemies could anything be gained in that way. <br><br>
From this point, Arc ceased to be the chemist that some had known up to that day and became the demonologist and occasional planeswalker that now travels in search of answers to mysteries that had once been completely unfathomable. </div>
 </div>

 <div class="detailcontent" id="div11">
 Work in progress.
 </div>
 <div class="detailcontent" id="div22">
 Work in progress.
 </div>

 </div>
 <div id="selectbox">

 <a class="selectlinks" href="#div1" id="link1">
 Abilities
 </a>

 <a class="selectlinks" href="#none" id="linkdefault">
 History
 </a>

 <a class="selectlinks" href="#div2" id="link2">
 Subjects
 </a>

 </div>
 <div id="oocinfo">
 PM Friendly.<br>
 Art & Code are owned.
 </div>
 </div>

 <div id="musicbar">
 <div id="musicmarquee">
 <marquee direction="left" scrollamount="3">
SHOOK - SPECTRUM

 </marquee>
 </div>
 <audio controls src="http://puu.sh/qk5Mg/122afeb635.mp3" loop=3>
 </audio>
 </div>

 </div>



</div>