
/* 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/. */

/* ===== 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");

#msgcomposeWindow:-moz-lwtheme {
  background-repeat: no-repeat;
  background-position: top right;
}

#attachmentBucket {
  -moz-appearance: none;
  border-top: 1px solid #A9B7C9; /* The same color as the splitters */
  background-color: -moz-Field;
  color: -moz-FieldText;
  width: 15em;
  min-width: 15em;
}

/* :::: Toolbar :::: */

#compose-toolbox:not(:-moz-lwtheme) {
  -moz-appearance: none;
  background-color: -moz-Dialog;
  background-image: linear-gradient(rgba(255, 255, 255, .5),
                    rgba(255, 255, 255, 0));
  border-top: none;
  border-bottom: 1px solid ThreeDShadow;
}

toolbar:not(:-moz-lwtheme) {
  -moz-appearance: none;
  border: none;
}

#compose-toolbox > toolbar {
  /* force iconsize="small" on these toolbars */
  counter-reset: smallicons;
}

@media (-moz-windows-default-theme) {
  #compose-toolbox:not(:-moz-lwtheme) {
    background-color: hsl(210, 75%, 92%);
  }
}

#MsgHeadersToolbar {
  text-shadow: none;
  color: -moz-DialogText;
  background-color: -moz-Dialog;
}

@media (-moz-windows-default-theme) {
  #MsgHeadersToolbar  {
    background-color: hsl(210, 75%, 92%);
  }
}

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

.toolbarbutton-1:not([type="menu-button"]),
.toolbarbutton-1 > .toolbarbutton-menubutton-button,
.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
  padding: 1px 5px !important;
}

.toolbarbutton-1 {
  -moz-box-orient: vertical;
}

toolbox[labelalign="end"] .toolbarbutton-1,
toolbox[labelalign="end"] .toolbarbutton-menubutton-button {
  -moz-box-orient: horizontal;
}

