tab base code

<!---UPDATES TAB STRUCTURE BASE CODE CREATED BY TRENZALOURS
_________________You don't have to credit me to use this! _______________     ______Get creative and start making some bangin updates tabs!________

Obviously this is a BASE and doesnt have much fun or flair. I use google for fun transitions and way to make it your own.

                           Have fun!--->


<!--CSS customization here. -->

<style type="text/css">

#tab01{ /*This is the customization of EACH tab*/
margin-bottom:5px;
padding-left:4px;
height:14px;
text-align:center;
overflow:hidden;
margin-top:1px1px;
text-transform:uppercase;
letter-spacing:1px;
font-size:10px;
line-height:10px;
z-index:0;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}
#tab01:hover{/*This is the customization of the tabs HOVER*/
height:120px; /*how long the tab slides down. To try new transitions and stuff I always just google how to do stuff. You can adjust the transitions by scale, opacity, color, rotation, etc. Google is your friend!*/
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}

#tab02{ /*This is the customization of EACH tab*/
margin-bottom:5px;
padding-left:4px;
height:14px;
text-align:center;
overflow:hidden;
text-transform:uppercase;
letter-spacing:1px;
font-size:10px;
line-height:10px;
z-index:0;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}
#tab02:hover{/*This is the customization of the tabs HOVER*/
height:120px; /*how long the tab slides down. To try new transitions and stuff I always just google how to do stuff. You can adjust the transitions by scale, opacity, color, rotation, etc. Google is your friend!*/
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}

#tab03{ /*This is the customization of EACH tab*/
margin-bottom:5px;
padding-left:4px;
height:14px;
text-align:center;
overflow:hidden;
text-transform:uppercase;
letter-spacing:1px;
font-size:10px;
line-height:10px;
z-index:0;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}
#tab03:hover{/*This is the customization of the tabs HOVER*/
height:120px; /*how long the tab slides down. To try new transitions and stuff I always just google how to do stuff. You can adjust the transitions by scale, opacity, color, rotation, etc. Google is your friend!*/
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}
#tab04{ /*This is the customization of EACH tab*/
margin-bottom:5px;
padding-left:4px;
height:14px;
text-align:center;
overflow:hidden;
margin-top:1px1px;
text-transform:uppercase;
letter-spacing:1px;
font-size:10px;
line-height:10px;
z-index:0;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}
#tab04:hover{/*This is the customization of the tabs HOVER*/
height:120px; /*how long the tab slides down. To try new transitions and stuff I always just google how to do stuff. You can adjust the transitions by scale, opacity, color, rotation, etc. Google is your friend!*/
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}

#tab05{ /*This is the customization of EACH tab*/
margin-bottom:5px;
padding-left:4px;
height:14px;
text-align:center;
overflow:hidden;
margin-top:1px1px;
text-transform:uppercase;
letter-spacing:1px;
font-size:10px;
line-height:10px;
z-index:0;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}
#tab05:hover{/*This is the customization of the tabs HOVER*/
height:120px; /*how long the tab slides down. To try new transitions and stuff I always just google how to do stuff. You can adjust the transitions by scale, opacity, color, rotation, etc. Google is your friend!*/
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}

#tab06{ /*This is the customization of EACH tab*/
margin-bottom:5px;
padding-left:4px;
height:14px;
text-align:center;
overflow:hidden;
margin-top:1px1px;
text-transform:uppercase;
letter-spacing:1px;
font-size:10px;
line-height:10px;
z-index:0;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}
#tab06:hover{/*This is the customization of the tabs HOVER*/
height:120px; /*how long the tab slides down. To try new transitions and stuff I always just google how to do stuff. You can adjust the transitions by scale, opacity, color, rotation, etc. Google is your friend!*/
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}

#container{/*this controls the position of the tabs, the over-all width, and the title of each tab.*/
text-align:center;
font-size:10px;
text-transform:uppercase;
position:fixed;
font-family:calibri;
left:5px;
background-color:transparent;
letter-spacing:1px;
width:95px;
z-index:9999;
padding:4px;
top:40px;

}

{CustomCSS}


</style>



</head>

<body>
<div id="structure">
<div id="container"><!---this holds the entire tab together--->

<!---begin tab 1 code--->
<div id="tab01">
<!---div styles will style everything inside of the div. So you can make your colors all different, sizes, text-transforms, opacity, just about anything you need to style what shows in the hover--->
<div style="font-size:10px;color:#453220;">TITLE HERE</div> <div style="padding-top:1px; text-transform:lowercase; opacity:.9; font-family: calibri; font-size:9px; line-height:9px; text-align:center; color:#b9b9b9;"><br>
 TEXT HERE

</div>
</div>
<!---end tab 1 code--->

 <!---begin tab 2 code--->
<div id="tab02">
<div style="font-size:10px;color:#453220;">TITLE HERE</div> <div style="padding-top:1px; text-transform:lowercase; opacity:.9; font-family: calibri; font-size:9px; line-height:10px; text-align:center; color:#b9b9b9;"><br>
TEXT HERE
</div></div>
<!---end tab 2 code--->

<!---begin tab 3 code--->
<div id="tab03">
<div style="font-size:10px;color:#453220;">TITLE HERE</div> <div style="padding-top:1px; text-transform:lowercase; opacity:.9; font-family: calibri; font-size:9px; line-height:10px; text-align:center; color:#b9b9b9;"><br>
TEXT HERE
</div>
</div>
<!---end tab 3 code--->


 <!---begin tab 4 code--->
<div id="tab04">
<div style="font-size:10px;color:#453220;">TITLE HERE</div> <div style="padding-top:1px; text-transform:lowercase; opacity:.9; font-family: calibri; font-size:9px; line-height:10px; text-align:center; color:#b9b9b9;"><br>
TEXT HERE

</div>
</div>
<!---end tab 4 code--->

<!---begin tab 5 code--->

<div id="tab05">
<div style="font-size:10px;color:#453220;">TITLE HERE</div> <div style="padding-top:1px; text-transform:lowercase; opacity:.9; font-family: calibri; font-size:9px; line-height:10px; text-align:center; color:#b9b9b9;"><br>
TEXT HERE
</div>
</div>

<!---end tab 5 code--->

<!---begin tab 6 code--->
<div id="tab06">
<div style="font-size:10px;color:#453220;">TITLE HERE</div> <div style="padding-top:1px; text-transform:lowercase; opacity:.9; font-family: calibri; font-size:9px; line-height:12px; text-align:center; color:#b9b9b9;"><br>
TEXT HERE
</div></div>

<!---end tab 6 code--->
<!---to add more tabs just copy and paste the tab codes and change the div title to the number of the new tab.--->
</div></div></div></div>
</body>