Shufee Tab 01

/********************************* CSS Part **************************/

/*******************************

UPDATE TAB BY SHUFEE THEMES (@wattsons)

    -Do not redestribute, claim as your own, remove the credit, move the credit
    -Edit how much you want but DO NOT remove the credit
    -Feel free to ask if you need help
    -Default height of the tab is 300px but you can adjust it in the last part of css code

INSTRUCTIONS:

✓ Paste the css part of the code above |CustomCSS| ... <body>

✓ Then paste the html part of the code under |CustomCSS| ... <body>

✓ Type your own text in the html part

✓ Change colors, fonts etc in css part (optional ofc)

✓ Enjoy :)

********************************/


.heaven {
    text-decoration:none;
    position:fixed;
    width:150px;
    height:300px;
    padding-bottom:10px;
    font-family:arial;  /** FONT **/
    font-size:8px;
    line-height:15px;
    z-index:999;
}

.s {
    font-size:12px;
    z-index:9999;
    position:fixed;
    margin-top:20px;
    margin-left:23px;
    opacity:0;
}
.s a {
    color:#dadada;
    text-decoration:none;
    -webkit-transition: all .6s ease-in-out;
        -moz-transition: all .6s ease-in-out;
        -o-transition: all .6s ease-in-out;
}
.s a:hover {
    color:black;
    -webkit-transition: all .6s ease-in-out;
        -moz-transition: all .6s ease-in-out;
        -o-transition: all .6s ease-in-out;
}

/** TAB'S TITLE **/
.heaventitle {
    text-decoration:none;
    width:118px;
    margin-top:15px;
    margin-left:15px;
    padding-top:5px;
    padding-bottom:5px;
    text-align:center;
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:black;    /** TITLE COLOR **/
    background:#f9f9f9;  /** TITLE BACKGROUND COLOR **/
    outline:none;
    z-index:9999;
}

/*** SUBTITLES ***/
.subt {
    line-height:15px;
    text-transform:uppercase;
    color:black;  /** SUBTITLES COLOR **/
    background:#f9f9f9; /** SUBTITLES BACKGROUND COLOR **/
}
/***/

.cloud {
    position:fixed;
    width:118px;
    height:0px;
    margin-top:-1px;
    margin-left:15px;
    line-height:20px;
    color:#6b6b6b;  /** TEXT COLOR **/
    text-align:center;
    word-break:normal;
    background:transparent;  /** BACKGROUND COLOR **/
    overflow:hidden;
        -webkit-transition: all .8s ease-in-out;
        -moz-transition: all .8s ease-in-out;
        -o-transition: all .8s ease-in-out;
    z-index:999;
}

.heaven:hover .s {
    opacity:1;
        -webkit-transition: all .6s ease-in-out;
        -moz-transition: all .6s ease-in-out;
        -o-transition: all .6s ease-in-out;
}

.heaventitle:hover .s {
    opacity:1;
        -webkit-transition: all .6s ease-in-out;
        -moz-transition: all .6s ease-in-out;
        -o-transition: all .6s ease-in-out;
}


.heaven:hover .cloud {
    height:300px;  /** IF THE TAB IS TOO SHORT MAKE THE HEIGHT BIGGER **/
        -webkit-transition: all .8s ease-in-out;
        -moz-transition: all .8s ease-in-out;
        -o-transition: all .8s ease-in-out;
}

.heaventitle:hover .cloud {
    height:300px;  /** IF THE TAB IS TOO SHORT MAKE THE HEIGHT BIGGER **/
        -webkit-transition: all .8s ease-in-out;
        -moz-transition: all .8s ease-in-out;
        -o-transition: all .8s ease-in-out;
}
/*************************** End of CSS part *************************/


<!----------------------------- HTML Part ---------------------------->
<div class="heaven">
<div class="s"><a href="http://wattsons.tumblr.com">⧨</div>
<div class="heaventitle">

<!--Update tab title-->Updates<!-- -->

</div>
        <div class="cloud">
        </br>
<div class="subt">

<!--Subtitle 1-->Subtitle 1<!-- --></div>
    <!--Content 1-->this is optional<!-- -->

<div class="subt">

<!--Subtitle 1-->Subtitle 1<!-- --></div>
    <!-- Content 2 --> you can write <!-- -->

<div class="subt">

<!--Subtitle 1-->Subtitle 1<!-- --></div>
    <!-- Content 3 --> whatever you want here <!-- -->

<div class="subt">

<!--Subtitle 1-->Subtitle 1<!-- --></div>
<!-- Content 4 --> and how much you want <!-- -->

</div>
</div>
<!---------------------------- End of HTML part ---------------------->