For you my dear

<style>@import url('https://fonts.googleapis.com/css?family=Questrial');@import url('https://fonts.googleapis.com/css?family=Questrial');
 body {
background: #FFF4E0;
 overflow-y:hidden;
overflow-x:hidden;}

/*coded by [punpun]. do not steal the character. do not remove the credit. do not remove this.*/

::-webkit-scrollbar-thumb {
 width: 3px;
 background-color: #9E988B;}
::-webkit-scrollbar {
 width: 3px;
 background-color: transparent;}

h1{
 font-family: Questrial;
 font-size: 22px;
 text-align: center;
 color: #888888;
 padding-right: 5px;
 margin-bottom: 5px;
 margin-top: 1px;
 line-height: 31px;
 border-bottom: 3px double #000000;
}


#main {
 position: fixed; margin: auto; right: 0px; left:400px; top: 0; bottom: 0; width: 300px; height: 490px; background: #trans; border: 2px solid #9E988B; border-radius: 17px 0px 17px 0px; box-shadow: #9E988B 0px 0px 5px 0px; overflow: hidden; text-align: left;}

 #pic {position: absolute;right: 0px;top: -7; z-index:0; opacity: 1;}
 #pic img {width: 300; height: 500;}

 #pic2 {position: absolute;right: -75px;top: -7; z-index:0; opacity: 1;}
 #pic2 img {width: ; height: 230;}

 #pic3 {position: absolute;right: -130;top: 0; z-index:0; opacity: 1;}
 #pic3 img {width: ; height: 220;}

 #pic4 {position: absolute;right: -300;top: 0; z-index:0; opacity: 1;}
 #pic4 img {width: ; height: 280;}
#botline {
 width: 0px;height: 5px;
 background: #823321;
 position: absolute;
 bottom: 100;left: 160;z-index:30;
 display:block;
-webkit-transition: all 1.2s ease-out;
-moz-transition: all 1.2s ease-out;
-ms-transition: all 1.2s ease-out;
-o-transition: all 1.2s ease-out;
 transition: all 1.2s ease-out;}
body:hover #botline{ position: absolute;
 width: 220px; left: 40; opactiy:1;
}
#main2 {
 position: fixed; margin: auto;
 right: 0px; left:400px; top: 0; bottom: 0;
 width: 300px; height: 490px;
 background: #trans;
 border: 2px solid #9E988B; z-index:20;
 border-radius: 17px 0px 17px 0px;
 box-shadow: #9E988B 0px 0px 5px 0px;
 overflow: hidden;
 text-align: left;opacity:1;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}

#submain {
 position: fixed; margin: auto;
 right: 0px; left:400px; top: 0; bottom: 0;
 width: 300px; height: 490px;
 background: #888888;
 border: 2px solid #9E988B; z-index:20;
 border-radius: 17px 0px 17px 0px;
 box-shadow: #9E988B 0px 0px 5px 0px;
 overflow: hidden;
 text-align: left;opacity:0.35;
-webkit-transition: all 1.6s ease-out;
-moz-transition: all 1.6s ease-out;
-ms-transition: all 1.6s ease-out;
-o-transition: all 1.6s ease-out;
 transition: all 1.6s ease-out;}
body:hover #submain{
opacity: 0.60;
filter:alpha(opacity=100);
}

 .head {
 position: absolute;
 left: 45;
 bottom: 130;
 color: #E6CACA;
 font-family: Playfair Display SC;
 font-size: 40px; opacity: 0;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;}
body:hover .head{opacity: 1; bottom: 100;
-webkit-transition-delay: 1.6s ;
-moz-transition-delay: 1.6s ;
-ms-transition-delay: 1.6s ;
-o-transition-delay: 1.6s ;
 transition-delay: 1.6s ;
}

.head2 {
 position: absolute;
 left: 67;
 bottom: 90;
 color: #E6CACA;
 font-family: Questrial;opacity: 0;
 font-size: 20px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;}
body:hover .head2{
 bottom: 77;;opacity: 1;
-webkit-transition-delay: 2.4s ;
-moz-transition-delay: 2.4s;
-ms-transition-delay: 2.4s ;
-o-transition-delay: 2.4s ;
 transition-delay: 2.4s ;
}


