/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 0.11.0
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}/**
 * @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 */

ul.jxToolbar .jxDisabled a.jxButton,
.jxDisabled a.jxButton {
 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;

  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 16px;
  height: 16px;
  white-space: nowrap;
}
#ToolbarSecondary span.jxButtonContent span.jxButtonLabel {
  color: #ffffff;
}

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

/* ========================== */
/* 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;
}

/* 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: 10px;
}

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

  margin: 0px;
  padding: 0px;
}

.jxFlyoutContent {
  position: relative;
  display: block;
  overflow: auto;
  margin: 10px;
  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: Verdana, 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: 500px;
  height:500px;
}

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

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

.jxChromeBR img { 
  position: absolute; 
  bottom: 0px; 
  right: 0px; 
  width: 500px;
  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: Arial, 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);
}

.jxDialog .jxChrome img {
  width: 500px;
  height: 500px;
}

.jxDialog {
  /* Base setup */
  display: block;
  /* starting default z-index for dialogs. Multiple dialogs will get 
   * incremental values starting from this value
   */
  z-index: 1000;
}

.jxDialogContentContainer {
  z-index: 1;
  margin: 0px 11px 16px 11px;
  border: none;
  background-color: #f0f0f0;
}

.jxDialogModal {
  /* Base setup */
  position: absolute;
  display: block;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;

  background-color: #000;
  opacity: .2;
  -ms-filter: "Alpha(opacity=20)";
}

.jxDialogContent {
  /* Base setup */
  display: block;
  position:relative;
  overflow: auto;

  padding: 0px;
  z-index: 1;
}

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

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

  text-align: center;
  /* note: height is hard coded into jx.js Jx.Dialog initialize function - change there as well as here */
  height: 16px;
  z-index: 1;

  margin: 10px 10px 0px 10px;
}

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

.jxDialogMoveable {
  cursor: move;
}

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

.jxDialogLabel {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  /* line-height vertically aligns the label in the containing div. */
  line-height:15px;
  color: #000;
  white-space: nowrap;
}

.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: 0px;
  right: 2px;
  height: 16px;
  width: 80px;
}

.jxDialogControls img {
  background-image: url('images/dialog_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: 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: Verdana, Arial, Helvetica, 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 821 2008-09-04 15:59:23Z 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: 10px;
}

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: 10px;
  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: 0px;
}

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

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

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

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

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: Verdana, 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;
  padding: 0px;
  border: 2px solid #cccccc;
}

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

.jxDisabled a.jxMenuItem {
  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-image: url(images/panelBackround.png);
  background-repeat: repeat-x;
  background-position: left bottom;
  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;*/
  margin: 0px;
  padding: 0px;
  background-color: none;
}

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

  background-image: url(images/jxPanelBarBackground.gif);
  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: 24px;
  margin: 0px;
  padding: 0px;

  color: white;
  text-align: left;
}

.jxPanelTitle:hover
{
	background-image: url(images/jxPanelBarBackgroundHover.gif);
	background-repeat: repeat-x;
	color: #000000;
}

.jxPanelTitleActive:hover
{
	background-image: url(images/jxPanelBarBackgroundHover.gif);
	background-repeat: repeat-x;
	color: #000000;
}

.jxPanelTitleActive {
  /* Base setup */
  /* position relative is required for panel dragging to work correctly in safari */
  display: block;
  position: relative;
  background-image: url(images/jxPanelBarBackgroundActive.gif);
  background-repeat: repeat-x;
  /*
  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: 24px;
  margin: 0px;
  padding: 0px;
  color: white;
  text-align: left;
}

/* JX PANELSET STYLE FOR TITLE BAR */
.jxPanelBar {
  position: absolute;
  line-height: 1px;
  width: 100%;
  cursor: pointer;
  background-color: none;
  z-index: 1;
}

.jxPanelIcon {
  display: none; /* hide the panel icon */
  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: 20px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  /* line-height vertically aligns the label in the containing div. */
  line-height:21px;
  white-space: nowrap;
}

.jxPanelControls {
  position: absolute;
  top: 2px;
  left: 2px;
  height: 16px;
  width: 16px;
  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;
}/********************************************************
  Noble Studios - 05/21/07
  ns_adsk.css
  Mapguide Layout
********************************************************/

html {
  height: 100%;
  overflow: hidden;
}

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /*background-image: url(images/backgroundTile.png);*/
  /*background-position: bottom;  */
  /*background-repeat: repeat-x;*/
  background-color: #000000;

}

body, table {
  font-style: normal;
  font-weight: normal;
  font-size: 75%;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #000000;
}

/********************************************************
  Main Map
********************************************************/

#Map {
  border: 1px solid #3a3a3a;
  background-image: url(images/mapBackground.png);
  background-repeat: repeat-x;
  background-color: #efefef;
  background-position: bottom;
  overflow: hidden;
  position: absolute;
  z-index: 1;
}