@media (-moz-windows-default-theme) {
  .toolbarbutton-1:not([type="menu-button"]),
  .toolbarbutton-1 > .toolbarbutton-menubutton-button,
  .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
  menulist {
    -moz-appearance: none;
    background: hsla(210, 32%, 93%, 0) padding-box;
    border-radius: 2px;
    border: 1px solid;
    border-color: hsla(210, 54%, 20%, 0) hsla(210, 54%, 20%, 0)
                  hsla(210, 54%, 20%, 0);
    box-shadow: 0 1px hsla(0, 0%, 100%, 0) inset,
                0 1px hsla(210, 54%, 20%, 0),
                0 0 2px hsla(210, 54%, 20%, 0);
    transition-property: background-color, border-color, box-shadow;
    transition-duration: 150ms;
  }

  /* Separator between menu and split type buttons */
  .toolbarbutton-1:not(:hover):not(:active):not([open]):not([checked])
   > .toolbarbutton-menubutton-dropmarker::before {
    content: "";
    display: -moz-box;
    width: 1px;
    height: 18px;
    -moz-margin-start: -4px;
    -moz-margin-end: 3px;
    background: hsla(210, 54%, 20%, .2) padding-box;
    box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .2);
  }

  menulist {
    margin: 1px 4px;
    padding: 1px 5px !important;
    background-image: linear-gradient(hsla(0, 0%, 100%, .6),
                      hsla(0, 0%, 100%, .1));
    background-color: hsla(210, 32%, 93%, .2);
    border-color: hsla(210, 54%, 20%, .15) hsla(210, 54%, 20%, .2)
                  hsla(210, 54%, 20%, .25);
    box-shadow: 0 1px hsla(0, 0%, 100%, .3) inset,
                0 1px hsla(210, 54%, 20%, .03),
                0 0 2px hsla(210, 54%, 20%, .1);
  }

  .toolbarbutton-1[type="menu-button"] {
    -moz-appearance: none;
    border: none;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }

  .toolbarbutton-1:not([type="menu-button"]),
  .toolbarbutton-1 > .toolbarbutton-menubutton-button,
  .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
    -moz-box-pack: center;
  }

  .toolbarbutton-1,
  .toolbarbutton-1[type="menu-button"] {
    margin: 1px;
  }

  toolbar[mode="icons"] .toolbarbutton-menubutton-button,
  toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]) {
    -moz-padding-start: 6px !important;
    -moz-padding-end: 6px !important;
  }

  .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
    -moz-box-align: center;
  }

  .toolbarbutton-1 > .toolbarbutton-menubutton-button {
    -moz-border-end: none;
  }

  .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
    padding: 1px 3px !important;
  }

  .menulist-dropmarker,
  .menulist-compact > .menulist-label-box > .menulist-icon,
  .toolbarbutton-1 .toolbarbutton-menu-dropmarker,
  .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
    list-style-image: url("chrome://messenger/skin/icons/toolbarbutton-arrow.png");
  }

  .toolbarbutton-1 .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
  .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
    list-style-image: url("chrome://messenger/skin/icons/toolbarbutton-arrow-inverted.png");
  }

  .toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-locale-dir(ltr),
  .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-locale-dir(rtl),
  .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(ltr) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .toolbarbutton-1:not([disabled="true"]):-moz-any(:hover,[open="true"]) >
  .toolbarbutton-menubutton-button,
  .toolbarbutton-1:not([disabled="true"]):hover >
  .toolbarbutton-menubutton-dropmarker,
  .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):not([checked="true"]):not([open="true"]):not(:active):hover {
    color: -moz-DialogText;
    background-image: linear-gradient(hsla(0, 0%, 100%, .6),
                      hsla(0, 0%, 100%, .1));
    background-color: hsla(210, 32%, 93%, .2);
    border-color: hsla(210, 54%, 20%, .15) hsla(210, 54%, 20%, .2)
                  hsla(210, 54%, 20%, .25);
    box-shadow: 0 1px hsla(0, 0%, 100%, .3) inset,
                0 1px hsla(210, 54%, 20%, .03),
                0 0 2px hsla(210, 54%, 20%, .1);
  }

  .toolbarbutton-1 >
  .toolbarbutton-menubutton-button:not([disabled="true"]):not([open="true"]):not(:active):hover,
  .toolbarbutton-1:not([buttonover="true"]):not([open="true"]):not(:active):hover >
  .toolbarbutton-menubutton-dropmarker:not([disabled="true"]),
  menulist:not([disabled="true"]):not([open="true"]):hover {
    border-color: hsla(210, 54%, 20%, .3) hsla(210, 54%, 20%, .35)
                  hsla(210, 54%, 20%, .4);
    background-color: hsla(210, 48%, 96%, .75);
    box-shadow: 0 0 1px hsla(210, 54%, 20%, .03),
                0 0 2px hsla(210, 54%, 20%, .1);
  }

  .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled="true"]):hover:active,
  .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]),
  .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):-moz-any([open="true"],[checked="true"],:hover:active),
  menulist[open="true"] {
    background-image: linear-gradient(hsla(0, 0%, 100%, .6),
                      hsla(0, 0%, 100%, .1));
    background-color: hsla(210, 54%, 20%, .15);
    border-color: hsla(210, 54%, 20%, .3) hsla(210, 54%, 20%, .35)
                  hsla(210, 54%, 20%, .4);
    box-shadow: 0 1px 1px hsla(210, 54%, 20%, .1) inset,
                0 0 1px hsla(210, 54%, 20%, .2) inset,
                0 1px 0 hsla(210, 54%, 20%, 0),
                0 0 2px hsla(210, 54%, 20%, 0);
    text-shadow: none;
    transition: none;
  }

  .toolbarbutton-1:not([disabled="true"]):-moz-any(:hover,[open="true"]) >
  .toolbarbutton-menubutton-dropmarker {
    -moz-border-start-color: hsla(210, 54%, 20%, .35);
  }

  .toolbarbutton-1[checked=true]:not(:active):hover {
    background-color: rgba(90%, 90%, 90%, .4);
    transition: background-color .4s;
  }
}

