Colourful 5 Boxes Updates Tab Code 2

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

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

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

#updatebox1 {
width: 18px;
height: 18px;
display: block;
opacity:1;
margin-bottom: 5px;
background-color: {color:Tab Box 1 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: 85px;
background-color: {color:Tab Box 1 Colour Hover};
-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 #updatebox1content{
height: 77px;
opacity:1;
background-color: {color:Tab Box 1 Content 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;
}

#updatebox1content {
width: 250px;
height: 10px;
display: block;
opacity:0;
margin-left:20px;
padding:4px;
font-size:8px;
font-family:calibri;
text-transform:uppercase;
margin-bottom: 5px;
text-align:left;
color:{color:Tab Box 1 Content Text};
-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;
}

#updatebox1content a{
color:{color:Tab Box 1 Content Links};
font-size:8px;
text-transform:uppercase;
background-color: transparent;
-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;
}

#updatebox1content a:hover{
color:{color:Tab Box 1 Content Links Hover};
letter-spacing:3px;
font-size:8px;
text-transform:uppercase;
background-color: transparent;
-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: 18px;
height: 18px;
display: block;
opacity:1;
margin-bottom: 5px;
background-color: {color:Tab Box 2 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: 85px;
background-color: {color:Tab Box 2 Colour Hover};
-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 #updatebox2content{
height: 77px;
opacity:1;
background-color: {color:Tab Box 2 Content 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;
}

#updatebox2content {
width: 250px;
height: 10px;
display: block;
opacity:0;
margin-left:20px;
padding:4px;
font-size:8px;
font-family:calibri;
text-transform:uppercase;
margin-bottom: 5px;
text-align:left;
color:{color:Tab Box 2 Content Text};
-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;
}

#updatebox2content a{
color:{color:Tab Box 2 Content Links};
font-size:8px;
text-transform:uppercase;
background-color: transparent;
-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;
}

#updatebox2content a:hover{
color:{color:Tab Box 2 Content Links Hover};
letter-spacing:3px;
font-size:8px;
text-transform:uppercase;
background-color: transparent;
-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: 18px;
height: 18px;
display: block;
opacity:1;
margin-bottom: 5px;
background-color: {color:Tab Box 3 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: 85px;
background-color: {color:Tab Box 3 Colour Hover};
-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 #updatebox3content{
height: 77px;
opacity:1;
background-color: {color:Tab Box 3 Content 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;
}

#updatebox3content {
width: 250px;
height: 10px;
display: block;
opacity:0;
margin-left:20px;
padding:4px;
font-size:8px;
font-family:calibri;
text-transform:uppercase;
margin-bottom: 5px;
color:{color:Tab Box 3 Content Text};
text-align:left;
-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;
}

#updatebox3content a{
color:{color:Tab Box 3 Content Links};
font-size:8px;
text-transform:uppercase;
background-color: transparent;
-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;
}

#updatebox3content a:hover{
color:{color:Tab Box 3 Content Links Hover};
letter-spacing:3px;
font-size:8px;
text-transform:uppercase;
background-color: transparent;
-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: 18px;
height: 18px;
display: block;
opacity:1;
margin-bottom: 5px;
background-color: {color:Tab Box 4 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: 85px;
background-color: {color:Tab Box 4 Colour Hover};
-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 #updatebox4content{
height: 77px;
opacity:1;
background-color: {color:Tab Box 4 Content 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;
}

#updatebox4content {
width: 250px;
height: 10px;
display: block;
opacity:0;
margin-left:20px;
padding:4px;
font-size:8px;
font-family:calibri;
text-transform:uppercase;
margin-bottom: 5px;
color:{color:Tab Box 4 Content Text};
text-align:left;
-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;
}

#updatebox4content a{
color:{color:Tab Box 4 Content Links};
font-size:8px;
text-transform:uppercase;
background-color: transparent;
-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;
}

#updatebox4content a:hover{
color:{color:Tab Box 4 Content Links Hover};
letter-spacing:3px;
font-size:8px;
text-transform:uppercase;
background-color: transparent;
-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: 18px;
height: 18px;
display: block;
opacity:1;
margin-bottom: 5px;
background-color: {color:Tab Box 5 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: 85px;
background-color: {color:Tab Box 5 Colour Hover};
-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 #updatebox5content{
height: 77px;
opacity:1;
background-color: {color:Tab Box 5 Content 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;
}

#updatebox5content {
width: 250px;
height: 10px;
display: block;
opacity:0;
margin-left:20px;
padding:4px;
font-size:8px;
text-align:left;
font-family:calibri;
text-transform:uppercase;
margin-bottom: 5px;
color:{color:Tab Box 5 Content Text};
-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;
}

#updatebox5content a{
color:{color:Tab Box 5 Content Links};
font-size:8px;
text-transform:uppercase;
background-color: transparent;
-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;
}

#updatebox5content a:hover{
color:{color:Tab Box 5 Content Links Hover};
letter-spacing:3px;
font-size:8px;
text-transform:uppercase;
background-color: transparent;
-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---*/

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

#updateimage img{
width:110px;
margin-top: 0px;
margin-left: -50px;
position:fixed;
}