From d909959c9789716b990d3eecee2ab529a24e46ae Mon Sep 17 00:00:00 2001
From: piro <piro@599a83e7-65a4-db11-8015-0010dcdd6dc2>
Date: Tue, 24 Mar 2009 13:17:12 +0000
Subject: [PATCH] =?UTF-8?q?*=20=E9=9D=9E=E3=82=A2=E3=82=AF=E3=83=86?=
 =?UTF-8?q?=E3=82=A3=E3=83=96=E6=99=82=E3=81=AB=E3=82=B9=E3=82=BF=E3=82=A4?=
 =?UTF-8?q?=E3=83=AB=E3=82=92=E5=A4=89=E3=81=88=E3=82=8B=20*=20Mac?=
 =?UTF-8?q?=E3=81=A7=E8=A6=8B=E3=81=9F=E7=9B=AE=E3=81=8C=E5=B4=A9=E3=82=8C?=
 =?UTF-8?q?=E3=82=8B=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

git-svn-id: http://www.cozmixng.org/repos/piro/treestyletab/trunk@3864 599a83e7-65a4-db11-8015-0010dcdd6dc2
---
 images/metal-inactive.xcf                     | Bin 0 -> 3510 bytes
 images/metal-selected-inactive.xcf            | Bin 0 -> 3304 bytes
 .../classic/treestyletab/treestyletab.css     |  20 +-
 skin/classic/treestyletab/metal.css           | 335 +++++++++++++-----
 4 files changed, 260 insertions(+), 95 deletions(-)
 create mode 100644 images/metal-inactive.xcf
 create mode 100644 images/metal-selected-inactive.xcf

