/**
 * @project         Jx
 * @revision        $Id: button.css,v 1.22 2007/07/19 14:26:14 fwarnock Exp $
 * @author          Fred Warnock (fwarnock@dmsolutions.ca)
 * @copyright       &copy; 2006 DM Solutions Group Inc.
 */

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

div.jxButtonContainer {
  display: block;
  position: relative;
  float: left;
  margin: 0px;
  padding: 0px;
  border: none;
}

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

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

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

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

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

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

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

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

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

img.jxButtonIcon {
  position: relative;
  float: left;
  border: 0px;
  margin: 0px; /* margins don't seem to work properly in IE */
  /* width/height should be defined */
  width: 16px;
  height: 16px;
}

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

span.jxButtonLabel {
  /* If using background images, the SPAN contains the right side of the background */
  /* use padding to make space between the icon and button edge */
  /* padding-left: 0px;*/ /* butts up to the left of the button bg image */
  display: block;
  position: relative;
  float: left;
  margin: 0px; /* margins don't seem to work properly in IE */
  padding: 0 4px 0 4px;
  font-family: Arial, Hevetica, sans-serif;
  font-size: 11px;
  line-height: 16px;
  color: #000;
  cursor: pointer;
}

span.jxButtonEmptyLabel {
  /* collapse empty labels */
  padding: 0px;
  width: 0px;
  overflow: hidden;
}

.jxButtonMenu a span.jxButtonEmptyLabel, 
a.jxButtonFlyout span.jxButtonEmptyLabel {
  /* expand empty labels that have a menu */
  overflow: visible;
}

.jxButtonMenu a span.jxButtonLabel, 
a.jxButtonFlyout span.jxButtonLabel {
  background-image: url('../images/menu_item_arrow_d2.png');
  background-position: right top;
  background-repeat: no-repeat;
  padding-right: 16px;
}

span.jxButtonEmptyLabel {
  /* collapse empty labels for FF */
}

.jxFlyout {
    top: 100%;
    left: 0px;
    position: absolute;
    z-index: 100;
    margin: 0px;
    padding: 0px;
    border: 1px solid #999;
    background-color: #fff;
    display: block;
    clear: both;
    float: none;
    /* because of jxToolbarItem */
    font-size: 12px;
    line-height: 14px;
}

.jxButtonContentTop .jxFlyout {
  top: auto;
  bottom: 100%;
}

.jxButtonContentLeft .jxFlyout  {
  left: auto;
  right: 0px;
}

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

div.jxButtonMultiContainer a.jxButton {
    padding-right: 0px;
}