.toolbarbutton-1[disabled=true] .toolbarbutton-icon,
.toolbarbutton-1[disabled=true] .toolbarbutton-menu-dropmarker,
.toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
.toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button >
.toolbarbutton-icon {
  opacity: .4;
}

.toolbarbutton-menubutton-button > .toolbarbutton-icon,
.toolbarbutton-1 > .toolbarbutton-icon {
  margin: 1px;
  width: 16px;
  height: 16px;
}

toolbox[labelalign="end"] > toolbar[mode="full"] .toolbarbutton-1
.toolbarbutton-text {
  -moz-padding-start: 2px;
}

toolbox[labelalign="end"] > toolbar[mode="full"] deck .toolbarbutton-text {
  text-align: start;
}

#headers-box,
#FormatToolbox {
  border-top-width: 0;
}

@media (-moz-windows-compositor) {
  #compose-toolbox:not(:-moz-lwtheme) {
    color: black;
    text-shadow: 0 0 .7em white, 0 0 .7em white, 0 1px 0 rgba(255, 255, 255, .4);
    border-bottom-color: #AABCCF;
  }

  #headers-box,
  #MsgHeadersToolbar {
    -moz-appearance: none;
    background-color: hsl(210, 75%, 92%);
    background-image: linear-gradient(rgba(255, 255, 255, .5) 10px,
                      rgba(255, 255, 255, 0));
  }
}

#composeToolbar2:-moz-lwtheme-brighttext .toolbarbutton-1 {
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar-inverted.png");
}

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

#button-contacts {
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar.png");
  -moz-image-region: rect(1px 35px 17px 19px) !important;
}

#spellingButton {
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar.png");
  -moz-image-region: rect(1px 53px 17px 37px);
}

#button-attach {
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar.png");
  -moz-image-region: rect(1px 71px 17px 55px);
}

#button-security {
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar.png") !important;
  -moz-image-region: rect(1px 89px 17px 73px) !important;
}

#button-security:-moz-lwtheme-brighttext {
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar-inverted.png") !important;
  -moz-image-region: rect(1px 89px 17px 73px) !important;
}

#button-save {
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar.png");
  -moz-image-region: rect(1px 107px 17px 91px);
}

#quoteButton {
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar.png");
  -moz-image-region: rect(1px 125px 17px 109px);
}
#cut-button {
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar.png");
  -moz-image-region: rect(1px 143px 17px 127px);
}
#copy-button {
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar.png");
  -moz-image-region: rect(1px 161px 17px 145px);
}
#paste-button {
  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar.png");
  -moz-image-region: rect(1px 179px 17px 163px);
}

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

#appcontent {
  border-top: 1px solid #A9B7C9; /* The same color as the splitters */
}

#attachmentbucket-sizer {
  position: relative;
  z-index: 10;
  min-width: 0;
  width: 5px;
  -moz-margin-end: -4px;
  -moz-border-end-width: 0;
  -moz-border-start: 1px solid #A9B7C9;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none; /* for rtl -moz-border-start */
  background-color: transparent;
}

#attachmentBucketSize {
  color: #888a85;
}

/* ::::: attachment reminder ::::: */

#attachmentNotificationBox > notification > .notification-inner {
  border: none;
  border-top: 1px solid ThreeDShadow;
}

#attachmentNotificationBox > notification .messageImage {
  width: 18px;
  height: 18px;
  background-image: url(chrome://messenger/skin/messengercompose/compose-toolbar.png);
  background-position: -54px top;
}

#attachmentReminderText {
  -moz-margin-start: 0px;
  cursor: pointer;
}

#attachmentKeywords {
  font-weight: bold;
  -moz-margin-start: 0px;
  text-decoration: underline;
  cursor: pointer;
}

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

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

#compose-toolbar-sizer {
  position: relative;
  z-index: 10;
  min-height: 0;
  height: 5px;
  margin-top: -5px;
  border-top-width: 0;
  border-bottom-width: 0;
  background-color: transparent;
}

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

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

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

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

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

/* ::::: addressing widget ::::: */

.autocomplete-treebody::-moz-tree-cell-text(comment) {
  color: #555566;
}

