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

.updateboxes {
width: 150px;
height: 150px;
position:fixed;
margin-top:60px;
margin-left:px;
}

.updateboxes a{
    font-size:9px;
    -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{
font-size:9px;
-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: 10px;
height: 5px;
display: block;
opacity:1;
padding:3px;
font-size:9px;
margin-bottom:5px;
line-height:110%;
overflow:hidden;
font-family:calibri;
text-transform:uppercase;
text-align:center;
color:{color:hover};
background-color: {color:Link};
-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 {
color:{color:text};
height:80px; /* --- 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;
overflow-y:scroll;
margin-left:60px;
}

.updatebox1 a{
    color:{color:tab};
}

.updatebox1 a:hover{
}

.updatebox1 .title{
    font-size:15px;
    color:{color:Hover};
    line-height:13px;
}

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

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

.updatebox2 {
width: 10px;
height: 5px;
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:hover};
background-color: {color:Sidebar Background};
-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 {
color:{color:text};
height:80px; /* --- 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;
overflow-y:scroll;
margin-left:60px;
}

.updatebox2 a{
    color:{color:tab};
}

.updatebox2 a:hover{
    color:{color:hover};
}

.updatebox2 .title{
    font-size:15px;
    color:{color:Link};
   line-height:13px;
}

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

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

.updatebox3 {
width: 10px;
height: 5px;
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:text};
background-color: {color:Link};
-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 {
color:{color:Hover};
height:60px; /* --- Extend the box´s height here---*/
width:100px; /* --- 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;
overflow-y:scroll;
margin-left:60px;
}

.updatebox3 a{
    color:{color:tab};
}

.updatebox3 a:hover{
    color:{color:hover};
}

.updatebox3 .title{
    font-size:15px;
    color:{color:Hover};
    line-height:13px;
}

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

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

.updatebox4 {
width: 10px;
height: 5px;
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:hover};
background-color: {color:Sidebar Background};
-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 {
color:{color:text};
height:60px; /* --- Extend the box´s height here---*/
width:100px; /* --- 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;
overflow-y:scroll;
margin-left:60px;
}

.updatebox4 a{
    color:{color:tab};
}

.updatebox4 a:hover{
    color:{color:hover};
}

.updatebox4 .title{
    font-size:15px;
    color:{color:Link};
    line-height:13px;
}

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

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

.updatebox5 {
width: 10px;
height: 5px;
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:text};
background-color: {color:Link};
-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 {
color:{color:Hover};
height:60px; /* --- Extend the box´s height here---*/
width:100px; /* --- 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;
overflow-y:scroll;
margin-left:60px;
}

.updatebox5 a{
    color:{color:text};
}

.updatebox5 a:hover{
    color:{color:hover};
}

.updatebox5 .title{
    font-size:15px;
    color:{color:Hover};
   line-height:13px;
}

/* --- 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 ---*/



<div class="updateboxes">

<div class="updatebox1">Title</br>
<div class="updatebox1. title">text</div>
<p align="left"> text
links: <a href="link">link</a>
<br></p>
</div>

<div class="updatebox2"></br>
<div class="updatebox2 .title">Title</div>
<p align="left"> text
links: <a href="link">link</a>
<br></p>
</div>

<div class="updatebox3"></br>
<div class="updatebox3. title">Title</div>
<p align="left"> text
links: <a href="link">link</a>
<br></p>
</div>

<div class="updatebox4"></br>
<div class="updatebox4. title">Title</div>
<p align="left"> text
links: <a href="link">link</a>
<br></p>
</div>

<div class="updatebox5"></br>
<div class="updatebox5. title">credit</div>
<br>
<a href="http://iamthemelocked.tumblr.com/" target="_blank" title="theme by iamthemelocked">update box credit</a>
</div>