Chancel

<style>

body {text-align: left;
color: black;}

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

/*
first song - https://dl.dropboxusercontent.com/u/4556289/Crywolf%20-%20Wake%20%5BE-bow%5D.mp3
(https://youtu.be/d9opPttzDyk ----- Wake [E-bow] by Crywolf)

COLOR -- CDBED4
*/

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

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

@font-face {
 font-family:'otherfont';
 src:url(https://dl.dropboxusercontent.com/u/4556289/Crazy%2BThoughts.ttf);
 src:url(https://dl.dropboxusercontent.com/u/4556289/Saniretro.ttf);
}

a, a:hover{ color: black;}

#whole {position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-image: url(http://i57.tinypic.com/34tao9k.jpg);
background-repeat: repeat;}

#pictureholder
{ position: absolute;
 top: 300px;
 left: 0px;
 right: 0px;
 height: 60px;
 background: white;
 background-image: url(http://i.imgur.com/LYxSAyy.png);
 background-repeat: no-repeat;
 background-size: auto 1600px;
 background-position: top -280px right;
 -webkit-transition: all 1s;
 transition: all 1s;
 overflow: hidden;}

#linkholder {
 position: absolute;
 left: 0px;
 right: 0px;
 top: 275px;
 height: 20px;
 background: white;
-webkit-transition: all 1s;
transition: all 1s;
box-shadow: 0px 0px 4px silver;
}

#linkholder:hover{
z-index: 11;
}

#textstretch{
 position: absolute;
 top: 0px;
bottom: 0px;
right: 250px;
width: 100px;
height: 20px;
overflow: hidden;
 -webkit-transition: all 1s;
 transition: all 1s;}

#linker {
 float: left;
 height: 20px;
 font-size: 13pt;
 width: 10px;
 overflow: hidden;
 border: 0px solid black;
 letter-spacing: 200px;
 font-weight: 400;
 font-family:'gogogo';
 margin-right: 3px;
 -webkit-transition: all 1s;
 transition: all 1s;
 text-shadow: 2px 2px 3px white;
}

#linker:hover {
 text-shadow: 2px 2px 3px blue;}

.spelet{
 color: black;
-webkit-transition: all 1s;
 transition: all 1s;
}

#nameparts{
 position: absolute;
 top: 310px;
 left: 100px;
 height: 200px;
 width: 400px;
 border: 0px solid black;
 font-family:'titlefont';
text-align: left;
}

#nameC{position: absolute;
font-size: 120pt;
top: 0px;
left: 10px;
 height: 200px;
 width: 140px;
overflow: hidden;
-webkit-transition: all 1s, text-shadow 1s;
transition: all 1s, text-shadow 1s;
opacity: 0;
text-shadow: -2px 0px 5px silver;}

#nametop{
 position: absolute;
 font-size: 20pt;
top: 60px;
left: 70px;
 height: 30px;
 width: 0px;
overflow: hidden;
-webkit-transition: all 1s, text-shadow 1s;
transition: all 1s, text-shadow 1s;}

#namebottom{
 position: absolute;
 font-size: 20pt;
top: 90px;
left: 83px;
 height: 30px;
 width: 0px;
overflow: hidden;
-webkit-transition: all 1s, text-shadow 1s;
transition: all 1s, text-shadow 1s;}

#whole:hover #pictureholder{
 height: 200px;
 background-position: top -280px right 100px;
-webkit-transition: all 4s;
 transition: all 4s;

}

#whole:hover #textstretch{
right: -100px;
width: 100%;
-webkit-transition: all 2s;
transition: all 2s;}

#whole:hover #linker{
 width: 100px;
 margin-right: 70px;
 letter-spacing: 3px;
 -webkit-transition: margin 1s 1s, letter-spacing 2s 0s, width 2s 1s;
transition: margin 1s 1s, letter-spacing 2s 0s, width 2s 1s;
}

#whole:hover .spelet{
 color: blue;
 -webkit-transition: all 1s 1s;
 transition: all 1s 1s;
}

#whole:hover #nametop{
 width: 80px;
 -webkit-transition: 1s 3s, text-shadow 1s;
 transition: 1s 3s, text-shadow 1s;
}
#whole:hover #namebottom{width: 120px;
-webkit-transition: 1s 4s, text-shadow 1s;
transition: 1s 4s, text-shadow 1s;}
#whole:hover #nameC{opacity: 1;
-webkit-transition: 0s 5s, text-shadow 1s;
transition: 0s 5s, text-shadow 1s;}

#nameparts:hover {
text-shadow: 0px -1px 3px blue;}

.middlebox{position: absolute;
left: 360px;
top: 0px;
bottom: 0px;
 margin: auto;
 height: 150px;
 width: 300px;
overflow: hidden;
border: 0px solid black;
border-radius: 10px 10px 10px 10px;
z-index: 0;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;}

.middlebox:target{z-index: 1;}

