Bug 1497041 - Add dynamic CSS for tags to stylesheet. r=darktrojan,aceman
authorJorg K <jorgk@jorgk.com>
Wed, 06 Mar 2019 00:46:17 +0100
changeset 34378 d06c0a180c45696b04c1655bea008f092292d10e
parent 34377 69f66abef59f87e3f951768707b2f8f1562b872c
child 34379 33baca79596d084f20a58dbf017f8bf4757cdeb1
push id389
push userclokep@gmail.com
push dateMon, 18 Mar 2019 19:01:53 +0000
reviewersdarktrojan, aceman
bugs1497041
Bug 1497041 - Add dynamic CSS for tags to stylesheet. r=darktrojan,aceman
mail/base/content/SearchDialog.js
mail/base/content/SearchDialog.xul
mail/base/content/glodaFacet.js
mail/base/content/glodaFacetView.js
mail/base/content/mailWidgets.js
mail/base/content/mailWindowOverlay.js
mail/base/content/messenger.xul
mail/base/content/msgMail3PaneWindow.js
mail/base/content/multimessageview.js
mail/base/modules/TagUtils.jsm
mail/base/modules/Windows8WindowFrameColor.jsm
mail/base/modules/moz.build
mail/components/preferences/display.js
mail/themes/linux/jar.mn
mail/themes/linux/mail/mailWindow1.css
mail/themes/linux/mail/searchDialog.css
mail/themes/linux/mail/tagColors.css
mail/themes/osx/jar.mn
mail/themes/osx/mail/mailWindow1.css
mail/themes/osx/mail/searchDialog.css
mail/themes/osx/mail/tagColors.css
mail/themes/shared/jar.inc.mn
mail/themes/shared/mail/tagColors.css
mail/themes/windows/jar.mn
mail/themes/windows/mail/mailWindow1.css
mail/themes/windows/mail/messenger.css
mail/themes/windows/mail/searchDialog.css
mail/themes/windows/mail/tagColors.css
mailnews/base/public/nsIMsgTagService.idl
mailnews/base/src/nsMsgDBView.cpp
mailnews/base/src/nsMsgDBView.h
mailnews/base/src/nsMsgTagService.cpp
--- a/mail/base/content/SearchDialog.js
+++ b/mail/base/content/SearchDialog.js
@@ -10,16 +10,17 @@
 /* import-globals-from messageDisplay.js */
 /* import-globals-from threadPane.js */
 
 "use strict";
 
 ChromeUtils.import("resource:///modules/MailUtils.jsm");
 ChromeUtils.import("resource://gre/modules/PluralForm.jsm");
 ChromeUtils.import("resource://gre/modules/Services.jsm");
+ChromeUtils.import("resource:///modules/TagUtils.jsm");
 
 var gCurrentFolder;
 
 var gFolderDisplay;
 // Although we don't display messages, we have a message display object to
 //  simplify our code.  It's just always disabled.
 var gMessageDisplay;
 