.olMapViewport {
    z-index: 1;
}

#Maptip {
  display: none;
  border: 1px solid #000;
  background-color: #E5DAC7;
  padding: 4px;
}

/********************************************************
  Primary Toolbar
********************************************************/

#Toolbar {
  position: absolute;
  display: block;
  top: 0px;
  z-index: 2;
  background-image: url(images/ToolbarBackground.gif);
  height: 24px;
}

#ToolbarLeft {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 0px;
  height: 24px;
  background-image: url(images/toolbarLeft.png);
  background-repeat: no-repeat;
  z-index: 3;
}

#ToolbarRight {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 0px;
  height: 24px;
  background-image: url(images/toolbarRight.png);
  background-repeat: no-repeat;
  z-index: 3;
}

#Toolbar div.jxButtonContainer {
  padding: 1px 2px 1px 2px;
}

#Toolbar a.jxButton {
  padding: 0px 0px 0px 4px; /* makes room for the left of the button bg */
  background-image: url(images/toolbarButton.png);
}

#Toolbar span.jxButtonContent {
  padding: 3px 4px 3px 0px; /* makes room for the right of the button bg */
  background-image: url(images/toolbarButton.png);
}

#Toolbar span.jxButtonLabel {
  color: #ffffff;
  padding-top: 0px;
  padding-bottom: 0px;
}

/********************************************************
  Secondary Toolbar
********************************************************/

#ToolbarSecondary {
  position: absolute;
  display: block;
  top: 24px;
  height: 24px;
  background-image: url(images/ToolbarSubBackground.gif);
  background-position: bottom;
  z-index: 2;
}

#ToolbarSecondaryLeft {
  position: absolute;
  left: 0px;
  top: 24px;
  width: 0px;
  height: 24px;
  background-image: url(images/toolbarSubLeft.png);
  background-repeat: no-repeat;
  background-position: bottom;
  z-index: 3;
}

#ToolbarSecondaryRight {
  position: absolute;
  right: 0px;
  top: 24px;
  width: 0px;
  height: 24px;
  background-image: url(images/toolbarSubRight.png);
  background-repeat: no-repeat;
  background-position: bottom;
  z-index: 3;
}

#ToolbarSecondary div.jxButtonContainer {
  padding: 0px 2px 1px 2px;
}

#ToolbarSecondary a.jxButton {
  padding: 0px 0px 0px 4px; /* makes room for the left of the button bg */
  background-image: url(images/toolbarSubButton.png);
}

#ToolbarSecondary span.jxButtonContent {
  padding: 4px 4px 3px 0px; /* makes room for the right of the button bg */
  background-image: url(images/toolbarSubButton.png);
}

#ToolbarSecondary span.jxButtonLabel {
  padding-top: 0px;
  padding-bottom: 0px;
}

/********************************************************
  Main Menu
********************************************************/

#FileMenu {
  position: absolute;
  display: block;
  left: 0px;
  height: 24px;
  background: transparent;
  z-index: 2;
}

#FileMenuLeft {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 0px;
  height: 24px;
  background-image: url(images/fileMenuLeft.png);
  background-repeat: no-repeat;
  z-index: 3;
}

#FileMenuRight {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 0px;
  height: 24px;
  background-image: url(images/fileMenuRight.png);
  background-repeat: no-repeat;
  z-index: 3;
}

#FileMenu div.jxButtonContainer {
  padding: 1px 2px 1px 2px;
}

#FileMenu a.jxButton {
  padding: 0px 0px 0px 4px; /* makes room for the left of the button bg */
  background-image: url(images/fileMenuButton.png);
}

#FileMenu span.jxButtonContent {
  padding: 2px 4px 2px 0px; /* makes room for the right of the button bg */
  background-image: url(images/fileMenuButton.png);
}

#FileMenu span.jxButtonLabel {
  color: #ffffff;
  padding: 0 4px 0 4px;
  background-image: none;
}

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

#ToolbarContainer li.jxToolItem .separator,
#FileMenuContainer li.jxToolItem .separator {
  padding: 4px;
}

#ToolbarContainer .jxBarTop  li.jxToolItem  span.separator,
#ToolbarContainer .jxBarBottom  li.jxToolItem  span.separator,
#FileMenuContainer .jxBarTop  li.jxToolItem  span.separator,
#FileMenuContainer .jxBarBottom  li.jxToolItem  span.separator {
  width: 8px;
  height: 16px;
}

#ToolbarContainer .jxBarLeft  li.jxToolItem  span.separator,
#Toolbarcontainer .jxBarRight  li.jxToolItem  span.separator,
#FileMenuContainer .jxBarLeft  li.jxToolItem  span.separator,
#FileMenuContainer .jxBarRight  li.jxToolItem  span.separator {
  width: 16px;
  height: 8px;
}

