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

/* ===== mailWindow1.css ================================================
  == Styles for the main Mail window in the default layout scheme.
  ======================================================================= */

@import url("chrome://messenger/skin/");
@import url("chrome://messenger/skin/primaryToolbar.css");
@import url("chrome://messenger/skin/folderMenus.css");
@import url("chrome://messenger/skin/folderPane.css");
@import url("chrome://messenger/skin/tagColors.css");
@import url("chrome://messenger/skin/shared/mailWindow1.css");

/* give the toolbox a min-height of 42px for Australis theme */
@media (-moz-os-version: windows-xp) {
  .mail-toolbox:not([mode="full"]) > toolbar:only-of-type,
  .mail-toolbox[mode="full"][labelalign="end"] > toolbar:only-of-type {
    margin-top: 6px;
    margin-bottom: 6px;
  }

  .mail-toolbox[iconsize="large"]:not([mode="full"]) > toolbar:only-of-type,
  .mail-toolbox[iconsize="large"][mode="full"][labelalign="end"] >
  toolbar:only-of-type {
    margin-top: 2px;
    margin-bottom: 3px;
  }
}

@media (-moz-os-version: windows-vista),
       (-moz-os-version: windows-win7),
       (-moz-os-version: windows-win8) {
  .mail-toolbox:not([mode="full"]) > toolbar:only-of-type,
  .mail-toolbox[mode="full"][labelalign="end"] > toolbar:only-of-type {
    margin-top: 7px;
    margin-bottom: 7px;
  }
}

@media (-moz-os-version: windows-win10) {
  .mail-toolbox:not([mode="full"]) > toolbar:only-of-type,
  .mail-toolbox[mode="full"][labelalign="end"] > toolbar:only-of-type {
    margin-top: 6px;
    margin-bottom: 6px;
  }
}

.mail-toolbox[mode="text"]:not([mode="full"]) > toolbar:only-of-type {
  margin-top: 5px;
  margin-bottom: 5px;
}

/* Don't use the listbox appearance as that gives us a blue-grey top border
   that collides with the primary toolbar border */
#threadTree, #folderTree {
  -moz-appearance:  none;
  background-color: -moz-Field;
  color: -moz-FieldText;
}

/* ::::: thread decoration ::::: */

treechildren::-moz-tree-row(dummy)  {
  background-color: var(--row-grouped-header-bg-color);
  -moz-padding-start: 2px;
  margin-bottom: 1px;
}

treechildren::-moz-tree-row(dummy, selected, focus)  {
  background-color: Highlight;
}

treechildren::-moz-tree-cell-text(dummy) {
  font-weight: bold;
}

treechildren::-moz-tree-cell-text(imapdeleted) {
  text-decoration: line-through;
}

/* ::::: message column icons ::::: */

.treecol-image image {
  -moz-padding-end: 4px;
  padding-bottom: 3px;
}

:-moz-system-metric(windows-classic) .treecol-image image {
  -moz-padding-end: 1px;
  padding-bottom: 2px;
}

/* ..... column picker ..... */

.tree-columnpicker-icon  {
  list-style-image: url("chrome://messenger/skin/icons/columnpicker.svg");
}

/* ..... thread column ..... */

.threadColumnHeader {
  list-style-image: url("chrome://messenger/skin/icons/thread-col.svg");
}

treechildren::-moz-tree-image(threadCol, container) {
  list-style-image: url("chrome://messenger/skin/icons/thread.png");
}

treechildren::-moz-tree-image(threadCol, watch) {
  list-style-image: url("chrome://messenger/skin/icons/thread-watched.png");
}

treechildren::-moz-tree-image(threadCol, ignore) {
  list-style-image: url("chrome://messenger/skin/icons/thread-ignored.png");
}

treechildren::-moz-tree-image(threadCol, ignoreSubthread) {
  list-style-image: url("chrome://messenger/skin/icons/message-ignored.png");
}

/* ..... read column ..... */

.readColumnHeader {
  list-style-image: url("chrome://messenger/skin/icons/readcol.svg");
}

treechildren::-moz-tree-image(unreadButtonColHeader) {
  list-style-image: url("chrome://messenger/skin/icons/readmail.png");
}

treechildren::-moz-tree-image(unreadButtonColHeader, unread) {
  list-style-image: url("chrome://messenger/skin/icons/unreadmail.png");
}

