/**
 * @project         Jx
 * @revision        $Id: jxskin-border.css 512 2008-03-07 21:15:45Z pspencer $
 * @author          Fred Warnock (fwarnock@dmsolutions.ca)
 * @copyright       © 2006 DM Solutions Group Inc.
 */

/* =================================== */
/* VISUAL STYLES W. BORDERS AND COLORS */
/* =================================== */


/* ============= */
/* DIALOG STYLES */
/* ============= */

.jxDialogContainer {
}

.jxDialog {
    border: 1px solid #666;
    background-color: #d9d9d9;
    margin: 6px;
}

.jxDialogModal {
    background-color: #000;
    opacity: .2;
    -moz-opacity: .2;
    filter: Alpha(opacity=20);
}

.jxDialogBgTL {
    top: 0px;
    left: 0px;
}

.jxDialogBgTL img {
    width: 12px;
    height: 12px;
}

.jxDialogBgT {
    top: 0px;
    left: 12px;
}

.jxDialogBgT img {
    height: 12px;
}

.jxDialogBgTR {
    top: 0px;
    right: 0px;
}

.jxDialogBgTR img {
    width: 12px;
    height: 12px;
}

.jxDialogBgR {
    top: 12px;
    right: 0px;
}

.jxDialogBgR img {
    width: 12px;
}

.jxDialogBgBR {
    bottom: 0px;
    right: 0px;
}

.jxDialogBgBR img {
    width: 12px;
    height: 12px;
}

.jxDialogBgB {
    bottom: 0px;
    left: 12px;
}

.jxDialogBgB img {
    height: 12px;
}

.jxDialogBgBL {
    bottom: 0px;
    left: 0px;
}

.jxDialogBgBL img {
    width: 12px;
    height: 12px;
}

.jxDialogBgL {
    top: 12px;
    left: 0px;
}

.jxDialogBgL img {
    width: 12px;
}

.jxDialogTitle {
    background-color: #ccc;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #999;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    height: 22px;
    line-height: 22px;
    cursor: move;
}

.jxDialogContent {
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    padding: 0px;
}

.jxDialogAction {
    border-left: 1px solid #fff;
    height: 30px;
    text-align: right;
    margin-right:15px;
}

.jxDialogAction input {
    margin: 5px;
    margin-left:0px;
}

.jxDialogCloseButton, 
.jxDialogHelpButton {
    width: 20px;
    height: 20px;
    top: 0px;
    right: 2px;
    padding: 0px;
    margin: 0px; 
    border: 0px;
}

.jxDialogHelpButton {
  right: 22px;
}

.jxDialogCloseButton img, 
.jxDialogHelpButton img {
  border: 0px;
  /* the margin needs to make up the difference between it's width/height
     and the width/height of the parent a */
  margin: 0px;
  /* width/height has to be the actual image width/height */
  width: 20px;
  height: 20px;
}

.jxDialogResize {
    width: 20px;
    height: 20px;
/*    bottom: 0px;
    right: 0px; */
    border: 0px;
    cursor: se-resize;
    background-image: url(../images/dialog_resize.png);
}


/* ================= */
/* JX TOOLBAR STYLES */
/* ================= */

.jxToolbarContainer {
  margin: 0px;
  padding: 0px;
  border: 0px;
  /* simulates an underline at the bottom of the container*/
  background-image:url(../images/container_bg.png); 
  background-color: #d9d9d9;
}

/* Horizontally oriented toolbars */
.jxBarTop, 
.jxBarBottom {
  background-repeat:repeat-x;
  background-position: bottom;
}

/* Vertically oriented toolbars */
.jxBarLeft, 
.jxBarRight {
  background-repeat:repeat-y;
  background-position: right;
}

.toolbarLabel {
  margin: 0px;
  padding: 0px;
  font-family: Arial, Hevetica, sans-serif;
  font-size: 11px;
  line-height: 24px;
  color: #000;
}

ul.jxToolbar {
  margin: 0px;  /* margins don't seem to work properly in IE */
  padding: 0px;
}

.jxBarTop ul.jxToolbar, 
.jxBarBottom ul.jxToolbar {
  border-left: 1px solid #fff;
  border-right: 1px solid #999;
  border-top: 1px solid #fff;
}

.jxBarLeft ul.jxToolbar, 
.jxBarRight ul.jxToolbar {
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #999;
}

li.jxToolItem {
  padding: 0px;
  margin: 0px;  /* margins don't seem to work properly in IE */
}

.jxBarTop li.jxToolItem, 
.jxBarBottom li.jxToolItem {
  border-top: none;
  border-right: none;
  border-bottom: 1px solid #999;
  border-left: none;
}

