Sullivan profile (11/26/15)

<style>

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

body {background: black;
overflow: hidden;}

body, a, a:hover {cursor: url(http://www.rw-designer.com/cursor-extern.php?id=5161), auto;
}

/* color
alt color - #8C856C */


#whole{ position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: hidden;
background: black;
/* background-image:url(http://i57.tinypic.com/nl8md5.jpg); */
 background-image:url(http://www.warninguk.com/images/rain.gif); }

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

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

@font-face{
 font-family:'thirdf'; src:url(https://dl.dropboxusercontent.com/u/4556289/Moderne%20Fette%20Schwabache%20gesperrt%20UNZ1Ar.ttf);}

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

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

#sulli{position: absolute;
left: 800px;
right: 0px;
margin: auto;
top: 0px;
bottom: 0px;
  width: 450px;
  border: 0px solid white;
  z-index: 5;
  background-image:url(http://i57.tinypic.com/2wdrfw3.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: bottom right;
}

#container{
position: absolute;
  top: 0px;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
  height: 700px;
  width: 1000px;
  border: 1px solid black;
  background-image:url(http://i57.tinypic.com/egpp2c.jpg);
background-size: 100% 100%;
}

#section1{position: absolute;
left: 0px;
top: 0px;
height: 164px;
width: 343px;
border: 0px solid white;
background: black;
background-size: 100% 100%;}

#section2{position: absolute;
bottom: 90px;
left: 10px;
height: 102px;
width: 160px;
border: 0px solid white;
background: black;
background-size: 100% 100%;}

#section3{position: absolute;
left: 400px;
bottom: 15px;
height: 213px;
width: 195px;
border: 0px solid white;
background: black;
background-size: 100% 100%;}

#section4{position: absolute;
top: 0px;
left: 345px;
height: 166px;
width: 370px;
border: 0px solid white;
background: black;
background-size: 100% 100%;}

#distortion{
  position: absolute;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
  -webkit-transition: all 1s;
  transition: all 1s;
}

.blurring #distortion{
  -webkit-filter:blur(3px);
  opacity: 1;
}

.blurring:hover #distortion{
  -webkit-filter:blur(0px);
  -webkit-transition: all, opacity 1s 1s;
  transition: all 1s, opacity 1s .5s;
  opacity: .3;
}

#textile{
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: 1;
  background-size: 100% 100%;
  background-image:url(http://i.giphy.com/ie8i93ZHdekwM.gif);
  -webkit-transition: all 1s;
  transition: all 1s;
  -webkit-filter:blur(1px);
}


.blurring:hover #textile{
  opacity: .3;
}

#content{position: absolute;
  box-sizing: border-box;
  padding-top: 26px;
z-index: 0;
opacity: 0;
height: 100%;
width: 100%;
font-size: 20pt;
text-align: center;
  color: gray;
font-family:'fourthf';
-webkit-transition: all 1s;
transition: all 1s;}

.blurring:hover #content{
  -webkit-transition: all 1s .7s;
  transition: all 1s .7s;
  opacity:.5;}

.quickb{-webkit-filter:blur(2px);
blur:1px);}




/* 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(8px);
-webkit-transition: all 1s;
transition: all 1s;
}

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


#firstdiv{position:absolute;
height: 45px;
  width: 30px;
left: 0px;
top: 0px;
border: 0px solid red;
background: grey;
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: black;
  box-sizing: border-box;
border: 1px solid gray;}

#selectme:hover{background:gray;}

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

#readit{position: absolute;
top: 5px;
  right: 100px;
left: -20px;
background: black;
height: 15px;
width: 15px;
-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: 10px;
  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: gray;
  background: black;
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="whole">
<div id="sulli">
</div>
<div id="container">

  <div id="section1" class="blurring">
    <div id="distortion" style="background-image:url(http://i61.tinypic.com/2vt46ip.jpg);">
    </div>
    <div id="textile">
    </div>
    <div id="content" style="line-height: 40px;">HIS TIME IS NEAR<br>
    HIS WRATH WILL<br>
      BRING THE ENDING

    </div>
  </div>
  <div id="section2" class="blurring">
    <div id="distortion" style="background-image:url(http://i61.tinypic.com/x57evt.jpg);">
    </div>
    <div id="textile">
    </div>
    <div id="content" style="font-size: 14px; font-family:'secondf'; padding-left: 5px; padding-right: 5px; padding-top: 10px;">IN HIS EYE THERE IS SHOWN A FUTURE FREE OF THE <font style="-webkit-filter:blur(2px); color: red;">GOD</font> A NEW PATHWAY A NEW REALM A NEW
    </div>
  </div>

  <div id="section3" class="blurring">
    <div id="distortion" style="background-image:url(http://i57.tinypic.com/313pp1h.jpg);">
    </div>
    <div id="textile">
    </div>
    <div id="content" style="padding-top: 10px;">
      <font face='thirdf' style="-webkit-filter:blur(2px); line-height: 40px;">sullivan sullivan sullivan sullivan sullivan </font>
    </div>
  </div>

  <div id="section4" class="blurring">
    <div id="distortion" style="background-image:url(http://i61.tinypic.com/e5i8g5.jpg)">
    </div>
    <div id="textile">
    </div>
    <div id="content" style="font-size: 10px; font-family:'firstf'; padding-left: 10px; padding-right: 10px;">
      Look into your heart. Can you not see? His word is there. His word will guide you, so that you do not lose the way. He will watch you, so that your route is true and your step assured. He will lead your hand so<font class="quickb"> that your strike is quick</font> and <font class="quickb">your blow lethal</font>. He will drive the <font class="quickb" color=red>GOD</font> from you and so protect you from the <font class="quickb" color=red>GOD</font>. The<br><font class="quickb" color=red>GOD</font> does now own you, cannot lead you, will not guide you, can never see you.<Br>You owe them nothing, and by following HIM can be lead forever into the land of <font class="quickb">eternal sacrifice</font> where you may worship HIS name and <font class="quickb">die with the ENDING.</font>
    </div>
  </div>

</div>




<div id="containerX">
<div id="firstdiv">
<div id="musician">
<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/uripexo3detwuva/BEAEONED%20-%20Black%20Rain%20Upon%20Them.mp3?dl=1&autoplay=1&loop=1&volume=10&bgcolor1=808080&bgcolor2=808080&slidercolor1=000000&slidercolor2=000000&buttoncolor=000000" />
</object>

</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">
<i><b>sullivan drear</b></i>  // age [32] gender [male] height/build [5'11"/slender] orientation [bisexual]</marquee>
  </div>
  <div id="first2" class="readings">artist is <a href="http://www.pixiv.net/member.php?id=3209119" target="_blank" style="color:gray;">Ѧ</a>
  </div>
  <div id="first3" class="readings">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/ZlO_SYjyqX8" target="_blank" style="color:gray;">BEAEONED</a>
  </div>
</div>
  <div class="screenout1">
    C
  </div>
    <div class="screenout2">
    A
  </div>
    <div class="screenout3">
    O
  </div>
    <div class="screenout4">
    ♫
  </div>
</div>
</div>