Updates tabs #2 CSS

/* ————————————— UPDATES TAB BY @PLANTHED ————————————— */

#updates{
position:fixed !important;
top:60px;
right:40px;
padding:10px;
width:180px;
height:13px;
z-index:9999999999;
}

.arrow{
font-size:25px; /*size of the arrow*/
color:#777;
margin-top:-8px;
right:0px;
padding:5px;
position:absolute;
background:#fff; /*background of the arrow*/
z-index:9999;
-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;
}

#updates:hover .arrow{
 -webkit-transform: rotateY(160deg);
transform: rotateY(160deg);
}

.upline{
width:0px;
height:1px;
right:1px;
margin-top:10px;
background:#eee;
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;
}

#updates:hover .upline{
width:150px;
-webkit-transition-delay: 0.50s;
-webkit-transition: all 0.50s;
transition: all 0.50s;
transition-delay: 0.50s;
}

.updatestitle{
height:15px;
margin-top:0px;
width:auto;
visibility:hidden;
font-size:16px;
font-family:roboto;
padding-right:5px;
color:#777; /*color title*/
font-weight:300;
letter-spacing:1px;
text-transform:uppercase;
opacity:0;
z-index:99999;
margin-left:-30px;
position:absolute;
background:#fff; /*title background*/
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;

}

#updates:hover .updatestitle{
opacity:1;
margin-left:0px;
visibility:visible;
-webkit-transition-delay: 0.50s;
-webkit-transition: all 0.50s;
transition: all 0.50s;
transition-delay: 0.50s;
}


.box{
width:150px; /*width of your tab*/
height:auto;
padding:10px;
background:#fff; /*box background*/
border:1px solid #eee; /*borders*/
line-height:15px;
font-family:hind;
margin-left:0px;
margin-top:70px;
font-size:10px;
position:relative;
opacity:0;
visibility:hidden;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

.box b{font-weight:bold;}
.box u{text-decoration:none;border-bottom:1px solid #eee;}

#updates:hover .box{
opacity:1;;
margin-top:10px;
visibility:visible;
-webkit-transition-delay: 1s;
-webkit-transition: all 1s;
transition: all 1;
transition-delay: 1s;
}

/* ————————————— UPDATES TAB BY @PLANTHED ————————————— */