<style type="text/css">

	#music{position:fixed;
 	top:70px;
 	left:100px;
 	z-index:99;
	}


	#music1{
 	position:fixed;
 	padding:2px;
 	-webkit-transition: all 0.5s ease-in-out;
 	-moz-transition: all 0.5s ease-in-out;
 	-o-transition: all 0.5s ease-in-out;}

	#music1:hover #music2{
 	opacity:0.7;
 	margin-top:-25px;
 	z-index:-1;}

	#music1:hover #music3{
	opacity:0.7;
	margin-top:0px;
	z-index:99;}

	#music1:hover #musiclist{ opacity:1;}


	#music3{
 	position:fixed;
	width:15px;
 	height:15px;
 	background-size: 15px;
 	background-image: url('http://www.free-icons-download.net/images/grays-play-button-icon-17896.png');
	background-repeat: no-repeat;
 	background-position: 50% 0%;
	padding-left:5px;
	padding-right:5px;
 	z-index:99;
 	margin-left:0px;
 	overflow:hidden;
	background-color: #736495;
	opacity:1.0;}

</style>


<div id="music">
<div id="music1">
<div id="music3">

<audio controls style="opacity: 0;"><source src="https://instaud.io/_/OAC.mp3"></audio>

</div>
</div>
</div>

<style>

@import url(http://fonts.googleapis.com/css?family=Permanent+Marker);


.pfor { display: none; }
#profile { background-color: transparent; border: none; }
body{background: #333333 url(http://www.imgbase.info/images/safe-wallpapers/video_games/warhammer_40k/37349_warhammer_40k.jpg); overflow: hidden;}
/* © The Supreme @ RPC */
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 #000000 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;}


#frame{
position: fixed; margin: auto;
left: 0px; top: 0px; right: 0px; bottom: 0px;
width: 350px; height: 498px;
background: #bdb76b url(http://i.picpar.com/2ctb.png); overflow: hidden;
border: 1px solid #000000;
text-align: left;
z-index: 1;
}

.picture{
float: left; margin-left: 10px; margin-top: 10px;
width: 328px; height: 476px;
background: #000000;
border: 1px solid #000000;
}

.picture img{
position: absolute;
width: 328px; height: 476px;
}



#info{
position: fixed; margin: auto;
left: 0px; top: 0px; right: 0px; bottom: 0px;
width: 1198px; height: 498px;
overflow: hidden;
}

.info{
float: left;
margin-top: 10px; margin-left: 10px;
width: 1178px; height: 478px;
}

.info:target .left{margin-left: 0px;}
.info:target .right{margin-left: 776px;}
.info:target .text{opacity: 1;}

.text{
position: absolute; margin-top: 10px; margin-left: 10px;
width: 370px; height: 446px;
padding: 5px; overflow: auto;
background: rgba(300, 300, 300, 0.7);
font-family: tahoma;
font-size: 10px;
text-align: justify;
line-height: 12px;
color: #000000;
text-shadow: #000000 0px 0px 0px;
box-shadow: inset #000000 0px 0px 0px 1px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
opacity: 0;
}

.quote{
text-align: center;
font-weight: bold;
font-variant: small-caps;
}

.quote strong{
color: #990000;
text-transform: uppercase;
}

