(4.5/12) Updatestab Loveletter

<!----- Check if your theme includes this link (saturnicons), if it doesnt then please paste the link below after <head> ----->
<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">

<!----- put this before </style> ----->
/* ------- Loveletter Updates Tab CSS by baechys.tumblr.com ------- */

/* Instructions:
- remove {color:hearts} and insert a hexcode if you're NOT using this updates tab with the theme Momo by baechys.tumblr.com
- you can match options like the font, text-color and font-size to the theme you're currently using!
- editing is allowed but please keep it somewhat close to the version i provided!*/

.updates{
    position:fixed;
    top:10px;
    left:10px;
}

.udheart{
    padding:5px;
    font-size:15px;
    color:#c01408; /* change color of hearts here */
    background-color:#fff;
    border-radius:5px;
    width:15px;
    height:15px;
}

.udcont{
    width:150px;
    padding:7px;
    border-radius:5px;
    margin-left:-235px;
    background-color:#fff; /* change update box background color */
    margin-top:10px;
    transition:0.5s ease-in-out;
    font-size:11px; /* change font-size here */
    color:#666; /* change color of text here */
}

.udcont:nth-of-type(1){
     transition:0.3s ease-in-out;
     -webkit-transition:0.3s ease-in-out;
     -moz-transition:0.3s ease-in-out;
     -o-transition:0.3s ease-in-out;
}

.udcont:nth-of-type(2){
     transition:0.4s ease-in-out;
     -webkit-transition:0.4s ease-in-out;
     -moz-transition:0.4s ease-in-out;
     -o-transition:0.4s ease-in-out;
}

.udcont:nth-of-type(3){
     transition:0.5s ease-in-out;
     -webkit-transition:0.5s ease-in-out;
     -moz-transition:0.5s ease-in-out;
     -o-transition:0.5s ease-in-out;
}

.udcont p{
    margin-top:5px;
    margin-bottom:10px;
}

.udcont p:last-of-type(){
    margin-bottom:0px;
}

.udcont li::before{
    margin-left:-18px;
    font-size:100%;
    margin-top:3.3px;
}

.udheart:hover .udcont{
    margin-left:-5px;
}

.udhead .sf{
    font-size:90%;
}

.udhead{
    font-weight:bold;
    color:#c01408; /* change color of hearts here */
    background-color:#f7bdc3; /* change color of the section background here */
    border-radius:5px; /* remove this line if you dont want rounded corners! */
    padding:2px 3.5px;
    line-height:130%;
}

.udheart:hover .udc{
    margin-left:-5px;
}

/* dont touch this! */

.udc{
    width:150px;
    margin-left:-235px;
    margin-top:10px;
    transition:0.5s ease-in-out;
    font-size:11px;
    text-align:center;
}

.udc a{
    color:#fff;
    background-color:#c01408;
    font-weight:bold;
    padding:2px 5px;
    border-radius:5px;
    font-size:9px;
    letter-spacing:0.25px;
}

<!----- put this after <body> ----->
<!------ Loveletter Updates Tab HTML by baechys.tumblr.com ------->

<div class="updates">
<div class="udheart"><span class="sf sf-heart-2"></span>
<div class="udcont">

<div class="udhead"><span class="sf sf-heart-2"></span> Stats:</div>
<p>
Online counter here <br>
Visit counter here
</p>
</div><!-- updates container end -->

<div class="udcont">
<div class="udhead"><span class="sf sf-heart-2"></span> Currently:</div>
<ul>
    <li> Suffering through school </li>
    <li> Crying about red velvet </li>
</ul>
</div><!-- updates container end -->

<div class="udcont">
<div class="udhead"><span class="sf sf-heart-2"></span> Socials:</div>
<p>
Insert your social media here!
</p>
</div><!-- updates container end -->

<div class="udc"><a href="http://baechys.tumblr.com" title="Made with ♡ by Caroline">BCHYS</a></div>

</div><!-- updates tab end -->
</div><!-- update tab container end -->

<!------ Loveletter Updates Tab HTML by baechys.tumblr.com ------->