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

/* ===== primaryToolbar.css =============================================
   == Images for the Mail primary toolbar.
   == This file is mainly about the general look-and-feel of
   == native-OS-style toolbars at the top of various windows, as well as
   == the specifically about the ones that appear on the 3-pane window and
   == the standalone message window.  The other native-OS-style toolbars
   == (addressbook and compose) are already styled elsewhere.
   ====================================================================== */

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

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

/* We want a 4px gap between the tabs-toolbar and the mail-toolbar-menubar2
   when the toolbar-menu is displayed, and a 16px gap when it is not. 1px is
   taken care of by the (light) outer shadow of the tab, the remaining 3/15
   are these margins. */
#mail-toolbar-menubar2:not([autohide="true"]) ~ #tabs-toolbar,
#mail-toolbar-menubar2[autohide="true"]:not([inactive]) ~ #tabs-toolbar {
  margin-top: 3px;
}

#messengerWindow[tabsintitlebar][sizemode="normal"]
#mail-toolbar-menubar2[autohide="true"][inactive] ~ #tabs-toolbar {
  margin-top: 15px;
}

@media not all and (-moz-windows-compositor) {
  #mail-toolbar-menubar2:not([autohide="true"]) {
    -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag");
  }
}

@media (-moz-os-version: windows-win8) {
  @media not all and (-moz-windows-default-theme) {
    #mail-toolbar-menubar2:not([autohide="true"]) {
      -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag");
    }
  }
}

#messengerWindow[tabsintitlebar] #mail-menubar > menu:not(:-moz-lwtheme) {
  color: CaptionText;
}

#messengerWindow[tabsintitlebar] #mail-menubar >
menu:not(:-moz-lwtheme):-moz-window-inactive {
  color: InactiveCaptionText;
}

.mail-toolbox:not(:-moz-lwtheme),
.contentTabToolbox:not(:-moz-lwtheme) {
  -moz-appearance: none;
  border-top: none;
  background-color: -moz-Dialog;
}

#navigation-toolbox {
  -moz-appearance: none;
  border-top: none;
  background-color: transparent;
}

.mail-toolbox,
.contentTabToolbox {
  background-image: linear-gradient(rgba(253, 253, 253, 0.45),
                                    rgba(255, 255, 255, 0));
  box-shadow: 0 1px 0 rgba(253, 253, 253, 0.45) inset,
              0 -1px 0 ThreeDShadow inset;
}

.mail-toolbox > toolbar {
  -moz-margin-start: 0;
  border-bottom: none;
  /* force iconsize="small" on these toolbars */
  counter-reset: smallicons;
}

.mail-toolbox > toolbar:not(:-moz-lwtheme),
#navigation-toolbox > toolbar:not(:-moz-lwtheme),
.contentTabToolbox:not(:-moz-lwtheme) > toolbar:not(:-moz-lwtheme) {
  -moz-appearance: none;
  border-style: none;
  background-color: transparent;
}

#mail-bar3 {
  padding: 1px 0;
}

#tabs-toolbar {
  background-image: linear-gradient(to top, hsla(209, 67%, 12%, 0.35) 1px,
                                    transparent 1px);
}

/**
 * In the classic themes, the titlebar has a horizontal gradient, which is
 * problematic for reading the text of background tabs when they're in the
 * titlebar. We side-step this issue by layering our own background underneath
 * the tabs. Unfortunately, this requires a bunch of positioning in order to
 * get text and icons to not appear fuzzy.
 */
