Iamthemelocked - Updates Tab #5 Code 2

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

#updateboxes {
width: auto;
height: auto;
position:fixed;
margin-top:-10px;
margin-left: 10px;
}

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

#usquare1 {
width: 14px;
height: 14px;
opacity:1;
font-size:0px;
line-height:12px;
font-family:calibri;
text-transform:uppercase;
text-align:center;
border-left: 1px solid {color:Tab Square Borders};
border-top: 1px solid {color:Tab Square Borders};
-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;
}

#usquare1:hover {
width:148px;
font-size:8px;
color:{color:Tab Titles Colour};
background-color: {color:Tab Titles Background};
border-right: 1px solid {color:Tab Square Borders};
border-bottom: 1px solid {color:Tab Square Borders};
-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;
}

#ubox1 {
width: 142px;
height: auto;
opacity:0;
margin-left:-150px;
padding:4px;
font-size:8px;
margin-top:2px;
font-family:calibri;
text-transform:uppercase;
text-align:center;
display:block;
position:fixed;
background-color: {color:Tab Box 1 Background Colour};
color:{color:Tab Text 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;
}

#ubox1 a{
color:{color:Tab Link Colour};
text-transform:normal;
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;
}

#ubox1 a:hover{
color:{color:Tab Link 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;
}

#usquare1:hover #ubox1{
opacity:1;
margin-left:-1px;
-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---*/

#usquare2 {
width: 14px;
height: 14px;
opacity:1;
font-size:0px;
line-height:12px;
font-family:calibri;
text-transform:uppercase;
text-align:center;
border-left: 1px solid {color:Tab Square Borders};
border-top: 1px solid {color:Tab Square Borders};
-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;
}

#usquare2:hover {
width:148px;
font-size:8px;
color:{color:Tab Titles Colour};
background-color: {color:Tab Titles Background};
border-right: 1px solid {color:Tab Square Borders};
border-bottom: 1px solid {color:Tab Square Borders};
-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;
}

#ubox2 {
width: 142px;
height: auto;
opacity:0;
margin-left:-150px;
padding:4px;
font-size:8px;
margin-top:2px;
font-family:calibri;
text-transform:uppercase;
text-align:center;
display:block;
position:fixed;
background-color: {color:Tab Box 2 Background Colour};
color:{color:Tab Text 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;
}

#ubox2 a{
color:{color:Tab Link Colour};
text-transform:normal;
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;
}

#ubox2 a:hover{
color:{color:Tab Link 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;
}

#usquare2:hover #ubox2{
opacity:1;
margin-left:-1px;
-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---*/

#usquare3 {
width: 14px;
height: 14px;
opacity:1;
font-size:0px;
line-height:12px;
font-family:calibri;
text-transform:uppercase;
text-align:center;
border-left: 1px solid {color:Tab Square Borders};
border-top: 1px solid {color:Tab Square Borders};
-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;
}

#usquare3:hover {
width:148px;
font-size:8px;
color:{color:Tab Titles Colour};
background-color: {color:Tab Titles Background};
border-right: 1px solid {color:Tab Square Borders};
border-bottom: 1px solid {color:Tab Square Borders};
-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;
}

#ubox3 {
width: 142px;
height: auto;
opacity:0;
margin-left:-150px;
padding:4px;
font-size:8px;
margin-top:2px;
font-family:calibri;
text-transform:uppercase;
text-align:center;
display:block;
position:fixed;
background-color: {color:Tab Box 3 Background Colour};
color:{color:Tab Text 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;
}

#ubox3 a{
color:{color:Tab Link Colour};
text-transform:normal;
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;
}

#ubox3 a:hover{
color:{color:Tab Link 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;
}

#usquare3:hover #ubox3{
opacity:1;
margin-left:-1px;
-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---*/

#usquare4 {
width: 14px;
height: 14px;
opacity:1;
font-size:0px;
line-height:12px;
font-family:calibri;
text-transform:uppercase;
text-align:center;
border-left: 1px solid {color:Tab Square Borders};
border-top: 1px solid {color:Tab Square Borders};
-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;
}

#usquare4:hover {
width:148px;
font-size:8px;
color:{color:Tab Titles Colour};
background-color: {color:Tab Titles Background};
border-right: 1px solid {color:Tab Square Borders};
border-bottom: 1px solid {color:Tab Square Borders};
-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;
}

#ubox4 {
width: 142px;
height: auto;
opacity:0;
margin-left:-150px;
padding:4px;
font-size:8px;
margin-top:2px;
font-family:calibri;
text-transform:uppercase;
text-align:center;
display:block;
position:fixed;
background-color: {color:Tab Box 4 Background Colour};
color:{color:Tab Text 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;
}

#ubox4 a{
color:{color:Tab Link Colour};
text-transform:normal;
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;
}

#ubox4 a:hover{
color:{color:Tab Link 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;
}

#usquare4:hover #ubox4{
opacity:1;
margin-left:-1px;
-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---*/

#usquare5 {
width: 14px;
height: 14px;
opacity:1;
font-size:0px;
line-height:12px;
font-family:calibri;
text-transform:uppercase;
text-align:center;
border-left: 1px solid {color:Tab Square Borders};
border-top: 1px solid {color:Tab Square Borders};
border-bottom: 1px solid {color:Tab Square Borders};
-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;
}

#usquare5:hover {
width:148px;
font-size:8px;
color:{color:Tab Titles Colour};
background-color: {color:Tab Titles Background};
border-right: 1px solid {color:Tab Square Borders};
border-bottom: 1px solid {color:Tab Square Borders};
-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;
}

#ubox5 {
width: 142px;
height: auto;
opacity:0;
margin-left:-150px;
padding:4px;
font-size:8px;
margin-top:2px;
font-family:calibri;
text-transform:uppercase;
text-align:center;
display:block;
position:fixed;
background-color: {color:Tab Box 5 Background Colour};
color:{color:Tab Text 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;
}

#ubox5 a{
color:{color:Tab Link Colour};
text-transform:normal;
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;
}

#ubox5 a:hover{
color:{color:Tab Link 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;
}

#usquare5:hover #ubox5{
opacity:1;
margin-left:-1px;
-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---*/