slide down updates tab with image

<!-- this part goes with all the meta tags at the top of your theme code -->


<meta name="image:titletab" content="/" />


<!-- this part goes under <style type="text/css"> -->

#dakota {
text-align: center;
font-size: 9px;
font-family:times new roman;
position:fixed;
left:10px;
top:-111px; <!-- change this number to change where the picture/tab starts before hovering -->
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
z-index:999;
}

#dakota:hover {top:0px;}

#maria {
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-width:1px;
border-color:#E3E3E3;
padding: 5px 0 5px 0;
background: #fff;
width:120px; <!-- self explanatory. if you change this, you may have to also change the top: px above -->
color:{color:text};
height:100px; <!-- kinda self explanatory. if you change this, you may have to also change the top: px above -->
border-bottom-right-radius: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
z-index: 9999;
}

#angel{

text-align: center;
height:15px;
padding: 2px 0 8px 0;
background:#FFFFFF;
border-bottom-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
width: 110px; }

#angel img { width:120px; height:auto;}


<!-- this part goes under <body> -->


<div id="dakota">
<div id="maria"><p>


<!-- put whatever you want in the tab here. add <center> and </center> around your text to center it. -->


</p></div>
<div id="angel"><center><img src="{image:titletab}"></div></center>
</div>
</div></div>