/* NEW WIDGET ANDING: <button> */

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

/* outer frame */
  button, button.left
    {
      behavior            : url("chrome://global/skin/buttonBindings.xml#buttonleft");
      border-left         : 1px solid threedface;
      border-top          : 1px solid threedface;
      border-right        : 1px solid threeddarkshadow;
      border-bottom       : 1px solid threeddarkshadow;
      margin              : 1px 5px 2px 5px;
      background-color    : buttonface;
      min-width           : 8em;
      font                : button,sans-serif;
      color               : buttontext;
    }
  
  .button-box-1  
    {
      border-left         : 1px solid threedhighlight;
      border-top          : 1px solid threedhighlight;
      border-right        : 1px solid threedshadow;
      border-bottom       : 1px solid threedshadow;
    }

  .button-box-2
    {
			border              : 1px solid threedface;	
    }
    
  button:hover:active 
    {
      border              : 1px solid threeddarkshadow;
    }

  button:hover:active > .button-box-1
    {
      border              : 1px solid threedshadow;
    }

  button:hover:active > .button-box-1 > .button-box-2
    {
      border              : 1px solid threedface;
    }

  button:hover:active > .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
    {
      text-align          : center;
      vertical-align      : middle;
      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 threedface;
      border-top          : 1px solid threedface;
      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: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;
    }
    
    