@media (-moz-windows-classic) {
  #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen])
  .tabmail-tabs:not(:-moz-lwtheme) {
    position: relative;
    z-index: 2;
  }

  #messengerWindow[tabsintitlebar] #tabs-toolbar:not(:-moz-lwtheme) {
    position: relative;
  }

  #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen])
  #tabs-toolbar:not(:-moz-lwtheme)::after {
    /* Because we use placeholders for window controls etc. in the tabstrip,
     * and position those with ordinal attributes, and because our layout code
     * expects :before/:after nodes to come first/last in the frame list,
     * we have to reorder this element to come last, hence the
     * ordinal group value (see bug 853415). */
    -moz-box-ordinal-group: 1001;
    box-shadow: 0 0 50px 8px ActiveCaption;
    content: "";
    display: -moz-box;
    height: 0;
    margin: 0 50px;
    position: absolute;
    pointer-events: none;
    top: 100%;
    width: -moz-available;
  }

  #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen])
  #tabs-toolbar:not(:-moz-lwtheme):-moz-window-inactive::after {
    box-shadow: 0 0 50px 8px InactiveCaption;
  }

  #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen])
  #tabmail-container:not(:-moz-lwtheme) {
    position: relative;
    z-index: 2;
  }

  /* Need to constrain the box shadow fade to avoid overlapping layers,
   * see bug 886281. */
  #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen])
  #navigator-toolbox:not(:-moz-lwtheme) {
    overflow: -moz-hidden-unscrollable;
  }

  #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen])
  #tabs-toolbar .toolbarbutton-1:not(:-moz-lwtheme) {
    position: relative;
    z-index: 1;
  }

  /**
   * With the tabbrowser-tabs element z-index'd above the nav-bar, we now get the
   * scrollbox button borders leaking over the nav-bar highlight. This transparent bottom
   * border forces the scrollbox button borders to terminate a pixel early, working
   * around the issue.
   */
  #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen])
  .tabmail-arrowscrollbox > .scrollbutton-up:not(:-moz-lwtheme),
  #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen])
  .tabmail-arrowscrollbox > .scrollbutton-down-stack >
  .scrollbutton-down:not(:-moz-lwtheme) {
    border-bottom: 1px solid transparent;
  }

  #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen])
  .mail-toolbox:not(:-moz-lwtheme),
  #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen])
  .contentTabToolbox:not(:-moz-lwtheme) {
    box-shadow: none;
  }

  #messengerWindow[tabsintitlebar][sizemode="normal"]
  #titlebar-content:-moz-lwtheme {
    /* Render a window top border: */
    background-image: linear-gradient(to bottom, ThreeDLightShadow 0,
                                      ThreeDLightShadow 1px, ThreeDHighlight 1px,
                                      ThreeDHighlight 2px, ActiveBorder 2px,
                                      ActiveBorder 4px, transparent 4px);
  }

  /* End classic titlebar gradient */

  #messengerWindow[tabsintitlebar]:not([inFullscreen])
  :-moz-any(#tabs-toolbar, #mail-toolbar-menubar2)
  toolbarbutton:not(:-moz-lwtheme) {
    color: inherit;
  }
}

@media (-moz-windows-default-theme) {
  #messengerWindow[tabsintitlebar][sizemode="normal"] #mail-toolbar-menubar2 {
    margin-top: 1px;
  }
}

@media (-moz-windows-default-theme) and (-moz-os-version: windows-vista),
       (-moz-windows-default-theme) and (-moz-os-version: windows-win7) {
  .mail-toolbox:not(:-moz-lwtheme),
  .contentTabToolbox:not(:-moz-lwtheme) {
    background-color: hsl(210, 75%, 92%);
  }
}

.chromeclass-toolbar {
  /* Toolbar buttons have a margin of 3px; adjust the toolbar so the leftmost
     button lines up with the rest of the window. */
  -moz-margin-start: -3px;
}