.head3 {
 position: absolute; margin: auto;
 left:18; top: 100;
 color: #823321;
 font-family: Questrial;opacity: 1;
 font-size: 20px;z-index:100;
font-shadow: #cccc 1px 1px 1px 1px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;}


.head4 {
 position: absolute; margin: auto;
 left:13; top: 100;
 color: #823321;
 font-family: Questrial;opacity: 1;
 font-size: 20px;z-index:100;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;}

#line {opacity:1;/*change later pls*/
 width: 0%;height: 22px;
 background: #B8B0A1; border-radius: 4px;
 position: fixed; margin: auto;
 right: 0px; left:90px; top: 5; bottom: 0;
 display:block;
-webkit-transition: all 2.6s ease-out;
-moz-transition: all 2.6s ease-out;
-ms-transition: all 2.6s ease-out;
-o-transition: all 2.6s ease-out;
 transition: all 2.6s ease-out;}
body:hover #line{ position: fixed;
width: 815px; left:220;
}

#icon {
 position: fixed; margin: auto;
 right: 40px; left:00px; top: 0; bottom: 260;
 width: 100px; height: 220px;
 background: #trans;
 border: 2px solid #9E988B; z-index:20;
 box-shadow: #9E988B 0px 0px 5px 0px;
 overflow: hidden;
 text-align: left;opacity:0;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}body:hover #icon {opacity:1}
body:hover #icon {-webkit-transition-delay: 2.4s ;
-moz-transition-delay: 2.4s;
-ms-transition-delay: 2.4s ;
-o-transition-delay: 2.4s ;
 transition-delay: 2.4s ;opacity:0.65}
#subicon {
 position: absolute; margin: auto;
 right: 0px; left:00px; top: 0; bottom:0;
 width: 100px; height: 220px;
 background: #888888;
 border: 2px solid #9E988B; z-index:99;
 box-shadow: #9E988B 0px 0px 5px 0px;
 overflow: hidden;
 text-align: left;opacity:0.55;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}
#subicon:hover{opacity:0}

#icon2 {
 position: fixed; margin: auto;
 right: 260px; left:00px; top: 0; bottom: 260;
 width: 100px; height: 220px;
 background: #trans;
 border: 2px solid #9E988B; z-index:20;
 box-shadow: #9E988B 0px 0px 5px 0px;
 overflow: hidden;
 text-align: left;opacity:0;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}body:hover #icon2 {-webkit-transition-delay: 2.4s ;
-moz-transition-delay: 2.4s;
-ms-transition-delay: 2.4s ;
-o-transition-delay: 2.4s ;
 transition-delay: 2.4s ;opacity:1}

#icon3 {
 position: fixed; margin: auto;
 right: 480px; left:00px; top: 0; bottom: 260;
 width: 100px; height: 220px;
 background: #trans;
 border: 2px solid #9E988B; z-index:20;
 box-shadow: #9E988B 0px 0px 5px 0px;
 overflow: hidden;
 text-align: left;opacity:0;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}body:hover #icon3 {-webkit-transition-delay: 2.4s ;
-moz-transition-delay: 2.4s;
-ms-transition-delay: 2.4s ;
-o-transition-delay: 2.4s ;
 transition-delay: 2.4s ;opacity:1}

.darts {
 position: fixed; margin: auto;
 right: 260px; left:0px; top: 365; bottom: -200;
 height: 220;
 width: 325px;
 opacity: 0; z-index: 5;
 text-align: left;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}

.darts:target {
 position: absolute; bottom: 0;top: 265;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
 opacity: 1;
}