/* ..... attachment column ..... */

.attachmentColumnHeader {
  list-style-image: url("chrome://messenger/skin/icons/attachment-col.svg");
}

treechildren::-moz-tree-image(attachmentCol, attach) {
  -moz-margin-start: 3px;
}

@media (-moz-os-version: windows-xp) {
  treechildren::-moz-tree-image(attachmentCol, attach) {
    list-style-image: url("chrome://messenger/skin/icons/attachment-col-XP.png");
  }
}

@media not all and (-moz-os-version: windows-xp) {
  treechildren::-moz-tree-image(attachmentCol, attach) {
    list-style-image: url("chrome://messenger/skin/icons/attachment-col.png");
  }
}

/* ..... flag column ..... */

.flagColumnHeader {
  list-style-image: url("chrome://messenger/skin/icons/flag-col.svg");
}

treechildren::-moz-tree-image(flaggedCol) {
  list-style-image: url("chrome://messenger/skin/icons/flag-empty.png");
  -moz-padding-end: 2px;
}

@media (-moz-os-version: windows-xp) {
  treechildren::-moz-tree-image(flaggedCol, flagged) {
    list-style-image: url("chrome://messenger/skin/icons/flag-XP.png");
  }
}

@media not all and (-moz-os-version: windows-xp) {
  treechildren::-moz-tree-image(flaggedCol, flagged) {
    list-style-image: url("chrome://messenger/skin/icons/flag.png");
  }
}

/* ..... junkStatus column ..... */

@media (-moz-os-version: windows-xp) {
  treechildren::-moz-tree-image(junkStatusCol) {
    list-style-image: url("chrome://messenger/skin/icons/folder-XP.png");
  }
}

@media not all and (-moz-os-version: windows-xp) {
  treechildren::-moz-tree-image(junkStatusCol) {
    margin-inline-start: -3px;
    list-style-image: url("chrome://messenger/skin/icons/folder.png");
  }
}

.junkStatusHeader {
  list-style-image: url("chrome://messenger/skin/icons/junk-col.svg");
}

/* "unknown" now looks like "not junk".  see bug #182386 */
treechildren::-moz-tree-image(junkStatusCol) {
  -moz-image-region: rect(16px 128px 32px 112px);
  padding-inline-start: 0;
}

treechildren::-moz-tree-image(junkStatusCol, junk) {
  -moz-image-region: rect(0 128px 16px 112px);
}

treechildren::-moz-tree-image(junkStatusCol, notjunk) {
  -moz-image-region: rect(16px 128px 32px 112px);
}

/* ..... correspondent column ..... */

@media (-moz-os-version: windows-xp) {
  treechildren::-moz-tree-image(correspondentCol) {
    list-style-image: url("chrome://messenger/skin/icons/message-XP.png");
  }
}

@media not all and (-moz-os-version: windows-xp) {
  treechildren::-moz-tree-image(correspondentCol) {
    list-style-image: url("chrome://messenger/skin/icons/message.png");
  }
}

treechildren::-moz-tree-image(correspondentCol, incoming) {
  -moz-margin-end: 2px;
  -moz-image-region: rect(0 112px 16px 96px);
}

treechildren::-moz-tree-image(correspondentCol, outgoing) {
  -moz-margin-end: 2px;
  -moz-image-region: rect(0 128px 16px 112px);
}

/* ..... subject column ..... */

@media (-moz-os-version: windows-xp) {
  #subjectCol {
    -moz-padding-start: 17px;
  }

  #subjectCol[primary="true"] {
    -moz-padding-start: 30px;
  }

  treechildren::-moz-tree-image(subjectCol) {
    list-style-image: url("chrome://messenger/skin/icons/message-XP.png");
  }
}

@media not all and (-moz-os-version: windows-xp) {
  treechildren::-moz-tree-image(subjectCol) {
    list-style-image: url("chrome://messenger/skin/icons/message.png");
  }
}

treechildren::-moz-tree-image(subjectCol) {
  -moz-margin-end: 2px;
  -moz-image-region: rect(0 16px 16px 0);
}

treechildren::-moz-tree-image(subjectCol, forwarded) {
  -moz-image-region: rect(0 48px 16px 32px);
}

treechildren::-moz-tree-image(subjectCol, replied) {
  -moz-image-region: rect(0 32px 16px 16px);
}

