Updates Tab 1

<!--WHERE: put these in the head section with all the other metas-->
<meta name="color:Updates Text Title" content="#000"/>
<meta name="color:Updates Border1" content="#ccc"/>
<meta name="color:Updates Border2" content="#eee"/>
<meta name="color:Updates Border3" content="#888"/>
<meta name="color:Updates Border4" content="#666"/>
<meta name="color:Updates Border5" content="#444"/>
<meta name="color:Updates Border6" content="#222"/>

<!--UPDATES TAB-->
<meta name="text:Updates Title 1" content="title here">
<meta name="text:updates1" content="text here">
<meta name="text:Updates Height 1" content="90px">
<meta name="text:Updates Title 2" content="title here">
<meta name="text:updates2" content="text here">
<meta name="text:Updates Height 2" content="90px">
<meta name="text:Updates Title 3" content="title here">
<meta name="text:updates3" content="text here">
<meta name="text:Updates Height 3" content="90px">
<meta name="text:Updates Title 4" content="title here">
<meta name="text:updates4" content="text here">
<meta name="text:Updates Height 4" content="90px">
<meta name="text:Updates Title 5" content="title here">
<meta name="text:updates5" content="text here">
<meta name="text:Updates Height 5" content="90px">
<meta name="text:Updates Title 6" content="title here">
<meta name="text:updates6" content="text here">
<meta name="text:Updates Height 6" content="90px">


/*WHERE: this part goes in the css section after style*/
#tab01{ /*This is the customization of EACH tab*/
border-left:5px solid  {color:Updates Border1};
height:25px;
text-align:center;
overflow:hidden;
margin-top:1px 1px;
text-transform:uppercase;
letter-spacing:1px;
font-size:8px;
line-height:10px;
z-index:0;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
}
#tab01:hover{/*This is the customization of the tabs HOVER*/
height:{text:Updates Height 1};
background:none;
border-left:5px solid  {color:Updates Border1};
border-right:none;
border-bottom:none;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
}
#tab01:hover .upti1{
    background:none;
    text-align:left;
    text-transform:lowercase;
    transition:.8s ease-in-out;
    -webkit-transition-duration: .8s ease-in-out;
    -moz-transition-duration: .8s ease-in-out;
    -o-transition-duration: .8s ease-in-out;
}
#tab02{ /*This is the customization of EACH tab*/
border-left:5px solid  {color:Updates Border2};
height:25px;
right:50px;
text-align:center;
overflow:hidden;
text-transform:uppercase;
letter-spacing:1px;
font-size:8px;
line-height:10px;
z-index:0;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
}
#tab02:hover{/*This is the customization of the tabs HOVER*/
height:{text:Updates Height 2};
background:none;
border-left:5px solid  {color:Updates Border2};
border-right:none;
border-bottom:none;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
}
#tab02:hover .upti2{
    background:none;
    text-align:left;
    text-transform:lowercase;
    transition:.8s ease-in-out;
    -webkit-transition-duration: .8s ease-in-out;
    -moz-transition-duration: .8s ease-in-out;
    -o-transition-duration: .8s ease-in-out;
}
#tab03{ /*This is the customization of EACH tab*/
border-left:5px solid  {color:Updates Border3};
height:25px;
text-align:center;
overflow:hidden;
margin-top:1px1px;
text-transform:uppercase;
letter-spacing:1px;
font-size:8px;
line-height:10px;
z-index:0;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
}
#tab03:hover{/*This is the customization of the tabs HOVER*/
height:{text:Updates Height 3};
background:none;
border-left:5px solid  {color:Updates Border3};
border-right:none;
border-bottom:none;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
}
#tab03:hover .upti3{
    background:none;
    text-align:left;
    text-transform:lowercase;
    transition:.8s ease-in-out;
    -webkit-transition-duration: .8s ease-in-out;
    -moz-transition-duration: .8s ease-in-out;
    -o-transition-duration: .8s ease-in-out;
}
#tab04{ /*This is the customization of EACH tab*/
border-left:5px solid  {color:Updates Border4};
height:25px;
text-align:center;
overflow:hidden;
margin-top:1px1px;
text-transform:uppercase;
letter-spacing:1px;
font-size:8px;
line-height:10px;
z-index:0;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
}
#tab04:hover{/*This is the customization of the tabs HOVER*/
height:{text:Updates Height 4};
background:none;
border-left:5px solid  {color:Updates Border4};
border-right:none;
border-bottom:none;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
}
#tab04:hover .upti4{
    background:none;
    text-align:left;
    text-transform:lowercase;
    transition:.8s ease-in-out;
    -webkit-transition-duration: .8s ease-in-out;
    -moz-transition-duration: .8s ease-in-out;
    -o-transition-duration: .8s ease-in-out;
}
#tab05{ /*This is the customization of EACH tab*/
border-left:5px solid  {color:Updates Border5};
height:25px;
text-align:center;
overflow:hidden;
margin-top:1px1px;
text-transform:uppercase;
letter-spacing:1px;
font-size:8px;
line-height:10px;
z-index:0;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
}
#tab05:hover{/*This is the customization of the tabs HOVER*/
height:{text:Updates Height 5};
background:none;
border-left:5px solid  {color:Updates Border5};
border-right:none;
border-bottom:none;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
}
#tab05:hover .upti5{
    background:none;
    text-align:left;
    text-transform:lowercase;
    transition:.8s ease-in-out;
    -webkit-transition-duration: .8s ease-in-out;
    -moz-transition-duration: .8s ease-in-out;
    -o-transition-duration: .8s ease-in-out;
}
#tab06{ /*This is the customization of EACH tab*/
border-left:5px solid  {color:Updates Border6};
height:25px;
text-align:center;
overflow:hidden;
margin-top:1px1px;
text-transform:uppercase;
letter-spacing:1px;
font-size:8px;
line-height:10px;
z-index:0;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
}
#tab06:hover{/*This is the customization of the tabs HOVER*/
height:{text:Updates Height 6};
background:none;
border-left:5px solid  {color:Updates Border6};
border-right:none;
border-bottom:none;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
}
#tab06:hover .upti6{
    background:none;
    text-align:left;
    text-transform:lowercase;
    transition:.8s ease-in-out;
    -webkit-transition-duration: .8s ease-in-out;
    -moz-transition-duration: .8s ease-in-out;
    -o-transition-duration: .8s ease-in-out;
}
.upti1{
    background:{color:Updates Border1};
}
.upti2{
    background:{color:Updates Border2};
}
.upti3{
    background:{color:Updates Border3};
}
.upti4{
    background:{color:Updates Border4};
}
.upti5{
    background:{color:Updates Border5};
}
.upti6{
    background:{color:Updates Border6};
}
#upti{ /*customization for the titles of the updates tab*/
    color:{color:updates text title};
    padding:5px;
    padding-bottom:7px;
    text-transform:uppercase;
    font-family:cambria;
    font-size:11px;
    line-height:14px;
    text-decoration:underline;
    text-align:center;
}
#container{/*this controls the position of the tabs, the over-all width, and the title of each tab.*/
text-align:center;
font-size:8px;
text-transform:uppercase;
position:fixed;
font-family:calibri;
background-color:transparent;
letter-spacing:1px;
width:120px;
z-index:9999;
left:930px;
top:250px;
}

