/* tutorial made by sppice */

#purple {
text-align: center;
font-family: 'Your Font';
font-size: 18px;
position:fixed;
left:5px;
top:-291px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
z-index:999;
}

#purple:hover {top:0px;}

#red {
background: url('URL OF IMAGE');  ;
border:1px solid;
border-top:knone;
padding:5px 0 5px 0;
width:100px;
height:280px;
z-index: 9999;
}

#redtab {
background: url('URL OF IMAGE!');
border:1px solid;
border-top:none;
text-align: center;
height:11px;
padding:2px 0 8px 0;
width:100px;
}

#orange {
text-align: center;
font-family: 'Your Font';
font-size: 18px;
position:fixed;
left:112px;
top:-111px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
z-index:999;
}

#orange:hover {top:0px;}

#green {
background: url('URL OF IMAGE');
border:1px solid;
border-top:none;
padding:5px 0 5px 0;
width:250px; /* to make the announcements tab wider, make this 200 something bigger like 220 or 240 */
height:100px;
z-index: 9999;
}

#greentab {
background: url('URL OF IMAGE');
border:1px solid;
border-top:none;
border-width:1px;
text-align: center;
height:12px;
padding:2px 0 8px 0;
width: 100px;
}

/* tutorial made by sppice */