/*
 * ==========================================
 * 
 * Side notes. These are the oXygen review processing instructions
 * converted to elements. They are floating to one
 * side of the page.
 *
 * For the WebHelp HTML output, the review elements are converted 
 * to 'div' and 'span's having with a class name matching the name 
 * of the element. 
 * 
 * ==========================================
 */
 @media screen {

  oxy-attributes,
  oxy-comment,
  oxy-delete,
  oxy-insert,
  .oxy-attributes,
  .oxy-comment,
  .oxy-delete,
  .oxy-insert {
    margin: 0.5em;
    width: 20%;
    min-width: 7em;
  }

  table oxy-attributes,
  table oxy-comment,
  table oxy-delete,
  table oxy-insert,
  table .oxy-attributes,
  table .oxy-comment,
  table .oxy-delete,
  table .oxy-insert {
    margin: 0.5em;
    width: 50%;
  }

}

@media print, screen {

/*
 * Main callouts properties.
 */
  oxy-attributes,
  oxy-comment,
  oxy-delete,
  oxy-insert,
  .oxy-attributes,
  .oxy-comment,
  .oxy-delete,
  .oxy-insert {
    font-size: small;
    /* Do not take text styles from the context. */
    font-weight: normal !important;
    text-decoration: none !important;

    font-family: arial, helvetica, sans-serif;

    position: relative;
    float: right;
    clear: right;

    padding: 0.5em 1em 0.5em 1em;

    min-height: 1em;
    page-break-inside: avoid;

    border-radius: 10px;

    link: attr(href);
    -ah-link: attr(href);
    -oxy-link: attr(href);
  }

  /*
   * Style the comment replies.
   */
  oxy-attributes oxy-comment,
  oxy-comment oxy-comment,
  oxy-delete oxy-comment,
  oxy-insert oxy-comment,
  .oxy-attributes .oxy-comment,
  .oxy-comment .oxy-comment,
  .oxy-delete .oxy-comment,
  .oxy-insert .oxy-comment {
    border-left: 2pt solid;
    padding-left: 0.5em;
    padding-right: 0;

    margin: 2pt 0 2pt 10%;
    width: 90%;
    border-radius: 0;
  }

  /* 
   * Hide the links from the replies.
   */
  oxy-attributes oxy-comment:before,
  oxy-comment oxy-comment:before,
  oxy-delete oxy-comment:before,
  oxy-insert oxy-comment:before,
  .oxy-attributes .oxy-comment:before,
  .oxy-comment .oxy-comment:before,
  .oxy-delete .oxy-comment:before,
  .oxy-insert .oxy-comment:before {
    display: none;
  }

  /*
   * Hide some meta information.
   */
  oxy-comment-id,
  oxy-comment-parent-id,
  oxy-mid,
  oxy-hour,
  oxy-tz,
  .oxy-comment-id,
  .oxy-comment-parent-id,
  .oxy-mid,
  .oxy-hour,
  .oxy-tz {
    display: none;
  }

  /* The ID of the change, like the number of a footnote. */
  oxy-attributes[hr_id]:before,
  oxy-comment[hr_id]:before,
  oxy-delete[hr_id]:before,
  oxy-insert[hr_id]:before {
    content: '[' attr(hr_id) '] ';
    display: none !important ;
  }

  .oxy-attributes[hr_id]:before,
  .oxy-comment[hr_id]:before,
  .oxy-delete[hr_id]:before,
  .oxy-insert[hr_id]:before {
    /* For HTML, the hr_id is missing, the link is created as an "A" element. */
    content: none !important;
  }

  /* Author */
  oxy-author,
  .oxy-author {
    font-weight: bold;
    display: none !important;
  }

  /* Comment */
  oxy-comment-text,
  .oxy-comment-text {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }

  /* Content of the change */
  oxy-content,
  .oxy-content {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }

  oxy-delete > oxy-content,
  .oxy-delete > .oxy-content {
    text-decoration: line-through;
  }
  oxy-insert > oxy-content,
  .oxy-insert > .oxy-content {
    font-style: italic;
  }
  oxy-insert > oxy-content:before,
  .oxy-insert > .oxy-content:before {
    content: "<<";
  }
  oxy-insert > oxy-content:after,
  .oxy-insert > .oxy-content:after {
    content: ">>";
  }

  /* Date */
  oxy-date,
  .oxy-date {
    display: none;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    text-align: right;
    font-size: 0.8em;
  }

  /* Old and cuattribute value */
  oxy-old-value,
  .oxy-old-value {
    display: block;
    text-decoration: line-through;
  }

  oxy-old-value:before,
  .oxy-old-value:before,
  oxy-current-value:before,
  .oxy-current-value:before {
    display: block;
    font-weight: bold;
    text-decoration: none;
  }

  oxy-current-value[unknown = 'true']:before,
  .oxy-current-value[unknown = 'true']:before {
    content: "<< Cannot determine the current value >>";
    color: red;
  }

  oxy-current-value,
  .oxy-current-value
  {
    display: block;
  }

  oxy-attribute-change:before,
  .oxy-attribute-change:before {
    display: none !important;

  }

  oxy-range-start,
  .oxy-range-start,
  oxy-range-end,
  .oxy-range-end {
    display: none !important;

  }

  /*
   * This is the link to the floated comment.
   * This remains in the main content flow.
   */
  oxy-range-start:before,
  .oxy-range-start:before {
    display: none !important;
  }

  /*
   * This marks the end of the range. 
   */
  oxy-range-end:before,
  .oxy-range-end:before {
    display: none !important;
  }

}

