Taker old 11/28/16

<style>

@import url(//fonts.googleapis.com/css?family=Permanent+Marker|Gloria+Hallelujah|Amatic+SC|Chewy|Bangers|Kaushan+Script);

body {background-color: #5f3e38;
background-image:url(http://www.transparenttextures.com/patterns/dark-denim-3.png);
overflow: hidden;}

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

#middlething{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
height: 481px;
background-color: #716965;
box-shadow: 1px 1px 11px black;}

#middleimage{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-image: url(http://i65.tinypic.com/2yyt7c4.jpg);
background-repeat: no-repeat;
background-size: auto 111%;
background-position: center bottom;
-webkit-transition: all 1s 2.5s;
transition: all 1s 2.5s;
opacity: 1;}

#middleimage.b{
background-image: url(http://i63.tinypic.com/szdiwx.jpg);
background-position: top center;
background-size: auto 150%;
-webkit-transition: all 1s 2s;
transition: all 1s 2s;
opacity: 0;
}

#whole:hover #middleimage{
-webkit-transition: all 1s .2s;
transition: all 1s .2s;
opacity: 0;}

#whole:hover #middleimage.b{
-webkit-transition: all 1s 1.3s;
transition: all 1s 1.3s;
opacity: 1;}

#popsfromtheleft{
position: absolute;
height: 520px;
background-image:url(http://www.transparenttextures.com/patterns/dark-denim-3.png);
background-color: #5f3e38;
width: 250px;
left: -5000px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
-webkit-transition: all 2s 2s;
transition: all 2s 2s;
opacity: 1;
overflow: hidden;}

#insidecontent{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
height: 80%;
width: 200px;
background: #7d6c69;
opacity: .6;
box-shadow: 2px 2px 11px black;}

#insidecontent2{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
height: 80%;
width: 200px;
background: transparent;
color: black;
font-size: 10pt;
font-family: Times;
font-weight: 400;
font-style:italic;
box-sizing: border-box;
padding: 10px;
text-align: justify;
text-justify: inter-word;}

#insidecontent2 u{
text-decoration: none;
font-weight: 600;
font-family: 'Amatic SC', cursive;
font-size: 25pt;
letter-spacing: 15px;
text-shadow: 2px 2px 5px #312c2c;}

#insidecontent2 b{
font-weight: 400;
color: black;
font-size: 15pt;
font-style: italic;
margin-top: -20px;
font-family: 'Amatic SC', cursive;
line-height: 16px;}

#insidecontent2 i{
font-weight: 400;
color: black;
font-family: 'Permanent Marker', cursive;
font-style: normal;
letter-spacing: 1px;
text-align: justify;
font-size: 9pt;
opacity: .8;}

#whole:hover #popsfromtheleft{
left: -700px;
opacity: 1;
-webkit-transition: all 1.2s ease-out, opacity 2s;
transition: all 1.2s ease-out, opacity 2s;}

#musicslice{
position: fixed;
top: 20px;
right: 20px;
height: 50px;
width: 50px;
border: 1px solid black;
overflow: hidden;
-webkit-transition: all 1s;
transition: all 0s;
box-shadow: 1px 1px 3px black;}

#musicslice:active{
-webkit-transition: all 0s;
transition: all 0s;
box-shadow: 0px 0px 0px black;}

#musiccover{
position: absolute;
left: 0px;
top: 0px;
height: 50px;
width: 50px;
background-image:url(http://i67.tinypic.com/2hs28ia.jpg);
background-size: auto 100%;
background-repeat: no-repeat;
background-position: bottom right;
}

#musichidden{
position: absolute;
left: -10px;
top: 0px;
height: 50px;
width: 50px;
zoom: 180%;
opacity: 0;
z-index: 1;
overflow: hidden;}


</style>

<div id="whole">
<div id="middlething">
<div id="middleimage">
</div>
<div id="middleimage" class="b">
</div>
</div>
<div id="popsfromtheleft">
<div id="insidecontent">
</div>
<div id="insidecontent2">
<br>
<u>Taker</u><br>
<b>"you may say I'm a dreamer,<br>but I'm not the only one"</b><br><br>
<i>A devil in the literal sense, come to guide the poor souls of the unknowing and unseeing. Where? To their salvation. How? Through music and general kickassery.
Why? Because he was exiled and there isn't a whole lot better to do. When? Whenever he gets off his ass.</i><br><br><br>
w.i.p / art is owned / code is <a target="_blank" href="http://roleplay.chat/profile.php?user=Digital" target=_blank style="color:black;">mine</a>

</div>
</div>



<div id="musicslice" title="ratatat - loud pipes">
<div id="musiccover">
</div>
<div id="musichidden">
<audio controls src="http://puu.sh/qIBIb/8106b125ff.mp3" loop=3></audio>
</div>
</div>


</div>