treechildren::-moz-tree-image(subjectCol, replied, forwarded) {
  -moz-image-region: rect(0 64px 16px 48px);
}

treechildren::-moz-tree-image(subjectCol, new) {
  -moz-image-region: rect(0 96px 16px 80px);
}


/* IMPORTANT: make sure the imap-deleted column always comes after the replied/forwarded style rules.
   This ensures that we show that the message is marked as deleted over status information. */

treechildren::-moz-tree-image(subjectCol, imapdeleted) {
  -moz-image-region: rect(0 80px 16px 64px);
}

/* ..... folder pane adjustments ..... */

#folderpane-title {
  padding-inline-start: 12px;
  padding-inline-end: 8px;
}

@media (-moz-os-version: windows-xp) {
  .folderview-cycler {
    padding-inline-end: 0;
  }
}

.folderview-cycler {
  list-style-image: url("chrome://messenger/skin/icons/arrow/foldercycler-arrow.svg#normal");
}

.folderview-cycler:-moz-lwtheme-brighttext {
  list-style-image: url("chrome://messenger/skin/icons/arrow/foldercycler-arrow.svg#inverted");
}

.folderview-cycler[dir="prev"]:-moz-locale-dir(ltr) > .toolbarbutton-icon,
.folderview-cycler[dir="next"]:-moz-locale-dir(rtl) > .toolbarbutton-icon {
  transform: scaleX(-1);
}

/* ..... splitter adjustments ..... */

#mailContent[layout="standard"] #threadpane-splitter {
  /* Overlap the folder pane splitter to make the splitters appear unified. */
  -moz-margin-start: -1px;
}

#mailContent[layout="standard"] #folderpane_splitter:-moz-locale-dir(rtl) {
  /* Don't draw the splitter's border here... */
  border-left: 0;
}

#mailContent[layout="standard"] #threadPaneBox:-moz-locale-dir(rtl),
#mailContent[layout="standard"] #messagepanebox:-moz-locale-dir(rtl){
  /* ... draw it here instead! (This removes the white highlight just to the
     right of the thread pane splitter so everything looks pretty.) */
  margin-right: -2px;
  border-right: 2px solid;
  -moz-border-right-colors: ThreeDHighlight ThreeDShadow;
}

#mailContent[layout="standard"] #threadPaneBox:-moz-locale-dir(rtl) {
  /* Make sure we have a white dot in the top-left corner where the splitters
     meet. */
  margin-bottom: -2px;
  padding-bottom: 2px;
}

#mailContent[layout="wide"] #folderpane_splitter {
  /* Make this draw above the thread pane splitter so that we overlap its top
     border. This will make the splitters appear unified. */
  position: relative;
  z-index: 2;
  margin-bottom: -1px;
}

#mailContent[layout="wide"] #threadpane-splitter {
  /* Don't draw the splitter's border here... */
  border-top: 0;
}

@media (-moz-os-version: windows-xp) {
  #mailContent[layout="wide"] #threadPaneBox,
  #mailContent[layout="wide"] #folderPaneBox {
    /* ... draw it here instead! (This removes the white highlight just below the
       folder pane splitter so everything looks pretty.) */
    position: relative;
    z-index: 1;
    margin-bottom: -2px;
    border-bottom: 2px solid;
    -moz-border-bottom-colors: ThreeDHighlight ThreeDShadow;
  }
}

#mailContent[layout="wide"] #folderPaneBox:-moz-locale-dir(ltr),
#mailContent[layout="wide"] #threadPaneBox:-moz-locale-dir(rtl) {
  /* Make sure we have a white dot in the top-left corner where the splitters
     meet. */
  margin-right: -2px;
  padding-right: 2px;
}

@media (-moz-os-version: windows-xp) {
  #threadTree treechildren::-moz-tree-row(odd) {
    background-image: url("chrome://messenger/skin/icons/row.png");
    background-position: bottom;
    background-repeat: repeat-x;
  }

  #threadTree treechildren::-moz-tree-row(dummy, odd) {
    background-image: none;
  }

  .tabmail-tab[type="message"] {
    list-style-image: url("chrome://messenger/skin/icons/server-xp.png");
    -moz-image-region: rect(0 16px 16px 0);
  }
}

.tabmail-tab[type="message"] {
  list-style-image: url("chrome://messenger/skin/icons/server.png");
  -moz-image-region: rect(0 16px 16px 0);
}

