/*
 * 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-2001 Netscape Communications Corporation. All
 * Rights Reserved.
 *
 * Contributor(s):
 *   Joe Hewitt (hewitt@netscape.com)
 */

/* ===== messengercompose.css ===========================================
  == Styles for the main Messenger Compose window.
  ======================================================================= */

@import url("chrome://messenger/skin/");

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* ::::: tools menu icons ::::: */

.icon-mail16 {
  list-style-image: url("chrome://messenger/skin/icons/mail-16.gif");
}

.icon-addressbook16 {
  list-style-image: url("chrome://messenger/skin/addressbook/icons/addressbook-16.gif");
}

/* ::::: primary toolbar buttons ::::: */
 
.toolbarbutton-1 {
  -moz-box-orient: vertical;
  min-width: 0px;
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar.png");
}

toolbar[mode="icons"] .toolbarbutton-text {
  display: none;
}

toolbar[mode="text"] .toolbarbutton-menubutton-dropmarker,
toolbar[mode="text"] .toolbarbutton-icon {
  display: none;
}

toolbar[mode="text"] .toolbarbutton-text {
  padding: 0 !important;
  margin: 3px 5px !important;
}

#button-send {
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar.png");
  -moz-image-region: rect(0px 32px 32px 0px);
}

#button-send:hover {
  -moz-image-region: rect(32px 32px 64px 0px);
} 

#button-send[disabled="true"] {
  -moz-image-region: rect(64px 32px 96px 0px) !important;
} 

#button-address {
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar.png");
  -moz-image-region: rect(0px 64px 32px 32px);
}

#button-address:hover {
  -moz-image-region: rect(32px 64px 64px 32px);
} 

#button-address[disabled="true"] {
  -moz-image-region: rect(64px 64px 96px 32px) !important;
} 

#spellingButton {
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar.png");
  -moz-image-region: rect(0px 96px 32px 64px);
}

#spellingButton:hover {
  -moz-image-region: rect(32px 96px 64px 64px);
}

#spellingButton[disabled="true"] {
  -moz-image-region: rect(64px 96px 96px 64px) !important;
}

#button-attach {
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar.png");
  -moz-image-region: rect(0px 128px 32px 96px);
}

#button-attach[buttonover="true"] {
  -moz-image-region: rect(32px 128px 64px 96px);
} 

#button-attach[buttondown="true"] {
  -moz-image-region: rect(32px 128px 64px 96px);
} 

#button-attach[disabled="true"] {
  -moz-image-region: rect(64px 128px 96px 96px) !important;
} 

#button-save {
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar.png");
  -moz-image-region: rect(0px 192px 32px 160px);
}

#button-save[buttonover="true"] {
  -moz-image-region: rect(32px 192px 64px 160px);
} 

#button-save[buttondown="true"] {
  -moz-image-region: rect(32px 192px 64px 160px);
} 

#button-save[disabled="true"] {
  -moz-image-region: rect(64px 192px 96px 160px) !important;
} 

#quoteButton {
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar.png");
  -moz-image-region: rect(0px 224px 32px 192px);
}

#quoteButton:hover {
  -moz-image-region: rect(32px 224px 64px 192px);
}

#quoteButton[disabled="true"] {
  -moz-image-region: rect(64px 224px 96px 192px) !important;
}

/* ::::: small primary toolbar buttons ::::: */

toolbar[iconsize="small"] .toolbarbutton-1 {
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar-small.png");
}

toolbar[iconsize="small"] #button-send {
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar-small.png");
  -moz-image-region: rect(0px 20px 20px 0px);
}

toolbar[iconsize="small"] #button-send:hover {
  -moz-image-region: rect(20px 20px 40px 0px);
} 

toolbar[iconsize="small"] #button-send[disabled] {
  -moz-image-region: rect(40px 20px 60px 0px) !important;
} 

toolbar[iconsize="small"] #button-address {
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar-small.png");
  -moz-image-region: rect(0px 40px 20px 20px);
}

toolbar[iconsize="small"] #button-address:hover {
  -moz-image-region: rect(20px 40px 40px 20px);
} 

toolbar[iconsize="small"] #button-address[disabled] {
   -moz-image-region: rect(40px 40px 60px 20px) !important;
} 

toolbar[iconsize="small"] #spellingButton {
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar-small.png");
  -moz-image-region: rect(0px 60px 20px 40px);
}