.left{
position: absolute;
margin-left: 294px;
width: 400px; height: 476px;
border: 1px solid #000000;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}

.right{
position: absolute;
margin-left: 482px;
width: 400px; height: 476px;
border: 1px solid #000000;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}

#one .left, #one .right{background: #6b8e23 url(http://i.picpar.com/qctb.png); background-size: 100px;}


.stats{
float: left;
width: 370px; height: 118px;
overflow: hidden;
-webkit-transition: 0.4s;
}

.stat{
float: left; margin-bottom: 2px;
width: 182px; height: 16px;
border: 1px solid #000000;
overflow: hidden;
-webkit-transition: 0.4s;
}

.top{
float: left;
width: 182px; height: 16px;
text-align: center;
line-height: 14px;
font-family: tahoma;
font-size: 14px;
color: #000000;
font-variant: small-caps;
font-weight: bold;
background: #cccccc url(http://i.picpar.com/fltb.png);
letter-spacing: 3px;
-webkit-transition: 0.4s;
}

.bot{
float: left;
width: 182px; height: 16px;
text-align: center;
line-height: 12px;
font-family: Permanent Marker;
font-size: 14px;
color: #bbbbbb;
font-variant: small-caps;
background: #333333 url(http://i.picpar.com/fltb.png);
letter-spacing: 0px;
-webkit-transition: 0.4s;
}

.stat:hover .top{margin-top: -16px;}

.ooc{
float: left; margin-top: 5px;
width: 370px; height: 323px;
overflow: hidden;
line-height: 16px;
}

.ooc a{
display: inline-block;
text-decoration: underline;
color: #000000;
font-size: 12px;
margin-top: 3px; margin-left: 1px;
}

strong{
font-size: 18px;
font-family: Permanent Marker;
letter-spacing: 1px;
font-weight: normal;
}


</style>

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

<div id="frame">
<div class="picture"><a href="#one" target="_self"><img src="http://i.imgur.com/zxH7bQm.jpg" alt="" /></a></div>
</div>


<div id="info">
<div class="info" id="one">

<div class="left">
<div class="text">This is the text in the right box. Put Equipment, history, whatever here. </div>
</div>

<div class="right">
<div class="text">

<div class="stats">
<div class="stat">
<div class="top">name</div>
<div class="bot">Arsenios "Ben" Avidan.</div>
</div>
<div style="margin-left: 2px;" class="stat">
<div class="top">hair</div>
<div class="bot">FILL IN HERE</div>
</div>
<div class="stat">
<div class="top">age</div>
<div class="bot">FILL IN HERE</div>
</div>
<div style="margin-left: 2px;" class="stat">
<div class="top">eyes</div>
<div class="bot">FILL IN HERE</div>
</div>
<div class="stat">
<div class="top">gender</div>
<div class="bot">Male</div>
</div>
<div style="margin-left: 2px;" class="stat">
<div class="top">height</div>
<div class="bot">5'9"</div>
</div>
<div class="stat">
<div class="top">orientation</div>
<div class="bot">FILL IN HERE</div>
</div>
<div style="margin-left: 2px;" class="stat">
<div class="top">weight</div>
<div class="bot">FILL IN HERE</div>
</div>
<div class="stat">
<div class="top">species</div>
<div class="bot">Human</div>
</div>
<div style="margin-left: 2px;" class="stat">
<div class="top">ethnicity</div>
<div class="bot">FILL IN HERE</div>
</div>
<div class="stat">
<div class="top">birthday</div>
<div class="bot">FILL IN HERE</div>
</div>
<div style="margin-left: 2px;" class="stat">
<div class="top">occupation</div>
<div class="bot">Guardsmen Recruit</div>
</div>
</div>
<div class="ooc"><br /> <br /><strong>Media</strong><br />
          ┗
<a href="link here" target="_blank">001</a>
<a href="link here" target="_blank">002</a>
<a href="link here" target="_blank">003</a>
<a href="link here" target="_blank">004</a>
<a href="link here" target="_blank">005</a>
<a href="link here" target="_blank">006</a>
<a href="link here" target="_blank">007</a>
<a href="link here" target="_blank">008</a>
<a href="link here" target="_blank">009</a>
<a href="link here" target="_blank">010</a>
<a href="link here" target="_blank">011</a>
<a href="link here" target="_blank">012</a>

<br /><br /><br />

<strong>OOC</strong>
<br /><br />

01. <br />
02. <br />
03. <br />
04. <br />
05. <br />
06. <br />
07. <br />
08. </div>

</div>
</div>
</div>
</div>


</div></div>