/*nimbusblue*/
.jxDialog #r2 {margin-top:0;}
.jxDialog h1,
.jxDialog h2,
.jxDialog h3,
.jxDialog h4,
.jxDialog h5,
.jxDialog h6 {color:#0f014e;}

.jxDialog ol, 
.jxDialog ul {
list-style-position:inside;
list-style-type:disc;
}


/**
 * @project         Jx
 * @revision        $Id: button.css 1153 2008-09-25 16:18:42Z fwarnock $
 * @author          Fred Warnock (fwarnock@dmsolutions.ca)
 * @copyright       (c) 2006 DM Solutions Group Inc.
 */

/* ============= */
/* BUTTON STYLES */
/* ============= */
/* jxButtons consist of an A, containing a SPAN, which contains an image.
   Buttons can use the sliding door technique with background images to horizontally
   accomodate icons with labels. */

div.jxButtonContainer {
  /* Base setup */
  display: block;
  position: relative;
  float: left;

  margin: 0px;
  padding: 2px;
  border: none;
}

/* normal button */

a.jxButton {
  /* Base setup */
  display: block;
  position: relative;
  float: left;

  /* Using background images, the A contains the left side of the background */
  margin: 0px; /* margins don't seem to work properly in IE */
  padding: 0px 0px 0px 4px; /* makes room for the left of the button bg */
  border: none;
  /*background-image: url(images/button.png);*/
  background-position: left -24px;
  background-repeat: no-repeat;
  text-decoration: none;
}

ul.jxToolbar a.jxButton {
  background-position: left top;
}

span.jxButtonContent {
  /* Base setup */
  display: block;
  position: relative;
  float: left;
  font-size: 0px;
  line-height: 0px;

  /* Using background images, the SPAN contains the right side of the background */
  margin: 0px; /* margins don't seem to work properly in IE */
  padding: 4px 4px 4px 0px; /* makes room for the right of the button bg */
  border: none;
  /*background-image: url(images/button.png);*/
  background-position: right -24px;
  background-repeat: no-repeat;
}

ul.jxToolbar span.jxButtonContent {
  background-position: right top;
}

/* hover button */
ul.jxToolbar a.jxButton:hover,
a.jxButton:hover {
  background-position: left -96px;
}

a.jxButton:hover span.jxButtonContent {
  background-position: right -96px;
}

/* active button */
ul.jxToolbar a.jxButtonActive,
a.jxButtonActive {
  background-position: left -72px;
}

a.jxButtonActive span.jxButtonContent {
  background-position: right -72px;
}

/* hover active button */
ul.jxToolbar a.jxButton:hover,
a.jxButtonActive:hover {
  background-position: left -96px;
}

a.jxButtonActive:hover span.jxButtonContent {
  background-position: right -96px;
}

/* clicking button */
ul.jxToolbar a.jxButton:active,
ul.jxToolbar a.jxButtonActive:active,
a.jxButton:active,
a.jxButtonActive:active {
  background-position: left -48px;
}

a.jxButton:active span.jxButtonContent,
a.jxButtonActive:active span.jxButtonContent {
  background-position: right -48px;
}

/* disabled buttons */

.jxDisabled a.jxButton,
.jxDisabled span.jxButtonContent span {
 cursor: default; 
}

/* hover and active disabled button */
ul.jxToolbar .jxDisabled a.jxButton:hover,
ul.jxToolbar .jxDisabled a.jxButton:active {
  background-position: left top;
}

.jxDisabled a.jxButton:hover,
.jxDisabled a.jxButton:active {
  background-position: left -24px;
}

ul.jxToolbar .jxDisabled a.jxButton:hover span.jxButtonContent,
ul.jxToolbar .jxDisabled a.jxButton:active span.jxButtonContent {
  background-position: right top;
}
  
.jxDisabled a.jxButton:hover span.jxButtonContent,
.jxDisabled a.jxButton:active span.jxButtonContent {
  background-position: right -24px;
}

img.jxButtonIcon {
  /* Base setup */
  position: relative;
  float: left;

  width: 16px;
  height: 16px;
  background-position: center center;
  background-repeat: no-repeat;
}

span.jxButtonContent span {
  /* Base setup */
  display: block;
  position: relative;
  float: left;
  cursor: pointer;
  padding:.5em;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 16px;
  height: 16px;
  white-space: nowrap;
}

span.jxButtonContent span.jxButtonLabel {
  margin: 0px;
  padding: 0 4px 0 4px;
  color: #000;
  font-size: 11px;
}

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

a.jxButtonMenu span.jxButtonContent,
a.jxButtonMulti span.jxButtonContent,
a.jxButtonFlyout span.jxButtonContent,
a.jxButtonCombo span.jxButtonContent,
a.jxButtonEditCombo span.jxButtonContent {
  padding-right: 0px;
}

a.jxButtonMenu span.jxButtonContent span,
a.jxButtonFlyout span.jxButtonContent span,
a.jxButtonMulti span.jxButtonContent span,
a.jxButtonCombo span.jxButtonContent span,
a.jxButtonEditCombo span.jxButtonContent span {
  padding-right: 16px;
  background-image: url(images/emblems.png);
  background-position: right -16px;
  background-repeat: no-repeat;
}

a.jxButtonDisclose {
  position: absolute;
  display: block;
  padding: 4px 0px;
  font-size: 0px;
  line-height: 0px;
  right: 2px;
  top: 2px;
  background-image: url(images/button_multi_disclose.png);
  background-position: right 0px;
  background-repeat: no-repeat;
}

a.jxButtonDisclose img {
  width: 16px;
  height: 16px;
  margin: 0px;
  padding: 0px;
  border: 0px;
  background-image: url(images/emblems.png);
  background-position: right -16px;
  background-repeat: no-repeat;
}

a.jxButtonDisclose:hover {
  background-position: right -96px;
}

a.jxButtonDisclose:active {
  background-position: right -48px;
}

.jxDisabled a.jxButtonDisclose,
.jxDisabled a.jxButtonDisclose:hover, 
.jxDisabled a.jxButtonDisclose:active {
  cursor: default; 
  background-position: right 0px;
}

/* note, jxButtonHover is set by Multi button JS */
ul.jxToolbar a.jxButtonHover {
  background-position: left -24px;
}

ul.jxToolbar a.jxButtonHover span.jxButtonContent {
  background-position: right -24px;
}


/* Jx Flyout Styles */

.jxFlyout .jxChrome {
  background-image: url(images/flyout_chrome.png);
  padding: 5px 5px 7px 6px;
}

.jxFlyout {
  /* Base setup */
  position: absolute;
  display: block;
  z-index: 100;

  margin: 0px;
  padding: 0px;
}

.jxFlyoutContent {
  position: relative;
  display: block;
  overflow: auto;
  margin: 6px 6px 8px 7px;
  background-color: #fff;
  border: 1px solid #999;
}

/* Jx Combo and Multi Button Styles */

a.jxButtonMulti,
a.jxButtonMulti span.jxButtonContent {
  background-image: url(images/button_multi.png);
}

a.jxButtonEditCombo,
a.jxButtonEditCombo span.jxButtonContent {
  background-image: url(images/button_combo.png);
}

a.jxButtonEditCombo span.jxButtonContent {
/* put 2px padding on the top of the input to center the text and
   remove it from this span
 */
}

a.jxButtonMulti span.jxButtonContent span {
  padding-right: 21px;
}

a.jxButtonEditCombo span.jxButtonContent span {
  font-size: 0px;
}

a.jxButtonComboDefault span.jxButtonContent span,
a.jxButtonComboDefault input {
  font-style: italic;
  color: #999;
}

a.jxButtonEditCombo input {
  float: left;
  line-height: 16px;
  height: 16px;
  padding: 0px 4px;
  margin: 0px;
  border: none;
  font-size: 11px;
  font-family: Arial, Helvetica, sans-serif;
  background-color: transparent;
}/**
 * @project         Jx
 * @revision        $Id: button.css 1153 2008-09-25 16:18:42Z fwarnock $
 * @author          Fred Warnock (fwarnock@dmsolutions.ca)
 * @copyright       (c) 2006 DM Solutions Group Inc.
 */

/* ============= */
/* CHROME STYLES */
/* ============= */
/* Chrome uses four absolutely positioned DIVs containing an image for each of 
   four quadrants.  The chrome image is used as a sprite map. */

.jxChrome {
  /* Base setup */
  position:absolute;
  display: block;
  font-size: 0px;
  line-height: 0px;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

.jxChromeDrag {
  opacity: 0.5;
  -ms-filter: "Alpha(opacity=50)";
}

.jxChromeTL { 
  position: absolute; 
  overflow: hidden; 
  left: 0%; 
  top: 0%; 
  width: 50%; 
  height: 50%; 
}

.jxChromeTR { 
  position: absolute; 
  overflow: hidden; 
  left: 50%; 
  top: 0%; 
  width: 50%; 
  height: 50%; 
}

.jxChromeBL { 
  position: absolute; 
  overflow: hidden; 
  left: 0%; 
  top: 50%; 
  width: 50%; 
  height: 50%; 
}

.jxChromeBR { 
  position: absolute; 
  overflow: hidden; 
  left: 50%; 
  top: 50%;  
  width: 50%; 
  height: 50%; 
}


.jxChromeTL img { 
  position: absolute; 
  top: 0px; 
  left: 0px;
  width: 800px;
  height:500px;
}

.jxChromeTR img { 
  position: absolute; 
  top: 0px; 
  right: 0px; 
  width: 800px;
  height:500px;
}

.jxChromeBL img { 
  position: absolute; 
  bottom: 0px; 
  left: 0px; 
  width: 800px;
  height:500px;
}

.jxChromeBR img { 
  position: absolute; 
  bottom: 0px; 
  right: 0px; 
  width: 800px;
  height:500px;
}

/**
 * @project         Jx
 * @revision        $Id: color.css 711 2008-08-13 20:38:33Z pspencer $
 * @author          Fred Warnock (fwarnock@dmsolutions.ca)
 * @copyright       (c) 2006 DM Solutions Group Inc.
 */

/* =================== */
/* COLOR PICKER STYLES */
/* =================== */

/*.jxColorPicker {
    position: absolute;
    display: none;
    top: 100%;
    width: 212px;
    left: 0px;
    border: 1px solid #000;
    padding: 2px;
    background-color: #eee;
}*/

.jxColorBar {
    position: relative;
    overflow: hidden;
}

table.jxColorGrid {
    position: relative;
    border-collapse: collapse;
    empty-cells: show;
    clear:both;
}

.jxColorGrid td {
    border: 1px solid #000;
}

.jxColorGrid td.emptyCell {
    border: 0px solid #000;
}

.jxColorGrid td.emptyCell span {
    display: block;
    width: 7px;
    height: 7px;
    line-height: 0px;
    font-size: 0px;
    border: 0px solid #000;
    padding: 1px;
    margin: 0px;
}

.jxColorGrid a.colorSwatch {
    display: block;
    width: 7px;
    height: 7px;
    line-height: 0px;
    font-size: 0px;
    border: 0px solid #000;
    margin: 0px;
    padding: 1px;
}

.jxColorGrid a.borderWhite:hover {
    border: 1px solid #fff;
    padding: 0px;
}

.jxColorGrid a.borderBlack:hover {
    border: 1px solid #000;
    padding: 0px;
}

input.jxHexInput {
    width: 55px;
    vertical-align: middle;
}

input.jxAlphaInput {
    width: 30px;
    vertical-align: middle;
}

div.jxColorPreview {
    float: left;
    position: relative;
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    margin: 2px;
    vertical-align: middle;
    background-image: url('images/grid.png');
    overflow: hidden;
}

a.jxButtonFlyout span.jxButtonContent span.jxButtonSwatch {
    display: block;
    float: left;
    width: 14px;
    height: 14px;
    border: 1px solid #000;
    background-image: url('images/grid.png');
    background-position: 0px 0px;
    background-repeat: repeat;
    padding-right: 0px !important;
}

a.jxButtonFlyout span.jxButtonContent span.jxButtonSwatch span {
    display: block;
    width: 14px;
    height: 14px;
    position: absolute;
    padding-right: 0px;
    background: none;
}

div.jxColorPreview img {
    position: absolute;
    z-index: 0;
}

div.jxColorPreview div {
    width: 20px;
    height: 10px;
    position: absolute;
    display: block;
    left: 0px;
    z-index: 1;
    font-size: 10px;
    line-height: 0px;
}

div.jxColorPreview div.jxColorSelected {
    top: 0px;
}

div.jxColorPreview div.jxColorHover {
    bottom: 0px;
}

label.jxColorLabel,
label.jxAlphaLabel {
    width: auto;
    font-family: inherit, sans-serif;
    font-size: 11px;
    line-height: 24px;
    padding: 2px;
    vertical-align: middle;
}

a.jxColorClose {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 16px;
    height: 16px;
}

a.jxColorClose img {
    width: 16px;
    height: 16px;
}/**
 * @project         Jx
 * @revision        $Id: $
 * @author          Fred Warnock (fwarnock@dmsolutions.ca)
 * @copyright       (c) 2006 DM Solutions Group Inc.
 */

/* ============= */
/* COMMON STYLES */
/* ============= */

a{outline:none;}
.jxClearer{display:block;position:relative;float:none;clear:both;font-size:0;line-height:0;width:0;height:0;margin:0;padding:0;}
.jxDisabled{opacity:0.4;-ms-filter:"Alpha(opacity=40)";}
iframe.jxIframeShim{position:absolute;top:0px;left:0px;width:100%;height:100%;-ms-filter:"Alpha(opacity:0)";opacity:0;z-index:-1;}/**
 * @project         Jx
 * @revision        $Id: dialog.css 1035 2008-09-22 17:05:20Z pspencer $
 * @author          Fred Warnock (fwarnock@dmsolutions.ca)
 * @copyright       (c) 2006 DM Solutions Group Inc.
 */

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

.jxDialog .jxChrome {
  /*background-image: url(images/dialog_chrome.png);*/
  background-image: url(images/dialog_fray.png) ;
}

.jxDialog {
  /* Base setup */
  display: block;
  z-index: 1000;
}

.jxDialogContentContainer {
  z-index: 1;
  margin: 0px 11px 13px 12px;
  padding-top:30px;
  /*border: 1px solid #b7b7b7;
  background-color: #f0f0f0;*/
}

.jxDialogModal {
  /* Base setup */
  position: absolute;
  display: block;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: .3;
  -ms-filter: "Alpha(opacity=30)";
}

.jxDialogContent {
  /* Base setup */
  display: block;
  position:relative;
  overflow: auto;
  padding: 1em;
  z-index: 1;
}

.jxDialogTitle {
   /* Base setup */
  display: block;
  position: relative;
  top:30px;

  /* this makes the dialog draggable by the title bar in IE
   * Without it, only the label is draggable
   */
 /*background-image: url(images/a_pixel.png);*/
 background-image: url(images/bgHeaderModal.jpg);
  text-align: left;
  /*height: 24px;*/
  height:80px;
  line-height: 24px;
  z-index: 1;
  margin: 6px 6px 0px 2px;
  padding-left:20px;
}

.jxDialogMin .jxDialogTitle {
  margin-bottom: 8px;
}

.jxDialogMoveable {
  cursor: move;
}

.jxDialogIcon {
  position: absolute;
  left: 2px;
  top: 3px;
  width: 16px;
  height: 16px;
  border: none;
  padding: 0px;
  margin: 0px;
}

.jxDialogLabel {
  /*font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;*/
  /* line-height vertically aligns the label in the containing div. */
  line-height:2.5;
  color: #fff;
  white-space: nowrap;
  font-family:Gill Sans,Century Gothic,Franklin Gothic Medium,Helvetica,Free Sans,sans-serif;
  font-size:220%;
  font-weight:bold;
}

.jxDialogResize {
  /* Base setup */
  position: absolute;
  bottom: 7px;
  right: 6px;
  width: 16px;
  height: 16px;
  z-index: 2;
  border: 0px;
  cursor: se-resize;
  background-image: url(images/dialog_resize.png);
}

.jxDialogControls {
  position: absolute;
  top: 30px;
  right: 10px;
  height: 16px;
  width: 80px;
}

.jxDialogControls img {
  background-image: url('images/panel_controls.png');
  background-repeat: no-repeat;
  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: 16px;
  height: 16px;
}

.jxDialogClose img {
  background-position: 0px -32px;
}

.jxDialogMenu img {
  background-position: 0px -48px;
}

.jxDialogHelp img {
  background-position: 0px -64px;
}

.jxDialogCollapse img {
  background-position: 0px -16px;
}

.jxDialogMin .jxDialogCollapse img {
  background-position: 0px 0px;
}

.jxDialogMax .jxDialogCollapse img {
  background-position: 0px -16px;
}

.jxDialogLoading 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: 16px;
  height: 16px;
  visibility:hidden;
  position: absolute;
  top: 1px;
  left: 2px;
}


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

.jxDialogControls .jxButtonContainer,
.jxDialogControls span.jxButtonContent,
.jxDialogControls a.jxButton:hover span.jxButtonContent,
.jxDialogControls a.jxButton:active span.jxButtonContent,
.jxDialogControls a.jxButtonActive span.jxButtonContent,
.jxDialogControls a.jxButtonActive:hover span.jxButtonContent,
.jxDialogControls a.jxButtonActive:active span.jxButtonContent,
.jxDialogControls .jxDisabled a.jxButton span.jxButtonContent,
.jxDialogControls .jxDisabled a.jxButton:hover span.jxButtonContent,
.jxDialogControls .jxDisabled a.jxButton:active span.jxButtonContent,
.jxDialogControls a.jxButton,
.jxDialogControls a.jxButton:hover,
.jxDialogControls a.jxButton:active ,
.jxDialogControls a.jxButtonActive,
.jxDialogControls a.jxButtonActive:hover,
.jxDialogControls a.jxButtonActive:active,
.jxDialogControls .jxDisabled a.jxButton,
.jxDialogControls .jxDisabled a.jxButton:hover,
.jxDialogControls .jxDisabled a.jxButton:active {
  padding: 0px;
  margin: 0px;
  border: none;
  background-color: transparent;
  background-image: none;
}


.jxDialogControls a.jxButtonMenu span.jxButtonContent,
.jxDialogControls a.jxButtonFlyout span.jxButtonContent {
  background-image: none;
}

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

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

/* Multiple toolbars can be housed in  the toolbar container the container will expand vertically to accomodate wrapped toolbars */

.jxDialogControls .jxBarContainer {
  /* Base setup */
  position: absolute;
  right: 0px;
  background-image: none;
  background-color: transparent;
  margin: 0px;
  padding: 0px;
  border: none;
  height: 16px;
}

.jxDialogControls .jxBarScroller {
  left: auto;
  right: 0px;
}

.jxDialogControls ul.jxToolbar {
  float: right;
}

.jxDialogControls ul.jxToolbar,
.jxDialogControls li.jxToolItem {
  background-image: none;
  background-color: transparent;
  margin: 0px;
  padding: 0px;
  border: none;
}/**
 * @project         Jx
 * @revision        $Id: form.css 1153 2008-09-25 16:18:42Z fwarnock $
 * @author          Fred Warnock (fwarnock@dmsolutions.ca)
 * @copyright       (c) 2006 DM Solutions Group Inc.
 */

/* =========== */
/* FORM STYLES */
/* =========== */
/* JxForm classes are a set of styles that can be used forlaying out forms 
 * There are three different types of layouts: Inline, Float and Block.
 * Each can be usedto layout an entire form, or a portion of the form as is needed
 */

 .jxForm {
  display: block;
  position: relative;
  overflow: hidden; /* ensures that floated elements are contained */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 18px;
}

.jxForm label {
  background-color: transparent;
  color: #000;
}

.jxForm select, 
.jxForm input {
  color: #000;
}

.jxFormFloat .radioGroup {
  display: block;
  overflow: hidden;
}

/* wrap the radio button in a label */
.jxFormFloat .radioGroup input,
.jxFormFloat .radioGroup label {
  width: auto !important;
  vertical-align: middle;
}

.jxForm .tipArea {
  display: block;
  padding: 5px 0px;
  background-color: transparent;
  color: #999;
}

/* INLINE FORM 
 * Wrap an Inline Form with .jxFormInline to sets up form elements to work as 
 * inline objects like they do by default */

.jxFormInline label {
  display: inline;
}

/* FLOAT FORM 
 * Wrap a Floating Form with .jxFormFloat to sets up form elements to work as 
 * block objects so labels can have set widths to simulate a 2 column display 
 * for label / input pairs. */

.jxFormFloat label {
  display: block;
  float: left;
  clear: left;
  width: 75px; /* Overide the width depending on the form layout */
}

.jxFormFloat select, 
.jxFormFloat input {
  float: left;
}

.jxFormFloat .radioGroup {
  float: left;
}

/* wrap the radio button in a label */
.jxFormFloat .radioGroup input,
.jxFormFloat .radioGroup label {
  float: none;
}

.jxFormFloat .tipArea {
  clear: left;
}

/* BLOCK FORM 
 *  Wrap a Block Form with .jxFormBlock to sets up form elements to work as 
 * block objects so they can label / input pairs */

.jxFormBlock label {
  display: block;
}
/**
 * @project         Jx
 * @revision        $Id: button.css 1153 2008-09-25 16:18:42Z fwarnock $
 * @author          Fred Warnock (fwarnock@dmsolutions.ca)
 * @copyright       (c) 2006 DM Solutions Group Inc.
 */

/* ============= */
/* GRID STYLES */
/* ============= */

.jxGridContainer {
    position: absolute;
    top: 0;
    left: 0;
    border-left: 0px solid #d8d8d8;
    border-top: 0px solid #d8d8d8;
    border-right: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    overflow: hidden;
}

.jxGridTable {
    position: relative;
    table-layout: fixed;
    border-collapse: collapse;
    border-style: none;
    width: 0px;
    cursor: default;
    font-family: Arial, Verdana, sans-serif;
    font-size: 11px;
    font-weight: normal;
}

.jxGridColHeadHide {
    height: 0px;
    line-height: 0px;
    font-size: 0px;
    background-color: #fff;
    white-space: normal;
}

.jxGridColHeadHide p, .jxGridRowHeadHide p {
    font-size: 0px;
    line-height: 0px;
    height: 0px;
    margin: 0px;
    padding: 0px;
}

.jxGridRowHeadHide {
    width: 0px;
    white-space: normal;
}

.jxGridCell {
    border-top: 0px solid #d8d8d8;
    border-right: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    border-left: 0px solid #d8d8d8;
    overflow: hidden;
    padding-left: 3px;
    padding-right: 3px;
    overflow: hidden;
    /* can change this to normal */
    white-space: nowrap;
    cursor: cell;
    /* only applies in IE and Safari right now */
    text-overflow: ellipsis;
}

/* Nornal Styles */

.jxGridColHead {
    border-top: 0px solid  #d8d8d8;
    border-right: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    border-left: 0px solid  #d8d8d8;
    background-color: #f2f2f2;
    background-image: url('images/table_col.png');
    background-position: 0px 0px;
    background-repeat: repeat-x;

    text-align: center;
    font-weight: bold;
    color: #333;
    cursor: default;
}

.jxGridRowHead {
    border-top: 0px solid  #d8d8d8;
    border-right: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    border-left: 0px solid  #d8d8d8;
    background-color:  #f2f2f2;
    background-image: url('images/table_row.png');
    background-position: 0px 0px;
    background-repeat: repeat-y;

    text-align: center;
    font-weight: bold;
    color: #333;
    cursor: default;
}

/* Alternating Row Styles */

.jxGridRowAll {
    background-color: #fff;
}

.jxGridRowOdd {}
.jxGridRowEven {}
.jxGridRowOdd td {}
.jxGridRowEven td {}

/* Selected Styles */

.jxGridColumnHeaderSelected {
    background-color: #e1e1e1;
    background-position: 0px -200px;
}

.jxGridRowHeaderSelected {
    background-color: #e1e1e1;
    background-position: -400px 0px;
}

.jxGridColumnSelected {
    background-color: #f7f7f7;
}

.jxGridRowSelected td {
    background-color: #f7f7f7;
}

td.jxGridCellSelected {
    background-color: #ebebeb;
}

/* Prelight Styles */

.jxGridColumnHeaderPrelight {
    background-color: #cee5ff;
    background-position: 0px -300px;
}

.jxGridRowHeaderPrelight {
    background-color: #cee5ff;
    background-position: -600px 0px;
}

.jxGridColumnPrelight {
    background-color: #e5f1ff;
}

.jxGridRowPrelight td {
    background-color: #e5f1ff;
}

td.jxGridCellPrelight {
  background-color: #cce3ff;
}

/**
 * @project         Jx
 * @revision        $Id: menu.css 1143 2008-09-24 19:59:44Z fwarnock $
 * @author          Fred Warnock (fwarnock@dmsolutions.ca)
 * @copyright       (c) 2006 DM Solutions Group Inc.
 */

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

.jxMenuContainer .jxChrome {
  /* the background image gets used by Jx.Chrome to create a stretchable chrome */
  background-image: url(images/flyout_chrome.png);
  /* the padding reflects the amount of space to leave around the content area
   * for the chrome, typically to leave space for a shadow
   */
  padding: 5px 5px 7px 6px;
}

a.jxButtonMenu span.jxMenuItemSpan {
  padding-right: 16px;
}

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

.jxMenuContainer {
  position: absolute;
  display: block;
  z-index: 200;
  padding: 0px;
}

ul.jxMenu,
ul.jxSubMenu {
  /* Base setup */
  display: block;
  position: relative;

  list-style-type: none;

  margin: 6px 6px 8px 7px;
  background-color: #fff;
  border: 1px solid #999;
}

li.jxMenuItemContainer {
  /* This is needed for IE to make sure submenus don't open space in the parent menu */
  /* Base setup */
  display: block;
  position: relative;

  margin: 0px;
  padding: 2px;
}

a.jxMenuItem {
  /* Base setup */
  display: block;
  position: relative;
  text-decoration: none;

  border: 1px solid #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
  color: #000;
}

a.jxMenuItem:hover {
  border: 1px solid #C5E0FF;
  background-image: url(images/menu_hover.png);
  background-color: #CDE5FF;
  background-repeat: repeat-x;
  background-position: 0px 0px;
}

a.jxMenuItem:hover span.jxMenuItemContent {
  border: 1px solid #F4F9FF;  /* forces IE to render properly */
  border-bottom: 1px solid #E4F0FF;
}

span.jxMenuItemContent {
  /* 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 */
  /* Base setup */
  display: block;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0px;
  line-height: 0px;
  white-space: nowrap;
  padding: 0px 20px 0px 0px; /* space for the arrow */
  margin: 0px;
  border: 1px solid #fff; /* forces IE to render properly */
}

a.jxButtonSubMenu span.jxMenuItemContent,
a.jxButtonSubMenu:hover span.jxMenuItemContent {
  background-image: url(images/emblems.png);
  background-position: right -32px;
  background-repeat: no-repeat;
}

img.jxMenuItemIcon {
  /* Base setup */
  position: absolute;
  top: 0px;
  left: 0px;
  display: inline;

  width: 16px;
  height: 16px;
  background-position: left center;
  background-repeat: no-repeat;
}

span.jxMenuItemContent span {
  /* Base setup for empty labels */
  display: block;
  position: relative;
  cursor: pointer;
  margin: 0px; /* margins don't seem to work properly in IE */
  padding: 0px 0px 0px 20px; /* space for the icon */
  font-size: 16px; /* keeps empty labels open */
  line-height: 16px;
}

span.jxMenuItemContent span.jxMenuItemLabel {
  /* Base setup, overrides empty labels */

  color: #000;
  font-size: 11px;
}

.jxMenuItemToggle img.jxMenuItemIcon,
.jxMenuItemSet img.jxMenuItemIcon {
  background-image: url(images/emblems.png);
  background-position: 2px 0px;
  background-repeat: no-repeat;
}

.jxMenuItemToggle a.jxMenuItemActive img.jxMenuItemIcon {
  background-position: 2px -48px;
}

.jxMenuItemSet a.jxMenuItemActive img.jxMenuItemIcon {
  background-position: 2px -64px;
}

a.jxMenuItemActive img.jxMenuItemIcon {
  top: -2px;
  left: -2px;
  border: 2px solid #C5E0FF;
}

a.jxMenuItemActive span.jxMenuItemContent {
  background-image: url(images/menu_icon_active.png);
  background-position: 0px 0px;
  background-repeat: no-repeat;
}

.jxDisabled a.jxMenuItem,
.jxDisabled span.jxMenuItemContent span {
  cursor: default;
}

.jxDisabled a.jxMenuItem:hover {
  background-color: #fff;
  background-image: none;
  border: 1px solid #fff;
}

ul.jxMenu span.jxMenuSeparator,
ul.jxSubMenu span.jxMenuSeparator {
  /* Base setup */
    display: block;

  font-size: 10px;
  line-height: 10px;
  background-image: url(images/toolbar_separator_v.png);
  background-repeat: repeat-x;
  background-position: left center;
}/**
 * @project         Jx
 * @revision        $Id: panel.css 1079 2008-09-23 17:54:08Z pspencer $
 * @author          Fred Warnock (fwarnock@dmsolutions.ca)
 * @copyright       (c) 2006 DM Solutions Group Inc.
 */

/* =============== */
/* JX PANEL STYLES */
/* =============== */

.jxPanel {
  /* Base setup */
  display: block;
  position:relative;
}

.jxPanelContentContainer {
  /* Base setup */
  /* need to test various scenarios to see if this is limiting */
  overflow: hidden;
  /*margin: 5px;*/
  background-color: #f0f0f0;
}

/* the content panel inside a panel */
.jxPanelContent {
  /* Base setup */
  /* position relative is required for panels to work correctly in safari */
  position: relative;
  display: block;
  overflow: auto;

  /*border: 1px solid #d8d8d8;*/
  background-color: #fff;
  margin: 0px;
  padding: 0px;
}

.jxPanelTitle {
  /* Base setup */
  /* position relative is required for panel dragging to work correctly in safari */
  display: block;
  position: relative;

  background-image: url(images/panelbar.png);
  background-repeat: repeat-x;
  background-position: left top;
  /* note this is hard coded into jx.js JxPanel initialize function - change there as well as here */
  height: 22px;
  margin: 0;
  padding: 0;

  text-align: center;
}

/* JX PANELSET STYLE FOR TITLE BAR */
.jxPanelBar {
  position: absolute;
  line-height: 1px;
  width: 100%;
  height: 5px;
  cursor: row-resize;
  /*background-image: url(images/a_pixel.png);*/
  background-color: #f0f0f0;
  z-index: 1;
}

.jxPanelIcon {
  position: absolute;
  left: 2px;
  top: 3px;
  width: 16px;
  height: 16px;
  border: none;
  padding: 0px;
  margin: 0px;
}

.jxPanelLabel {
  /* make room for the loading spinner */
  padding-left: 25px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  /* line-height vertically aligns the label in the containing div. */
  line-height:21px;
  color: #000;
  white-space: nowrap;
}

.jxPanelControls {
  position: absolute;
  top: 3px;
  right: 2px;
  height: 16px;
  width: 80px;
  overflow: hidden;
}

.jxPanelControls img {
  background-image: url('images/panel_controls.png');
  background-repeat: no-repeat;
  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: 16px;
  height: 16px;
}

.jxPanelClose img {
  background-position: 0px -32px;
}

.jxPanelMenu img {
  background-position: 0px -48px;
}

.jxPanelHelp img {
  background-position: 0px -64px;
}

.jxPanelCollapse img {
  background-position: 0px -16px;
}

.jxPanelMin .jxPanelCollapse img {
  background-position: 0px 0px;
}

.jxPanelMax .jxPanelCollapse img {
  background-position: 0px -16px;
}

.jxPanelMaximize img {
  background-position: 0px 0px;
}

.jxPanelLoading 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: 16px;
  height: 16px;
  visibility:hidden;
  position: absolute;
  top: 1px;
  left: 2px;
}



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

