Chancellor

<style>

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

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

@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://i57.tinypic.com/w89kdw.jpg);
background-repeat: no-repeat;
background-size: auto 1000px;
background-position: top -410px right -100px;
  -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;
}

#textstretch{
  position: absolute;
  top: 0px;
bottom: 0px;
right: 150px;
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;
transition: all 1s;
opacity: 0;}

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

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

#whole:hover #pictureholder{
  height: 200px;
background-position: top -360px 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;
  transition: 1s 3s;
}
#whole:hover #namebottom{width: 120px;
-webkit-transition: 1s 4s;
transition: 1s 4s;}
#whole:hover #nameC{opacity: 1;
-webkit-transition: 0s 5s;
transition: 0s 5s;}

.middlebox{position: absolute;
left: 500px;
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;
  top: 25px;
  left: 7px;
  height: 120px;
  width: 287px;
  border: 0px solid white;
  overflow: hidden;
  color: gray;

}

.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;
right: 0px;
height: 200px;
width: 150px;
border: 0px solid black;}

#musicselection a{
  float: left;
  height: 100%;
  width: 70px;
  background-size: auto 100%;
  background-repeat: no-repeat;
  border: 0px solid black;
  background-position: center 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;
}

</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">
        intro
      </div>
        <div id="thecontent">
          This profile is a WIP.
        </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">
          Character info here.
        </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">
          General story info here
        </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">
        history
      </div>
        <div id="thecontent">
          Character history here.
        </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 mine.<br>
          Steal if you want, just tell me?<br><br>
          Feel free to PM anytime.
        </div>
      </div>
    </div>


  </div>

   <div id="nameparts">
    <div id="nameC">
      C
    </div>
    <div id="nametop">hancellor
    </div>
    <div id="namebottom">D.Hedgeworth
    </div>
  </div>

  <div id="musicselection">
    <a href="http://i57.tinypic.com/w89kdw.jpg" target=_blank style="
                           background-image:url(http://i60.tinypic.com/bjagdk.jpg);">
      </a>
    <a href=#nonono style="background-image:url(http://i60.tinypic.com/2d2agj5.jpg);">
      </a>
  </div>

  <div id="hohoho" class="musiclink">

  </div>
  <div id="nonono" class="musiclink">
    <embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=https://www.dropbox.com/s/b22m36khavbh4v8/Doctor%20Vox%20-%20Wasting%20Time.mp3?dl=1&t0=wastetime&total=1" quality="high"width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
  </div>

</div>