Themetalhead

<style>

@font-face {
 font-family: 'Cash Currency';
 src: url('https://dl.dropboxusercontent.com/s/j2sxcg13p6laxi2/Cash%20Currency.ttf');
}

@font-face {
 font-family: 'Human Error';
 src: url('https://dl.dropboxusercontent.com/s/53f2ffnauea22nr/Human%20Error.ttf');
}

@font-face {
 font-family: 'Top Secret Without Lines Bold';
 src: url('https://dl.dropboxusercontent.com/s/lbe0r50qs8pjzcb/Top%20Secret%20Without%20Lines.ttf');
}

@font-face {
 font-family: 'Underground';
 src: url('https://dl.dropboxusercontent.com/s/54c1hlb8s26jvnb/UNDERGRO.TTF');
}


.pfor {display: none;}
#profile {border: 0px; background: transparent;}
/* © The Supreme @ RPC */
body{background: #222222 url(); overflow: hidden;}
body, a {cursor: url(http://i.picpar.com/1eq.png), progress !important;}

#whole{position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px;}


::-webkit-scrollbar-thumb {box-shadow: inset #ff0000 0px 0px 4px; border-right: 5px transparent solid; border-top: 5px transparent solid; border-bottom: 5px transparent solid;}
::-webkit-scrollbar {width: 8px; background-color: transparent;}


.page{
position: fixed; margin: auto;
left: 0px; top: 0px; right: 0px; bottom: 0px;
width: 700px; height: 350px;
}

.file_name{
float: left; margin-top: -20px;
width: 134px; height: 20px;
}

.fn_left{
float: left; margin-top: 3px;
border-top: rgba(0, 0, 0, 0) 17px solid;
border-right: #444444 17px solid;
overflow: hidden; width: 0px; height: 0px;
}

.name{
float: left;
width: 90px; height: 20px;
background: #444444;
border-radius: 4px 4px 0px 0px;
text-align: center;
}

.name a{
text-decoration: none;
border-radius: 4px 4px 0px 0px;
float: left; width: 90px; height: 20px;
color: #ffffff;
font-family: courier;
font-size: 14px;
font-variant: small-caps;
letter-spacing: 1px;
}

.fn_right{
float: left; margin-top: 3px;
border-top: rgba(0, 0, 0, 0) 17px solid;
border-left: #444444 17px solid;
overflow: hidden; width: 0px; height: 0px;
}

.file{
float: left;
width: 680px; height: 330px;
padding: 10px;
background: #555555;
border-radius: 6px 6px 0px 0px
}

.text{
float: left;
width: 420px; height: 310px;
padding: 10px;
background: #FFFFFF;
font-size: 10px;
font-family: tahoma;
text-align: justify;
color: #000000;
}

.sheet_one{
float: left;
width: 418px; height: 58px;
border: 1px solid #000000;
border-radius: 5px;
line-height: 18px;
}

.sheet_two{
float: left; margin-top: 10px;
width: 418px; height: 113px;
border: 1px solid #000000;
border-radius: 5px;
}

.two_left, .two_right{
float: left;
width: 209px; height: 113px;
line-height: 18px;
}

.sheet_three{
float: left; margin-top: 10px;
width: 418px; height: 113px;
border: 1px solid #000000;
border-radius: 5px;
line-height: 18px;
}

.conf{
position: absolute; margin-top: 240px; margin-left: 100px;
width: 256px; height: 50px;
font-family: Human Error;
font-size: 50px;
color: rgba(200, 0, 0, 0.7);
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-o-transform: rotate(15deg);
-transform: rotate(15deg);
}

h1{
float: left; margin-top: 0px; margin-bottom: 5px;
width: 100%;
text-indent: 20px;
border-bottom: dotted 1px #000000;
font-family: Cash Currency;
font-size: 30px;
font-weight: normal;
font-variant: small-caps;
color: #000000;
}

h2{
float: left;
margin-right: 10px; margin-top: 0px; margin-bottom: 0px;
font-family: Underground;
font-size: 16px;
line-height: 20px;
}

.img_right{
float: right;
width: 230px;
height: 330px;
background: #ffffff;
}

.img_left{
float: left; margin-right: 10px;
width: 230px; height: 330px;
background: #ffffff;
}

.img_right img{
float: left; margin-left: 15px; margin-top: 15px;
width: 200px; height: 300px;
}

.img_left img{
float: left; margin-left: 15px; margin-top: 15px;
width: 200px; height: 300px;
}

.tl_tape{
position: absolute;
margin-top: 5px; margin-left: -11px;
width: 42px; height: 15px;
background: rgba(200, 200, 200, 0.5);
border-right: rgba(200, 200, 200, 0.3) dotted 2px;
border-left: rgba(200, 200, 200, 0.3) dotted 2px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.br_tape{
position: absolute;
margin-top: 309px; margin-left: 194px;
width: 42px; height: 15px;
background: rgba(200, 200, 200, 0.5);
border-right: rgba(200, 200, 200, 0.3) dotted 2px;
border-left: rgba(200, 200, 200, 0.3) dotted 2px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.page:target{
z-index: 1;
}

.page:target .name a{
background: #666666;
text-shadow: #000000 2px 2px 0px;
}

.page:target .file{
background: #666666;
}

.page:target .fn_left{
border-right: #666666 17px solid;
}

.page:target .fn_right{
border-left: #666666 17px solid;
}

.page:target #cover{
background: #555555;
}

.cover{
float: left;
width: 400px; height: 220px;
margin-left: 140px; margin-top: 45px;
text-align: center;
line-height: 100px;
font-size: 90px;
color: #000000;
font-family: Top Secret Without Lines Bold;
font-weight: bold;
font-variant: small-caps;
border-radius: 5px;
letter-spacing: 1px;
text-shadow: #444444 3px 2px 0px;
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
-transform: rotate(-25deg);
}

.cover_icon{
position: absolute;
margin-top: -5px;
width: 150px; height: 150px;
 border: 10px #ffffff solid;
border-bottom: 35px #ffffff solid;
background: #000000;
box-shadow: #000000 -4px 4px 2px;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-transform: rotate(-3deg);
}

.cover_icon img{
float: left;
width: 148px; height: 148px;
border: 1px solid #000000;
opacity: 1;
}

.clip{
position: absolute;
width: 16px;
left: 30px; margin-top: -10px;
}
</style>

<div id="whole" oncontextmenu="return false;">


<div class="page" id="six">
<div style="margin-left: 536px;" class="file_name">
<div class="fn_left"> </div>
<div class="name"><a href="#six" target="_self">Six</a></div>
<div class="fn_right"> </div>
</div>

<div class="file">
<div class="img_left"><img src="https://s-media-cache-ak0.pinimg.com/736x/cc/ba/b5/ccbab5332ed103c228173fc5b03f551f.jpg" alt="" />
<div class="tl_tape"> </div>
<div class="br_tape"> </div>
</div>


<div class="text">
<h1>OOC</h1>
ebony edited the code and i did the wording. i tend to rp my emotions that im feeling as it makes it much easier to rp! thank you for going over all this and if you wanna chat, im here to do it. as my name says, im a metal head. i love metal but im also a very hardheaded person.<br /><br />

<br><br>
<a href="#main" target="_self">close to go back to the front page</a></div>
</div>
</div>


<div class="page" id="five">
<div style="margin-left: 436px;" class="file_name">
<div class="fn_left"> </div>
<div class="name"><a href="#five" target="_self">Five</a></div>
<div class="fn_right"> </div>
</div>


<div class="file">
<div class="text">
<div style="height:270px;width:420px;border:1px solid #fff;overflow:auto;">
<h1>Friends</h1>
<a href="https://roleplay.chat/profile.php?user=Ebony+Lee" target="_blank">Ebony Lee</a > - editor <br />
<a href="https://roleplay.chat/profile.php?user=Abbie+Chan" target="_blank">Abbie </a > - friend<br />
<a href=" https://1.roleplay.chat/profile.php?user=White%20Ninetails " target="_blank"> Nine </a > - friend like brother <br />
<a href="LINK HERE" target="_blank">Friend</a > - put what ever here<br /><br /></div>


</div>
<div class="img_right"><img src="http://data.whicdn.com/images/15001797/large.jpg" alt="" />
<div class="tl_tape"> </div>
<div class="br_tape"> </div>
</div>
</div>
</div>


<div class="page" id="four">
<div style="margin-left: 336px;" class="file_name">
<div class="fn_left"> </div>
<div class="name"><a href="#four" target="_self">Four</a></div>
<div class="fn_right"> </div>
</div>

<div class="file">
<div class="img_left"><img src="http://i1097.photobucket.com/albums/g355/aquajaguar95/Anime/Anime%20Guys%20Edited/9-1.jpg" alt="" />
<div class="tl_tape"> </div>
<div class="br_tape"> </div>
</div>

<div class="text">
<h1>History</h1>
<div style="height:270px;width:420px;border:1px solid #fff;overflow:auto;">
Jonthan was born like most humans, hospital and all that stuff. But little did they know the underworld had a plan for him. A high ranking demon, or some may call a devil, had died that very same minute and had chosen him as his host. With a struggle, he fused himself into the soul of this human, not knowing this well set both of them on a long struggle head.
<br /><br />
<h2>In An Asylum and running</h2><br><br>
 Years later, the devil started to show its self making Jonathan black out and go on fits of rage, ripping apart and attacking everything in site. Once he came to, he was always confused and tried to apologize, but they always moved away calling the authority's. After the third time it happened he was shipped off to some mental hospital. Each day of that place was hell for him, they ran tests on him and slowly his skin harden to the point nothing could penetrate it causing the taking blood to stop. Next was tested why he had black outs and nothing came up. Later they just chopped it up to human disorders. One night.....two guards came in and tried to have there way with him, forcing him to suck them off but suddenly...HELL broke free and his eyes shined red. That begin the blood shed of that night he freed himself.
<br><br>
Many years of running, he ended up learning about his devil, even was pulled into his soul to meet him. They had made a deal, Jon kills and the demon let him control his demonic blood and power. Learn on the back ground of the demon, it was one of the angels that had fallen after being kicked from heaven, one of the strongest ones but he let Lucifer and the others be told. He let him self be sealed into darkness of the underworld. His name is Apollyon, the angel of death. After that point, the devil had raised Jon to what he knows but he had a soft heart under the sealing he had tried to put up. Jonathan has a hard time trusting people and is always looking at the bad side of things when it comes to options, he had learned the hard way that if he looked for the bright side it would always set with the sun and lead to the darkness. Hard headed and foolish, he tries to find a place to be and stay. Only wanting to fit in but he knew......somethings just dont work out.<br /><br />
<h2>Recent History</h2><br><br>
Recent shit goes here.</div>
</div>
</div>
</div>


<div class="page" id="three">
<div style="margin-left: 236px;" class="file_name">
<div class="fn_left"> </div>
<div class="name"><a href="#three" target="_self">Three</a></div>
<div class="fn_right"> </div>
</div>


<div class="file">
<div class="text">
<div style="height:270px;width:420px;border:1px solid #fff;overflow:auto;">
<h1>Powers</h1>
 <br /><br />
<h2>Shadow Fire</h2><br><br><br>
shadow fire is the ability to make hells flames and to solidify it into different objects. But if they have already been made it would be easy to use and less energy.<br /><br />
<h2>Cursed Lines</h2><br><br>
The cursed lines are the demonic presence in his soul forming on his human body. Basically it gives him a demonic form, though his only able to achieve a simi demonic form. His hair turns blood red, his eyes turn yellow, his teeth grow out into full fangs and his nails turn into claws.<br /><br />
<h2>killed bones </h2><br><br>
 A ability from his demon he gained after finally controlling its power. every person he has killed, he can pull their souls and bones from hell to fight for him. Risen from hell, they are only bones with weapons they died with.
<br /><br />

<h2> Power name </h2><br><br>
Power Discription <br /><br />

<h2>Twin Seals of Hebrew
 </h2><br><br>
Given by a elder of angels, every angel of death has them but only a few can use them to a major degree as they are different for each angel. They manifest in two words on different parts of the body. Jonathan's seals are on his fist. His right hand has the dragon seal on it and his left hand has the rage seal ,which is engraved into his skin in old hebrew. The dragon seal absorbs fire and heat into both his fist with out him try and it manifests into twin dragon fists or a dark aura around the fists. The rage seal is more of a passive and boosts his strength and speed the more the fight goes on. <br /><br /></div></div>
<div class="img_right"><img src="https://lh4.googleusercontent.com/-kwREgSjU2Gs/VKGwZNtuTlI/AAAAAAAACmM/akevovqSPjo/w500-h596/Takano.jpg" alt="" />

<div class="tl_tape"> </div>
<div class="br_tape"> </div>
</div>
</div>
</div>


<div class="page" id="two">
<div style="margin-left: 136px;" class="file_name">
<div class="fn_left"> </div>
<div class="name"><a href="#two" target="_self">Two</a></div>
<div class="fn_right"> </div>
</div>


<div class="file">
<div class="img_left"><img src="http://data.whicdn.com/images/202575306/original.jpg" alt="" />
<div class="tl_tape"> </div>
<div class="br_tape"> </div>
</div>


<div class="text">
<div style="height:270px;width:420px;border:1px solid #fff;overflow:auto;">
<h1>Personality</h1><br>His a bit confused on life, after being on the run from everything for most of it. He can be a bit grumpy, well most the time he is unless you know how to get around the shell that holds his heart. If you have got past the shell, his caring and well try his best to make you happy, but he does tend to fuck up and make things worse. He has a temper so that does make the grumpiness worse at times.
</div></div>
</div>
</div>


<div class="page" id="one">
<div style="margin-left: 36px;" class="file_name">
<div class="fn_left"> </div>
<div class="name"><a href="#one" target="_self">One</a></div>
<div class="fn_right"> </div>
</div>


<div class="file">
<div class="text">
<div class="sheet_one">Name: Jonathan Caise <br /> Aliases: N/A <br /> Status: None </div>
<div class="sheet_two">
<div class="two_left">Date of Birth: <b>[RESTRICTED]</b><br /> Place of Birth: <b>[RESTRICTED]</b><br /> Height: 6"3<br /> Weight: 239 pounds <br /> Build: Slender but built<br /> Occupation: Wanderer</div>
<div class="two_right">Scars & Marks: N/A<br /> Hair: Shaggy Blonde <br /> Eyes: Sky blue<br /> Complexion: Pale<br /> Sex: Male<br /> Country: <b>[RESTRICTED]</b></div>
</div>

<div class="conf">CONFIDENTIAL</div>
<div class="sheet_three"><div style="height:110px;width:415px;border:1px solid #ccc;;overflow:auto;"><b>Remarks</b><br>
Conditions: Bipolar, ADHD, Split Personality Disorder.
<br><br>
Doctors Notes: (25/08/▇▇▇▇. Doctor ▇▇▇▇▇)<br>Ever since he was child, his bones was very dense and he has yet to break a bone. He seems to have unusually thick skin as well; Never use normal needles on him, the needle well bend.
<br> His split personalty has been getting worse lately, also a strange event happened the other day that seems to be connected with his split personality. When he switched, his eyes turned red, I had to do a double take but it was really red and while in his padded cell...he some how cut his self free..but there was no trace of a knife on him or in his cell.
<br> (30/08/▇▇▇▇. Doctor ▇▇▇▇▇)<br>The other day we started to show him how to cooping skills..it seems music was the only one that helped. <br>
---(many other notes)--- <br>
(last note written in blood) he got free...his killing everyone here that tries to stop him..I'm not sure who's going to be reading this but his <b>NOT</b> human! I'm not sure what he is but his not human! I can hear the gun shots...i got to hide this quick. </div>

</div></div>


<div class="img_right"><img src="http://orig08.deviantart.net/5b17/f/2012/052/4/1/titus_stately_nadez__teenager_by_zoidsfan507-d4qiryo.png" alt="" />
<div class="tl_tape"> </div>
<div class="br_tape"> </div>
</div>
</div>
</div>


<div class="page" id="main">
<div class="file" id="cover">
<div class="cover">TOP<br />SECRET</div>
<div class="cover_icon"><img src="https://s-media-cache-ak0.pinimg.com/736x/16/14/54/1614543fc8480b69fe6ca995c9029ebb.jpg" alt="" /></div>
<img class="clip" src="http://i.picpar.com/FRqb.png" alt="" /></div>
</div>