.jxPanelControls .jxButtonContainer,
.jxPanelControls span.jxButtonContent,
.jxPanelControls a.jxButton:hover span.jxButtonContent,
.jxPanelControls a.jxButton:active span.jxButtonContent,
.jxPanelControls a.jxButtonActive span.jxButtonContent,
.jxPanelControls a.jxButtonActive:hover span.jxButtonContent,
.jxPanelControls a.jxButtonActive:active span.jxButtonContent,
.jxPanelControls .jxDisabled a.jxButton span.jxButtonContent,
.jxPanelControls .jxDisabled a.jxButton:hover span.jxButtonContent,
.jxPanelControls .jxDisabled a.jxButton:active span.jxButtonContent,
.jxPanelControls a.jxButton,
.jxPanelControls a.jxButton:hover,
.jxPanelControls a.jxButton:active ,
.jxPanelControls a.jxButtonActive,
.jxPanelControls a.jxButtonActive:hover,
.jxPanelControls a.jxButtonActive:active,
.jxPanelControls .jxDisabled a.jxButton,
.jxPanelControls .jxDisabled a.jxButton:hover,
.jxPanelControls .jxDisabled a.jxButton:active {
  padding: 0px;
  margin: 0px;
  border: none;
  background-color: transparent;
  background-image: none;
}

