<style>
@import url(http://fonts.googleapis.com/css?family=Permanent+Marker|Montserrat|Philosopher);

.pfor {display: none;}
body {background: #202020 url(textimglink); overflow: hidden;}
#profile {border: 0px; background: transparent;}
/*Inspired, in part, by http://31matrimony.tumblr.com | © The Supreme @ RPC*/
body, a:hover {cursor: url(http://i.picpar.com/1eq.png), progress !important;}
#whole{position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px;}

::selection {background: transparent; }
::-moz-selection {background: transparent; }


@-webkit-keyframes pulse {
 25% {
 -webkit-transform: scale(1.02);
 transform: scale(1.02);
 }

 75% {
 -webkit-transform: scale(0.98);
 transform: scale(0.98);
 }
}

@keyframes pulse {
 25% {
 -webkit-transform: scale(1.02);
 transform: scale(1.02);
 }

 75% {
 -webkit-transform: scale(0.98);
 transform: scale(0.98);
 }
}

.pulse {
 display: inline-block;
 -webkit-transform: translateZ(0);
 transform: translateZ(0);
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pulse:hover, .pulse:focus, .pulse:active {
 -webkit-animation-name: pulse;
 animation-name: pulse;
 -webkit-animation-duration: .5s;
 animation-duration: .5s;
 -webkit-animation-timing-function: linear;
 animation-timing-function: linear;
 -webkit-animation-iteration-count: infinite;
 animation-iteration-count: infinite;
}


/*-----MAIN BOX CODE-----*/

#background{
position: fixed;
margin: auto;
left: 0px;
right: 400px;
top: 0px;
bottom: 0px;
width: 340px;
height: 510px;
background: #757575 url(http://i.picpar.com/QPfb.png);
border: 1px #D3D3D3 solid;
}

#base{
float: left;
margin-left: 10px;
margin-top: 10px;
width: 320px;
height: 490px;
}

/*-----TABS CODE-----*/

#top_tabs{
float: left;
margin-top: 90px;
width: 150px;
height: 60px;
background: #4F4F4F;
text-align: center;
box-shadow: #000000 0px 0px 4px 0px;
}

#bottom_tabs{
float: right;
width: 150px;
height: 60px;
background: #4F4F4F;
text-align: center;
box-shadow: #000000 0px 0px 4px 0px;
}

#top_tabs a, #bottom_tabs a{
display: inline-block;
margin-top: 21px;
margin-left: 2px;
margin-right: 2px;
text-decoration: none;
color: #ffffff;
font-size: 12px;
width: 60px;
height: 18px;
line-height: 16px;
-webkit-transition: background 0.7s ease-in-out;
-moz-transition: background 0.7s ease-in-out;
-transition: background 0.7s ease-in-out;
}

#top_tabs a:hover, #bottom_tabs a:hover{
color: white;
background: #757575;
}

.bar{
position: absolute;
width: 150px;
height: 10px;
background: #757575;
box-shadow: #000000 0px 0px 2px 0px;
}

/*-----ICON CODE-----*/

#top_icon{
float: right;
width: 130px;
height: 130px;
border: 10px #D3D3D3 solid;
outline: #4F4F4F 4px double;
outline-offset: -7px;
box-shadow: #000000 0px 0px 4px 1px;
}

#bottom_icon{
float: left;
width: 130px;
height: 130px;
border: 10px #D3D3D3 solid;
outline: #4F4F4F 4px double;
outline-offset: -7px;
box-shadow: #000000 0px 0px 4px 1px;
}

/*-----MIDDLE BOX CODE-----*/

#middle{
float: left;
width: 320px;
height: 130px;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 20px;
margin-bottom: 20px;
background: #757575;
overflow: hidden;
box-shadow: #000000 0px 0px 4px 0px;
}

#middle a{
text-decoration: none;
float: left;
margin-left: 10px;
height: 128px;
width: 50px;
background: #372B05;
border: 1px #D3D3D3 solid;
box-shadow: #000000 2px 2px 1px;
}

