Iamthemelocked - Updates Tab #10 Part 2

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

#tab10boxes {
width: auto;
height: auto;
position:fixed;
float:right;
display:inline-block;
top:70px; /* --- MOVE THE TAB UP OR DOWN HERE ---*/
right: 20px; /* --- MOVE THE TAB TO THE LEFT OR TO THE RIGHT HERE ---*/
}

#tab10boxes a{
color:{color:Tab Links Colour};
font-size:9px; /* --- CHANGE THE LINK FONT SIZE HERE ---*/
text-decoration:none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#tab10boxes a:hover{
color:{color:Tab Links Colour Hover};
font-size:9px; /* --- CHANGE THE LINK FONT SIZE HERE ---*/
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

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

#tab10line1 {
height:40px;
width: 6px;
display: inline-block;
float:left;
margin-right:5px;
opacity:1;
background-color: {color:Tab Line 1 Colour};
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#tab10line1:hover {
height:100px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#tab10box1 {
width: 0px;
height: 32px;
display: inline-block;
float:right;
opacity:1;
padding-bottom:4px;
padding-top:4px;
letter-spacing:1px;
font-size:9px; /* --- CHANGE THE CONTENT´S FONT SIZE HERE ---*/
line-height:110%;
overflow:hidden;
font-family:calibri; /* --- CHANGE THE CONTENT´S FONT HERE ---*/
border-right:6px solid {color:Tab Line 1 Colour};
text-transform:uppercase;
text-align:right;
background:#ffffff;
color:{color:Tab Text Colour};
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#tab10line1:hover #tab10box1 {
opacity:1;
padding-right:10px;
padding-left:4px;
height:150px; /* --- CHANGE THE CONTENT´S HEIGHT HERE ---*/
width: 100px; /* --- CHANGE THE CONTENT´S WIDTH HERE ---*/
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

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

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

#tab10line2 {
height:40px;
width: 6px;
display: inline-block;
float:left;
margin-right:5px;
opacity:1;
background-color: {color:Tab Line 2 Colour};
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#tab10line2:hover {
height:100px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#tab10box2 {
width: 0px;
height: 32px;
display: inline-block;
float:right;
opacity:1;
padding-bottom:4px;
padding-top:4px;
letter-spacing:1px;
font-size:9px; /* --- CHANGE THE CONTENT´S FONT SIZE HERE ---*/
line-height:110%;
overflow:hidden;
font-family:calibri; /* --- CHANGE THE CONTENT´S FONT HERE ---*/
border-right:6px solid {color:Tab Line 2 Colour};
text-transform:uppercase;
text-align:right;
background:#ffffff;
color:{color:Tab Text Colour};
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#tab10line2:hover #tab10box2 {
opacity:1;
padding-right:10px;
padding-left:4px;
height:150px; /* --- CHANGE THE CONTENT´S HEIGHT HERE ---*/
width: 100px; /* --- CHANGE THE CONTENT´S WIDTH HERE ---*/
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

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

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

#tab10line3 {
height:40px;
width: 6px;
display: inline-block;
float:left;
margin-right:5px;
opacity:1;
background-color: {color:Tab Line 3 Colour};
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#tab10line3:hover {
height:100px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#tab10box3 {
width: 0px;
height: 32px;
display: inline-block;
float:right;
opacity:1;
padding-bottom:4px;
padding-top:4px;
letter-spacing:1px;
font-size:9px; /* --- CHANGE THE CONTENT´S FONT SIZE HERE ---*/
line-height:110%;
overflow:hidden;
font-family:calibri; /* --- CHANGE THE CONTENT´S FONT HERE ---*/
border-right:6px solid {color:Tab Line 3 Colour};
text-transform:uppercase;
text-align:right;
background:#ffffff;
color:{color:Tab Text Colour};
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#tab10line3:hover #tab10box3 {
opacity:1;
padding-right:10px;
padding-left:4px;
height:150px; /* --- CHANGE THE CONTENT´S HEIGHT HERE ---*/
width: 100px; /* --- CHANGE THE CONTENT´S WIDTH HERE ---*/
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

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

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

#tab10line4 {
height:40px;
width: 6px;
display: inline-block;
float:left;
margin-right:5px;
opacity:1;
background-color: {color:Tab Line 4 Colour};
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#tab10line4:hover {
height:100px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#tab10box4 {
width: 0px;
height: 32px;
display: inline-block;
float:right;
opacity:1;
padding-bottom:4px;
padding-top:4px;
letter-spacing:1px;
font-size:9px; /* --- CHANGE THE CONTENT´S FONT SIZE HERE ---*/
line-height:110%;
overflow:hidden;
font-family:calibri; /* --- CHANGE THE CONTENT´S FONT HERE ---*/
border-right:6px solid {color:Tab Line 4 Colour};
text-transform:uppercase;
text-align:right;
background:#ffffff;
color:{color:Tab Text Colour};
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#tab10line4:hover #tab10box4 {
opacity:1;
padding-right:10px;
padding-left:4px;
height:150px; /* --- CHANGE THE CONTENT´S HEIGHT HERE ---*/
width: 100px; /* --- CHANGE THE CONTENT´S WIDTH HERE ---*/
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

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

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

#tab10line5 {
height:40px;
width: 6px;
display: inline-block;
float:left;
margin-right:5px;
opacity:1;
background-color: {color:Tab Line 5 Colour};
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#tab10line5:hover {
height:100px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#tab10box5 {
width: 0px;
height: 32px;
display: inline-block;
float:right;
opacity:1;
padding-bottom:4px;
padding-top:4px;
letter-spacing:1px;
font-size:9px; /* --- CHANGE THE CONTENT´S FONT SIZE HERE ---*/
line-height:110%;
overflow:hidden;
font-family:calibri; /* --- CHANGE THE CONTENT´S FONT HERE ---*/
border-right:6px solid {color:Tab Line 5 Colour};
text-transform:uppercase;
text-align:right;
background:#ffffff;
color:{color:Tab Text Colour};
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#tab10line5:hover #tab10box5 {
opacity:1;
padding-right:10px;
padding-left:4px;
height:150px; /* --- CHANGE THE CONTENT´S HEIGHT HERE ---*/
width: 100px; /* --- CHANGE THE CONTENT´S WIDTH HERE ---*/
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s 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 ---*/