.tabmail-tab[type="message"][IsFeedMessage] {
  list-style-image: url("chrome://messenger-newsblog/skin/icons/rss-feed.png");
  -moz-image-region: rect(32px 16px 48px 0);
  width: 16px;
  height: 16px;
}

/* ..... tabs ..... */

#tabpanelcontainer {
  -moz-appearance: none;
}

/* ..... Draw in titlebar ..... */

#messengerWindow[sizemode="normal"] > #titlebar {
  -moz-appearance: -moz-window-titlebar;
}

#messengerWindow[sizemode="maximized"] > #titlebar {
  -moz-appearance: -moz-window-titlebar-maximized;
}

@media (-moz-windows-classic) {
  #messengerWindow[tabsintitlebar] > #navigation-toolbox >
  #mail-toolbar-menubar2 {
    border-bottom: none;
  }

  #messengerWindow[tabsintitlebar][sizemode="normal"] >
  #navigation-toolbox > #mail-toolbar-menubar2 {
    margin-top: 4px;
  }
}

#titlebar-buttonbox-container {
  -moz-box-align: start;
}

/* The button box must appear on top of the navigator-toolbox in order for
 * click and hover mouse events to work properly for the button in the restored
 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
 * can swallow those events. It will also place the buttons above the fog on
 * themes with Aero Glass.
 */
#titlebar-buttonbox {
  z-index: 1;
}

#titlebar {
  -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
}

#messengerWindow:not([tabsintitlebar]) #titlebar {
  visibility: collapse;
}

#titlebar-spacer {
  pointer-events: none;
}

#tabs-toolbar {
  -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag");
}

#titlebar-buttonbox {
  -moz-appearance: -moz-window-button-box;
  position: relative;
}

#messengerWindow[sizemode="maximized"] #titlebar-buttonbox {
  -moz-appearance: -moz-window-button-box-maximized;
}

#titlebar-min {
  -moz-appearance: -moz-window-button-minimize;
}

@media not all and (-moz-windows-classic) {
  #titlebar-min {
    -moz-margin-end: 2px;
  }
}

#titlebar-max {
  -moz-appearance: -moz-window-button-maximize;
}

#messengerWindow[sizemode="maximized"] #titlebar-max {
  -moz-appearance: -moz-window-button-restore;
}

#titlebar-close {
  -moz-appearance: -moz-window-button-close;
}

#messengerWindow[tabsintitlebar] .titlebar-placeholder[type="caption-buttons"] {
  margin-left: 10px; /* additional space for Aero Snap */
}

#messengerWindow:not([tabsintitlebar]) .titlebar-placeholder {
  visibility: collapse;
}