.jxPanelControls a.jxButtonMenu span.jxButtonContent,
.jxPanelControls a.jxButtonFlyout span.jxButtonContent {
  background-image: none;
}

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

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

/* Multiple toolbars can be housed in  the toolbar container the container will expand vertically to accomodate wrapped toolbars */

.jxPanelControls div.jxBarTop {
  /* Base setup */
  position: absolute;
  right: 0px;
  background-image: none;
  background-color: transparent;
  margin: 0px;
  padding: 0px;
  border: none;
  height: 16px;
}

.jxPanelControls .jxBarScroller {
  left: auto;
  right: 0px;
}

.jxPanelControls ul.jxToolbar {
  float: right; 
}

.jxPanelControls ul.jxToolbar,
.jxPanelControls li.jxToolItem {
  background-image: none;
  background-color: transparent;
  margin: 0px;
  padding: 0px;
  border: none;
}/**
 * @project         Jx
 * @revision        $Id: splitter.css 1130 2008-09-24 19:12:35Z pspencer $
 * @author          Fred Warnock (fwarnock@dmsolutions.ca)
 * @copyright       (c) 2006 DM Solutions Group Inc.
 */

/* =============== */
/* SPLITTER STYLES */
/* =============== */

.jxSplitBarHorizontal {
  display: block;
  position: absolute;
  font-size: 0px;
  line-height: 0px;
  margin: 0px;
  padding: 0px;
  border: none;
  width: 5px;
  height: 100%;
  cursor: col-resize;
  /*background-image: url(images/a_pixel.png);*/
  background-color: #f0f0f0;
  z-index: 1;
}

