
.menubutton-dual.toolbar.top
  {
    -moz-binding          : url("chrome://global/content/menulistBindings.xml#menubutton-dual-ex");
    border                : 1px solid transparent;
    -moz-user-focus       : ignore !important;
  }

.menubutton-dual.toolbar.left
  {
    -moz-binding          : url("chrome://global/content/menulistBindings.xml#menubutton-dual-ex-left");
    border                : 1px solid transparent;
    -moz-user-focus       : none !important;
  }  
  
/* internal button */  
.menubutton-dual-ex-button.top
  {
    -moz-binding          : url("chrome://global/skin/buttonBindings.xml#simplebutton");
    border                : 1px solid transparent;
    min-width             : 47px;
    margin                : 0px;
    padding               : 2px 7px 2px 6px;
    -moz-user-focus       : ignore !important;
  }  

.menubutton-dual-ex-button.left
  {
    -moz-binding          : url("chrome://global/skin/buttonBindings.xml#simplebutton-left");
    border-left           : 1px solid threedhighlight;
    border-top            : 1px solid threedhighlight;
    border-right          : 1px solid threedshadow;
    border-bottom         : 1px solid threedshadow;
    margin                : 0px;
    padding               : 2px 7px 2px 6px;
    -moz-user-focus       : none !important;
  }  

/* dropmarker */
.menubutton-dropmarker
  {
    list-style-image      : url("chrome://global/skin/scroll-down.gif");
  } 
  
.menubutton-dual.toolbar > .menubutton-dual-dropmarker-box
  {
    border                : 1px solid transparent;
    padding               : 1px 0px 1px 0px;
  }

.menubutton-dual.toolbar.left > .menubutton-dual-dropmarker-box
  {
    border-left           : 1px solid threedhighlight;
    border-top            : 1px solid threedhighlight;
    border-right          : 1px solid threedshadow;
    border-bottom         : 1px solid threedshadow;
    padding               : 1px 0px 1px 0px;
  }  
  
/** disabled **/
.menubutton-dual-ex-button[disabled="true"]
  {
    color                 : graytext;
  }  

.menubutton-dual.toolbar[disabled="true"] > .menubutton-dual-dropmarker-box > .menubutton-dropmarker
  {
    list-style-image      : url("chrome://global/skin/scroll-down-disabled.gif");
  }  
  
  
  
/* ACTION: mouseover the button */
 
  /* 1). button gets outset border */
  .menubutton-dual-ex-button:hover
    {
      border-left           : 1px solid threedhighlight;
      border-top            : 1px solid threedhighlight;
      border-right          : 1px solid threedshadow;
      border-bottom         : 1px solid threedshadow;
      color                 : blue;
    }

  .menubutton-dual-toolbar[disabled="true"] > .menubutton-dual-ex-button:hover
    {
      border                : 1px solid transparent;
      color                 : graytext;
    }
    
/**
 * XXX - this is a hack. :hover does not work to spec and so we're using a binding
 *       with JS that lives in xpfe/global/resources/content/menulistBindings.xml
 *       to set attributes on various parts of the button when mouse down/over 
 *       events fire. When :hover works correctly, this can be removed (see
 *       revision 1.21 of this file for details.
 */

  /* 2) menubutton gets black border */
  .menubutton-dual.toolbar[buttonover="true"]
    {
      border                : 1px solid threeddarkshadow;
    }
    
  .menubutton-dual.toolbar[buttonover="true"][disabled="true"]
    {
      border                : 1px solid transparent;
    }
    
  .menubutton-dual.toolbar[disabled="true"]:hover > .menubutton-dual-ex-button,
  .menubutton-dual.toolbar[disabled="true"][buttonover="true"] > .menubutton-dual-ex-button
    {
      border                : 1px solid transparent;
    }

  /* 3) dropmarker gets outset border */
  .menubutton-dual.toolbar[buttonover="true"] > .menubutton-dual-dropmarker-box
    {
      border-left           : 1px solid threedhighlight;
      border-top            : 1px solid threedhighlight;
      border-right          : 1px solid threedshadow;
      border-bottom         : 1px solid threedshadow;
    }    
    
  .menubutton-dual.toolbar[buttonover="true"][disabled="true"] > .menubutton-dual-dropmarker-box
    {
      border                : 1px solid transparent;
    }

/* ACTION: mousedown on the button */

  /* 1). button gets inset border */
  .menubutton-dual-ex-button:hover:active
    {
      border-left           : 1px solid threedshadow !important;
      border-top            : 1px solid threedshadow !important;
      border-right          : 1px solid threedhighlight !important;
      border-bottom         : 1px solid threedhighlight !important;
      padding               : 3px 6px 1px 7px !important;
      color                 : #000080 !important;
    }
    
  .menubutton-dual-ex-button[disabled="true"]:hover:active
    {
      border                : 1px solid transparent !important;
      padding               : 2px 7px 2px 6px !important;
    }
    
  /* 2). dropmarker gets inset border */
  .menubutton-dual.toolbar[buttondown="true"] > .menubutton-dual-dropmarker-box
    {
      border-left           : 1px solid threedshadow !important;
      border-top            : 1px solid threedshadow !important;
      border-right          : 1px solid threedhighlight !important;
      border-bottom         : 1px solid threedhighlight !important;
      padding               : 2px 0px 0px 0px !important;
    }    
    
  .menubutton-dual.toolbar[buttondown="true"][disabled="true"] > .menubutton-dual-dropmarker-box
    {
      border                : 1px solid transparent !important;
      padding               : 0px !important;
    }
    