@media (-moz-windows-compositor) {
  #tabmail-container {
    -moz-appearance: -moz-win-exclude-glass;
  }

  @media (-moz-os-version: windows-vista),
         (-moz-os-version: windows-win7),
         (-moz-os-version: windows-win8) {
    #messengerWindow {
      -moz-appearance: -moz-win-borderless-glass;
      background-color: transparent;
    }

    /* These should be hidden w/ glass enabled. Windows draws its own buttons. */
    .titlebar-button {
      display: none;
    }

    #messengerWindow[sizemode="maximized"] #titlebar-buttonbox {
      -moz-margin-end: 3px;
    }
  }

  /* Artificially draw window borders that are covered by lwtheme,
     see bug 591930. Vista/win7 are using different colors than win8 */
  @media (-moz-os-version: windows-vista),
         (-moz-os-version: windows-win7) {
    #messengerWindow[sizemode="normal"] > #titlebar >
    #titlebar-content:-moz-lwtheme {
      border-top: 2px solid;
      -moz-border-top-colors: rgb(37, 44, 51) rgba(255, 255, 255, 0.6);
    }

    #messengerWindow[sizemode="normal"] > #titlebar >
    #titlebar-content:-moz-lwtheme:-moz-window-inactive {
      -moz-border-top-colors: rgb(102, 102, 102) rgba(255, 255, 255, 0.6);
    }
  }

  @media (-moz-os-version: windows-win8) {
    #messengerWindow[sizemode="normal"] > #titlebar >
    #titlebar-content:-moz-lwtheme {
      border-top: 1px solid hsla(209, 67%, 12%, 0.35);
    }
  }

  @media (-moz-os-version: windows-win10) {
    #messengerWindow {
      -moz-appearance: -moz-win-glass;
    }

    @media (-moz-windows-default-theme) {
      #messengerWindow {
        background-color: #a8cbdb;
      }

      #messengerWindow:-moz-window-inactive {
        background-color: #d1d1d1;
      }
    }

    @media not all and (-moz-windows-default-theme) {
      #messengerWindow {
        background-color: transparent;
      }
    }

    #titlebar-buttonbox,
    .titlebar-button {
      -moz-appearance: none !important;
    }

    .titlebar-button {
      border: none;
      margin: 0 !important;
      padding: 10px 17px;
    }

    #messengerWindow[sizemode=maximized] .titlebar-button {
      padding-top: 8px;
      padding-bottom: 8px;
    }

    .titlebar-button > .toolbarbutton-icon {
      width: 12px;
      height: 12px;
    }

    #titlebar-min {
      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#minimize);
    }

    #titlebar-max {
      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#maximize);
    }

    #messengerWindow[sizemode="maximized"] #titlebar-max {
      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#restore);
    }

    #titlebar-close {
      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#close);
    }
    #titlebar-close:hover {
      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#close-white);
    }

    #titlebar-min:-moz-lwtheme {
      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#minimize-themes);
    }
    #titlebar-max:-moz-lwtheme {
      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#maximize-themes);
    }
    #messengerWindow[sizemode="maximized"] #titlebar-max:-moz-lwtheme {
      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#restore-themes);
    }
    #titlebar-close:-moz-lwtheme {
      list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#close-themes);
    }

    /* the 12px image renders a 10px icon, and the 10px upscaled gets rounded to 12.5, which
     * rounds up to 13px, which makes the icon one pixel too big on 1.25dppx. Fix: */
    @media (min-resolution: 1.20dppx) and (max-resolution: 1.45dppx) {
      .titlebar-button > .toolbarbutton-icon {
        width: 11.5px;
        height: 11.5px;
      }
    }

    /* 175% dpi should result in the same device pixel sizes as 150% dpi. */
    @media (min-resolution: 1.70dppx) and (max-resolution: 1.95dppx) {
      .titlebar-button {
        padding-left: 14.1px;
        padding-right: 14.1px;
      }

      .titlebar-button > .toolbarbutton-icon {
        width: 10.8px;
        height: 10.8px;
      }
    }

    /* 225% dpi should result in the same device pixel sizes as 200% dpi. */
    @media (min-resolution: 2.20dppx) and (max-resolution: 2.45dppx) {
      .titlebar-button {
        padding-left: 15.3333px;
        padding-right: 15.3333px;
      }

      .titlebar-button > .toolbarbutton-icon {
        width: 10.8px;
        height: 10.8px;
      }
    }

    /* 275% dpi should result in the same device pixel sizes as 250% dpi. */
    @media (min-resolution: 2.70dppx) and (max-resolution: 2.95dppx) {
      /* NB: todo: this should also change padding on the buttons
       * themselves, but without a device to test this on, it's
       * impossible to know by how much. */
      .titlebar-button > .toolbarbutton-icon {
        width: 10.8px;
        height: 10.8px;
      }
    }

    @media (-moz-windows-default-theme) {
      .titlebar-button:hover {
        background-color: hsla(0, 0%, 0%, .12);
      }

      .titlebar-button:hover:active {
        background-color: hsla(0, 0%, 0%, .22);
      }

      .titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive {
        opacity: 0.5;
      }

      #titlebar-close:hover {
        background-color: hsl(355, 86%, 49%);
      }

      #titlebar-close:hover:active {
        background-color: hsl(355, 82%, 69%);
      }
    }
    @media not all and (-moz-windows-default-theme) {
      .titlebar-button {
        background-color: -moz-field;
      }
      .titlebar-button:hover {
        background-color: Highlight;
      }

      #titlebar-min {
        list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#minimize-highcontrast);
      }
      #titlebar-min:hover {
        list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#minimize-highcontrast-hover);
      }

      #titlebar-max {
        list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#maximize-highcontrast);
      }
      #titlebar-max:hover {
        list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#maximize-highcontrast-hover);
      }

      #messengerWindow[sizemode="maximized"] #titlebar-max {
        list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#restore-highcontrast);
      }
      #messengerWindow[sizemode="maximized"] #titlebar-max:hover {
        list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#restore-highcontrast-hover);
      }

      #titlebar-close {
        list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#close-highcontrast);
      }
      #titlebar-close:hover {
        list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#close-highcontrast-hover);
      }
    }
  }

  #messengerWindow[sizemode="normal"] #titlebar-buttonbox:-moz-lwtheme {
    margin-top: -2px;
  }

  #mail-toolbar-menubar2 > .titlebar-placeholder {
    display: none;
  }
}