/* ::::: 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;
  min-height: 24px;
}

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

@media not all and (-moz-windows-default-theme) {
  #messengerWindow[tabsintitlebar] #mail-menubar > menu {
    -moz-appearance: none;
  }
}

@media (-moz-windows-default-theme) and (-moz-os-version: windows-vista),
       (-moz-windows-default-theme) and (-moz-os-version: windows-win7) {
  .toolbarbutton-1:not([type="menu-button"]),
  .toolbarbutton-1 > .toolbarbutton-menubutton-button,
  .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
    -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;
  }

  .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"]) {
    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) {
    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;
  }
}

@media (-moz-os-version: windows-win8) {
  .toolbarbutton-1:not([type="menu-button"]),
  .toolbarbutton-1 > .toolbarbutton-menubutton-button,
  .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
    -moz-appearance: none;
    border: 1px solid;
    border-color: transparent;
    transition-property: background-color, border-color;
    transition-duration: 150ms;
  }

  .toolbarbutton-1[type="menu-button"] {
    -moz-appearance: none;
  }

  .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) >
  .toolbarbutton-menubutton-button,
  .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) >
  .toolbarbutton-menubutton-dropmarker,
  .toolbarbutton-1:not([disabled=true]):not([checked=true]):not([open]):not(:active):hover,
  .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover >
  .toolbarbutton-menubutton-dropmarker:not([disabled]) {
    color: -moz-DialogText;
    background-color: hsla(210, 4%, 10%, .08);
    border-color: hsla(210, 4%, 10%, .1);
  }

  .toolbarbutton-1 >
  .toolbarbutton-menubutton-button:not([disabled=true]):hover:active,
  .toolbarbutton-1[open] >
  .toolbarbutton-menubutton-dropmarker:not([disabled=true]),
  .toolbarbutton-1:not([type="menu-button"]):not([disabled]):-moz-any([open],:hover:active) {
    background-color: hsla(210, 4%, 10%, .12);
    border-color: hsla(210, 4%, 10%, .1);
    border-top-color: hsla(210, 4%, 10%, .2);
    box-shadow: 0 1px 0 0 hsla(210, 4%, 10%, .1) inset;
    transition-duration: 10ms;
  }

  .toolbarbutton-1[checked=true]:not([type="menu-button"]):not([disabled]) {
    background-color: hsla(210, 4%, 10%, .12);
    border-color: hsla(210, 4%, 10%, .2);
    box-shadow: 0 1px 1px hsla(210, 4%, 10%, .1) inset,
                0 0 1px hsla(210, 4%, 10%, .2) inset,
                0 1px 0 hsla(210, 4%, 10%, 0),
                0 0 2px hsla(210, 4%, 10%, 0);
    text-shadow: none;
    transition: none;
  }

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

@media (-moz-windows-default-theme) {
  /* Separator between menu and split type buttons */
  .toolbarbutton-1:not(:hover):not(:active):not([open]):not([checked]) >
  .toolbarbutton-menubutton-dropmarker::before,
  .toolbarbutton-1[disabled="true"] >
  .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);
  }

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

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

  /* Let the Customize window's menulist stay a system menulist */
  #modelist {
    -moz-appearance: menulist;
    margin: 2px 4px;
    padding: 0 !important;
  }
}

.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;
  -moz-padding-end: 2px;
}

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

.toolbarbutton-1[type="menu"] {
  -moz-binding: url("chrome://global/content/bindings/toolbarbutton.xml#menu-vertical");
}

toolbox[labelalign="end"] > toolbar[mode="full"] .toolbarbutton-1[type="menu"] {
  -moz-binding: url("chrome://global/content/bindings/toolbarbutton.xml#menu");
}

/* ::::: toolbar buttons on tabbar toolbar ::::: */

#tabbar-toolbar .toolbarbutton-1,
#tabbar-toolbar .toolbarbutton-menubutton-button,
#tabbar-toolbar .toolbarbutton-menubutton-dropmarker {
  margin: 0 0 -1px;
  padding: 0 3px !important;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#tabbar-toolbar .toolbarbutton-menubutton-button,
#tabbar-toolbar .toolbarbutton-menubutton-dropmarker {
  margin: 0;
}

#tabbar-toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker::before {
  display: none;
}

#tabbar-toolbar .toolbarbutton-1:not([disabled]):hover,
#tabbar-toolbar .toolbarbutton-1:not([disabled])[checked="true"],
#tabbar-toolbar toolbarbutton[type="menu-button"]:hover >
                .toolbarbutton-menubutton-dropmarker:not([disabled="true"]) {
  background-image: linear-gradient(rgba(255, 255, 255, 0),
                    rgba(255, 255, 255, .5)),
                    linear-gradient(transparent, rgba(0, 0, 0, .25) 30%),
                    linear-gradient(transparent, rgba(0, 0, 0, .25) 30%);
  background-position: 1px -1px, 0 -1px, 100% -1px;
  background-size: calc(100% - 2px) 100%, 1px 100%, 1px 100%;
  background-repeat: no-repeat;
}

