/* Hover highlight on tabs
 * by PlastikManiac */
/* work with any Persona background, but I can't guarantee it will look good on every theme. */

/* hovered tab's colored band can be re-colored to match Persona, if desired.
type "scheme" into Find bar to find the right place in the code. */

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

/* force show tab-bottom */
.tabs-bottom {
  display: -moz-box !important;
  -moz-appearance: none !important;
  height: 3px !important;
  background: ThreeDFace url("chrome://browser/skin/tabbrowser/tabstrip-bottom.png") !important;
  -moz-border-top-colors: rgba(0, 0, 0, 0.4) rgba(255, 255, 255, 0.5) !important;
  -moz-border-bottom-colors: rgba(0, 0, 0, 0.6) rgba(255, 255, 255, 0.5) !important;
  border-left: none !important;
}

/* Tabs */
.tabbrowser-tab, .tabs-newtab-button {
  -moz-border-radius: 4px 4px 0px 0px !important;
}
.tabbrowser-tab:not(:hover):not([selected="true"]),
.tabs-alltabs-button {
  opacity: 0.9 !important;
}
.tabbrowser-tab:not([selected="true"]),
.tabs-alltabs-button,
.tabs-newtab-button {
  margin-bottom: 3px !important;
}

.tabbrowser-tab[selected="true"], .tabs-newtab-button:hover {
  opacity: 1 !important; 
  margin-bottom: 0px !important;
  background-color: rgba(250,250,250,0.5) !important;
  -moz-box-shadow: rgba(128, 128, 128, 0.6) 0px 24px 8px 4px !important;
  color: ButtonText !important;
}
.tabbrowser-tab:not([selected="true"]):hover,
.tabs-alltabs-button:active,
.tabs-newtab-button:hover,
.tabbrowser-arrowscrollbox > .scrollbutton-up:hover, 
.tabbrowser-arrowscrollbox > .scrollbutton-down:hover {
  opacity: 1 !important;
  color: buttontext !important; 

/* colored highlight for hovered tab - change to match Persona color scheme */

  -moz-box-shadow: highlight /*( highlight )*/ 0px 12px 8px -3px !important; 
  background: url(chrome://browser/skin/tabbrowser/tab-hover-bkgnd.png) rgba(255,255,255,0.3) !important;
}

/* move tab icon closer to left side, except on App Tabs or "Faviconized" tabs */
.tabbrowser-tab:not([pinned]):not([apptab="true"]):not([faviconized="true"]) image { 
  margin-left: 5px !important;
}

/* fix non-selected tab alignment & borders */

.tabs-container[overflow="true"],
.tabs-newtab-button,
.tabbrowser-tab {
  opacity: 0.95 !important;
}
.tabbrowser-arrowscrollbox > .scrollbutton-up,
.tabbrowser-arrowscrollbox > .scrollbutton-down {
  border: 2px solid !important;
  background: url(chrome://browser/skin/tabbrowser/tab-bkgnd.png) !important;
  margin-bottom: 0px !important;
  opacity: 0.8 !important;
  -moz-border-top-colors: rgba(0, 0, 0, 0.1) rgba(255, 255, 255, 0.8) !important;
  -moz-border-right-colors: rgba(0, 0, 0, 0.4) rgba(255, 255, 255, 0.3) !important;
  -moz-border-left-colors: rgba(0, 0, 0, 0.4) rgba(255, 255, 255, 0.3) !important;
  -moz-border-bottom-colors: rgba(0, 0, 0, 0.4) !important;
}