@media print {

  oxy-attributes,
  oxy-comment,
  oxy-delete,
  oxy-insert,
  .oxy-attributes,
  .oxy-comment,
  .oxy-delete,
  .oxy-insert {
    font-size: 0.8rem;
    margin: 0.5em -0.7in 0.5em 0.5em;
    /* This should be correlated with the page margin from the p-page-size.css */
    width: 1.5in;
  }

}

/*
 * 
 * Colors
 * 
 */
oxy-attributes,
oxy-comment,
oxy-delete,
oxy-insert,
.oxy-attributes,
.oxy-comment,
.oxy-delete,
.oxy-insert {
  white-space: initial;
  background-color: #FFFFAA;
  color: black;
}

/*
 * The highlight part.
 * This is also built-in Chemistry processor,
 * but if one uses other processors is good to have it here also.
 */
oxy-insert-hl,
.oxy-insert-hl {
  display: inline;
  background-color: #cef7d7;
  color: black;
  text-decoration: underline;
}
oxy-delete-hl,
.oxy-delete-hl {
  display: none !important;
}
oxy-comment-hl,
.oxy-comment-hl {
  display: inline;
  background-color: yellow;
}
oxy-color-hl[color],
.oxy-color-hl[color] {
  display: inline;
  background-color: attr(color, color);
}

/*
 * The marked as done changes should be grayed out.
 */
oxy-attributes[flag ~= "done"],
oxy-comment[flag ~= "done"],
oxy-delete[flag ~= "done"],
oxy-insert[flag ~= "done"],
.oxy-attributes[flag ~= "done"],
.oxy-comment[flag ~= "done"],
.oxy-delete[flag ~= "done"],
.oxy-insert[flag ~= "done"] {
  color: gray;
}
oxy-attributes,
.oxy-attributes {
  border-color: black;
}
oxy-comment,
.oxy-comment {
  border-color: transparent;
}
oxy-delete,
.oxy-delete {
  border-color: rgb(255, 0, 157);
}
oxy-insert,
.oxy-insert {
  border-color: red;
}
oxy-range-start,
.oxy-range-start,
oxy-range-end,
.oxy-range-end {
  background-color: yellow;
}
oxy-attributes oxy-comment,
oxy-comment oxy-comment,
oxy-delete oxy-comment,
oxy-insert oxy-comment,
.oxy-attributes .oxy-comment,
.oxy-comment .oxy-comment,
.oxy-delete .oxy-comment,
.oxy-insert .oxy-comment {
  border-left-color: orange;
}