#tabbar-toolbar .toolbarbutton-menubutton-button:not([disabled]):hover {
  background-image: linear-gradient(rgba(255, 255, 255, 0),
                    rgba(255, 255, 255, .5)),
                    linear-gradient(transparent, rgba(0, 0, 0, .25) 30%);
  background-position: 1px -1px, 0 -1px;
  background-size: calc(100% - 1px) 100%, 1px 100%;
  background-repeat: no-repeat;
}

#tabbar-toolbar
  .toolbarbutton-menubutton-button:not([disabled]):hover:-moz-locale-dir(rtl) {
  background-position: 1px -1px, 100% -1px;
}

@media not all and (-moz-windows-compositor) {
  #mail-toolbar-menubar2 {
    background-color: transparent !important;
  }

  #messengerWindow[tabsintitlebar]:not([inFullscreen])
  #tabs-toolbar:not(:-moz-lwtheme) {
    color: CaptionText;
  }

  #messengerWindow[tabsintitlebar]:not([inFullscreen])
  #tabs-toolbar:not(:-moz-lwtheme):-moz-window-inactive {
    color: InactiveCaptionText;
  }

  #messengerWindow[tabsintitlebar] #titlebar:-moz-lwtheme {
    visibility: hidden;
  }

  #messengerWindow[tabsintitlebar] #titlebar-content:-moz-lwtheme {
    -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
    visibility: visible;
  }
}

@media (-moz-windows-default-theme) and (-moz-windows-compositor) {
  #messengerWindow {
    -moz-appearance: -moz-win-borderless-glass;
    background: transparent;
  }

  #navigation-toolbox:not(:-moz-lwtheme),
  #tabs-toolbar {
    background-color: transparent;
  }

  #mail-toolbox:not(:-moz-lwtheme),
  #navigation-toolbox:not(:-moz-lwtheme),
  .glodaTabToolbar {
    color: black;
  }

  #mail-toolbar-menubar2 {
    background-image: linear-gradient(rgba(253, 253, 253, 0.45),
                                      rgba(253, 253, 253, 0.45));
    box-shadow: 0 1px 0 rgba(253, 253, 253, 0.45) inset;
    padding-bottom: 1px;
    padding-top: 2px;
  }

  #messengerWindow[tabsintitlebar][sizemode="normal"] #mail-toolbar-menubar2 {
    margin-top: 0;
  }

  #navigation-toolbox > #mail-toolbar-menubar2:not(:-moz-lwtheme) {
    background-color: -moz-dialog;
    border-bottom: 1px solid ThreeDShadow;
  }

  #messengerWindow[tabsintitlebar][sizemode="normal"] > #navigation-toolbox >
  #tabs-toolbar {
    margin-top: 16px !important;
  }

  #messengerWindow[tabsintitlebar][sizemode="maximized"] > #navigation-toolbox >
  #tabs-toolbar {
    margin-top: 0 !important;
  }

  #tabs-toolbar {
    -moz-box-ordinal-group: 10;
  }

  #mail-toolbar-menubar2 {
    -moz-box-ordinal-group: 20;
  }
}

@media (-moz-windows-glass) {
  #mail-toolbox:not(:-moz-lwtheme),
  .contentTabToolbox:not(:-moz-lwtheme) {
    box-shadow: 0 1px 0 rgba(253, 253, 253, 0.45) inset,
                0 -1px 0 #AABCCF inset;
  }

  #navigation-toolbox > #mail-toolbar-menubar2:not(:-moz-lwtheme) {
    background-color: hsl(210, 75%, 92%);
    border-bottom: 1px solid #AABCCF;
  }

  #tabs-toolbar:not(:-moz-lwtheme) {
    position: relative;
  }

  #tabs-toolbar:not(:-moz-lwtheme)::before {
    box-shadow: 0 0 30px 30px rgba(174, 189, 204, 0.85);
    content: "";
    display: -moz-box;
    height: 0;
    margin: 0 60px; /* (30px + 30px) from box-shadow */
    position: absolute;
    pointer-events: none;
    top: 50%;
    width: -moz-available;
    z-index: -1;
  }
}

