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

/* ===== messageHeader.css ==============================================
  == Styles for the header toolbars of a mail message.
  ======================================================================= */

@import url("chrome://messenger/skin/shared/messageHeader.css");

/* ::::: for the entire area ::::: */
.main-header-area {
  color: #2E3436; /* Aluminium 6 */
  border-bottom:1px solid #BFBFBF;
  padding: 0.6ex;
}

#displayDeck:not([collapsed="true"]) + #threadpane-splitter + #messagepanebox .main-header-area {
  background: linear-gradient(#E4E4E4, #FFFFFF 5px);
}

/* ::::: msg header toolbars ::::: */
#expandedHeaderView[show_header_mode="all"] {
  overflow-x: hidden;
  overflow-y: visible;
  max-height: 14em;
}

.inline-toolbox {
  -moz-padding-end: 6px;
}

.inline-toolbar {
  -moz-appearance: none;
}

#expandedBoxSpacer {
  display: block;
  height: 5px;
}

#otherActionsButton {
  margin-bottom: 0.1em;
  background: none;
  font-weight: normal;
  color: #41413F; /* higher contrast */
  border: 1px solid transparent;
  font-size: 100%;
  padding-top: 0px;
  box-shadow: none;
}

#otherActionsButton:hover {
  color: black;
  border: 1px solid rgb(145, 145, 145);
  background-color: rgb(210, 210, 210);
  box-shadow: 0 4px 3px 0 rgb(255, 255, 255) inset;
}

.msgHeaderView-flat-button[type="menu"] > .button-box > .button-menu-dropmarker,
.msgHeaderView-flat-button[type="menu-button"] > .button-menubutton-dropmarker {
  -moz-appearance: none !important;
}

.msgHeaderView-flat-button[type="menu"] > .button-box > .button-menu-dropmarker > .dropmarker-icon,
.msgHeaderView-flat-button[type="menu-button"] > .button-menubutton-dropmarker > .dropmarker-icon {
  list-style-image: url("chrome://messenger/skin/icons/arrow-dn-grey.png");
}

.msgHeaderView-flat-button[type="menu"]:hover > .button-box > .button-menu-dropmarker > .dropmarker-icon,
.msgHeaderView-flat-button[type="menu-button"]:hover > .button-menubutton-dropmarker > .dropmarker-icon {
  list-style-image: url("chrome://messenger/skin/icons/arrow-dn-black.png");
}

/* ::::: attachment view ::::: */

#attachmentList {
  margin: 0px;
  background-color: -moz-Field;
  color: -moz-FieldText;
}

#attachmentToggle {
  -moz-appearance: treetwisty;
  -moz-user-focus: normal;
}

#attachmentToggle[checked="true"] {
  -moz-appearance: treetwistyopen;
}

#attachmentToggle:focus {
  outline: 1px dotted Highlight;
}

#attachmentIcon {
  list-style-image: url("chrome://messenger/skin/icons/attachment.png");
  -moz-margin-start: 5px;
}

#attachmentName:hover,
#attachmentName[selected="true"] {
  cursor: pointer;
  background: linear-gradient(#F9CE90, #F6A942); /* orange gradient */
}

#attachmentSize {
  margin: 0;
  -moz-margin-start: 8px;
  color: #888a85; /* the same color as .headerName */
}

#attachmentSaveAllSingle,
#attachmentSaveAllMultiple {
  list-style-image: url("chrome://messenger/skin/icons/download.png");
  -moz-image-region: rect(0px 18px 18px 0px);
}

#attachmentSaveAllSingle:not([disabled="true"]):active,
#attachmentSaveAllMultiple:not([disabled="true"]):active {
  list-style-image: url("chrome://messenger/skin/icons/download.png");
  -moz-image-region: rect(18px 18px 36px 0px);
}

#attachmentSaveAllSingle > .toolbarbutton-menubutton-button,
#attachmentSaveAllMultiple > .toolbarbutton-menubutton-button {
  /* Make sure that the icon is vertically centered */
  padding-bottom: 0px !important;
}

#attachmentView {
  border-top: 1px solid ThreeDShadow;
}

#attachment-splitter {
  min-height: 7px;
  border-top: 1px solid #C8C8C8;
  background-color: #E6E6E6;
}

/* ::::: attachment list ::::: */

.attachmentcell-icon {
  padding: 1px;
}

.attachmentcell-name,
.attachmentcell-size {
  padding-top: 1px;
}

.attachmentcell-size {
  color: GrayText;
}

attachmentlist:focus > attachmentitem[selected="true"][current="true"] {
  outline: 1px dotted #F3D982;
}

