/**
 * @project         MapGuide Open Source Web Studio
 * @revision        $Id: toolbar.css,v 1.10 2006/06/09 13:44:31 pspencer Exp $
 * @copyright       © 2006 DM Solutions Group Inc.
 * released under LGPL License with MapGuide Open Source (see index.html)
 */

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

/* 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 marker needs to be hidden
*/

ul.jxToolBar {
  margin: 0px;
  padding: 0px;
  height: 34px;
  list-style-type: none;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #999;
  border-right: 1px solid #999;
  background-color: #d9d9d9;
  position: relative;
  display:block;
}

ul.jxToolBar li {
  display: block;
  position: relative;
  float: left;
  /* width and height has to be set on the li, a and img tag */
  width: 34px;
  height: 34px;
}

ul.jxToolBar li.separator {
  border-right: 1px dotted #aaa;
}

ul.jxToolBar a {
  display: block;
  border: 1px solid #d9d9d9;
  padding: 1px;
  margin: 1px; 
  /* width/height values needs to be the width/height of it's parent li
     minus it's own margin, padding and border values */ 
  width: 28px;
  height:28px;
}

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

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

ul.jxToolBar li.jxDisabled {   
  opacity: 0.4; /* css 3 */
  -moz-opacity: 0.4; /* moz-specific */
  filter: Alpha(opacity=40); /* IE only */
}

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


ul.jxToolBar 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: 4px;
  /* width/height has to be the actual image width/height */
  width: 20px;
  height: 20px;
}