<!--WHERE: this part of the code goes in the html section after 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></div> <div id="upti" class="upti1">{text:Updates Title 1}</div> <div style="padding-bottom:13px; opacity:.9; font-family: calibri; font-size:9px; line-height:14px; text-align:center; color:{color:updates text};"><br>
{text:Updates1}
</div>
</div>
<!---end tab 1 code--->

 <!---begin tab 2 code--->
<div id="tab02">
<div></div> <div id="upti" class="upti2">{text:Updates Title 2}</div> <div style="padding-bottom:13px; opacity:.9; font-family: calibri; font-size:9px; line-height:14px; text-align:center; color:{color:updates text};"><br>
{text:Updates2}
</div></div>
<!---end tab 2 code--->

<!---begin tab 3 code--->
<div id="tab03">
<div></div> <div id="upti" class="upti3">{text:Updates Title 3}</div> <div style="padding-bottom:13px; opacity:.9; font-family: calibri; font-size:9px; line-height:14px; text-align:center; color:{color:updates text};"><br>
{text:Updates3}
</div>
</div>
<!---end tab 3 code--->

<!---begin tab 4 code--->

<div id="tab04">
<div></div> <div id="upti" class="upti4">{text:Updates Title 4}</div> <div style="padding-bottom:13px; opacity:.9; font-family: calibri; font-size:9px; line-height:14px; text-align:center; color:{color:updates text};"><br>
{text:Updates4}
</div>
</div>

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

<!---begin tab 5 code--->
<div id="tab05">
<div></div> <div id="upti" class="upti5">{text:Updates Title 5}</div> <div style="padding-bottom:13px; opacity:.9; font-family: calibri; font-size:9px; line-height:14px; text-align:center; color:{color:updates text};"><br>
{text:Updates5}
</div></div>
<!---end tab 5 code--->
<!--begin tab 6-->
<div id="tab06">
<div></div> <div id="upti" class="upti6">{text:Updates Title 6}</div> <div style="padding-bottom:13px; opacity:.9; font-family: cambria; font-size:9px; text-transform:none; text-transform:none; text-transform:none; line-height:14px; text-align:center; color:##ff8f8f;"><br>
{text:Updates6}
<!--end tab 6-->
</div></div>
<!--copy and paste the code for one tab again to add more :) just make sure the numbers here correspond with the numbers in the css above (you'll have to copy + paste code for a tab there too)!-->
</div></div></div></div>