Cacher is the code snippet organizer for pro developers

<style>
  #toolbox_container {
position: absolute;
left: 0;
border: 1px solid #EEE;
z-index: 1;
width: 20px;
background-color: #e1e1e1;
padding: 10px 5px;
height: 740px;
border-right: 1px solid #DDD;
-moz-box-shadow: -5px 1px 5px -1px #eeeeee;
-webkit-box-shadow: -5px 1px 5px -1px #eeeeee;
-moz-transition-property: width;
-webkit-transition-property: width;
-o-transition-property: width;
transition-property: width;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
}
#toolbox_container #toolbox {
vertical-align: top;
}
#toolbox_container #toolbox .toolbox_item {
display: block;
padding-top: 3px;
padding-bottom: 3px;
height: 22px;
overflow: hidden;
}
#toolbox_container #toolbox .toolbox_item a {
color: black;
text-decoration: none;
vertical-align: middle;
display: block;
padding-bottom: 5px;
padding-top: 5px;
}
#toolbox_container #toolbox .toolbox_item a .toolbox_item_image {
vertical-align: baseline;
}
#toolbox_container #toolbox .toolbox_item a .toolbox_item_text {
opacity: 0;
vertical-align: top;
-moz-transition-property: opacity;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-moz-transition-duration: 0.1s;
-webkit-transition-duration: 0.1s;
-o-transition-duration: 0.1s;
transition-duration: 0.1s;
}
#toolbox_container #toolbox .toolbox_item a:hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cccccc), color-stop(100%, #aaaaaa));
background-image: -webkit-linear-gradient(#cccccc, #aaaaaa);
background-image: -moz-linear-gradient(#cccccc, #aaaaaa);
background-image: -o-linear-gradient(#cccccc, #aaaaaa);
background-image: -ms-linear-gradient(#cccccc, #aaaaaa);
background-image: linear-gradient(#cccccc, #aaaaaa);
}
#toolbox_container:hover {
width: 200px;
}
#toolbox_container:hover #toolbox .toolbox_item a .toolbox_item_text {
opacity: 1;
-moz-transition-property: opacity;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
#content {
width: 800px;
margin: 0px auto;
height: 300px;
}
</style>	
<div id="toolbox_container">
    <div id="toolbox">
        <span class="toolbox_item">
            <a href="#">
                <img src="images/home.png" class="toolbox_item_image" />
                <span class="toolbox_item_text">Home</span>
            </a>
        </span>
        <span class="toolbox_item">
            <a href="#">
                <img src="images/refresh.png" class="toolbox_item_image" />
                <span class="toolbox_item_text">Reload</span>
            </a>
        </span>
        <span class="toolbox_item">
            <a href="#">
                <img src="images/search.png" class="toolbox_item_image" />
                <span class="toolbox_item_text">Search</span>
            </a>
        </span>
        <span class="toolbox_item">
            <a href="#">
                <img src="images/settings.png" class="toolbox_item_image" />
                <span class="toolbox_item_text">Settings</span>
            </a>
        </span>
        <span class="toolbox_item">
            <a href="#">
                <img src="images/twitter.png" class="toolbox_item_image" />
                <span class="toolbox_item_text">Twitter</span>
            </a>
        </span>
        <span class="toolbox_item">
            <a href="#">
                <img src="images/cost.png" class="toolbox_item_image" />
                <span class="toolbox_item_text">Expenses</span>
            </a>
        </span>
        <span class="toolbox_item">
            <a href="#">
                <img src="images/credit.png" class="toolbox_item_image" />
                <span class="toolbox_item_text">Cerdit</span>
            </a>
        </span><span class="toolbox_item">
            <a href="#">
                <img src="images/featured.png" class="toolbox_item_image" />
                <span class="toolbox_item_text">Other</span>
            </a>
        </span><span class="toolbox_item">
            <a href="#">
                <img src="images/folder.png" class="toolbox_item_image" />
                <span class="toolbox_item_text">Files</span>
            </a>
        </span><span class="toolbox_item">
            <a href="#">
                <img src="images/paypal.png" class="toolbox_item_image" />
                <span class="toolbox_item_text">Transfer</span>
            </a>
        </span><span class="toolbox_item">
            <a href="#">
                <img src="images/pen.png" class="toolbox_item_image" />
                <span class="toolbox_item_text">Edit</span>
            </a>
        </span><span class="toolbox_item">
            <a href="#">
                <img src="images/user.png" class="toolbox_item_image" />
                <span class="toolbox_item_text">User</span>
            </a>
        </span>
    </div>
</div>