toolbar[iconsize="small"] #spellingButton:hover {
  -moz-image-region: rect(20px 60px 40px 40px);
} 

toolbar[iconsize="small"] #spellingButton[disabled="true"] {
  -moz-image-region: rect(40px 60px 60px 40px) !important;
} 

toolbar[iconsize="small"] #button-attach {
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar-small.png");
  -moz-image-region: rect(0px 80px 20px 60px);
}

toolbar[iconsize="small"] #button-attach:hover {
  -moz-image-region: rect(20px 80px 40px 60px);
} 

toolbar[iconsize="small"] #button-attach[disabled] {
  -moz-image-region: rect(40px 80px 60px 60px) !important;
} 

toolbar[iconsize="small"] #button-save {
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar-small.png");
  -moz-image-region: rect(0px 120px 20px 100px);
}

toolbar[iconsize="small"] #button-save:hover {
  -moz-image-region: rect(20px 120px 40px 100px);
} 

toolbar[iconsize="small"] #button-save[disabled] {
  -moz-image-region: rect(40px 120px 60px 100px) !important;
} 

toolbar[iconsize="small"] #quoteButton {
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar-small.png");
  -moz-image-region: rect(0px 140px 20px 120px);
}

toolbar[iconsize="small"] #quoteButton:hover {
  -moz-image-region: rect(20px 140px 40px 120px);
} 

toolbar[iconsize="small"] #quoteButton[disabled="true"] {
  -moz-image-region: rect(40px 140px 60px 120px) !important;
}

/* ::::: special toolbar colors ::::: */

#content-frame {
  border-left: 1px solid ThreeDDarkShadow;
  border-right: 1px solid ThreeDLightShadow;
}

#appcontent {
  border-left: 1px solid ThreeDShadow;
  border-right: 1px solid ThreeDHighlight;
}

#attachmentbucket-sizer {
  border-top: none;
  border-bottom: none;
}

/* XXX I should really have a selector rule here to select just .listcell-icon objects underneath the attachmentList listbox */

.listcell-icon
{
  margin-left: 2px;
  margin-top: 2px;
}

#compose-toolbar-sizer {
  border-top-width: 1px;
  border-left: none;
  border-right: none;
  -moz-border-top-colors: ThreeDHighlight;
}

#msgSubject {
  margin-top: 0px;
  margin-bottom: 4px;
}

/* ::::: autocomplete icons ::::: */

treechildren::-moz-tree-cell-text(default-match) {
  margin: 2px -3px 2px 15px;
  border: none;
}

treechildren::-moz-tree-image(local-abook) {
  margin: 2px -1px 2px 4px;
  list-style-image: url("chrome://messenger/skin/addressbook/icons/addrbook.gif");
}

treechildren::-moz-tree-image(remote-abook) {
  margin: 2px -3px 2px 2px;
  list-style-image: url("chrome://messenger/skin/addressbook/icons/remote-addrbook.gif");
}

treechildren::-moz-tree-image(remote-err) {
  margin: 2px -3px 2px 2px;
  list-style-image: url("chrome://messenger/skin/addressbook/icons/remote-addrbook-error.gif");
}

.identity-menulist {
  -moz-binding: url(chrome://messenger/content/messengercompose/mailComposeBindings.xml#fromMenuList);
}

.identity-popup-item {                                                                               
  -moz-binding: url(chrome://messenger/content/messengercompose/mailComposeBindings.xml#fromMenuitem);
}     

.composemenu-text-2 {
  font-style: italic;
  color: GrayText;
}

/* ::::: addressing widget ::::: */
  
#addressingWidget {
  -moz-user-focus: none;
  width: 0;
}  

#typecol-addressingWidget {
  min-width: 9em;
  border-right: 1px solid #CACAFF;
}

.addressingWidgetItem,
.dummy-row {
  border: none !important;
  background-color: inherit !important;
  color: inherit !important;
}

.addressingWidgetCell {
  border-bottom: 1px solid #CACAFF;
  padding: 0px;
}

.addressingWidgetCell:first-child {
  border-top: none;
}

.dummy-row-cell:first-child {
  border-top: none;
  border-bottom: 1px solid #CACAFF;
}

.person-icon {
  margin: 0 3px;
  list-style-image: url("chrome://messenger/skin/addressbook/icons/abcard.gif");
}

/* ::::: format toolbar ::::: */