attachmentlist:focus > attachmentitem[current="true"] {
  outline: 1px dotted;
  outline-offset: -1px;
}

attachmentitem[selected="true"] {
  background-color: -moz-CellHighlight;
  color: -moz-CellHighlightText;
}

attachmentlist:focus > attachmentitem[selected="true"] {
  background-color: Highlight;
  color: HighlightText;
}

attachmentitem[selected="true"] .attachmentcell-size {
  color: -moz-CellHighlightText;
}

attachmentlist:focus >attachmentitem[selected="true"] .attachmentcell-size {
  color: HighlightText;
}

/* ::::: msg header captions ::::: */

#msgHeaderView {
  font-size: 100%;
  padding: 0;
  margin: 0;
}

#dateLabel {
  -moz-padding-end: 3px;
  -moz-user-select: text;
  -moz-user-focus: normal;
  cursor: text;
}

#msgHeaderViewDeck {
  margin: 0;
  padding: 0;
}

/* Override primaryToolbar.css rules to give a button appearance */

.toolbarbutton-1.msgHeaderView-button {
  -moz-appearance: none;
  max-height: 22px;
  margin: 0px;
  -moz-margin-start: 0.4em;
  vertical-align: middle;
  border: 1px solid rgba(50, 50, 50, .2);
  border-radius: 4px;
  background-color: rgba(230, 230, 230, .2);
  transition: background-color .5s, border-color .5s;
}

.toolbarbutton-1.msgHeaderView-button > .toolbarbutton-menubutton-button,
.toolbarbutton-1.msgHeaderView-button > .toolbarbutton-menubutton-dropmarker,
.toolbarbutton-1.msgHeaderView-button:hover > .toolbarbutton-menubutton-button,
.toolbarbutton-1.msgHeaderView-button:hover > .toolbarbutton-menubutton-dropmarker {
  background-color: transparent;
  background-image: none !important;
  border: none;
}

.toolbarbutton-1.msgHeaderView-button:hover,
.toolbarbutton-1.msgHeaderView-button[type="menu-button"][open] {
  background-color: rgba(230, 230, 230, .7) !important;
  border-color: rgba(50, 50, 50, .5) !important;
}

.toolbarbutton-1.msgHeaderView-button[type="menu-button"][buttondown="true"] {
  background-color: transparent !important;
  background: linear-gradient(hsla(0, 0%, 0%, .12),
              hsla(0, 0%, 0%, 0)) border-box;
}

.toolbarbutton-1.msgHeaderView-button > .toolbarbutton-icon,
.toolbarbutton-1.msgHeaderView-button > .toolbarbutton-menubutton-button >
.toolbarbutton-icon {
  margin: 0;
}

/* primaryToolbar.css makes the dropmarker padding wide; make it smaller. */
.msgHeaderView-button[type="menu-button"] > .toolbarbutton-menubutton-dropmarker {
  -moz-padding-start: 2px;
  -moz-padding-end: 2px;
}

/* Separator between menu and split type buttons */
.toolbarbutton-1.msgHeaderView-button >
.toolbarbutton-menubutton-dropmarker::before {
  content: "";
  display: -moz-box;
  width: 1px;
  height: 18px;
  -moz-margin-start: -4px !important;
  -moz-margin-end: 3px !important;
  margin-bottom: 1px !important;
  background: hsla(0, 0%, 0%, .3) padding-box;
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .2);
}

.msgHeaderView-flat-button {
  min-width: 1px;
  -moz-appearance: none;
  font-size: 90%;
  color: black;
  margin-top: 1px;
  margin-bottom: 2px;
  -moz-margin-start: 0px;
  -moz-margin-end: 5px;
  padding: 0 3px;
  background-color: rgb(211,215,207);
  border: 2px solid #C0C3C6;
  border-radius: 4px;
  -moz-border-top-colors: none;
  -moz-border-right-colors: none;
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  min-height: 1ex;
}

.msgHeaderView-flat-button[type="menu-button"] > .button-menubutton-button {
  -moz-appearance: none;
  background-color: rgb(211,215,207);
  border-radius: 0px;
  border: 0;
  border-right: 2px solid transparent;
  -moz-padding-end: 0.2em;
  margin: 0;
  -moz-border-top-colors: none;
  -moz-border-right-colors: none;
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
}

.msgHeaderView-flat-button[type="menu-button"]:hover > .button-menubutton-button {
  background-color: rgb(230,231,227);
}

.msgHeaderView-flat-button[type="menu-button"] > .button-menubutton-button:hover {
  border-right: 2px solid #B0B3B6;
} 

.msgHeaderView-flat-button[secondary="true"] {
  background: none;
}