/* 
  Because Chemistry does not support the float:right, we use footnotes instead.
  Starting with Chemistry 21 the oxy-attributes, oxy-comment, oxy-delete and oxy-insert are 
  moved from footnotes to PDF annotations. To keep them as footnotes, use 
  the -no-pdf-annotaotions-for-change-tracking-and-comments Chemistry command line parameter.   
*/
@media oxygen-chemistry {

  oxy-attributes,
  oxy-comment,
  oxy-delete,
  oxy-insert,
  .oxy-attributes,
  .oxy-comment,
  .oxy-delete,
  .oxy-insert {
    margin: 0.5em;
    position: static;
    float: footnote;
  }

  /* 
   * Footnotes in footnotes are not allowed in the FO and they are not OK to represent the replies.
   * So leave the replies as normal blocks, inside the parent change.
   */
  oxy-attributes oxy-comment,
  oxy-comment oxy-comment,
  oxy-delete oxy-comment,
  oxy-insert oxy-comment,
  .oxy-attributes .oxy-comment,
  .oxy-comment .oxy-comment,
  .oxy-delete .oxy-comment,
  .oxy-insert .oxy-comment {
    float: none;
  }

  oxy-attributes[hr_id]:before,
  oxy-comment[hr_id]:before,
  oxy-delete[hr_id]:before,
  oxy-insert[hr_id]:before {
    content: none;
  }

  .oxy-attributes[hr_id]:before,
  .oxy-comment[hr_id]:before,
  .oxy-delete[hr_id]:before,
  .oxy-insert[hr_id]:before {
    content: none;
  }

  /* Do not leave the range id in the content, it creates confusion with the footnotes numbers. */
  oxy-range-start,
  .oxy-range-start,
  oxy-range-end,
  .oxy-range-end {
    background-color: inherit;
    color: maroon;
  }
  oxy-range-start:before,
  .oxy-range-start:before {
    content: '{';
    font-weight: bold;
  }
  oxy-range-end:before,
  .oxy-range-end:before {
    content: '}';
    font-weight: bold;
  }

  oxy-range-start[is-changebar]:before(100),
  .oxy-range-start[is-changebar]:before(100) {
    content: "";
    display: -oxy-changebar-start;
    -oxy-changebar-color: gray;
    -oxy-changebar-width: 1.5pt;
  }
  oxy-range-end[is-changebar]:before(100),
  .oxy-range-end[is-changebar]:before(100) {
    content: "";
    display: -oxy-changebar-end;
  }

  /* Remove the link from the HTML output, we already have a link from the footnote marker to the call. */
  .oxy-attributes > a,
  .oxy-comment > a,
  .oxy-delete > a,
  .oxy-insert > a {
    display: none;
  }

  oxy-attributes,
  oxy-attributes:footnote-call,
  oxy-attributes:footnote-marker,
  .oxy-attributes,
  .oxy-attributes:footnote-call,
  .oxy-attributes:footnote-marker {
    background-color: cyan;
  }
  oxy-comment,
  oxy-comment:footnote-call,
  oxy-comment:footnote-marker,
  .oxy-comment,
  .oxy-comment:footnote-call,
  .oxy-comment:footnote-marker {
    background-color: #FFFFAA;
  }
  oxy-delete,
  oxy-delete:footnote-call,
  oxy-delete:footnote-marker,
  .oxy-delete,
  .oxy-delete:footnote-call,
  .oxy-delete:footnote-marker {
    background-color: #FFAAAA;
  }
  oxy-insert,
  oxy-insert:footnote-call,
  oxy-insert:footnote-marker,
  .oxy-insert,
  .oxy-insert:footnote-call,
  .oxy-insert:footnote-marker {
    background-color: #DDDDFF;
  }

}