@media (-moz-windows-default-theme) {
  .autocomplete-treebody::-moz-tree-cell-text(selected) {
    color: -moz-DialogText !important;
  }
}

#addressingWidget {
  -moz-user-focus: none;
  -moz-appearance: none;
  width: 0;
  border: none;
  background-color: transparent;
}

#addressingWidget listboxbody {
  margin: 1px 0;
}

#textcol-addressingWidget {
  border: 1px solid threedshadow;
  background-color: -moz-field;
}

#addressingWidget > .addressingWidgetItem,
#addressingWidget > .dummy-row {
  border: none;
  background: none;
  color: inherit;
  box-shadow: none;
}

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

.addressingWidgetCell:first-child,
.dummy-row-cell:first-child {
  border-bottom-color: transparent;
}

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

#addressingWidget .addressingWidgetCell > .aw-menulist {
  margin: 1px;
  -moz-margin-end: 7px;
  padding: 2px 4px !important;
}

.aw-menulist > .menulist-label-box {
  margin: -1px 0;
}

.menulist-dropmarker {
  -moz-appearance: none;
  border:none;
  background-color: transparent;
}

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

#FormatToolbar {
  border-bottom: 1px solid #A9B7C9 !important;
  background-color: -moz-Dialog;
}

@media (-moz-windows-default-theme) {
  #FormatToolbar  {
    background-color: hsl(210, 75%, 92%);
  }
}

toolbarbutton.formatting-button {
  list-style-image: url("chrome://messenger/skin/messengercompose/format-buttons.png");
}

#FormatToolbar > toolbarbutton > .toolbarbutton-text {
  display: none;
}

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

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

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

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

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

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

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

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

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

#outdentButton {
  -moz-image-region: rect(0px 128px 16px 112px);
}
#outdentButton[disabled="true"] {
  -moz-image-region: rect(16px 128px 32px 112px) !important;
}

#indentButton {
  -moz-image-region: rect(0px 144px 16px 128px);
}
#indentButton[disabled="true"] {
  -moz-image-region: rect(16px 144px 32px 128px) !important;
}

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

#InsertPopupButton {
  -moz-image-region: rect(0px 224px 16px 208px);
}
#InsertPopupButton[disabled="true"] {
  -moz-image-region: rect(16px 224px 32px 208px) !important;
}

#smileButtonMenu {
  -moz-image-region: rect(0px 240px 16px 224px);
}
#smileButtonMenu[disabled="true"] {
  -moz-image-region: rect(16px 240px 32px 224px) !important;
}

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

#AlignPopup > menuitem {
  list-style-image: url("chrome://messenger/skin/messengercompose/format-buttons.png");
}

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

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

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

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

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

#smileySmile > .menu-iconic-left {
  list-style-image: url("chrome://communicator/skin/icons/smileys/smiley-smile.png");
  -moz-image-region: auto; /* cut off inheritance */
}

#smileyFrown > .menu-iconic-left {
  list-style-image: url("chrome://communicator/skin/icons/smileys/smiley-frown.png");
  -moz-image-region: auto; /* cut off inheritance */
}

#smileyWink > .menu-iconic-left {
  list-style-image: url("chrome://communicator/skin/icons/smileys/smiley-wink.png");
  -moz-image-region: auto; /* cut off inheritance */
}

#smileyTongue > .menu-iconic-left {
  list-style-image: url("chrome://communicator/skin/icons/smileys/smiley-tongue-out.png");
  -moz-image-region: auto; /* cut off inheritance */
}

#smileyLaughing > .menu-iconic-left {
  list-style-image: url("chrome://communicator/skin/icons/smileys/smiley-laughing.png");
  -moz-image-region: auto; /* cut off inheritance */
}

#smileyEmbarassed > .menu-iconic-left {
  list-style-image: url("chrome://communicator/skin/icons/smileys/smiley-embarassed.png");
  -moz-image-region: auto; /* cut off inheritance */
}

#smileyUndecided > .menu-iconic-left {
  list-style-image: url("chrome://communicator/skin/icons/smileys/smiley-undecided.png");
  -moz-image-region: auto; /* cut off inheritance */
}