/* ACTION: mouse over the menu */
  
  /* 1). menubutton gets black border */
  .menubutton-dual.toolbar:hover
    {
      border                : 1px solid threeddarkshadow;
    }
    
  .menubutton-dual.toolbar[disabled="true"]:hover
    {
      border                : 1px solid transparent;
    }
    
  /* 2). button gets outset border */
  .menubutton-dual.toolbar:hover > .menubutton-dual-ex-button
    {
      border-left           : 1px solid threedhighlight;
      border-top            : 1px solid threedhighlight;
      border-right          : 1px solid threedshadow;
      border-bottom         : 1px solid threedshadow;
      color                 : blue;
    }
    
  /* 3). dropmarker gets outset border */
  .menubutton-dual.toolbar:hover > .menubutton-dual-dropmarker-box
    {
      border-left           : 1px solid threedhighlight;
      border-top            : 1px solid threedhighlight;
      border-right          : 1px solid threedshadow;
      border-bottom         : 1px solid threedshadow;
    }

  .menubutton-dual.toolbar[disabled="true"]:hover > .menubutton-dual-dropmarker-box
    {
      border                : 1px solid transparent;
    }

/* ACTION: open the menu */
  
  /* 1). menubutton gets black border */
  .menubutton-dual.toolbar[open="true"]
    {
      border                : 1px solid threeddarkshadow;
    }
  
  /* 2). button gets outset border */
  .menubutton-dual.toolbar[open="true"] > .menubutton-dual-ex-button
    {
      border-left           : 1px solid threedhighlight;
      border-top            : 1px solid threedhighlight;
      border-right          : 1px solid threedshadow;
      border-bottom         : 1px solid threedshadow;
      color                 : blue;
    }
  
  /* 3). dropmarker gets inset border */
  .menubutton-dual.toolbar[open="true"] > .menubutton-dual-dropmarker-box
    {
      border-left           : 1px solid threedshadow;
      border-top            : 1px solid threedshadow;
      border-right          : 1px solid threedhighlight;
      border-bottom         : 1px solid threedhighlight;
      padding               : 2px 0px 0px 0px;
    }

/** menubuttons on generic grey toolbars
 *  class="button-toolbar"
 **/ 
  .button-toolbar > .menubutton-internal-box
    {
      border                : none;
      padding               : 1px 3px 1px 3px;
    }
 
/* toolbar menubuttons */   
menubutton.button-toolbar-4
  {
    -moz-binding            : url("chrome://communicator/skin/menubuttonBindings.xml#menubutton-toolbar-single");
    border                  : 1px solid transparent;
  }
  
menubutton.button-toolbar  
  {
    -moz-binding            : url("chrome://communicator/skin/menubuttonBindings.xml#menubutton-toolbar-single");
  }
  
menubutton.button-toolbar[open="true"], 
menubutton.button-toolbar:hover 
  {
    color                   : #FF0000;
  }  

  
menubutton.button-toolbar > .menubutton-toolbar-single-internal-box > .menubutton-toolbar-single-icon
  {
    margin-right            : 5px;
  }
    
menubutton.button-toolbar-4:hover
  {
    border                  : 1px solid threeddarkshadow;
  }

.menubutton-toolbar-single-internal-box
  {
    border                  : 1px solid transparent;
    padding                 : 0px 4px 0px 4px;
  }  
  
menubutton.button-toolbar > .menubutton-toolbar-single-internal-box
  {
    border                  : none;
    padding                 : 0px 4px 0px 4px;
  }  
  
menubutton.button-toolbar-4:hover > .menubutton-toolbar-single-internal-box
  {
    border-left             : 1px solid threedhighlight;
    border-top              : 1px solid threedhighlight;
    border-right            : 1px solid threedshadow;
    border-bottom           : 1px solid threedshadow;
  }  
  
menubutton.button-toolbar-4:hover:active > .menubutton-toolbar-single-internal-box,
menubutton.button-toolbar-4[open="true"] > .menubutton-toolbar-single-internal-box
  {
    border-left             : 1px solid threedshadow;
    border-top              : 1px solid threedshadow;
    border-right            : 1px solid threedhighlight;
    border-bottom           : 1px solid threedhighlight;
    padding                 : 0px 4px 0px 4px;
  }  
  
.menubutton-toolbar-single-dropmarker
  {
    padding-left            : 4px;
    list-style-image        : url("chrome://global/skin/scroll-up.gif");
  } 
  
  