.jxSplitBarVertical {
  display: block;
  position: absolute;
  font-size: 0px;
  line-height: 0px;
  margin: 0px;
  padding: 0px;
  border: none;
  width: 100%;
  height: 5px;
  cursor: row-resize;
  /*background-image: url(images/a_pixel.png);*/
  background-color: #f0f0f0;
  z-index: 1;
}

.jxSplitContainer {
  display: block;
  position: relative;
  margin: 0px;
  padding: 0px;
  border: none;
  overflow: hidden;
}

.jxSplitArea {
  display: block;
  position: absolute;
  margin: 0px;
  padding: 0px;
  border: none;
  /*overflow: hidden;*/
  z-index: 0;
}

.jxSplitBarDrag {
  background-color: #eee;
}

.jxSnapHorizontalBefore {
  width: 5px;
  height: 5px;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #aaa;
}

.jxSnapHorizontalAfter {
  width: 5px;
  height: 5px;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #aaa;
}/**
 * @project         Jx
 * @revision        $Id: tab.css 1129 2008-09-24 19:01:34Z fwarnock $
 * @author          Fred Warnock (fwarnock@dmsolutions.ca)
 * @copyright       (c) 2006 DM Solutions Group Inc.
 */

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

/* 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. */
  /* Base setup */
  position: relative;
  display: block;
  overflow: hidden;

  width: 200px;
  height: 200px;
  margin: 0px;
  padding: 0px;
  background-color: #fff;
}