#smileySurprise > .menu-iconic-left {
  list-style-image: url("chrome://communicator/skin/icons/smileys/smiley-surprised.png");
  -moz-image-region: auto; /* cut off inheritance */
}

#smileyKiss > .menu-iconic-left {
  list-style-image: url("chrome://communicator/skin/icons/smileys/smiley-kiss.png");
  -moz-image-region: auto; /* cut off inheritance */
}

#smileyYell > .menu-iconic-left {
  list-style-image: url("chrome://communicator/skin/icons/smileys/smiley-yell.png");
  -moz-image-region: auto; /* cut off inheritance */
}

#smileyCool > .menu-iconic-left {
  list-style-image: url("chrome://communicator/skin/icons/smileys/smiley-cool.png");
  -moz-image-region: auto; /* cut off inheritance */
}

#smileyMoney > .menu-iconic-left {
  list-style-image: url("chrome://communicator/skin/icons/smileys/smiley-money-mouth.png");
  -moz-image-region: auto; /* cut off inheritance */
}

#smileyFoot > .menu-iconic-left {
  list-style-image: url("chrome://communicator/skin/icons/smileys/smiley-foot-in-mouth.png");
  -moz-image-region: auto; /* cut off inheritance */
}

#smileyInnocent > .menu-iconic-left {
  list-style-image: url("chrome://communicator/skin/icons/smileys/smiley-innocent.png");
  -moz-image-region: auto; /* cut off inheritance */
}

#smileyCry > .menu-iconic-left {
  list-style-image: url("chrome://communicator/skin/icons/smileys/smiley-cry.png");
  -moz-image-region: auto; /* cut off inheritance */
}

#smileySealed > .menu-iconic-left {
  list-style-image: url("chrome://communicator/skin/icons/smileys/smiley-sealed.png");
  -moz-image-region: auto; /* cut off inheritance */
}

/* ..... 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;
}

.color-button[disabled="true"],
.color-button[disabled="true"]:hover {
  border: 1px inset ThreeDFace;
  opacity: 0.5;
}

#TextColorButton {
  margin-top: 2px;
  margin-bottom: 9px;
  -moz-margin-start: 2px;
  -moz-margin-end: 9px;
}

#BackgroundColorButton {
  margin-top: 9px;
  margin-bottom: 2px;
  -moz-margin-start: 9px;
  -moz-margin-end: 2px;
}

#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 ::::: */

#sidebar-box sidebarheader {
  -moz-appearance: toolbox;
  color: -moz-DialogText;
  text-shadow: none;
  border-bottom: 1px solid ThreeDShadow;
  border-top: 1px solid ThreeDHighlight;
  background-color: -moz-Dialog;
}

@media (-moz-windows-default-theme) {
  #sidebar-box sidebarheader {
    -moz-appearance: none;
    background-color: #F8F8F8;
    border-top: 0;
    border-bottom: 1px solid #A9B1B8;
  }
}

.ab-closebutton {
  list-style-image: url("chrome://global/skin/icons/close.png");
  -moz-image-region: rect(0 64px 16px 48px);
  -moz-appearance: none;
  border: none;
  padding: 2px;
}

.ab-closebutton:hover {
  -moz-image-region: rect(0 32px 16px 16px);
}

.ab-closebutton:hover:active {
  -moz-image-region: rect(0 48px 16px 32px);
}

.ab-closebutton > .toolbarbutton-icon {
  -moz-margin-end: 0px; /* override toolkit's default value */
}

#sidebar {
  background-color: -moz-Dialog;
}

#sidebar-splitter {
  -moz-border-end: none;
  -moz-border-start: 1px solid #A9B7C9;
  min-width: 0;
  width: 5px;
  background-color: transparent;
  -moz-margin-end: -5px;
  position: relative;
  z-index: 10;
}

@media (-moz-windows-default-theme) {
  #status-bar {
    -moz-appearance: none;
    border: none;
    border-top: 1px solid threedshadow;
    background-color: hsl(210, 75%, 92%);
  }
}
