/**
 * @project         Jx
 * @revision        $Id: tabs.css,v 1.19 2007/06/22 16:17:21 pspencer Exp $
 * @author          Fred Warnock (fwarnock@dmsolutions.ca)
 * @copyright       &copy; 2006 DM Solutions Group Inc.
 */

/* ========== */
/* TAB STYLES */
/* ========== */

/* Note: There are some specific styles for IE in tabs_ie.css

   The tabBox consists of a box containing a tabbar and the tab content areas.
   It can be used within the body or nested within another object.
*/

.jxTabSetContainer {
  /* This is an example of a container that can be used to hold a tabBox
     the position need to be explicitly set, as well as the width and height. */
  position: relative; 
  display: block;
  width: 200px;
  height: 200px;
  margin: 0px;
  padding: 0px;
  border: 1px solid #999;
}

.tabContent {
  /* the width and height need to be set to 100% to:
     1. fill the tab box area
     2. allow a scrolling content area in IE */
  display: none;
  position: relative;
  width:100%;
  height: 100%;
  overflow: auto;
}

.tabContentActive {
  display: block;
}


/* The tabbar is built out of a UL
   The tab background uses the sliding door technique so tabs can expand to
   accomodate content up to 200 px wide (top/bottom tabs) or 200px high
   (left/right tabs).  All parts and states of the tab BG graphics are in the 
   same image so they can be treated like sprites.

   Horizontal tabs can contain text or an image label.  Vertical tabs need an
   image label.
*/

.verticalToolbar li.jxTabItem {
  float:none;
  clear: both;
}

li.jxTabItem {
  display: block;
  margin: 0px;
  padding: 0px;
}

a.jxTab {
  /* The A contains one side of the tab background image */
  display: block;
  margin: 0px;
  padding: 0px;
  background-repeat: no-repeat;
  text-decoration: none;
  color: #000;
  border: none;
}

a.jxTab:hover {
  border: none;
}

a.jxTab:active {
  border: none;
}

a.jxTab span.jxButtonSpan {
  /* The SPAN contains the other side of the tab background image
     and the tab label */
  display: block;
  margin: 0px;
  padding: 0px;
  background-repeat: no-repeat;
}

/* ============== */
/* TAB BAR ON TOP */
/* ============== */

.jxTabBoxTop {
    margin-top: 27px;
}

.jxTabBoxTop .jxBarTop {
    position: absolute;
    top: -27px;
}

.jxBarTop li.jxTabItem {
  /* LIs are floated so tabs follow each other in a row */
  float: left;
}

.jxBarTop a.jxTab {
  float: left; /* A is floated so containing LI collapses */
  padding-left: 6px; /* makes room for the left of the tab bg */
  background-image: url(../images/tab_top_bg.png);
  background-position: left 2px; /* shifts the left BG in 2 px for slide effect */
  border-bottom: 1px solid #999; /* same color as the tabBox border */
}

.jxBarTop a.jxTab span.jxButtonSpan {
  padding: 7px 6px 7px 0px; /* makes space around the label */
  background-image: url(../images/tab_top_bg.png);
  background-position: right 2px; /* shifts the right BG in 2 px for slide effect*/
}

.jxBarTop a.jxTab span.jxButtonLabel {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 11px;
}

.jxBarTop a.jxTab:hover {
  background-position: left top; /* shifts the left BG out 2 px for slide effect */
}

.jxBarTop a.jxTab:hover span.jxButtonSpan {
  background-position: right top; /* shifts the right BG out 2 px for slide effect */
}

.jxBarTop a.tabActive {
  background-position: left -50px; /* switch to the active left BG */
  border-bottom: 1px solid #fff; /* same color as the tabBox BG */
}

.jxBarTop a.tabActive span.jxButtonSpan {
  background-position: right -50px; /* switch to the active right BG  */
}

/* ================= */
/* TAB BAR ON BOTTOM */
/* ================= */

.jxTabBoxBottom {
    margin-bottom: 27px;
}

.jxTabBoxBottom .jxBarBottom {
    position: absolute;
    bottom: -27px;
}

.jxBarBottom li.jxTabItem {
  /* LIs are floated so tabs follow each other in a row */
  float: left;
}

