/* NEW WIDGET ANDING: <button> */

/** Default Button Styles (apply to usage of <button> without 
 *  any applied class).
 **/

/* outer frame */
  button, button.left
    {
      margin              : 1px 5px 2px 5px;
      min-width           : 6.3em;
      background-color    : ThreeDFace;
      color               : ButtonText;
      -moz-user-focus     : normal;
    }
  
  .button-text {
    margin: 0px !important;
    text-align: center;
  }

  button, 
  button[disabled="true"][default],
  button[disabled="true"]:hover:active
    {
      border-left         : 1px solid ThreeDHighlight;
      border-top          : 1px solid ThreeDHighlight;
      border-right        : 1px solid ThreeDDarkShadow;
      border-bottom       : 1px solid ThreeDDarkShadow;
    }

  .button-box-1,
  button[disabled="true"][default] > .button-box-1,
  button[disabled="true"]:hover:active > .button-box-1
    {
      border-left         : 1px solid ThreeDLightShadow;
      border-top          : 1px solid ThreeDLightShadow;
      border-right        : 1px solid ThreeDShadow;
      border-bottom       : 1px solid ThreeDShadow;
      -moz-user-focus     : none;
    }

  .button-box-2,
  button[disabled="true"][default] > .button-box-1 > .button-box-2,
  button[disabled="true"]:hover:active > .button-box-1 > .button-box-2
    {
			border              : 1px solid ThreeDFace;	
    }
  
  button:hover:active,
  button[open="true"]
    {
      border              : 1px solid ThreeDDarkShadow;
    }

  button:hover:active > .button-box-1,
  button[open="true"] > .button-box-1
    {
      border              : 1px solid ThreeDShadow;
    }

  button:hover:active > .button-box-1 > .button-box-2,
  button[open="true"] > .button-box-1 > .button-box-2
    {
      border              : 1px solid ThreeDFace;
    }

  button:hover:active > .button-box-1 > .button-box-2 > .button-box-text,
  button[open="true"] > .button-box-1 > .button-box-2 > .button-box-text
    {
      padding             : 1px 2px 0px 3px; 
    }
  
  button[disabled="true"],
  button[disabled="true"]:hover:active 
    {
      color               : GrayText;
    }
        
  button[disabled="true"] > .button-box-1 > .button-box-2 > .button-box-text,
  button[disabled="true"]:hover:active > .button-box-1 > .button-box-2 > .button-box-text
    {
      padding             : 0px 3px 1px 2px;
    }

/* text wrapping frame (hack because <text> does not support alignment) */
  .button-box-text,
  button[disabled]:focus > .button-box-1 > .button-box-2 > .button-box-text
    {
      padding             : 0px 3px 1px 2px;
      border              : 1px solid ThreeDFace;
      margin              : 1px;
    }

  button:focus > .button-box-1 > .button-box-2 > .button-box-text
    {
      border              : 1px dotted ThreeDDarkShadow;
    }    
    
/** Styles for "DEFAULT" buttons (usually 'OK' or equivalent in dialogs. 
 *  To activate, set 'default' attribute on button.
 **/
 
/* outer frame */  
  button[default], button:focus
    {
      border              : 1px solid ThreeDDarkShadow;
    }

  button[default] > .button-box-1,
  button:focus > .button-box-1
    {
      border-left         : 1px solid ThreeDHighlight;
      border-top          : 1px solid ThreeDHighlight;
      border-right        : 1px solid ThreeDDarkShadow;
      border-bottom       : 1px solid ThreeDDarkShadow;
    }

  button[default] > .button-box-1 > .button-box-2,
  button:focus > .button-box-1 > .button-box-2
    {
      border-left         : 1px solid ThreeDLightShadow;
      border-top          : 1px solid ThreeDLightShadow;
      border-right        : 1px solid ThreeDShadow;
      border-bottom       : 1px solid ThreeDShadow;
    }
  
/** plain (raw) buttons, class="plain" **/
  button.plain, button.plain:hover, button.plain:hover:active,
  button.plain:hover:active > .button-internal-box,
  button.plain > .button-internal-box, 
  button.plain > .button-internal-box:hover:active,
  button.plain > .button-internal-box > .button-text-container, 
  button.plain > .button-internal-box > .button-text-container:hover:active,
  button.plain > .button-internal-box > .button-text-container > .button-text, 
  button.plain > .button-internal-box > .button-text-container > .button.text:hover:active,
  button-plain > .button-internal-box > .button-icon, 
  button.plain > .button-internal-box > .button.icon:hover:active
    {
      border              : 0px ! important;
      margin              : 0px;
      padding             : 0px;
    }

/*** class = "plain-extended" ***/
/********************************/
/* This is a dummy class that is specified in several XUL files for the sake of the
 * Macintosh Classic Skin.  This class has essentially the same behavior and styles as
 * the above <button> and accompanying styles, but is useful in the Mac Classic skin.  This is because <button>
 * styles have been completely rewritten to produce Macintosh buttons with bevels, rounded corners,
 * etc.  Plain-extended thereby functions to produce square buttons with all the same hover and active
 * effects that modern <button>'s do.
 ********************************/

  button.plain-extended {}

  .reorder-up
    {
      min-width           : 0px;
    }    
    
  .reorder-down
    {
      min-width           : 0px;
    }    
    
  .reorder-up > .button-internal-box > .button-icon,
  .reorder-down > .button-internal-box > .button-icon
    {
      margin              : 0;
      padding             : 0;
    }
    