.slideleft1{
 position: absolute;
 left: -500px;
 height: 30px;
width: 300px;
 background: black;
 -webkit-transition: all 1s .5s;
transition: all 1s .5s;}

.slideright1{
 top: 30px;
 left: 800px;
 position: absolute;
 height: 30px;
width: 300px;
 background: black;
 -webkit-transition: all 1s .5s;
transition: all 1s .5s;
}
.slideleft2{
 top: 60px;
 left: -500px;
 position: absolute;
 height: 30px;
width: 300px;
 background: black;
 -webkit-transition: all 1s .5s;
transition: all 1s .5s;
}
.slideright2{
 top: 90px;
 left: 800px;
 position: absolute;
 height: 30px;
width: 300px;
 background: black;
 -webkit-transition: all 1s .5s;
transition: all 1s .5s;
}
.slideleft3{
 top: 120px;
 left: -500px;
 position: absolute;
 height: 30px;
width: 300px;
 background: black;
 -webkit-transition: all 1s .5s;
transition: all 1s .5s;
}
.contenthold{
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
position: absolute;
z-index: 1;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;
border: 0px solid red;
overflow: hidden;
text-align: left;}

#topleft{ font-family: 'otherfont', Arial;
font-size: 9pt;
position: absolute;
top: 6px;
left: 8px;
color: #21a1c4;
}
#thecontent{
 font-family:'gogogo';
 font-size: 10pt;
 position: absolute;
box-sizing: border-box;
padding-right: 3px;
 top: 25px;
 left: 7px;
 height: 120px;
 width: 287px;
 border: 0px solid white;
 overflow: auto;
overflow-x: hidden;
 color: gray;
text-align: left;
word-spacing: 2px;

}


::-webkit-scrollbar
{
	width: 4px;
 background-color: black;
}

::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: white ;

}


.middlebox:target .slideleft1, .middlebox:target .slideright1, .middlebox:target .slideleft2, .middlebox:target .slideright2, .middlebox:target .slideleft3 {left:0px;
-webkit-transition: all 1s 1s;
transition: all 1s 1s;}

.middlebox:target .contenthold {opacity: 1;
-webkit-transition: all 1s 1.6s;
transition: all 1s 1.6s;}

#whole:hover .middlebox{opacity:1;}


#musicselection {position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
box-sizing: border-box;
height: 200px;
border: 0px solid black;
}

#musicselection a{
 float: left;
 height: 100%;
 width: 200px;
 background-size: auto 100%;
 background-repeat: no-repeat;
 border: 0px solid black;
 background-position: center;
}

#musicselection a:nth-child(2){
float: right;}

.musiclink {position: absolute;
right: -155px;
height: 20px;
bottom: 190px;
width: 140px;
border: 0px solid black;
-webkit-transition: all 1s;
transition: all 1s;}

.musiclink:target{
 right: 0px;
}

#musicholder{
position: absolute;
height: 160px;
width: 200px;
overflow: hidden;
border: 1px solid black;
z-index: 10;
opacity: 0;}

#musicholder audio{
zoom: 700%;}

#musicholder:active ~ #nameC{
text-shadow: -2px 0px 5px blue;
-webkit-transition: text-shadow .1s !important;
transsition: text-shadow .1s !important;}

#secondbackground{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-image:url(http://i.imgur.com/LYxSAyy.png);
background-size: auto 1600px;
 background-position: top 20px right 100px;
background-repeat: no-repeat;
z-index: -1;
-webkit-transition: all .5s;
transition: all .5s;
opacity: 0;
}

#whole:hover #secondbackground{
opacity: 1;
-webkit-transition: all 1s 5s;
transition: all 1s 5s;}



</style>

<div id="whole">

 <div id="linkholder">

<div id="textstretch">

 <a href=#link1><div id="linker">
 <font class="spelet">c</font>ash</div></a>
 <a href=#link2><div id="linker">
 <font class="spelet">r</font>ules</div></a>
 <a href=#link3><div id="linker">
 <font class="spelet">e</font>verYthinG</div></a>
 <a href=#link4><div id="linker">
 <font class="spelet">a</font>round</div></a>
 <a href=#link5><div id="linker">
 <font class="spelet">m</font>e
 </div></a>

 </div>

 </div>

 <div id="pictureholder">



 <div class="middlebox" id="link1">
 <div class="slideleft1">
 </div>
 <div class="slideright1">
 </div>
 <div class="slideleft2">
 </div>
 <div class="slideright2">
 </div>
 <div class="slideleft3">
 </div>
 <div class="contenthold">
 <div id="topleft">
 THE HEDGEWORTHS
 </div>
 <div id="thecontent">
 Ever felt inadequate? Small? Infintesimally unimportant?