.jxBarLeft li.jxToolItem, 
.jxBarRight li.jxToolItem {
  border-top: none;
  border-right: 1px solid #999;
  border-bottom: none;
  border-left: none;
}

li.jxToolItem  span.separator {
  /* width/height should be defined */
  width: 8px;
  height: 18px;
  border: 0px;
  margin: 0px;  /* margins don't seem to work properly in IE */
  padding: 4px;
  background-repeat: no-repeat;
  background-position: center center;
}

.jxBarTop  li.jxToolItem  span.separator, 
.jxBarBottom  li.jxToolItem  span.separator {
  background-image: url(../images/toolbar_separator_h.png);
}

.jxBarLeft  li.jxToolItem  span.separator, 
.jxBarRight  li.jxToolItem  span.separator {
  background-image: url(../images/toolbar_separator_v.png);
}


/* ================ */
/* JX BUTTON STYLES */
/* ================ */

div.jxButtonContainer {
  margin: 0px;
  padding: 0px;
  border: none;
}

a.jxButton {
  /* If using background images, the A contains the left side of the background */
  /* use padding to make space between the icon and button edge */
  /* padding-left: 6px;*/ /* makes room for the left of the button bg image */
  margin: 0px; /* margins don't seem to work properly in IE */
  padding: 4px; 
  border: 1px solid #d9d9d9;
  background-repeat: no-repeat;
  text-decoration: none;
}

a.jxButton:hover {
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #999;
  border-right: 1px solid #999;
}

a.jxButton:active {
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
}

a.jxButtonActive {
  background-color: #f0f0f0;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
}

a.jxButtonActive:hover {
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
}

a.jxButtonActive:active {
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
}

.jxDisabled a.jxButton:hover, 
.jxDisabled a.jxButton:active {
  border: 1px solid #d9d9d9;
}

span.jxButtonSpan {
  /* If using background images, the SPAN contains the right side of the background */
  /* use padding to make space between the icon and button edge */
  /* padding-left: 0px;*/ /* butts up to the left of the button bg image */
  margin: 0px; /* margins don't seem to work properly in IE */
  padding: 0px;
  background-repeat: no-repeat;
}

/* colour swatch styles
   smaller image with borders */
img.jxButtonSwatch {
  width: 14px;
  height: 14px;
  border: 1px solid #000;
}

a.jxButtonMenu span.jxButtonSpan, 
a.jxButtonFlyout span.jxButtonSpan {
  background-image: url(../images/menu_item_arrow_d2.png);
  background-position: right center;
  background-repeat: no-repeat;
}

span.jxButtonContent {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 16px;
}

a.jxButtonMenu span.jxButtonContent, 
a.jxButtonFlyout span.jxButtonContent {
  padding-right: 16px;
}

span.jxButtonLabel {
  /* If using background images, the SPAN contains the right side of the background */
  /* use padding to make space between the icon and button edge */
  /* padding-left: 0px;*/ /* butts up to the left of the button bg image */
  margin: 0px; /* margins don't seem to work properly in IE */
  padding: 0px 4px;
  color: #000;
  background-position: right center;
  background-repeat: no-repeat;
  font-size: 11px;
}

.jxMenu span.jxButtonLabel,
.jxSubMenu span.jxButtonLabel {
  /* TODO: this is just really not right.  The padding-right value should be
     20px but the label is collapsing somehow ... we'll need to investigate
     why at some point, but not today!
  */
  padding-right: 30px;
}

span.jxButtonIcon {
  padding-left: 14px;
  background-position: left center;
  background-repeat: no-repeat;
}

span.jxButtonIcon.jxButtonLabel {
  padding-left: 22px;
}

.jxFlyout {
  margin: 0px;
  padding: 0px;
  border: 1px solid #999;
  background-color: #fff;
  /* because of jxToolbarItem */
  font-size: 12px;
  line-height: 14px;
}

.jxFlyout .jxBarRight,
.jxFlyout .jxBarLeft {
  float: left;
  height: auto;
  width: auto;
} 

a.jxButtonMulti {
  padding-left: 0px;
  padding-right: 0px;
}

a.jxButtonMulti span.jxButtonSpan {
  padding-left: 0px;
  padding-right: 16px;
}

a.jxButtonMulti span.jxButtonLabel {
  padding-left: 0px;
  padding-right: 0px;
}

a.jxButtonColor span.jxButtonSpan {
  padding-left: 2px;
  padding-right: 16px;
}
a.jxButtonColor span.jxButtonLabel {
  padding-left: 0px;
  padding-right: 0px;
}

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

.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. */
  width: 200px;
  height: 200px;
  margin: 0px;
  padding: 0px;
  border: 1px solid #999;
}

.tabContent {
}

.tabContentActive {
  display: block;
}