toolbar[mode="text"] .msgHeaderView-button .toolbarbutton-text {
  -moz-margin-start: 2px;
  -moz-margin-end: 2px;
}

.hdrReplyToSenderButton,
.hdrDummyReplyButton,
.hdrReplyButton {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(0px 72px 18px 54px);
}

.hdrReplyListButton,
.hdrFollowupButton {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(0px 126px 18px 108px);
}

.hdrReplyAllButton {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(0px 90px 18px 72px);
}

.hdrForwardButton {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(0px 108px 18px 90px);
}

.hdrArchiveButton {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(0px 360px 18px 342px);
}

.hdrJunkButton {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(0px 162px 18px 144px);
}

.hdrTrashButton {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(0px 144px 18px 126px);
}

.hdrTagButton {
  list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
  -moz-image-region: rect(0px 288px 18px 270px);
}

@media (min-resolution: 2dppx) {
  .hdrReplyToSenderButton,
  .hdrDummyReplyButton,
  .hdrReplyButton {
    list-style-image: url("chrome://messenger/skin/icons/mail-toolbar@2x.png");
    -moz-image-region: rect(0px 144px 36px 108px);
  }
  
  .hdrReplyListButton,
  .hdrFollowupButton {
    list-style-image: url("chrome://messenger/skin/icons/mail-toolbar@2x.png");
    -moz-image-region: rect(0px 252px 36px 216px);
  }

  .hdrReplyAllButton {
    list-style-image: url("chrome://messenger/skin/icons/mail-toolbar@2x.png");
    -moz-image-region: rect(0px 180px 36px 144px);
  }

  .hdrForwardButton {
    list-style-image: url("chrome://messenger/skin/icons/mail-toolbar@2x.png");
    -moz-image-region: rect(0px 216px 36px 180px);
  }

  .hdrArchiveButton {
    list-style-image: url("chrome://messenger/skin/icons/mail-toolbar@2x.png");
    -moz-image-region: rect(0px 720px 36px 684px);
  }

  .hdrJunkButton {
    list-style-image: url("chrome://messenger/skin/icons/mail-toolbar@2x.png");
    -moz-image-region: rect(0px 324px 36px 288px);
  }

  .hdrTrashButton {
    list-style-image: url("chrome://messenger/skin/icons/mail-toolbar@2x.png");
    -moz-image-region: rect(0px 288px 36px 252px);
  }

  .hdrTagButton {
    list-style-image: url("chrome://messenger/skin/icons/mail-toolbar@2x.png");
    -moz-image-region: rect(0px 576px 36px 540px);
  }

  #attachmentSaveAllSingle,
  #attachmentSaveAllMultiple {
    list-style-image: url("chrome://messenger/skin/icons/mail-toolbar@2x.png");
    -moz-image-region: rect(0px 432px 36px 396px);
  }

  #attachmentSaveAllSingle:not([disabled="true"]):active,
  #attachmentSaveAllMultiple:not([disabled="true"]):active {
    list-style-image: url("chrome://messenger/skin/icons/mail-toolbar@2x.png");
    -moz-image-region: rect(36px 432px 72px 396px);
  }
}

.inline-toolbox[doCustomization] .inline-toolbar {
  min-width: 100px;
  min-height: 10px;
}

.inline-toolbar {
  -moz-box-pack: end;
  min-width: 50px !important;
  min-height: 14px !important;
}

.inline-toolbar toolbarseparator {
  height: 20px;
  margin-top: 2px;
}

.inline-toolbar toolbarspacer {
  height: 22px;
}

.msgHeaderView-flat-button:hover {
  background-color: rgb(230,231,227);
  border: 2px solid #B0B3B6;
}

#msgHeaderView textbox {
  color: inherit;
}

.headerName {
  color: #A1A1A1; /* lower contrast */
  font-weight: bold;
  text-align: right;
  background-color: transparent;
  padding: 0px;
  margin-top: 0;
  -moz-margin-end: 3px;
}

