
#MainToolbox > toolbar {
  padding: 4px;
}

#MainToolbox > toolbar toolbarbutton,
#CustomizeToolbarWindow toolbarbutton,
#CustomizeToolbarSheet toolbarbutton {
  /*-moz-image-region: rect(0px 32px 32px 0px);*/
  -moz-box-orient: vertical;
  -moz-appearance: none;
  padding: 0px ! important;
  margin: 5px ! important;
  border: none 0px;
}

#MainToolbox > toolbar toolbarbutton:hover {
  border: 0px none ! important;
  background-image: none ! important;
  background-color: transparent ! important;
}

#MainToolbox .toolbarbutton-icon {
  height: 12px;
  width:  12px;
}
:root[iconsize="medium"] #MainToolbox .toolbarbutton-icon {
  height: 16px;
  width:  16px;
}
:root[iconsize="large"] #MainToolbox .toolbarbutton-icon {
  height: 24px;
  width: 24px;
}

/* smaller icons */

:root[iconsize="medium"] #MainToolbox toolbarbutton[iconsize="smaller"] .toolbarbutton-icon {
  height: 12px;
  width:  12px;
}
:root[iconsize="large"] #MainToolbox toolbarbutton[iconsize="smaller"] .toolbarbutton-icon {
  height: 16px;
  width:  16px;
}

/* end smaller icons */

#MainToolbox > toolbar .toolbarbutton-icon {
  margin: 2px;
}

#MainToolbox > toolbar .toolbarbutton-text {
  padding-bottom: 4px;
}

#MainToolbox > toolbar[mode="icons"] .toolbarbutton-text {
  display: none;
}

#MainToolbox > toolbar[mode="text"] .toolbarbutton-icon,
#MainToolbox > toolbar[mode="text"] #composer-throbber {
  display: none;
}

#MainToolbox > toolbar[mode="text"] .toolbarbutton-text {
  padding: 4px;
}

#newButton {
  list-style-image: url("chrome://bluegriffon/skin/mainToolbar/plus.svg");
}

#openButton {
  list-style-image: url("chrome://bluegriffon/skin/mainToolbar/open.svg");
}

#refreshButton {
  list-style-image: url("chrome://bluegriffon/skin/mainToolbar/refresh.svg");
}

#stopButton {
  list-style-image: url("chrome://bluegriffon/skin/mainToolbar/stop.svg");
}

#tableButton {
  list-style-image: url("chrome://bluegriffon/skin/mainToolbar/table.svg");
}

#saveButton {
  list-style-image: url("chrome://bluegriffon/skin/mainToolbar/save.svg");
}

#imageButton {
  list-style-image: url("chrome://bluegriffon/skin/mainToolbar/image.svg");
}

#anchorButton {
  list-style-image: url("chrome://bluegriffon/skin/mainToolbar/anchor.svg");
}

#linkButton {
  list-style-image: url("chrome://bluegriffon/skin/mainToolbar/link.svg");
}

#cssButton {
  list-style-image: url("chrome://bluegriffon/skin/mainToolbar/css.png");
}

#videoButton {
  list-style-image: url("chrome://bluegriffon/skin/mainToolbar/video.svg");
}

#audioButton {
  list-style-image: url("chrome://bluegriffon/skin/mainToolbar/audio.svg");
}

#browseButton {
  list-style-image: url("chrome://bluegriffon/skin/mainToolbar/browse.svg");
}

#formButton {
  list-style-image: url("chrome://bluegriffon/skin/mainToolbar/form.svg");
}

/***************** THROBBER **************/

#composer-throbber {
  list-style-image: url('chrome://bluegriffon/skin/mainToolbar/logo.png');
}

#composer-throbber:hover {
  list-style-image: url('chrome://bluegriffon/skin/mainToolbar/logo-hover.png');
}

/* ::::: primary toolbar buttons ::::: */

.toolbarbutton-1 {
  list-style-image: url("chrome://browser/skin/Toolbar.png");
}

.toolbarbutton-1:-moz-lwtheme-brighttext {
  list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
}

.toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
.toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
.toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
.toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
  opacity: .4;
}

.toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
  -moz-appearance: none;
  url("chrome://bluegriffon/skin/mainToolbar/toolbarbutton-dropmarker-lion.png");
}

.toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
  list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow-inverted.png");
}

.toolbarbutton-1 > .toolbarbutton-icon,
.toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
  -moz-margin-end: 0;
}

toolbar[mode=full] .toolbarbutton-1:not([type=menu-button]) {
  -moz-box-orient: vertical;
}

toolbar[mode=full] .toolbarbutton-1,
toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
  min-width: 57px;
}

#nav-bar {
  /* force iconsize="small" on this toolbar */
  counter-reset: smallicons;
}

#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1,
#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
  -moz-appearance: none;
  border: none;
  padding: 0;
  background: none;
}

#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1:not([type=menu-button]),
#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
  padding: 5px 2px;
  -moz-box-pack: center;
}