.jxTabSetContainer  .jxToolbarContainer {
  /* Base setup */
  z-index: auto;
}

.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 */
  /* Base setup */
  display: none;
  position: relative;
  width:100%;
  height: 100%;
  overflow: auto;
}

.tabContentActive {
  /* Base setup */
  display: block;
}

/* ======================== */
/* BASE TAB (BUTTON) STYLES */
/* ======================== */

div.jxTabContainer {
  /* Base setup */
  display: block;
  position: relative;

  margin: 0px;
  padding: 2px;
  border: none;
}

a.jxTabClose {
  /* Base setup */
  display: block;
  position: absolute;
  cursor: pointer;
}

a.jxTabClose img {
  width: 16px;
  height: 16px;
  background-image: url(images/tab_close.png);  
}

a.jxTab {
  /* Base setup */
  display: block;
  position: relative;

  /* Using background images, the A contains the left side of the background */
  margin: 0px;
  padding: 0px;
  border: none;
  background-repeat: no-repeat;
  text-decoration: none;
  color: #000;
}

.jxDisabled a.jxTab,
.jxDisabled span.jxTabContent span,
.jxDisabled a.jxTabClose {
  cursor: default;
}

a.jxTab:hover,
a.jxTab:active,
a.jxTabActive,
a.jxTabActive:hover,
a.jxTabActive:active,
.jxDisabled a.jxTab:hover,
.jxDisabled a.jxTab:active {
  border: none;
}