.headerValueBox {
  overflow: visible;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.headerValue {
  min-width: 50px;
  white-space: normal;
  color: black !important;
  line-height: 1.5em;

  -moz-appearance: none !important;

  padding: .1em 0px !important;
  margin: 0px !important;
  margin-bottom: 3px !important;


  /* 1px plus 2px of border-radius matches the 3px at the beginning of
    .emailDisplayButton, making email address header values and plain text
    headers line up. Not sure why this math isn't needed in other themes*/
  -moz-margin-start: 1px !important;
  border: none !important;
  background-color: transparent;
}

.headerValueUrl:hover {
  cursor: pointer;
  text-decoration: underline;
  color: -moz-activehyperlinktext !important;
}

.moreIndicator {
  font-weight: bold;
  font-size: small;
}

/* ::::: msg header message ids ::::: */

.messageIdDisplayButton {
  margin: 0;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  -moz-padding-start: 0px !important;
  -moz-padding-end: 10px !important;
  background-color: transparent !important;
  background: url("chrome://messenger/skin/icons/arrow-dn-grey.png") no-repeat center right;
}

.messageIdDisplayButton:hover {
  cursor: pointer;
  text-decoration: underline;
  color: -moz-hyperlinktext;
  background: url("chrome://messenger/skin/icons/arrow-dn-black.png") no-repeat center right;
}

/* ::::: msg header email addresses ::::: */

.emailDisplayButton {
  margin: 0;
  -moz-padding-start: 2px !important;
  -moz-padding-end: 2px !important;
  background-color: transparent;
  border-radius: 2px;
}

.emailDisplayButton:hover {
  cursor: pointer;
  background: linear-gradient(#F9CE90, #F6A942); /* orange gradient */
}

mail-emailaddress[selected="true"] .emailDisplayButton{
  /* when an email address context menu is selected,
    make sure that the email bubble stays displayed, and
    tweak the bottom to blend in more w/ the menu */
  cursor: pointer;
  border-radius: 3px;
  background: linear-gradient(#F9CE90, #F6A942); /* orange gradient */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* this is for the comma in between email addresses */
.emailSeparator {
  -moz-margin-start: -5px; /* squeeze it inside the bubble, by the star */
}

.emailDisplayButton:focus {
  border-top: 1px dotted #F6A942; /* Lightest hue from orange gradient */
  border-bottom: 1px dotted #F9CE90; /* Darkest hue from orange gradient */
  border-left: 1px dotted #F8BA67; /* Middle hue from orange gradient */
  border-right: 1px dotted #F8BA67; /* Middle hue from orange gradient */
}

.emailStar {
  max-width: 1em;
  max-height: 1em;
  -moz-appearance: none;
  -moz-box-orient: vertical;
  -moz-margin-start: -1px !important;
  padding: 0px;
  margin: 0px 2px;
  list-style-image: url("chrome://messenger/skin/starIcons.png");
  -moz-image-region: rect(0px, 16px, 16px, 0px);
}

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

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

.emailStar[hascard="true"] {
  -moz-image-region: rect(16px, 16px, 32px, 0px);
}

.emailStar:hover[hascard="true"] {
  -moz-image-region: rect(16px, 32px, 32px, 16px);
}

.emailStar:hover:active[hascard="true"] {
  -moz-image-region: rect(16px, 48px, 32px, 32px);
}

.emailPresence {
  padding: 0px;
  margin: 0px 2px;
  -moz-image-region: rect(6px, 16px, 16px, 6px);
}

@media (min-resolution: 2dppx) {
  .emailStar {
    width: 16px;
    height: 16px;
    list-style-image: url("chrome://messenger/skin/starIcons@2x.png");
    -moz-image-region: rect(0px 32px 32px 0px);
  }

  .emailStar:hover {
    -moz-image-region: rect(0px 64px 32px 32px);
  }

  .emailStar:hover:active {
    -moz-image-region: rect(0px 96px 32px 64px);
  }

  .emailStar[hascard="true"] {
    -moz-image-region: rect(32px 32px 64px 0px);
  }

  .emailStar:hover[hascard="true"] {
    -moz-image-region: rect(32px 64px 64px 32px);
  }

  .emailStar:hover:active[hascard="true"] {
    -moz-image-region: rect(32px 96px 64px 64px);
  }

  .emailPresence {
    width: 10px;
    height: 10px;
  }

  .emailPresence[chatStatus="available"] {
    list-style-image: url("chrome://messenger/skin/icons/status-small@2x.png");
    -moz-image-region: rect(0px 20px 20px 0px);
  }

  .emailPresence[chatStatus="away"] {
    list-style-image: url("chrome://messenger/skin/icons/status-small@2x.png");
    -moz-image-region: rect(0px 80px 20px 60px);
  }
}

.emailPopup {
  font-size: inherit;
  max-height: 7px; /* the height of the image */
  margin: 0.2em 2px 0px; /* 0.2em just to move it off the top of the text */
  list-style-image: url("chrome://messenger/skin/icons/arrow-dn-7.png");
}

/* ::::: view expand and collapse twisties  ::::: */

.expandHeaderViewButton {
  list-style-image:url("chrome://messenger/skin/icons/twisty-open.gif");
}

/* ::::: collapsed view styles ::::: */

window[inlinetoolbox] #newtoolbar {
  display: none;
}

#header-view-toolbox {
  float: right;
  padding-top: 3px;
}
