/**************************************************************************
Title:         MBlue Combine Nav-Buttons FF4
Author:        MBlue
Version:       0.1.2
Tested on:     Firefox 4RC
Release Date:  14/03/2011
Last Update:   15/03/2011
Description:   Combines BACK, FORWARD, RELOAD & STOP Buttons.
Usage:         Place the Buttons in this Order: Back-Forward-Reload-Stop.
               The Buttons will Combine when the Position matches.
Notes:         This will only work in the Nav-Bar.
**************************************************************************/




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

/* SHARED SETTINGS */

#navigator-toolbox[mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #back-button,
#navigator-toolbox[mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #forward-button {
 mask: none !important;
 padding: 0 !important;
 height: 24px !important;
 margin-top: 1px !important;
 margin-bottom: 1px !important;
 border-radius: 0 4.5px 4.5px 0 !important;
 border: 1px solid !important;
 border-color: rgba(0,0,0,.12) rgba(0,0,0,.19) rgba(0,0,0,.38) !important;
 box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
             0 0 0 2px rgba(255,255,255,.1) inset,
             0 1px 0 rgba(0,0,0,.15) !important;
}

#navigator-toolbox[mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #back-button:not([disabled="true"]):not(:active):hover,
#navigator-toolbox[mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #forward-button:not([disabled="true"]):not(:active):hover {
 mask: none !important;
 background-color: hsla(190,60%,70%,.5) !important;
 border-color: hsla(190,50%,65%,.8) hsla(190,50%,50%,.8) hsla(190,50%,40%,.8) !important;
 box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
             0 0 0 1.5px rgba(255,255,255,.1) inset,
             0 1px 0 rgba(0,0,0,.1),
             0 0 3.5px hsl(190,90%,80%) !important;
 -moz-transition: background-color .4s ease-in,
                  border-color .3s ease-in /*,
                  box-shadow .3s ease-in */ !important;
}

#navigator-toolbox[mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #back-button:not([disabled="true"]):hover:active,
#navigator-toolbox[mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #back-button[open="true"],
#navigator-toolbox[mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #forward-button:not([disabled="true"]):hover:active,
#navigator-toolbox[mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #forward-button[open="true"] {
 background-color: transparent !important;
 border-color: rgba(0,0,0,.65) rgba(0,0,0,.55) rgba(0,0,0,.5) !important;
 box-shadow: 0 0 6.5px rgba(0,0,0,.4) inset,
             0 0 2px rgba(0,0,0,.4) inset,
             0 1px 0 rgba(255,255,255,.4) !important;
}

#navigator-toolbox[mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #reload-button,
#navigator-toolbox[mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #stop-button {
 padding: 0 !important;
 position: relative !important;
 z-index: 10 !important;
 background-image: -moz-linear-gradient(rgba(251,252,253,.97), rgba(246,247,248,.5) 49%, 
                                        rgba(231,232,233,.45) 51%, rgba(225,226,229,.2)) !important;
 border: 1px solid !important;
 border-color: rgba(0,0,0,.12) rgba(0,0,0,.05) rgba(0,0,0,.38) !important;
 box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
             0 0 0 2px rgba(255,255,255,.1) inset,
             0 1px 0 rgba(0,0,0,.15) !important;
}




/* BACK & FORWARD BUTTONS (SMALL) */

#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #back-button {
 mask: none !important;
 width: 26px !important;
 margin-right: 26px !important;
 border-radius: 4.5px 0 0 4.5px !important;
}

#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #forward-button {
 mask: none !important;
 width: 26px !important;
 border-radius: 0 4.5px 4.5px 0 !important;
}




/* RELOAD & STOP BUTTONS (SMALL) */

#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #reload-button,
#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #stop-button {
 mask: none !important;
 margin: 1px 28px 1px -55px !important;
 border-radius: 0 !important;
 width: 28px !important;
 height: 24px !important;
}

#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #reload-button:not([disabled="true"]):not([open="true"]):not(:active):hover,
#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #stop-button:not([disabled="true"]):not([open="true"]):not(:active):hover {
 background-color: hsla(190,60%,70%,.5) !important;
 border-color: hsla(190,50%,65%,.8) hsla(190,50%,50%,.8) hsla(190,50%,40%,.8) !important;
 box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
             0 0 0 1.5px rgba(255,255,255,.1) inset,
             0 1px 0 rgba(0,0,0,.1),
             0 0 3.5px hsl(190,90%,80%) !important;
 -moz-transition: background-color .4s ease-in,
                  border-color .3s ease-in,
                  box-shadow .3s ease-in !important;
}

#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #reload-button:not([disabled="true"]):hover:active,
#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #reload-button[open="true"],
#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #stop-button:not([disabled="true"]):hover:active,
#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #stop-button[open="true"] {
 background-color: transparent !important;
 border-color: rgba(0,0,0,.65) rgba(0,0,0,.55) rgba(0,0,0,.5) !important;
 box-shadow: 0 0 6.5px rgba(0,0,0,.4) inset,
             0 0 2px rgba(0,0,0,.4) inset,
             0 1px 0 rgba(255,255,255,.4) !important;
}