@media not all and (-moz-os-version: windows-xp) {
  #subjectCol {
    -moz-padding-start: 20px;
  }

  #subjectCol[primary="true"] {
    -moz-padding-start: 30px;
  }

  @media not all and (-moz-windows-default-theme) {
    #subjectCol {
      -moz-padding-start: 17px;
    }

    #subjectCol[primary="true"] {
      -moz-padding-start: 27px;
    }
  }

  .threadColumnHeader {
    -moz-padding-end: 2px;
  }

  treechildren::-moz-tree-image(news, threadCol, watch) {
    -moz-margin-start: -2px;
  }

  #folderpane_splitter,
  #threadpane-splitter:not([orient="vertical"]) {
    border: none;
    min-width: 0;
    width: 5px;
    background-color: transparent;
    margin-top: 0;
    position: relative;
    z-index: 10;
    transition: border-width .3s ease-in;
  }

  #folderpane_splitter {
    border-inline-start: 1px solid #a9b7c9;
    /* make only the splitter border visible */
    margin-inline-end: -4px;
  }

  #folderpane_splitter[state="collapsed"]:hover {
    border-inline-start: 4px solid highlight;
  }

  #threadpane-splitter:not([orient="vertical"]) {
    border-inline-end: 1px solid #a9b7c9;
    /* make only the splitter border visible */
    margin-inline-start: -4px;
  }

  #threadpane-splitter[state="collapsed"]:not([orient="vertical"]):hover {
    border-inline-end: 4px solid highlight;
  }

  #mailContent[layout="wide"] #folderpane_splitter {
    margin-bottom: 0;
  }

  #threadpane-splitter,
  #attachment-splitter {
    border: none;
    border-bottom: 1px solid #A9B7C9;
    min-height: 0;
    height: 5px;
    background-color: transparent;
    margin-top: -5px;
    position: relative;
    z-index: 10;
    transition: border-width .3s ease-in;
  }

  #attachment-splitter:not([state="collapsed"]) {
    border-bottom: 1px solid transparent;
  }

  #attachment-splitter,
  #threadpane-splitter[state="collapsed"] {
    transition: border-color .3s;
  }

  #threadpane-splitter[state="collapsed"]:hover,
  #attachment-splitter[state="collapsed"]:hover {
    border-bottom: 4px solid highlight;
  }

  #accountCentralBox,
  #threadTree {
    -moz-border-end: none;
  }

  #messagepanebox {
    border-top-width: 0px;
    -moz-border-start: none;
  }

  .folderview-cycler {
    padding-inline-start: 5px;
    padding-inline-end: 5px;
  }

  .treecol-image image {
    -moz-padding-start: 1px;
    -moz-padding-end: 2px;
  }

  .junkStatusHeader {
    -moz-padding-end: 2px;
  }

  treechildren::-moz-tree-image(unreadButtonColHeader) {
    -moz-padding-start: 0px;
    -moz-margin-start: -3px;
  }

  treechildren::-moz-tree-image(attachmentCol, attach) {
    -moz-margin-start: 0px;
  }

  .tabmail-tab[type="message"] {
    list-style-image: url("chrome://messenger/skin/icons/server.png");
    -moz-image-region: rect(0 16px 16px 0);
  }

  #viewPickerPopup menu,
  #viewPickerPopup menuitem {
    -moz-appearance: none;
  }

  #folderLocationPopup menu,
  #folderLocationPopup menuitem {
    -moz-padding-start: 2px;
  }

  @media (-moz-windows-default-theme) {
    menulist {
      -moz-appearance: none;
      min-height: 24px;
      color: inherit;
      margin: 1px 4px;
      padding: 0 5px 1px !important;
      border: 1px solid;
      background: var(--toolbarbutton-hover-background);
      border-color: var(--toolbarbutton-hover-bordercolor);
      box-shadow: var(--toolbarbutton-hover-boxshadow);
      transition-property: background-color, border-color, box-shadow;
      transition-duration: 150ms;
    }

    menulist:not([disabled="true"]):not([open="true"]):hover {
      background: var(--toolbarbutton-active-background);
      border-color: var(--toolbarbutton-active-bordercolor);
    }

    menulist[open="true"] {
      background: var(--toolbarbutton-active-background);
      border-color: var(--toolbarbutton-active-bordercolor);
      box-shadow: var(--toolbarbutton-active-boxshadow);
    }

    menulist[disabled="true"] {
      opacity: .6;
    }

    #folderPaneHeader {
      -moz-appearance: none;
      background-color: #f8f8f8;
      border-top: 0px;
      border-bottom: 1px solid #a9b1b8;
    }

    #folderTree {
      -moz-appearance: none;
      background-color: -moz-Dialog;
      border-bottom: none;
      border-left: none;
    }

    @media (-moz-os-version: windows-vista),
           (-moz-os-version: windows-win7) {
      #folderTree {
        background-color: #eef3fa;
      }
    }

    @media (-moz-os-version: windows-win10) {
      #folderTree {
        background-color: #fafafa;
      }
    }

    #folderTree treechildren::-moz-tree-cell(dropOn) {
      background-image: linear-gradient(rgba(255, 255, 255, .7),
                                        rgba(255, 255, 255, .45));
      background-color: Highlight;
      border-radius: 3px;
    }

    #folderTree treechildren::-moz-tree-cell-text(dropOn) {
      color: -moz-FieldText;
    }

    treechildren::-moz-tree-line(selected, focus),
    tree[seltype="cell"] > treechildren::-moz-tree-line(active, selected, focus) {
      border-color: -moz-DialogText;
    }

    #viewPicker > .menulist-label-box > .menulist-label,
    #locationFolders > .menulist-label-box > .menulist-label {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }
  }

  #viewPicker > .menulist-label-box > .menulist-icon,
  #locationFolders > .menulist-label-box > .menulist-icon {
    min-height: 16px;
  }
}

