Exael code 2015

<style>

@import url(http://fonts.googleapis.com/css?family=Rhodium+Libre);

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


#whole {position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgb(178, 169, 190);
background-image:
url(http://i18.photobucket.com/albums/b149/abysmal_rage/tumblr_ncc8lxk8Oi1t7xyrqo1_1280_2.png);
background-position: bottom left;
background-repeat: no-repeat;
background-size: auto 100%;}

a, a:visited {text-decoration: none;
font-style: italic;
color: rgb(178, 169, 190);
-webkit-transition: color 1s;
transition: color 1s;}

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

#divbox {height: 600px;
width: 400px;
border: 0px solid red;
top: 24.5%;
left: 30.5%;
overflow: hidden;
position: absolute;
z-index: 10;
background: transparent;

}

#divslide {height: 20px;
width: 300px;
padding-right: 50px;
border: 0px solid blue;
position: absolute;
margin-top: 25px;
font-family: "Times New Roman", Times;
text-size: 13px;
margin-left: -320px;
font-style: italic;
-webkit-transition: margin 2s;
transition: margin 2s;
}

#whole:hover #divslide{
margin-left: 0px;}

#divslide:hover{
  margin-left: 0px;}

#pullball {height: 30px;
width: 30px;
border-radius: 180px;
border: .5px solid black;
position: absolute;
right: 0px;
margin-top: -5px;
background: #412846;
-webkit-transition: background 1s, border 0s;
transition: background 1s, border 0s;
box-sizing: border-box;
animation: alternating 2s infinite;
-webkit-animation: alternating 2s infinite;
}

@keyframes alternating {
0% { background: #412846; }
50% { background: #655387; }
100%{ background: #412846; }
}

@-webkit-keyframes alternating {
0% { background: #412846; }
50% { background: #655387; }
100%{ background: #412846; }
}


#pullball:hover{
/* -webkit-animation-play-state: paused;
animation-play-state: paused; */

-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
background:  rgb(178, 169, 190);
border: 1px solid #412846;
}


#textline {height: 20px;
width: 200px;
border: 0px solid green;
font-family: 'Rhodium Libre', serif;
text-size: 15px;
font-style: italic;
position: absolute;
margin-left: 10px;
}

#selectiondiv{
  position:absolute;
height: 20px;
width: 60px;
color: rgb(178, 169, 190);
border: 0px red solid;
border-radius: 60px;
margin-left: 20px;
-webkit-transition: background 1s;
transition: background 1s;
padding: 2px;
padding-left: 5px;
background: #412846;
z-index:5;
box-shadow: 1px 1px 2px black;
}


#selectiondiv:hover, #selectiondiv2:hover
{
z-index: 6;}

#selectiondiv:target, #selectiondiv2:target{

z-index: 6;}

#selectiondiv2{
z-index:4;
  position:absolute;
height: 20px;
width: 38px;
background: #655387;
color: rgb(178, 169, 190);
-webkit-transition: background 1s;
transition: background 1s;
margin-left: 82px;
border-radius: 60px;
padding: 2px;
padding-left: 5px;
box-shadow: 1px 1px 2px black;
}


#boxdrop{border: 0px dotted green;
height: 420px;
width: 270px;
margin-top: 0px;
margin-left: 10px;
padding: 10px;
font-family: "Times New Roman", Times;
font-weight: 400;
font-size: 13px;
font-style: italic;
overflow-y: auto;

}


#splitgoeshere {height: 400px;
width: 300px;
overflow: hidden;
margin-top: 30px;
border: 0px dotted red;
position: absolute;}

span.drop {border-bottom: none; color:black; font-size: 15px;
-webkit-transition: color 2s;
transition: color 2s;}

span.drop:hover {text-decoration: none;  z-index: 6; font-style:italic;}

span.drop span {position: absolute; left: -9999px;
  margin: 20 0 0 0; padding: 1px 1px 1px 5px;
  border-style:solid; border-color:black; border-width:1px; z-index: 6;
opacity: 0.1;
transition: opacity 1s;
-webkit-transition: opacity 1s;
transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
  }

span.drop:hover span {left: 0%; background: white;
transition: opacity 1s;
-webkit-transition: opacity 1s;
width: 300px;
height: 450px;
padding-top: 20px;overflow: hidden;
border: 0px #7CF105 dashed;
text-align: left;
font-size: 13px;
font-family: Times New Roman, Verdana, Geneva, Arial, sans-serif;
opacity: 1.0;
overflow: hidden;
margin-top: 16px;
background: transparent;
}


/* Found this in Hoot's profile and used it 'cos it's cool */

#ongaku {
    border-radius: 5px;
    width: 25px;
    height: 20px;
    overflow: hidden;
background: transparent;
    opacity: .8;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.musicgif {
    margin: 5px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
#ongaku:hover .musicgif {
    margin-top: -12px;
    background-color: transparent;
}
 #ongaku:hover { background-color: rgb(178, 169, 190);}
#musicpl {
    width: 20px;
    overflow: hidden;
    height: 20px;
    padding: 2px 20px 10px 3px;
    margin-left: -20px;
    background-color: rgb(178, 169, 190);
}



</style>


<div id="whole">
<span class="drop">
<div id="divbox">
<div id="divslide">
<div id="textline">
Exael, head librarian.<span>

<div id="selectiondiv">
<a href="#Character">Character</a>
</div>
<div id="selectiondiv2">
<a href="#OOC">OOC</a>
</div>

<div id="splitgoeshere">
<a name="Character"></a>
<div id="boxdrop">Character info coming soon.
</div>

<a name="OOC"></a>
<div id="boxdrop">When in the Library, please act responsibly.<br>
If you don't, you're out.<br><br>
Art is not mine.<br>
Music is <a href="https://youtu.be/NtQRBzSN9Vw" target=_blank" style="color: black; font-style: normal;" >Change of the Guard</a><br>by Kamasi Washington.
</div>
</div>
</span></span>


</div>
<div id="pullball">
<div style="position: absolute;
right: 0px;
top: 5px;
left: -4px;
width: 19px;
overflow: hidden;
margin: auto;">
<div id="ongaku">
<div class="musicgif"><img src="http://media.tumblr.com/tumblr_m7w2py1dEP1r6o8v2.gif"/></div>
<div id="musicpl">
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=https://www.dropbox.com/s/gpbxupu4i05ghjs/Kamasi%20Washington%20-%20%27Change%20of%20the%20Guard%27.mp3?dl=1&t0=Kamasi Change The Guard &total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
</div>
</div>
</div>
</div>
</div>
</div>


</div>



</div>