Updates tabs 2. Step 1

--------------------------------------------------------------
TOP LEFT
--------------------------------------------------------------

/*UPDATES TAB BY PAINTHEMES.TUMBLR.COM*/

#updates{
position:fixed !important;
top:40px;
left:40px;
border-bottom:1px solid #ccc; /*bottom border of the update title*/
padding:6px;
width:13px;
height:13px;
z-index:9999999999;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

#updates:hover{
width:150px;
}

.plus{
font-size:12px; /*size of the plus icon*/
color:{color:text};
margin-top:0px;
margin-left:1px;
position:absolute;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

#updates:hover .plus{
-ms-transform: rotate(42deg); /* IE 9 */
-webkit-transform: rotate(42deg); /* Chrome, Safari, Opera */
transform: rotate(42deg);
}

.updatestitle{
height:15px;
margin-top:0px;
width:auto;
visibility:hidden;
font-size:16px;
font-family:montserrat;
color:{color:text};
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
opacity:0;
margin-left:100px;
position:absolute;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

#updates:hover .updatestitle{
opacity:1;
margin-left:70px;
visibility:visible;
}


.box{
width:150px; /*width of your tab*/
color:{color:text}; /*color text*/
font-size:10px; /*text size*/
font-family:open sans;
height:auto;
padding:5px;
margin-left:-6px;
margin-top:20px;
position:relative;
opacity:0;
visibility:hidden;
background:#fff; /*change the color background*/
border-bottom:1px solid #ccc; /*border bottom of your boxes*/
line-height:15px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}


#updates:hover .box{
opacity:1;
margin-top:0px;
visibility:visible;
}

/*fonts*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans|Montserrat);

/*UPDATES TAB BY PAINTHEMES.TUMBLR.COM*/

--------------------------------------------------------------
TOP RIGHT
--------------------------------------------------------------

/*UPDATES TAB BY PAINTHEMES.TUMBLR.COM*/

#updates{
position:fixed;
top:40px;
right:20px;
border-bottom:1px solid #ccc; /*bottom border of the update title*/
padding:6px;
width:13px;
height:13px;
z-index:9999999999;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

#updates:hover{
width:150px;
}

.plus{
font-size:12px; /*size of the plus icon*/
color:{color:text};
margin-top:0px;
right:8px;
position:absolute;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

#updates:hover .plus{
-ms-transform: rotate(42deg); /* IE 9 */
-webkit-transform: rotate(42deg); /* Chrome, Safari, Opera */
transform: rotate(42deg);
}

.updatestitle{
height:15px;
margin-top:0px;
width:auto;
visibility:hidden;
font-size:16px;
font-family:montserrat;
color:{color:text};
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
opacity:0;
right:100px;
position:absolute;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

#updates:hover .updatestitle{
opacity:1;
right:80px;
visibility:visible;
}


#box{
width:150px; /*width of your tab*/
color:{color:text}; /*color text*/
font-size:10px; /*text size*/
font-family:open sans;
height:auto;
padding:5px;
margin-left:-148px;
visibility:hidden;
margin-top:20px;
position:relative!important;
opacity:0;
background:#fff; /*change the color background*/
border-bottom:1px solid #ccc; /*border bottom of your boxes*/
line-height:15px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}


#updates:hover #box{
opacity:1;
margin-left:-10px;
margin-top:0px;
visibility:visible;
}

/*fonts*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans|Montserrat);

/*UPDATES TAB BY PAINTHEMES.TUMBLR.COM*/