@media not all and (-moz-windows-compositor) {
  @media (-moz-windows-default-theme) {
    #messengerWindow {
      background-color: rgb(185, 209, 234);
    }
    #messengerWindow:-moz-window-inactive {
      background-color: rgb(215, 228, 242);
    }

    #mail-toolbar-menubar2:not([autohide=true]):not(:-moz-lwtheme),
    #tabs-toolbar:not(:-moz-lwtheme) {
      -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag");
      background-color: transparent;
    }
    #mail-toolbar-menubar2[autohide=true] {
      background-color: transparent !important;
    }

    /* Render a window top border for lwthemes: */
    #messengerWindow[tabsintitlebar][sizemode="normal"]
    #titlebar-content:-moz-lwtheme {
      background-image: linear-gradient(to bottom, rgb(37, 44, 51) 0,
                                        rgb(37, 44, 51) 1px,
                                        rgba(255,255,255,.6) 1px,
                                        rgba(255,255,255,.6) 2px, transparent 2px);
    }

    #messengerWindow[tabsintitlebar][sizemode="normal"]
    #titlebar-content:-moz-lwtheme:-moz-window-inactive {
      background-image: linear-gradient(to bottom, rgb(102, 102, 102) 0,
                                        rgb(102, 102, 102) 1px,
                                        rgba(255,255,255,.6) 1px,
                                        rgba(255,255,255,.6) 2px, transparent 2px);
    }
  }

  #print-preview-toolbar:not(:-moz-lwtheme) {
    -moz-appearance: -moz-win-browsertabbar-toolbox;
  }
}

@media (-moz-os-version: windows-win8) {
  @media not all and (-moz-windows-default-theme) {
    #messengerWindow:not([tabsintitlebar]) #tabs-toolbar:not(:-moz-lwtheme),
    #messengerWindow:not([tabsintitlebar]) #mail-menubar >
      menu:not(:-moz-lwtheme) {
      color: CaptionText;
    }

    #messengerWindow:not([tabsintitlebar])
      #tabs-toolbar:not(:-moz-lwtheme):-moz-window-inactive,
    #messengerWindow:not([tabsintitlebar]) #mail-menubar >
      menu:not(:-moz-lwtheme):-moz-window-inactive {
      color: InactiveCaptionText;
    }

    #messengerWindow:not([tabsintitlebar]) #mail-menubar > menu {
      -moz-appearance: none;
    }
  }
}

#mail-toolbox > toolbar[brighttext] .toolbarbutton-1,
#navigation-toolbox > toolbar[brighttext] .toolbarbutton-1 {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar-inverted.png");
}

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

#button-getmsg {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(1px, 17px, 17px, 1px);
}

#button-newmsg {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(1px, 35px, 17px, 19px);
}

#button-address {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(1px, 53px, 17px, 37px);
}

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

#button-replyall {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(1px, 89px, 17px, 73px);
}

#button-replylist {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(1px, 125px, 17px, 109px);
}

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

.delete-button {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(1px, 143px, 17px, 127px);
}

.junk-button {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(1px, 161px, 17px, 145px);
}

#button-print {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(1px 179px 17px 163px);
}

#button-stop {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(1px 197px 17px 181px);
}

#button-file {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(1px 215px 17px 199px);
}

#button-nextUnread {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(1px 233px 17px 217px);
}

#button-previousUnread {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(1px 251px 17px 235px);
}

#button-mark {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(1px, 269px, 17px, 253px);
}

#button-tag {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(1px, 287px, 17px, 271px);
}

#button-goback {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(1px, 305px, 17px, 289px);
}

#button-goforward {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(1px, 323px, 17px, 307px);
}

#button-compact {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(1px, 341px, 17px, 325px);
}

#button-archive {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(1px, 359px, 17px, 343px);
}

#button-chat {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(1px, 395px, 17px, 379px);
}

#button-chat[unreadMessages="true"] {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(19px, 395px, 35px, 379px);
}