@@ -214,16 +215,17 @@ SearchFolderDisplayWidget.prototype = {
     }
 
     gStatusFeedback.showStatusString(statusMsg);
   },
 };
 
 
 function searchOnLoad() {
+  TagUtils.loadTagsIntoCSS(document);
   initializeSearchWidgets();
   initializeSearchWindowWidgets();
   messenger = Cc["@mozilla.org/messenger;1"]
                 .createInstance(Ci.nsIMessenger);
 
   gSearchBundle = document.getElementById("bundle_search");
   gSearchStopButton.setAttribute("label", gSearchBundle.getString("labelForSearchButton"));
   gSearchStopButton.setAttribute("accesskey", gSearchBundle.getString("labelForSearchButton.accesskey"));
--- a/mail/base/content/SearchDialog.xul
+++ b/mail/base/content/SearchDialog.xul
@@ -2,16 +2,17 @@
 
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 <?xml-stylesheet href="chrome://messenger/content/bindings.css" type="text/css"?>
 <?xml-stylesheet href="chrome://messenger/skin/searchDialog.css" type="text/css"?>
 <?xml-stylesheet href="chrome://messenger/skin/folderPane.css" type="text/css"?>
+<?xml-stylesheet href="chrome://messenger/skin/tagColors.css" type="text/css"?>
 <?xml-stylesheet href="chrome://messenger/skin/folderMenus.css" type="text/css"?>
 
 <!DOCTYPE window [
   <!ENTITY % SearchDialogDTD SYSTEM "chrome://messenger/locale/SearchDialog.dtd">
   %SearchDialogDTD;
   <!ENTITY % searchTermDTD SYSTEM "chrome://messenger/locale/searchTermOverlay.dtd">
   %searchTermDTD;
 ]>
--- a/mail/base/content/glodaFacet.js
+++ b/mail/base/content/glodaFacet.js
@@ -1,17 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* global HTMLElement, DateFacetVis, FacetContext, glodaFacetStrings, FacetUtils, PluralForm */
 /* global logException, Gloda */
 
 ChromeUtils.import("resource:///modules/MailServices.jsm");
-ChromeUtils.import("resource:///modules/Windows8WindowFrameColor.jsm");
+ChromeUtils.import("resource:///modules/TagUtils.jsm");
 
 class MozFacetDate extends HTMLElement {
   get build() {
     return this.buildFunc;
   }
 
   get brushItems() {
     return (items) => this.vis.hoverItems(items);
@@ -1374,17 +1374,17 @@ class MozFacetResultMessage extends HTML
 
     // - Tags
     let tagsNode = this.tags;
     if ("tags" in message && message.tags.length) {
       for (let tag of message.tags) {
         let tagNode = document.createElement("span");
         let color = MailServices.tags.getColorForKey(tag.key);
         let textColor = "black";
-        if (!Windows8WindowFrameColor.isColorContrastEnough(color)) {
+        if (!TagUtils.isColorContrastEnough(color)) {
           textColor = "white";
         }
         tagNode.setAttribute("class", "message-tag");
         tagNode.setAttribute("style", "color: " + textColor + "; background-color: " + color + ";");
         tagNode.textContent = tag.tag;
         tagsNode.appendChild(tagNode);
       }
     }
--- a/mail/base/content/glodaFacetView.js
+++ b/mail/base/content/glodaFacetView.js
@@ -12,17 +12,17 @@
  *  get it wrong and it may eventually want to migrate.
  */
 
 var { Log4Moz } = ChromeUtils.import("resource:///modules/gloda/log4moz.js", null);
 ChromeUtils.import("resource:///modules/StringBundle.js");
 ChromeUtils.import("resource://gre/modules/PluralForm.jsm");
 ChromeUtils.import("resource://gre/modules/Services.jsm");
 ChromeUtils.import("resource:///modules/MailServices.jsm");
-ChromeUtils.import("resource:///modules/Windows8WindowFrameColor.jsm");
+ChromeUtils.import("resource:///modules/TagUtils.jsm");
 var {
   logObject,
   logException,
 } = ChromeUtils.import("resource:///modules/errUtils.js", null);
 
 var { Gloda } = ChromeUtils.import("resource:///modules/gloda/public.js", null);
 var {
   FacetDriver,
@@ -94,17 +94,17 @@ const QueryExplanation = {
           spanify(involvesLabel, "explanation-query-involves");
         } else if (constraint[1].attributeName == "tag") {
           const tagLabel = glodaFacetStrings.get(
             "glodaFacetView.constraints.query.tagged.label");
           const tag = constraint[2];
           const tagNode = document.createElement("span");
           const color = MailServices.tags.getColorForKey(tag.key);
           let textColor = "black";
-          if (!Windows8WindowFrameColor.isColorContrastEnough(color)) {
+          if (!TagUtils.isColorContrastEnough(color)) {
             textColor = "white";
           }
           tagNode.setAttribute("class", "message-tag");
           tagNode.setAttribute("style", "color: " + textColor + "; background-color: " + color + ";");
           tagNode.textContent = tag.tag;
           spanify(tagLabel, "explanation-query-tagged");
           this.node.appendChild(tagNode);
         }
--- a/mail/base/content/mailWidgets.js
+++ b/mail/base/content/mailWidgets.js
@@ -9,17 +9,17 @@
 /* global onClickEmailStar */
 /* global onClickEmailPresence */
 /* global gFolderDisplay */
 
 ChromeUtils.import("resource://gre/modules/Services.jsm");
 ChromeUtils.import("resource:///modules/MailUtils.jsm");
 ChromeUtils.import("resource:///modules/MailServices.jsm");
 ChromeUtils.import("resource:///modules/DBViewWrapper.jsm");
-ChromeUtils.import("resource:///modules/Windows8WindowFrameColor.jsm");
+ChromeUtils.import("resource:///modules/TagUtils.jsm");
 
 class MozMailHeaderfield extends MozXULElement {
   connectedCallback() {
     this.setAttribute("context", "copyPopup");
     this.classList.add("headerValue");
   }
 
   set headerValue(val) {
@@ -69,17 +69,17 @@ class MozMailHeaderfieldTags extends Moz
         // and go to the next one.
         tagName = MailServices.tags.getTagForKey(tagsArray[i]);
       } catch (ex) {
         continue;
       }
 
       let color = MailServices.tags.getColorForKey(tagsArray[i]);
       let textColor = "black";
-      if (!Windows8WindowFrameColor.isColorContrastEnough(color)) {
+      if (!TagUtils.isColorContrastEnough(color)) {
         textColor = "white";
       }
 
       // now create a label for the tag name, and set the color
       const label = document.createElement("label");
       label.setAttribute("value", tagName);
       label.className = "tagvalue";
       label.setAttribute("style", "color: " + textColor + "; background-color: " + color + ";");
--- a/mail/base/content/mailWindowOverlay.js
+++ b/mail/base/content/mailWindowOverlay.js
@@ -19,16 +19,17 @@ ChromeUtils.import("resource:///modules/
 var { GlodaSyntheticView } = ChromeUtils.import("resource:///modules/gloda/dbview.js", null);
 ChromeUtils.import("resource:///modules/MailConsts.jsm");
 ChromeUtils.import("resource:///modules/MailServices.jsm");
 ChromeUtils.import("resource:///modules/MailUtils.jsm");
 ChromeUtils.import("resource://gre/modules/Services.jsm");
 ChromeUtils.import("resource://gre/modules/PluralForm.jsm");
 ChromeUtils.import("resource://gre/modules/AppConstants.jsm");
 ChromeUtils.import("resource://gre/modules/AddonManager.jsm");
+ChromeUtils.import("resource:///modules/TagUtils.jsm");
 
 ChromeUtils.defineModuleGetter(this, "BrowserToolboxProcess", "resource://devtools/client/framework/ToolboxProcess.jsm");
 ChromeUtils.defineModuleGetter(this, "ScratchpadManager", "resource://devtools/client/scratchpad/scratchpad-manager.jsm");
 ChromeUtils.defineModuleGetter(this, "ExtensionParent", "resource://gre/modules/ExtensionParent.jsm");
 ChromeUtils.defineModuleGetter(this, "ExtensionSupport", "resource:///modules/ExtensionSupport.jsm");
 Object.defineProperty(this, "HUDService", {
   get() {
     let { devtools } = ChromeUtils.import("resource://devtools/shared/Loader.jsm", null);
@@ -928,18 +929,21 @@ function AddTag() {
 }
 
 function ManageTags() {
   openOptionsDialog("paneDisplay", "tagTab");
 }
 
 function AddTagCallback(name, color) {
   MailServices.tags.addTag(name, color, "");
+  let key = MailServices.tags.getKeyForTag(name);
+  TagUtils.addTagToAllDocumentSheets(key, color);
+
   try {
-    ToggleMessageTag(MailServices.tags.getKeyForTag(name), true);
+    ToggleMessageTag(key, true);
   } catch (ex) {
     return false;
   }
   return true;
 }
 
 function SetMessageTagLabel(menuitem, index, name) {
   // if a <key> is defined for this tag, use its key as the accesskey
--- a/mail/base/content/messenger.xul
+++ b/mail/base/content/messenger.xul
@@ -1,16 +1,17 @@
 <?xml version="1.0"?>
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 #filter substitution
 #define MAIN_WINDOW
 <?xml-stylesheet href="chrome://messenger/skin/mailWindow1.css" type="text/css"?>
+<?xml-stylesheet href="chrome://messenger/skin/tagColors.css" type="text/css"?>
 <?xml-stylesheet href="chrome://gloda/content/glodacomplete.css" type="text/css"?>
 <?xml-stylesheet href="chrome://messenger/content/bindings.css" type="text/css"?>
 <?xml-stylesheet href="chrome://messenger/content/tabmail.css" type="text/css"?>
 <?xml-stylesheet href="chrome://messenger/skin/tabmail.css" type="text/css"?>
 <?xml-stylesheet href="chrome://messenger/skin/quickFilterBar.css" type="text/css"?>
 <?xml-stylesheet href="chrome://messenger/skin/editContactPanel.css" type="text/css"?>
 <?xml-stylesheet href="chrome://messenger/content/chat/chat.css" type="text/css"?>
 <?xml-stylesheet href="chrome://messenger/skin/chat.css" type="text/css"?>
--- a/mail/base/content/msgMail3PaneWindow.js
+++ b/mail/base/content/msgMail3PaneWindow.js
@@ -31,16 +31,17 @@ ChromeUtils.import("resource:///modules/
 ChromeUtils.import("resource:///modules/MailServices.jsm");
 ChromeUtils.import("resource:///modules/msgDBCacheManager.js");
 ChromeUtils.import("resource:///modules/SessionStoreManager.jsm");
 ChromeUtils.import("resource:///modules/SummaryFrameManager.jsm");
 ChromeUtils.import("resource:///modules/MailUtils.jsm");
 ChromeUtils.import("resource://gre/modules/Services.jsm");
 ChromeUtils.import("resource://gre/modules/AppConstants.jsm");
 ChromeUtils.import("resource://gre/modules/Color.jsm");
+ChromeUtils.import("resource:///modules/TagUtils.jsm");
 
 XPCOMUtils.defineLazyModuleGetters(this, {
   LightweightThemeManager: "resource://gre/modules/LightweightThemeManager.jsm",
 });
 
 XPCOMUtils.defineLazyGetter(this, "PopupNotifications", function() {
   let tmp = {};
   ChromeUtils.import("resource:///modules/GlobalPopupNotifications.jsm", tmp);
@@ -419,16 +420,18 @@ function AutoConfigWizard(okCallback) {
 
   NewMailAccount(msgWindow, okCallback);
 }
 
 /**
  * Called on startup to initialize various parts of the main window
  */
 function OnLoadMessenger() {
+  TagUtils.loadTagsIntoCSS(document);
+
   migrateMailnews();
   // Rig up our TabsInTitlebar early so that we can catch any resize events.
   TabsInTitlebar.init();
   // update the pane config before we exit onload otherwise the user may see a flicker if we poke the document
   // in delayedOnLoadMessenger...
   UpdateMailPaneConfig(false);
   CompactTheme.init();
 
--- a/mail/base/content/multimessageview.js
+++ b/mail/base/content/multimessageview.js
@@ -5,17 +5,17 @@
 ChromeUtils.import("resource://gre/modules/XPCOMUtils.jsm");
 var { Gloda } = ChromeUtils.import("resource:///modules/gloda/gloda.js", null);
 var {
   mimeMsgToContentSnippetAndMeta,
 } = ChromeUtils.import("resource:///modules/gloda/connotent.js", null);
 var { MsgHdrToMimeMessage } = ChromeUtils.import("resource:///modules/gloda/mimemsg.js", null);
 ChromeUtils.import("resource:///modules/DisplayNameUtils.jsm");
 ChromeUtils.import("resource:///modules/MailServices.jsm");
-ChromeUtils.import("resource:///modules/Windows8WindowFrameColor.jsm");
+ChromeUtils.import("resource:///modules/TagUtils.jsm");
 var {
   PluralStringFormatter,
   makeFriendlyDateAgo,
 } = ChromeUtils.import("resource:///modules/templateUtils.js", null);
 
 var gMessenger = Cc["@mozilla.org/messenger;1"]
                    .createInstance(Ci.nsIMessenger);
 
@@ -357,17 +357,17 @@ MultiMessageSummary.prototype = {
       return a.key.localeCompare(b.key) ||
              a.ordinal.localeCompare(b.ordinal);
     });
 
     for (let tag of sortedTags) {
       let tagNode = document.createElement("span");
       let color = MailServices.tags.getColorForKey(tag.key);
       let textColor = "black";
-      if (!Windows8WindowFrameColor.isColorContrastEnough(color)) {
+      if (!TagUtils.isColorContrastEnough(color)) {
         textColor = "white";
       }
 
       tagNode.className = "tag";
       tagNode.setAttribute("style", "color: " + textColor + "; background-color: " + color + ";");
       tagNode.dataset.tag = tag.tag;
       tagNode.textContent = tag.tag;
       aTagsNode.appendChild(tagNode);
new file mode 100644
--- /dev/null
+++ b/mail/base/modules/TagUtils.jsm
@@ -0,0 +1,112 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+ChromeUtils.import("resource:///modules/MailServices.jsm");
+ChromeUtils.import("resource://gre/modules/Services.jsm");
+ChromeUtils.import("resource://gre/modules/Color.jsm");
+
+var EXPORTED_SYMBOLS = ["TagUtils"];
+
+var TagUtils = {
+  loadTagsIntoCSS,
+  addTagToAllDocumentSheets,
+  isColorContrastEnough,
+  getColor,
+};
+
+function loadTagsIntoCSS(aDocument) {
+  let tagSheet = findTagColorSheet(aDocument);
+  let tagArray = MailServices.tags.getAllTags({});
+  for (let tag of tagArray) {
+    // tag.key is the internal key, like "$label1" for "Important".
+    // For user defined keys with non-ASCII characters, key is
+    // the MUTF-7 encoded name.
+    addTagToSheet(tag.key, tag.color, tagSheet);
+  }
+}
+
+function addTagToAllDocumentSheets(aKey, aColor) {
+  let windowList = Services.wm.getEnumerator("mail:3pane", true);
+  while (windowList.hasMoreElements()) {
+    let nextWin = windowList.getNext();
+    addTagToSheet(aKey, aColor, findTagColorSheet(nextWin.document));
+  }
+
+  windowList = Services.wm.getEnumerator("mailnews:search", true);
+  while (windowList.hasMoreElements()) {
+    let nextWin = windowList.getNext();
+    addTagToSheet(aKey, aColor, findTagColorSheet(nextWin.document));
+  }
+}
+
+function addTagToSheet(aKey, aColor, aSheet) {
+  if (!aSheet)
+    return;
+
+  // Add rules to sheet.
+  let selector = MailServices.tags.getSelectorForKey(aKey);
+  let ruleString1 = "treechildren::-moz-tree-row(" + selector +
+                    ", selected, focus) { background-color: " + aColor + " !important; }";
+  let ruleString2 = "treechildren::-moz-tree-cell-text(" + selector +
+                    ") { color: " + aColor + "; }";
+  let textColor = "black";
+  if (!isColorContrastEnough(aColor)) {
+    textColor = "white";
+  }
+  let ruleString3 = "treechildren::-moz-tree-cell-text(" + selector +
+                    ", selected, focus) { color: " + textColor + "; }";
+  try {
+    aSheet.insertRule(ruleString1, aSheet.cssRules.length);
+    aSheet.insertRule(ruleString2, aSheet.cssRules.length);
+    aSheet.insertRule(ruleString3, aSheet.cssRules.length);
+  } catch (ex) {
+    aSheet.ownerNode.addEventListener("load",
+                                      () => addTagToSheet(aKey, aColor, aSheet),
+                                      { once: true });
+  }
+}
+
+function findTagColorSheet(aDocument) {
+  const cssUri = "chrome://messenger/skin/tagColors.css";
+  let tagSheet = null;
+  for (let sheet of aDocument.styleSheets) {
+    if (sheet.href == cssUri) {
+      tagSheet = sheet;
+      break;
+    }
+  }
+  if (!tagSheet) {
+    Cu.reportError("TagUtils.findTagColorSheet: tagColors.css not found");
+  }
+  return tagSheet;
+}
+
+// Here comes some stuff that was originally in Windows8WindowFrameColor.jsm.
+
+/* Checks if black writing on 'aColor' background has enough contrast */
+function isColorContrastEnough(aColor) {
+  let bgColor = getColor(aColor);
+  return new Color(...bgColor).isContrastRatioAcceptable(new Color(0, 0, 0));
+}
+
+function getColor(customizationColorHex, colorizationColorBalance) {
+  // Zero-pad the number just to make sure that it is 8 digits.
+  customizationColorHex = ("00000000" + customizationColorHex).substr(-8);
+  let customizationColorArray = customizationColorHex.match(/../g);
+  let [, fgR, fgG, fgB] = customizationColorArray.map(val => parseInt(val, 16));
+
+  if (colorizationColorBalance == undefined) {
+    colorizationColorBalance = 78;
+  }
+
+  // Window frame base color when Color Intensity is at 0, see bug 1004576.
+  let frameBaseColor = 217;
+  let alpha = colorizationColorBalance / 100;
+
+  // Alpha-blend the foreground color with the frame base color.
+  let r = Math.round(fgR * alpha + frameBaseColor * (1 - alpha));
+  let g = Math.round(fgG * alpha + frameBaseColor * (1 - alpha));
+  let b = Math.round(fgB * alpha + frameBaseColor * (1 - alpha));
+  return [r, g, b];
+}
--- a/mail/base/modules/Windows8WindowFrameColor.jsm
+++ b/mail/base/modules/Windows8WindowFrameColor.jsm
@@ -1,20 +1,18 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 this.EXPORTED_SYMBOLS = ["Windows8WindowFrameColor"];
 
-if ("@mozilla.org/windows-registry-key;1" in Cc) {
-  ChromeUtils.import("resource://gre/modules/WindowsRegistry.jsm");
-}
-ChromeUtils.import("resource://gre/modules/Color.jsm");
+ChromeUtils.import("resource://gre/modules/WindowsRegistry.jsm");
+ChromeUtils.import("resource:///modules/TagUtils.jsm");
 
 var Windows8WindowFrameColor = {
   _windowFrameColor: null,
 
   get() {
     if (this._windowFrameColor)
       return this._windowFrameColor;
 
@@ -27,39 +25,12 @@ var Windows8WindowFrameColor = {
       return [158, 158, 158];
     }
 
     // The color returned from the Registry is in decimal form.
     let customizationColorHex = customizationColor.toString(16);
     let colorizationColorBalance = WindowsRegistry.readRegKey(HKCU, dwmKey,
                                                               "ColorizationColorBalance");
 
-    return this._windowFrameColor = this.getColor(customizationColorHex,
-                                                  colorizationColorBalance);
-  },
-
-  /* Checks if black writing on 'aColor' background has enough contrast */
-  isColorContrastEnough(aColor) {
-    let bgColor = this.getColor(aColor);
-    return new Color(...bgColor).isContrastRatioAcceptable(new Color(0, 0, 0));
-  },
-
-  getColor(customizationColorHex, colorizationColorBalance) {
-    // Zero-pad the number just to make sure that it is 8 digits.
-    customizationColorHex = ("00000000" + customizationColorHex).substr(-8);
-    let customizationColorArray = customizationColorHex.match(/../g);
-    let [, fgR, fgG, fgB] = customizationColorArray.map(val => parseInt(val, 16));
-
-    if (colorizationColorBalance == undefined) {
-      colorizationColorBalance = 78;
-    }
-
-    // Window frame base color when Color Intensity is at 0, see bug 1004576.
-    let frameBaseColor = 217;
-    let alpha = colorizationColorBalance / 100;
-
-    // Alpha-blend the foreground color with the frame base color.
-    let r = Math.round(fgR * alpha + frameBaseColor * (1 - alpha));
-    let g = Math.round(fgG * alpha + frameBaseColor * (1 - alpha));
-    let b = Math.round(fgB * alpha + frameBaseColor * (1 - alpha));
-    return [r, g, b];
+    return this._windowFrameColor = TagUtils.getColor(customizationColorHex,
+                                                         colorizationColorBalance);
   },
 };
--- a/mail/base/modules/moz.build
+++ b/mail/base/modules/moz.build
@@ -15,16 +15,17 @@ EXTRA_JS_MODULES += [
     'MailUtils.js',
     'MailUtils.jsm',
     'MailViewManager.jsm',
     'MsgHdrSyntheticView.jsm',
     'QuickFilterManager.jsm',
     'SearchSpec.jsm',
     'SessionStoreManager.jsm',
     'SummaryFrameManager.jsm',
+    'TagUtils.jsm',
     'TBDistCustomizer.jsm',
     'Windows8WindowFrameColor.jsm',
 ]
 
 FINAL_TARGET_FILES.modules += [
     'ThemeVariableMap.jsm'
 ]
 
--- a/mail/components/preferences/display.js
+++ b/mail/components/preferences/display.js
@@ -1,16 +1,17 @@
 /* -*- Mode: JavaScript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* import-globals-from ../../../../toolkit/mozapps/preferences/fontbuilder.js */
 /* import-globals-from preferences.js */
 /* import-globals-from subdialogs.js */
+ChromeUtils.import("resource:///modules/TagUtils.jsm");
 
 var gDisplayPane = {
   mInitialized: false,
   mTagListBox:  null,
 
   init() {
     if (!(("arguments" in window) && window.arguments[1])) {
       // If no tab was specified, select the last used tab.
@@ -294,27 +295,37 @@ var gDisplayPane = {
     if (!delayTextbox.disabled && aFocusTextBox)
       delayTextbox.focus();
   },
 };
 
 function addTagCallback(aName, aColor) {
   MailServices.tags.addTag(aName, aColor, "");
 
-  var item = gDisplayPane.appendTagItem(aName, MailServices.tags.getKeyForTag(aName), aColor);
+  // Add to style sheet.
+  let key = MailServices.tags.getKeyForTag(aName);
+  TagUtils.addTagToAllDocumentSheets(key, aColor);
+
+  var item = gDisplayPane.appendTagItem(aName, key, aColor);
   var tagListBox = document.getElementById("tagList");
   tagListBox.ensureElementIsVisible(item);
   tagListBox.selectItem(item);
   tagListBox.focus();
 }
 
 function editTagCallback() {
   // update the values of the selected item
-  var tagListEl = document.getElementById("tagList");
-  var index = tagListEl.selectedIndex;
-  if (index >= 0) {
-    var tagElToEdit = tagListEl.getItemAtIndex(index);
-    var key = tagElToEdit.getAttribute("value");
-    // update the color and label elements
-    tagElToEdit.setAttribute("label", MailServices.tags.getTagForKey(key));
-    tagElToEdit.style.color = MailServices.tags.getColorForKey(key);
-  }
+  let tagListEl = document.getElementById("tagList");
+  let index = tagListEl.selectedIndex;
+  if (index < 0)
+    return;
+
+  let tagElToEdit = tagListEl.getItemAtIndex(index);
+  let key = tagElToEdit.getAttribute("value");
+  let color = MailServices.tags.getColorForKey(key);
+  // update the color and label elements
+  tagElToEdit.setAttribute("label", MailServices.tags.getTagForKey(key));
+  tagElToEdit.style.color = color;
+
+  // Add to style sheet. We simply add the new color, the rule is added at the
+  // end and will overrule the previous rule.
+  TagUtils.addTagToAllDocumentSheets(key, color);
 }
--- a/mail/themes/linux/jar.mn
+++ b/mail/themes/linux/jar.mn
@@ -30,17 +30,16 @@ classic.jar:
   skin/classic/messenger/messageHeader.css                    (mail/messageHeader.css)
   skin/classic/messenger/messageIcons.css                     (mail/messageIcons.css)
   skin/classic/messenger/messageQuotes.css                    (mail/messageQuotes.css)
   skin/classic/messenger/messenger.css                        (mail/messenger.css)
   skin/classic/messenger/numberbox.css                        (mail/numberbox.css)
   skin/classic/messenger/attachmentList.css                   (mail/attachmentList.css)
   skin/classic/messenger/imageFilters.svg                     (mail/imageFilters.svg)
   skin/classic/messenger/mailWindow1.css                      (mail/mailWindow1.css)
-  skin/classic/messenger/tagColors.css                        (mail/tagColors.css)
   skin/classic/messenger/messageWindow.css                    (mail/messageWindow.css)
   skin/classic/messenger/searchBox.css                        (mail/searchBox.css)
   skin/classic/messenger/junkMail.css                         (mail/junkMail.css)
   skin/classic/messenger/folderMenus.css                      (mail/folderMenus.css)
   skin/classic/messenger/folderPane.css                       (mail/folderPane.css)
   skin/classic/messenger/subscribe.css                        (mail/subscribe.css)
   skin/classic/messenger/virtualFolderListDialog.css          (mail/virtualFolderListDialog.css)
   skin/classic/messenger/searchDialog.css                     (mail/searchDialog.css)
--- a/mail/themes/linux/mail/mailWindow1.css
+++ b/mail/themes/linux/mail/mailWindow1.css
@@ -7,17 +7,16 @@
 /* ===== mailWindow1.css ================================================
   == Styles for the main Mail window in the default layout scheme.
   ======================================================================= */
 
 @import url("chrome://messenger/skin/");
 @import url("chrome://messenger/skin/primaryToolbar.css");
 @import url("chrome://messenger/skin/folderMenus.css");
 @import url("chrome://messenger/skin/folderPane.css");
-@import url("chrome://messenger/skin/tagColors.css");
 @import url("chrome://messenger/skin/messageIcons.css");
 @import url("chrome://messenger/skin/shared/mailWindow1.css");
 
 menu > #folderLocationPopup > menu > .menu-iconic-left,
 menu > #folderLocationPopup > menuitem > .menu-iconic-left {
   padding-inline-start: 2px;
 }
 
--- a/mail/themes/linux/mail/searchDialog.css
+++ b/mail/themes/linux/mail/searchDialog.css
@@ -2,17 +2,16 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* ===== searchDialog.css ===============================================
   == Styles for the Mail Search dialog.
   ======================================================================= */
 
 @import url("chrome://messenger/skin/");
-@import url("chrome://messenger/skin/tagColors.css");
 @import url("chrome://messenger/skin/messageIcons.css");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 #searchTerms  {
   margin: 8px 6px 0;
 }
 
deleted file mode 100644
--- a/mail/themes/linux/mail/tagColors.css
+++ /dev/null
@@ -1,725 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-
-/* ::::: thread labels decoration ::::: */
-
-/* There are 10x7 color definitions (size of the color picker used)
-   times 2 (2 style definitions for each color) +  2 general black
-   and white color definitions.
-   The color definitions can be in the following formats:
-     color: red;
-     color: #FF0000;
-     color: rgb(128, 0, 0);
-*/
-
-treechildren::-moz-tree-cell-text(lc-FFFFFF), .lc-FFFFFF:not([_moz-menuactive]) {
-  color: #FFFFFF;
-}
-treechildren::-moz-tree-row(lc-FFFFFF, selected, focus), .blc-FFFFFF {
-  background-color: #FFFFFF !important;
-}
-.blc-FFFFFF {
-  border-color: #FFFFFF;
-}
-
-treechildren::-moz-tree-cell-text(lc-CCCCCC), .lc-CCCCCC:not([_moz-menuactive]) {
-  color: #CCCCCC;
-}
-treechildren::-moz-tree-row(lc-CCCCCC, selected, focus), .blc-CCCCCC {
-  background-color: #CCCCCC !important;
-}
-.blc-CCCCCC {
-  border-color: #CCCCCC;
-}
-
-treechildren::-moz-tree-cell-text(lc-C0C0C0), .lc-C0C0C0:not([_moz-menuactive]) {
-  color: #C0C0C0;
-}
-treechildren::-moz-tree-row(lc-C0C0C0, selected, focus), .blc-C0C0C0 {
-  background-color: #C0C0C0 !important;
-}
-.blc-C0C0C0 {
-  border-color: #C0C0C0;
-}
-
-treechildren::-moz-tree-cell-text(lc-999999), .lc-999999:not([_moz-menuactive]) {
-  color: #999999;
-}
-treechildren::-moz-tree-row(lc-999999, selected, focus), .blc-999999 {
-  background-color: #999999 !important;
-}
-.blc-999999 {
-  border-color: #999999;
-}
-
-treechildren::-moz-tree-cell-text(lc-666666), .lc-666666:not([_moz-menuactive]) {
-  color: #666666;
-}
-treechildren::-moz-tree-row(lc-666666, selected, focus), .blc-666666 {
-  background-color: #666666 !important;
-}
-.blc-666666 {
-  border-color: #666666;
-}
-
-treechildren::-moz-tree-cell-text(lc-333333), .lc-333333:not([_moz-menuactive]) {
-  color: #333333;
-}
-treechildren::-moz-tree-row(lc-333333, selected, focus), .blc-333333 {
-  background-color: #333333 !important;
-}
-.blc-333333 {
-  border-color: #333333;
-}
-
-treechildren::-moz-tree-cell-text(lc-000000), .lc-000000:not([_moz-menuactive]) {
-  color: #000000;
-}
-treechildren::-moz-tree-row(lc-000000, selected, focus), .blc-000000 {
-  /* our assumed color is #111111 and !important is needed to override it */
-  color: #FFFFFF !important;
-  text-shadow: 0 1px 0 rgba(46,52,54,0.4) !important; /* Tango Alumninum 6 */
-  background-color: #000000 !important;
-}
-.blc-000000 {
-  border-color: #000000;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFCCCC), .lc-FFCCCC:not([_moz-menuactive]) {
-  color: #FFCCCC;
-}
-treechildren::-moz-tree-row(lc-FFCCCC, selected, focus), .blc-FFCCCC {
-  background-color: #FFCCCC !important;
-}
-.blc-FFCCCC {
-  border-color: #FFCCCC;
-}
-
-treechildren::-moz-tree-cell-text(lc-FF6666), .lc-FF6666:not([_moz-menuactive]) {
-  color: #FF6666;
-}
-treechildren::-moz-tree-row(lc-FF6666, selected, focus), .blc-FF6666 {
-  background-color: #FF6666 !important;
-}
-.blc-FF6666 {
-  border-color: #FF6666;
-}
-
-treechildren::-moz-tree-cell-text(lc-FF0000), .lc-FF0000:not([_moz-menuactive]) {
-  color: #FF0000;
-}
-treechildren::-moz-tree-row(lc-FF0000, selected, focus), .blc-FF0000 {
-  background-color: #FF0000 !important;
-}
-.blc-FF0000 {
-  border-color: #FF0000;
-}
-
-treechildren::-moz-tree-cell-text(lc-CC0000), .lc-CC0000:not([_moz-menuactive]) {
-  color: #CC0000;
-}
-treechildren::-moz-tree-row(lc-CC0000, selected, focus), .blc-CC0000 {
-  background-color: #CC0000 !important;
-}
-.blc-CC0000 {
-  border-color: #CC0000;
-}
-
-treechildren::-moz-tree-cell-text(lc-990000), .lc-990000:not([_moz-menuactive]) {
-  color: #990000;
-}
-treechildren::-moz-tree-row(lc-990000, selected, focus), .blc-990000 {
-  background-color: #990000 !important;
-}
-.blc-990000 {
-  border-color: #990000;
-}
-
-treechildren::-moz-tree-cell-text(lc-660000), .lc-660000:not([_moz-menuactive]) {
-  color: #660000;
-}
-treechildren::-moz-tree-row(lc-660000, selected, focus), .blc-660000 {
-  background-color: #660000 !important;
-}
-.blc-660000 {
-  border-color: #660000;
-}
-
-treechildren::-moz-tree-cell-text(lc-330000), .lc-330000:not([_moz-menuactive]) {
-  color: #330000;
-}
-treechildren::-moz-tree-row(lc-330000, selected, focus), .blc-330000 {
-  background-color: #330000 !important;
-}
-.blc-330000 {
-  border-color: #330000;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFCC99), .lc-FFCC99:not([_moz-menuactive]) {
-  color: #FFCC99;
-}
-treechildren::-moz-tree-row(lc-FFCC99, selected, focus), .blc-FFCC99 {
-  background-color: #FFCC99 !important;
-}
-.blc-FFCC99 {
-  border-color: #FFCC99;
-}
-
-treechildren::-moz-tree-cell-text(lc-FF9966), .lc-FF9966:not([_moz-menuactive]) {
-  color: #FF9966;
-}
-treechildren::-moz-tree-row(lc-FF9966, selected, focus), .blc-FF9966 {
-  background-color: #FF9966 !important;
-}
-.blc-FF9966 {
-  border-color: #FF9966;
-}
-
-treechildren::-moz-tree-cell-text(lc-FF9900), .lc-FF9900:not([_moz-menuactive]) {
-  color: #FF9900;
-}
-treechildren::-moz-tree-row(lc-FF9900, selected, focus), .blc-FF9900 {
-  background-color: #FF9900 !important;
-}
-.blc-FF9900 {
-  border-color: #FF9900;
-}
-
-treechildren::-moz-tree-cell-text(lc-FF6600), .lc-FF6600:not([_moz-menuactive]) {
-  color: #FF6600;
-}
-treechildren::-moz-tree-row(lc-FF6600, selected, focus), .blc-FF6600 {
-  background-color: #FF6600 !important;
-}
-.blc-FF6600 {
-  border-color: #FF6600;
-}
-
-treechildren::-moz-tree-cell-text(lc-CC6600), .lc-CC6600:not([_moz-menuactive]) {
-  color: #CC6600;
-}
-treechildren::-moz-tree-row(lc-CC6600, selected, focus), .blc-CC6600 {
-  background-color: #CC6600 !important;
-}
-.blc-CC6600 {
-  border-color: #CC6600;
-}
-
-treechildren::-moz-tree-cell-text(lc-993300), .lc-993300:not([_moz-menuactive]) {
-  color: #993300;
-}
-treechildren::-moz-tree-row(lc-993300, selected, focus), .blc-993300 {
-  background-color: #993300 !important;
-}
-.blc-993300 {
-  border-color: #993300;
-}
-
-treechildren::-moz-tree-cell-text(lc-663300), .lc-663300:not([_moz-menuactive]) {
-  color: #663300;
-}
-treechildren::-moz-tree-row(lc-663300, selected, focus), .blc-663300 {
-  background-color: #663300 !important;
-}
-.blc-663300 {
-  border-color: #663300;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFFF99), .lc-FFFF99:not([_moz-menuactive]) {
-  color: #FFFF99;
-}
-treechildren::-moz-tree-row(lc-FFFF99, selected, focus), .blc-FFFF99 {
-  background-color: #FFFF99 !important;
-}
-.blc-FFFF99 {
-  border-color: #FFFF99;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFFF66), .lc-FFFF66:not([_moz-menuactive]) {
-  color: #FFFF66;
-}
-treechildren::-moz-tree-row(lc-FFFF66, selected, focus), .blc-FFFF66 {
-  background-color: #FFFF66 !important;
-}
-.blc-FFFF66 {
-  border-color: #FFFF66;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFCC66), .lc-FFCC66:not([_moz-menuactive]) {
-  color: #FFCC66;
-}
-treechildren::-moz-tree-row(lc-FFCC66, selected, focus), .blc-FFCC66 {
-  background-color: #FFCC66 !important;
-}
-.blc-FFCC66 {
-  border-color: #FFCC66;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFCC33), .lc-FFCC33:not([_moz-menuactive]) {
-  color: #FFCC33;
-}
-treechildren::-moz-tree-row(lc-FFCC33, selected, focus), .blc-FFCC33 {
-  background-color: #FFCC33 !important;
-}
-.blc-FFCC33 {
-  border-color: #FFCC33;
-}
-
-treechildren::-moz-tree-cell-text(lc-CC9933), .lc-CC9933:not([_moz-menuactive]) {
-  color: #CC9933;
-}
-treechildren::-moz-tree-row(lc-CC9933, selected, focus), .blc-CC9933 {
-  background-color: #CC9933 !important;
-}
-.blc-CC9933 {
-  border-color: #CC9933;
-}
-
-treechildren::-moz-tree-cell-text(lc-996633), .lc-996633:not([_moz-menuactive]) {
-  color: #996633;
-}
-treechildren::-moz-tree-row(lc-996633, selected, focus), .blc-996633 {
-  background-color: #996633 !important;
-}
-.blc-996633 {
-  border-color: #996633;
-}
-
-treechildren::-moz-tree-cell-text(lc-663333), .lc-663333:not([_moz-menuactive]) {
-  color: #663333;
-}
-treechildren::-moz-tree-row(lc-663333, selected, focus), .blc-663333 {
-  background-color: #663333 !important;
-}
-.blc-663333 {
-  border-color: #663333;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFFFCC), .lc-FFFFCC:not([_moz-menuactive]) {
-  color: #FFFFCC;
-}
-treechildren::-moz-tree-row(lc-FFFFCC, selected, focus), .blc-FFFFCC {
-  background-color: #FFFFCC !important;
-}
-.blc-FFFFCC {
-  border-color: #FFFFCC;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFFF33), .lc-FFFF33:not([_moz-menuactive]) {
-  color: #FFFF33;
-}
-treechildren::-moz-tree-row(lc-FFFF33, selected, focus), .blc-FFFF33 {
-  background-color: #FFFF33 !important;
-}
-.blc-FFFF33 {
-  border-color: #FFFF33;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFFF00), .lc-FFFF00:not([_moz-menuactive]) {
-  color: #FFFF00;
-}
-treechildren::-moz-tree-row(lc-FFFF00, selected, focus), .blc-FFFF00 {
-  background-color: #FFFF00 !important;
-}
-.blc-FFFF00 {
-  border-color: #FFFF00;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFCC00), .lc-FFCC00:not([_moz-menuactive]) {
-  color: #FFCC00;
-}
-treechildren::-moz-tree-row(lc-FFCC00, selected, focus), .blc-FFCC00 {
-  background-color: #FFCC00 !important;
-}
-.blc-FFCC00 {
-  border-color: #FFCC00;
-}
-
-treechildren::-moz-tree-cell-text(lc-999900), .lc-999900:not([_moz-menuactive]) {
-  color: #999900;
-}
-treechildren::-moz-tree-row(lc-999900, selected, focus), .blc-999900 {
-  background-color: #999900 !important;
-}
-.blc-999900 {
-  border-color: #999900;
-}
-
-treechildren::-moz-tree-cell-text(lc-666600), .lc-666600:not([_moz-menuactive]) {
-  color: #666600;
-}
-treechildren::-moz-tree-row(lc-666600, selected, focus), .blc-666600 {
-  background-color: #666600 !important;
-}
-.blc-666600 {
-  border-color: #666600;
-}
-
-treechildren::-moz-tree-cell-text(lc-333300), .lc-333300:not([_moz-menuactive]) {
-  color: #333300;
-}
-treechildren::-moz-tree-row(lc-333300, selected, focus), .blc-333300 {
-  background-color: #333300 !important;
-}
-.blc-333300 {
-  border-color: #333300;
-}
-
-treechildren::-moz-tree-cell-text(lc-99FF99), .lc-99FF99:not([_moz-menuactive]) {
-  color: #99FF99;
-}
-treechildren::-moz-tree-row(lc-99FF99, selected, focus), .blc-99FF99 {
-  background-color: #99FF99 !important;
-}
-.blc-99FF99 {
-  border-color: #99FF99;
-}
-
-treechildren::-moz-tree-cell-text(lc-66FF99), .lc-66FF99:not([_moz-menuactive]) {
-  color: #66FF99;
-}
-treechildren::-moz-tree-row(lc-66FF99, selected, focus), .blc-66FF99 {
-  background-color: #66FF99 !important;
-}
-.blc-66FF99 {
-  border-color: #66FF99;
-}
-
-treechildren::-moz-tree-cell-text(lc-33FF33), .lc-33FF33:not([_moz-menuactive]) {
-  color: #33FF33;
-}
-treechildren::-moz-tree-row(lc-33FF33, selected, focus), .blc-33FF33 {
-  background-color: #33FF33 !important;
-}
-.blc-33FF33 {
-  border-color: #33FF33;
-}
-
-treechildren::-moz-tree-cell-text(lc-33CC00), .lc-33CC00:not([_moz-menuactive]) {
-  color: #33CC00;
-}
-treechildren::-moz-tree-row(lc-33CC00, selected, focus), .blc-33CC00 {
-  background-color: #33CC00 !important;
-}
-.blc-33CC00 {
-  border-color: #33CC00;
-}
-
-treechildren::-moz-tree-cell-text(lc-009900), .lc-009900:not([_moz-menuactive]) {
-  color: #009900;
-}
-treechildren::-moz-tree-row(lc-009900, selected, focus), .blc-009900 {
-  background-color: #009900 !important;
-}
-.blc-009900 {
-  border-color: #009900;
-}
-
-treechildren::-moz-tree-cell-text(lc-006600), .lc-006600:not([_moz-menuactive]) {
-  color: #006600;
-}
-treechildren::-moz-tree-row(lc-006600, selected, focus), .blc-006600 {
-  background-color: #006600 !important;
-}
-.blc-006600 {
-  border-color: #006600;
-}
-
-treechildren::-moz-tree-cell-text(lc-003300), .lc-003300:not([_moz-menuactive]) {
-  color: #003300;
-}
-treechildren::-moz-tree-row(lc-003300, selected, focus), .blc-003300 {
-  background-color: #003300 !important;
-}
-.blc-003300 {
-  border-color: #003300;
-}
-
-treechildren::-moz-tree-cell-text(lc-99FFFF), .lc-99FFFF:not([_moz-menuactive]) {
-  color: #99FFFF;
-}
-treechildren::-moz-tree-row(lc-99FFFF, selected, focus), .blc-99FFFF {
-  background-color: #99FFFF !important;
-}
-.blc-99FFFF {
-  border-color: #99FFFF;
-}
-
-treechildren::-moz-tree-cell-text(lc-33FFFF), .lc-33FFFF:not([_moz-menuactive]) {
-  color: #33FFFF;
-}
-treechildren::-moz-tree-row(lc-33FFFF, selected, focus), .blc-33FFFF {
-  background-color: #33FFFF !important;
-}
-.blc-33FFFF {
-  border-color: #33FFFF;
-}
-
-treechildren::-moz-tree-cell-text(lc-66CCCC), .lc-66CCCC:not([_moz-menuactive]) {
-  color: #66CCCC;
-}
-treechildren::-moz-tree-row(lc-66CCCC, selected, focus), .blc-66CCCC {
-  background-color: #66CCCC !important;
-}
-.blc-66CCCC {
-  border-color: #66CCCC;
-}
-
-treechildren::-moz-tree-cell-text(lc-00CCCC), .lc-00CCCC:not([_moz-menuactive]) {
-  color: #00CCCC;
-}
-treechildren::-moz-tree-row(lc-00CCCC, selected, focus), .blc-00CCCC {
-  background-color: #00CCCC !important;
-}
-.blc-00CCCC {
-  border-color: #00CCCC;
-}
-
-treechildren::-moz-tree-cell-text(lc-339999), .lc-339999:not([_moz-menuactive]) {
-  color: #339999;
-}
-treechildren::-moz-tree-row(lc-339999, selected, focus), .blc-339999 {
-  background-color: #339999 !important;
-}
-.blc-339999 {
-  border-color: #339999;
-}
-
-treechildren::-moz-tree-cell-text(lc-336666), .lc-336666:not([_moz-menuactive]) {
-  color: #336666;
-}
-treechildren::-moz-tree-row(lc-336666, selected, focus), .blc-336666 {
-  background-color: #336666 !important;
-}
-.blc-336666 {
-  border-color: #336666;
-}
-
-treechildren::-moz-tree-cell-text(lc-003333), .lc-003333:not([_moz-menuactive]) {
-  color: #003333;
-}
-treechildren::-moz-tree-row(lc-003333, selected, focus), .blc-003333 {
-  background-color: #003333 !important;
-}
-.blc-003333 {
-  border-color: #003333;
-}
-
-treechildren::-moz-tree-cell-text(lc-CCFFFF), .lc-CCFFFF:not([_moz-menuactive]) {
-  color: #CCFFFF;
-}
-treechildren::-moz-tree-row(lc-CCFFFF, selected, focus), .blc-CCFFFF {
-  background-color: #CCFFFF !important;
-}
-.blc-CCFFFF {
-  border-color: #CCFFFF;
-}
-
-treechildren::-moz-tree-cell-text(lc-66FFFF), .lc-66FFFF:not([_moz-menuactive]) {
-  color: #66FFFF;
-}
-treechildren::-moz-tree-row(lc-66FFFF, selected, focus), .blc-66FFFF {
-  background-color: #66FFFF !important;
-}
-.blc-66FFFF {
-  border-color: #66FFFF;
-}
-
-treechildren::-moz-tree-cell-text(lc-33CCFF), .lc-33CCFF:not([_moz-menuactive]) {
-  color: #33CCFF;
-}
-treechildren::-moz-tree-row(lc-33CCFF, selected, focus), .blc-33CCFF {
-  background-color: #33CCFF !important;
-}
-.blc-33CCFF {
-  border-color: #33CCFF;
-}
-
-treechildren::-moz-tree-cell-text(lc-3366FF), .lc-3366FF:not([_moz-menuactive]) {
-  color: #3366FF;
-}
-treechildren::-moz-tree-row(lc-3366FF, selected, focus), .blc-3366FF {
-  background-color: #3366FF !important;
-}
-.blc-3366FF {
-  border-color: #3366FF;
-}
-
-treechildren::-moz-tree-cell-text(lc-3333FF), .lc-3333FF:not([_moz-menuactive]) {
-  color: #3333FF;
-}
-treechildren::-moz-tree-row(lc-3333FF, selected, focus), .blc-3333FF {
-  background-color: #3333FF !important;
-}
-.blc-3333FF {
-  border-color: #3333FF;
-}
-
-treechildren::-moz-tree-cell-text(lc-000099), .lc-000099:not([_moz-menuactive]) {
-  color: #000099;
-}
-treechildren::-moz-tree-row(lc-000099, selected, focus), .blc-000099 {
-  background-color: #000099 !important;
-}
-.blc-000099 {
-  border-color: #000099;
-}
-
-treechildren::-moz-tree-cell-text(lc-000066), .lc-000066:not([_moz-menuactive]) {
-  color: #000066;
-}
-treechildren::-moz-tree-row(lc-000066, selected, focus), .blc-000066 {
-  background-color: #000066 !important;
-}
-.blc-000066 {
-  border-color: #000066;
-}
-
-treechildren::-moz-tree-cell-text(lc-CCCCFF), .lc-CCCCFF:not([_moz-menuactive]) {
-  color: #CCCCFF;
-}
-treechildren::-moz-tree-row(lc-CCCCFF, selected, focus), .blc-CCCCFF {
-  background-color: #CCCCFF !important;
-}
-.blc-CCCCFF {
-  border-color: #CCCCFF;
-}
-
-treechildren::-moz-tree-cell-text(lc-9999FF), .lc-9999FF:not([_moz-menuactive]) {
-  color: #9999FF;
-}
-treechildren::-moz-tree-row(lc-9999FF, selected, focus), .blc-9999FF {
-  background-color: #9999FF !important;
-}
-.blc-9999FF {
-  border-color: #9999FF;
-}
-
-treechildren::-moz-tree-cell-text(lc-6666CC), .lc-6666CC:not([_moz-menuactive]) {
-  color: #6666CC;
-}
-treechildren::-moz-tree-row(lc-6666CC, selected, focus), .blc-6666CC {
-  background-color: #6666CC !important;
-}
-.blc-6666CC {
-  border-color: #6666CC;
-}
-
-treechildren::-moz-tree-cell-text(lc-6633FF), .lc-6633FF:not([_moz-menuactive]) {
-  color: #6633FF;
-}
-treechildren::-moz-tree-row(lc-6633FF, selected, focus), .blc-6633FF {
-  background-color: #6633FF !important;
-}
-.blc-6633FF {
-  border-color: #6633FF;
-}
-
-treechildren::-moz-tree-cell-text(lc-6600CC), .lc-6600CC:not([_moz-menuactive]) {
-  color: #6600CC;
-}
-treechildren::-moz-tree-row(lc-6600CC, selected, focus), .blc-6600CC {
-  background-color: #6600CC !important;
-}
-.blc-6600CC {
-  border-color: #6600CC;
-}
-
-treechildren::-moz-tree-cell-text(lc-333399), .lc-333399:not([_moz-menuactive]) {
-  color: #333399;
-}
-treechildren::-moz-tree-row(lc-333399, selected, focus), .blc-333399 {
-  background-color: #333399 !important;
-}
-.blc-333399 {
-  border-color: #333399;
-}
-
-treechildren::-moz-tree-cell-text(lc-330099), .lc-330099:not([_moz-menuactive]) {
-  color: #330099;
-}
-treechildren::-moz-tree-row(lc-330099, selected, focus), .blc-330099 {
-  background-color: #330099 !important;
-}
-.blc-330099 {
-  border-color: #330099;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFCCFF), .lc-FFCCFF:not([_moz-menuactive]) {
-  color: #FFCCFF;
-}
-treechildren::-moz-tree-row(lc-FFCCFF, selected, focus), .blc-FFCCFF {
-  background-color: #FFCCFF !important;
-}
-.blc-FFCCFF {
-  border-color: #FFCCFF;
-}
-
-treechildren::-moz-tree-cell-text(lc-FF99FF), .lc-FF99FF:not([_moz-menuactive]) {
-  color: #FF99FF;
-}
-treechildren::-moz-tree-row(lc-FF99FF, selected, focus), .blc-FF99FF {
-  background-color: #FF99FF !important;
-}
-.blc-FF99FF {
-  border-color: #FF99FF;
-}
-
-treechildren::-moz-tree-cell-text(lc-CC66CC), .lc-CC66CC:not([_moz-menuactive]) {
-  color: #CC66CC;
-}
-treechildren::-moz-tree-row(lc-CC66CC, selected, focus), .blc-CC66CC {
-  background-color: #CC66CC !important;
-}
-.blc-CC66CC {
-  border-color: #CC66CC;
-}
-
-treechildren::-moz-tree-cell-text(lc-CC33CC), .lc-CC33CC:not([_moz-menuactive]) {
-  color: #CC33CC;
-}
-treechildren::-moz-tree-row(lc-CC33CC, selected, focus), .blc-CC33CC {
-  background-color: #CC33CC !important;
-}
-.blc-CC33CC {
-  border-color: #CC33CC;
-}
-
-treechildren::-moz-tree-cell-text(lc-993399), .lc-993399:not([_moz-menuactive]) {
-  color: #993399;
-}
-treechildren::-moz-tree-row(lc-993399, selected, focus), .blc-993399 {
-  background-color: #993399 !important;
-}
-.blc-993399 {
-  border-color: #993399;
-}
-
-treechildren::-moz-tree-cell-text(lc-663366), .lc-663366:not([_moz-menuactive]) {
-  color: #663366;
-}
-treechildren::-moz-tree-row(lc-663366, selected, focus), .blc-663366 {
-  background-color: #663366 !important;
-}
-.blc-663366 {
-  border-color: #663366;
-}
-
-treechildren::-moz-tree-cell-text(lc-330033), .lc-330033:not([_moz-menuactive]) {
-  color: #330033;
-}
-treechildren::-moz-tree-row(lc-330033, selected, focus), .blc-330033 {
-  background-color: #330033 !important;
-}
-.blc-330033 {
-  border-color: #330033;
-}
-
-treechildren::-moz-tree-cell-text(lc-white, selected, focus) {
-  color: #FFFFFF;
-}
-treechildren::-moz-tree-cell-text(lc-black, selected, focus), .blc-black {
-  color: #000000;
-}
--- a/mail/themes/osx/jar.mn
+++ b/mail/themes/osx/jar.mn
@@ -36,17 +36,16 @@ classic.jar:
   skin/classic/messenger/messageIcons.css                        (mail/messageIcons.css)
   skin/classic/messenger/messageQuotes.css                       (mail/messageQuotes.css)
   skin/classic/messenger/messageWindow.css                       (mail/messageWindow.css)
   skin/classic/messenger/numberbox.css                           (mail/numberbox.css)
   skin/classic/messenger/attachmentList.css                      (mail/attachmentList.css)
   skin/classic/messenger/msgSelectOffline.css                    (mail/msgSelectOffline.css)
   skin/classic/messenger/mailWindow1.css                         (mail/mailWindow1.css)
   skin/classic/messenger/searchBox.css                           (mail/searchBox.css)
-  skin/classic/messenger/tagColors.css                           (mail/tagColors.css)
   skin/classic/messenger/junkMail.css                            (mail/junkMail.css)
   skin/classic/messenger/filefield.css                           (mail/filefield.css)
   skin/classic/messenger/folderMenus.css                         (mail/folderMenus.css)
   skin/classic/messenger/folderPane.css                          (mail/folderPane.css)
   skin/classic/messenger/subscribe.css                           (mail/subscribe.css)
   skin/classic/messenger/virtualFolderListDialog.css             (mail/virtualFolderListDialog.css)
   skin/classic/messenger/searchDialog.css                        (mail/searchDialog.css)
   skin/classic/messenger/filterDialog.css                        (mail/filterDialog.css)
--- a/mail/themes/osx/mail/mailWindow1.css
+++ b/mail/themes/osx/mail/mailWindow1.css
@@ -7,17 +7,16 @@
 /* ===== mailWindow1.css ================================================
   == Styles for the main Mail window in the default layout scheme.
   ======================================================================= */
 
 @import url("chrome://messenger/skin/");
 @import url("chrome://messenger/skin/primaryToolbar.css");
 @import url("chrome://messenger/skin/folderMenus.css");
 @import url("chrome://messenger/skin/folderPane.css");
-@import url("chrome://messenger/skin/tagColors.css");
 @import url("chrome://messenger/skin/messageIcons.css");
 @import url("chrome://messenger/skin/shared/mailWindow1.css");
 
 #tabmail:-moz-lwtheme {
   text-shadow: inherit;
 }
 
 #messengerBox:-moz-lwtheme {
--- a/mail/themes/osx/mail/searchDialog.css
+++ b/mail/themes/osx/mail/searchDialog.css
@@ -2,17 +2,16 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* ===== searchDialog.css ===============================================
   == Styles for the Mail Search dialog.
   ======================================================================= */
 
 @import url("chrome://messenger/skin/");
-@import url("chrome://messenger/skin/tagColors.css");
 @import url("chrome://messenger/skin/messageIcons.css");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 #searchTerms  {
   margin: 8px 8px 0;
 }
 
deleted file mode 100644
--- a/mail/themes/osx/mail/tagColors.css
+++ /dev/null
@@ -1,725 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-
-/* ::::: thread labels decoration ::::: */
-
-/* There are 10x7 color definitions (size of the color picker used)
-   times 2 (2 style definitions for each color) +  2 general black
-   and white color definitions.
-   The color definitions can be in the following formats:
-     color: red;
-     color: #FF0000;
-     color: rgb(128, 0, 0);
-*/
-
-treechildren::-moz-tree-cell-text(lc-FFFFFF), .lc-FFFFFF:not([_moz-menuactive]) {
-  color: #FFFFFF
-}
-treechildren::-moz-tree-row(lc-FFFFFF, selected, focus), .blc-FFFFFF {
-  background-color: #FFFFFF !important;
-}
-.blc-FFFFFF {
-  border-color: #FFFFFF;
-}
-
-treechildren::-moz-tree-cell-text(lc-CCCCCC), .lc-CCCCCC:not([_moz-menuactive]) {
-  color: #CCCCCC
-}
-treechildren::-moz-tree-row(lc-CCCCCC, selected, focus), .blc-CCCCCC {
-  background-color: #CCCCCC !important;
-}
-.blc-CCCCCC {
-  border-color: #CCCCCC;
-}
-
-treechildren::-moz-tree-cell-text(lc-C0C0C0), .lc-C0C0C0:not([_moz-menuactive]) {
-  color: #C0C0C0
-}
-treechildren::-moz-tree-row(lc-C0C0C0, selected, focus), .blc-C0C0C0 {
-  background-color: #C0C0C0 !important;
-}
-.blc-C0C0C0 {
-  border-color: #C0C0C0;
-}
-
-treechildren::-moz-tree-cell-text(lc-999999), .lc-999999:not([_moz-menuactive]) {
-  color: #999999
-}
-treechildren::-moz-tree-row(lc-999999, selected, focus), .blc-999999 {
-  background-color: #999999 !important;
-}
-.blc-999999 {
-  border-color: #999999;
-}
-
-treechildren::-moz-tree-cell-text(lc-666666), .lc-666666:not([_moz-menuactive]) {
-  color: #666666
-}
-treechildren::-moz-tree-row(lc-666666, selected, focus), .blc-666666 {
-  background-color: #666666 !important;
-}
-.blc-666666 {
-  border-color: #666666;
-}
-
-treechildren::-moz-tree-cell-text(lc-333333), .lc-333333:not([_moz-menuactive]) {
-  color: #333333
-}
-treechildren::-moz-tree-row(lc-333333, selected, focus), .blc-333333 {
-  background-color: #333333 !important;
-}
-.blc-333333 {
-  border-color: #333333;
-}
-
-treechildren::-moz-tree-cell-text(lc-000000), .lc-000000:not([_moz-menuactive]) {
-  color: #000000
-}
-treechildren::-moz-tree-row(lc-000000, selected, focus), .blc-000000 {
-  /* our assumed color is #111111 and !important is needed to override it */
-  color: #FFFFFF !important;
-  text-shadow: 0 1px 0 rgba(46,52,54,0.4) !important; /* Tango Alumninum 6 */
-  background-color: #000000 !important;
-}
-.blc-000000 {
-  border-color: #000000;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFCCCC), .lc-FFCCCC:not([_moz-menuactive]) {
-  color: #FFCCCC
-}
-treechildren::-moz-tree-row(lc-FFCCCC, selected, focus), .blc-FFCCCC {
-  background-color: #FFCCCC !important;
-}
-.blc-FFCCCC {
-  border-color: #FFCCCC;
-}
-
-treechildren::-moz-tree-cell-text(lc-FF6666), .lc-FF6666:not([_moz-menuactive]) {
-  color: #FF6666
-}
-treechildren::-moz-tree-row(lc-FF6666, selected, focus), .blc-FF6666 {
-  background-color: #FF6666 !important;
-}
-.blc-FF6666 {
-  border-color: #FF6666;
-}
-
-treechildren::-moz-tree-cell-text(lc-FF0000), .lc-FF0000:not([_moz-menuactive]) {
-  color: #FF0000
-}
-treechildren::-moz-tree-row(lc-FF0000, selected, focus), .blc-FF0000 {
-  background-color: #FF0000 !important;
-}
-.blc-FF0000 {
-  border-color: #FF0000;
-}
-
-treechildren::-moz-tree-cell-text(lc-CC0000), .lc-CC0000:not([_moz-menuactive]) {
-  color: #CC0000
-}
-treechildren::-moz-tree-row(lc-CC0000, selected, focus), .blc-CC0000 {
-  background-color: #CC0000 !important;
-}
-.blc-CC0000 {
-  border-color: #CC0000;
-}
-
-treechildren::-moz-tree-cell-text(lc-990000), .lc-990000:not([_moz-menuactive]) {
-  color: #990000
-}
-treechildren::-moz-tree-row(lc-990000, selected, focus), .blc-990000 {
-  background-color: #990000 !important;
-}
-.blc-990000 {
-  border-color: #990000;
-}
-
-treechildren::-moz-tree-cell-text(lc-660000), .lc-660000:not([_moz-menuactive]) {
-  color: #660000
-}
-treechildren::-moz-tree-row(lc-660000, selected, focus), .blc-660000 {
-  background-color: #660000 !important;
-}
-.blc-660000 {
-  border-color: #660000;
-}
-
-treechildren::-moz-tree-cell-text(lc-330000), .lc-330000:not([_moz-menuactive]) {
-  color: #330000
-}
-treechildren::-moz-tree-row(lc-330000, selected, focus), .blc-330000 {
-  background-color: #330000 !important;
-}
-.blc-330000 {
-  border-color: #330000;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFCC99), .lc-FFCC99:not([_moz-menuactive]) {
-  color: #FFCC99
-}
-treechildren::-moz-tree-row(lc-FFCC99, selected, focus), .blc-FFCC99 {
-  background-color: #FFCC99 !important;
-}
-.blc-FFCC99 {
-  border-color: #FFCC99;
-}
-
-treechildren::-moz-tree-cell-text(lc-FF9966), .lc-FF9966:not([_moz-menuactive]) {
-  color: #FF9966
-}
-treechildren::-moz-tree-row(lc-FF9966, selected, focus), .blc-FF9966 {
-  background-color: #FF9966 !important;
-}
-.blc-FF9966 {
-  border-color: #FF9966;
-}
-
-treechildren::-moz-tree-cell-text(lc-FF9900), .lc-FF9900:not([_moz-menuactive]) {
-  color: #FF9900
-}
-treechildren::-moz-tree-row(lc-FF9900, selected, focus), .blc-FF9900 {
-  background-color: #FF9900 !important;
-}
-.blc-FF9900 {
-  border-color: #FF9900;
-}
-
-treechildren::-moz-tree-cell-text(lc-FF6600), .lc-FF6600:not([_moz-menuactive]) {
-  color: #FF6600
-}
-treechildren::-moz-tree-row(lc-FF6600, selected, focus), .blc-FF6600 {
-  background-color: #FF6600 !important;
-}
-.blc-FF6600 {
-  border-color: #FF6600;
-}
-
-treechildren::-moz-tree-cell-text(lc-CC6600), .lc-CC6600:not([_moz-menuactive]) {
-  color: #CC6600
-}
-treechildren::-moz-tree-row(lc-CC6600, selected, focus), .blc-CC6600 {
-  background-color: #CC6600 !important;
-}
-.blc-CC6600 {
-  border-color: #CC6600;
-}
-
-treechildren::-moz-tree-cell-text(lc-993300), .lc-993300:not([_moz-menuactive]) {
-  color: #993300
-}
-treechildren::-moz-tree-row(lc-993300, selected, focus), .blc-993300 {
-  background-color: #993300 !important;
-}
-.blc-993300 {
-  border-color: #993300;
-}
-
-treechildren::-moz-tree-cell-text(lc-663300), .lc-663300:not([_moz-menuactive]) {
-  color: #663300
-}
-treechildren::-moz-tree-row(lc-663300, selected, focus), .blc-663300 {
-  background-color: #663300 !important;
-}
-.blc-663300 {
-  border-color: #663300;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFFF99), .lc-FFFF99:not([_moz-menuactive]) {
-  color: #FFFF99
-}
-treechildren::-moz-tree-row(lc-FFFF99, selected, focus), .blc-FFFF99 {
-  background-color: #FFFF99 !important;
-}
-.blc-FFFF99 {
-  border-color: #FFFF99;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFFF66), .lc-FFFF66:not([_moz-menuactive]) {
-  color: #FFFF66
-}
-treechildren::-moz-tree-row(lc-FFFF66, selected, focus), .blc-FFFF66 {
-  background-color: #FFFF66 !important;
-}
-.blc-FFFF66 {
-  border-color: #FFFF66;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFCC66), .lc-FFCC66:not([_moz-menuactive]) {
-  color: #FFCC66
-}
-treechildren::-moz-tree-row(lc-FFCC66, selected, focus), .blc-FFCC66 {
-  background-color: #FFCC66 !important;
-}
-.blc-FFCC66 {
-  border-color: #FFCC66;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFCC33), .lc-FFCC33:not([_moz-menuactive]) {
-  color: #FFCC33
-}
-treechildren::-moz-tree-row(lc-FFCC33, selected, focus), .blc-FFCC33 {
-  background-color: #FFCC33 !important;
-}
-.blc-FFCC33 {
-  border-color: #FFCC33;
-}
-
-treechildren::-moz-tree-cell-text(lc-CC9933), .lc-CC9933:not([_moz-menuactive]) {
-  color: #CC9933
-}
-treechildren::-moz-tree-row(lc-CC9933, selected, focus), .blc-CC9933 {
-  background-color: #CC9933 !important;
-}
-.blc-CC9933 {
-  border-color: #CC9933;
-}
-
-treechildren::-moz-tree-cell-text(lc-996633), .lc-996633:not([_moz-menuactive]) {
-  color: #996633
-}
-treechildren::-moz-tree-row(lc-996633, selected, focus), .blc-996633 {
-  background-color: #996633 !important;
-}
-.blc-996633 {
-  border-color: #996633;
-}
-
-treechildren::-moz-tree-cell-text(lc-663333), .lc-663333:not([_moz-menuactive]) {
-  color: #663333
-}
-treechildren::-moz-tree-row(lc-663333, selected, focus), .blc-663333 {
-  background-color: #663333 !important;
-}
-.blc-663333 {
-  border-color: #663333;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFFFCC), .lc-FFFFCC:not([_moz-menuactive]) {
-  color: #FFFFCC
-}
-treechildren::-moz-tree-row(lc-FFFFCC, selected, focus), .blc-FFFFCC {
-  background-color: #FFFFCC !important;
-}
-.blc-FFFFCC {
-  border-color: #FFFFCC;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFFF33), .lc-FFFF33:not([_moz-menuactive]) {
-  color: #FFFF33
-}
-treechildren::-moz-tree-row(lc-FFFF33, selected, focus), .blc-FFFF33 {
-  background-color: #FFFF33 !important;
-}
-.blc-FFFF33 {
-  border-color: #FFFF33;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFFF00), .lc-FFFF00:not([_moz-menuactive]) {
-  color: #FFFF00
-}
-treechildren::-moz-tree-row(lc-FFFF00, selected, focus), .blc-FFFF00 {
-  background-color: #FFFF00 !important;
-}
-.blc-FFFF00 {
-  border-color: #FFFF00;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFCC00), .lc-FFCC00:not([_moz-menuactive]) {
-  color: #FFCC00
-}
-treechildren::-moz-tree-row(lc-FFCC00, selected, focus), .blc-FFCC00 {
-  background-color: #FFCC00 !important;
-}
-.blc-FFCC00 {
-  border-color: #FFCC00;
-}
-
-treechildren::-moz-tree-cell-text(lc-999900), .lc-999900:not([_moz-menuactive]) {
-  color: #999900
-}
-treechildren::-moz-tree-row(lc-999900, selected, focus), .blc-999900 {
-  background-color: #999900 !important;
-}
-.blc-999900 {
-  border-color: #999900;
-}
-
-treechildren::-moz-tree-cell-text(lc-666600), .lc-666600:not([_moz-menuactive]) {
-  color: #666600
-}
-treechildren::-moz-tree-row(lc-666600, selected, focus), .blc-666600 {
-  background-color: #666600 !important;
-}
-.blc-666600 {
-  border-color: #666600;
-}
-
-treechildren::-moz-tree-cell-text(lc-333300), .lc-333300:not([_moz-menuactive]) {
-  color: #333300
-}
-treechildren::-moz-tree-row(lc-333300, selected, focus), .blc-333300 {
-  background-color: #333300 !important;
-}
-.blc-333300 {
-  border-color: #333300;
-}
-
-treechildren::-moz-tree-cell-text(lc-99FF99), .lc-99FF99:not([_moz-menuactive]) {
-  color: #99FF99
-}
-treechildren::-moz-tree-row(lc-99FF99, selected, focus), .blc-99FF99 {
-  background-color: #99FF99 !important;
-}
-.blc-99FF99 {
-  border-color: #99FF99;
-}
-
-treechildren::-moz-tree-cell-text(lc-66FF99), .lc-66FF99:not([_moz-menuactive]) {
-  color: #66FF99
-}
-treechildren::-moz-tree-row(lc-66FF99, selected, focus), .blc-66FF99 {
-  background-color: #66FF99 !important;
-}
-.blc-66FF99 {
-  border-color: #66FF99;
-}
-
-treechildren::-moz-tree-cell-text(lc-33FF33), .lc-33FF33:not([_moz-menuactive]) {
-  color: #33FF33
-}
-treechildren::-moz-tree-row(lc-33FF33, selected, focus), .blc-33FF33 {
-  background-color: #33FF33 !important;
-}
-.blc-33FF33 {
-  border-color: #33FF33;
-}
-
-treechildren::-moz-tree-cell-text(lc-33CC00), .lc-33CC00:not([_moz-menuactive]) {
-  color: #33CC00
-}
-treechildren::-moz-tree-row(lc-33CC00, selected, focus), .blc-33CC00 {
-  background-color: #33CC00 !important;
-}
-.blc-33CC00 {
-  border-color: #33CC00;
-}
-
-treechildren::-moz-tree-cell-text(lc-009900), .lc-009900:not([_moz-menuactive]) {
-  color: #009900
-}
-treechildren::-moz-tree-row(lc-009900, selected, focus), .blc-009900 {
-  background-color: #009900 !important;
-}
-.blc-009900 {
-  border-color: #009900;
-}
-
-treechildren::-moz-tree-cell-text(lc-006600), .lc-006600:not([_moz-menuactive]) {
-  color: #006600
-}
-treechildren::-moz-tree-row(lc-006600, selected, focus), .blc-006600 {
-  background-color: #006600 !important;
-}
-.blc-006600 {
-  border-color: #006600;
-}
-
-treechildren::-moz-tree-cell-text(lc-003300), .lc-003300:not([_moz-menuactive]) {
-  color: #003300
-}
-treechildren::-moz-tree-row(lc-003300, selected, focus), .blc-003300 {
-  background-color: #003300 !important;
-}
-.blc-003300 {
-  border-color: #003300;
-}
-
-treechildren::-moz-tree-cell-text(lc-99FFFF), .lc-99FFFF:not([_moz-menuactive]) {
-  color: #99FFFF
-}
-treechildren::-moz-tree-row(lc-99FFFF, selected, focus), .blc-99FFFF {
-  background-color: #99FFFF !important;
-}
-.blc-99FFFF {
-  border-color: #99FFFF;
-}
-
-treechildren::-moz-tree-cell-text(lc-33FFFF), .lc-33FFFF:not([_moz-menuactive]) {
-  color: #33FFFF
-}
-treechildren::-moz-tree-row(lc-33FFFF, selected, focus), .blc-33FFFF {
-  background-color: #33FFFF !important;
-}
-.blc-33FFFF {
-  border-color: #33FFFF;
-}
-
-treechildren::-moz-tree-cell-text(lc-66CCCC), .lc-66CCCC:not([_moz-menuactive]) {
-  color: #66CCCC
-}
-treechildren::-moz-tree-row(lc-66CCCC, selected, focus), .blc-66CCCC {
-  background-color: #66CCCC !important;
-}
-.blc-66CCCC {
-  border-color: #66CCCC;
-}
-
-treechildren::-moz-tree-cell-text(lc-00CCCC), .lc-00CCCC:not([_moz-menuactive]) {
-  color: #00CCCC
-}
-treechildren::-moz-tree-row(lc-00CCCC, selected, focus), .blc-00CCCC {
-  background-color: #00CCCC !important;
-}
-.blc-00CCCC {
-  border-color: #00CCCC;
-}
-
-treechildren::-moz-tree-cell-text(lc-339999), .lc-339999:not([_moz-menuactive]) {
-  color: #339999
-}
-treechildren::-moz-tree-row(lc-339999, selected, focus), .blc-339999 {
-  background-color: #339999 !important;
-}
-.blc-339999 {
-  border-color: #339999;
-}
-
-treechildren::-moz-tree-cell-text(lc-336666), .lc-336666:not([_moz-menuactive]) {
-  color: #336666
-}
-treechildren::-moz-tree-row(lc-336666, selected, focus), .blc-336666 {
-  background-color: #336666 !important;
-}
-.blc-336666 {
-  border-color: #336666;
-}
-
-treechildren::-moz-tree-cell-text(lc-003333), .lc-003333:not([_moz-menuactive]) {
-  color: #003333
-}
-treechildren::-moz-tree-row(lc-003333, selected, focus), .blc-003333 {
-  background-color: #003333 !important;
-}
-.blc-003333 {
-  border-color: #003333;
-}
-
-treechildren::-moz-tree-cell-text(lc-CCFFFF), .lc-CCFFFF:not([_moz-menuactive]) {
-  color: #CCFFFF
-}
-treechildren::-moz-tree-row(lc-CCFFFF, selected, focus), .blc-CCFFFF {
-  background-color: #CCFFFF !important;
-}
-.blc-CCFFFF {
-  border-color: #CCFFFF;
-}
-
-treechildren::-moz-tree-cell-text(lc-66FFFF), .lc-66FFFF:not([_moz-menuactive]) {
-  color: #66FFFF
-}
-treechildren::-moz-tree-row(lc-66FFFF, selected, focus), .blc-66FFFF {
-  background-color: #66FFFF !important;
-}
-.blc-66FFFF {
-  border-color: #66FFFF;
-}
-
-treechildren::-moz-tree-cell-text(lc-33CCFF), .lc-33CCFF:not([_moz-menuactive]) {
-  color: #33CCFF
-}
-treechildren::-moz-tree-row(lc-33CCFF, selected, focus), .blc-33CCFF {
-  background-color: #33CCFF !important;
-}
-.blc-33CCFF {
-  border-color: #33CCFF;
-}
-
-treechildren::-moz-tree-cell-text(lc-3366FF), .lc-3366FF:not([_moz-menuactive]) {
-  color: #3366FF
-}
-treechildren::-moz-tree-row(lc-3366FF, selected, focus), .blc-3366FF {
-  background-color: #3366FF !important;
-}
-.blc-3366FF {
-  border-color: #3366FF;
-}
-
-treechildren::-moz-tree-cell-text(lc-3333FF), .lc-3333FF:not([_moz-menuactive]) {
-  color: #3333FF
-}
-treechildren::-moz-tree-row(lc-3333FF, selected, focus), .blc-3333FF {
-  background-color: #3333FF !important;
-}
-.blc-3333FF {
-  border-color: #3333FF;
-}
-
-treechildren::-moz-tree-cell-text(lc-000099), .lc-000099:not([_moz-menuactive]) {
-  color: #000099
-}
-treechildren::-moz-tree-row(lc-000099, selected, focus), .blc-000099 {
-  background-color: #000099 !important;
-}
-.blc-000099 {
-  border-color: #000099;
-}
-
-treechildren::-moz-tree-cell-text(lc-000066), .lc-000066:not([_moz-menuactive]) {
-  color: #000066
-}
-treechildren::-moz-tree-row(lc-000066, selected, focus), .blc-000066 {
-  background-color: #000066 !important;
-}
-.blc-000066 {
-  border-color: #000066;
-}
-
-treechildren::-moz-tree-cell-text(lc-CCCCFF), .lc-CCCCFF:not([_moz-menuactive]) {
-  color: #CCCCFF
-}
-treechildren::-moz-tree-row(lc-CCCCFF, selected, focus), .blc-CCCCFF {
-  background-color: #CCCCFF !important;
-}
-.blc-CCCCFF {
-  border-color: #CCCCFF;
-}
-
-treechildren::-moz-tree-cell-text(lc-9999FF), .lc-9999FF:not([_moz-menuactive]) {
-  color: #9999FF
-}
-treechildren::-moz-tree-row(lc-9999FF, selected, focus), .blc-9999FF {
-  background-color: #9999FF !important;
-}
-.blc-9999FF {
-  border-color: #9999FF;
-}
-
-treechildren::-moz-tree-cell-text(lc-6666CC), .lc-6666CC:not([_moz-menuactive]) {
-  color: #6666CC
-}
-treechildren::-moz-tree-row(lc-6666CC, selected, focus), .blc-6666CC {
-  background-color: #6666CC !important;
-}
-.blc-6666CC {
-  border-color: #6666CC;
-}
-
-treechildren::-moz-tree-cell-text(lc-6633FF), .lc-6633FF:not([_moz-menuactive]) {
-  color: #6633FF
-}
-treechildren::-moz-tree-row(lc-6633FF, selected, focus), .blc-6633FF {
-  background-color: #6633FF !important;
-}
-.blc-6633FF {
-  border-color: #6633FF;
-}
-
-treechildren::-moz-tree-cell-text(lc-6600CC), .lc-6600CC:not([_moz-menuactive]) {
-  color: #6600CC
-}
-treechildren::-moz-tree-row(lc-6600CC, selected, focus), .blc-6600CC {
-  background-color: #6600CC !important;
-}
-.blc-6600CC {
-  border-color: #6600CC;
-}
-
-treechildren::-moz-tree-cell-text(lc-333399), .lc-333399:not([_moz-menuactive]) {
-  color: #333399
-}
-treechildren::-moz-tree-row(lc-333399, selected, focus), .blc-333399 {
-  background-color: #333399 !important;
-}
-.blc-333399 {
-  border-color: #333399;
-}
-
-treechildren::-moz-tree-cell-text(lc-330099), .lc-330099:not([_moz-menuactive]) {
-  color: #330099
-}
-treechildren::-moz-tree-row(lc-330099, selected, focus), .blc-330099 {
-  background-color: #330099 !important;
-}
-.blc-330099 {
-  border-color: #330099;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFCCFF), .lc-FFCCFF:not([_moz-menuactive]) {
-  color: #FFCCFF
-}
-treechildren::-moz-tree-row(lc-FFCCFF, selected, focus), .blc-FFCCFF {
-  background-color: #FFCCFF !important;
-}
-.blc-FFCCFF {
-  border-color: #FFCCFF;
-}
-
-treechildren::-moz-tree-cell-text(lc-FF99FF), .lc-FF99FF:not([_moz-menuactive]) {
-  color: #FF99FF
-}
-treechildren::-moz-tree-row(lc-FF99FF, selected, focus), .blc-FF99FF {
-  background-color: #FF99FF !important;
-}
-.blc-FF99FF {
-  border-color: #FF99FF;
-}
-
-treechildren::-moz-tree-cell-text(lc-CC66CC), .lc-CC66CC:not([_moz-menuactive]) {
-  color: #CC66CC
-}
-treechildren::-moz-tree-row(lc-CC66CC, selected, focus), .blc-CC66CC {
-  background-color: #CC66CC !important;
-}
-.blc-CC66CC {
-  border-color: #CC66CC;
-}
-
-treechildren::-moz-tree-cell-text(lc-CC33CC), .lc-CC33CC:not([_moz-menuactive]) {
-  color: #CC33CC
-}
-treechildren::-moz-tree-row(lc-CC33CC, selected, focus), .blc-CC33CC {
-  background-color: #CC33CC !important;
-}
-.blc-CC33CC {
-  border-color: #CC33CC;
-}
-
-treechildren::-moz-tree-cell-text(lc-993399), .lc-993399:not([_moz-menuactive]) {
-  color: #993399
-}
-treechildren::-moz-tree-row(lc-993399, selected, focus), .blc-993399 {
-  background-color: #993399 !important;
-}
-.blc-993399 {
-  border-color: #993399;
-}
-
-treechildren::-moz-tree-cell-text(lc-663366), .lc-663366:not([_moz-menuactive]) {
-  color: #663366
-}
-treechildren::-moz-tree-row(lc-663366, selected, focus), .blc-663366 {
-  background-color: #663366 !important;
-}
-.blc-663366 {
-  border-color: #663366;
-}
-
-treechildren::-moz-tree-cell-text(lc-330033), .lc-330033:not([_moz-menuactive]) {
-  color: #330033
-}
-treechildren::-moz-tree-row(lc-330033, selected, focus), .blc-330033 {
-  background-color: #330033 !important;
-}
-.blc-330033 {
-  border-color: #330033;
-}
-
-treechildren::-moz-tree-cell-text(lc-white, selected, focus) {
-  color: #FFFFFF;
-}
-treechildren::-moz-tree-cell-text(lc-black, selected, focus), .blc-black {
-  color: #000000;
-}
--- a/mail/themes/shared/jar.inc.mn
+++ b/mail/themes/shared/jar.inc.mn
@@ -102,16 +102,17 @@
   skin/classic/messenger/shared/in-content/general.svg        (../shared/mail/incontentprefs/general.svg)
   skin/classic/messenger/shared/in-content/privacy.svg        (../shared/mail/incontentprefs/privacy.svg)
   skin/classic/messenger/shared/in-content/security.svg       (../shared/mail/incontentprefs/security.svg)
   skin/classic/messenger/shared/mailWindow1.css               (../shared/mail/mailWindow1.css)
   skin/classic/messenger/shared/messageHeader.css             (../shared/mail/messageHeader.css)
   skin/classic/messenger/shared/messenger.css                 (../shared/mail/messenger.css)
   skin/classic/messenger/shared/messengercompose.css          (../shared/mail/messengercompose.css)
   skin/classic/messenger/shared/tabmail.css                   (../shared/mail/tabmail.css)
+  skin/classic/messenger/tagColors.css                        (../shared/mail/tagColors.css)
   skin/classic/messenger/shared/smime/smime-compose.css       (../shared/mail/smime/smime-compose.css)
 #ifndef XP_MACOSX
   skin/classic/messenger/icons/anchor.svg                     (../shared/mail/icons/anchor.svg)
   skin/classic/messenger/icons/bold.svg                       (../shared/mail/icons/bold.svg)
   skin/classic/messenger/icons/bullet-list.svg                (../shared/mail/icons/bullet-list.svg)
   skin/classic/messenger/messengercompose/format-dropmarker.svg (../shared/mail/icons/format-dropmarker.svg)
   skin/classic/messenger/icons/center-align.svg               (../shared/mail/icons/center-align.svg)
   skin/classic/messenger/icons/decrease.svg                   (../shared/mail/icons/decrease.svg)
new file mode 100644
--- /dev/null
+++ b/mail/themes/shared/mail/tagColors.css
@@ -0,0 +1,13 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* ::::: thread labels decoration ::::: */
+
+/*
+ * This style sheet is empty and will be dynamically populated.
+ * To populate it, typically TagUtils.loadTagsIntoCSS(document)
+ * is called from the document's onload() handler.
+ * There is also TagUtils.addTagToAllDocumentSheets() which inserts
+ * CSS into this sheet on all open messenger and search windows.
+ */
--- a/mail/themes/windows/jar.mn
+++ b/mail/themes/windows/jar.mn
@@ -30,17 +30,16 @@ classic.jar:
   skin/classic/messenger/messageHeader.css                    (mail/messageHeader.css)
   skin/classic/messenger/messageIcons.css                     (mail/messageIcons.css)
   skin/classic/messenger/messageQuotes.css                    (mail/messageQuotes.css)
   skin/classic/messenger/messenger.css                        (mail/messenger.css)
   skin/classic/messenger/numberbox.css                        (mail/numberbox.css)
   skin/classic/messenger/attachmentList.css                   (mail/attachmentList.css)
   skin/classic/messenger/imageFilters.svg                     (mail/imageFilters.svg)
   skin/classic/messenger/mailWindow1.css                      (mail/mailWindow1.css)
-  skin/classic/messenger/tagColors.css                        (mail/tagColors.css)
   skin/classic/messenger/messageWindow.css                    (mail/messageWindow.css)
   skin/classic/messenger/searchBox.css                        (mail/searchBox.css)
   skin/classic/messenger/junkMail.css                         (mail/junkMail.css)
   skin/classic/messenger/folderMenus.css                      (mail/folderMenus.css)
   skin/classic/messenger/folderPane.css                       (mail/folderPane.css)
   skin/classic/messenger/subscribe.css                        (mail/subscribe.css)
   skin/classic/messenger/virtualFolderListDialog.css          (mail/virtualFolderListDialog.css)
   skin/classic/messenger/searchDialog.css                     (mail/searchDialog.css)
--- a/mail/themes/windows/mail/mailWindow1.css
+++ b/mail/themes/windows/mail/mailWindow1.css
@@ -5,17 +5,16 @@
 /* ===== mailWindow1.css ================================================
   == Styles for the main Mail window in the default layout scheme.
   ======================================================================= */
 
 @import url("chrome://messenger/skin/");
 @import url("chrome://messenger/skin/primaryToolbar.css");
 @import url("chrome://messenger/skin/folderMenus.css");
 @import url("chrome://messenger/skin/folderPane.css");
-@import url("chrome://messenger/skin/tagColors.css");
 @import url("chrome://messenger/skin/messageIcons.css");
 @import url("chrome://messenger/skin/shared/mailWindow1.css");
 
 #folderPane-toolbar {
   border-top-style: none;
   border-bottom: 1px solid ThreeDShadow;
 }
 
--- a/mail/themes/windows/mail/messenger.css
+++ b/mail/themes/windows/mail/messenger.css
@@ -455,16 +455,20 @@ treechildren::-moz-tree-indentation {
   }
 
   treechildren::-moz-tree-image(selected, focus),
   treechildren::-moz-tree-twisty(selected, focus),
   treechildren::-moz-tree-cell-text(selected, focus) {
     color: -moz-DialogText;
   }
 
+  treechildren::-moz-tree-row(tagged, selected, focus) {
+    border-color: rgba(0,0,0,0.25);
+  }
+
   @media (-moz-os-version: windows-win7),
          (-moz-os-version: windows-win8) {
     treechildren {
       --treechildren-2ndBorderColor: rgba(255,255,255,.4);
       --treechildren-selectedBackground: rgba(190,190,190,.4);
       --treechildren-currentFocusBorder: var(--treechildren-currentColor);
       --treechildren-selectedFocusBorder: rgb(132,172,221) var(--treechildren-2ndBorderColor) var(--treechildren-currentColor);
       --treechildren-selectedFocusBackground: rgba(131,183,249,.375);
@@ -479,16 +483,20 @@ treechildren::-moz-tree-indentation {
 
   @media (-moz-os-version: windows-win7) {
     treechildren::-moz-tree-row(selected),
     treechildren::-moz-tree-row(dropOn),
     treechildren::-moz-tree-row(hover) {
       background-image: linear-gradient(rgba(255,255,255,.7), transparent);
     }
 
+    treechildren::-moz-tree-row(tagged, selected, focus) {
+      background-image: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.5));
+    }
+
     treechildren::-moz-tree-row {
       border-radius: 3px;
     }
   }
 }
 
 @media (-moz-windows-classic) {
   treecol[hideheader="true"],
--- a/mail/themes/windows/mail/searchDialog.css
+++ b/mail/themes/windows/mail/searchDialog.css
@@ -2,17 +2,16 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* ===== searchDialog.css ===============================================
   == Styles for the Mail Search dialog.
   ======================================================================= */
 
 @import url("chrome://messenger/skin/");
-@import url("chrome://messenger/skin/tagColors.css");
 @import url("chrome://messenger/skin/messageIcons.css");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 #searchTerms  {
   margin: 8px 6px 0;
 }
 
deleted file mode 100644
--- a/mail/themes/windows/mail/tagColors.css
+++ /dev/null
@@ -1,1536 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-
-/* ::::: thread labels decoration ::::: */
-
-/* There are 10x7 color definitions (size of the color picker used)
-   times 2 (2 style definitions for each color) +  2 general black
-   and white color definitions.
-   The color definitions can be in the following formats:
-     color: red;
-     color: #FF0000;
-     color: rgb(128, 0, 0);
-*/
-
-treechildren::-moz-tree-cell-text(lc-FFFFFF), .lc-FFFFFF:not([_moz-menuactive]) {
-  color: #FFFFFF
-}
-treechildren::-moz-tree-row(lc-FFFFFF, selected, focus), .blc-FFFFFF {
-  background-color: #FFFFFF !important;
-}
-.blc-FFFFFF {
-  border-color: #FFFFFF;
-}
-
-treechildren::-moz-tree-cell-text(lc-CCCCCC), .lc-CCCCCC:not([_moz-menuactive]) {
-  color: #CCCCCC
-}
-treechildren::-moz-tree-row(lc-CCCCCC, selected, focus), .blc-CCCCCC {
-  background-color: #CCCCCC !important;
-}
-.blc-CCCCCC {
-  border-color: #CCCCCC;
-}
-
-treechildren::-moz-tree-cell-text(lc-C0C0C0), .lc-C0C0C0:not([_moz-menuactive]) {
-  color: #C0C0C0
-}
-treechildren::-moz-tree-row(lc-C0C0C0, selected, focus), .blc-C0C0C0 {
-  background-color: #C0C0C0 !important;
-}
-.blc-C0C0C0 {
-  border-color: #C0C0C0;
-}
-
-treechildren::-moz-tree-cell-text(lc-999999), .lc-999999:not([_moz-menuactive]) {
-  color: #999999
-}
-treechildren::-moz-tree-row(lc-999999, selected, focus), .blc-999999 {
-  background-color: #999999 !important;
-}
-.blc-999999 {
-  border-color: #999999;
-}
-
-treechildren::-moz-tree-cell-text(lc-666666), .lc-666666:not([_moz-menuactive]) {
-  color: #666666
-}
-treechildren::-moz-tree-row(lc-666666, selected, focus), .blc-666666 {
-  background-color: #666666 !important;
-}
-.blc-666666 {
-  border-color: #666666;
-}
-
-treechildren::-moz-tree-cell-text(lc-333333), .lc-333333:not([_moz-menuactive]) {
-  color: #333333
-}
-treechildren::-moz-tree-row(lc-333333, selected, focus), .blc-333333 {
-  background-color: #333333 !important;
-}
-.blc-333333 {
-  border-color: #333333;
-}
-
-treechildren::-moz-tree-cell-text(lc-000000), .lc-000000:not([_moz-menuactive]) {
-  color: #000000
-}
-treechildren::-moz-tree-row(lc-000000, selected, focus), .blc-000000 {
-  /* our assumed color is #111111 and !important is needed to override it */
-  color: #FFFFFF !important;
-  text-shadow: 0 1px 0 rgba(46,52,54,0.4) !important; /* Tango Alumninum 6 */
-  background-color: #000000 !important;
-}
-.blc-000000 {
-  border-color: #000000;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFCCCC), .lc-FFCCCC:not([_moz-menuactive]) {
-  color: #FFCCCC
-}
-treechildren::-moz-tree-row(lc-FFCCCC, selected, focus), .blc-FFCCCC {
-  background-color: #FFCCCC !important;
-}
-.blc-FFCCCC {
-  border-color: #FFCCCC;
-}
-
-treechildren::-moz-tree-cell-text(lc-FF6666), .lc-FF6666:not([_moz-menuactive]) {
-  color: #FF6666
-}
-treechildren::-moz-tree-row(lc-FF6666, selected, focus), .blc-FF6666 {
-  background-color: #FF6666 !important;
-}
-.blc-FF6666 {
-  border-color: #FF6666;
-}
-
-treechildren::-moz-tree-cell-text(lc-FF0000), .lc-FF0000:not([_moz-menuactive]) {
-  color: #FF0000
-}
-treechildren::-moz-tree-row(lc-FF0000, selected, focus), .blc-FF0000 {
-  background-color: #FF0000 !important;
-}
-.blc-FF0000 {
-  border-color: #FF0000;
-}
-
-treechildren::-moz-tree-cell-text(lc-CC0000), .lc-CC0000:not([_moz-menuactive]) {
-  color: #CC0000
-}
-treechildren::-moz-tree-row(lc-CC0000, selected, focus), .blc-CC0000 {
-  background-color: #CC0000 !important;
-}
-.blc-CC0000 {
-  border-color: #CC0000;
-}
-
-treechildren::-moz-tree-cell-text(lc-990000), .lc-990000:not([_moz-menuactive]) {
-  color: #990000
-}
-treechildren::-moz-tree-row(lc-990000, selected, focus), .blc-990000 {
-  background-color: #990000 !important;
-}
-.blc-990000 {
-  border-color: #990000;
-}
-
-treechildren::-moz-tree-cell-text(lc-660000), .lc-660000:not([_moz-menuactive]) {
-  color: #660000
-}
-treechildren::-moz-tree-row(lc-660000, selected, focus), .blc-660000 {
-  background-color: #660000 !important;
-}
-.blc-660000 {
-  border-color: #660000;
-}
-
-treechildren::-moz-tree-cell-text(lc-330000), .lc-330000:not([_moz-menuactive]) {
-  color: #330000
-}
-treechildren::-moz-tree-row(lc-330000, selected, focus), .blc-330000 {
-  background-color: #330000 !important;
-}
-.blc-330000 {
-  border-color: #330000;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFCC99), .lc-FFCC99:not([_moz-menuactive]) {
-  color: #FFCC99
-}
-treechildren::-moz-tree-row(lc-FFCC99, selected, focus), .blc-FFCC99 {
-  background-color: #FFCC99 !important;
-}
-.blc-FFCC99 {
-  border-color: #FFCC99;
-}
-
-treechildren::-moz-tree-cell-text(lc-FF9966), .lc-FF9966:not([_moz-menuactive]) {
-  color: #FF9966
-}
-treechildren::-moz-tree-row(lc-FF9966, selected, focus), .blc-FF9966 {
-  background-color: #FF9966 !important;
-}
-.blc-FF9966 {
-  border-color: #FF9966;
-}
-
-treechildren::-moz-tree-cell-text(lc-FF9900), .lc-FF9900:not([_moz-menuactive]) {
-  color: #FF9900
-}
-treechildren::-moz-tree-row(lc-FF9900, selected, focus), .blc-FF9900 {
-  background-color: #FF9900 !important;
-}
-.blc-FF9900 {
-  border-color: #FF9900;
-}
-
-treechildren::-moz-tree-cell-text(lc-FF6600), .lc-FF6600:not([_moz-menuactive]) {
-  color: #FF6600
-}
-treechildren::-moz-tree-row(lc-FF6600, selected, focus), .blc-FF6600 {
-  background-color: #FF6600 !important;
-}
-.blc-FF6600 {
-  border-color: #FF6600;
-}
-
-treechildren::-moz-tree-cell-text(lc-CC6600), .lc-CC6600:not([_moz-menuactive]) {
-  color: #CC6600
-}
-treechildren::-moz-tree-row(lc-CC6600, selected, focus), .blc-CC6600 {
-  background-color: #CC6600 !important;
-}
-.blc-CC6600 {
-  border-color: #CC6600;
-}
-
-treechildren::-moz-tree-cell-text(lc-993300), .lc-993300:not([_moz-menuactive]) {
-  color: #993300
-}
-treechildren::-moz-tree-row(lc-993300, selected, focus), .blc-993300 {
-  background-color: #993300 !important;
-}
-.blc-993300 {
-  border-color: #993300;
-}
-
-treechildren::-moz-tree-cell-text(lc-663300), .lc-663300:not([_moz-menuactive]) {
-  color: #663300
-}
-treechildren::-moz-tree-row(lc-663300, selected, focus), .blc-663300 {
-  background-color: #663300 !important;
-}
-.blc-663300 {
-  border-color: #663300;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFFF99), .lc-FFFF99:not([_moz-menuactive]) {
-  color: #FFFF99
-}
-treechildren::-moz-tree-row(lc-FFFF99, selected, focus), .blc-FFFF99 {
-  background-color: #FFFF99 !important;
-}
-.blc-FFFF99 {
-  border-color: #FFFF99;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFFF66), .lc-FFFF66:not([_moz-menuactive]) {
-  color: #FFFF66
-}
-treechildren::-moz-tree-row(lc-FFFF66, selected, focus), .blc-FFFF66 {
-  background-color: #FFFF66 !important;
-}
-.blc-FFFF66 {
-  border-color: #FFFF66;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFCC66), .lc-FFCC66:not([_moz-menuactive]) {
-  color: #FFCC66
-}
-treechildren::-moz-tree-row(lc-FFCC66, selected, focus), .blc-FFCC66 {
-  background-color: #FFCC66 !important;
-}
-.blc-FFCC66 {
-  border-color: #FFCC66;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFCC33), .lc-FFCC33:not([_moz-menuactive]) {
-  color: #FFCC33
-}
-treechildren::-moz-tree-row(lc-FFCC33, selected, focus), .blc-FFCC33 {
-  background-color: #FFCC33 !important;
-}
-.blc-FFCC33 {
-  border-color: #FFCC33;
-}
-
-treechildren::-moz-tree-cell-text(lc-CC9933), .lc-CC9933:not([_moz-menuactive]) {
-  color: #CC9933
-}
-treechildren::-moz-tree-row(lc-CC9933, selected, focus), .blc-CC9933 {
-  background-color: #CC9933 !important;
-}
-.blc-CC9933 {
-  border-color: #CC9933;
-}
-
-treechildren::-moz-tree-cell-text(lc-996633), .lc-996633:not([_moz-menuactive]) {
-  color: #996633
-}
-treechildren::-moz-tree-row(lc-996633, selected, focus), .blc-996633 {
-  background-color: #996633 !important;
-}
-.blc-996633 {
-  border-color: #996633;
-}
-
-treechildren::-moz-tree-cell-text(lc-663333), .lc-663333:not([_moz-menuactive]) {
-  color: #663333
-}
-treechildren::-moz-tree-row(lc-663333, selected, focus), .blc-663333 {
-  background-color: #663333 !important;
-}
-.blc-663333 {
-  border-color: #663333;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFFFCC), .lc-FFFFCC:not([_moz-menuactive]) {
-  color: #FFFFCC
-}
-treechildren::-moz-tree-row(lc-FFFFCC, selected, focus), .blc-FFFFCC {
-  background-color: #FFFFCC !important;
-}
-.blc-FFFFCC {
-  border-color: #FFFFCC;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFFF33), .lc-FFFF33:not([_moz-menuactive]) {
-  color: #FFFF33
-}
-treechildren::-moz-tree-row(lc-FFFF33, selected, focus), .blc-FFFF33 {
-  background-color: #FFFF33 !important;
-}
-.blc-FFFF33 {
-  border-color: #FFFF33;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFFF00), .lc-FFFF00:not([_moz-menuactive]) {
-  color: #FFFF00
-}
-treechildren::-moz-tree-row(lc-FFFF00, selected, focus), .blc-FFFF00 {
-  background-color: #FFFF00 !important;
-}
-.blc-FFFF00 {
-  border-color: #FFFF00;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFCC00), .lc-FFCC00:not([_moz-menuactive]) {
-  color: #FFCC00
-}
-treechildren::-moz-tree-row(lc-FFCC00, selected, focus), .blc-FFCC00 {
-  background-color: #FFCC00 !important;
-}
-.blc-FFCC00 {
-  border-color: #FFCC00;
-}
-
-treechildren::-moz-tree-cell-text(lc-999900), .lc-999900:not([_moz-menuactive]) {
-  color: #999900
-}
-treechildren::-moz-tree-row(lc-999900, selected, focus), .blc-999900 {
-  background-color: #999900 !important;
-}
-.blc-999900 {
-  border-color: #999900;
-}
-
-treechildren::-moz-tree-cell-text(lc-666600), .lc-666600:not([_moz-menuactive]) {
-  color: #666600
-}
-treechildren::-moz-tree-row(lc-666600, selected, focus), .blc-666600 {
-  background-color: #666600 !important;
-}
-.blc-666600 {
-  border-color: #666600;
-}
-
-treechildren::-moz-tree-cell-text(lc-333300), .lc-333300:not([_moz-menuactive]) {
-  color: #333300
-}
-treechildren::-moz-tree-row(lc-333300, selected, focus), .blc-333300 {
-  background-color: #333300 !important;
-}
-.blc-333300 {
-  border-color: #333300;
-}
-
-treechildren::-moz-tree-cell-text(lc-99FF99), .lc-99FF99:not([_moz-menuactive]) {
-  color: #99FF99
-}
-treechildren::-moz-tree-row(lc-99FF99, selected, focus), .blc-99FF99 {
-  background-color: #99FF99 !important;
-}
-.blc-99FF99 {
-  border-color: #99FF99;
-}
-
-treechildren::-moz-tree-cell-text(lc-66FF99), .lc-66FF99:not([_moz-menuactive]) {
-  color: #66FF99
-}
-treechildren::-moz-tree-row(lc-66FF99, selected, focus), .blc-66FF99 {
-  background-color: #66FF99 !important;
-}
-.blc-66FF99 {
-  border-color: #66FF99;
-}
-
-treechildren::-moz-tree-cell-text(lc-33FF33), .lc-33FF33:not([_moz-menuactive]) {
-  color: #33FF33
-}
-treechildren::-moz-tree-row(lc-33FF33, selected, focus), .blc-33FF33 {
-  background-color: #33FF33 !important;
-}
-.blc-33FF33 {
-  border-color: #33FF33;
-}
-
-treechildren::-moz-tree-cell-text(lc-33CC00), .lc-33CC00:not([_moz-menuactive]) {
-  color: #33CC00
-}
-treechildren::-moz-tree-row(lc-33CC00, selected, focus), .blc-33CC00 {
-  background-color: #33CC00 !important;
-}
-.blc-33CC00 {
-  border-color: #33CC00;
-}
-
-treechildren::-moz-tree-cell-text(lc-009900), .lc-009900:not([_moz-menuactive]) {
-  color: #009900
-}
-treechildren::-moz-tree-row(lc-009900, selected, focus), .blc-009900 {
-  background-color: #009900 !important;
-}
-.blc-009900 {
-  border-color: #009900;
-}
-
-treechildren::-moz-tree-cell-text(lc-006600), .lc-006600:not([_moz-menuactive]) {
-  color: #006600
-}
-treechildren::-moz-tree-row(lc-006600, selected, focus), .blc-006600 {
-  background-color: #006600 !important;
-}
-.blc-006600 {
-  border-color: #006600;
-}
-
-treechildren::-moz-tree-cell-text(lc-003300), .lc-003300:not([_moz-menuactive]) {
-  color: #003300
-}
-treechildren::-moz-tree-row(lc-003300, selected, focus), .blc-003300 {
-  background-color: #003300 !important;
-}
-.blc-003300 {
-  border-color: #003300;
-}
-
-treechildren::-moz-tree-cell-text(lc-99FFFF), .lc-99FFFF:not([_moz-menuactive]) {
-  color: #99FFFF
-}
-treechildren::-moz-tree-row(lc-99FFFF, selected, focus), .blc-99FFFF {
-  background-color: #99FFFF !important;
-}
-.blc-99FFFF {
-  border-color: #99FFFF;
-}
-
-treechildren::-moz-tree-cell-text(lc-33FFFF), .lc-33FFFF:not([_moz-menuactive]) {
-  color: #33FFFF
-}
-treechildren::-moz-tree-row(lc-33FFFF, selected, focus), .blc-33FFFF {
-  background-color: #33FFFF !important;
-}
-.blc-33FFFF {
-  border-color: #33FFFF;
-}
-
-treechildren::-moz-tree-cell-text(lc-66CCCC), .lc-66CCCC:not([_moz-menuactive]) {
-  color: #66CCCC
-}
-treechildren::-moz-tree-row(lc-66CCCC, selected, focus), .blc-66CCCC {
-  background-color: #66CCCC !important;
-}
-.blc-66CCCC {
-  border-color: #66CCCC;
-}
-
-treechildren::-moz-tree-cell-text(lc-00CCCC), .lc-00CCCC:not([_moz-menuactive]) {
-  color: #00CCCC
-}
-treechildren::-moz-tree-row(lc-00CCCC, selected, focus), .blc-00CCCC {
-  background-color: #00CCCC !important;
-}
-.blc-00CCCC {
-  border-color: #00CCCC;
-}
-
-treechildren::-moz-tree-cell-text(lc-339999), .lc-339999:not([_moz-menuactive]) {
-  color: #339999
-}
-treechildren::-moz-tree-row(lc-339999, selected, focus), .blc-339999 {
-  background-color: #339999 !important;
-}
-.blc-339999 {
-  border-color: #339999;
-}
-
-treechildren::-moz-tree-cell-text(lc-336666), .lc-336666:not([_moz-menuactive]) {
-  color: #336666
-}
-treechildren::-moz-tree-row(lc-336666, selected, focus), .blc-336666 {
-  background-color: #336666 !important;
-}
-.blc-336666 {
-  border-color: #336666;
-}
-
-treechildren::-moz-tree-cell-text(lc-003333), .lc-003333:not([_moz-menuactive]) {
-  color: #003333
-}
-treechildren::-moz-tree-row(lc-003333, selected, focus), .blc-003333 {
-  background-color: #003333 !important;
-}
-.blc-003333 {
-  border-color: #003333;
-}
-
-treechildren::-moz-tree-cell-text(lc-CCFFFF), .lc-CCFFFF:not([_moz-menuactive]) {
-  color: #CCFFFF
-}
-treechildren::-moz-tree-row(lc-CCFFFF, selected, focus), .blc-CCFFFF {
-  background-color: #CCFFFF !important;
-}
-.blc-CCFFFF {
-  border-color: #CCFFFF;
-}
-
-treechildren::-moz-tree-cell-text(lc-66FFFF), .lc-66FFFF:not([_moz-menuactive]) {
-  color: #66FFFF
-}
-treechildren::-moz-tree-row(lc-66FFFF, selected, focus), .blc-66FFFF {
-  background-color: #66FFFF !important;
-}
-.blc-66FFFF {
-  border-color: #66FFFF;
-}
-
-treechildren::-moz-tree-cell-text(lc-33CCFF), .lc-33CCFF:not([_moz-menuactive]) {
-  color: #33CCFF
-}
-treechildren::-moz-tree-row(lc-33CCFF, selected, focus), .blc-33CCFF {
-  background-color: #33CCFF !important;
-}
-.blc-33CCFF {
-  border-color: #33CCFF;
-}
-
-treechildren::-moz-tree-cell-text(lc-3366FF), .lc-3366FF:not([_moz-menuactive]) {
-  color: #3366FF
-}
-treechildren::-moz-tree-row(lc-3366FF, selected, focus), .blc-3366FF {
-  background-color: #3366FF !important;
-}
-.blc-3366FF {
-  border-color: #3366FF;
-}
-
-treechildren::-moz-tree-cell-text(lc-3333FF), .lc-3333FF:not([_moz-menuactive]) {
-  color: #3333FF
-}
-treechildren::-moz-tree-row(lc-3333FF, selected, focus), .blc-3333FF {
-  background-color: #3333FF !important;
-}
-.blc-3333FF {
-  border-color: #3333FF;
-}
-
-treechildren::-moz-tree-cell-text(lc-000099), .lc-000099:not([_moz-menuactive]) {
-  color: #000099
-}
-treechildren::-moz-tree-row(lc-000099, selected, focus), .blc-000099 {
-  background-color: #000099 !important;
-}
-.blc-000099 {
-  border-color: #000099;
-}
-
-treechildren::-moz-tree-cell-text(lc-000066), .lc-000066:not([_moz-menuactive]) {
-  color: #000066
-}
-treechildren::-moz-tree-row(lc-000066, selected, focus), .blc-000066 {
-  background-color: #000066 !important;
-}
-.blc-000066 {
-  border-color: #000066;
-}
-
-treechildren::-moz-tree-cell-text(lc-CCCCFF), .lc-CCCCFF:not([_moz-menuactive]) {
-  color: #CCCCFF
-}
-treechildren::-moz-tree-row(lc-CCCCFF, selected, focus), .blc-CCCCFF {
-  background-color: #CCCCFF !important;
-}
-.blc-CCCCFF {
-  border-color: #CCCCFF;
-}
-
-treechildren::-moz-tree-cell-text(lc-9999FF), .lc-9999FF:not([_moz-menuactive]) {
-  color: #9999FF
-}
-treechildren::-moz-tree-row(lc-9999FF, selected, focus), .blc-9999FF {
-  background-color: #9999FF !important;
-}
-.blc-9999FF {
-  border-color: #9999FF;
-}
-
-treechildren::-moz-tree-cell-text(lc-6666CC), .lc-6666CC:not([_moz-menuactive]) {
-  color: #6666CC
-}
-treechildren::-moz-tree-row(lc-6666CC, selected, focus), .blc-6666CC {
-  background-color: #6666CC !important;
-}
-.blc-6666CC {
-  border-color: #6666CC;
-}
-
-treechildren::-moz-tree-cell-text(lc-6633FF), .lc-6633FF:not([_moz-menuactive]) {
-  color: #6633FF
-}
-treechildren::-moz-tree-row(lc-6633FF, selected, focus), .blc-6633FF {
-  background-color: #6633FF !important;
-}
-.blc-6633FF {
-  border-color: #6633FF;
-}
-
-treechildren::-moz-tree-cell-text(lc-6600CC), .lc-6600CC:not([_moz-menuactive]) {
-  color: #6600CC
-}
-treechildren::-moz-tree-row(lc-6600CC, selected, focus), .blc-6600CC {
-  background-color: #6600CC !important;
-}
-.blc-6600CC {
-  border-color: #6600CC;
-}
-
-treechildren::-moz-tree-cell-text(lc-333399), .lc-333399:not([_moz-menuactive]) {
-  color: #333399
-}
-treechildren::-moz-tree-row(lc-333399, selected, focus), .blc-333399 {
-  background-color: #333399 !important;
-}
-.blc-333399 {
-  border-color: #333399;
-}
-
-treechildren::-moz-tree-cell-text(lc-330099), .lc-330099:not([_moz-menuactive]) {
-  color: #330099
-}
-treechildren::-moz-tree-row(lc-330099, selected, focus), .blc-330099 {
-  background-color: #330099 !important;
-}
-.blc-330099 {
-  border-color: #330099;
-}
-
-treechildren::-moz-tree-cell-text(lc-FFCCFF), .lc-FFCCFF:not([_moz-menuactive]) {
-  color: #FFCCFF
-}
-treechildren::-moz-tree-row(lc-FFCCFF, selected, focus), .blc-FFCCFF {
-  background-color: #FFCCFF !important;
-}
-.blc-FFCCFF {
-  border-color: #FFCCFF;
-}
-
-treechildren::-moz-tree-cell-text(lc-FF99FF), .lc-FF99FF:not([_moz-menuactive]) {
-  color: #FF99FF
-}
-treechildren::-moz-tree-row(lc-FF99FF, selected, focus), .blc-FF99FF {
-  background-color: #FF99FF !important;
-}
-.blc-FF99FF {
-  border-color: #FF99FF;
-}
-
-treechildren::-moz-tree-cell-text(lc-CC66CC), .lc-CC66CC:not([_moz-menuactive]) {
-  color: #CC66CC
-}
-treechildren::-moz-tree-row(lc-CC66CC, selected, focus), .blc-CC66CC {
-  background-color: #CC66CC !important;
-}
-.blc-CC66CC {
-  border-color: #CC66CC;
-}
-
-treechildren::-moz-tree-cell-text(lc-CC33CC), .lc-CC33CC:not([_moz-menuactive]) {
-  color: #CC33CC
-}
-treechildren::-moz-tree-row(lc-CC33CC, selected, focus), .blc-CC33CC {
-  background-color: #CC33CC !important;
-}
-.blc-CC33CC {
-  border-color: #CC33CC;
-}
-
-treechildren::-moz-tree-cell-text(lc-993399), .lc-993399:not([_moz-menuactive]) {
-  color: #993399
-}
-treechildren::-moz-tree-row(lc-993399, selected, focus), .blc-993399 {
-  background-color: #993399 !important;
-}
-.blc-993399 {
-  border-color: #993399;
-}
-
-treechildren::-moz-tree-cell-text(lc-663366), .lc-663366:not([_moz-menuactive]) {
-  color: #663366
-}
-treechildren::-moz-tree-row(lc-663366, selected, focus), .blc-663366 {
-  background-color: #663366 !important;
-}
-.blc-663366 {
-  border-color: #663366;
-}
-
-treechildren::-moz-tree-cell-text(lc-330033), .lc-330033:not([_moz-menuactive]) {
-  color: #330033
-}
-treechildren::-moz-tree-row(lc-330033, selected, focus), .blc-330033 {
-  background-color: #330033 !important;
-}
-.blc-330033 {
-  border-color: #330033;
-}
-
-treechildren::-moz-tree-cell-text(lc-white, selected, focus) {
-  color: #FFFFFF;
-}
-treechildren::-moz-tree-cell-text(lc-black, selected, focus), .blc-black {
-  color: #000000;
-}
-
-@media (-moz-windows-default-theme) {
-  treechildren::-moz-tree-row(lc-CCCCCC, selected, focus) {
-    border-color: #CCCCCC;
-    background: linear-gradient(rgba(204, 204, 204, .5),
-                                rgba(204, 204, 204, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-CCCCCC, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-C0C0C0, selected, focus) {
-    border-color: #C0C0C0;
-    background: linear-gradient(rgba(192, 192, 192, .5),
-                                rgba(192, 192, 192, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-C0C0C0, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-999999, selected, focus) {
-    border-color: #999999;
-    background: linear-gradient(rgba(153, 153, 153, .5),
-                                rgba(153, 153, 153, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-999999, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-666666, selected, focus) {
-    border-color: #666666;
-    background: linear-gradient(rgba(102, 102, 102, .5),
-                                rgba(102, 102, 102, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-666666, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-333333, selected, focus) {
-    border-color: #333333;
-    background: linear-gradient(rgba(51, 51, 51, .5), rgba(51, 51, 51, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-000000, selected, focus) {
-    border-color: #000;
-    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-FFCCCC, selected, focus) {
-    border-color: #FFCCCC;
-    background: linear-gradient(rgba(255, 204, 204, .5),
-                                rgba(255, 204, 204, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-FFCCCC, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-FF6666, selected, focus) {
-    border-color: #FF6666;
-    background: linear-gradient(rgba(255, 102, 102, .5),
-                                rgba(255, 102, 102, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-FF6666, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-FF0000, selected, focus) {
-    border-color: #FF0000;
-    background: linear-gradient(rgba(255, 0, 0, .5), rgba(255, 0, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-CC0000, selected, focus) {
-    border-color: #CC0000;
-    background: linear-gradient(rgba(204, 0, 0, .5), rgba(204, 0, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-990000, selected, focus) {
-    border-color: #990000;
-    background: linear-gradient(rgba(153, 0, 0, .5), rgba(153, 0, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-660000, selected, focus) {
-    border-color: #660000;
-    background: linear-gradient(rgba(102, 0, 0, .5), rgba(102, 0, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-330000, selected, focus) {
-    border-color: #330000;
-    background: linear-gradient(rgba(51, 0, 0, .5), rgba(51, 0, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-FFCC99, selected, focus) {
-    border-color: #FFCC99;
-    background: linear-gradient(rgba(255, 204, 153, .5),
-                                rgba(255, 204, 153, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-FFCC99, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-FF9966, selected, focus) {
-    border-color: #FF9966;
-    background: linear-gradient(rgba(255, 153, 102, .5),
-                                rgba(255, 153, 102, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-FF9966, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-FF9900, selected, focus) {
-    border-color: #FF9900;
-    background: linear-gradient(rgba(255, 153, 0, .5), rgba(255, 153, 0, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-FF9900, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-FF6600, selected, focus) {
-    border-color: #FF6600;
-    background: linear-gradient(rgba(255, 102, 0, .5), rgba(255, 102, 0, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-FF6600, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-CC6600, selected, focus) {
-    border-color: #CC6600;
-    background: linear-gradient(rgba(204, 102, 0, .5), rgba(204, 102, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-993300, selected, focus) {
-    border-color: #993300;
-    background: linear-gradient(rgba(153, 51, 0, .5), rgba(153, 51, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-663300, selected, focus) {
-    border-color: #663300;
-    background: linear-gradient(rgba(102, 51, 0, .5), rgba(102, 51, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-FFFF99, selected, focus) {
-    border-color: #FFFF99;
-    background: linear-gradient(rgba(255, 255, 153, .5),
-                                rgba(255, 255, 153, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-FFFF99, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-FFFF66, selected, focus) {
-    border-color: #FFFF66;
-    background: linear-gradient(rgba(255, 255, 102, .5),
-                                rgba(255, 255, 102, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-FFFF66, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-FFCC66, selected, focus) {
-    border-color: #FFCC66;
-    background: linear-gradient(rgba(255, 204, 102, .5),
-                                rgba(255, 204, 102, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-FFCC66, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-FFCC33, selected, focus) {
-    border-color: #FFCC33;
-    background: linear-gradient(rgba(255, 204, 51, .5),
-                                rgba(255, 204, 51, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-FFCC33, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-CC9933, selected, focus) {
-    border-color: #CC9933;
-    background: linear-gradient(rgba(204, 153, 51, .5),
-                                rgba(204, 153, 51, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-CC9933, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-996633, selected, focus) {
-    border-color: #996633;
-    background: linear-gradient(rgba(153, 102, 51, .5),
-                                rgba(153, 102, 51, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-663333, selected, focus) {
-    border-color: #663333;
-    background: linear-gradient(rgba(102, 51, 51, .5), rgba(102, 51, 51, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-FFFFCC, selected, focus) {
-    border-color: #FFFFCC;
-    background: linear-gradient(rgba(255, 255, 204, .5),
-                                rgba(255, 255, 204, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-FFFFCC, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-FFFF33, selected, focus) {
-    border-color: #FFFF33;
-    background: linear-gradient(rgba(255, 255, 51, .5),
-                                rgba(255, 255, 51, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-FFFF33, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-FFFF00, selected, focus) {
-    border-color: #FFFF00;
-    background: linear-gradient(rgba(255, 255, 0, .5), rgba(255, 255, 0, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-FFFF00, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-FFCC00, selected, focus) {
-    border-color: #FFCC00;
-    background: linear-gradient(rgba(255, 204, 0, .5), rgba(255, 204, 0, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-FFCC00, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-999900, selected, focus) {
-    border-color: #999900;
-    background: linear-gradient(rgba(153, 153, 0, .5), rgba(153, 153, 0, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-999900, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-666600, selected, focus) {
-    border-color: #666600;
-    background: linear-gradient(rgba(102, 102, 0, .5), rgba(102, 102, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-333300, selected, focus) {
-    border-color: #333300;
-    background: linear-gradient(rgba(51, 51, 0, .5), rgba(51, 51, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-99FF99, selected, focus) {
-    border-color: #99FF99;
-    background: linear-gradient(rgba(153, 255, 153, .5),
-                                rgba(153, 255, 153, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-99FF99, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-66FF99, selected, focus) {
-    border-color: #66FF99;
-    background: linear-gradient(rgba(102, 255, 153, .5),
-                                rgba(102, 255, 153, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-66FF99, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-33FF33, selected, focus) {
-    border-color: #33FF33;
-    background: linear-gradient(rgba(51, 255, 51, .5), rgba(51, 255, 51, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-33FF33, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-33CC00, selected, focus) {
-    border-color: #33CC00;
-    background: linear-gradient(rgba(51, 204, 0, .5), rgba(51, 204, 0, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-33CC00, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-009900, selected, focus) {
-    border-color: #009900;
-    background: linear-gradient(rgba(0, 153, 0, .5), rgba(0, 153, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-006600, selected, focus) {
-    border-color: #006600;
-    background: linear-gradient(rgba(0, 102, 0, .5), rgba(0, 102, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-003300, selected, focus) {
-    border-color: #003300;
-    background: linear-gradient(rgba(0, 51, 0, .5), rgba(0, 51, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-99FFFF, selected, focus) {
-    border-color: #99FFFF;
-    background: linear-gradient(rgba(153, 255, 255, .5),
-                                rgba(153, 255, 255, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-99FFFF, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-33FFFF, selected, focus) {
-    border-color: #33FFFF;
-    background: linear-gradient(rgba(51, 255, 255, .5),
-                                rgba(51, 255, 255, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-33FFFF, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-66CCCC, selected, focus) {
-    border-color: #66CCCC;
-    background: linear-gradient(rgba(102, 204, 204, .5),
-                                rgba(102, 204, 204, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-66CCCC, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-00CCCC, selected, focus) {
-    border-color: #00CCCC;
-    background: linear-gradient(rgba(0, 204, 204, .5), rgba(0, 204, 204, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-00CCCC, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-339999, selected, focus) {
-    border-color: #339999;
-    background: linear-gradient(rgba(51, 153, 153, .5),
-                                rgba(51, 153, 153, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-339999, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-336666, selected, focus) {
-    border-color: #336666;
-    background: linear-gradient(rgba(51, 102, 102, .5),
-                                rgba(51, 102, 102, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-003333, selected, focus) {
-    border-color: #003333;
-    background: linear-gradient(rgba(0, 51, 51, .5), rgba(0, 51, 51, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-CCFFFF, selected, focus) {
-    border-color: #CCFFFF;
-    background: linear-gradient(rgba(204, 255, 255, .5),
-                                rgba(204, 255, 255, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-CCFFFF, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-66FFFF, selected, focus) {
-    border-color: #66FFFF;
-    background: linear-gradient(rgba(102, 255, 255, .5),
-                                rgba(102, 255, 255, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-66FFFF, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-33CCFF, selected, focus) {
-    border-color: #33CCFF;
-    background: linear-gradient(rgba(51, 204, 255, .5),
-                                rgba(51, 204, 255, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-33CCFF, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-3366FF, selected, focus) {
-    border-color: #3366FF;
-    background: linear-gradient(rgba(51, 102, 255, .5),
-                                rgba(51, 102, 255, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-3333FF, selected, focus) {
-    border-color: #3333FF;
-    background: linear-gradient(rgba(51, 51, 255, .5), rgba(51, 51, 255, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-000099, selected, focus) {
-    border-color: #000099;
-    background: linear-gradient(rgba(0, 0, 153, .5), rgba(0, 0, 153, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-000066, selected, focus) {
-    border-color: #000066;
-    background: linear-gradient(rgba(0, 0, 102, .5), rgba(0, 0, 102, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-CCCCFF, selected, focus) {
-    border-color: #CCCCFF;
-    background: linear-gradient(rgba(204, 204, 255, .5),
-                                rgba(204, 204, 255, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-CCCCFF, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-9999FF, selected, focus) {
-    border-color: #9999FF;
-    background: linear-gradient(rgba(153, 153, 255, .5),
-                                rgba(153, 153, 255, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-9999FF, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-6666CC, selected, focus) {
-    border-color: #6666CC;
-    background: linear-gradient(rgba(102, 102, 204, .5),
-                                rgba(102, 102, 204, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-6633FF, selected, focus) {
-    border-color: #6633FF;
-    background: linear-gradient(rgba(102, 51, 255, .5),
-                                rgba(102, 51, 255, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-6600CC, selected, focus) {
-    border-color: #6600CC;
-    background: linear-gradient(rgba(102, 0, 204, .5), rgba(102, 0, 204, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-333399, selected, focus) {
-    border-color: #333399;
-    background: linear-gradient(rgba(51, 51, 153, .5), rgba(51, 51, 153, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-330099, selected, focus) {
-    border-color: #330099;
-    background: linear-gradient(rgba(51, 0, 153, .5), rgba(51, 0, 153, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-FFCCFF, selected, focus) {
-    border-color: #FFCCFF;
-    background: linear-gradient(rgba(255, 204, 255, .5),
-                                rgba(255, 204, 255, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-FFCCFF, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-FF99FF, selected, focus) {
-    border-color: #FF99FF;
-    background: linear-gradient(rgba(255, 153, 255, .5),
-                                rgba(255, 153, 255, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-FF99FF, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-CC66CC, selected, focus) {
-    border-color: #CC66CC;
-    background: linear-gradient(rgba(204, 102, 204, .5),
-                                rgba(204, 102, 204, .5)) !important;
-  }
-  treechildren::-moz-tree-cell-text(lc-CC66CC, selected, focus) {
-    color: #000;
-  }
-
-  treechildren::-moz-tree-row(lc-CC33CC, selected, focus) {
-    border-color: #CC33CC;
-    background: linear-gradient(rgba(204, 51, 204, .5),
-                                rgba(204, 51, 204, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-993399, selected, focus) {
-    border-color: #993399;
-    background: linear-gradient(rgba(153, 51, 153, .5),
-                                rgba(153, 51, 153, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-663366, selected, focus) {
-    border-color: #663366;
-    background: linear-gradient(rgba(102, 51, 102, .5),
-                                rgba(102, 51, 102, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-330033, selected, focus) {
-    border-color: #330033;
-    background: linear-gradient(rgba(51, 0, 51, .5), rgba(51, 0, 51, .5)) !important;
-  }
-}
-
-@media (-moz-os-version: windows-win7) and (-moz-windows-default-theme) {
-  treechildren::-moz-tree-row(lc-CCCCCC, selected, focus) {
-    background: linear-gradient(rgba(204, 204, 204, .28),
-                                rgba(204, 204, 204, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-C0C0C0, selected, focus) {
-    background: linear-gradient(rgba(192, 192, 192, .28),
-                                rgba(192, 192, 192, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-999999, selected, focus) {
-    background: linear-gradient(rgba(153, 153, 153, .28),
-                                rgba(153, 153, 153, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-666666, selected, focus) {
-    background: linear-gradient(rgba(102, 102, 102, .28),
-                                rgba(102, 102, 102, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-333333, selected, focus) {
-    background: linear-gradient(rgba(51, 51, 51, .28), rgba(51, 51, 51, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-000000, selected, focus) {
-    background: linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-FFCCCC, selected, focus) {
-    background: linear-gradient(rgba(255, 204, 204, .28),
-                                rgba(255, 204, 204, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-FF6666, selected, focus) {
-    background: linear-gradient(rgba(255, 102, 102, .28),
-                                rgba(255, 102, 102, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-FF0000, selected, focus) {
-    background: linear-gradient(rgba(255, 0, 0, .28), rgba(255, 0, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-CC0000, selected, focus) {
-    background: linear-gradient(rgba(204, 0, 0, .28), rgba(204, 0, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-990000, selected, focus) {
-    background: linear-gradient(rgba(153, 0, 0, .28), rgba(153, 0, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-660000, selected, focus) {
-    background: linear-gradient(rgba(102, 0, 0, .28), rgba(102, 0, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-330000, selected, focus) {
-    background: linear-gradient(rgba(51, 0, 0, .28), rgba(51, 0, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-FFCC99, selected, focus) {
-    background: linear-gradient(rgba(255, 204, 153, .28),
-                                rgba(255, 204, 153, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-FF9966, selected, focus) {
-    background: linear-gradient(rgba(255, 153, 102, .28),
-                                rgba(255, 153, 102, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-FF9900, selected, focus) {
-    background: linear-gradient(rgba(255, 153, 0, .28), rgba(255, 153, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-FF6600, selected, focus) {
-    background: linear-gradient(rgba(255, 102, 0, .28), rgba(255, 102, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-CC6600, selected, focus) {
-    background: linear-gradient(rgba(204, 102, 0, .28), rgba(204, 102, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-993300, selected, focus) {
-    background: linear-gradient(rgba(153, 51, 0, .28), rgba(153, 51, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-663300, selected, focus) {
-    background: linear-gradient(rgba(102, 51, 0, .28), rgba(102, 51, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-FFFF99, selected, focus) {
-    background: linear-gradient(rgba(255, 255, 153, .28),
-                                rgba(255, 255, 153, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-FFFF66, selected, focus) {
-    background: linear-gradient(rgba(255, 255, 102, .28),
-                                rgba(255, 255, 102, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-FFCC66, selected, focus) {
-    background: linear-gradient(rgba(255, 204, 102, .28),
-                                rgba(255, 204, 102, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-FFCC33, selected, focus) {
-    background: linear-gradient(rgba(255, 204, 51, .28),
-                                rgba(255, 204, 51, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-CC9933, selected, focus) {
-    background: linear-gradient(rgba(204, 153, 51, .28),
-                                rgba(204, 153, 51, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-996633, selected, focus) {
-    background: linear-gradient(rgba(153, 102, 51, .28),
-                                rgba(153, 102, 51, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-663333, selected, focus) {
-    background: linear-gradient(rgba(102, 51, 51, .28), rgba(102, 51, 51, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-FFFFCC, selected, focus) {
-    background: linear-gradient(rgba(255, 255, 204, .28),
-                                rgba(255, 255, 204, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-FFFF33, selected, focus) {
-    background: linear-gradient(rgba(255, 255, 51, .28),
-                                rgba(255, 255, 51, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-FFFF00, selected, focus) {
-    background: linear-gradient(rgba(255, 255, 0, .28), rgba(255, 255, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-FFCC00, selected, focus) {
-    background: linear-gradient(rgba(255, 204, 0, .28), rgba(255, 204, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-999900, selected, focus) {
-    background: linear-gradient(rgba(153, 153, 0, .28), rgba(153, 153, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-666600, selected, focus) {
-    background: linear-gradient(rgba(102, 102, 0, .28), rgba(102, 102, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-333300, selected, focus) {
-    background: linear-gradient(rgba(51, 51, 0, .28), rgba(51, 51, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-99FF99, selected, focus) {
-    background: linear-gradient(rgba(153, 255, 153, .28),
-                                rgba(153, 255, 153, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-66FF99, selected, focus) {
-    background: linear-gradient(rgba(102, 255, 153, .28),
-                                rgba(102, 255, 153, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-33FF33, selected, focus) {
-    background: linear-gradient(rgba(51, 255, 51, .28), rgba(51, 255, 51, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-33CC00, selected, focus) {
-    background: linear-gradient(rgba(51, 204, 0, .28), rgba(51, 204, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-009900, selected, focus) {
-    background: linear-gradient(rgba(0, 153, 0, .28), rgba(0, 153, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-006600, selected, focus) {
-    background: linear-gradient(rgba(0, 102, 0, .28), rgba(0, 102, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-003300, selected, focus) {
-    background: linear-gradient(rgba(0, 51, 0, .28), rgba(0, 51, 0, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-99FFFF, selected, focus) {
-    background: linear-gradient(rgba(153, 255, 255, .28),
-                                rgba(153, 255, 255, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-33FFFF, selected, focus) {
-    background: linear-gradient(rgba(51, 255, 255, .28),
-                                rgba(51, 255, 255, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-66CCCC, selected, focus) {
-    background: linear-gradient(rgba(102, 204, 204, .28),
-                                rgba(102, 204, 204, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-00CCCC, selected, focus) {
-    background: linear-gradient(rgba(0, 204, 204, .28), rgba(0, 204, 204, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-339999, selected, focus) {
-    background: linear-gradient(rgba(51, 153, 153, .28),
-                                rgba(51, 153, 153, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-336666, selected, focus) {
-    background: linear-gradient(rgba(51, 102, 102, .28),
-                                rgba(51, 102, 102, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-003333, selected, focus) {
-    background: linear-gradient(rgba(0, 51, 51, .28), rgba(0, 51, 51, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-CCFFFF, selected, focus) {
-    background: linear-gradient(rgba(204, 255, 255, .28),
-                                rgba(204, 255, 255, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-66FFFF, selected, focus) {
-    background: linear-gradient(rgba(102, 255, 255, .28),
-                                rgba(102, 255, 255, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-33CCFF, selected, focus) {
-    background: linear-gradient(rgba(51, 204, 255, .28),
-                                rgba(51, 204, 255, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-3366FF, selected, focus) {
-    border-color: #3366FF;
-    background: linear-gradient(rgba(51, 102, 255, .28),
-                                rgba(51, 102, 255, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-3333FF, selected, focus) {
-    background: linear-gradient(rgba(51, 51, 255, .28), rgba(51, 51, 255, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-000099, selected, focus) {
-    background: linear-gradient(rgba(0, 0, 153, .28), rgba(0, 0, 153, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-000066, selected, focus) {
-    background: linear-gradient(rgba(0, 0, 102, .28), rgba(0, 0, 102, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-CCCCFF, selected, focus) {
-    background: linear-gradient(rgba(204, 204, 255, .28),
-                                rgba(204, 204, 255, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-9999FF, selected, focus) {
-    background: linear-gradient(rgba(153, 153, 255, .28),
-                                rgba(153, 153, 255, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-6666CC, selected, focus) {
-    background: linear-gradient(rgba(102, 102, 204, .28),
-                                rgba(102, 102, 204, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-6633FF, selected, focus) {
-    background: linear-gradient(rgba(102, 51, 255, .28),
-                                rgba(102, 51, 255, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-6600CC, selected, focus) {
-    background: linear-gradient(rgba(102, 0, 204, .28), rgba(102, 0, 204, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-333399, selected, focus) {
-    background: linear-gradient(rgba(51, 51, 153, .28), rgba(51, 51, 153, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-330099, selected, focus) {
-    background: linear-gradient(rgba(51, 0, 153, .28), rgba(51, 0, 153, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-FFCCFF, selected, focus) {
-    background: linear-gradient(rgba(255, 204, 255, .28),
-                                rgba(255, 204, 255, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-FF99FF, selected, focus) {
-    background: linear-gradient(rgba(255, 153, 255, .28),
-                                rgba(255, 153, 255, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-CC66CC, selected, focus) {
-    background: linear-gradient(rgba(204, 102, 204, .28),
-                                rgba(204, 102, 204, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-CC33CC, selected, focus) {
-    background: linear-gradient(rgba(204, 51, 204, .28),
-                                rgba(204, 51, 204, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-993399, selected, focus) {
-    background: linear-gradient(rgba(153, 51, 153, .28),
-                                rgba(153, 51, 153, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-663366, selected, focus) {
-    background: linear-gradient(rgba(102, 51, 102, .28),
-                                rgba(102, 51, 102, .5)) !important;
-  }
-
-  treechildren::-moz-tree-row(lc-330033, selected, focus) {
-    background: linear-gradient(rgba(51, 0, 51, .28), rgba(51, 0, 51, .5)) !important;
-  }
-}
--- a/mailnews/base/public/nsIMsgTagService.idl
+++ b/mailnews/base/public/nsIMsgTagService.idl
@@ -44,16 +44,17 @@ interface nsIMsgTagService : nsISupports
   // get the key representation of a given tag
   ACString getKeyForTag(in AString tag);
   // get the first key by ordinal order
   ACString getTopKey(in ACString keyList);
   // support functions for single tag aspects
   AString getTagForKey(in ACString key); // look up the tag for a key.
   void setTagForKey(in ACString key, in AString tag); // this can be used to "rename" a tag
   ACString getColorForKey(in ACString key);
+  AString getSelectorForKey(in ACString key);  // return wide string to avoid conversion
   void setColorForKey(in ACString key, in ACString color);
   ACString getOrdinalForKey(in ACString key);
   void setOrdinalForKey(in ACString key, in ACString ordinal);
   // delete a tag from the list of known tags (but not from any messages)
   void deleteKey(in ACString key);
   // get all known tags
   void getAllTags(out unsigned long count,
                   [retval, array, size_is(count)] out nsIMsgTag tagArray);
--- a/mailnews/base/src/nsMsgDBView.cpp
+++ b/mailnews/base/src/nsMsgDBView.cpp
@@ -243,48 +243,39 @@ nsMsgDBView::GetPrefLocalizedString(cons
   NS_ENSURE_SUCCESS(rv, rv);
   pls->ToString(getter_Copies(ucsval));
   aResult = ucsval.get();
   return rv;
 }
 
 nsresult
 nsMsgDBView::AppendKeywordProperties(const nsACString& keywords,
-                                     nsAString& properties,
-                                     bool addSelectedTextProperty)
-{
-  // Get the top most keyword's color and append that as a property.
+                                     nsAString& properties)
+{
+  // Get the top most keyword's CSS selector and append that as a property.
   nsresult rv;
   if (!mTagService)
   {
     mTagService = do_GetService(NS_MSGTAGSERVICE_CONTRACTID, &rv);
     NS_ENSURE_SUCCESS(rv, rv);
   }
 
   nsCString topKey;
   rv = mTagService->GetTopKey(keywords, topKey);
   NS_ENSURE_SUCCESS(rv, rv);
   if (topKey.IsEmpty())
     return NS_OK;
 
-  nsCString color;
-  rv = mTagService->GetColorForKey(topKey, color);
-  if (NS_SUCCEEDED(rv) && !color.IsEmpty())
-  {
-    if (addSelectedTextProperty)
-    {
-      if (color.EqualsLiteral(LABEL_COLOR_WHITE_STRING))
-        properties.AppendLiteral(" lc-black");
-      else
-        properties.AppendLiteral(" lc-white");
-    }
-    color.Replace(0, 1, NS_LITERAL_CSTRING(LABEL_COLOR_STRING));
-    properties.AppendASCII(color.get());
-  }
-
+  nsString selector;
+  rv = mTagService->GetSelectorForKey(topKey, selector);
+  if (NS_SUCCEEDED(rv))
+  {
+    properties.Append(' ');
+    properties.Append(selector);
+  }
   return rv;
 }
 
 ///////////////////////////////////////////////////////////////////////////
 // nsITreeView Implementation Methods (and helper methods)
 ///////////////////////////////////////////////////////////////////////////
 
 static nsresult
@@ -1432,20 +1423,22 @@ nsMsgDBView::GetRowProperties(int32_t in
   if (NS_FAILED(rv) || !msgHdr)
   {
     ClearHdrCache();
     return NS_MSG_INVALID_DBVIEW_INDEX;
   }
 
   nsCString keywordProperty;
   FetchRowKeywords(index, msgHdr, keywordProperty);
-  if (keywordProperty.IsEmpty())
+  if (keywordProperty.IsEmpty()) {
     properties.AppendLiteral(" untagged");
-  else
-    AppendKeywordProperties(keywordProperty, properties, false);
+  } else {
+    AppendKeywordProperties(keywordProperty, properties);
+    properties.AppendLiteral(" tagged");
+  }
 
   // Give the custom column handlers a chance to style the row.
   for (int i = 0; i < m_customColumnHandlers.Count(); i++)
   {
     nsString extra;
     m_customColumnHandlers[i]->GetRowProperties(index, extra);
     if (!extra.IsEmpty())
     {
@@ -1565,20 +1558,22 @@ nsMsgDBView::GetCellProperties(int32_t a
     else
       properties.AppendLiteral(" notjunk");
 
     NS_ASSERTION(NS_SUCCEEDED(rv), "Converting junkScore to integer failed.");
   }
 
   nsCString keywords;
   FetchRowKeywords(aRow, msgHdr, keywords);
-  if (keywords.IsEmpty())
+  if (keywords.IsEmpty()) {
     properties.AppendLiteral(" untagged");
-  else
-    AppendKeywordProperties(keywords, properties, true);
+  } else {
+    AppendKeywordProperties(keywords, properties);
+    properties.AppendLiteral(" tagged");
+  }
 
   // This is a double fetch of the keywords property since we also fetch
   // it for the tags - do we want to do this?
   // I'm not sure anyone uses the kw- property, though it could be nice
   // for people wanting to extend the thread pane.
   nsCString keywordProperty;
   msgHdr->GetStringProperty("keywords", getter_Copies(keywordProperty));
   if (!keywordProperty.IsEmpty())
--- a/mailnews/base/src/nsMsgDBView.h
+++ b/mailnews/base/src/nsMsgDBView.h
@@ -64,19 +64,16 @@ public:
 #define MSG_VIEW_FLAG_OUTGOING 0x2000000
 #define MSG_VIEW_FLAG_INCOMING 0x1000000
 
 // There currently only 5 labels defined.
 #define PREF_LABELS_MAX 5
 #define PREF_LABELS_DESCRIPTION  "mailnews.labels.description."
 #define PREF_LABELS_COLOR  "mailnews.labels.color."
 
-#define LABEL_COLOR_STRING " lc-"
-#define LABEL_COLOR_WHITE_STRING "#FFFFFF"
-
 struct IdUint32
 {
   nsMsgKey    id;
   uint32_t    bits;
   uint32_t    dword;
   nsIMsgFolder* folder;
 };
 
@@ -402,18 +399,17 @@ protected:
                                int32_t numIndices,
                                nsMsgViewIndex *resultIndex,
                                bool *resultToggleState);
   bool OfflineMsgSelected(nsMsgViewIndex * indices, int32_t numIndices);
   bool NonDummyMsgSelected(nsMsgViewIndex * indices, int32_t numIndices);
   char16_t * GetString(const char16_t *aStringName);
   nsresult GetPrefLocalizedString(const char *aPrefName, nsString& aResult);
   nsresult AppendKeywordProperties(const nsACString& keywords,
-                                   nsAString& properties,
-                                   bool addSelectedTextProperty);
+                                   nsAString& properties);
   nsresult InitLabelStrings(void);
   nsresult CopyDBView(nsMsgDBView *aNewMsgDBView,
                       nsIMessenger *aMessengerInstance,
                       nsIMsgWindow *aMsgWindow,
                       nsIMsgDBViewCommandUpdater *aCmdUpdater);
   void InitializeLiterals();
   virtual int32_t FindLevelInThread(nsIMsgDBHdr *msgHdr,
                                     nsMsgViewIndex startOfThread,
--- a/mailnews/base/src/nsMsgTagService.cpp
+++ b/mailnews/base/src/nsMsgTagService.cpp
@@ -279,16 +279,57 @@ NS_IMETHODIMP nsMsgTagService::GetColorF
   prefName.AppendLiteral(TAG_PREF_SUFFIX_COLOR);
   nsCString color;
   nsresult rv = m_tagPrefBranch->GetCharPref(prefName.get(), color);
   if (NS_SUCCEEDED(rv))
     _retval = color;
   return NS_OK;
 }
 
+/* long getSelectorForKey (in ACString key, out AString selector); */
+NS_IMETHODIMP nsMsgTagService::GetSelectorForKey(const nsACString &key, nsAString &_retval)
+{
+  // Our keys are the result of MUTF-7 encoding. For CSS selectors we need
+  // to reduce this to 0-9A-Za-z_ with a leading alpha character.
+  // We encode non-alphanumeric characters using _ as an escape character
+  // and start with a leading T in all cases. This way users defining tags
+  // "selected" or "focus" don't collide with inbuilt "selected" or "focus".
+
+  // Calculate length of selector string.
+  const char *in = key.BeginReading();
+  size_t outLen = 1;
+  while (*in) {
+    if (('0' <= *in && *in <= '9') ||
+        ('A' <= *in && *in <= 'Z') ||
+        ('a' <= *in && *in <= 'z')) {
+      outLen++;
+    } else {
+      outLen += 3;
+    }
+    in++;
+  }
+
+  // Now fill selector string.
+  _retval.SetCapacity(outLen);
+  _retval.Assign('T');
+  in = key.BeginReading();
+  while (*in) {
+    if (('0' <= *in && *in <= '9') ||
+        ('A' <= *in && *in <= 'Z') ||
+        ('a' <= *in && *in <= 'z')) {
+      _retval.Append(*in);
+    } else {
+      _retval.AppendPrintf("_%02x", *in);
+    }
+    in++;
+  }
+
+  return NS_OK;
+}
+
 /* void setColorForKey (in ACString key, in ACString color); */
 NS_IMETHODIMP nsMsgTagService::SetColorForKey(const nsACString & key, const nsACString & color)
 {
   nsAutoCString prefName(key);
   ToLowerCase(prefName);
   prefName.AppendLiteral(TAG_PREF_SUFFIX_COLOR);
   if (color.IsEmpty())
   {