#FormatToolbar > toolbarbutton {
  min-width: 3em;
  list-style-image: url("chrome://editor/skin/icons/btn2.gif");
}
 
#FormatToolbar > toolbarbutton > .toolbarbutton-text {
  display: none;
}

#DecreaseFontSizeButton {
  -moz-image-region: rect(64px 14px 80px 0px);
}

#DecreaseFontSizeButton:hover {
  -moz-image-region: rect(64px 28px 80px 14px);
}

#DecreaseFontSizeButton:hover:active {
  -moz-image-region: rect(64px 42px 80px 28px);
}

#DecreaseFontSizeButton[disabled="true"] {
  -moz-image-region: rect(64px 56px 80px 42px) !important;
}

#IncreaseFontSizeButton {
  -moz-image-region: rect(81px 18px 98px 0px);
}

#IncreaseFontSizeButton:hover {
  -moz-image-region: rect(81px 36px 98px 18px);
}

#IncreaseFontSizeButton:hover:active {
  -moz-image-region: rect(81px 54px 98px 36px);
}

#IncreaseFontSizeButton[disabled="true"] {
  -moz-image-region: rect(81px 72px 98px 54px) !important;
}

#boldButton {
  -moz-image-region: rect(16px 16px 32px 0px);
}

#boldButton:hover {
  -moz-image-region: rect(16px 32px 32px 16px);
}

#boldButton:hover:active {
  -moz-image-region: rect(16px 48px 32px 32px);
}

#boldButton[checked="true"] {
  -moz-image-region: rect(16px 16px 32px 0px);
}

#boldButton[disabled="true"] {
  -moz-image-region: rect(16px 64px 32px 48px) !important;
}

#italicButton {
  -moz-image-region: rect(98px 16px 114px 0px);
}

#italicButton:hover {
  -moz-image-region: rect(98px 32px 114px 16px);
}

#italicButton:hover:active {
  -moz-image-region: rect(98px 48px 114px 32px);
}

#italicButton[checked="true"] {
  -moz-image-region: rect(98px 16px 114px 0px);
}

#italicButton[disabled="true"] {
  -moz-image-region: rect(98px 64px 114px 48px) !important;
}

#underlineButton {
  -moz-image-region: rect(114px 16px 130px 0px);
}

#underlineButton:hover {
  -moz-image-region: rect(114px 32px 130px 16px);
}

#underlineButton:hover:active {
  -moz-image-region: rect(114px 48px 130px 32px);
}

#underlineButton[checked="true"] {
  -moz-image-region: rect(114px 16px 130px 0px);
}

#underlineButton[disabled="true"] {
  -moz-image-region: rect(114px 64px 130px 48px) !important;
}

#ulButton {
  -moz-image-region: rect(32px 16px 48px 0px);
}

#ulButton:hover {
  -moz-image-region: rect(32px 32px 48px 16px);
}

#ulButton:hover:active {
  -moz-image-region: rect(32px 48px 48px 32px);
}

#ulButton[checked="true"] {
  -moz-image-region: rect(32px 16px 48px 0px);
}

#ulButton[disabled="true"] {
  -moz-image-region: rect(32px 64px 48px 48px) !important;
}

#olButton {
  -moz-image-region: rect(194px 16px 210px 0px);
}

#olButton:hover {
  -moz-image-region: rect(194px 32px 210px 16px);
}

#olButton:hover:active {
  -moz-image-region: rect(194px 48px 210px 32px);
}

#olButton[checked="true"] {
  -moz-image-region: rect(194px 16px 210px 0px);
}

#olButton[disabled="true"] {
  -moz-image-region: rect(194px 64px 210px 48px) !important;
}

#outdentButton {
  -moz-image-region: rect(210px 16px 226px 0px);
}

#outdentButton:hover {
  -moz-image-region: rect(210px 32px 226px 16px);
}

#outdentButton:hover:active {
  -moz-image-region: rect(210px 48px 226px 32px);
}

#outdentButton[disabled="true"] {
  -moz-image-region: rect(210px 64px 226px 48px) !important;
}

#indentButton {
  -moz-image-region: rect(178px 16px 194px 0px);
}

#indentButton:hover {
  -moz-image-region: rect(178px 32px 194px 16px);
}

#indentButton:hover:active {
  -moz-image-region: rect(178px 48px 194px 32px);
}

#indentButton[disabled="true"] {
  -moz-image-region: rect(178px 64px 194px 48px) !important;
}