toolbar:not([mode="text"]) > #button-chat > stack,
toolbar:not([mode="text"]) > toolbarpaletteitem > #button-chat > stack {
  margin: 1px;
}

toolbar[iconsize="large"]:not([mode="text"]) .badgeButton-badge {
  -moz-margin-start: 5px;
  margin-bottom: 5px;
}

#button-nextMsg {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(1px, 413px, 17px, 397px);
}

#button-previousMsg {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(1px, 431px, 17px, 415px);
}

.button-appmenu {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(1px, 449px, 17px, 433px);
  min-width: 35px !important;
}

.button-appmenu .toolbarbutton-text,
.button-appmenu .toolbarbutton-menu-dropmarker {
  display: none;
}

toolbar[mode="text"] .button-appmenu .toolbarbutton-icon {
  display: -moz-box;
}

#palette-box .toolbarbutton-1,
#palette-box .toolbarbutton-menubutton-button,
#palette-box .toolbarbutton-menubutton-dropmarker {
  border: none;
  background: none;
  box-shadow: none;
}

#palette-box #qfb-show-filter-bar {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(1px, 377px, 17px, 361px);
}

/* Force the folder location and mail view items to fit in the available width
   in the Customize Toolbar dialog. */
#palette-box #locationFolders,
#palette-box #folder-location-container,
#palette-box #viewPicker {
  -moz-box-flex: 1;
}

/* remove the small icons checkbox in Customize window */
#smallicons {
  display: none;
}

/* ::::: message notification bar style rules ::::: */

.msgNotificationBar {
  background-color: InfoBackground;
  color: InfoText;  
  border-bottom: 1px solid ThreeDDarkShadow;
  padding: 3px;
}

.msgNotificationBarText {
  font-weight: bold;
}

.msgNotificaton-smallText {
  -moz-padding-start: 10px;
  font-size: 90%;
}

/* AppMenu styling */

.splitmenu-menuitem {
  -moz-margin-end: 1px;
  -moz-padding-end: 0.5em;
}

.splitmenu-menu {
  -moz-box-pack: end;
}

.appmenu-edit-button {
  -moz-appearance: none;
  border: 1px solid transparent;
  padding: 2px;
  background: transparent;
  border-radius: 3px;
}

.appmenu-edit-button[disabled="true"] {
  opacity: .3;
}

#appmenuPrimaryPane {
  -moz-border-end: 1px solid ThreeDShadow;
}

@media (-moz-windows-default-theme) and (-moz-os-version: windows-vista),
       (-moz-windows-default-theme) and (-moz-os-version: windows-win7) {
  #appmenuSecondaryPane {
    --appMenu-bg-color: #f1f5fb;
    --appMenu-bg-box-shadow: rgb(204, 214, 234);
  }
}

@media (-moz-os-version: windows-win8) {
  #appmenuSecondaryPane {
    --appMenu-bg-color: -moz-dialog;
    --appMenu-bg-box-shadow: ThreeDShadow;
  }
}