You are. Only coin has value.<br>
"<i>All that matters is power and the unassailable might of money.</i>"<br><br>
This is the idea that has driven the Hedgeworth family to become an empire and amass a fortune that generates not only fame but political control.<br><br> Its coffers are filled from the pockets of normal citizens and other companies alike, its transformation from a small company transporting lumber to an international corporation with IPs in every associated modern technology from cell phones to military applications came on the backs of anyone attempting to interrupt an ambition that refused to have its momentum slowed. <br><br>While the family head is a single individual whose identity is unknown and is commonly referred to simply as 'The King', their numbers are listed in the thousands with every adult or child fighting for power and position within the ranks.
 </div>
 </div>
 </div>

 <div class="middlebox" id="link2">
 <div class="slideleft1">
 </div>
 <div class="slideright1">
 </div>
 <div class="slideleft2">
 </div>
 <div class="slideright2">
 </div>
 <div class="slideleft3">
 </div>
 <div class="contenthold">
 <div id="topleft">
 basics
 </div>
 <div id="thecontent">
<ul style="line-height: 20px;">
<li> Chancellor Devon Hedgeworth.</li>
<li>Twenty-six years old.</li>
<li>Six-foot, two inches tall.</li>
<li>Slender/Average build, lightly muscled.</li>
<li>Personality traits -
<ul style="line-height: 12px;"><li>
Has high self-control but is occasionally belligerent when his sensitive spots are pushed.</li>
<li>Being used to having his way at all times with matters outside of his family have made him grossly indelicate with the feelings of "peasants", leading to moderately antagonistic or politically incorrect statements.</li>
<li>His belief that money can fix all issues leads to a certain amount of carelessness with possessions and things without a high value. His belief that money <i>is</i> all things lead to a high valuation of things <i>with</i> a high value.</li>
<li>Has a general disdain for any authority or position of power outside of his family.</li></ul> </li>

<li>Likes
<ul style="line-height: 12px;">
<li>The color white.</li>
<li>Things of high value.</li>
<li>Control.</li>
</ul>
</li>

<li>Dislikes
<ul style="line-height: 12px;">
<li>Peasants.</li>
<li>Ambiguity.</li>
<li>Filth.</li>
</ul>
</li>

</ul>
 </div>
 </div>
 </div>

 <div class="middlebox" id="link3">
 <div class="slideleft1">
 </div>
 <div class="slideright1">
 </div>
 <div class="slideleft2">
 </div>
 <div class="slideright2">
 </div>
 <div class="slideleft3">
 </div>
 <div class="contenthold">
 <div id="topleft">
 background
 </div>
 <div id="thecontent" style="line-height: 16px;">
 Chancellor's lineage is of a high pedigree even within the Hedgeworth family, though his exact family ties are known only to a select few - especially due to his being added to the family roster relatively late. The details are scarce, but amassed rumors seem to hint that one of his parents are of 'lesser' stock. <br><br>Especially rare is any information at his earlier life, the documentation of his raising only including his years from the 4th grade onwards when he was first enrolled in a 'Hedgeworth'-approved academy.
 </div>
 </div>
 </div>

 <div class="middlebox" id="link4">
 <div class="slideleft1">
 </div>
 <div class="slideright1">
 </div>
 <div class="slideleft2">
 </div>
 <div class="slideright2">
 </div>
 <div class="slideleft3">
 </div>
 <div class="contenthold">
 <div id="topleft">
 Account Transactions
 </div>
 <div id="thecontent">
 None thus far.
 </div>
 </div>
 </div>

 <div class="middlebox" id="link5">
 <div class="slideleft1">
 </div>
 <div class="slideright1">
 </div>
 <div class="slideleft2">
 </div>
 <div class="slideright2">
 </div>
 <div class="slideleft3">
 </div>
 <div class="contenthold">
 <div id="topleft">
 ooc
 </div>
 <div id="thecontent">
 Code is <a target="_blank" href="http://roleplay.chat/profile.php?user=Digital" target="_blank" style="color:white; text-decoration: none;">mine</a> (Digital), 100%.<br>
Art is owned.<br>
 Feel free to PM anytime.<br>
Rooms are generally OOC except when obviously not.<br><br>
Quote is from <i>Speed Racer</i> (2009), Mr. Royalton.<br>
Music is playable in-profile, click the 'C' in 'Chancellor.'
 </div>
 </div>
 </div>


 </div>

 <div id="nameparts">
<div id="musicholder">
<audio controls src="http://k003.kiwi6.com/hotlink/1bt9qgji69/02._Cassie_VOL.mp3" loop=3>
</audio>
</div>
 <div id="nameC">
 C
 </div>
 <div id="nametop">hancellor
 </div>
 <div id="namebottom">D.Hedgeworth
 </div>
 </div>

 <div id="musicselection">
 <a target="_blank" href="http://i.imgur.com/yBHQUWi.png" target=_blank style="background-image:url(http://i.imgur.com/Z66dAQR.png);" title="Jojo-esque.">
 </a>
 <a target="_blank" href="http://i.imgur.com/p23E9A5.png" style="background-image:url(http://i.imgur.com/1Grgy7q.png);" title="Nude." target=_blank>
 </a>
 </div>

<div id="secondbackground">
</div>

</div>