.box {
 position: absolute;
 right: 0px;
 bottom: 5px;
 height: 200;
 width: 311px;
 background-color: #E8DECC;
 border: 2px solid #9E988B; z-index:21;
 box-shadow: #9E988B 0px 0px 5px 0px;
 z-index: 5;
 color: #9E988B;
	font-family: Questrial;
	font-style: normal;
	font-variant: ;
	font-weight: 400;
 text-align: justify;
 overflow-x: hidden;
 overflow-y: auto;
 font-size: 15px;
 padding: 5px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
opacity: 0;
filter:alpha(opacity=75);
}
body:hover .box {
 opacity: 1;
 transition: all 1.2s ease-out;
 -o-transition: all 1.2s ease-out;
 -webkit-transition: all 1.2s ease-out;
 -moz-transition: all 1.2s ease-out;
-webkit-transition-delay: 2.4s ;
-moz-transition-delay: 2.4s;
-ms-transition-delay: 2.4s ;
-o-transition-delay: 2.4s ;
 transition-delay: 2.4s ;}


#boxb {
 position: fixed; margin: auto;
 right: 260px; left:0px; top: 260; bottom: 00;
 height: 200;
 width: 311px;
 background-color: #E8DECC;
 border: 2px solid #9E988B; z-index:21;
 box-shadow: #9E988B 0px 0px 5px 0px;
 z-index: 1;
 color: #9E988B;
	font-family: Questrial;
	font-style: normal;
	font-variant: ;
	font-weight: 400;
 text-align: justify;
 overflow-x: hidden;
 overflow-y: auto;
 font-size: 15px;
 padding: 5px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
opacity: 0;
filter:alpha(opacity=75);
}
body:hover #boxb {
 opacity: 1;
 transition: all 1.2s ease-out;
 -o-transition: all 1.2s ease-out;
 -webkit-transition: all 1.2s ease-out;
 -moz-transition: all 1.2s ease-out;
-webkit-transition-delay: 2.4s ;
-moz-transition-delay: 2.4s;
-ms-transition-delay: 2.4s ;
-o-transition-delay: 2.4s ;
 transition-delay: 2.4s ;}
#maindick {
 position: fixed; margin: auto; right: 0px; left:990px; top: 0; bottom: 10; width: 300px; height: 490px; background: #trans; border: 0px solid #9E988B; border-radius: 17px 0px 17px 0px; box-shadow: #9E988B 0px 0px 0px 0px; overflow: hidden; text-align: left; opacity: 0;}
body:hover #maindick {
 opacity: 1;
 transition: all 1.2s ease-out;
 -o-transition: all 1.2s ease-out;
 -webkit-transition: all 1.2s ease-out;
 -moz-transition: all 1.2s ease-out;
-webkit-transition-delay: 2.4s ;
-moz-transition-delay: 2.4s;
-ms-transition-delay: 2.4s ;
-o-transition-delay: 2.4s ;
 transition-delay: 2.4s ;}

 .dick {position: absolute; overflow: hidden;
 right: 0px; left:00px; top: 0; bottom: 0; z-index:0; opacity: 1; display: inline-block;}
 .dick img {width: ; height: 250;}

#cocks {
position: fixed; margin: auto; right: 0px; left:840px; top: 170; bottom: 0;opacity: 0;
width: 110px;
height: 120px;
overflow-y: auto;
text-align: center;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}
body:hover #cocks{
 opacity: 1;
 transition: all 1.2s ease-out;
 -o-transition: all 1.2s ease-out;
 -webkit-transition: all 1.2s ease-out;
 -moz-transition: all 1.2s ease-out;
-webkit-transition-delay: 2.4s ;
-moz-transition-delay: 2.4s;
-ms-transition-delay: 2.4s ;
-o-transition-delay: 2.4s ;
 transition-delay: 2.4s ;}

#cons{
background-color: #823321;opacity: 1;
width: 100px; height: 15px;
border-radius: 0px 8px 0px 8px;
font-family: Questrial; margin-bottom:4;
font-size: 14px;
color: #9E988B;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}

#cons:hover{
background-color: #888888;color: #000000;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;}



</style><div id="maindick"><div class="dick"></div></div>
<div id="line"></div>
<a href="#00"><div id="main">
<div id="pic"><img src="http://wayoftheshadows.weebly.com/uploads/9/2/4/5/9245218/6171111.jpg?261"></div>
</div>
<div id="main2"><div class="head">R Y K E R</div><div class="head2">LIGHT DRAFTER</div>
<div id="submain"><div id="botline"></div></div></div>
</a>

