/**
 * @project         Jx
 * @revision        $Id: menu.css,v 1.23 2007/07/19 15:47:42 fwarnock Exp $
 * @author          Fred Warnock (fwarnock@dmsolutions.ca)
 * @copyright       &copy; 2006 DM Solutions Group Inc.
 */

/* ============== */
/* JX MENU STYLES */
/* ============== */

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

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;
  clear: both;
  float: none;
}

ul.jxMenu {
    top: 100%;
    left: 0px;
}

.jxButtonContentTop ul.jxMenu {
  top: auto;
  bottom: 100%;
}

.jxButtonContentLeft ul.jxMenu  {
  left: auto;
  right: 0px;
}

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 {
  /* This is needed for IE to make sure submenus don't open space in the parent menu */
  display: inline;
  margin: 0px;
  padding: 0px;
  clear: both;
  float: none;
}

li.jxMenuItem div.jxButtonContainer {
  float: none;
}

ul.jxMenu a, ul.jxSubMenu a {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-decoration: none;
  white-space: nowrap;
  padding: 0px;
  padding-left: 20px;
  padding-right: 20px;
  /* 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;
  clear: both;
  float: none;
  background-repeat: no-repeat;
  background-position: 2px 2px;
}

ul.jxMenu span, ul.jxSubMenu span {
  display: block;
/*  clear: both; */ /*this caused a problem where menu's with images wrapped*/
  float: none;
  background-position: 5px top;
  background-repeat: no-repeat;
}

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

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

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

ul.jxMenu 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;
}
*/

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

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

iframe.jxMenuShim {
    position:absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    filter: Alpha(opacity:0);
    opacity: 0;
    -moz-opacity: 0;
    z-index: -1;
}