#ToolbarContainer a.jxButtonMenu span.jxButtonContent span,
#ToolbarContainer a.jxButtonFlyout span.jxButtonContent span,
#ToolbarContainer a.jxButtonMulti span.jxButtonContent span,
#ToolbarContainer a.jxButtonCombo span.jxButtonContent span,
#ToolbarContainer a.jxButtonEditCombo span.jxButtonContent span {
  background-image: url(images/emblems_alt.png);
}

/********************************************************
  Status Bar
********************************************************/

#StatusbarContainer {
  background-image: url(images/statusBarBackground.png);
  background-repeat: repeat-x;
  background-color: #ffffff;
  color: #ffffff;
  line-height: 21px;
  font-size: 10px;
  vertical-align: middle;
}

#Statusbar .jxSplitBarHorizontal {
  width: 1px;
  background-color: #313131;
  cursor: 'col-resize';
  margin-top: 5px;
  height: 13px;
}

#Statusbar .spanCursorPosition, 
#Statusbar .spanViewSize, 
#Statusbar .spanSelectionInfo {
  padding: 4px 10px;
}

.inputEditableScale {
  font-size: 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #fff;
  background-color: #aaa;
  border: 1px solid #ccc;
}

#StatusNavigator {
  position: absolute;
  right: 139px;
  padding-top: 2px;
}

#pbmg {
  position: absolute;
  right: 0px;
  padding-top: 2px;
}

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


/********************************************************
  Side Bar Panels
********************************************************/

#Sidebar {
  position: absolute;
  top: 26px;
  bottom: 24px;
  width: 218px;
  left: 0px;
  overflow: hidden;
  display: block;
  padding-right: 8px;
}

#Sidebar .jxSplitContainer {
  border-right: 1px solid #3A3A3A;
}

#Sidebar .jxSplitArea {
  border-left: 1px solid #3A3A3A;
  border-bottom: 1px solid #3A3A3A;
}

#Sidebar .jxPanelTitle {
  background-position: 2px 0px;
  height: 24px;
  margin: 0px;
}

#Sidebar .jxPanelBar {
  height: 24px;
  background-image: url(images/panelBarLeft.png);
  background-repeat: no-repeat;
  background-position: left 0px;
  background-color: none;
}

#SidebarCollapse {
  position: absolute;
  width: 8px;
  top: 0px;
  right: 0px;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

#SidebarCollapseContent {
  position: absolute;
  width: 8px;
  height: 100%;
  background: url(images/sidebarCollapseBackground.png) repeat-y #000;
  top: -2px;
  z-index: 1;
}

#SidebarCollapseTop {
  position: absolute;
  height: 2px;
  width: 8px;
  top: 0px;
  background: url(images/sidebarCollapseTop.png) no-repeat;
  z-index: 2;
}

#SidebarCollapseBottom {
  position: absolute;
  height: 2px;
  width: 8px;
  bottom: 0px;
  background: url(images/sidebarCollapseBottom.png) no-repeat;
  z-index: 2;
}

#SidebarCollapseButton {
  display: block;
  width: 8px;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  position: absolute;
  height: 100%;
  font-size: 1px;
}

.jxSnapOpened #SidebarCollapseButton {
  background: url(images/sidebarCloseButton.png) center no-repeat;
}

.jxSnapClosed #SidebarCollapseButton {
  background: url(images/sidebarOpenButton.png) center no-repeat;
}

/* navigator Styles */

#Navigator {
  right: 10px;
  top: 10px;
  display: block;
}

/**
 * @project         Jx
 * @revision        $Id: splitter.css 793 2008-08-28 14:22:32Z 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: 2px;
  height: 100%;
  cursor: col-resize;
  background-image: url(images/a_pixel.png);
  background-color: none;
  z-index: 1;
}

.jxSplitBarVertical {
  display: block;
  position: absolute;
  font-size: 0px;
  line-height: 0px;
  margin: 0px;
  padding: 0px;
  border: none;
  width: 100%;
  height: 2px;
  cursor: row-resize;
  background-image: url(images/a_pixel.png);
  background-color: none;
  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.jxButton {
 cursor: default; 
}

a.jxTab:hover,
a.jxTab:active,
a.jxTabActive,
a.jxTabActive:hover,
a.jxTabActive:active,
.jxDisabled a.jxButton:hover,
.jxDisabled a.jxButton: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: Verdana, 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: visible;
}

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

.jxTabBox .jxBarBottom {
  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 .jxBarLeft {
  background-image: url(images/tabbar_left.png);
  background-repeat: repeat-y;
  background-position: right 0px;
}

.jxTabBox .jxBarRight {
  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: 100%;
  overflow: visible;
}

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

.jxBarLeft  li.jxToolItem  span.separator,
.jxBarRight  li.jxToolItem  span.separator {
  /* 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: Verdana, 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;
  left: 2px;
  top: 2px;
}

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


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

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

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


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

.jxTreeBranchClosed .jxTreeImage {
  background-position: left -80px; /* plus 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;
}