﻿@charset "UTF-8";
/*main content*/
#MainContent {
    visibility:hidden;
}
/* This is the main container of all tabs and content BENEATH the tabs */
.TabbedPanels {
    padding: 0px;
    clear: none;
    width: 643px;
}
/* This is the group that all the tabs sit in, NOT the content beneath the tabs */
.TabbedPanelsTabGroup {
    margin: 0px;
    padding: 0px;
}
/* PNG fix in IE 5.5+ to allow transparency */
img .tab_SelectedTab {
    behavior: url(/css/resources/iepngfix.htc);
}
/* These are the tabs */
.tab_Base {
    width: 148px;
    color:#FFFFFF;
    position: relative;
    top: 1px;
    float: left;
    padding: 4px 10px;
    margin: 0px 1px -1px -20px;
    font: bold 7pt Verdana;
    background-position:center;
    background-repeat:no-repeat;
    list-style: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    behavior: url(/css/resources/iepngfix.htc);
    text-align:center;
}
.tab_OurProducts {
    margin: 0px 1px -1px 0px;
    background-image:url(/images/tabs/tab_OurProducts.png);
}
.tab_ResourceCentre {
    background-image:url(/images/tabs/tab_ResourceCentre.png);
}
.tab_AboutUs {
    background-image:url(/images/tabs/tab_AboutUs.png);
}
.tab_NewsEvents {
    background-image:url(/images/tabs/tab_NewsEvents.png);
}
/* container for the header images that goes ABOVE the tabs */
#ImageBox_container {
    position:relative;
    height:275px;
    width:643px;
    margin-bottom:-50px;
    z-index:0;
}
.nothere {
visibility:hidden;
}
/* setting the font size of the headers that sit on top of ImageBox_container */
#ImageBox_Text {
    width:643px;
    font-size:2.1em;
    background-image:url(/images/tabs/tab_headerBG.png);
    background-position:top;
    background-repeat:no-repeat;
    color: #FFF;
    behavior: url(/css/resources/iepngfix.htc);
}
/* these are the header image boxes, each sit's in it's own DIV and uses "show/hide elements" to display the correct header when user selects tab */
#ImageBox_OurProducts {
    position:absolute;
    height:275px;
    width:643px;
    background-image:url(/images/tabs/header_ProductsIndustries1.jpg);
    background-position:top;
    background-repeat:no-repeat;
    z-index:0;
}
#ImageBox_ResourceCentre {
    position:absolute;
    height:275px;
    width:643px;
    background-image:url(/images/tabs/header_ResourceCentre.jpg);
    background-position:top;
    background-repeat:no-repeat;
    z-index:0;
}
#ImageBox_AboutUs {
    position:absolute;
    height:275px;
    width:643px;
    background-image:url(/images/tabs/header_AboutUs.jpg);
    background-position:top;
    background-repeat:no-repeat;
    z-index:0;
}
#ImageBox_NewsEvents {
    position:absolute;
    height:275px;
    width:643px;
    background-image:url(/images/tabs/header_NewsEvents.jpg);
    background-position:top;
    background-repeat:no-repeat;
    z-index:0;
}
/* rollover-state of tabs. can change font color, tab image */
.TabbedPanelsTabHover {
    position:relative;
    color:#333333;
    background-image:url(/images/tabs/tab_SelectedTab.png);
    background-position:center;
    background-repeat:no-repeat;
    z-index:2;
}
/* once tab is selected by rollover, this keeps that tab "on top" of other tabs and keeps tab's "hover" state */
.TabbedPanelsTabSelected {
    position:relative;
    color:#333333;
    background-image:url(/images/tabs/tab_SelectedTab.png);
    z-index:2;
}
 
/* this is the container holds ALL TabbedPanelsContent divs*/
.TabbedPanelsContentGroup {
    clear: both;
}
 
/* this is the INDIVIDUAL TAB container that holds the content beneath the tabs, padding of 4 so that text dosen't go to the edges of the DIV */
.TabbedPanelsContent {
    padding:10px 2px 0px;
}
/* change the appearance of a currently selected TabbedPanelContent. Name is passed in using JavaScript that detects mouse-over and mouse-out */
.TabbedPanelsContentVisible {
    position:relative;
    background-image:url(/images/tabs/tab_contentBG.gif);
    background-repeat:repeat-x;
    border-top: 1px solid #999999;
    z-index:1;
    min-height: 150px;
    height: auto !important;
    height: 150px;
}
.ContentBoxHeader {
    color:#333333;
    font-weight:700;
    text-shadow:#CCCCCC;
}
