Iamthemelocked - Updates Tab #6 Part 2

/* --- UPDATES TAB ---*/

#updateboxes {
width: 150px;
height: 150px;
position:fixed;
margin-top:20px;
margin-left: 20px;
}

#updateboxes a{
color:{color:Tab Links Colour};
font-size:8px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

#updateboxes a:hover{
color:{color:Tab Links Colour Hover};
font-size:8px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

/* --- UPDATES TAB BOX 1 START---*/

#updatebox1 {
width: 80px;
height: 1px;
display: block;
opacity:1;
padding:3px;
margin-bottom:5px;
font-size:8px;
line-height:110%;
overflow:hidden;
font-family:calibri;
text-transform:uppercase;
text-align:center;
color:{color:Tab Text Colour};
background-color: {color:Tab Box 1 Background Colour};
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

#updatebox1:hover {
height:115px; /* --- Extend the box´s height here---*/
width:120px; /* --- Extend the box´s width here---*/
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

/* --- UPDATES TAB BOX 1 END---*/

/* --- UPDATES TAB BOX 2 START---*/

#updatebox2 {
width: 50px;
height: 1px;
display: block;
opacity:1;
padding:3px;
margin-bottom: 5px;
font-size:8px;
overflow:hidden;
line-height:110%;
font-family:calibri;
text-transform:uppercase;
text-align:center;
color:{color:Tab Text Colour};
background-color: {color:Tab Box 2 Background Colour};
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

#updatebox2:hover {
height:115px; /* --- Extend the box´s height here---*/
width:120px; /* --- Extend the box´s width here---*/
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

/* --- UPDATES TAB BOX 2 END---*/

/* --- UPDATES TAB BOX 3 START---*/

#updatebox3 {
width: 80px;
height: 1px;
display: block;
opacity:1;
padding:3px;
margin-bottom: 5px;
font-size:8px;
overflow:hidden;
line-height:110%;
font-family:calibri;
text-transform:uppercase;
text-align:center;
color:{color:Tab Text Colour};
background-color: {color:Tab Box 3 Background Colour};
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

#updatebox3:hover {
height:115px; /* --- Extend the box´s height here---*/
width:120px; /* --- Extend the box´s width here---*/
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

/* --- UPDATES TAB BOX 3 END---*/

/* --- UPDATES TAB BOX 4 START---*/

#updatebox4 {
width: 50px;
height: 1px;
display: block;
opacity:1;
padding:3px;
margin-bottom: 5px;
font-size:8px;
overflow:hidden;
line-height:110%;
font-family:calibri;
text-transform:uppercase;
text-align:center;
color:{color:Tab Text Colour};
background-color: {color:Tab Box 4 Background Colour};
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

#updatebox4:hover {
height:115px; /* --- Extend the box´s height here---*/
width:120px; /* --- Extend the box´s width here---*/
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

/* --- UPDATES TAB BOX 4 END---*/

/* --- UPDATES TAB BOX 5 START---*/

#updatebox5 {
width: 80px;
height: 1px;
display: block;
opacity:1;
padding:3px;
margin-bottom: 5px;
font-size:8px;
overflow:hidden;
line-height:110%;
font-family:calibri;
text-transform:uppercase;
text-align:center;
color:{color:Tab Text Colour};
background-color: {color:Tab Box 5 Background Colour};
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

#updatebox5:hover {
height:115px; /* --- Extend the box´s height here---*/
width:120px; /* --- Extend the box´s width here---*/
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

/* --- UPDATES TAB BOX 5 END---*/

/* --- IF YOU WANT TO ADD MORE BOXES THEN JUST COPY ONE OF THE ABOVE AND ADD IT IN THE HTML AS WELL (HTML=THE BLUEISH PART A LITTLE FURTHER BELOW. IF THERE ARE ANY QUESTIONS DON´T HESITATE TO ASK ME ON MY THEME BLOG (IAMTHEMELOCKED)---*/

/* --- UPDATES TAB IMAGE---*/

#updateimage img{
width:85px;
margin-top: -90px; /* --- Move the image here up or down---*/
margin-left: 31px; /* --- Move the image here to the left or to the right---*/
position:fixed;
}

/* --- UPDATES TAB IMAGE---*/

/* --- UPDATES TAB ---*/