/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .tabs-hide {
		height: 0; 
		overflow: hidden;	
    }
}

/* Hide useless elements in print layouts... */
@media print {
    .tabs-nav {
        display: none;
    }
}

#centerColumnContent {
float:left;
position:relative;
margin-top:27px;
z-index:5 !important;
}

#centerColumnContent .centerColumnTabContent {
float:left;
position:relative;
background:#ffffff url("../img/tabs/tabcontent_bg.jpg") repeat-x top left;
}

/* TABS WORD WRAP - BUG FIX */
#centerColumnContent .centerColumnTabContent h2 {
position:relative;
width:490px;
}

#centerColumnContent .centerColumnTabContent h3 {
position:relative;
width:490px;
}

#centerColumnContent .centerColumnTabContent p {
z-index:1 !important;
position:relative;
}
/* / TABS WORD WRAP - BUG FIX */

#centerColumnContent ul.tabs {
margin: 0;
padding: 0;
float: left;
position:relative;
list-style: none;
height: 32px;
border-bottom: 2px solid #B12319;
width: 500px;
color:#292929;
overflow:hidden;
}

#centerColumnContent ul.tabs li {
float: left;
margin: 0 3px -1px 0;
padding: 0;
height: 31px;
line-height: 31px;
border-color:#767676;
border-style:solid;
border-width:1px 1px 0 1px;
background:#D3D3D3 url("../img/tabs/tab_bg.jpg") repeat-x top left;
overflow: hidden;
position: relative;
}

#centerColumnContent ul.tabs li a:link,
#centerColumnContent ul.tabs li a:visited,
#centerColumnContent ul.tabs li a:active {
text-decoration: none;
color: #000;
display: block;
padding: 0 13.1px;
border: 1px solid #E1E1E1;
outline: none;
height: 31px;
float: left;
position:relative;
}

#centerColumnContent ul.tabs li a:hover {
background:#ffffff url("../img/tabs/tab_hover_bg.jpg") repeat-x top left;
}

/* IF TABS HAVE LONGER TITLES THEN THEY MAY WRAP, IF SO, USE THIS STYLE AS AN ADDITIONAL LIST CLASS */
#centerColumnContent ul.thinnerTabs li a:link,
#centerColumnContent ul.thinnerTabs li a:visited,
#centerColumnContent ul.thinnerTabs li a:active,
#centerColumnContent ul.thinnerTabs li a:hover{
padding: 0 8px;
}

/* IF TABS HAVE LONGER TITLES THEN THEY MAY WRAP, IF SO, USE THIS STYLE AS AN ADDITIONAL LIST CLASS */
#centerColumnContent ul.widerTabs li a:link,
#centerColumnContent ul.widerTabs li a:visited,
#centerColumnContent ul.widerTabs li a:active,
#centerColumnContent ul.widerTabs li a:hover{
padding: 0 10px;
}

/* IF TABS HAVE LONGER TITLES THEN THEY MAY WRAP, IF SO, USE THIS STYLE AS AN ADDITIONAL LIST CLASS */
#centerColumnContent ul.vwideTabs li a:link,
#centerColumnContent ul.vwideTabs li a:visited,
#centerColumnContent ul.vwideTabs li a:active,
#centerColumnContent ul.vwideTabs li a:hover{
padding: 0 5.5px;
}

#centerColumnContent ul.tabs li a:link.tabs-selected,
#centerColumnContent ul.tabs li a:visited.tabs-selected,
#centerColumnContent ul.tabs li a:hover.tabs-selected,
#centerColumnContent ul.tabs li a:active.tabs-selected {
border-color:#fff;
border-style:solid;
border-width:1px 1px 0 1px;
background:#767676 url("../img/tabs/tab_selected_bg.jpg") repeat-x top left;
color:#ffffff;
}

/* IE6 LAYOUT MESS FIX - IN SOME CASES, ON THE LATTER TABS, THE LAYOUT CAN BE AFFECTED IN IE6 ONLY - THIS FIX DOES NOT NEED TO BE DISPLAYED IN ANY OTHER BROWSER 
THIS NEEDS TO BE PLACED BETWEEN THE TAB CONTAINERS "centerColumnTabContent" */
span.ie6TabContentLayoutFix {
display:none !important;	
}