/* 
 * UiO CSS: Admonitions (note, hint, warning etc.)
 * 
 * This is for important feedback from action scenarios, and is most often put
 * at the start of the #uio-app-content or after a main menu.
 *
 * Possible admonitions and when to use them:
 *
 *  - error     For critical errors?
 *  - warning   When...
 *  - note
 *  - caution
 *  - important
 *  - tip
 *  - hint
 *  - attention
 *  - danger
 *
 * Examples on how the html should look like:
 *
 *  <div class="warning">
 *      <p class="admonition-title">Warning title</p>
 *      A short warning text.
 *  </div>
 *
 *  <div class="error">
 *      <p class="admonition-title">A critical error</p>
 *      <pre>
 *          Error message, code and traceroute, if that should be shown.
 *      </pre>
 *  </div>
 *
 *  <div class="tip">
 *      <p class="admonition-title">A smart tip in several points</p>
 *      <ul>
 *         <li>One</li>
 *         <li>Two</li>
 *         <li>Three</li>
 *      </ul>
 *  </div>
 *
 * Admonitions without 'admonition-title' is also ok. E.g:
 *
 *  <div class="danger">
 *      <p>Stop.</p>
 *  </div>
 *
 * To get smaller admonitions:
 *
 *  <div class="note admonition-small">
 *      ...
 *  </div>
 *
 */

/* Margin, padding m.m. */
body#vrtx-structured-article div.admonition,
body#vrtx-structured-article div.attention,
body#vrtx-structured-article div.error,
body#vrtx-structured-article div.hint,
body#vrtx-structured-article div.important, 
body#vrtx-structured-article div.note,
body#vrtx-structured-article div.tip,
body#vrtx-structured-article div.warning,
body#vrtx-structured-article div.caution,
body#vrtx-structured-article div.danger {
  background-color: #f8f8f8 !important;
  color: #000;
  margin: 15px 0;
  padding: 15px 25px 10px 66px;
  display: block;
  min-height: 25px;
  border: 1px solid #d5d5d5;
  border-radius: 10px; /* CSS 3 */
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

body#vrtx-structured-article div.admonition > div,
body#vrtx-structured-article div.attention > div,
body#vrtx-structured-article div.error > div, 
body#vrtx-structured-article div.hint > div,
body#vrtx-structured-article div.important > div,
body#vrtx-structured-article div.note > div,
body#vrtx-structured-article div.tip > div,
body#vrtx-structured-article div.warning > div,
body#vrtx-structured-article div.caution > div,
body#vrtx-structured-article div.danger > div {
    /* tweak to middle align the feedback message if on only one line */
    display: table-cell;
    vertical-align: middle;
    height: 37px;
    width: 100%;
}
/* ^ Margin, padding m.m. */

/* Tittel */
body#vrtx-structured-article p.admonition-title {
    font-weight: bold;
    font-size: 1.23em;
}
/* body#vrtx-structured-article div.danger p.admonition-title { text-align: center; } */
/* ^ Tittel */

/* Ymse ting */

body#vrtx-structured-article div.admonition ul,
body#vrtx-structured-article div.attention ul,
body#vrtx-structured-article div.error ul,
body#vrtx-structured-article div.hint ul,
body#vrtx-structured-article div.important ul,
body#vrtx-structured-article div.note ul,
body#vrtx-structured-article div.tip ul,
body#vrtx-structured-article div.warning ul,
body#vrtx-structured-article div.caution ul,
body#vrtx-structured-article div.danger ul {
    font-size: inherit;
}

body#vrtx-structured-article div.admonition pre.literal-block,
body#vrtx-structured-article div.attention pre.literal-block,
body#vrtx-structured-article div.error pre.literal-block,
body#vrtx-structured-article div.hint pre.literal-block,
body#vrtx-structured-article div.important pre.literal-block,
body#vrtx-structured-article div.note pre.literal-block,
body#vrtx-structured-article div.tip pre.literal-block,
body#vrtx-structured-article div.warning pre.literal-block,
body#vrtx-structured-article div.caution pre.literal-block,
body#vrtx-structured-article div.danger pre.literal-block {
    font-size: inherit;
    border: 1px solid #000;
}

body#vrtx-structured-article div.admonition tt.literal,
body#vrtx-structured-article div.attention tt.literal,
body#vrtx-structured-article div.error tt.literal,
body#vrtx-structured-article div.hint tt.literal,
body#vrtx-structured-article div.important tt.literal,
body#vrtx-structured-article div.note tt.literal,
body#vrtx-structured-article div.tip tt.literal,
body#vrtx-structured-article div.warning tt.literal,
body#vrtx-structured-article div.caution tt.literal,
body#vrtx-structured-article div.danger tt.literal {
    color: inherit;
}

body#vrtx-structured-article .admonition-small {
  padding: 5px 25px 10px 50px !important;
  background-position: 12px 12px !important;
  min-height: 37px !important;
}

body#vrtx-structured-article .admonition-small p.admonition-title {
  font-size: 1em;
  margin-bottom: -3px;
}

body#vrtx-structured-article .admonition-small p.last {
  margin-bottom: 0px;
}

/* ^ Ymse ting */

/* Grafikk */
body#vrtx-structured-article div.admonition { padding-left: 19px; }

body#vrtx-structured-article div.error { background-image: url("/vrtx/decorating/resources/dist/images/admonitions/error.png"); }
body#vrtx-structured-article div.warning { background-image: url("/vrtx/decorating/resources/dist/images/admonitions/warning-new.png"); }
body#vrtx-structured-article div.note { background-image: url("/vrtx/decorating/resources/dist/images/admonitions/note-new.png"); }
body#vrtx-structured-article div.caution { background-image: url("/vrtx/decorating/resources/dist/images/admonitions/caution.png"); }
body#vrtx-structured-article div.important { background-image: url("/vrtx/decorating/resources/dist/images/admonitions/important.png"); }
body#vrtx-structured-article div.tip { background-image: url("/vrtx/decorating/resources/dist/images/admonitions/tip.png"); }
body#vrtx-structured-article div.hint { background-image: url("/vrtx/decorating/resources/dist/images/admonitions/hint.png"); }
body#vrtx-structured-article div.attention { background-image: url("/vrtx/decorating/resources/dist/images/admonitions/attention.png"); }
body#vrtx-structured-article div.danger { background-image: url("/vrtx/decorating/resources/dist/images/admonitions/danger.png"); }

body#vrtx-structured-article div.error,
body#vrtx-structured-article div.note,
body#vrtx-structured-article div.admonition,
body#vrtx-structured-article div.warning,
body#vrtx-structured-article div.caution,
body#vrtx-structured-article div.important,
body#vrtx-structured-article div.tip,
body#vrtx-structured-article div.hint,
body#vrtx-structured-article div.attention,
body#vrtx-structured-article div.danger {
    background-position: 19px 12px ;
    background-repeat: no-repeat;
}
/* ^ Grafikk */

/* ^ UiO CSS: Admonitions (note, hint, warning etc.) */