/**
 * @project         Jx
 * @revision        $Id: toolbar.css,v 1.28 2007/06/22 16:17:21 pspencer Exp $
 * @author          Fred Warnock (fwarnock@dmsolutions.ca)
 * @copyright       &copy; 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 */
.jxToolbarContainer {
  display: block;
  position: relative;
  width: 100%; /* fills the width, may be needed for JS style sniffing */
  height: auto; /* since the last element clears the float, a height may not be needed */
  margin: 0px;
  padding: 0px;
  border: 0px;
  background-color: #d9d9d9;
  background-image:url(../images/container_bg.png); /* simulates an underline at the bottom of the container*/
  background-repeat:repeat-x;
  background-position: bottom;
  z-index: 1;
}

/* a label can optionally be used preceeding a toolbar.
   the line height is used to center the label relative to the toolbar. */
label.toolbarLabel {
  display: block;
  position: relative;
  float: left;
  margin: 0px;
  padding: 0px;
  font-family: Arial, Hevetica, sans-serif;
  font-size: 11px;
  line-height: 24px;
  color: #000;
}

/* The jx toolbar is built out of a UL
   For this to work visually, the margins and padding need to be flattened
   out, and the list markers need to be 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. */

ul.jxToolbar {
  display: block;
  position: relative;
  float: left;
  margin: 0px;  /* margins don't seem to work properly in IE */
  padding: 0px;
  list-style-type: none;
  border-left: 1px solid #fff;
  border-right: 1px solid #999;
  border-top: 1px solid #fff;
  background-color: #d9d9d9;
}

/* LI's are floated to the left, to make a horizontal row of buttons*/
li.jxToolItem {
  display: block;
  position: relative;
  float: left;
  padding: 0px;
  margin: 0px;  /* margins don't seem to work properly in IE */
  font-size: 0px;
  line-height: 0px;
  border-bottom: 1px solid #999;
}

/* Labels for form elements are floated to the left 
   and given a line height to center them vertically */
/*li.jxToolItem label {
  display: block;
  position: relative;
  float: left;
  margin: 0px;
  padding: 0px;
  font-family: Arial, Hevetica, sans-serif;
  font-size: 11px;
  line-height: 24px;
  color: #000;
}*/

/* Form elements are floated to the left 
   and given a margin to center them vertically */
/*li.jxToolItem select, li.jxToolItem input {
  float: none;
  vertical-align: middle;
  margin: 2px;
  font-family: Arial, Hevetica, sans-serif;
  font-size: 11px;
}*/

/* Seperator height should match that of button images
   and the margins+padding+border should add up to the same total too. */
li.jxToolItem  .separator {
  display: block;
  position: relative;
  float: left;
  /* width/height should be defined */
  width: 8px;
  height: 16px;
  border: 0px;
  margin: 0px;  /* margins don't seem to work properly in IE */
  padding: 4px;
  font-size: 0px;
  line-height: 0px;
  background-image: url(../images/separator.png);
  background-repeat: no-repeat;
  background-position: center center;
}

/*.jxToolbar .separator img {
  position: relative;
  float: left;
  border: 0px;
  margin: 0px;
  width: 16px;
  height: 16px;
}*/

/* Vertically oriented toolbars do not need to fill their containers horizontally */
.verticalToolbar {
  width: auto;
}

/* Vertically oriented toolbars do not use floated list items */
.verticalToolbar label.toolbarLabel,
.verticalToolbar ul.jxToolbar,
.verticalToolbar li.jxToolItem
{
  float:none;
  clear: both;
}

