@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/*
 ________________________________________________________________________
|                  |                                                     |
|           Title: |  Dropmarker - Depresses on hover (with nice image)  |
|     Description: |  For Small Icons Size with no text - See Below...   |
|          Author: |  rasselas21                                         |
| Influences/Help: |  jw25, -=Ben=-                                      |
|         WebSite: |  http://userstyles.org/styles/11508                 |
|         Status : |  Funtional, but works in limited contexts... undone |
|    Date Created: |  Oct. 23, 2008                                      |
|    Last Updated: |  Oct. 23, 2008                                      |
|         Version: |  1.0.2                                              |
|__________________|_____________________________________________________|

*/

/* by rasselas21 */
/* This style performs a few alterations on the dropmarker... first it narrows the space in between the icon-image and the dropmarker (not quite enough, but hopefully in the future) while maintaing the unique identity of the two... then it substitues a nice (though wider) image in place of the dropmarker... then it makes it so that the dropmarker gets "depressed" (or rather down-shifted) when hovered over.  */

/* Toolbars need to be "max-height 25" or so at most (and setting a min-height for toolbars doesn't hurt in this context).  Otherwise, don't place [type="menu-button"] buttons on those toolbars (if toolbars are, or become, larger than 25 pixels or so).  Some buttons get broken regardless, and will need to be tailored individually.  This Style MIGHT look like I'm using a :hover effect upon the dropmarker, but I assure you, I'm not.  What's going on is just an illusion.  You may note that the dividing bar in between icons extends a little long on hover, this is because it's not a real seperator, but an arbitrarily made border... perhaps there's a way to limit it's height, I've yet to find a way.  You may remove the border entirely, but that means you will need to adjust some other values, as the border has a width of 1px.  An outline wasn't used (even though it doesn't add to button size) as it only has one universal bevel, I required four so that I might make one one side visible.  See if you can figure out the trick I used to make this work... can you use the same trick to make the dropmarker acquire color? */
/* PS - this seems to be a style that's easy to be broken by other styles (or that perhaps breaks other styles)... use at your own risk */
/* One thing to note is that FireFox treats words to the right of icons as dropmarkers SORTA, it doesn't place boxes around them though */


/* Thanks to jw25 for the help! */
toolbarbutton[type="menu"] > .toolbarbutton-menu-dropmarker,
toolbarbutton[type="menu-button"] .toolbarbutton-menubutton-dropmarker {
     margin-left: -1px !important;      /* -2px is max */
     margin-right: -1px !important;     /* -2px is max */
     padding-left: 0 !important;
}

toolbarbutton[type="menu"] > .toolbarbutton-icon,
toolbarbutton[type="menu-button"] .toolbarbutton-icon {
     margin-left:  -1px !important;  /* -3px is max */ 
     margin-right: -0px !important;  /* 0px or -1px might be better for you) */ /* -2px is max */ 
     padding-right: 0 !important;
}


/* thanks to jw25 for the image */
.toolbarbutton-menubutton-dropmarker[type="menu-button"],
.toolbarbutton-menu-dropmarker[type="menu"] {
-moz-appearance: none !important;
-moz-image-region: auto !important;
     list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwMS8xNC8wNuPL9wYAAAAfdEVYdFNvZnR3YXJlAE1hY3JvbWVkaWEgRmlyZXdvcmtzIDi1aNJ4AAABi0lEQVQoz51Su04CURAFGzoaahJ+QQsCmFigFhYmtnYaBYXGkIDKQxSMPDQhgAjyWAjyEAGDgRgNwUhDqR/gd+C2xzvL7iZLaXEyuzPn3DNz76gAqAh2u13NoGHQMegZDGLUiXm1xJUECwzaTZdn1eQLDZcCV7+LZxFQpH/KU514gkh00K57fLblcJz3dxrof40w+Zlg8P2BQLcJylNdFKpJpKGTLKEYnxn2UPrsI9R7BIlDvRbK4wFyoxdQXXTUkEhnZi3s5vO4GbQFMmE6ncrfidcO9osFEI/4JNJT70dVDv52XSE6fXrASasKL4vuWlmYkfgkMtDQO3e3MtnbrgnRVS/K0XafBfGILzutXcbgaVbh69QFogRnJYNDLoONaFzhJMy0Eo5hO5UWWpIcDrgUmyWBres4LOcRxUx0e1ZjMMo7uAKOGxVBRA72UhJOLou9fA7GYIRuzyrd3uyd3D6b+SLGOyoc0u/PqIz7SL51mVsRJpanuvxOcxthNc9thHm2EVbFRvxn9/4AxIx0EWXKVF0AAAAASUVORK5CYII=") !important;
}


toolbarbutton[type="menu-button"]:hover > toolbarbutton,
toolbarbutton[type="menu-button"] > toolbarbutton:hover {
width: 29px !important;
max-width: 29px !important;            /* not needed, just precautionary */
border: 0px !important; 
padding-top: 3px !important;
padding-left: 7px !important;  
padding-right: 5px !important;
margin-left: -2px !important; 
border: 1px dotted !important;        
-moz-border-radius: 2px !important;     /* a little bit curved for looks */
border-color: transparent ThreeDShadow transparent transparent !important;
/* max-height: 20px !important; */   /* this doesn't work on border, why? */
}

toolbarbutton[type="menu-button"]:hover > toolbarbutton {   /* hover over the "dropmarker" */
-moz-appearance: none !important;
background-color: Transparent !important; 
padding-bottom: 6px !important;  /* higher this number, the greater the dropmarker drops */
}

toolbarbutton[type="menu-button"] > toolbarbutton:hover {   /* hover over the image */
-moz-appearance: none !important;  
background-color: transparent !important;  /* beige works for (on default theme) me if you prefer color */
padding-bottom: 2px !important;
}