<div id="top"></div><div id="bottom"></div>

<a href="#03"><div id="icon"><div id="subicon"></div><div class="head4"><b>POWER</div><div id="pic3"><img src="http://img15.deviantart.net/8fce/i/2011/169/3/a/prismatic_eye_hdr_by_evrwccn-d3j9fjz.jpg"></div></div></a>
<a href="#02"><div id="icon2"><div id="subicon"></div><div class="head3">STORY</div><div id="pic4"><img src="http://pixelatedgeek.com/wp-content/uploads/2012/09/bp-header.jpg"></div></div></a>
<a href="#01"><div id="icon3"><div id="subicon"></div><div class="head3">STATS</b></div><div id="pic2"><img src="https://pbs.twimg.com/profile_images/419129297522020353/DZYBKrjZ_400x400.png"></div></div></a>


<div id="01" class="darts"><div class="box"><h1>DOSSIER</h1>
Name - <font style="float: right;">Ryker</font><br>
Moniker (s) - <font style="float: right;">None</font><br>
Sex - <font style="float: right;">Male</font><br>
Age - <font style="float: right;">28</font><br>
Orientation - <font style="float: right;">Heterosexual</font><br>
Occupation - <font style="float: right;">Drafter</font><br>
Height - <font style="float: right;">5'11</font><br>
Weight - <font style="float: right;"> 170 pounds</font><br>
Build - <font style="float: right;">Muscular</font><br>
Marital Status - <font style="float: right;">Single</font><br><br>
<h1>PERSONA</h1>
<i>"A jug of wine a day keeps the doctor at bay, or so they say."</i>
</div></div>

<div id="02" class="darts"><div class="box">WIP</div>
</div>

<div id="03" class="darts"><div class="box"><b>Full Spectrum and a Super Chromat<br>Superviolet</b><br>Made of wavelengths shorter than most human eyes, this can only be seen by other superviolet drafters. Solid, but not as strong as blue or green, superviolet is the subtlest luxin. It is fine and similar to spidersilk, useful for creating invisible walls and traps, and marking targets.<br><b>Blue</b><br>Blue Luxin is hard, strong and smooth, with a consistency of chalk if it is drafted poorly.
 It's used in anything from creating large structures, weapons, armor or projectiles.<br><b>Green</b><br>Green luxin is springy and flexible, like flora. Can vary from a grainy leather or tree bark depending on the will of the drafter.<br><b>Yellow</b><br>Most often a liquid, slightly thicker than seawater, cool and bubbly. It is considered the hardest luxin, though only a superchromat can draft solid yellow luxin. <br><b>Orange</b><br>Orange luxin is slick, soapy, oily and heavy. It is used with machines and traps.<br><b>Red</b><br>Red luxin is sticky, goopy and extremely flammable. All depending how it is drafted, it can be either thick or gel-like.<br><b>Sub-Red</b><br>Sub-red exists more as a form of heat, but is also extremely flammable. By dilating his eyes fully Sub-Red, Ryker can see heat, allowing him almost thermal imagery in the dark.</div>
</div>

<div id="boxb">
<h1>OUT OF CHARACTER</h1>
[01] PM Friendly.<br>
[02] I reserve the right to refuse any RP.<br>
[03] Story based.<br>
[04] Smut is earned.<br>
[05] OOC is not IC.<br>
[06] I ain't gonna spoonfeed you all day.<br>
[07] Just edit these.<br>
[08] Heh.
</div>

<div id="cocks">
<a href="" target="_blank"><div id="cons">name</div></a>
<a href="" target="_blank"><div id="cons">name</div></a>
<a href="" target="_blank"><div id="cons">name</div></a>
<a href="" target="_blank"><div id="cons">name</div></a>
<a href="" target="_blank"><div id="cons">name</div></a>
<a href="" target="_blank"><div id="cons">name</div></a>
<a href="" target="_blank"><div id="cons">name</div></a>
<a href="" target="_blank"><div id="cons">name</div></a>

</div>


<a href="profile.php?user=Punpun" title="Coded by Punpun." target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>