#align-left-button {
  -moz-image-region: rect(146px 16px 162px 0px);
}

#align-left-button:hover {
  -moz-image-region: rect(146px 32px 162px 16px);
}

#align-left-button:hover:active {
  -moz-image-region: rect(146px 48px 162px 32px);
}

#align-left-button[checked="true"] {
  -moz-image-region: rect(146px 16px 162px 0px);
}

#align-left-button[disabled="true"] {
  -moz-image-region: rect(146px 64px 162px 48px) !important;
}

#align-center-button {
  -moz-image-region: rect(48px 16px 64px 0px);
}

#align-center-button:hover {
  -moz-image-region: rect(48px 32px 64px 16px);
}

#align-center-button:hover:active {
  -moz-image-region: rect(48px 48px 64px 32px);
}

#align-center-button[checked="true"] {
  -moz-image-region: rect(48px 16px 64px 0px);
}

#align-center-button[disabled="true"] {
  -moz-image-region: rect(48px 64px 64px 48px) !important;
}

#align-right-button {
  -moz-image-region: rect(162px 16px 178px 0px);
}

#align-right-button:hover {
  -moz-image-region: rect(162px 32px 178px 16px);
}

#align-right-button:hover:active {
  -moz-image-region: rect(162px 48px 178px 32px);
}

#align-right-button[checked="true"] {
  -moz-image-region: rect(162px 16px 178px 0px);
}

#align-right-button[disabled="true"] {
  -moz-image-region: rect(162px 64px 178px 48px) !important;
}

#align-justify-button {
  -moz-image-region: rect(130px 16px 146px 0px);
}

#align-justify-button:hover {
  -moz-image-region: rect(130px 32px 146px 16px);
}

#align-justify-button:hover:active {
  -moz-image-region: rect(130px 48px 146px 32px);
}

#align-justify-button[checked="true"] {
  -moz-image-region: rect(130px 16px 146px 0px);
}

#align-justify-button[disabled="true"] {
  -moz-image-region: rect(130px 64px 146px 48px) !important;
}

#AlignPopupButton {
  -moz-image-region: rect(0px 16px 16px 0px);
}

#AlignPopupButton:hover {
  -moz-image-region: rect(0px 32px 16px 16px);
}

#AlignPopupButton[open="true"] {
  -moz-image-region: rect(0px 48px 16px 32px) !important;
}

#AlignPopupButton[disabled="true"] {
  -moz-image-region: rect(0px 64px 16px 48px) !important;
}

#InsertPopupButton {
  -moz-image-region: rect(244px 16px 260px 0px);
}

#InsertPopupButton:hover {
  -moz-image-region: rect(244px 32px 260px 16px);
}

#InsertPopupButton[open="true"] {
  -moz-image-region: rect(244px 48px 260px 32px) !important;
}

#InsertPopupButton[disabled="true"] {
  -moz-image-region: rect(244px 64px 260px 48px) !important;
}

#smileButtonMenu {
  -moz-image-region: rect(227px 17px 244px 0px);
}

#smileButtonMenu:hover {
  -moz-image-region: rect(227px 34px 244px 17px);
}

#smileButtonMenu[open="true"] {
  -moz-image-region: rect(227px 51px 244px 34px) !important;
}

#smileButtonMenu[disabled="true"] {
  -moz-image-region: rect(227px 68px 244px 51px) !important;
}

/* ..... align menu ..... */

#AlignPopup > menuitem {
  list-style-image: url("chrome://editor/skin/icons/btn2.gif");
}

#AlignLeftItem {
  -moz-image-region: rect(146px 16px 162px 0px);
}

#AlignLeftItem:hover {
  -moz-image-region: rect(146px 32px 162px 16px);
}

#AlignCenterItem {
  -moz-image-region: rect(48px 16px 64px 0px);
}

#AlignCenterItem:hover {
  -moz-image-region: rect(48px 32px 64px 16px);
}

#AlignRightItem {
  -moz-image-region: rect(162px 16px 178px 0px);
}

#AlignRightItem:hover {
  -moz-image-region: rect(162px 32px 178px 16px);
}

#AlignJustifyItem {
  -moz-image-region: rect(130px 16px 146px 0px);
}

#AlignJustifyItem:hover {
  -moz-image-region: rect(130px 32px 146px 16px);
}

/* ..... insert menu ..... */

#InsertPopup > menuitem {
  list-style-image: url("chrome://editor/skin/icons/btn1.gif");
}