.jxTabSetContainer .jxToolbarContainer, 
.jxTabSetContainer ul.jxToolbar {
  border: none;
}

/* 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.
*/

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

.jxBarTop li.jxTabItem, 
.jxBarBottom li.jxTabItem {
  border: none;
}

.jxBarLeft li.jxTabItem, 
.jxBarRight li.jxTabItem {
  border: none;
}


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

a.jxTab:hover {
  background-color: #ccc;
}

a.jxTab:active {
  background-color: #fff;
}

a.tabActive {
  background-color: #fff;
}

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

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

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

.jxTabBoxTop {
    margin-top: 27px;
}

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

.jxBarTop a.jxTab {
  margin: 0px 1px;
  padding: 7px; /* makes space around the label */
}

.jxBarTop a.tabActive {
  border-bottom: 1px solid #fff; /* same color as the tabBox BG */
}

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

.jxTabBoxBottom {
  margin-bottom: 27px;
}

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

.jxBarBottom a.jxTab {
  margin: 0px 1px;
  padding: 7px; /* makes space around the label */
}

.jxBarBottom a.tabActive {
  border-top: 1px solid #fff; /* same color as the tabBox BG */
}

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

.jxTabBoxLeft {
  margin-left: 27px;
}

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

.jxBarLeft a.jxTab {
  margin: 1px 0px 1px 2px;
  padding: 7px; /* makes space around the label */
}

.jxBarLeft a.tabActive {
  border-right: 1px solid #fff; /* same color as the tabBox BG */
}

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

.jxTabBoxRight {
  margin-right: 27px;
}

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

.jxBarRight a.jxTab {
  margin: 1px 2px 1px 0px;
  padding: 7px; /* makes space around the label */
}

.jxBarRight a.tabActive {
  border-left: 1px solid #fff; /* same color as the tabBox BG */
}


/* ============== */
/* JX MENU STYLES */
/* ============== */

/* Jx Menus and Sub-menus are all built out of nested ULs
   For this to work visually, the margins and padding need to be flattened
   out, and the list marker needs to be hidden
*/

ul.jxMenu, 
ul.jxSubMenu {
  margin: 0px;
  padding: 0px;
  border: 1px solid #999;
  background-color: #fff;
}

ul.jxSubMenu {
  /* this makes pop-out sub menus align to the right edge of the 
     parent li. 100% aligns perfectly, less causes an overlap.
   */
  left: 98%;
  /* this makes pop-out sub menus align to the top of their parent li
     it needs to be the ul.jxMenu a line-height plus 1 px (and negative)
   */
  margin-top: -18px;
}

li.jxMenuItem, 
li.jxSubMenuItem {
  /* This is needed for IE to make sure submenus don't open space in the parent menu */
  margin: 0px;
  padding: 0px;
}

ul.jxMenu a.jxButton, 
ul.jxSubMenu a.jxButton {
  border: 1px solid #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-decoration: none;
  padding: 0px;
  /* padding-left: 20px; */
  /*padding-right: 20px;*/
  /* this value needs to be the height of it's parent
     minus it's own margin, padding and border values */ 
  line-height:20px;
  color: #000;
}

ul.jxMenu span.jxButtonSpan, 
ul.jxSubMenu span.jxButtonSpan {
  /* background image is used for ... */
  background-position: 5px center;
  background-repeat: no-repeat;
}


ul.jxMenu a.jxButton:hover, 
ul.jxSubMenu a.jxButton:hover {
  border: 1px solid #E1EDFA;
  background-color: #E1EDFA; 
}

ul.jxMenu a.jxButtonSubMenu span.jxButtonSpan,
ul.jxSubMenu a.jxButtonSubMenu span.jxButtonSpan {
  background-image: url(../images/menu_item_arrow_r2.png);
  background-position: right center;
  background-repeat: no-repeat;
}

ul.jxMenu span.jxButtonLabel, 
ul.jxSubMenu span.jxButtonLabel {
  padding-top: 1px;
  padding-bottom: 1px;
}

ul.jxMenu span.jxMenuSeparator {
  font-size: 10px;
  line-height: 10px;
  background-image: url(../images/toolbar_separator_v.png);
  background-repeat: repeat-x;
  background-position: left center;
}

ul.jxMenu a.jxMenuItemSelected {
  background-image: url(../images/menu_item_radio.png);
  background-position: 2px center;
  background-repeat: no-repeat;
}

ul.jxMenu a.jxDisabled span.jxButtonLabel, 
ul.jxSubMenu a.jxDisabled span.jxButtonLabel {   
  color: #ccc;  
}

ul.jxMenu a.jxDisabled:hover, 
ul.jxSubMenu a.jxDisabled:hover {   
  background-color: #fff;
  border: 1px solid #fff;
}