span.jxTabContent {
  /* Base setup */
  display: block;
  font-size: 0px;
  line-height: 0px;

  /* The SPAN contains the other side of the tab background image
     and the tab label */
  margin: 0px;
  padding: 0px;
  background-repeat: no-repeat;
}

img.jxTabIcon {
  /* Base setup */
  position: relative;

  width: 16px;
  height: 16px;
  background-position: center center;
  background-repeat: no-repeat;
}

span.jxTabLabel {
  /* Base setup */
  display: block;
  position: relative;
  cursor: pointer;

  margin: 0px;
  padding: 0px;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 16px;
}

.jxTabBox {
}

/* ======================================= */
/* HORIZONTALTAB BAR - TOP and BOTTOM TABS */
/* ======================================= */

.jxBarTop div.jxTabContainer,
.jxBarBottom div.jxTabContainer {
  /* Base setup */
  float: left;
}

.jxBarTop a.jxTab,
.jxBarTop span.jxTabContent {
  background-image: url(images/tab_top.png);
}

.jxBarBottom a.jxTab,
.jxBarBottom span.jxTabContent {
  background-image: url(images/tab_bottom.png);
}

/* Closeable Tab */

.jxBarTop a.jxTabClose,
.jxBarBottom a.jxTabClose {
  top: 3px;
  right: 3px;
}

.jxBarTop .jxTabClose span.jxTabContent,
.jxBarBottom .jxTabClose span.jxTabContent {
  padding-right: 16px;
}

/* Normal Tab */

.jxBarTop a.jxTab,
.jxBarBottom a.jxTab {
  /* Base setup */
  float: left;

  padding-left: 4px; /* makes room for the left of the tab bg */
  background-position: left -24px; 
}

.jxBarTop span.jxTabContent,
.jxBarBottom span.jxTabContent {
  /* Base setup */
  float: left;

  padding: 4px 4px 4px 0px; /* makes space around the label */
  background-position: right -24px; 
}


/* Hover Tab */

.jxBarTop a.jxTab:hover,
.jxBarBottom a.jxTab:hover {
  background-position: left -96px; 
}

.jxBarTop a.jxTab:hover span.jxTabContent,
.jxBarBottom a.jxTab:hover span.jxTabContent {
  background-position: right -96px; 
}

