Iamthemelocked - Updates Tab #11 Part 2 (left)

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

#tab11boxes {
width: auto;
height: auto;
position:fixed;
float:left;
display:inline-block;
top:0px; /* --- MOVE THE TAB UP OR DOWN HERE ---*/
left: 10px; /* --- MOVE THE TAB TO THE LEFT OR TO THE RIGHT HERE ---*/
}

#tab11boxes 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;
}

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

#tab11line1 {
height:50px;
width: 12px;
margin-top:0px;
display: inline-block;
float:right;
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;
}

#tab11box1 {
width: 0px;
height: 10px;
display: inline-block;
float:left;
opacity:1;
padding-bottom:4px;
margin-top:5px;
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-left:12px solid {color:Tab Line 1 Colour};
text-transform:uppercase;
text-align:left;
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;
}

#tab11line1:hover #tab11box1 {
opacity:1;
padding-left:6px;
padding-right: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 ---*/

#tab11line2 {
height:80px;
width: 12px;
display: inline-block;
float:right;
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;
}

#tab11box2 {
width: 0px;
height: 15px;
display: inline-block;
float:left;
opacity:1;
margin-top:55px;
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-left:12px solid {color:Tab Line 2 Colour};
text-transform:uppercase;
text-align:left;
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;
}

#tab11line2:hover #tab11box2 {
opacity:1;
padding-left:6px;
padding-right: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 ---*/

#tab11line3 {
height:110px;
width: 12px;
display: inline-block;
float:right;
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;
}

#tab11box3 {
width: 0px;
height: 15px;
display: inline-block;
float:left;
opacity:1;
margin-top:85px;
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-left:12px solid {color:Tab Line 3 Colour};
text-transform:uppercase;
text-align:left;
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;
}

#tab11line3:hover #tab11box3 {
opacity:1;
padding-left:6px;
padding-right: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 ---*/

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