@media (-moz-windows-default-theme) and (-moz-os-version: windows-vista),
       (-moz-windows-default-theme) and (-moz-os-version: windows-win7) {
  menulist {
    border-radius: 2px;
  }

  menulist[open="true"] {
    text-shadow: none;
    transition: none;
  }

  #status-bar {
    background-color: hsl(210, 75%, 92%);
  }
}

/* Render a window top border for lwthemes on WinXP modern themes: */
@media (-moz-windows-theme: luna-blue) {
  #messengerWindow[tabsintitlebar][sizemode="normal"]
  #titlebar-content:-moz-lwtheme {
    background-image: linear-gradient(to bottom, rgb(8, 49, 216) 0,
                                      rgb(8, 49, 216) 1px, rgb(15, 77, 227) 1px,
                                      rgb(15, 77, 227) 2px, rgb(22, 106, 238) 2px,
                                      rgb(22, 106, 238) 3px, rgb(8, 85, 221) 3px,
                                      rgb(8, 85, 221) 4px, transparent 4px);
  }

  #messengerWindow[tabsintitlebar][sizemode="normal"]
  #titlebar-content:-moz-lwtheme:-moz-window-inactive {
    background-image: linear-gradient(to bottom, rgb(91, 104, 205) 0,
                                      rgb(91, 104, 205) 1px, rgb(116, 128, 220) 1px,
                                      rgb(116, 128, 220) 2px, rgb(117, 140, 221) 2px,
                                      rgb(117, 140, 221) 4px, transparent 4px);
  }
}

@media (-moz-windows-theme: luna-silver) {
  #messengerWindow[tabsintitlebar][sizemode="normal"]
  #titlebar-content:-moz-lwtheme {
    background-image: linear-gradient(to bottom, rgb(102,102,126) 0,
                                      rgb(102, 102, 126) 1px, rgb(168, 167, 191) 1px,
                                      rgb(168, 167, 191) 2px, white 2px, white 3px,
                                      rgb(188, 188, 207) 3px, rgb(188, 188, 207) 4px,
                                      transparent 4px);
  }

  #messengerWindow[tabsintitlebar][sizemode="normal"]
  #titlebar-content:-moz-lwtheme:-moz-window-inactive {
    background-image: linear-gradient(to bottom, rgb(186, 186, 197) 0,
                                      rgb(186, 186, 197) 1px, rgb(236, 238, 245) 1px,
                                      rgb(236, 238, 245) 2px, white 2px, white 3px,
                                      rgb(215, 215, 227) 3px, rgb(215, 215, 227) 4px,
                                      transparent 4px);
  }
}

