Music Container

*** PLACE THIS IN WHO I'D LIKE TO MEET: ***

<style>
#editthis{
    /* EDIT THIS STUFF TO POSITION YOUR MUSIC PLAYER */
    position:fixed;
    top:20px; /* YOU CAN CHANGE THIS TO BOTTOM */
    left:20px; /* YOU CAN CHANGE THIS TO RIGHT */
    z-index:99;}

/* I DON'T RECOMMEND TOUCHING THIS STUFF */
#music1{
    position:fixed;
    padding:2px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;}

#music1:hover #music2{
    opacity:0;
    margin-top:-25px;
    z-index:-1;}

#music1:hover #music3{
    opacity:1;
    margin-top:-5px;
    z-index:99;}

#music1:hover #musiclist{
    opacity:1;}

#music2{
    /* THIS IS THE GIF DIV */
    opacity:1;
    background-color:#fff;
    border:1px dotted #ccc;
    padding:6px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;}

#music3{
    /* THIS IS THE ACTUAL MUSIC PLAYER DIV */
    opacity:0;
    position:fixed;
    background-color:#fff;
    border:1px dashed #ccc;
    width:55px;
    height:20px;
    z-index:99;
    margin-left:-5px;
    overflow:hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;}

#musiclist{
    /* THIS IS THE PLAYLIST DIV */
    opacity:0;
    position:fixed;
    padding:6px;
    border:1px dashed #ccc;
    margin-left:10px;
    margin-top:10px;
    font-family:consolas;
    font-size:8px;
    background-color:#fff;
    width:120px;
    color:#999;
    text-transform:uppercase;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;}

#musiclist h1{
    /*THIS IS THE PLAYLIST TITLE SETTINGS*/
    font-family:consolas;
    font-size:11px;
    margin-top:0px;
    margin-bottom:2px;
    font-style:normal;
    font-weight:normal;
    color:#1bbafc;

/*THIS IS THE PLAYLIST TITLE COLOR*/
    border-bottom:1px dotted #ccc;
    text-align:left;
    text-transform:uppercase;}
</style>


**** PLACE THIS IN INTERESTS SECTION ****

<div id="editthis">
<div id="music1">
<div id="music2">

<!-- YOU CAN CHANGE THE MUSIC GIF BELOW. -->
<img src="http://i122.photobucket.com/albums/o260/mhilka/minigifs/minigif01.gif"></div>

<div id="music3">
<Div style="margin-top:4px;">
<!--- PUT YOUR MUSIC PLAYER HERE --->

</div>
</div>

<div id="musiclist">
<h1>Playlist</h1>
<!-- PUT YOUR MUSIC TITLES HERE. BE SURE TO ADD A BREAK AFTER EACH ONE. -->
01. Song1 <br>
02. Song2 <br>
03. Song3 <br>
</div>

</div>
</div>