.jxBarBottom a.jxTab {
  float: left; /* A is floated so containing LI collapses */
  padding-left: 6px; /* makes room for the left of the tab bg */
  background-image: url(../images/tab_bottom_bg.png);
  background-position: left -2px; /* shifts the left BG in 2 px for slide effect */
  border-top: 1px solid #999; /* same color as the tabBox border */
}

.jxBarBottom a.jxTab span.jxButtonSpan {
  padding: 7px 6px 7px 0px; /* makes space around the label */
  background-image: url(../images/tab_bottom_bg.png);
  background-position: right -2px; /* shifts the right BG in 2 px for slide effect*/
}

.jxBarBottom a.jxTab:hover {
  background-position: left top; /* shifts the left BG out 2 px for slide effect */
}

.jxBarBottom a.jxTab:hover span.jxButtonSpan {
  background-position: right top; /* shifts the right BG out 2 px for slide effect */
}

.jxBarBottom a.tabActive {
  background-position: left -50px; /* switch to the active left BG */
  border-top: 1px solid #fff; /* same color as the tabBox BG */
}

.jxBarBottom a.tabActive span.jxButtonSpan {
  background-position: right -50px; /* switch to the active right BG  */
}

/* =============== */
/* TAB BAR ON LEFT */
/* =============== */

.jxTabBoxLeft {
    margin-left: 27px;
}

.jxTabBoxLeft .jxBarLeft {
    position: absolute;
    left: -27px;
}

.jxBarLeft li.jxTabItem  {
  /* Font is minimised to remove undesired space */
  font-size: 0px;
  line-height: 0px;
}

.jxBarLeft a.jxTab {
  padding-top: 6px; /* makes room for the top of the tab bg */
  background-image: url(../images/tab_left_bg.png);
  background-position: 2px top; /* shifts the top BG in 2 px for slide effect */
  border-right: 1px solid #999; /* same color as the tabBox border */
}

.jxBarLeft a.jxTab span.jxButtonSpan {
  padding: 0px 7px 6px 7px; /* makes space around the label */
  background-image: url(../images/tab_left_bg.png);
  background-position: 2px bottom; /* shifts the bottom BG in 2 px for slide effect*/
}

.jxBarLeft a.jxTab:hover {
  background-position: left top; /* shifts the top BG out 2 px for slide effect */
}

.jxBarLeft a.jxTab:hover span.jxButtonSpan {
  background-position: left bottom; /* shifts the bottom BG out 2 px for slide effect */
}

.jxBarLeft a.tabActive {
  background-position: -50px top; /* switch to the active top BG */
  border-right: 1px solid #fff; /* same color as the tabBox BG */
}

.jxBarLeft a.tabActive span.jxButtonSpan {
  background-position: -50px bottom; /* switch to the active bottom BG  */
}

/* ================ */
/* TAB BAR ON RIGHT */
/* ================ */

.jxTabBoxRight {
    margin-right: 27px;
}

.jxTabBoxRight .jxBarRight {
    position: absolute;
    right: -27px;
}

.jxBarRight li.jxTabItem  {
  /* Font is minimised to remove undesired space */
  font-size: 0px;
  line-height: 0px;
}

.jxBarRight a.jxTab {
  padding-top: 6px; /* makes room for the top of the tab bg */
  background-image: url(../images/tab_right_bg.png);
  background-position: -2px top; /* shifts the top BG in 2 px for slide effect */
  border-left: 1px solid #999; /* same color as the tabBox border */
}

.jxBarRight  a.jxTab span.jxButtonSpan {
  padding: 0px 7px 6px 7px; /* makes space around the label */
  background-image: url(../images/tab_right_bg.png);
  background-position: -2px bottom; /* shifts the bottom BG in 2 px for slide effect*/
}

.jxBarRight  a.jxTab:hover {
  background-position: left top; /* shifts the top BG out 2 px for slide effect */
}

.jxBarRight  a.jxTab:hover span.jxButtonSpan {
  background-position: left bottom; /* shifts the bottom BG out 2 px for slide effect */
}

.jxBarRight  a.tabActive {
  background-position: -50px top; /* switch to the active top BG */
  border-left: 1px solid #fff; /* same color as the tabBox BG */
}

.jxBarRight  a.tabActive span.jxButtonSpan {
  background-position: -50px bottom; /* switch to the active bottom BG  */
}