#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button) {
  padding-left: 5px;
  padding-right: 5px;
}

#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > menupopup {
  margin-top: -3px;
}

#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
  -moz-padding-end: 0;
}

#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
  -moz-padding-start: 0;
  -moz-box-align: center;
}

#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
  padding: 2px 6px;
  background: hsla(210,32%,93%,0) padding-box;
  border-radius: 2px;
  border: 1px solid;
  border-color: hsla(210,54%,20%,0) hsla(210,54%,20%,0) hsla(210,54%,20%,0);
  box-shadow: 0 1px hsla(0,0%,100%,0) inset,
              0 1px hsla(210,54%,20%,0),
              0 0 2px hsla(210,54%,20%,0);
  transition-property: background-color, border-color, box-shadow;
  transition-duration: 150ms;
}


#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button) > .toolbarbutton-icon,
#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
  -moz-padding-end: 17px;
}

#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
  -moz-margin-start: -15px;
}

#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
  -moz-border-end: none;
}

#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
  padding: 8px 3px 7px;
}

#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar > #social-toolbar-item > .toolbarbutton-1:not(:first-child)::before {
  content: "";
  display: -moz-box;
  width: 1px;
  height: 18px;
  -moz-margin-end: -1px;
  background-image: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 18px);
  background-clip: padding-box;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1px 18px;
  box-shadow: 0 0 0 1px hsla(0,0%,100%,.2);
}

#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon:-moz-locale-dir(ltr),
#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-locale-dir(rtl) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon:-moz-locale-dir(rtl),
#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-locale-dir(ltr) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1:not([disabled]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1:not([disabled]):hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1:not([disabled]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
@conditionalForwardWithUrlbar@ > .toolbarbutton-1:-moz-any([disabled],:not([open]):not([disabled]):not(:active)) > .toolbarbutton-icon {
  background-image: -moz-linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
  border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.2) hsla(210,54%,20%,.25);
  box-shadow: 0 1px hsla(0,0%,100%,.3) inset,
              0 1px hsla(210,54%,20%,.03),
              0 0 2px hsla(210,54%,20%,.1);
}

#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled]):not([open]):not(:active):hover > .toolbarbutton-icon,
#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon,
@conditionalForwardWithUrlbar@ > #forward-button:not([open]):not(:active):not([disabled]):hover > .toolbarbutton-icon {
  border-color: hsla(210,54%,20%,.3) hsla(210,54%,20%,.35) hsla(210,54%,20%,.4);
  background-color: hsla(210,48%,96%,.75);
  box-shadow: 0 0 1px hsla(210,54%,20%,.03),
              0 0 2px hsla(210,54%,20%,.1);
}

#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled]):hover:active > .toolbarbutton-icon,
#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon,
#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1:not([disabled]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon {
  background-image: -moz-linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
  background-color: hsla(210,54%,20%,.15);
  border-color: hsla(210,54%,20%,.3) hsla(210,54%,20%,.35) hsla(210,54%,20%,.4);
  box-shadow: 0 1px 1px hsla(210,54%,20%,.1) inset,
              0 0 1px hsla(210,54%,20%,.2) inset,
              /* allows winstripe-keyhole-forward-clip-path to be used for non-hover as well as hover: */
              0 1px 0 hsla(210,54%,20%,0),
              0 0 2px hsla(210,54%,20%,0);
  text-shadow: none;
  transition: none;
}

#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1:-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon {
  -moz-border-start-color: hsla(210,54%,20%,.35);
}

#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon {
  background-color: rgba(90%,90%,90%,.4);
  transition: background-color .4s;
}

:-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1,
:-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button,
.tabbrowser-arrowscrollbox > .scrollbutton-up,
.tabbrowser-arrowscrollbox > .scrollbutton-down {
  -moz-appearance: none;
  border-style: none;
  padding: 0 3px;
}

#TabsToolbar .toolbarbutton-1:not([disabled]):hover,
#TabsToolbar .toolbarbutton-1[open],
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled]):hover,
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover,
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover {
  background-image: -moz-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.5)),
                    -moz-linear-gradient(transparent, rgba(0,0,0,.25) 30%),
                    -moz-linear-gradient(transparent, rgba(0,0,0,.25) 30%);
  background-position: 1px -1px, 0 -1px, 100% -1px;
  background-size: calc(100% - 2px) 100%, 1px 100%, 1px 100%;
  background-repeat: no-repeat;
}

#addon-bar .toolbarbutton-1:not([disabled]):hover,
#addon-bar .toolbarbutton-1[open],
#addon-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled]):hover {
  background-image: -moz-linear-gradient(bottom, transparent, rgba(0,0,0,.15)),
                    -moz-linear-gradient(bottom, transparent, rgba(0,0,0,.15) 30%),
                    -moz-linear-gradient(bottom, transparent, rgba(0,0,0,.15) 30%);
  background-position: left, left, right;
  background-size: auto, 1px 100%, 1px 100%;
  background-repeat: no-repeat;
}