#middle img{
opacity: 0.3;
width: 50px; height: 128px;
transition: 0.5s;
}

#middle a:hover img{
opacity: 1;
}

/*-----PAGES CODE-----*/

.page{
position: fixed;
margin: auto;
left: 0px;
right: 400px;
top: 0px;
bottom: 0px;
width: 342px;
height: 512px;
opacity: 0;
transition: 0.7s;
}

.page:target{
left: 400px;
right: 0px;
opacity: 1;
transition: 0.7s;
}

.header{
float: left;
width: 300px;
height: 58px;
padding-right: 40px;
font-size: 40px;
font-family: Permanent Marker;
color: #D3D3D3;
text-align: right;
line-height: 70px;
letter-spacing: 3px;
text-shadow: #000000 2px 2px 0px;
border: 1px #D3D3D3 solid;
background: #D3D3D3 url(http://i.picpar.com/cQfb.png);
}

#info{
float: left;
margin-top: 5px;
margin-bottom: 5px;
width: 320px;
height: 400px;
padding: 10px;
border: 1px #D3D3D3 solid;
background: #4F4F4F url(http://i.picpar.com/QPfb.png);
overflow: auto;
font-family: verdana;
font-size: 10px;
color: #D3D3D3;
text-align: justify;
line-height: 10px;
}

.footer{
float: left;
width: 340px;
height: 18px;
border: 1px #D3D3D3 solid;
background: #D3D3D3 url(http://i.picpar.com/cQfb.png);
}

#stat{
float: left;
margin-left: 0px;
width: 318px;
height: 18px;
overflow: hidden;
border: #202020 1px solid;
}

.top{
float: left;
width: 318px;
height: 18px;
text-align: center;
letter-spacing: 1px;
font-size: 10px;
line-height: 18px;
font-weight: bold;
background: #202020;
font-family: Montserrat;
color: #888888;
font-variant: small-caps;
text-shadow: #000000 1px 1px 0px;
box-shadow: inset #D3D3D3 0px 0px 4px -1px;
}

.bot{
float: left;
width: 318px;
height: 18px;
text-align: center;
letter-spacing: 1px;
font-size: 10px;
line-height: 18px;
font-family: Philosopher;
box-shadow: inset #D3D3D3 0px 0px 10px -2px;
}

#stat:hover .top{
margin-top: -18px;
}

p{
float: left;
margin-top: 22px;
width: 320px;
height: 180px;
}

b{
color: #ffffff;
letter-spacing: 1px;
font-size: 10px;
}
</style>


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

<div class="page" id="first">

<div class="header">Stats</div>

<div id="info">
<div id="stat"><div class="top">Name</div><div class="bot">Rengar</div></div>
<div id="stat"><div class="top">Age</div><div class="bot">Unknown</div></div>
<div id="stat"><div class="top">Gender</div><div class="bot">Male</div></div>
<div id="stat"><div class="top">Orientation</div><div class="bot">Heterosexual</div></div>
<div id="stat"><div class="top">Hair</div><div class="bot">White Fur</div></div>
<div id="stat"><div class="top">Eyes</div><div class="bot">Blue</div></div>
<div id="stat"><div class="top">Height</div><div class="bot">Huge?</div></div>
<div id="stat"><div class="top">Weight</div><div class="bot">See above</div></div>
<div id="stat"><div class="top">Profession</div><div class="bot">Hunter</div></div>

<p></p>
</div>

<div class="footer"></div>
</div>


<div class="page" id="second">

<div class="header">Lore</div>