diff --git a/images/metal-inactive.xcf b/images/metal-inactive.xcf
new file mode 100644
index 0000000000000000000000000000000000000000..505cf4fd03b3b97f56a1f02af447bd0164a3481a
GIT binary patch
literal 3510
zcmd5<O-vg{6rR~x+Ze}$;s$ISw@#u&aG-?<wNz>^T$)}gRpn9=9}L*W5<dxc)o^k}
z)t-CmrD`uhIhaFZfn-}%Q7f4XYpJp?_=HtaI~ZH7nkd3H_HN(X-9bh*f~rOB^S=4s
zdo#1|y?HaU5D3oScR!r=yZymA9|5`!+>Zj#OTd&uV*~CO|B?`7pqGI~;J1K#bs5K9
zf$>)Xy94mrq2RnX;2R1o1!urSpr4X~P<VOH=MF8-1!o332mFEQ#ks{L_kapROMxk`
zd-%0smD&g+de<OKooX|c_q$IQaO%U*eeZN|A>bb2zQDNL&ZyglK3)ih-NA+FSzid}
zFZ%r<U-&pcoc&jmW;r<(*Fh)xH6g+SLf9QxN*5tUCn1(mLN5KnM*wyLV=-`TjZ4A6
zY#0P$1jf}@fID;<fS6lkoQY$QEWlj8)FNA3<jWxAyX?S7CSX2?SDWk5CA@=!fOv$^
zCw!opxJ~e)9-(3@W6T&Q&&o6(oSD&f-bJQ`=^?dCi)mfhGE5bThX`r00nNm1Yz*}X
zIcQ}}3w`jk40AsJh1Uw>Kx&tipmkx(O1jJg#H5-hZ6fXksM8m%j7b@Qc~a)ktaoPd
zlN%#AmOJ28i-3)9M%=DvZAKh()@Fobp;Eg9d8J^0xD9cle;zC(DDG-gxlQ~H^$1xx
z=1<8A>w0x`@;_}_g0}J1b?<%l?cPdqZ{<4-nXfMv<Fxhdf<DMuy(YQ=^&QR6E#A^P
z8U6r)FB6o&h%%CHGr|pywVPG&oyQ*oES4DdPN9tlv<~uV0kyk*&QoxFKT^Abqc5F|
z-$RVUpzx0sByap#@6>I^JnDCdyix2gGSb|5s-nDKbb=}$Tr@NfG>6UolIr+qqf~lY
zv=>DPW&gl&;Dgwj>&1ej0KozF1IqgaCqn6>p;^)#LU5|%qxBM4>;(vJeZS-=VQ~N7
zg?o=QY@a_@`V<KFK|ygSuw;FT6TzcFQiJCzxS-=aEI-y}jcULEz`<Ap92iKm|3}5H
z_;640P1gkn;$J_jgXlpc^EZIp8Jr$-Oz+Tb=ATfH&~AlRS*=m6)vByYYerD2)f)V&
zwP)^U&2ptIlpB?Dxgu0#Y-pKQYUN4=A6Awt1+gIi3j2`e=`PLJck{dO(A_#B3TQvf
zYvz2eFDLKhgj{tex0B0cGg+Et88K_f&@2TOGIBNpg4EcSwk0OX+foNMof1vSTPYz`
z-AZk#4?~@$gsoai)i<r1@(-IG*cdixg2v@U+#0VZ;`pO+nh@fRMC?h-6qBFCtk{S#
z7Nu**&FET`M&-4r5EWDfQCt-snO5aTs{%G6Hf;4pJei2clkr3{nGh3A_0@GSCD6wU
zRglsWJWM)FOKEsOp=nu48?X`5*YekXKUo%H(k^Z+2EQBM1o`jWjX3wLk0FjhYIirP
zUvI73vZLYg&VjqpQa)+39HAaz;bUf`Mwz+0&*|!Q3FMHPdTze`{zvybS3H!|smXE6
zOq}G1_1vO}wBv@2Tm|fULjY_Dws(n(G?-%o!Qh-!!F5jq&v`+c$Lt@%gd?G6{I=@D
z^1AvS<11*c3zu(CU<@^C>>Zoz2dPR;w!!g<yPjSTW?|^;abOlA{O3ZM9lvWWXNVZ4
uydm`z^HQ~bS8-L&`nv_k{F74QT%D{dy1)a3Qdz$`X|p~?9ZI#_!pfhr+#Qwx

literal 0
HcmV?d00001

diff --git a/images/metal-selected-inactive.xcf b/images/metal-selected-inactive.xcf
new file mode 100644
index 0000000000000000000000000000000000000000..ca2e251757af86c4c69af667dabe316b5feb6610
GIT binary patch
literal 3304
zcmd5;O=ufe5Pth3$+DC`tCl6JYSo5<1#ugPP?C~MeQ67&m%4|#7D2XtydYbSrBE9J
zg8Y;o3eBaZhe8gGLl35DWM2v`gi>e^ITTVt0tqBoj&@tpixb<iEp6u8eJ`x&Hl#la
z8FqH&&Ai$7&Ah+OYZFt6nXz0Vrxmh{=tbgQC`7x6C5c`k;*P=7jDd-sAy$cdh{Ie*
zzi#UPEXkdD`fR^8k<MrP^V3>}OpN>z>noLK3)w`eSkN-b&c0lJtXL>cC;BYWKb;><
zC-%O)*CH2XfV+|uI_eTC{E5F;5IR$uN{?xi`NV)2i;S~wMsDjrI;oWt+T_@HwuJa%
zE?3Hy9|A=5Urn~9H57H=B%NVQKFXN#HkI-P#yme!iLWu%xx!cw^%m4g3MK^g^-gQ~
z@iIJKV$6U^+`)Ac%<s?<i9VnJvCxAKeVaqyK{~z_AqM$~MU0qn(I%JtIyw;vgyfUo
zvrWP#TWhK!sm#H^44fh>--MRQ*sHIdX(2t3TUv_k!dnsP3y74KvWNS*O*w>ih5hbi
zq=hj=TAo5S*Y>#r4v<??vhBiKxx;k<kdjidqCniHV!P8kedJ^$C5{C258eL!Tm9Up
zODE=+j-OpRLC^PyYUjM+`yjUzaR6~rf8~mRixg|EHuWyr73m@i)wcZuPCnTfldwHD
zCy|oK8B?T|)1$Dt%?bQi!&DoK{_PRL!(HbDM+hfxhARRejq9ChwRt~A`%TtZT&_iH
ziY0qVHtV$*gwbx%FqUf=uu<17xw)w8%e6>NB`9?xYGeU!frBII1gG2J+9w(W1p`WT
z6k~HiuXAV%bv>$E(4OA9y~Vadr&i1!lS+AH*^HVrojqm@B4vy3Y_VdAI5{4No9FDP
z{kBj@&;SRvXaEmu^j<V0X3MV(7QL@Dp3W3M#8Q*-A`<(fLb|v@pTz#amCMP0k}Hn=
z;s2u5=KmV)ic)^a3cD{U{+&IscsMSzHObfY(xG?WA4zqmB(^H~q6ZJ3JTrfx+Fhll
z(sgj^?9bP4>qfV6k4YW7N51;)&g#Zic#B%wUp@BY9~+IP88+9L9D3ukEB6{yyfvmo
zhvshGZ<4;wJh9<#>YG$sQsW~Rbd(uts%rc<H8y<S`YsI@d3WxnH5|d{8a#dZE?}%O
zDey}92V<j2D@bB%-sgtCy!_|-CSj+RyklQs?$XV=5jLnLdBX=XpUj=FhO07Lmwch*
z;Lr!Da0;dJbaq8iDwY0aB_-maYJ$Zz?YCFP?g5lptO;CuVokvQf1H_de2B>H9>eby
zr+}D$0g}$lz&v+yTfn+>E9^M^f7pCo+5Y_g;YYvNYwX6Odsto?N-Rfg2hV7_l*RDv
itPQ>oa;pt~S2+b2xgr2kZGykF+JaZnru{POVDkZf0K3Bg

literal 0
HcmV?d00001

diff --git a/platform/Darwin/skin/classic/treestyletab/treestyletab.css b/platform/Darwin/skin/classic/treestyletab/treestyletab.css
index 4aab9cd8..f4d32116 100644
--- a/platform/Darwin/skin/classic/treestyletab/treestyletab.css
+++ b/platform/Darwin/skin/classic/treestyletab/treestyletab.css
@@ -1,22 +1,22 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-tabbrowser[treestyletab-tabbar-position="left"]:not([treestyletab-tabbar-fixed="true"]) .treestyletab-splitter {
+tabbrowser[treestyletab-style~="square"][treestyletab-tabbar-position="left"]:not([treestyletab-tabbar-fixed="true"]) .treestyletab-splitter {
 	border-right: 1px solid ThreeDShadow !important;
 	-moz-border-right-colors: ThreeDShadow !important;
 }
-tabbrowser[treestyletab-tabbar-position="right"]:not([treestyletab-tabbar-fixed="true"]) .treestyletab-splitter {
+tabbrowser[treestyletab-style~="square"][treestyletab-tabbar-position="right"]:not([treestyletab-tabbar-fixed="true"]) .treestyletab-splitter {
 	border-left: 1px solid ThreeDShadow !important;
 	-moz-border-left-colors: ThreeDShadow !important;
 }
 
-#main-window:not([active="true"]) tabbrowser[treestyletab-mode="vertical"] .tabbrowser-tab > .tab-image-middle,
-#main-window:not([active="true"]) tabbrowser[treestyletab-mode="vertical"] .tabbrowser-tab > .tab-close-button,
-#main-window:not([active="true"]) tabbrowser[treestyletab-mode="vertical"] .tabbrowser-tab[selected="true"] > .tab-image-middle,
-#main-window:not([active="true"]) tabbrowser[treestyletab-mode="vertical"] .tabbrowser-tab[selected="true"] > .tab-close-button,
-#main-window:not([active="true"]) tabbrowser[treestyletab-tabbar-position="bottom"] .tabbrowser-tab > .tab-image-middle,
-#main-window:not([active="true"]) tabbrowser[treestyletab-tabbar-position="bottom"] .tabbrowser-tab > .tab-close-button,
-#main-window:not([active="true"]) tabbrowser[treestyletab-tabbar-position="bottom"] .tabbrowser-tab[selected="true"] > .tab-image-middle,
-#main-window:not([active="true"]) tabbrowser[treestyletab-tabbar-position="bottom"] .tabbrowser-tab[selected="true"] > .tab-close-button {
+#main-window:not([active="true"]) tabbrowser[treestyletab-style~="square"][treestyletab-mode="vertical"] .tabbrowser-tab > .tab-image-middle,
+#main-window:not([active="true"]) tabbrowser[treestyletab-style~="square"][treestyletab-mode="vertical"] .tabbrowser-tab > .tab-close-button,
+#main-window:not([active="true"]) tabbrowser[treestyletab-style~="square"][treestyletab-mode="vertical"] .tabbrowser-tab[selected="true"] > .tab-image-middle,
+#main-window:not([active="true"]) tabbrowser[treestyletab-style~="square"][treestyletab-mode="vertical"] .tabbrowser-tab[selected="true"] > .tab-close-button,
+#main-window:not([active="true"]) tabbrowser[treestyletab-style~="square"][treestyletab-tabbar-position="bottom"] .tabbrowser-tab > .tab-image-middle,
+#main-window:not([active="true"]) tabbrowser[treestyletab-style~="square"][treestyletab-tabbar-position="bottom"] .tabbrowser-tab > .tab-close-button,
+#main-window:not([active="true"]) tabbrowser[treestyletab-style~="square"][treestyletab-tabbar-position="bottom"] .tabbrowser-tab[selected="true"] > .tab-image-middle,
+#main-window:not([active="true"]) tabbrowser[treestyletab-style~="square"][treestyletab-tabbar-position="bottom"] .tabbrowser-tab[selected="true"] > .tab-close-button {
 	height: auto;
 	margin: 0 !important;
 	padding: 0 !important;
diff --git a/skin/classic/treestyletab/metal.css b/skin/classic/treestyletab/metal.css
index 46b378cf..7f8ebe26 100644
--- a/skin/classic/treestyletab/metal.css
+++ b/skin/classic/treestyletab/metal.css
@@ -1,171 +1,336 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-tabbrowser[treestyletab-style="metal"][treestyletab-twisty-style][treestyletab-mode="vertical"] .treestyletab-twisty-container {
-	position: relative;
-	margin: 0 6px 0 -6px;
-}
-tabbrowser[treestyletab-style="metal"][treestyletab-twisty-style][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] .treestyletab-twisty-container {
-	margin: 0 -16px 0 16px;
-}
 
-
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tabs * {
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tabs * {
 	width: 100% !important;
 }
 
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabs-stack {
-	width: 10em !important;
-	padding: 5px 0 0 !important;
-	border-style: solid !important;
-	border-color: #444 !important;
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabs-stack {
+	background:#797979 url("metal/shadow-active-l.png") repeat-y top right !important;
+	border: 1px solid #444444 !important;
 	border-width: 1px 0 0 !important;
-	background:#797979 url("metal/shadow-l.png") repeat-y top right !important;
+	padding: 5px 0 0 !important;
 }
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] .tabs-stack {
-	background:#797979 url("metal/shadow-r.png") repeat-y top left !important;
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabs-stack {
+	background:#797979 url("metal/shadow-active-r.png") repeat-y top left !important;
+}
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabs-stack {
+	background:#acacac url("metal/shadow-inactive-l.png") repeat-y top right !important;
+}
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabs-stack {
+	background:#acacac url("metal/shadow-inactive-r.png") repeat-y top left !important;
 }
 
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabs-container {
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabs-container {
 	padding: 0 !important;
 }
 
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .treestyletab-splitter {
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .treestyletab-splitter {
 	border-style: solid !important;
 	border-color: #4e4e4e !important;
 	border-width: 0 1px 0 0 !important;
 	background: #b3b2b3 !important;
 }
-tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="right"] .treestyletab-splitter {
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"]
+  .treestyletab-splitter {
+	border-color: #f4f4f4 !important;
+	background: #e4e4e4 !important;
+}
+tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="right"]
+  .treestyletab-splitter {
 	border-width: 0 0 0 1px !important;
 }
 
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tab .tab-icon {
+
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab .tab-icon {
 	margin: -2px 0 0 !important;
 	padding: 0 !important;
 }
 
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tab .tab-icon .tab-icon-image {
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab .tab-icon .tab-icon-image {
 	width: 16px !important;
 	height: 16px !important;
+	margin: 0 0 0 6px !important;
+}
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab .tab-icon .tab-icon-image {
+	margin: 0 6px 0 0 !important;
 }
 
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tab .tab-text {
+tabbrowser[treestyletab-style="metal"][treestyletab-twisty-style][treestyletab-mode="vertical"]
+  .treestyletab-twisty-container {
+	position: relative;
+	margin: 0 6px 0 -6px;
+}
+tabbrowser[treestyletab-style="metal"][treestyletab-twisty-style][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .treestyletab-twisty-container {
+	margin: 0 -12px 0 12px;
+}
+
+
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab .tab-text {
 	margin: 0 !important;
 	padding: 3px 4px 4px !important;
 	text-align: center !important;
 }
 
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tab,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tab:hover,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tab[selected="true"],
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tab[selected="true"]:hover {
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab:hover,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"],
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"]:hover {
 	background: transparent none !important;
 	border: 2px solid transparent !important;
 	color: black !important;
 	height: 30px !important;
-	margin-bottom: -2px !important;
 	margin-top: -2px !important;
+	margin-right: 0;
+	margin-bottom: -2px !important;
+	margin-left: 0;
 	padding: 0 !important;
 	-moz-border-top-colors: transparent transparent !important;
 	-moz-border-right-colors: transparent transparent !important;
 	-moz-border-bottom-colors: transparent transparent !important;
 	-moz-border-left-colors: transparent transparent !important;
+	-moz-border-radius: 0 !important;
 }
 
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"]) .tabbrowser-tab:not([treestyletab-drop-position]),
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"]) .tabbrowser-tab[selected="true"]:not([treestyletab-drop-position]) {
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"])
+  .tabbrowser-tab:not([treestyletab-drop-position]),
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"])
+  .tabbrowser-tab[selected="true"]:not([treestyletab-drop-position]) {
 	border-right: 0 none !important;
 	-moz-border-right-colors: none !important;
 }
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] .tabbrowser-tab:not([treestyletab-drop-position]),
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] .tabbrowser-tab[selected="true"]:not([treestyletab-drop-position]) {
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab:not([treestyletab-drop-position]),
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"]:not([treestyletab-drop-position]) {
 	border-left: 0 none !important;
 	-moz-border-left-colors: none !important;
 }
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"]) .tabbrowser-tab:not([treestyletab-drop-position]) .tab-image-right,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"]) .tabbrowser-tab[selected="true"]:not([treestyletab-drop-position]) .tab-image-right,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] .tabbrowser-tab:not([treestyletab-drop-position]) .tab-image-left,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] .tabbrowser-tab[selected="true"]:not([treestyletab-drop-position]) .tab-image-left {
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"])
+  .tabbrowser-tab:not([treestyletab-drop-position]) .tab-image-right,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"])
+  .tabbrowser-tab[selected="true"]:not([treestyletab-drop-position]) .tab-image-right,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab:not([treestyletab-drop-position]) .tab-image-left,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"]:not([treestyletab-drop-position]) .tab-image-left {
 	width: 10px !important;
 }
 
 
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tab .tab-image-middle,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tab:hover .tab-image-middle,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tab .tab-close-button,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tab:hover .tab-close-button {
-	background: url("metal/tab-middle.png") repeat-x top left !important;
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab .tab-image-middle,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab:hover .tab-image-middle,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab .tab-close-button,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab:hover .tab-close-button {
+	background: url("metal/tab-active-middle.png") repeat-x top left !important;
 	margin: 0 !important;
 }
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab .tab-image-middle,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab:hover .tab-image-middle,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab .tab-close-button,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab:hover .tab-close-button {
+	background-image: url("metal/tab-inactive-middle.png") !important;
+}
 
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tab .tab-image-left,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tab:hover .tab-image-left {
-	background: url("metal/tab-left-l.png") no-repeat top left !important;
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab .tab-image-left,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab:hover .tab-image-left {
+	background: url("metal/tab-active-left-l.png") no-repeat top left !important;
 	width: 10px !important;
 }
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab .tab-image-left,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab:hover .tab-image-left {
+	background-image: url("metal/tab-inactive-left-l.png") !important;
+}
 
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tab .tab-image-right,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tab:hover .tab-image-right {
-	background: url("metal/tab-right-l.png") no-repeat top right !important;
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab .tab-image-right,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab:hover .tab-image-right {
+	background: url("metal/tab-active-right-l.png") no-repeat top right !important;
 	width: 8px !important;
 }
-
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tab[selected="true"] .tab-image-middle,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tab[selected="true"]:hover .tab-image-middle,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tab[selected="true"] .tab-close-button,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tab[selected="true"]:hover .tab-close-button,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tab[selected="true"] .tab-image-right,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tab[selected="true"]:hover .tab-image-right {
-	background: url("metal/tab-middle-selected.png") repeat-x top left !important;
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab .tab-image-right,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab:hover .tab-image-right {
+	background-image: url("metal/tab-inactive-right-l.png")  !important;
 }
 
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tab[selected="true"] .tab-image-left,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tab[selected="true"]:hover .tab-image-left {
-	background: url("metal/tab-left-selected-l.png") no-repeat top left !important;
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"] .tab-image-middle,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"]:hover .tab-image-middle,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"] .tab-close-button,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"]:hover .tab-close-button,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"] .tab-image-right,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"]:hover .tab-image-right {
+	background: url("metal/tab-active-middle-selected.png") repeat-x top left !important;
+}
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"] .tab-image-middle,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"]:hover .tab-image-middle,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"] .tab-close-button,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"]:hover .tab-close-button,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"] .tab-image-right,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"]:hover .tab-image-right {
+	background-image: url("metal/tab-inactive-middle-selected.png") !important;
+}
+
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"] .tab-image-left,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"]:hover .tab-image-left {
+	background: url("metal/tab-active-left-selected-l.png") no-repeat top left !important;
+}
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"] .tab-image-left,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"]:hover .tab-image-left {
+	background-image: url("metal/tab-inactive-left-selected-l.png") !important;
 }
 
 
 
 
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] .tabbrowser-tab .tab-image-middle,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] .tabbrowser-tab:hover .tab-image-middle,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] .tabbrowser-tab .tab-close-button,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] .tabbrowser-tab:hover .tab-close-button {
-	background: url("metal/tab-middle.png") repeat-x top left !important;
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab .tab-image-middle,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab:hover .tab-image-middle,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab .tab-close-button,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab:hover .tab-close-button {
+	background: url("metal/tab-active-middle.png") repeat-x top left !important;
+}
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab .tab-image-middle,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab:hover .tab-image-middle,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab .tab-close-button,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab:hover .tab-close-button {
+	background-image: url("metal/tab-inactive-middle.png") !important;
 }
 
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] .tabbrowser-tab .tab-image-left,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] .tabbrowser-tab:hover .tab-image-left {
-	background: url("metal/tab-left-r.png") no-repeat top left !important;
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab .tab-image-left,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab:hover .tab-image-left {
+	background: url("metal/tab-active-left-r.png") no-repeat top left !important;
 	width: 8px !important;
 }
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab .tab-image-left,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab:hover .tab-image-left {
+	background-image: url("metal/tab-inactive-left-r.png")  !important;
+}
 
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] .tabbrowser-tab .tab-image-right,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] .tabbrowser-tab:hover .tab-image-right {
-	background: url("metal/tab-right-r.png") no-repeat top right !important;
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab .tab-image-right,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab:hover .tab-image-right {
+	background: url("metal/tab-active-right-r.png") no-repeat top right !important;
 	width: 10px !important;
 }
-
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] .tabbrowser-tab[selected="true"] .tab-image-middle,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] .tabbrowser-tab[selected="true"]:hover .tab-image-middle,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] .tabbrowser-tab[selected="true"] .tab-close-button,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] .tabbrowser-tab[selected="true"]:hover .tab-close-button,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] .tabbrowser-tab[selected="true"] .tab-image-left,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] .tabbrowser-tab[selected="true"]:hover .tab-image-left {
-	background: url("metal/tab-middle-selected.png") repeat-x top left !important;
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab .tab-image-right,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab:hover .tab-image-right {
+	background-image: url("metal/tab-inactive-right-r.png") !important;
 }
 
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] .tabbrowser-tab[selected="true"] .tab-image-right,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] .tabbrowser-tab[selected="true"]:hover .tab-image-right {
-	background: url("metal/tab-right-selected-r.png") no-repeat top right !important;
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"] .tab-image-middle,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"]:hover .tab-image-middle,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"] .tab-close-button,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"]:hover .tab-close-button,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"] .tab-image-left,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"]:hover .tab-image-left {
+	background: url("metal/tab-active-middle-selected.png") repeat-x top left !important;
+}
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"] .tab-image-middle,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"]:hover .tab-image-middle,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"] .tab-close-button,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"]:hover .tab-close-button,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"] .tab-image-left,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"]:hover .tab-image-left {
+	background-image: url("metal/tab-inactive-middle-selected.png") !important;
+}
+
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"] .tab-image-right,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"]:hover .tab-image-right {
+	background: url("metal/tab-active-right-selected-r.png") no-repeat top right !important;
+}
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"] .tab-image-right,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"]:hover .tab-image-right {
+	background-image: url("metal/tab-inactive-right-selected-r.png") !important;
 }
 
 
 
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabs-bottom,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabs-left,
-tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="bottom"] .tabs-bottom,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tab-text-shadow, /* Mac OS X */
-tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="bottom"] .tab-text-shadow /* Mac OS X */ {
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabs-bottom,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabs-left,
+tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="bottom"]
+  .tabs-bottom,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tab-text-shadow, /* Mac OS X */
+tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="bottom"]
+  .tab-text-shadow /* Mac OS X */ {
 	display: none !important;
 }