Iamthemelocked Updates Tab #3 Part 2

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

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

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

#updatesquare1 {
width: 12px;
height: 12px;
display: block;
opacity:1;
margin-left:-15px;
background-color: {color:Tab Square 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;
}

#updatesquare1:hover {
width:100px;
background-color: {color:Tab Square 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;
}

#updatesquare1title {
width:0px;
height:12px;
display:block;
opacity:0;
font-size:8px;
font-family:calibri;
text-transform:uppercase;
text-align:right;
padding-right:2px;
margin-left:5px;
letter-spacing:4px;
line-height:11px;
color:{color:Tab Title 1 Text Colour};
background-color: {color:Tab Square 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;
}

#updatesquare1:hover #updatesquare1title{
width:100px;
opacity:1;
background-color: {color:Tab Square 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 {
width: 200px;
height: auto;
display: block;
opacity:1;
margin-left:-235px;
padding:4px;
padding-right:10px;
font-size:8px;
margin-top:-42px;
font-family:calibri;
text-transform:uppercase;
text-align:right;
background-color: {color:Tab Box 1 Background Colour};
color:{color:Tab Box 1 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;
}

#updatebox1 a{
color:{color:Tab Box 1 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;
}

#updatebox1 a:hover{
color:{color:Tab Box 1 Links Hover};
letter-spacing:2px;
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;
}

#updatebox1:hover {
margin-left:-30px;
-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---*/

#updatesquare2 {
width: 12px;
height: 12px;
display: block;
margin-top:35px;
opacity:1;
margin-left:-15px;
background-color: {color:Tab Square 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;
}

#updatesquare2:hover {
width:100px;
background-color: {color:Tab Square 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;
}

#updatesquare2title {
width:0px;
height:12px;
display:block;
opacity:0;
font-size:8px;
font-family:calibri;
text-transform:uppercase;
text-align:right;
padding-right:2px;
margin-left:5px;
letter-spacing:4px;
line-height:11px;
color:{color:Tab Title 2 Text Colour};
background-color: {color:Tab Square 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;
}

#updatesquare2:hover #updatesquare2title{
width:100px;
opacity:1;
background-color: {color:Tab Square 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 {
width: 200px;
height: auto;
display: block;
opacity:1;
margin-left:-235px;
padding:4px;
padding-right:10px;
font-size:8px;
margin-top:-42px;
font-family:calibri;
text-transform:uppercase;
text-align:right;
background-color: {color:Tab Box 2 Background Colour};
color:{color:Tab Box 2 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;
}

#updatebox2 a{
color:{color:Tab Box 2 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;
}

#updatebox2 a:hover{
color:{color:Tab Box 2 Links Hover};
letter-spacing:2px;
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;
}

#updatebox2:hover {
margin-left:-30px;
-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---*/

#updatesquare3 {
width: 12px;
height: 12px;
display: block;
margin-top:35px;
opacity:1;
margin-left:-15px;
background-color: {color:Tab Square 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;
}

#updatesquare3:hover {
width:100px;
background-color: {color:Tab Square 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;
}

#updatesquare3title {
width:0px;
height:12px;
display:block;
opacity:0;
font-size:8px;
font-family:calibri;
text-transform:uppercase;
text-align:right;
padding-right:2px;
margin-left:5px;
letter-spacing:4px;
line-height:11px;
color:{color:Tab Title 3 Text Colour};
background-color: {color:Tab Square 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;
}

#updatesquare3:hover #updatesquare3title{
width:100px;
opacity:1;
background-color: {color:Tab Square 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 {
width: 200px;
height: auto;
display: block;
opacity:1;
margin-left:-235px;
padding:4px;
padding-right:10px;
font-size:8px;
margin-top:-42px;
font-family:calibri;
text-transform:uppercase;
text-align:right;
background-color: {color:Tab Box 3 Background Colour};
color:{color:Tab Box 3 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;
}

#updatebox3 a{
color:{color:Tab Box 3 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;
}

#updatebox3 a:hover{
color:{color:Tab Box 3 Links Hover};
letter-spacing:2px;
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;
}

#updatebox3:hover {
margin-left:-30px;
-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---*/

#updatesquare4 {
width: 12px;
height: 12px;
display: block;
margin-top:35px;
opacity:1;
margin-left:-15px;
background-color: {color:Tab Square 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;
}

#updatesquare4:hover {
width:100px;
background-color: {color:Tab Square 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;
}

#updatesquare4title {
width:0px;
height:12px;
display:block;
opacity:0;
font-size:8px;
font-family:calibri;
text-transform:uppercase;
text-align:right;
padding-right:2px;
margin-left:5px;
letter-spacing:4px;
line-height:11px;
color:{color:Tab Title 4 Text Colour};
background-color: {color:Tab Square 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;
}

#updatesquare4:hover #updatesquare4title{
width:100px;
opacity:1;
background-color: {color:Tab Square 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 {
width: 200px;
height: auto;
display: block;
opacity:1;
margin-left:-235px;
padding:4px;
padding-right:10px;
font-size:8px;
margin-top:-42px;
font-family:calibri;
text-transform:uppercase;
text-align:right;
background-color: {color:Tab Box 4 Background Colour};
color:{color:Tab Box 4 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;
}

#updatebox4 a{
color:{color:Tab Box 4 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;
}

#updatebox4 a:hover{
color:{color:Tab Box 4 Links Hover};
letter-spacing:2px;
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;
}

#updatebox4:hover {
margin-left:-30px;
-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---*/

#updatesquare5 {
width: 12px;
height: 12px;
display: block;
margin-top:35px;
opacity:1;
margin-left:-15px;
background-color: {color:Tab Square 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;
}

#updatesquare5:hover {
width:100px;
background-color: {color:Tab Square 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;
}

#updatesquare5title {
width:0px;
height:12px;
display:block;
opacity:0;
font-size:8px;
font-family:calibri;
text-transform:uppercase;
text-align:right;
padding-right:2px;
margin-left:5px;
letter-spacing:4px;
line-height:11px;
color:{color:Tab Title 5 Text Colour};
background-color: {color:Tab Square 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;
}

#updatesquare5:hover #updatesquare5title{
width:100px;
opacity:1;
background-color: {color:Tab Square 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 {
width: 200px;
height: auto;
display: block;
opacity:1;
margin-left:-235px;
padding:4px;
padding-right:10px;
font-size:8px;
margin-top:-42px;
font-family:calibri;
text-transform:uppercase;
text-align:right;
background-color: {color:Tab Box 5 Background Colour};
color:{color:Tab Box 5 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;
}

#updatebox5 a{
color:{color:Tab Box 5 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;
}

#updatebox5 a:hover{
color:{color:Tab Box 5 Links Hover};
letter-spacing:2px;
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;
}

#updatebox5:hover {
margin-left:-30px;
-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---*/