@media (-moz-windows-theme: luna-olive) {
  #messengerWindow[tabsintitlebar][sizemode="normal"]
  #titlebar-content:-moz-lwtheme {
    background-image: linear-gradient(to bottom, rgb(139, 161, 105) 0,
                                      rgb(139, 161, 105) 1px, rgb(171, 189, 133) 1px,
                                      rgb(171, 189, 133) 2px, rgb(164, 178, 127) 2px,
                                      rgb(164, 178, 127) 3px, transparent 3px);
  }

  #messengerWindow[tabsintitlebar][sizemode="normal"]
  #titlebar-content:-moz-lwtheme:-moz-window-inactive {
    background-image: linear-gradient(to bottom, rgb(207, 214, 188) 0,
                                      rgb(207, 214, 188) 1px, rgb(224, 226, 200) 1px,
                                      rgb(224, 226, 200) 2px, rgb(214, 216, 190) 2px,
                                      rgb(214, 216, 190) 3px, transparent 3px);
  }
}

@media (-moz-windows-default-theme) and (-moz-os-version: windows-vista),
       (-moz-windows-default-theme) and (-moz-os-version: windows-win7),
       (-moz-windows-default-theme) and (-moz-os-version: windows-win8) {
  @media (-moz-windows-compositor) {
    #messengerWindow[sizemode=normal] #tabpanelcontainer {
      border: 1px solid rgba(10%, 10%, 10%, .4);
      border-top: none;
      background-clip: padding-box;
    }

    #messengerWindow[sizemode=normal] #mail-toolbar-menubar2 {
      border-right: 1px solid rgba(10%, 10%, 10%, .4);
      border-left: 1px solid rgba(10%, 10%, 10%, .4);
      background-clip: padding-box;
    }

    #messengerWindow[sizemode=normal] statusbar {
      -moz-appearance: none;
      margin-top: -1px;
      border: 1px solid rgba(10%, 10%, 10%, .4);
      border-top-color: threedshadow;
      border-radius: 1px 1px 0 0;
      background-clip: padding-box;
    }
  }
}

@media (-moz-windows-glass) {
  /* lesser transparency on Glass background */
  #tabbar-toolbar menulist:not(:-moz-lwtheme):not([open="true"]) {
    background-color: rgba(227, 237, 246, .7);
  }

  /* lesser transparency on Glass background */
  #tabbar-toolbar menulist:not(:-moz-lwtheme):not([open="true"]):hover {
    background-color: rgba(136, 197, 213, .85);
  }

  #tabbar-toolbar #viewPickerLabel:not(:-moz-lwtheme):not(:-moz-window-inactive) {
    -moz-margin-start: 4px;
    -moz-margin-end: 0;
    -moz-padding-start: 2px;
    -moz-padding-end: 5px;
    background-color: rgba(255, 255, 255, .3);
    border-radius: 4px;
  }
}

#viewPicker > .menulist-label-box > .menulist-icon,
#locationFolders > .menulist-label-box > .menulist-icon {
  min-height: 16px;
}

#viewPickerPopup > menuitem[type="radio"] {
  -moz-appearance: none;
}

#viewPickerPopup > menu > .menu-text {
  -moz-appearance: none;
  -moz-margin-start: 0 !important;
  -moz-padding-start: 0 !important;
}

#viewPickerTagsPopup > menuitem > .menu-iconic-text,
#viewPickerCustomViewsPopup > menuitem > .menu-iconic-text {
  padding: 1px 3px;
}

@media not all and (-moz-windows-compositor) {
  #mail-toolbar-menubar2[autohide="false"] +
  #tabs-toolbar > .titlebar-placeholder {
    display: none;
  }

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

      #messengerWindow[sizemode="normal"] > #titlebar > #titlebar-content {
        border-top-width: 2px;
        -moz-border-top-colors: #4D4D4D #E9ECF3;
      }

      #messengerWindow[sizemode="normal"] #titlebar-buttonbox {
        margin-top: -2px;
      }
    }
  }
}
