accomodate recent XUL 1.0 changes
[themes.git] / EarlyBlue / editor / skin / EditorToolbars.css
index 3c5eecfe22cbb05965324df2f8f12bf79781ec43..2fa2337fdd211b5988476bf85f5269f2666a9831 100755 (executable)
-/* \r
- * The contents of this file are subject to the Netscape Public\r
- * License Version 1.1 (the "License"); you may not use this file\r
- * except in compliance with the License. You may obtain a copy of\r
- * the License at http://www.mozilla.org/NPL/\r
- *  \r
- * Software distributed under the License is distributed on an "AS\r
- * IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or\r
- * implied. See the License for the specific language governing\r
- * rights and limitations under the License.\r
- *  \r
- * The Original Code is Mozilla Communicator client code, released\r
- * March 31, 1998.\r
- * \r
- * The Initial Developer of the Original Code is Netscape\r
- * Communications Corporation. Portions created by Netscape are\r
- * Copyright (C) 1998-1999 Netscape Communications Corporation. All\r
- * Rights Reserved.\r
- * \r
- * Contributor(s): \r
- */\r
-\r
-/* This contains CSS just for editor toolbars */\r
-\r
-#EditorToolbox {\r
-  min-width: 1px;\r
-}\r
-\r
-#FormatToolbar {\r
-  border-bottom: 1px solid #9999CC;\r
-}\r
-\r
-.separator_small { \r
-  width: 1em; \r
-}\r
-\r
-.margin-left-right {\r
-  margin-left:  3px;\r
-  margin-right: 3px;\r
-}\r
-\r
-/* From button.css: */\r
-/* margin: 4px 7px 1px 1px; */\r
-/* We have too many buttons - must be closer! */\r
-\r
-.toolbar, .key-toolbar {\r
-  margin-right: 2px;\r
-}\r
-\r
-.inset-border {\r
-  border: 1px inset CCCCDD;\r
-}\r
-\r
-/* THIS DOESN'T WORK ON <text>! */\r
-.center {\r
-  text-align: center;\r
-}\r
-\r
-/* end of SHOULD GO IN GLOBAL */\r
-\r
-#EditModeToolbar {\r
-  padding:       0px;\r
-  /* Same as "standard" toolbar background */\r
-  border-top:    1px solid #9999CC;\r
-  border-bottom: none;\r
-  margin-bottom: 0px;\r
-  min-width:     1px;\r
-  color:         #000000;\r
-  background-color: #CCD0DD;\r
-  overflow:      hidden;\r
-}\r
-/*\r
-#EditModeToolbar > toolbargrippy {\r
-  height: 100%;\r
-}\r
-*/\r
-/* BORDERS ARE NOT WORKING! global class="plain" is fighting us! */\r
-/* !important in for now as a workaround to above problem! */\r
-button.edit-mode:hover, button.edit-mode:hover:active,\r
-button.edit-mode {\r
-  -moz-border-radius: 0px 0px 7px 7px;\r
-  padding: 0px 4px 1px 4px;\r
-  margin: 0px;\r
-  color: #CCD0DD;\r
-  background-color: #666699;\r
-  border-top: 1px solid #666699 !important; /* Must be same as background */\r
-  border-bottom: 1px solid #9999CC !important;\r
-  border-left: 1px solid #9999CC !important;\r
-  border-right: 1px solid #9999CC !important;\r
-}\r
-\r
-button.edit-mode > .button-internal-box,\r
-button.edit-mode:hover > .button-internal-box,\r
-button.edit-mode:hover:active > .button-internal-box  {\r
-  border: none;\r
-}\r
-\r
-button.edit-mode:hover {\r
-  border:  1px solid #3366FF !important;\r
-}\r
-\r
-button.edit-mode:hover:active {\r
-  padding: 1px 5px 0px 3px;\r
-  border:  1px solid #99CCFF !important;\r
-}\r
-\r
-button.edit-mode[selected="1"] {\r
-  padding: 0px 4px 1px 4px;\r
-  margin: -1px 0px 0px 0px;\r
-/* Not resizing well! - use color instead\r
-  font-weight: bold; \r
-*/\r
-  background-color: #FFFFFF;\r
-  color: #000000;\r
-}\r
-\r
-button.edit-mode[selected="1"]:active,\r
-button.edit-mode[selected="1"]:hover:active {\r
-  padding: 1px 5px 0px 3px;\r
-}\r
-\r
-#NormalModeButton[type="image"] {\r
-  list-style-image:url(chrome://editor/skin/images/editmode-normal.gif); \r
-}\r
-\r
-#TagModeButton[type="image"] {\r
-  list-style-image:url(chrome://editor/skin/images/editmode-tags.gif); \r
-}\r
-#SourceModeButton[type="image"] {\r
-  list-style-image:url(chrome://editor/skin/images/editmode-html.gif); \r
-}\r
-#PreviewModeButton[type="image"] {\r
-  list-style-image:url(chrome://editor/skin/images/editmode-preview.gif); \r
-}\r
-#ToggleEditModeType {\r
-  list-style-image:url(chrome://editor/skin/images/editmode-toggle.gif); \r
-  border: 1px outset #CCD0DD;\r
-}\r
-\r
-#ToggleEditModeType:hover {\r
-  border: 1px solid #99CCFF;\r
-}\r
-\r
-#ToggleEditModeType:hover:active {\r
-  border: 1px inset #99CCFF;\r
-}\r
-\r
-/* Image URLs for all Editor toolbar buttons */\r
-\r
-#boldButton {\r
-  list-style-image:url(chrome://editor/skin/images/bold.gif); \r
-}\r
-\r
-#italicButton {\r
-  list-style-image:url(chrome://editor/skin/images/italic.gif); \r
-}\r
-\r
-#underlineButton {\r
-  list-style-image:url(chrome://editor/skin/images/underline.gif); \r
-}\r
-\r
-#newButton {\r
-       list-style-image:url("chrome://editor/skin/images/newfile.gif");\r
-}\r
-#newButton[disabled="true"] {\r
-       list-style-image:url("chrome://editor/skin/images/newfile_dis.gif");\r
-}\r
-\r
-#openButton {\r
-       list-style-image:url("chrome://editor/skin/images/openfile.gif");\r
-}\r
-#openButton[disabled="true"] {\r
-       list-style-image:url("chrome://editor/skin/images/openfile_dis.gif");\r
-}\r
-\r
-#saveButton {\r
-       list-style-image:url("chrome://editor/skin/images/savefile.gif");\r
-}\r
-#saveButton[disabled="true"] {\r
-       list-style-image:url("chrome://editor/skin/images/savefile_dis.gif");\r
-}\r
-#saveButton[dirty="true"] {\r
-  list-style-image:url(chrome://editor/skin/images/savemod.gif); \r
-}\r
-\r
-#publishButton {\r
-       list-style-image:url("chrome://editor/skin/images/publish.gif");\r
-}\r
-\r
-#previewButton {\r
-       list-style-image:url("chrome://editor/skin/images/preview.gif");\r
-}\r
-#previewButton[disabled="true"] {\r
-       list-style-image:url("chrome://editor/skin/images/preview_dis.gif");\r
-}\r
-\r
-#printButton \r
-  {\r
-         list-style-image      : url("chrome://editor/skin/images/print.gif");\r
-  }\r
-#printButton[disabled="true"] {\r
-       list-style-image:url("chrome://editor/skin/images/print_dis.gif");\r
-}\r
-\r
-#findButton {\r
-       list-style-image:url("chrome://editor/skin/images/find.gif");\r
-}\r
-#findButton[disabled="true"] {\r
-       list-style-image:url("chrome://editor/skin/images/find_dis.gif");\r
-}\r
-\r
-#linkButton {\r
-       list-style-image:url("chrome://editor/skin/images/link.gif");\r
-}\r
-#linkButton[disabled="true"] {\r
-       list-style-image:url("chrome://editor/skin/images/link_dis.gif");\r
-}\r
-\r
-#imageButton {\r
-       list-style-image:url("chrome://editor/skin/images/image.gif");\r
-}\r
-#imageButton[disabled="true"] {\r
-       list-style-image:url("chrome://editor/skin/images/image_dis.gif");\r
-}\r
-\r
-#namedAnchorButton {\r
-       list-style-image:url("chrome://editor/skin/images/anchor.gif");\r
-}\r
-#namedAnchorButton[disabled="true"] {\r
-       list-style-image:url("chrome://editor/skin/images/anchor_dis.gif");\r
-}\r
-\r
-#hlineButton {\r
-       list-style-image:url("chrome://editor/skin/images/hline.gif");\r
-}\r
-#hlineButton[disabled="true"] {\r
-       list-style-image:url("chrome://editor/skin/images/hline_dis.gif");\r
-}\r
-\r
-#tableButton {\r
-       list-style-image:url("chrome://editor/skin/images/table.gif");\r
-}\r
-#tableButton[disabled="true"] {\r
-       list-style-image:url("chrome://editor/skin/images/table_dis.gif");\r
-}\r
-\r
-#linkButton-dark {\r
-       list-style-image:url("chrome://editor/skin/images/link.gif");\r
-}\r
-#imageButton-dark {\r
-       list-style-image:url("chrome://editor/skin/images/image.gif");\r
-}\r
-#namedAnchorButton-dark {\r
-       list-style-image:url("chrome://editor/skin/images/anchor.gif");\r
-}\r
-#hlineButton-dark {\r
-       list-style-image:url("chrome://editor/skin/images/hline.gif");\r
-}\r
-#tableButton-dark {\r
-       list-style-image:url("chrome://editor/skin/images/table.gif");\r
-}\r
-#spellingButton {\r
-       list-style-image:url("chrome://editor/skin/images/spell.gif");\r
-}\r
-\r
-#DecreaseFontSizeButton {\r
-       list-style-image:url("chrome://editor/skin/images/dec-font-size.gif");\r
-}\r
-\r
-#IncreaseFontSizeButton {\r
-       list-style-image:url("chrome://editor/skin/images/inc-font-size.gif");\r
-}\r
-\r
-#ulButton {\r
-       list-style-image:url("chrome://editor/skin/images/bullets.gif");\r
-}\r
-#olButton {\r
-       list-style-image:url("chrome://editor/skin/images/numbers.gif");\r
-}\r
-#outdentButton {\r
-       list-style-image:url("chrome://editor/skin/images/outdent.gif");\r
-}\r
-#outdentButton[disabled="true"] {\r
-       list-style-image:url("chrome://editor/skin/images/outdent_dis.gif");\r
-}\r
-\r
-#indentButton {\r
-       list-style-image:url("chrome://editor/skin/images/indent.gif");\r
-}\r
-\r
-#FormatToolbar > button,\r
-#FormatToolbar > button:hover,\r
-#FormatToolbar > button:active,\r
-#FormatToolbar > button[disabled="true"] {\r
-        margin: 0px 3px 0px 0px;\r
-        border: none;\r
-        min-width: 23px;\r
-        min-height: 23px;\r
-}\r
-#FormatToolbar > button > .button-internal-box {\r
-        margin: 0px;\r
-        padding: 1px;\r
-        border: 1px solid transparent;\r
-        text-align: center;\r
-}\r
-#FormatToolbar > button:hover > .button-internal-box {\r
-        border: 1px outset #CCD0DD;\r
-}\r
-#FormatToolbar > button:active > .button-internal-box {\r
-        padding: 2px 0px 0px 2px;\r
-        border: 1px inset #CCD0DD;\r
-}\r
-#FormatToolbar > button[disabled="true"] > .button-internal-box {\r
-        border: 1px solid transparent;\r
-}\r
-\r
-#FormatToolbar > button > .button-internal-box > .button-text-container\r
-  {\r
-    display               : none;\r
-  } \r
-\r
-#ParagraphSelect {\r
-        margin-top: 2px;\r
-}\r
-\r
-#AlignPopupButton {\r
-       list-style-image:url("chrome://editor/skin/images/align.gif");\r
-}\r
-\r
-#AlignPopupButton > .button-internal-box {\r
-       border:1px solid transparent;\r
-}\r
-#AlignPopupButton:hover > .button-internal-box {\r
-       border:1px outset #CCD0DD;\r
-}\r
-#AlignPopupButton:active > .button-internal-box,\r
-#AlignPopupButton[open="true"] > .button-internal-box {\r
-       border:1px inset #CCD0DD;\r
-}\r
-\r
-#InsertPopupButton {\r
-       list-style-image:url("chrome://editor/skin/images/object-popup.gif");\r
-}\r
-\r
-#text-align-left,\r
-#align-left-button\r
-  {\r
-         list-style-image      : url("chrome://editor/skin/images/left.gif");\r
-  } \r
-\r
-#text-align-left[disabled="true"],\r
-#text-align-left[disabled="true"]:hover,\r
-#text-align-left[disabled="true"]:hover:active,\r
-#align-left-button[disabled="true"],\r
-#align-left-button[disabled="true"]:hover,\r
-#align-left-button[disabled="true"]:hover:active,\r
-  {\r
-    list-style-image      : url("chrome://editor/skin/images/left-disabled.gif");\r
-  } \r
-\r
-#text-align-center,\r
-#align-center-button\r
-  {\r
-         list-style-image      : url("chrome://editor/skin/images/center.gif");\r
-  } \r
-\r
-#text-align-center[disabled="true"],\r
-#text-align-center[disabled="true"]:hover,\r
-#text-align-center[disabled="true"]:hover:active,\r
-#align-center-button[disabled="true"],\r
-#align-center-button[disabled="true"]:hover,\r
-#align-center-button[disabled="true"]:hover:active\r
-  {\r
-    list-style-image      : url("chrome://editor/skin/images/center-disabled.gif");\r
-  } \r
-\r
-#text-align-right,\r
-#align-right-button\r
-  {\r
-         list-style-image      : url("chrome://editor/skin/images/right.gif");\r
-  } \r
-\r
-#text-align-right[disabled="true"],\r
-#text-align-right[disabled="true"]:hover,\r
-#text-align-right[disabled="true"]:hover:active\r
-#align-right-button[disabled="true"],\r
-#align-right-button[disabled="true"]:hover,\r
-#align-right-button[disabled="true"]:hover:active \r
- {\r
-    list-style-image      : url("chrome://editor/skin/images/right-disabled.gif");\r
-  } \r
-\r
-#text-align-justify, #align-justify-button\r
-  {\r
-         list-style-image      : url("chrome://editor/skin/images/justify.gif");\r
-  }\r
-\r
-#text-align-justify[disabled="true"],\r
-#text-align-justify[disabled="true"]:hover,\r
-#text-align-justify[disabled="true"]:hover:active\r
-#align-justify-button[disabled="true"],\r
-#align-justify-button[disabled="true"]:hover,\r
-#align-justify-button[disabled="true"]:hover:active \r
- {\r
-    list-style-image      : url("chrome://editor/skin/images/justify-disabled.gif");\r
-  } \r
-\r
-.ColorPickerLabel {\r
-  border:     1px inset white;\r
-  margin:     0px;\r
-  padding:    2px;\r
-  text-align: center;\r
-}\r
-\r
-/* TODO: How to make inset color skinable? */\r
-.color-button {\r
-  border: 1px inset #CCD0DD;\r
-  padding: 0px;\r
-  width:  19px;\r
-  height: 19px;\r
-  margin:  1px;\r
-}\r
-\r
-.color-button:hover {\r
-  border:  1px solid #666699;\r
-}\r
-\r
-#TextColorPopupButton {\r
-  margin: 2px 9px 9px 2px;\r
-  /* TEMP: Set color here. TODO: Set color from page */\r
-  background-color: #AA0000;\r
-}\r
-\r
-#BackColorPopupButton {\r
-  margin: 9px 2px 2px 9px;\r
-  /* TEMP: Set color here. TODO: Set color from page */\r
-  background-color: #FFFF00;\r
-}\r
+/* 
+ * The contents of this file are subject to the Netscape Public
+ * License Version 1.1 (the "License"); you may not use this file
+ * except in compliance with the License. You may obtain a copy of
+ * the License at http://www.mozilla.org/NPL/
+ *  
+ * Software distributed under the License is distributed on an "AS
+ * IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or
+ * implied. See the License for the specific language governing
+ * rights and limitations under the License.
+ *  
+ * The Original Code is Mozilla Communicator client code, released
+ * March 31, 1998.
+ * 
+ * The Initial Developer of the Original Code is Netscape
+ * Communications Corporation. Portions created by Netscape are
+ * Copyright (C) 1998-1999 Netscape Communications Corporation. All
+ * Rights Reserved.
+ * 
+ * Contributor(s): 
+ */
+
+/* This contains CSS just for editor toolbars */
+
+#EditorToolbox {
+  min-width: 1px;
+}
+
+#FormatToolbar {
+  border-bottom: 1px solid #9999CC;
+}
+
+.separator_small { 
+  width: 1em; 
+}
+
+.margin-left-right {
+  margin-left:  3px;
+  margin-right: 3px;
+}
+
+/* From button.css: */
+/* margin: 4px 7px 1px 1px; */
+/* We have too many buttons - must be closer! */
+
+.toolbar, .key-toolbar {
+  margin-right: 2px;
+}
+
+.inset-border {
+  border: 1px inset CCCCDD;
+}
+
+/* THIS DOESN'T WORK ON <text>! */
+.center {
+  text-align: center;
+}
+
+/* end of SHOULD GO IN GLOBAL */
+
+#EditModeToolbar {
+  padding:       0px;
+  /* Same as "standard" toolbar background */
+  border-top:    1px solid #9999CC;
+  border-bottom: none;
+  margin-bottom: 0px;
+  min-width:     1px;
+  color:         #000000;
+  background-color: #CCD0DD;
+  overflow:      hidden;
+}
+/*
+#EditModeToolbar > toolbargrippy {
+  height: 100%;
+}
+*/
+/* BORDERS ARE NOT WORKING! global class="plain" is fighting us! */
+/* !important in for now as a workaround to above problem! */
+button.edit-mode:hover, button.edit-mode:hover:active,
+button.edit-mode {
+  -moz-border-radius: 0px 0px 7px 7px;
+  padding: 0px 4px 1px 4px;
+  margin: 0px;
+  color: #CCD0DD;
+  background-color: #666699;
+  border-top: 1px solid #666699 !important; /* Must be same as background */
+  border-bottom: 1px solid #9999CC !important;
+  border-left: 1px solid #9999CC !important;
+  border-right: 1px solid #9999CC !important;
+}
+
+button.edit-mode > .button-internal-box,
+button.edit-mode:hover > .button-internal-box,
+button.edit-mode:hover:active > .button-internal-box  {
+  border: none;
+}
+
+button.edit-mode:hover {
+  border:  1px solid #3366FF !important;
+}
+
+button.edit-mode:hover:active {
+  padding: 1px 5px 0px 3px;
+  border:  1px solid #99CCFF !important;
+}
+
+button.edit-mode[selected="1"] {
+  padding: 0px 4px 1px 4px;
+  margin: -1px 0px 0px 0px;
+/* Not resizing well! - use color instead
+  font-weight: bold; 
+*/
+  background-color: #FFFFFF;
+  color: #000000;
+}
+
+button.edit-mode[selected="1"]:active,
+button.edit-mode[selected="1"]:hover:active {
+  padding: 1px 5px 0px 3px;
+}
+
+#NormalModeButton[type="image"] {
+  list-style-image:url(chrome://editor/skin/images/editmode-normal.gif); 
+}
+
+#TagModeButton[type="image"] {
+  list-style-image:url(chrome://editor/skin/images/editmode-tags.gif); 
+}
+#SourceModeButton[type="image"] {
+  list-style-image:url(chrome://editor/skin/images/editmode-html.gif); 
+}
+#PreviewModeButton[type="image"] {
+  list-style-image:url(chrome://editor/skin/images/editmode-preview.gif); 
+}
+#ToggleEditModeType {
+  list-style-image:url(chrome://editor/skin/images/editmode-toggle.gif); 
+  border: 1px outset #CCD0DD;
+}
+
+#ToggleEditModeType:hover {
+  border: 1px solid #99CCFF;
+}
+
+#ToggleEditModeType:hover:active {
+  border: 1px inset #99CCFF;
+}
+
+/* Image URLs for all Editor toolbar buttons */
+
+#boldButton {
+  list-style-image:url(chrome://editor/skin/images/bold.gif); 
+}
+
+#italicButton {
+  list-style-image:url(chrome://editor/skin/images/italic.gif); 
+}
+
+#underlineButton {
+  list-style-image:url(chrome://editor/skin/images/underline.gif); 
+}
+
+#newButton {
+       list-style-image:url("chrome://editor/skin/images/newfile.gif");
+}
+#newButton[disabled="true"] {
+       list-style-image:url("chrome://editor/skin/images/newfile_dis.gif");
+}
+
+#openButton {
+       list-style-image:url("chrome://editor/skin/images/openfile.gif");
+}
+#openButton[disabled="true"] {
+       list-style-image:url("chrome://editor/skin/images/openfile_dis.gif");
+}
+
+#saveButton {
+       list-style-image:url("chrome://editor/skin/images/savefile.gif");
+}
+#saveButton[disabled="true"] {
+       list-style-image:url("chrome://editor/skin/images/savefile_dis.gif");
+}
+#saveButton[dirty="true"] {
+  list-style-image:url(chrome://editor/skin/images/savemod.gif); 
+}
+
+#publishButton {
+       list-style-image:url("chrome://editor/skin/images/publish.gif");
+}
+
+#previewButton {
+       list-style-image:url("chrome://editor/skin/images/preview.gif");
+}
+#previewButton[disabled="true"] {
+       list-style-image:url("chrome://editor/skin/images/preview_dis.gif");
+}
+
+#printButton 
+  {
+         list-style-image      : url("chrome://editor/skin/images/print.gif");
+  }
+#printButton[disabled="true"] {
+       list-style-image:url("chrome://editor/skin/images/print_dis.gif");
+}
+
+#findButton {
+       list-style-image:url("chrome://editor/skin/images/find.gif");
+}
+#findButton[disabled="true"] {
+       list-style-image:url("chrome://editor/skin/images/find_dis.gif");
+}
+
+#linkButton {
+       list-style-image:url("chrome://editor/skin/images/link.gif");
+}
+#linkButton[disabled="true"] {
+       list-style-image:url("chrome://editor/skin/images/link_dis.gif");
+}
+
+#imageButton {
+       list-style-image:url("chrome://editor/skin/images/image.gif");
+}
+#imageButton[disabled="true"] {
+       list-style-image:url("chrome://editor/skin/images/image_dis.gif");
+}
+
+#namedAnchorButton {
+       list-style-image:url("chrome://editor/skin/images/anchor.gif");
+}
+#namedAnchorButton[disabled="true"] {
+       list-style-image:url("chrome://editor/skin/images/anchor_dis.gif");
+}
+
+#hlineButton {
+       list-style-image:url("chrome://editor/skin/images/hline.gif");
+}
+#hlineButton[disabled="true"] {
+       list-style-image:url("chrome://editor/skin/images/hline_dis.gif");
+}
+
+#tableButton {
+       list-style-image:url("chrome://editor/skin/images/table.gif");
+}
+#tableButton[disabled="true"] {
+       list-style-image:url("chrome://editor/skin/images/table_dis.gif");
+}
+
+#linkButton-dark {
+       list-style-image:url("chrome://editor/skin/images/link.gif");
+}
+#imageButton-dark {
+       list-style-image:url("chrome://editor/skin/images/image.gif");
+}
+#namedAnchorButton-dark {
+       list-style-image:url("chrome://editor/skin/images/anchor.gif");
+}
+#hlineButton-dark {
+       list-style-image:url("chrome://editor/skin/images/hline.gif");
+}
+#tableButton-dark {
+       list-style-image:url("chrome://editor/skin/images/table.gif");
+}
+#spellingButton {
+       list-style-image:url("chrome://editor/skin/images/spell.gif");
+}
+
+#DecreaseFontSizeButton {
+       list-style-image:url("chrome://editor/skin/images/dec-font-size.gif");
+}
+
+#IncreaseFontSizeButton {
+       list-style-image:url("chrome://editor/skin/images/inc-font-size.gif");
+}
+
+#ulButton {
+       list-style-image:url("chrome://editor/skin/images/bullets.gif");
+}
+#olButton {
+       list-style-image:url("chrome://editor/skin/images/numbers.gif");
+}
+#outdentButton {
+       list-style-image:url("chrome://editor/skin/images/outdent.gif");
+}
+#outdentButton[disabled="true"] {
+       list-style-image:url("chrome://editor/skin/images/outdent_dis.gif");
+}
+
+#indentButton {
+       list-style-image:url("chrome://editor/skin/images/indent.gif");
+}
+
+#FormatToolbar > button,
+#FormatToolbar > button:hover,
+#FormatToolbar > button:active,
+#FormatToolbar > button[disabled="true"] {
+        margin: 0px 3px 0px 0px;
+        border: none;
+        min-width: 23px;
+        min-height: 23px;
+}
+#FormatToolbar > button > .button-internal-box {
+        margin: 0px;
+        padding: 1px;
+        border: 1px solid transparent;
+        -moz-box-pack: center;
+}
+#FormatToolbar > button:hover > .button-internal-box {
+        border: 1px outset #CCD0DD;
+}
+#FormatToolbar > button:active > .button-internal-box {
+        padding: 2px 0px 0px 2px;
+        border: 1px inset #CCD0DD;
+}
+#FormatToolbar > button[disabled="true"] > .button-internal-box {
+        border: 1px solid transparent;
+}
+
+#FormatToolbar > button > .button-internal-box > .button-text-container
+  {
+    display               : none;
+  } 
+
+#ParagraphSelect {
+        margin-top: 2px;
+}
+
+#AlignPopupButton {
+       list-style-image:url("chrome://editor/skin/images/align.gif");
+}
+
+#AlignPopupButton > .button-internal-box {
+       border:1px solid transparent;
+}
+#AlignPopupButton:hover > .button-internal-box {
+       border:1px outset #CCD0DD;
+}
+#AlignPopupButton:active > .button-internal-box,
+#AlignPopupButton[open="true"] > .button-internal-box {
+       border:1px inset #CCD0DD;
+}
+
+#InsertPopupButton {
+       list-style-image:url("chrome://editor/skin/images/object-popup.gif");
+}
+
+#text-align-left,
+#align-left-button
+  {
+         list-style-image      : url("chrome://editor/skin/images/left.gif");
+  } 
+
+#text-align-left[disabled="true"],
+#text-align-left[disabled="true"]:hover,
+#text-align-left[disabled="true"]:hover:active,
+#align-left-button[disabled="true"],
+#align-left-button[disabled="true"]:hover,
+#align-left-button[disabled="true"]:hover:active,
+  {
+    list-style-image      : url("chrome://editor/skin/images/left-disabled.gif");
+  } 
+
+#text-align-center,
+#align-center-button
+  {
+         list-style-image      : url("chrome://editor/skin/images/center.gif");
+  } 
+
+#text-align-center[disabled="true"],
+#text-align-center[disabled="true"]:hover,
+#text-align-center[disabled="true"]:hover:active,
+#align-center-button[disabled="true"],
+#align-center-button[disabled="true"]:hover,
+#align-center-button[disabled="true"]:hover:active
+  {
+    list-style-image      : url("chrome://editor/skin/images/center-disabled.gif");
+  } 
+
+#text-align-right,
+#align-right-button
+  {
+         list-style-image      : url("chrome://editor/skin/images/right.gif");
+  } 
+
+#text-align-right[disabled="true"],
+#text-align-right[disabled="true"]:hover,
+#text-align-right[disabled="true"]:hover:active
+#align-right-button[disabled="true"],
+#align-right-button[disabled="true"]:hover,
+#align-right-button[disabled="true"]:hover:active 
+ {
+    list-style-image      : url("chrome://editor/skin/images/right-disabled.gif");
+  } 
+
+#text-align-justify, #align-justify-button
+  {
+         list-style-image      : url("chrome://editor/skin/images/justify.gif");
+  }
+
+#text-align-justify[disabled="true"],
+#text-align-justify[disabled="true"]:hover,
+#text-align-justify[disabled="true"]:hover:active
+#align-justify-button[disabled="true"],
+#align-justify-button[disabled="true"]:hover,
+#align-justify-button[disabled="true"]:hover:active 
+ {
+    list-style-image      : url("chrome://editor/skin/images/justify-disabled.gif");
+  } 
+
+.ColorPickerLabel {
+  border:     1px inset white;
+  margin:     0px;
+  padding:    2px;
+  -moz-box-pack: center;
+}
+
+/* TODO: How to make inset color skinable? */
+.color-button {
+  border: 1px inset #CCD0DD;
+  padding: 0px;
+  width:  19px;
+  height: 19px;
+  margin:  1px;
+}
+
+.color-button:hover {
+  border:  1px solid #666699;
+}
+
+#TextColorPopupButton {
+  margin: 2px 9px 9px 2px;
+  /* TEMP: Set color here. TODO: Set color from page */
+  background-color: #AA0000;
+}
+
+#BackColorPopupButton {
+  margin: 9px 2px 2px 9px;
+  /* TEMP: Set color here. TODO: Set color from page */
+  background-color: #FFFF00;
+}