/**
 * @project         MapGuide Open Source Web Studio
 * @revision        $Id: menu.css,v 1.20 2006/06/09 16:25:50 fwarnock Exp $
 * @copyright       © 2006 DM Solutions Group Inc.
 * released under LGPL License with MapGuide Open Source (see index.html)
 */

/* ============== */
/* MENUBAR STYLES */
/* ============== */

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

ul.jxMenuBar {
  display: block;
  margin: 0px;
  padding: 0px;
  height: 20px;
  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;
}

li.jxMenuBarItem {
  display: block;
  float: left;
  width: 50px;
  height:20px;
}

ul.jxMenuBar a {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-decoration: none;
  white-space: nowrap;
}

a.jxMenuBarLink {
  margin: 1px; 
  padding: 1px;
  /* this value needs to be the height of it's parent minus
     margin, padding and border values */ 
  line-height:14px;
  color: #000;
  text-align: center; 
  border: 1px solid #d9d9d9;
}

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

ul.jxMenuBar li.jxDisabled a {   
  color: #999;  
}

ul.jxMenuBar li.jxDisabled a.jxMenuBarLink:hover {   
  border: 1px solid #d9d9d9;
}


/* Menu and Submenu classes follow */

ul.jxMenu, ul.jxSubMenu {
  /* this allows menus and submenus to be re-positioned */
  position: absolute;
  /* this allows menus and sub menus to appear above everything */
  z-index: 100;
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  border: 1px solid #999;
  background-color: #fff;
  display: block;
}

ul.jxSubMenu {
  /* this makes pop-out sub menus align to the right edge of the 
     parent li. 100% aligns perfectly, less causes an overlap.
   */
  left: 98%;
  /* this makes pop-out sub menus align to the top of their parent li
     it needs to be the ul.jxMenu a line-height plus 1 px (and negative)
   */
  margin-top: -18px;
}

li.jxMenuItem, li.jxSubMenuItem {
  margin: 0px;
  /* This is needed for IE to make sure submenus don't open space in the parent menu */
  display: inline;
}

ul.jxMenu a, ul.jxSubMenu a {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-decoration: none;
  white-space: nowrap;
  padding: 0;
  padding-left:15px;
  padding-right: 30px;
  /* this value needs to be the height of it's parent
     minus it's own margin, padding and border values */ 
  line-height:20px;
  color: #000;
}

ul.jxMenu a:hover, ul.jxSubMenu a:hover {
  background-color: #E1EDFA; 
  /*background-color: #ffffcc; */
}

ul.jxMenu a.jxDisabled, ul.jxSubMenu a.jxDisabled {   
  color: #ccc;  
}

ul.jxMenu a.jxDisabled:hover, ul.jxSubMenu a.jxDisabled:hover {   
  background-color: #fff;
}

a.jxSubMenuIndicator {
  background-image: url('../images/menu_item_bg.png');
  background-position: right top;
  background-repeat: no-repeat;
}

a.separator {
  border-bottom: 1px dotted #ccc;
}

a.jxMenuItemSelected {
  background-image: url('../images/menu_item_radio.png');
  background-position: 2px top;
  background-repeat: no-repeat;
}

/* Note: 
   The following styles could be used to do a CSS driven menu.
   Need to make ul.jxMenu and ul.jxSubMenu display:none

ul.jxMenuBar li.jxMenuBarItem:hover ul.jxMenu,
ul.jxMenu li.jxMenuItem:hover ul.jxSubMenu {
  display: block;
}
*/