/* Click Tab */

.jxBarTop a.jxTab:active,
.jxBarBottom a.jxTab:active {
  background-position: left -48px; 
}

.jxBarTop a.jxTab:active span.jxTabContent,
.jxBarBottom a.jxTab:active span.jxTabContent {
  background-position: right -48px; 
}

/* Active Tab */

.jxBarTop a.jxTabActive,
.jxBarBottom a.jxTabActive {
  background-position: left -72px; /* switch to the active left BG */
}

.jxBarTop a.jxTabActive span.jxTabContent,
.jxBarBottom a.jxTabActive span.jxTabContent {
  background-position: right -72px; /* switch to the active right BG  */
}

/* Disabled Tab */

.jxBarTop .jxDisabled a.jxTab:hover,
.jxBarTop .jxDisabled a.jxTab:active,
.jxBarBottom .jxDisabled a.jxTab:hover,
.jxBarBottom .jxDisabled a.jxTab:active {
  background-position: left -24px; /* do not switch the left BG */
}

  
.jxBarTop .jxDisabled a.jxTab:hover span.jxTabContent,
.jxBarTop .jxDisabled a.jxTab:active span.jxTabContent,
.jxBarBottom .jxDisabled a.jxTab:hover span.jxTabContent,
.jxBarBottom .jxDisabled a.jxTab:active span.jxTabContent {
  background-position: right -24px; /* do not switch the right BG */
}


.jxBarTop img.jxTabIcon,
.jxBarBottom img.jxTabIcon {
  /* Base setup */
  float: left;
}

.jxBarTop span.jxTabLabel,
.jxBarBottom span.jxTabLabel {
  /* Base setup */
  float: left;
  height: 16px;

  padding: 0px 4px 0px 4px;
}


/* ================================= */
/* VERTICAL TAB BAR - LEFT and RIGHT */
/* ================================= */

.jxBarLeft div.jxTabContainer,
.jxBarRight div.jxTabContainer {
  /* Base setup */
}

.jxBarLeft a.jxTab,
.jxBarLeft span.jxTabContent {
  background-image: url(images/tab_left.png);
}

.jxBarRight a.jxTab,
.jxBarRight span.jxTabContent {
  background-image: url(images/tab_right.png);
}

/* Closeable Tab */

.jxBarLeft a.jxTabClose,
.jxBarRight a.jxTabClose {
  top: 3px;
  left: 3px;
}

.jxBarLeft .jxTabClose span.jxTabContent,
.jxBarRight .jxTabClose span.jxTabContent {
  padding-top: 16px;
}

/* Normal Tab */

.jxBarLeft a.jxTab,
.jxBarRight a.jxTab {
  padding-top: 4px; /* makes room for the top of the tab bg */
  background-position: -24px top; 
}

.jxBarLeft span.jxTabContent,
.jxBarRight span.jxTabContent {
  padding: 0px 4px 4px 4px; /* makes space around the label */
  background-position: -24px bottom; 
}

/* Hover tab */

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

.jxBarLeft a.jxTab:hover span.jxTabContent,
.jxBarRight a.jxTab:hover span.jxTabContent {
  background-position: -96px bottom; 
}

/* Click Tab */

.jxBarLeft a.jxTab:active,
.jxBarRight a.jxTab:active {
  background-position: -48px top; 
}

.jxBarLeft a.jxTab:active span.jxTabContent,
.jxBarRight a.jxTab:active span.jxTabContent {
  background-position: -48px bottom; 
}

/* Active Tab */

.jxBarLeft a.jxTabActive,
.jxBarRight a.jxTabActive {
  background-position: -72px top; /* switch to the active top BG */
}

.jxBarLeft a.jxTabActive span.jxTabContent,
.jxBarRight a.jxTabActive span.jxTabContent {
  background-position: -72px bottom; /* switch to the active bottom BG  */
}

/* Disabled Tab */

.jxBarLeft .jxDisabled a.jxTab:hover,
.jxBarLeft .jxDisabled a.jxTab:active,
.jxBarRight .jxDisabled a.jxTab:hover,
.jxBarRigth .jxDisabled a.jxTab:active {
  background-position: -24px top; /* do not switch the top BG */
}

  
.jxBarLeft .jxDisabled a.jxTab:hover span.jxTabContent,
.jxBarLeft .jxDisabled a.jxTab:active span.jxTabContent,
.jxBarRight .jxDisabled a.jxTab:hover span.jxTabContent,
.jxBarRight .jxDisabled a.jxTab:active span.jxTabContent {
  background-position: -24px bottom; /* do not switch the top BG */
}

.jxBarLeft span.jxTabLabel,
.jxBarRight span.jxTabLabel {
  padding: 4px 0px 4px 0px;
}

/**
 * @project         Jx
 * @revision        $Id: toolbar.css 1080 2008-09-23 18:06:47Z fwarnock $
 * @author          Fred Warnock (fwarnock@dmsolutions.ca)
 * @copyright       (c) 2006 DM Solutions Group Inc.
 */

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

/* Multiple toolbars can be housed in  the toolbar container.
   The container will expand vertically to accomodate wrapped toolbars */

.jxBarContainer {
  /* Base setup */
  display: block;
  position: relative;
  z-index: 1;
  overflow: hidden;

  margin: 0px;
  padding: 0px;
  border: 0px;

  background-color: #f0f0f0;
}

.jxBarTop,
.jxBarBottom {
  /* Horizontally oriented toolbars */
  /* Base setup */
  width: 100%; /* fills the width, may be needed for JS style sniffing */
  height: 28px;
  background-image: url(images/toolbar.png);
  background-repeat: repeat-x;
  background-position: 0px 0px;
  overflow: hidden;
}

.jxTabBox .jxTabBarTop {
  background-image: url(images/tabbar.png);
  background-position: 0px bottom;
}

.jxTabBox .jxTabBarBottom {
  background-image: url(images/tabbar_bottom.png);
  background-position: 0px top;
}

.jxBarLeft,
.jxBarRight {
  /* Vertically oriented toolbars */
  /* Base setup */
  width: auto;
  height: 100%;
  background-image: url(images/toolbar.png);
  background-repeat: repeat-x;
  background-position: 0px 0px;
  float: left;
  overflow: hidden;
}

.jxTabBox .jxTabBarLeft {
  background-image: url(images/tabbar_left.png);
  background-repeat: repeat-y;
  background-position: right 0px;
}

.jxTabBox .jxTabBarRight {
  background-image: url(images/tabbar_right.png);
  background-repeat: repeat-y;
  background-position: left 0px;
}

.jxBarTop .jxBarScroller,
.jxBarBottom .jxBarScroller {
  position: absolute;
  /* much bigger than its container */
  width: 10000%;
  overflow: hidden;
}

