Updates Tab 2

<style type="text/css">

#uimg-s {background:#f1df8b;} /* colour of star */
#uimg-t {background:#5add9b;} /* colour of tree */
.ui-banner {background:#54d695;} /* colour of titles */
.ui-text {color:#b6b6b6;} /* colour of text */
.ui-text b {color:#f1df8b;} /* colour of bold text */
.ui-text i {color:#54d695;} /* colour of italic text */
.ui-text a:link, .ui-text a:active, .ui-text a:visited {
    color:#a3a3a3;} /* colour of link hover */
.ui-text a:hover {color:#f1df8b;} /* colour of link hover */

#xmas-updates {width:188px; height:115px; position:fixed; top:8px; left:8px;}

#uimg-s, #uimg-t {position:absolute; pointer-events:none; width:62px;
    width:62px;}
#uimg-s {height:15px;} #uimg-t {height:100px; margin-top:15px;}

.bauble {background:#fff; position:absolute; cursor:pointer; z-index:2;
    border-radius:1em; -webkit-border-radius:1em; -o-border-radius:1em;
    -moz-border-radius:1em;}
#b1 .bauble {margin-top:34px; margin-left:29px; width:4px; height:4px;}
#b2 .bauble {margin-top:46px; margin-left:25px; width:5px; height:5px;}
#b3 .bauble {margin-top:56px; margin-left:34px; width:5px; height:5px;}
#b4 .bauble {margin-top:60px; margin-left:18px; width:6px; height:6px;}
#b5 .bauble {margin-top:73px; margin-left:26px; width:7px; height:7px;}
#b6 .bauble {margin-top:86px; margin-left:40px; width:7px; height:7px;}
#b7 .bauble {margin-top:90px; margin-left:10px; width:8px; height:8px;}

.u-cont {width:188px;}
.u-info {width:120px; position:absolute; margin-left:68px; z-index:1;
    font-family:tahoma; font-size:8px; text-transform:uppercase;
    background:#fff; letter-spacing:1px; line-height:10px; display:none;
    margin-top:15px;}
.ui-banner {width:120px; padding:2px 0px; display:block; color:#fff;
    letter-spacing:2px; text-align:center; font-size:8px;}
.ui-text {width:114px; padding:3px; text-align:justify;
    margin-bottom:5px;}

</style>

<div id="xmas-updates">

    <div id="uimg-s"><img src="http://static.tumblr.com/w3dcevg/ihKnef3j7/updates-star.png" /></div>
    <div id="uimg-t"><img src="http://static.tumblr.com/w3dcevg/TjTnef49r/updates.png" /></div>

    <div class="u-cont" id="b1">
        <a href="http://cyantists.tumblr.com/" title="&copy;"><div class="bauble"></div></a>
    </div><div class="u-cont" id="b2">
        <div class="bauble"></div>
<div class="u-info"id="ui2"><!---------------- UPDATES 1 ---------------->
    <div class="ui-banner">info</div>
    <div class="ui-text">
you can have up to 7 tabs, they can all be any length
    </div>
    <div class="ui-banner">customising</div>
    <div class="ui-text">
the best thing about this updates tab is that it is really easy to customise the all the colours: the tree, the star & the baubles if you want
    </div>
</div><!------------------------- END UPDATES 1 ------------------------->

    </div><div class="u-cont" id="b3">
        <div class="bauble"></div>
<div class="u-info"id="ui3"><!---------------- UPDATES 2 ---------------->
    <div class="ui-banner">updates tab 2</div>
    <div class="ui-text">
<b>bold</b> | <i>italic</i> | <a href="/">link</a>
    </div>
    <div class="ui-banner">credit</div>
    <div class="ui-text">
the first bauble is a credit link, if you really don't want it there you can remove but please do not claim this as your own, I put time into making it
    </div>
</div><!------------------------- END UPDATES 2 ------------------------->

    </div><div class="u-cont" id="b4">
        <div class="bauble"></div>
<div class="u-info"id="ui4"><!---------------- UPDATES 3 ---------------->
    <div class="ui-banner">help</div>
    <div class="ui-text">
if you have any questions or some any help you can contact me <a href="http://themesbysaaraa.tumblr.com/faq">here</a>
    </div>
</div><!------------------------- END UPDATES 3 ------------------------->

    </div><div class="u-cont" id="b5">
        <div class="bauble"></div>
<div class="u-info"id="ui5"><!---------------- UPDATES 4 ---------------->
    <div class="ui-banner">updates 4</div>
    <div class="ui-text">
some text here
</div>
</div><!------------------------- END UPDATES 4 ------------------------->

    </div><div class="u-cont" id="b6">
        <div class="bauble"></div>
<div class="u-info"id="ui6"><!---------------- UPDATES 5 ---------------->
    <div class="ui-banner">updates 5</div>
    <div class="ui-text">
some text here
</div>
</div><!------------------------- END UPDATES 5 ------------------------->

    </div><div class="u-cont" id="b7">
        <div class="bauble"></div>
<div class="u-info"id="ui7"><!---------------- UPDATES 6 ---------------->
    <div class="ui-banner">updates 6</div>
    <div class="ui-text">
some text here
</div>
</div><!------------------------- END UPDATES 6 ------------------------->

    </div>

</div>