#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #reload-button .toolbarbutton-icon,
#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #stop-button .toolbarbutton-icon {
 margin: 0 !important;
}




/* BACK & FORWARD BUTTONS (LARGE) */

#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #back-button,
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #forward-button {
 mask: url("chrome://browser/content/browser.xul#winstripe-keyhole-forward-mask") !important;
 width: 30px !important;
 margin-top: 1px !important;
 margin-bottom: 1px !important;
 border-radius: 0 4.5px 4.5px 0 !important;
}

#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #back-button {
 margin-right: 26px !important;
 -moz-transform: scaleX(-1) !important;
}

#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #back-button:not([disabled="true"]):not(:active):hover,
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #forward-button:not([disabled="true"]):not(:active):hover {
 mask: url("chrome://browser/content/browser.xul#winstripe-keyhole-forward-mask-hover") !important;
}

/*
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #back-button:not([disabled="true"]):hover:active,
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #back-button[open="true"],
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #forward-button:not([disabled="true"]):hover:active,
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #forward-button[open="true"] {

} */

#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #back-button .toolbarbutton-icon,
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #forward-button .toolbarbutton-icon {
 -moz-image-region: rect(0, 36px, 18px, 18px) !important;
 margin: 0 0 0 4px !important;
}




/* RELOAD & STOP BUTTONS (LARGE) */

#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #reload-button,
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #stop-button {
 margin: -2px 28px -2px -58px !important;
 border: none !important;
 border-radius: 10000px !important;
 width: 30px !important;
 height: 30px !important;
 background-image: -moz-linear-gradient(rgba(251,252,253,.97), rgba(246,247,248,.5) 49%, 
                                        rgba(231,232,233,.45) 51%, rgba(225,226,229,.2)) !important;
 box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
             0 0 0 2px rgba(255,255,255,.1) inset,
             0 0 0 1px rgba(0,0,0,.15),
             0 1px 0 rgba(0,0,0,.4),
             0 1px 1px rgba(0,0,0,.3),
             1px 2px 1px rgba(0,0,0,.2) !important;
}

#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #reload-button:not([disabled="true"]):not([open="true"]):not(:active):hover,
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #stop-button:not([disabled="true"]):not([open="true"]):not(:active):hover {
 box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
             0 0 0 2px rgba(255,255,255,.1) inset,
             0 0 0 1px hsla(190,50%,40%,.3),
             0 1px 0 rgba(0,0,0,.4),
             0 1px 1px rgba(0,0,0,.3),
             1px 2px 1px rgba(0,0,0,.2),
             0 0 5px 1px hsl(190,90%,80%) !important;
 -moz-transition: background-color .4s ease-in,
                  border-color .3s ease-in,
                  box-shadow .3s ease-in !important;
}

#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #reload-button:not([disabled="true"]):hover:active,
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #reload-button[open="true"],
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #stop-button:not([disabled="true"]):hover:active,
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #stop-button[open="true"] {
 box-shadow: 0 0 6.5px rgba(0,0,0,.4) inset,
             0 0 2px rgba(0,0,0,.4) inset,
             0 0 0 1px rgba(0,0,0,.65),
             0 2px 0 rgba(255,255,255,.4) !important;
}

#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #reload-button .toolbarbutton-icon {
 margin: 0 0 0 1px !important;
}

#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button,reload-button,stop-button"] #stop-button .toolbarbutton-icon {
 margin: 0 !important;
}




/* TOOLBARPALETTE ITEMS */

#main-window #navigator-toolbox > #nav-bar #wrapper-unified-back-forward-button #back-button,
#main-window #navigator-toolbox > #nav-bar #wrapper-unified-back-forward-button #forward-button {
mask: none !important;
height: 20px !important;
margin: 2px !important;
background-color: green !important;
}

#main-window #navigator-toolbox > #nav-bar #wrapper-reload-button #reload-button,
#main-window #navigator-toolbox > #nav-bar #wrapper-stop-button #stop-button {
mask: none !important;
height: 20px !important;
margin: 2px !important;
background-color: red !important;
}

#main-window #navigator-toolbox > #nav-bar #wrapper-reload-button + #wrapper-unified-back-forward-button #back-button,
#main-window #navigator-toolbox > #nav-bar #wrapper-reload-button + #wrapper-unified-back-forward-button #forward-button,
#main-window #navigator-toolbox > #nav-bar #wrapper-stop-button + #wrapper-unified-back-forward-button #back-button,
#main-window #navigator-toolbox > #nav-bar #wrapper-stop-button + #wrapper-unified-back-forward-button #forward-button {
background-color: red !important;
}

#main-window #navigator-toolbox > #nav-bar #wrapper-unified-back-forward-button + #wrapper-reload-button #reload-button,
#main-window #navigator-toolbox > #nav-bar #wrapper-unified-back-forward-button + #wrapper-reload-button + #wrapper-stop-button #stop-button {
background-color: green !important;
}




/* END */