.jxBarTop .jxBarScrollLeft,
.jxBarBottom .jxBarScrollLeft {
  position: absolute;
  top: 0px;
  left: 0px;
}

.jxBarTop .jxBarScrollRight,
.jxBarBottom .jxBarScrollRight {
  position: absolute;
  top: 0px;
  right: 0px;
}

.jxBarTop .jxBarScrollLeft img.jxButtonIcon,
.jxBarBottom .jxBarScrollLeft img.jxButtonIcon {
  background-image: url(images/emblems.png);
  background-position: 0px -80px;
}

.jxBarTop .jxBarScrollRight img.jxButtonIcon,
.jxBarBottom .jxBarScrollRight img.jxButtonIcon {
  background-image: url(images/emblems.png);
  background-position: 0px -96px;
}

/* The jx toolbar and tabbar are both built out of a UL
   The margins/padding are flattened out, and the list markers are hidden
   UL's are floated left so multiple toolbars can be in the samae row.
   In IE, the UL needs to have a specified width to prevent button wrapping.

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

ul.jxToolbar,
ul.jxTabBar {
  /* Base setup */
  display: block;
  position: relative;
  float: left;
  list-style-type: none;

  margin: 0px;  /* margins don't seem to work properly in IE */
  padding: 0px;
  border: none;
}

.jxBarTop ul.jxToolbar,
.jxBarBottom ul.jxToolbar,
.jxBarTop ul.jxTabBar,
.jxBarBottom ul.jxTabBar {
}

/* LI's are floated to the left, to make a horizontal row of buttons*/

li.jxToolItem {
  /* Base setup */
  display: block;
  position: relative;
  float: left;
  font-size: 0px;
  line-height: 0px;

  padding: 0px;
  margin: 0px;  /* margins don't seem to work properly in IE */
  border: none;
}

/* Seperator height should match that of button images
   and the margins+padding+border should add up to the same total too. */

li.jxToolItem  .separator {
  /* Base setup */
  display: block;
  position: relative;
  float: left;
  font-size: 0px;
  line-height: 0px;

  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.jxBarSeparator,
.jxBarBottom  li.jxToolItem  span.jxBarSeparator {
  /* width/height should be defined */
  width: 8px;
  height: 20px;
  background-image: url(images/toolbar_separator_h.png);
}

.jxBarLeft  li.jxToolItem  span.jxBarSeparator,
.jxBarRight  li.jxToolItem  span.jxBarSeparator {
  /* width/height should be defined */
  width: 20px;
  height: 8px;
  background-image: url(images/toolbar_separator_v.png);
}

/* Vertically oriented toolbars need floats cleared */

.jxBarLeft ul.jxToolbar,
.jxBarLeft ul.jxTabBar,
.jxBarLeft li.jxToolItem,
.jxBarRight ul.jxToolbar,
.jxBarRight ul.jxTabBar,
.jxBarRight li.jxToolItem
{
  /* Base setup */
  clear: both;
}

/**
 * @project         Jx
 * @revision        $Id: tree.css 711 2008-08-13 20:38:33Z pspencer $
 * @author          Fred Warnock (fwarnock@dmsolutions.ca)
 * @copyright       (c) 2006 DM Solutions Group Inc.
 */

/* =========== */
/* TREE STYLES */
/* =========== */

/* The jx tree 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
*/


.jxTree, 
.jxTreeRoot {
  /* relative positioning is required for IE to fix the peek-a-boo bug */
  position:relative;
  display: block;
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.jxTreeNest {
  list-style: none;
  margin: 0px;
  padding: 0px;
  background-repeat: repeat-y;
  background-position: left top;
}

/* Node Classes */

.jxTree li, 
.jxTreeRoot li {
  /* relative positioning is required for IE to fix the peek-a-boo bug */
  position:relative;
  display: block;
  margin: 0px;
  padding: 0px;
  background-repeat: no-repeat;
  /* background branches may need to shift up/down according to height of the node */
  background-position: left top;
  white-space: nowrap;
  font-size: 0px;
  line-height: 0px;
}

.jxTree li {
  margin-left: 16px;
}

.jxTree a, 
.jxTreeRoot a {
  position: relative;
  display: block;
  margin: 0px 0px 0px 14px;
  padding: 0px 0px 0px 20px;
  z-index: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #000;
  text-decoration: none;
  /* Line Height needs to be an even number so branches line up properly */
  line-height: 20px;
  height: 20px;
}

.jxTree a:hover, 
.jxTreeRoot a:hover {
  background-image: url(images/tree_hover.png);
  background-color: #CDE5FF;
  background-repeat: repeat-x;
  background-position: 0px 0px;
}

.jxDisabled .jxTree a:hover, 
.jxDisabled .jxTreeRoot a:hover {
  background: none;
  cursor: default;
}

.jxTreeNest {
  background-image: url(images/tree_vert_line.png);
}

.jxTreeImage,
.jxTreeIcon {
  position: absolute;
  display: inline;

  left: 0px;
  top: 0px;
  width: 16px;
  height: 20px;

  z-index: 1;

  background-image: url(images/tree.png);
  background-repeat: no-repeat;

  border: 0px;
  margin: 0px;
}

.jxTreeIcon { 
  height: 16px;
  top: 2px;
  left: 2px;
}

.jxTreeBranchOpen .jxTreeIcon,
.jxTreeBranchLastOpen .jxTreeIcon {
  background-position: left -40px; /* open folder image */
}


.jxTreeBranchOpen .jxTreeImage {
  background-position: left -100px; /* minus image */
}

.jxTreeBranchLastOpen .jxTreeImage {
  background-position: left -160px; /* minus last image */
}

.jxTreeBranchClosed .jxTreeIcon,
.jxTreeBranchLastClosed .jxTreeIcon {
  background-position: left -20px; /* closed folder image */
}


.jxTreeBranchClosed .jxTreeImage {
  background-position: left -80px; /* plus image */
}

.jxTreeBranchLastClosed .jxTreeImage {
  background-position: left -140px; /* plus last image */
}

.jxTreeItem .jxTreeIcon,
.jxTreeItemLast .jxTreeIcon {
  background-position: left 0px; /* page image */
}

.jxTreeItem .jxTreeImage {
  background-position: left -60px; /* node image */
}

.jxTreeItemLast .jxTreeImage {
  background-position: left -120px; /* last node image */
}

.jxTreeItemSelected {
  background-color: #AFD4FA;
  font-weight:bold;
}

.jxTreeItem a,
.jxTreeItem img,
.jxTreeItem input,
.jxTreeItemLast a,
.jxTreeItemLast img,
.jxTreeItemLast input,
.jxTreeBranch a,
.jxTreeBranch img,
.jxTreeBranch input,
.jxTreeBranchLast a,
.jxTreeBranchLast img,
.jxTreeBranchLast input {
    vertical-align: middle;
}