#InsertLinkItem {
  -moz-image-region: rect(16px 16px 32px 0);
}

#InsertLinkItem:hover {
  -moz-image-region: rect(16px 32px 32px 16px);
}

#InsertAnchorItem {
  -moz-image-region: rect(128px 16px 144px 0);
}

#InsertAnchorItem:hover {
  -moz-image-region: rect(128px 32px 144px 16px);
}

#InsertImageItem {
  -moz-image-region: rect(144px 16px 160px 0);
}

#InsertImageItem:hover {
  -moz-image-region: rect(144px 32px 160px 16px);
}

#InsertHRuleItem {
  -moz-image-region: rect(32px 16px 48px 0);
}

#InsertHRuleItem:hover {
  -moz-image-region: rect(32px 32px 48px 16px);
}

#InsertTableItem {
  -moz-image-region: rect(112px 16px 128px 0);
}

#InsertTableItem:hover {
  -moz-image-region: rect(112px 32px 128px 16px);
}

/* ..... smiley menu ..... */

#smileySmile > .menu-iconic-left {
  list-style-image: url("chrome://editor/content/images/smile_n.gif");
}

#smileyFrown > .menu-iconic-left {
  list-style-image: url("chrome://editor/content/images/frown_n.gif"); 
}

#smileyWink > .menu-iconic-left {
  list-style-image: url("chrome://editor/content/images/wink_n.gif");
}

#smileyTongue > .menu-iconic-left {
  list-style-image: url("chrome://editor/content/images/tongue_n.gif");
}

#smileyLaughing > .menu-iconic-left {
  list-style-image: url("chrome://editor/content/images/laughing_n.gif"); 
}

#smileyEmbarassed > .menu-iconic-left {
  list-style-image: url("chrome://editor/content/images/embarrassed_n.gif");
}

#smileyUndecided > .menu-iconic-left {
  list-style-image: url("chrome://editor/content/images/undecided_n.gif"); 
}

#smileySurprise > .menu-iconic-left {
  list-style-image: url("chrome://editor/content/images/surprise_n.gif"); 
}

#smileyKiss > .menu-iconic-left {
  list-style-image: url("chrome://editor/content/images/kiss_n.gif"); 
}

#smileyYell > .menu-iconic-left {
  list-style-image: url("chrome://editor/content/images/yell_n.gif"); 
}

#smileyCool > .menu-iconic-left {
  list-style-image: url("chrome://editor/content/images/cool_n.gif"); 
}

#smileyMoney > .menu-iconic-left {
  list-style-image: url("chrome://editor/content/images/money_n.gif"); 
}

#smileyFoot > .menu-iconic-left {
  list-style-image: url("chrome://editor/content/images/foot_n.gif"); 
}

#smileyInnocent > .menu-iconic-left {
  list-style-image: url("chrome://editor/content/images/innocent_n.gif"); 
}

#smileyCry > .menu-iconic-left {
  list-style-image: url("chrome://editor/content/images/cry_n.gif"); 
}

#smileySealed > .menu-iconic-left {
  list-style-image: url("chrome://editor/content/images/sealed_n.gif"); 
}

/* ..... fg/bg color picker ..... */

.ColorPickerLabel {
  border: 1px inset ThreeDFace;
  margin: 0px;
  padding: 2px;
}

.color-button {
  border: 1px inset ThreeDFace;
  padding: 0px;
  width: 14px;
  height: 12px;
  margin: 2px;
}

.color-button:hover {
  border: 1px solid ThreeDDarkShadow;
}

#TextColorButton {
  margin: 2px 9px 9px 2px;
}

#BackgroundColorButton {
  margin: 9px 2px 2px 9px;
}

#HighlightColorButton {
  -moz-image-region: rect(260px 16px 272px 0px);
  background-color: transparent;
}

#HighlightColorButton:hover {
  -moz-image-region: rect(260px 32px 272px 16px);
}

#HighlightColorButton:hover:active {
  -moz-image-region: rect(260px 48px 272px 32px);
}

#HighlightColorButton[disabled="true"],
#HighlightColorButton[disabled="true"]:hover,
#HighlightColorButton[disabled="true"]:hover:active {
  -moz-image-region: rect(260px 64px 272px 48px);
}

/* ::::: address book sidebar ::::: */
.ab-closebutton {
   list-style-image: url("chrome://global/skin/icons/close-button.gif");
}

#sidebar {
  background-color: Window;
}