<div id="info">
<i>On every wall of his den, the trophy hunter Rengar mounts the heads, horns, claws, and fangs of the most lethal creatures in Valoran. Though his collection is extensive, he remains unsatisfied, tirelessly seeking greater game. He takes time with every kill, studying his prey, learning, and preparing himself for the next encounter with the Kha'Zix one monster he never managed to defeat.</i><br>
<br>
<i>Rengar never knew his real parents, but was raised by a human who was revered as a legendary hunter. He was an ideal pupil, intently absorbing the lessons of his father, and improving them with his uncanny feral instincts. Before his mane had fully grown, Rengar set off on his own and claimed a wide territory for himself. Along its perimeter, he mounted the skulls of his slain prey - a warning to would-be aggressors. He thought undisputed reign of a region would fulfill him, but instead, he grew restless. No beasts in his domain proved challenging prey, and without formidable adversaries to push his limits, Rengar's spirit waned. He feared that no worthwhile game remained, that he would never again feel the thrill of the hunt. Just when things seemed their bleakest, he encountered the monster. It was a disturbing, alien thing, distinctly out of place in his world. It bore huge scything claws and devoured any animal that strayed across its path. Overzealous at the prospect of a challenge, Rengar ambushed the monster in haste. It far outclassed anything he'd hunted before. Their fight was savage, and each suffered crippling wounds. Rengar lost an eye, but the most grievous blow was to his pride. He had never before failed to make the kill. Worse yet, the severity of his injuries forced him to retreat. Over the following days, he hovered on the threshold between life and death. He was wracked with pain, but beneath it, he felt a glimmer of joy. The hunt was on. If such powerful beings existed in the world, he would find them, and stack their heads high. The monster, however, was a kill he wanted to savor. On his den's largest wall, he reserves a space for the beast's head, a trophy he swears will one day be the centerpiece of his collection.</i>
</div>

<div class="footer"></div>
</div>


<div class="page" id="third">

<div class="header">Third</div>

<div id="info">
Third Page
</div>

<div class="footer"></div>
</div>


<div class="page" id="fourth">

<div class="header">OOC</div>

<div id="info">
One: PM Friendly<br>
Two: Fine with Smut or Plot rp<br>
Three: I will mount you on my wall. <br>
</div>

<div class="footer"></div>
</div>



<div id="background">
<div id="base">

<div id="top_tabs">
<div class="bar" style="margin-top: -15px;"></div>
<a href="#first">◆ ◆ ◆</a>
<a href="#second">◆ ◆ ◆</a>
</div>

<div id="top_icon"><a href="https://40.media.tumblr.com/78f3d27bda904a74a57d010425473fd7/tumblr_nrmz7nfco91tdm9gso1_1280.jpg" target="_blank"><img src="http://i.picpar.com/6x9b.jpg" width="130"></a></div>

<div id="middle">
<a href="http://i.picpar.com/Ix9b.jpg" target="_blank" class="pulse"><img src="http://i.picpar.com/Nx9b.jpg"></a>
<a href="http://i.picpar.com/Jx9b.png" target="_blank" class="pulse"><img src="http://i.picpar.com/Ox9b.jpg"></a>
<a href="http://i.picpar.com/Kx9b.png" target="_blank" class="pulse"><img src="http://i.picpar.com/Px9b.jpg"></a>
<a href="http://i.picpar.com/Lx9b.jpg" target="_blank" class="pulse"><img src="http://i.picpar.com/Rx9b.jpg"></a>
<a href="http://i.picpar.com/Tx9b.png" target="_blank" class="pulse"><img src="http://i.picpar.com/Vx9b.jpg"></a>
</div>

<div id="bottom_icon"><a href="http://orig07.deviantart.net/5f5c/f/2014/278/3/6/chbi_rengar_fa_by_silverfox5213-d81p092.jpg" target="_blank"><img src="http://i.picpar.com/9x9b.jpg" width="130"></a></div>
<div id="bottom_tabs">
<div class="bar" style="margin-top: 65px;"></div>
<a href="#third">◆ ◆ ◆</a>
<a href="#fourth">◆ ◆ ◆</a>
</div>


</div>
</div>

</div></div>