@media (-moz-windows-default-theme) {
  #appmenu-popup {
    -moz-appearance: none;
    background: white;
    border: 1px solid ThreeDShadow;
  }
  #appmenuPrimaryPane {
    background-color: rgba(255, 255, 255, .5);
    padding: 2px;
    -moz-border-end: none;
  }
  #appmenuSecondaryPane {
    background-color: var(--appMenu-bg-color);
    box-shadow: 1px 0 2px var(--appMenu-bg-box-shadow) inset;
    -moz-padding-start: 3px;
    -moz-padding-end: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-family: "Segoe UI Semibold", "Segoe UI", sans-serif;
  }
  #appmenuSecondaryPane:-moz-locale-dir(rtl) {
    box-shadow: -1px 0 2px var(--appMenu-bg-box-shadow) inset;
  }

  #appmenuPrimaryPane menupopup {
    -moz-appearance: none;
    background-image: linear-gradient(to right, white 26px, ThreeDLightShadow 26px,
                                      ThreeDLightShadow 27px, ThreeDHighlight 27px,
                                      ThreeDHighlight 28px, white 28px);
    border: 3px solid;
    -moz-border-top-colors: ThreeDShadow white;
    -moz-border-bottom-colors: ThreeDShadow white;
    -moz-border-left-colors: ThreeDShadow white;
    -moz-border-right-colors: ThreeDShadow white;
  }

  #appmenuSecondaryPane menupopup {
    -moz-appearance: none;
    background-image: linear-gradient(to right, var(--appMenu-bg-color) 26px,
                                      ThreeDLightShadow 26px, ThreeDLightShadow 27px,
                                      ThreeDHighlight 27px, ThreeDHighlight 28px,
                                      var(--appMenu-bg-color) 28px);
    border: 3px solid;
    -moz-border-top-colors: ThreeDShadow var(--appMenu-bg-color);
    -moz-border-bottom-colors: ThreeDShadow var(--appMenu-bg-color);
    -moz-border-left-colors: ThreeDShadow var(--appMenu-bg-color);
    -moz-border-right-colors: ThreeDShadow var(--appMenu-bg-color);
  }

  #appmenuPrimaryPane menupopup:-moz-locale-dir(rtl) {
    background-image: linear-gradient(to left, white 26px, ThreeDLightShadow 26px,
                                      ThreeDLightShadow 27px, ThreeDHighlight 27px,
                                      ThreeDHighlight 28px, white 28px);
  }
  #appmenuSecondaryPane menupopup:-moz-locale-dir(rtl) {
    background-image: linear-gradient(to left, var(--appMenu-bg-color) 26px,
                                      ThreeDLightShadow 26px, ThreeDLightShadow 27px,
                                      ThreeDHighlight 27px, ThreeDHighlight 28px,
                                      var(--appMenu-bg-color) 28px);
  }

  /* Hi-DPI overrides of the menu backgrounds, to adjust where the gutter line falls */
  @media (min-resolution: 1.25dppx) {
    #appmenuPrimaryPane menupopup {
      background-image: linear-gradient(to right, white 22.4px, ThreeDLightShadow 22.4px,
                                        ThreeDLightShadow 23.2px, ThreeDHighlight 23.2px,
                                        ThreeDHighlight 24px, white 24px);
    }
    #appmenuSecondaryPane menupopup {
      background-image: linear-gradient(to right, var(--appMenu-bg-color) 22.4px,
                                        ThreeDLightShadow 22.4px, ThreeDLightShadow 23.2px,
                                        ThreeDHighlight 23.2px, ThreeDHighlight 24px,
                                        var(--appMenu-bg-color) 24px);
    }
    #appmenuPrimaryPane menupopup:-moz-locale-dir(rtl) {
      background-image: linear-gradient(to left, white 22.4px, ThreeDLightShadow 22.4px,
                                        ThreeDLightShadow 23.2px, ThreeDHighlight 23.2px,
                                        ThreeDHighlight 24px, white 24px);
    }
    #appmenuSecondaryPane menupopup:-moz-locale-dir(rtl) {
      background-image: linear-gradient(to left, var(--appMenu-bg-color) 22.4px,
                                        ThreeDLightShadow 22.4px, ThreeDLightShadow 23.2px,
                                        ThreeDHighlight 23.2px, ThreeDHighlight 24px,
                                        var(--appMenu-bg-color) 24px);
    }
  }

  @media (min-resolution: 1.5dppx) {
    #appmenuPrimaryPane menupopup {
      background-image: linear-gradient(to right, white 20.6667px, ThreeDLightShadow 20.6667px,
                                        ThreeDLightShadow 21.3333px, ThreeDHighlight 21.3333px,
                                        ThreeDHighlight 22px, white 22px);
    }
    #appmenuSecondaryPane menupopup {
      background-image: linear-gradient(to right, var(--appMenu-bg-color) 20.6667px,
                                        ThreeDLightShadow 20.6667px, ThreeDLightShadow 21.3333px,
                                        ThreeDHighlight 21.3333px, ThreeDHighlight 22px,
                                        var(--appMenu-bg-color) 22px);
    }
    #appmenuPrimaryPane menupopup:-moz-locale-dir(rtl) {
      background-image: linear-gradient(to left, white 20.6667px, ThreeDLightShadow 20.6667px,
                                        ThreeDLightShadow 21.3333px, ThreeDHighlight 21.3333px,
                                        ThreeDHighlight 22px, white 22px);
    }
    #appmenuSecondaryPane menupopup:-moz-locale-dir(rtl) {
      background-image: linear-gradient(to left, var(--appMenu-bg-color) 20.6667px,
                                        ThreeDLightShadow 20.6667px, ThreeDLightShadow 21.3333px,
                                        ThreeDHighlight 21.3333px, ThreeDHighlight 22px,
                                        var(--appMenu-bg-color) 22px);
    }
  }

  @media (min-resolution: 2dppx) {
    #appmenuPrimaryPane menupopup {
      background-image: linear-gradient(to right, white 19.5px, ThreeDLightShadow 19.5px,
                                        ThreeDLightShadow 20px, ThreeDHighlight 20px,
                                        ThreeDHighlight 20.5px, white 20.5px);
    }
    #appmenuSecondaryPane menupopup {
      background-image: linear-gradient(to right, var(--appMenu-bg-color) 19.5px,
                                        ThreeDLightShadow 19.5px, ThreeDLightShadow 20px,
                                        ThreeDHighlight 20px, ThreeDHighlight 20.5px,
                                        var(--appMenu-bg-color) 20.5px);
    }
    #appmenuPrimaryPane menupopup:-moz-locale-dir(rtl) {
      background-image: linear-gradient(to left, white 19.5px, ThreeDLightShadow 19.5px,
                                        ThreeDLightShadow 20px, ThreeDHighlight 20px,
                                        ThreeDHighlight 20.5px, white 20.5px);
    }
    #appmenuSecondaryPane menupopup:-moz-locale-dir(rtl) {
      background-image: linear-gradient(to left, var(--appMenu-bg-color) 19.5px,
                                        ThreeDLightShadow 19.5px, ThreeDLightShadow 20px,
                                        ThreeDHighlight 20px, ThreeDHighlight 20.5px,
                                        var(--appMenu-bg-color) 20.5px);
    }
  }

  .appmenu-menuseparator {
    -moz-appearance: none;
    margin-top: 3px;
    margin-bottom: 3px;
    -moz-margin-start: 30px;
    padding: 0;
    border-top: 1px solid #d6e5f5;
    border-bottom: none;
  }

  @media (min-resolution: 1.25dppx) {
    .appmenu-menuseparator {
      -moz-margin-start: 25px;
    }
  }
  @media (min-resolution: 1.5dppx) {
    .appmenu-menuseparator {
      -moz-margin-start: 24px;
    }
  }
  @media (min-resolution: 2dppx) {
    .appmenu-menuseparator {
      -moz-margin-start: 22px;
    }
  }

  .appmenu-edit-button:not([disabled]):hover {
    border: 1px solid #b8d6fb;
    box-shadow: inset 0 0 1px white;
    background: linear-gradient(#fafbfd, #ebf3fd);
    transition: .2s ease-in;
  }
}

.appmenuPane-spacer {
  min-height: 1em;
}

#appmenu-editmenu {
  -moz-box-pack: end;
}

#appmenu_print,
#appmenu_print_popup,
.appmenu-edit-button,
#appmenu-editmenu-cut,
#appmenu-editmenu-copy,
#appmenu-editmenu-paste,
#appmenu-quit {
  list-style-image: url("icons/appmenu-icons.png");
}

#appmenu-cut,
#appmenu-editmenu-cut {
  -moz-image-region: rect(0 16px 16px 0);
}

#appmenu-copy,
#appmenu-editmenu-copy {
  -moz-image-region: rect(0 32px 16px 16px);
}

#appmenu-paste,
#appmenu-editmenu-paste {
  -moz-image-region: rect(0 48px 16px 32px);
}

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

#appmenu-quit {
  -moz-image-region: rect(0 80px 16px 64px);
}

#appmenu-edit-label {
  -moz-appearance: none;
  background: transparent;
  font-style: italic;
}

#appmenu_addons {
  list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.png");
}

@media (min-resolution: 1.25dppx) {
  #appmenu_addons {
    list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
  }
}
