dropbox pack {1.2}

/*DAENSO'S DROPBOX NUMBER 1*/

-----------------------PASTE THIS CODE BEFORE </STYLE>

#drop {
    position:fixed;
    margin-left:75px;
    height:118px;
    z-index:99;
    width:1px;
    border-left:1px dashed #eee; /*customizable color*/

}

.soolist {
    margin:0px;
    padding:2px;
    height:120px;
    width:150px;
    top:0px;
    left:100px; /*customizable*/
    text-transform:lowercase; /*customizable*/
    position:relative;
    text-align:center;
    font-family:helvetica;
    font-size:10px;
}

.soohead {
    position:relative;
    margin-top:110px;
    background:#a7f8ca; /*customizable*/
    width:9px;
    height:9px;
    z-index:999;
    margin-left:71px;
    border-radius:0px 26px 14px 26px;
    -webkit-transition: opacity 8s ease-in-out;
    -moz-transition: opacity 8s ease-in-out;
    -o-transition: opacity 8s ease-in-out;
    -ms-transition: opacity 8s ease-in-out;
    transition: opacity 8s ease-in-out;
    transform:rotate(45deg);
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
animation:mymove 10s infinite;
-webkit-animation:mymove 10s infinite;
}

@keyframes mymove
{
0%   {background-color: #ffe8b8;} /*customizable color 1 of the drop*/
      25%  {background-color: #a7f8ca;} /*customizable color 2 of the drop*/
      50%  {background-color: #ffc2cf;} /*customizable color 3 of the drop*/
      75%  {background-color: #d0eaf5;} /*customizable color 4 of the drop*/
      100% {background-color: #ffe8b8;} /*customizable color 1 of the drop*/
}

@-webkit-keyframes mymove
{
0%  {background-color: #ffe8b8;} /*customizable color 1 of the drop*/
      25%  {background-color: #a7f8ca;} /*customizable color 2 of the drop*/
      50%  {background-color: #ffc2cf;} /*customizable color 3 of the drop*/
      75%  {background-color: #d0eaf5;} /*customizable color 4 of the drop*/
      100% {background-color: #ffe8b8;} /*customizable color 1 of the drop*/
}

.soohead:hover {
    margin-top:112px;

    -webkit-transition: opacity 8s ease-in-out;
    -moz-transition: opacity 8s ease-in-out;
    -o-transition: opacity 8s ease-in-out;
    -ms-transition: opacity 8s ease-in-out;
    transition: opacity 8s ease-in-out;

}

.soobody {
    border:3px double #eee; /*customizable color*/
    background:#fff; /*customizable*/
    color:#ddd; /*customizable*/
    display:none;
    z-index:999;
    position:relative;
    width:auto;
    height:80px;
    overflow-y:auto;
    top:-132px;
    text-align:center;

}


-------------------THEN PAST THIS AFTER <BODY> AND INSERT WHAT YOU WANNA WRITE WHERE THERE'S "YOUR TEXT HERE"

<div class="soolist">
<div id="drop"></div>
<p class="soohead"></p>
<div class="soobody">

your text here.

</div></div>


------------------AND PAST THIS CODE AFTER <HEAD> (THIS SHOULD BE ON TOP OF ALL THE CSS OF YOUR THEME)

<script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".soobody").hide();
$(".soohead").click(function(){
$(this).next(".soobody").slideToggle('medium');
}); }); </script>


________________________________________________________________


/*DAENSO'S DROPBOX NUMBER 2*/

-----------------------PASTE THIS CODE BEFORE </STYLE>

#k{
height:19px;
background:#fff; /*customizable*/
position:fixed;
color:#ddd; /*customizable*/
border-radius:0px 0px 20px 20px;
margin-left:400px; /*customizable*/
border:1px solid #eee; /*customizable color*/
top:-2px;
width:20px;
overflow:hidden;
z-index:99;
-webkit-transition:opacity 0.7s ease-in; opacity:1;
-webkit-transition:all 0.7s ease-in;
-moz-transition:all 0.7s ease-in;
transition:all 0.7s ease-in;
}

#k .olap{
padding:3px;
height:80px;
background:#fff; /*customizable*/
position:fixed;
font-family:helvetica; /*customizable*/
text-transform:lowercase; /*customizable*/
font-size:9px; /*customizable*/
color:#ddd; /*customizable*/
text-align:center; /*customizable*/
line-height:9px; /*customizable*/
border:3px double #eee; /*customizable color*/
margin:2px;
margin-top:-111px;
margin-left:-58px;
width:120px;
overflow-y:auto;
-webkit-transition:opacity 0.7s ease-in; opacity:1.0;
-webkit-transition:all 0.7s ease-in;
-moz-transition:all 0.7s ease-in;
transition:all 0.7s ease-in;
}

div#k:hover {
top:100px;
-webkit-transition:opacity 0.7s ease-in; opacity:1;
-webkit-transition:all 0.7s ease-in;
-moz-transition:all 0.7s ease-in;
transition:all 0.7s ease-in;
}


-----------------------THEN PASTE THIS CODE BEFORE AFTER <BODY> AND INSERT WHAT YOU WANNA WRITE WHERE THERE'S "YOUR TEXT HERE"

<div id="k">
<div style="padding:2px; opacity:0.6;"><img src="http://i.imgur.com/3z67pSE.gif" /></div>

<div class="olap">

your text here.

</div></div>