Magi 11/14/15

<style>
.pfor {display: none;}
#profile {background: transparent; border: 0px;}

body{background:#313F66;}

/*
color - A18A99
*/

#blurbarrier{
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 30px;
  left: 0px;
  border: 1px solid black;
}

#blurbarrier2{
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 30px;
  right: 0px;
  border: 1px solid black;
}

#blurbarrier3{
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 30px;
  border: 1px solid black;
}

#blurbarrier4{
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 30px;
  border: 1px solid black;
}

#blurbarrier,
#blurbarrier2,
#blurbarrier3,
#blurbarrier4{
  background: #313F66;
  -webkit-filter:blur(6px);
border: 0px solid black;
z-index: 2;
}

#thebackground{position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
z-index: -1;
background-image:
url(http://oi58.tinypic.com/anhbp.jpg);
background-size: 100% auto;
  background-position: center;
background-repeat: no-repeat;}

#framer{position: absolute;
border: 13px solid #324066;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: transparent;
z-index: 1;}

/* CREDITS START */

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

#containerX{position:absolute;
left: 50px;
top: 50px;
height: 50px;
width: 100px;
border: 0px solid black;
-webkit-filter: blur(2px);
-webkit-transition: all 1s;
transition: all 1s;
z-index: 4;
}

#containerX:hover{
-webkit-filter:blur(0px);
}


#firstdiv{position:absolute;
height: 45px;
  width: 30px;
left: 0px;
top: 0px;
border: 0px solid red;
background: #3A273A;
z-index: 2;}

#seconddiv{position: absolute;
height: 50px;
width: 110px;
left: 30px;
top: 0px;
border: 0px solid blue;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;}

#containerX:hover #seconddiv{
  -webkit-transition: all 2s;
  transition: all 2s;
  opacity: 1;
}



#selectme{float:left;
margin-left: -20px;
margin-top: 30px;
height: 15px;
width: 15px;
-webkit-transition: all 1s;
transition: all 1s;
background: #3A273A;
  box-sizing: border-box;
border: 1px solid gray;}

#selectme:hover{background: #7C929F;}

#containerX:hover #selectme{
  margin-left: 10px;}

#readit{position: absolute;
top: 5px;
  right: 100px;
left: -20px;
background: #3A273A;
height: 15px;
width: 20px;
-webkit-transition: all 1s, width .5s;
transition: all 1s, width .5s;
overflow: hidden;}

#containerX:hover #readit{
  -webkit-transition: left 1s, right 1s, width 1s .5s;
  transition: left 1s, right 1s, width 1s .5s;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 90px;
}

.readings{
  height: 100%;
  width: 100%;
  opacity: 0;
  font-family: Arial;
  font-size: 8pt;
  font-weight: 600;
  letter-spacing: 2px;
  color: grey;
  z-index: 0;
  text-align: center;
  box-sizing: border-box;
  line-height: -7px;
  line-spacing: -8px;
  padding-top: 2px;
-webkit-transition: all 1s;
transition: all 1s;
}

.readings:target {opacity: 1;
z-index: 1;}

.screenout1,
.screenout2,
.screenout3,
.screenout4{position: fixed;
  left: 52px;
  top: 52px;
  height: 45px;
  width: 30px;
  border: 0px solid green;
  background: white;
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0;
  box-sizing: border-box;
  text-align: center;
  padding-left: 2px;
  line-height: 10px;
  padding-top: 10px;
  font-size: 16pt;
  font-weight: 800;
  font-family: 'chosen', Arial;
  color: #3A273A;
  background: grey;
z-index: 0;
}

.pushh1:hover ~ .screenout1,
.pushh2:hover ~ .screenout2,
.pushh3:hover ~ .screenout3,
.pushh4:hover ~ .screenout4{
  -webkit-transition: all .5s;
  transition: all .5s;
  opacity: 1;
z-index: 10;
}

#musician{
position: absolute;
width: 13px;
height: 30px;
opacity: 1;
z-index: 100;
overflow: hidden;
top: 12px;
left: 7px;
}

/* CREDITS END */

</style>

<div id="blurbarrier">
</div>

<div id="blurbarrier2">
</div>

<div id="blurbarrier3">
</div>

<div id="blurbarrier4">
</div>

<div id="thebackground">
</div>

<div id="framer">
</div>



<div id="containerX">
<div id="firstdiv">
<div id="musician">
<div style="zoom: 200%; margin-left: -4px; margin-top: -5px;">
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" width="129" height="20">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" />
    <param name="wmode" value="transparent" />
    <param name="FlashVars" value="mp3=https://www.dropbox.com/s/p0dj810fpjzsqs3/05-stars-midnight_coward.mp3?dl=1&autoplay=1&loop=1&volume=10&bgcolor1=3A273A&bgcolor2=3A273A&slidercolor1=000000&slidercolor2=000000&buttoncolor=646065&buttonovercolor=ffffff" />
</object>
</div>

</div>
</div>
<div id="seconddiv">
<a href=#first1 class="pushh1"><div id="selectme">
  </div></a>
<a href=#first2 class="pushh2"><div id="selectme" class="pushh2">
  </div></a>
<a href=#first3 class="pushh3"><div id="selectme">
  </div></a>
<a href=#first4 class="pushh4"><div id="selectme">
  </div></a>
<div id="readit">
  <div id="first1" class="readings">
<marquee direction="left" scrollamount="3">
aliases [The Magi, Mystery J] // age [unknown] // height [6'4"] // build [slender] // abilities [concept realization]</marquee>
  </div>
  <div id="first2" class="readings">artist is N/A
  </div>
  <div id="first3" class="readings" style="letter-spacing: 0.5px;">code is <a href="http://roleplay.chat/profile.php?user=Digital" target="_blank" style="color: gray;">mine</a>
  </div>
  <div id="first4" class="readings"><a href="https://youtu.be/2E74-aXNCtI" target="_blank" style="color: gray;">STARS</a>
  </div>
</div>
  <div class="screenout1">
    C
  </div>
    <div class="screenout2">
    A
  </div>
    <div class="screenout3">
    O
  </div>
    <div class="screenout4">
    ♫
  </div>
</div>
</div>