gecko-dev/themes/modern/global/tabcontrol.css

/*** TAB: TOP <tab> ***/

tab { 
  -moz-binding		: url(chrome://global/skin/globalBindings.xml#tab);
  padding			: 0px;
  color				: #1C1D1F;
  margin			: 0px;
}

.tab-image-left {
  background		: url(chrome://global/skin/tab-unselect-left.gif) no-repeat bottom;
  width				: 11px;
  height			: 21px;
}

.tab-image-middle {
  background		: url(chrome://global/skin/tab-unselect-middle.gif) repeat-x bottom;
  min-height: 21px;
}

.tab-image-right {
  background		: url(chrome://global/skin/tab-unselect-right.gif) no-repeat bottom;
  width				: 11px;
  height			: 21px;
}

.tab-text {
  padding			: 3px 0px 3px 0px;
  font-size			: 12px;
  font-family		: charcoal, ms sans serif;
}

tab:hover:active {
  color				: #FEFEFE;
}

tab:hover:active > box > .tab-image-left { 
  background		: url(chrome://global/skin/tab-clicked-left.gif) no-repeat bottom;
}

tab:hover:active > box > .tab-image-middle { 
  background		: url(chrome://global/skin/tab-clicked-middle.gif) repeat-x bottom;
}

tab:hover:active > box > .tab-image-right { 
  background		: url(chrome://global/skin/tab-clicked-right.gif) no-repeat bottom;
}


/* when a tab is selected this is how it should look */
tab[selected="true"], tab:hover:active[selected="true"],
tab[selected="1"], tab:hover:active[selected="1"] {
	color			: #1C1D1F;
}

tab[selected="true"] > box > .tab-image-left,
tab:hover:active[selected="true"] > box > .tab-image-left { 
  background		: url(chrome://global/skin/tab-select-left.gif) no-repeat bottom;
}

tab[selected="true"] > box > .tab-image-middle,
tab:hover:active[selected="true"] > box > .tab-image-middle { 
  background		: url(chrome://global/skin/tab-select-middle.gif) repeat-x bottom;
}

tab[selected="true"] > box > .tab-image-right,
tab:hover:active[selected="true"] > box > .tab-image-right { 
  background		: url(chrome://global/skin/tab-select-right.gif) no-repeat bottom;
}

.tab-border-top-left, .tab-border-top-right {
  background		: url(chrome://global/skin/tab-top-border.gif) repeat-x bottom;
  height			: 2px;
}

.tab-border-top-left-cap {
  background		: url(chrome://global/skin/tab-top-border-leftcap.gif) no-repeat bottom;
  width				: 2px;
  height			: 2px;
}

.tab-border-top-right-cap {
  background		: url(chrome://global/skin/tab-top-border-rightcap.gif) no-repeat bottom;
  width				: 2px;
  height			: 2px;
}

tabbox {
  -moz-binding		: url(chrome://global/skin/globalBindings.xml#tabbox);
  padding			: 0px;
}

    /* top tabs */
tabcontrol[align="vertical"] > tabbox[align="horizontal"] > tab { 
  padding: 0px; 
  margin: 0px;
}

/*** TAB: BOTTOM <tab class="tab-bottom"> ***/
/* Found in editor.xul & editorOverlay.xul 
 * SMALL TABS FOR NOW */

.tab-bottom:hover:active > box > .tab-image-middle > .tab-text {
  color				: #FEFEFE;
}

.tab-bottom > box > .tab-image-left {
  background		: url(chrome://global/skin/tab-bot-unselect-left.gif) no-repeat;
  width				: 11px;
  height			: 19px;
}

.tab-bottom > box > .tab-image-middle {
  background		: url(chrome://global/skin/tab-bot-unselect-middle.gif) repeat-x;
}

.tab-bottom > box > .tab-image-right {
  background		: url(chrome://global/skin/tab-bot-unselect-right.gif) no-repeat;
  width				: 11px;
  height			: 19px;
}

.tab-bottom > box > .tab-image-middle > .tab-text {
  padding			: 4px 0px 1px 0px;
}

.tab-bottom:hover:active > box > .tab-image-left { 
  background		: url(chrome://global/skin/tab-bot-clicked-left.gif) no-repeat;
}

.tab-bottom:hover:active > box > .tab-image-middle { 
  background		: url(chrome://global/skin/tab-bot-clicked-middle.gif) repeat-x;
}

.tab-bottom:hover:active > box > .tab-image-right { 
  background		: url(chrome://global/skin/tab-bot-clicked-right.gif) no-repeat;
}

/* when a tab is selected this is how it should look */

.tab-bottom[selected="true"] > box > .tab-image-left,
.tab-bottom:hover:active[selected="true"] > box > .tab-image-left { 
  background		: url(chrome://global/skin/tab-bot-select-left.gif) no-repeat;
}

.tab-bottom[selected="true"] > box > .tab-image-middle,
.tab-bottom:hover:active[selected="true"] > box > .tab-image-middle { 
  background		: url(chrome://global/skin/tab-bot-select-middle.gif) repeat-x;
}

.tab-bottom[selected="true"] > box > .tab-image-right,
.tab-bottom:hover:active[selected="true"] > box > .tab-image-right { 
  background		: url(chrome://global/skin/tab-bot-select-right.gif) no-repeat;
}

.tabbox-bottom > .tab-border-top-left, .tabbox-bottom > .tab-border-top-right {
  background		: url(chrome://global/skin/tab-bot-border.gif) repeat-x top;
  width				: 2px;
}

.tabbox-bottom > .tab-border-top-left-cap {
  background		: url(chrome://global/skin/tab-bot-border-leftcap.gif) no-repeat top;
  width				: 2px;
  height			: 2px;
}

.tabbox-bottom > .tab-border-top-right-cap {
  background		: url(chrome://global/skin/tab-bot-border-rightcap.gif) no-repeat top;
  width				: 2px;
  height			: 2px;
}

	/* bottom tabs */
tabcontrol[align="vertical"] tabpanel + tabbox[align="horizontal"] tab { 
  border-top: none;
  border-bottom: 1px solid #666666;
  border-left: 1px solid white;
  border-right: 1px solid #666666;
  -moz-border-radius: 0px 0px 8px 8px;
  padding: 1px 5px 3px 5px;
  margin: 1px 2px 1px 2px;
}

	/* left tabs */
tabcontrol[align="horizontal"] tabbox[align="vertical"] tab { 
  border-right: none;
  -moz-border-radius: 8px 0px 0px 8px;
  padding-right: 1px;
  margin: 2px 1px 2px 1px;
}

	/* right tabs */
tabcontrol[align="horizontal"] tabpanel + tabbox[align="vertical"]  tab { 
  border-top: 1px solid white;
  border-bottom: 1px solid #666666;
  border-left: none;
  border-right: 1px solid #666666;
  -moz-border-radius: 0px 8px 8px 0px;
  padding: 3px 5px 1px 5px;
  margin: 2px 1px 2px 1px;
}

tabcontrol { 
  border: none; 
}

/* border on bottom only, no padding (used in search) */
tabpanel.light {
  border: none;
  border-bottom: 1px outset #CCCCCC;
  padding: 0px;
}

tabpanel {
  border-top		: 0px;
  background-color	: #C2D0D0;
  border-left		: 1px solid #313948;
  border-right		: 1px solid #313948;
  border-bottom		: 1px solid #313948;
  padding			: 5px;
}

/* This is horrible CSS style, but is necessary to handle this case */
tabpanel title {
  background-color	: #C2D0D0;
}