/***************************
 * browser tab styles
 ***************************/

.tabs-container {
  height: 36px !important;
}

/* See bug 1261 */
hbox.tabbrowser-strip {
  overflow: hidden;
}

.tabbrowser-tabs {
  background-image: url(chrome://global/skin/icons/tabbrowser-tabs-bkgnd.png) !important;
  -moz-box-align: end;
}

.tabbrowser-tab[selected="true"] .tab-text {
  font-weight: bold;
}

.tabbrowser-tab:not([selected="true"]) .tab-close-button {
  list-style-image: url(chrome://global/skin/icons/closetab.png);
  -moz-image-region: rect(0px, 16px, 16px, 0px);
}

.tabs-closebutton {
  -moz-appearance: none;
  border: 0;
  list-style-image: url("chrome://flock/skin/common/closeTab.png");
  -moz-image-region: rect(0px 16px 16px 0px);
}

.tabs-closebutton:hover {
  -moz-image-region: rect(16px 16px 32px 0px);
}

.tabs-closebutton:hover:active {
  -moz-image-region: rect(32px 16px 48px 0px);
}

.tabbrowser-tab > .tab-close-button {
  -moz-appearance: none;
  border: 0;
  list-style-image: url(chrome://global/skin/icons/closetab.png);
  -moz-image-region: rect(0px, 16px, 16px, 0px);
}

.tabbrowser-tab:hover > .tab-close-button {
  list-style-image: url(chrome://global/skin/icons/closetab.png);
}

.tabbrowser-tab > .tab-close-button:hover {
  -moz-image-region: rect(0px, 32px, 16px, 16px);
}

.tabbrowser-tab > .tab-close-button:hover:active {
  list-style-image: url(chrome://global/skin/icons/closetab.png) !important;
  -moz-image-region: rect(0px, 48px, 16px, 32px) !important;
}

.tabbrowser-tab:first-child {
  margin-left: 0px;
}

.tabbrowser-tab {
  font-weight: normal !important;
  background-color: transparent;
  height: 34px !important;
  -moz-border-radius: 0px !important;
  -moz-appearance: none !important;
  margin: -3px 0 0 -6px;
  border: 0;
}

.tabbrowser-tab:hover {
  background-image: none;
}
.tabbrowser-tab .tab-image-left,
.tabbrowser-tab .tab-image-middle,
.tabbrowser-tab .tab-image-right,
.tabbrowser-tab .tab-close-button,
.tabbrowser-tab > .tab-image-left,
.tabbrowser-tab > .tab-image-right,
.tabbrowser-tab:not([selected="true"]) > .tab-image-left,
.tabbrowser-tab:not([selected="true"]) > .tab-image-right,
.tabbrowser-tab:hover:not([selected="true"]) > .tab-image-left,
.tabbrowser-tab:hover:not([selected="true"]) > .tab-image-right {
  height: 34px !important;
  background-color: transparent;
}

.tabbrowser-tab:hover,
.tabbrowser-tab[selected="true"] {
  opacity: 1.0;
}

.tabbrowser-tab .tab-text {
  padding-top: 5px;
}

.tabbrowser-tab .tab-icon {
  padding-top: 5px;
}

.tabbrowser-tab[selected="true"] .tab-icon {
  margin-bottom: 1px;
}

.tabbrowser-strip {
  overflow: hidden;
}

.tabs-bottom {
  height: 0px !important;
  background: none !important;
  border: 0px !important;
}


/* tabbar new tab button */
.tabbar-newtab-button {
  -moz-appearance: none;
  border: 0;
  padding: 0;
}

/* BC: Right now we need this button to be 29px height,
 * So I'm decreasing the bottom value by 3, (currently 32)
 */
.tabbar-newtab-button {
  list-style-image: url("chrome://browser/skin/Toolbar.png");
  -moz-image-region: rect(0px 782px 29px 750px);
}
.tabbar-newtab-button:active,
.tabbar-newtab-button:hover:active {
  -moz-image-region: rect(100px 782px 129px 750px);
}

.tabbar-newtab-button:hover {
  -moz-image-region: rect(50px 782px 79px 750px);
}

/* BC: apr12 - New Tab Theming */

/* Tabs, left-side */
  /* Tab, left, Active */
  .tabbrowser-tab[selected="true"] > .tab-image-left {
    width: 10px;
    margin-bottom: 1px;
    background: url("chrome://global/skin/tabs/tab-left.png") no-repeat;
    background-color: transparent;
  }

  /* Tab, left, inactive */
  .tabbrowser-tab:not([selected="true"]) > .tab-image-left {
    width: 9px;
    margin-bottom: 1px;
    background: url("chrome://global/skin/tabs/tab-left-inact.png") no-repeat;
    background-color: transparent;
  }
  /* Tab, left (reverse), inactive */
  .tabbrowser-tab[chromedir="rtl"]:not([selected="true"]) > .tab-image-left {
    background: url("chrome://global/skin/tabs/tab-right-inact.png") no-repeat;
    background-color: transparent;
  }  

  /* Tab left edge, inactive, hover */
  .tabbrowser-tab:hover:not([selected="true"]) > .tab-image-left {
    background: url("chrome://global/skin/tabs/tab-left-inact.png") no-repeat;
    background-color: transparent;
  }

  /* Tab left edge, first-tab, inactive, hover || normal */
  .tabbrowser-tab:hover:not([selected="true"])[first-tab="true"] > .tab-image-left,
  .tabbrowser-tab:not([selected="true"])[first-tab="true"] > .tab-image-left {
    width: 16px;
    background: url("chrome://global/skin/tabs/tab-left-inact-firsttab.png") no-repeat;
    background-color: transparent;
  }

  /* Tab left edge, first-tab, inactive, hover || normal */
  .tabbrowser-tab:hover[selected="true"][first-tab="true"] > .tab-image-left,
  .tabbrowser-tab[selected="true"][first-tab="true"] > .tab-image-left {
    width: 16px;
    background: url("chrome://global/skin/tabs/tab-left-firsttab.png") no-repeat;
    background-color: transparent;
  }

  /* Tab left edge, inactive, reverse mode, hover */
  .tabbrowser-tab[chromedir="rtl"]:hover:not([selected="true"]) > .tab-image-left {
    background: url("chrome://global/skin/tabs/tab-right-inact.png") no-repeat;
    background-color: transparent;
  }

  /* Tab, left, after selected, inactive, hover || normal */
  .tabbrowser-tab:hover:not([selected="true"])[afterselected="true"] > .tab-image-left,
  .tabbrowser-tab:not([selected="true"])[afterselected="true"] > .tab-image-left
  {
    background: url("chrome://global/skin/tabs/tab-left-after-selected.png") no-repeat;
    background-color: transparent;
  }


/* Tabs, middle */
  /* Tab, middle, active */
  .tabbrowser-tab > .tab-image-middle {
    background: url("chrome://global/skin/tabs/tab-active-mid.png") repeat-x;
    background-color: transparent;
  }

  /* Tab, middle, inactive */
  .tabbrowser-tab:not([selected="true"]) > .tab-image-middle {
    margin-bottom: 1px;
    background: url("chrome://global/skin/tabs/tab-inact-mid.png") repeat-x;
    background-color: transparent;
  }

  /* Tab, Middle, inactive, hover - (no hover state) */
  .tabbrowser-tab:hover:not([selected="true"]) > .tab-image-middle {
    background: url("chrome://global/skin/tabs/tab-inact-mid.png") repeat-x;
    background-color: transparent;
  }

/* Tabs, right */

  /* Tab, Right, Active */
  .tabbrowser-tab[selected="true"] > .tab-image-right {
    width: 10px;
    margin-bottom: 1px;
    background: url("chrome://global/skin/tabs/tab-right.png") no-repeat;
    background-color: transparent;
  }

  /* Tab, Right, inactive */
  .tabbrowser-tab:not([selected="true"]) > .tab-image-right {
    width: 9px;
    margin-bottom: 1px;
    background: url("chrome://global/skin/tabs/tab-right-inact.png") no-repeat;
    background-color: transparent;
  }

  /* Tab, right (reverse), inactive */
  .tabbrowser-tab[chromedir="rtl"]:not([selected="true"]) > .tab-image-right {
    background: url("chrome://global/skin/tabs/tab-left-inact.png") no-repeat;
    background-color: transparent;
  }

  /* Tab, right, inactive, hover */
  .tabbrowser-tab:hover:not([selected="true"]) > .tab-image-right {
    background: url("chrome://global/skin/tabs/tab-right-inact.png") no-repeat;
    background-color: transparent;
  }

  /* Tab, right (reverse), inactive, hover */
  .tabbrowser-tab[chromedir="rtl"]:hover:not([selected="true"]) > .tab-image-right {
    background: url("chrome://global/skin/tabs/tab-left-inact.png") no-repeat;
    background-color: transparent;
  }

  /* Tab, right, before selected, inactive, Hover || Normal  */
  .tabbrowser-tab:hover:not([selected="true"])[beforeselected="true"] > .tab-image-right,
  .tabbrowser-tab:not([selected="true"])[beforeselected="true"] > .tab-image-right
  {
    background: url("chrome://global/skin/tabs/tab-right-before-selected.png") no-repeat;
    background-color: transparent;
  }

  /* Tab, Right, active, last-tab */ 
  .tabbrowser-tab[selected="true"]:last-child:not([first-tab="true"]) > .tab-image-right {
    width: 16px;
    margin-bottom: 1px;
    background: url("chrome://global/skin/tabs/tab-right-lasttab.png") no-repeat;
    background-color: transparent;
  }

  /* Tab, Right, in-active, last-tab */
  .tabbrowser-tab:not([selected="true"]):last-child:not([first-tab="true"]) > .tab-image-right {
    width: 16px;
    margin-bottom: 1px;
    background: url("chrome://global/skin/tabs/tab-right-inact-lasttab.png") no-repeat;
    background-color: transparent;
  }

/* Tabs, close button */
  /* Tab, Active, middle */
  .tabbrowser-tab > .tab-close-button {
    background-image: url("chrome://global/skin/tabs/tab-active-mid.png");
    background-color: transparent;
  }
  /* Tab, inactive, middle */
  .tabbrowser-tab:not([selected="true"]) > .tab-close-button {
    background-image: url("chrome://global/skin/tabs/tab-inact-mid.png");
    background-color: transparent;
  }

/* BC:  End shadow cap, using new tab button */
.tabbar-newtab-button {
    background-image: url("chrome://global/skin/tabs/tab-lasttab-shadow.png");
    background-repeat: no-repeat;
    background-color: transparent;
}

.tabbrowser-arrowscrollbox > .scrollbutton-up,
.tabbrowser-arrowscrollbox .scrollbutton-down,
.tabbrowser-arrowscrollbox .scrollbutton-down-box,
.tabbrowser-tabs .tabs-alltabs-box,
.tabbrowser-tabs .tabs-alltabs-button {
  height: 28px;
  width: 18px;
  margin: 4px 0 0 0;
  padding: 2px 4px 4px 2px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: top left;
}

/* Left/Up Scroll Button */
.tabbrowser-arrowscrollbox > .scrollbutton-up {
  background-image: url("chrome://global/skin/tabs/tab-arrow-start-bkgnd.png");
  list-style-image: url("chrome://global/skin/tabs/tab-arrow-start.png");
  -moz-image-region: rect(0, 11px, 14px, 0);
}

.tabbrowser-arrowscrollbox:hover > .scrollbutton-up:not([disabled="true"]) {
  background-image: url("chrome://global/skin/tabs/tab-arrow-start-bkgnd-hover.png");
  -moz-image-region: rect(0, 22px, 14px, 11px);
}

/* Down/Right Scroll Button */
.tabbrowser-arrowscrollbox .scrollbutton-down {
  padding: 2px 2px 4px 4px;
  background-image: url("chrome://global/skin/tabs/tab-arrow-end-bkgnd.png");
  list-style-image: url("chrome://global/skin/tabs/tab-arrow-end.png");
  -moz-image-region: rect(0, 11px, 14px, 0);
}

.tabbrowser-arrowscrollbox:hover .scrollbutton-down:not([disabled="true"]) {
  background-image: url("chrome://global/skin/tabs/tab-arrow-end-bkgnd-hover.png");
  -moz-image-region: rect(0, 22px, 14px, 11px);
}

.tabbrowser-arrowscrollbox > .scrollbutton-up[disabled="true"],
.tabbrowser-arrowscrollbox .scrollbutton-down[disabled="true"] {
  -moz-image-region: rect(0, 33px, 14px, 22px);
}

.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled="true"]):hover:active,
.tabbrowser-arrowscrollbox .scrollbutton-down:not([disabled="true"]):hover:active {
  -moz-image-region: rect(0, 44px, 14px, 33px);
}

/**
 * All Tabs Button
 * (from Firefox 2)
 */

.tabs-alltabs-box {
  background-image: url("chrome://global/skin/tabs/alltabs-box-end-bkgnd.png");
  background-repeat: no-repeat;
  -moz-border-radius-topleft: 5px;
}

stack[chromedir="rtl"] > hbox > .tabs-alltabs-box {
  background-image: url("chrome://global/skin/tabs/alltabs-box-start-bkgnd.png");
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 5px;
}

.tabbrowser-tabs[overflow="true"] .tabs-alltabs-box {
  background-image: url("chrome://global/skin/tabs/alltabs-box-overflow-end-bkgnd.png");
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 0px;
}

.tabbrowser-tabs[overflow="true"] stack[chromedir="rtl"] > hbox > .tabs-alltabs-box {
  background-image: url("chrome://global/skin/tabs/alltabs-box-overflow-start-bkgnd.png");
}

.tabs-alltabs-button {
  margin: 6px 1px 0 0;
  border: 0;
}

.tabs-alltabs-button > .toolbarbutton-text {
  display: none;
}

.tabs-alltabs-button > .toolbarbutton-icon {
  -moz-margin-end: 2px;
}

.tabs-alltabs-button > .toolbarbutton-menu-dropmarker {
  width: 5px;
  height: 4px;
}

.tabs-alltabs-button:hover {
  background-image: url("chrome://global/skin/tabs/alltabs-box-end-bkgnd-hover.png");
  background-repeat: no-repeat;
}

stack[chromedir="rtl"] > hbox > .tabs-alltabs-button:hover {
  background-image: url("chrome://global/skin/tabs/alltabs-box-start-bkgnd-hover.png");
}

.tabbrowser-tabs[overflow="true"] .tabs-alltabs-button:hover {
  background-image: url("chrome://global/skin/tabs/alltabs-box-overflow-end-bkgnd-hover.png");
}

.tabbrowser-tabs[overflow="true"] stack[chromedir="rtl"] > hbox > .tabs-alltabs-button:hover {
  background-image: url("chrome://global/skin/tabs/alltabs-box-overflow-start-bkgnd-hover.png");
}

.tabs-alltabs-box-animate {
  margin-top: 2px;
  margin-bottom: 4px;
  width: 18px !important;
  height: 23px !important;
  background-image: url("chrome://global/skin/tabs/alltabs-box-overflow-end-bkgnd-animate.png");
  background-repeat: no-repeat;
  opacity: 0.0;
}

stack[chromedir="rtl"] > hbox > .tabs-alltabs-box-animate {
  background-image: url("chrome://global/skin/tabs/alltabs-box-overflow-start-bkgnd-animate.png");
}

/**
* Tab Drag and Drop
*/

.tab-drop-indicator-bar {
  height: 10px;
  margin-top: -10px;
  position: relative;
  -moz-margin-start: -2px;
}

.tab-drop-indicator-bar[dragging="true"] {
  display: -moz-box;
}

.tab-drop-indicator {
  height: 10px;
  width: 8px;
  margin-bottom: -10px;
  position: relative;
  background: url("chrome://global/skin/tabs/tabDragIndicator.png") 50% 50% no-repeat;
}

/**
 * All Tabs Menupopup 
 */

.alltabs-item > .menu-iconic-left > .menu-iconic-icon {
  width: 16px;
  height: 16px;
  list-style-image: url("chrome://global/skin/tabs/folder-item.png");
  -moz-image-region: rect(0px, 16px, 16px, 0px);
}

.alltabs-item[selected="true"] {
  font-weight: bold;
}

.alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
  list-style-image: url("chrome://global/skin/throbber/Throbber-small.gif");
  opacity: 0.6;
}
