xeps/xmpp.css

/**
 * "Yet Another Multicolumn Layout" - YAML CSS Framework
 *
 * (en) YAML core stylesheet
 * (de) YAML Basis-Stylesheet
 *
 * Don't make any changes in this file!
 * Your changes should be placed in any css-file in your own stylesheet folder.
 *
 * @copyright       © 2005-2013, Dirk Jesse
 * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-CDL (http://www.yaml.de/license.html)
 * @link            http://www.yaml.de
 * @package         yaml
 * @version         4.1.2
 */
@media all {
  /**
   *  @section Normalisation Module
   */
  /* (en) Global reset of paddings and margins for all HTML elements */
  /* (de) Globales Zurücksetzen der Innen- und Außenabstände für alle HTML-Elemente */
  * {
    margin: 0;
    padding: 0;
  }

  /* (en) Correction: margin/padding reset caused too small select boxes. */
  /* (de) Korrektur: Das Zurücksetzen der Abstände verursacht zu kleine Selectboxen. */
  option {
    padding-left: 0.4em;
  }

  select {
    padding: 1px;
  }

  /*
  * (en) Global fix of the Italics bugs in IE 5.x and IE 6
  * (de) Globale Korrektur des Italics Bugs des IE 5.x und IE 6
  *
  * @bugfix
  * @affected   IE 5.x/Win, IE6
  * @css-for    IE 5.x/Win, IE6
  * @valid      yes
  */
  * html body * {
    overflow: visible;
  }

  /*
  * (en) Fix for rounding errors when scaling font sizes in older versions of Opera browser
  *      Standard values for colors and text alignment
  *
  * (de) Beseitigung von Rundungsfehler beim Skalieren von Schriftgrößen in älteren Opera Versionen
  *      Vorgabe der Standardfarben und Textausrichtung
  */
  body {
    font-size: 100%;
    background: #fff;
    color: #000;
    text-align: left;
  }

  /* (en) avoid visible outlines on DIV and h[x] elements in Webkit browsers */
  /* (de) Vermeidung sichtbarer Outline-Rahmen in Webkit-Browsern */
  div:target,
  h1:target,
  h2:target,
  h3:target,
  h4:target,
  h5:target,
  h6:target {
    outline: 0 none;
  }

  /* (en) HTML5 - adjusting visual formatting model to block level */
  /* (de) HTML5 - Elements werden als Blockelemente definiert */
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  main,
  nav,
  section,
  summary {
    display: block;
  }

  /* (en) HTML5 - default media element styles */
  /* (de) HTML5 - Standard Eigenschaften für Media-Elemente */
  audio,
  canvas,
  video {
    display: inline-block;
  }

  /* (en) HTML5 - don't show <audio> element if there aren't controls */
  /* (de) HTML5 - <audio> ohne Kontrollelemente sollten nicht angezeigt werden */
  audio:not([controls]) {
    display: none;
  }

  /* (en) HTML5 - add missing styling in IE & old FF for hidden attribute */
  /* (de) HTML5 - Eigenschaften für das hidden-Attribut in älteren IEs und FF nachrüsten */
  [hidden] {
    display: none;
  }

  /* (en) Prevent iOS text size adjust after orientation change, without disabling user zoom. */
  /* (de) Verdindert die automatische Textanpassung bei Orientierungswechsel, ohne Zoom zu blockieren */
  html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

  /* (en) set correct box-modell in IE8/9 plus remove padding */
  /* (de) Setze das richtige Box-Modell im IE8/9 und entferne unnötiges Padding */
  input[type="checkbox"],
  input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
  }

  /* (en) force consistant appearance of input[type="search"] elements in all browser */
  /* (de) Einheitliches Erscheinungsbild für input[type="search"] Elemente erzwingen */
  input[type="search"] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
  }

  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  /* (en) Correct overflow displayed oddly in IE 9 */
  /* (de) Korrigiert fehlerhafte overflow Voreinstellung des IE 9 */
  svg:not(:root) {
    overflow: hidden;
  }

  /* (en) Address margin not present in IE 8/9 and Safari 5 */
  /* (en) Ergänzt fehlenden Margin in IE 8/9 und Safari 5 */
  figure {
    margin: 0;
  }

  /* (en) Clear borders for <fieldset> and <img> elements */
  /* (de) Rahmen für <fieldset> und <img> Elemente löschen */
  fieldset,
  img {
    border: 0 solid;
  }

  /* (en) new standard values for lists, blockquote, cite and tables */
  /* (de) Neue Standardwerte für Listen, Zitate und Tabellen */
  ul,
  ol,
  dl {
    margin: 0 0 1em 1em;
  }

  li {
    line-height: 1.5em;
    margin-left: 0.8em;
  }

  dt {
    font-weight: bold;
  }

  dd {
    margin: 0 0 1em 0.8em;
  }

  blockquote {
    margin: 0 0 1em 0.8em;
  }

  q {
    quotes: none;
  }

  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: '';
    content: none;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  /**
  * @section Float Handling Module
  */
  /* (en) clearfix method for clearing floats */
  /* (de) Clearfix-Methode zum Clearen der Float-Umgebungen */
  .ym-clearfix:before {
    content: "";
    display: table;
  }

  .ym-clearfix:after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
  }

  /* (en) alternative solutions to contain floats */
  /* (de) Alternative Methoden zum Einschließen von Float-Umgebungen */
  .ym-contain-dt {
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  .ym-contain-oh {
    display: block;
    overflow: hidden;
    width: 100%;
  }

  .ym-contain-fl {
    float: left;
    width: 100%;
  }

  /**
  * @section Column Module
  *
  * default column config:
  * |-------------------------------|
  * | col1    | col3      | col2    |
  * | 20%     | flexible  | 20%     |
  * |-------------------------------|
  */
  .ym-column {
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  .ym-col1 {
    float: left;
    width: 20%;
  }

  .ym-col2 {
    float: right;
    width: 20%;
  }

  .ym-col3 {
    width: auto;
    margin: 0 20%;
  }

  .ym-cbox {
    padding: 0 10px;
  }

  .ym-cbox-left {
    padding: 0 10px 0 0;
  }

  .ym-cbox-right {
    padding: 0 0 0 10px;
  }

  /* (en) IE-Clearing: Only used in Internet Explorer, switched on in iehacks.css */
  /* (de) IE-Clearing: Benötigt nur der Internet Explorer und über iehacks.css zugeschaltet */
  .ym-ie-clearing {
    display: none;
  }

  /**
  * @section Grid Module
  */
  .ym-grid {
    display: table;
    table-layout: fixed;
    width: 100%;
    list-style-type: none;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .ym-gl {
    float: left;
    margin: 0;
  }

  .ym-gr {
    float: right;
    margin: 0 0 0 -5px;
  }

  .ym-g20 {
    width: 20%;
  }

  .ym-g40 {
    width: 40%;
  }

  .ym-g60 {
    width: 60%;
  }

  .ym-g80 {
    width: 80%;
  }

  .ym-g25 {
    width: 25%;
  }

  .ym-g33 {
    width: 33.333%;
  }

  .ym-g50 {
    width: 50%;
  }

  .ym-g66 {
    width: 66.666%;
  }

  .ym-g75 {
    width: 75%;
  }

  .ym-g38 {
    width: 38.2%;
  }

  .ym-g62 {
    width: 61.8%;
  }

  .ym-gbox {
    padding: 0 10px;
  }

  .ym-gbox-left {
    padding: 0 10px 0 0;
  }

  .ym-gbox-right {
    padding: 0 0 0 10px;
  }

  .ym-equalize {
    overflow: hidden;
  }

  .ym-equalize > [class*="ym-g"] {
    display: table-cell;
    float: none;
    margin: 0;
    vertical-align: top;
  }

  .ym-equalize > [class*="ym-g"] > [class*="ym-gbox"] {
    padding-bottom: 10000px;
    margin-bottom: -10000px;
  }

  /**
  * @section Form Module
  */
  /** Vertical-Forms - technical base (standard)
  *
  * |-------------------------------|
  * | form                          |
  * |-------------------------------|
  * |   label                       |
  * |   input / select / textarea   |
  * |-------------------------------|
  * | /form                         |
  * |-------------------------------|
  *
  * (en) Styling of forms where both label and input/select/textarea are styled with display: block;
  * (de) Formulargestaltung, bei der sowohl label als auch input/select/textarea mit display: block; gestaltet werden
  */
  .ym-form,
  .ym-form fieldset {
    overflow: hidden;
  }

  .ym-form div {
    position: relative;
  }
  .ym-form label,
  .ym-form .ym-label,
  .ym-form .ym-message {
    position: relative;
    line-height: 1.5;
    display: block;
  }
  .ym-form .ym-message {
    clear: both;
  }
  .ym-form .ym-fbox-check label {
    display: inline;
  }
  .ym-form input,
  .ym-form textarea {
    cursor: text;
  }
  .ym-form .ym-fbox-check input,
  .ym-form input[type="image"],
  .ym-form input[type="radio"],
  .ym-form input[type="checkbox"],
  .ym-form select,
  .ym-form label {
    cursor: pointer;
  }
  .ym-form textarea {
    overflow: auto;
  }
  .ym-form input.hidden,
  .ym-form input[type=hidden] {
    display: none !important;
  }
  .ym-form .ym-fbox:before,
  .ym-form .ym-fbox-text:before,
  .ym-form .ym-fbox-select:before,
  .ym-form .ym-fbox-check:before,
  .ym-form .ym-fbox-button:before {
    content: "";
    display: table;
  }
  .ym-form .ym-fbox:after,
  .ym-form .ym-fbox-text:after,
  .ym-form .ym-fbox-select:after,
  .ym-form .ym-fbox-check:after,
  .ym-form .ym-fbox-button:after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
  }
  .ym-form .ym-fbox-check input:focus,
  .ym-form .ym-fbox-check input:hover,
  .ym-form .ym-fbox-check input:active,
  .ym-form input[type="radio"]:focus,
  .ym-form input[type="radio"]:hover,
  .ym-form input[type="radio"]:active,
  .ym-form input[type="checkbox"]:focus,
  .ym-form input[type="checkbox"]:hover,
  .ym-form input[type="checkbox"]:active {
    border: 0 none;
  }
  .ym-form input,
  .ym-form textarea,
  .ym-form select {
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 70%;
  }
  .ym-form .ym-fbox-check input,
  .ym-form input[type="radio"],
  .ym-form input[type="checkbox"] {
    display: inline;
    margin-left: 0;
    margin-right: 0.5ex;
    width: auto;
    height: auto;
  }
  .ym-form input[type="image"] {
    border: 0;
    display: inline;
    height: auto;
    margin: 0;
    padding: 0;
    width: auto;
  }
  .ym-form label,
  .ym-form .ym-label {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .ym-form .ym-fbox-button input {
    display: inline;
    overflow: visible;
    width: auto;
  }
  .ym-form .ym-inline {
    display: inline-block;
    float: none;
    margin-right: 0;
    width: auto;
    vertical-align: baseline;
  }

  /* default form wrapper width */
  .ym-fbox-wrap {
    display: table;
    table-layout: fixed;
    width: 70%;
  }
  .ym-fbox-wrap input,
  .ym-fbox-wrap textarea,
  .ym-fbox-wrap select {
    width: 100%;
  }
  .ym-fbox-wrap input[type="image"] {
    width: auto;
  }
  .ym-fbox-wrap input[type="radio"],
  .ym-fbox-wrap input[type="checkbox"] {
    display: inline;
    width: auto;
    margin-left: 0;
    margin-right: 0.5ex;
  }
  .ym-fbox-wrap label,
  .ym-fbox-wrap .ym-label {
    display: inline;
  }

  .ym-full input,
  .ym-full textarea,
  .ym-full select {
    width: 100%;
  }
  .ym-full .ym-fbox-wrap {
    width: 100%;
  }

  /**
  *  Columnar forms display - technical base (optional)
  *
  *  |-------------------------------------------|
  *  | form                                      |
  *  |-------------------------------------------|
  *  |                                           |
  *  |   label   |   input / select / textarea   |
  *  |                                           |
  *  |-------------------------------------------|
  *  | /form                                     |
  *  |-------------------------------------------|
  *
  *  (en) Styling of forms where label floats left of form-elements
  *  (de) Formulargestaltung, bei der die label-Elemente nach links fließen
  */
  .ym-columnar input,
  .ym-columnar textarea,
  .ym-columnar select {
    float: left;
    margin-right: -3px;
  }
  .ym-columnar label,
  .ym-columnar .ym-label {
    display: inline;
    float: left;
    width: 30%;
    z-index: 1;
  }
  .ym-columnar .ym-fbox-check input,
  .ym-columnar .ym-message {
    margin-left: 30%;
  }
  .ym-columnar .ym-fbox-wrap {
    margin-left: 30%;
    margin-right: -3px;
  }
  .ym-columnar .ym-fbox-wrap .ym-message {
    margin-left: 0%;
  }
  .ym-columnar .ym-fbox-wrap label {
    float: none;
    width: auto;
    z-index: 1;
    margin-left: 0;
  }
  .ym-columnar .ym-fbox-wrap input {
    margin-left: 0;
    position: relative;
  }
  .ym-columnar .ym-fbox-check {
    position: relative;
  }
  .ym-columnar .ym-fbox-check label,
  .ym-columnar .ym-fbox-check .ym-label {
    padding-top: 0;
  }
  .ym-columnar .ym-fbox-check input {
    top: 3px;
  }
  .ym-columnar .ym-fbox-button input {
    float: none;
    margin-right: 1em;
  }

  .ym-fbox-wrap + .ym-fbox-wrap {
    margin-top: 0.5em;
  }

  /* global and local columnar settings for button alignment */
  .ym-columnar fieldset .ym-fbox-button,
  fieldset.ym-columnar .ym-fbox-button {
    padding-left: 30%;
  }

  /**
  * @section Accessibility Module
  *
  * (en) skip links and hidden content
  * (de) Skip-Links und versteckte Inhalte
  */
  /* (en) classes for invisible elements in the base layout */
  /* (de) Klassen für unsichtbare Elemente im Basislayout */
  .ym-skip,
  .ym-hideme,
  .ym-print {
    position: absolute;
    top: -32768px;
    left: -32768px;
  }

  /* (en) make skip links visible when using tab navigation */
  /* (de) Skip-Links für Tab-Navigation sichtbar schalten */
  .ym-skip:focus,
  .ym-skip:active {
    position: static;
    top: 0;
    left: 0;
  }

  /* skiplinks:technical setup */
  .ym-skiplinks {
    position: absolute;
    top: 0px;
    left: -32768px;
    z-index: 1000;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  .ym-skiplinks .ym-skip:focus,
  .ym-skiplinks .ym-skip:active {
    left: 32768px;
    outline: 0 none;
    position: absolute;
    width: 100%;
  }
}
@media print {
  /**
  * @section print adjustments for core modules
  *
  * (en) float containment for grids. Uses display: table to avoid bugs in FF & IE
  * (de) Floats in Grids einschließen. Verwendet display: table, um Darstellungsprobleme im FF & IE zu vermeiden
  *
  * @bugfix
  * @since     3.0
  * @affected  FF2.0, FF3.0, IE7
  * @css-for   all browsers
  * @valid     yes
  */
  .ym-grid > .ym-gl,
  .ym-grid > .ym-gr {
    overflow: visible;
    display: table;
    table-layout: fixed;
  }

  /* (en) make .ym-print class visible */
  /* (de) .ym-print-Klasse sichtbar schalten */
  .ym-print {
    position: static;
    left: 0;
  }

  /* (en) generic class to hide elements for print */
  /* (de) Allgemeine CSS Klasse, um beliebige Elemente in der Druckausgabe auszublenden */
  .ym-noprint {
    display: none !important;
  }
}
/**
 * "Yet Another Multicolumn Layout" - YAML CSS Framework
 *
 * (en) Uniform design of standard content elements
 * (de) Einheitliche Standardformatierungen für die wichtigten Inhalts-Elemente
 *
 * @copyright       © 2005-2013, Dirk Jesse
 * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-CDL (http://www.yaml.de/license.html)
 * @link            http://www.yaml.de
 * @package         yaml
 * @version         4.1.2
 */
@media all {
  /*
  * @section global typography settings
  *
  * vertical rhythm settings (based on em-unit)
  * -------------------------------------------
  * basefont-size:  14px (87.5%)
  * line-height  :  21px (factor: 1.5) */
  /* (en) reset font size for all elements to standard (16 Pixel) */
  /* (de) Alle Schriftgrößen auf Standardgröße (16 Pixel) zurücksetzen */
  html * {
    font-size: 100%;
  }

  /**
  * (en) reset monospaced elements to font size 16px in all browsers
  * (de) Schriftgröße von monospaced Elemente in allen Browsern auf 16 Pixel setzen
  *
  * @see: http://webkit.org/blog/67/strange-medium/
  */
  textarea,
  pre,
  code,
  kbd,
  samp,
  var,
  tt {
    font-family: Consolas, "Lucida Console", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
  }

  /* font-size: 14px; */
  body {
    font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
      /* font-size: 87.5%; */
    color: #444444;
  }

  /*--- Headings | Überschriften ------------------------------------------------------------------------*/
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Droid Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
    color: #161e21;
    margin: 0;
  }

  h1 {
    /* font-size: 48px; */
    font-size: 342.85714%;
    line-height: 0.875;
    margin: 0 0 0.4375em 0;
  }

  h2 {
    /* font-size: 32px; */
    font-size: 228.57143%;
    line-height: 1.3125;
    margin: 0 0 0.65625em 0;
  }

  h3 {
    /* font-size: 24px; */
    font-size: 171.42857%;
    line-height: 0.875;
    margin: 0 0 0.875em 0;
  }

  h4 {
    /* font-size: 21px; */
    font-size: 150%;
    line-height: 1;
    margin: 0 0 1em 0;
  }

  h5 {
    /* font-size: 18px; */
    font-size: 128.57143%;
    line-height: 1.16667;
    margin: 0 0 1.16667em 0;
  }

  h6 {
    /* font-size: 14px; */
    font-size: 100%;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 0 1.5em 0;
  }

  /* --- Lists | Listen  -------------------------------------------------------------------------------- */
  ul,
  ol,
  dl {
    font-size: 100%;
    line-height: 1.5;
    margin: 0 0 1.5em 0;
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
  }

  ul ul {
    list-style-type: circle;
    margin-top: 0;
  }

  ol ol {
    list-style-type: lower-latin;
    margin-top: 0;
  }

  ol ul {
    list-style-type: circle;
    margin-top: 0;
  }

  li {
    font-size: 100%;
    line-height: 1.5;
    margin-left: 1.2em;
  }

  dt {
    font-weight: bold;
  }

  dd {
    margin: 0 0 1.5em 0.8em;
  }

  /* --- general text formatting | Allgemeine Textauszeichnung ------------------------------------------ */
  p {
    font-size: 100%;
    line-height: 1.5;
    margin: 0 0 1.5em 0;
  }

  blockquote,
  cite,
  q {
    font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
    font-style: italic;
  }

  blockquote {
    background: transparent;
    color: #666666;
    margin: 1.5em 0 0 1.5em;
  }

  strong,
  b {
    font-weight: bold;
  }

  em,
  i {
    font-style: italic;
  }

  big {
    /* font-size: 16px; */
    font-size: 114.28571%;
    line-height: 1.3125;
  }

  small {
    /* font-size: 12px; */
    font-size: 85.71429%;
    line-height: 1.75;
  }

  pre,
  code,
  kbd,
  tt,
  samp,
  var {
    font-size: 100%;
  }

  pre {
    font-size: 100%;
    line-height: 1.5;
    margin: 0 0 1.5em 0;
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  pre,
  code {
    color: #880000;
  }

  kbd,
  samp,
  var,
  tt {
    color: #666666;
    font-weight: bold;
  }

  var,
  dfn {
    font-style: italic;
  }

  acronym,
  abbr {
    border-bottom: 1px #aaa dotted;
    font-variant: small-caps;
    letter-spacing: .07em;
    cursor: help;
  }

  sub,
  sup,
  .super {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sup,
  .super {
    top: -0.5em;
  }

  sub {
    bottom: -0.25em;
  }

  mark {
    background: yellow;
    color: black;
  }

  hr {
    color: #fff;
    background: transparent;
    margin: 0 0 0.75em 0;
    padding: 0 0 0.67857em 0;
    border: 0;
    border-bottom: 1px #eeeeee solid;
  }

  /*--- Links ----------------------------------------------------------------------------------------- */
  a {
    color: #4d87c7;
    background: transparent;
    text-decoration: none;
  }

  a:active {
    outline: none;
  }

  /* (en) maximum constrast for tab focus - change with great care */
  /* (en) Maximaler Kontrast für Tab Focus - Ändern Sie diese Regel mit Bedacht */
  a:hover,
  a:focus {
    background-color: #4d87c7;
    color: white;
    text-decoration: none;
  }

  /* --- images ------------------ */
  img,
  figure {
    margin: 0;
  }

  .flexible {
    margin-bottom: 1.5em;
    max-width: 100%;
    height: auto;
  }

  /* IE6 workaround - 2% space for possible borders */
  * html .flexible {
    width: 98%;
  }

  .bordered {
    margin-bottom: 1.5em;
    border: 2px #eee solid;
    border: 2px white solid;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
  }

  /**
  * ----------------------------------------------------------------------- #
  *
  * Generic Content Classes
  *
  * (en) standard classes for positioning and highlighting
  * (de) Standardklassen zur Positionierung und Hervorhebung
  *
  * @section content-generic-classes
  */
  .highlight {
    color: #cc3300;
  }

  .dimmed {
    color: #888888;
  }

  .box {
    border-radius: 0.3em;
    border-width: 1px;
    border-style: solid;
    border-color: #888;
    border-color: rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2);
    color: #444;
    color: rgba(0, 0, 0, 0.8);
    padding: 1.42857em;
    margin: 0 0 1.5em 0;
  }
  .box > *:last-child {
    margin-bottom: 0;
  }

  .label {
    font-family: Verdana, Geneva, sans-serif;
    padding: 1px 6px 2px;
    display: inline-block;
    vertical-align: middle;
    letter-spacing: normal;
    white-space: nowrap;
    border-radius: 3px;
    background: #06C;
    color: #fff;
    font-size: 10px;
    line-height: 12px;
  }

  .info {
    background: #f4f4f4;
  }

  .success {
    background: #88cc88;
  }

  .warning {
    background: #cccc88;
  }

  .error {
    background: #cc8888;
  }

  .float-left {
    float: left;
    display: inline;
    margin: 0 1em 1.5em 0;
  }

  .float-right {
    float: right;
    display: inline;
    margin: 0 0 1.5em 1em;
  }

  .center {
    display: block;
    text-align: center;
    margin: 0 auto 1.5em auto;
  }

  /**
  * ------------------------------------------------------------------------------------------------- #
  *
  * Tables | Tabellen
  *
  * (en) Generic classes for table-width and design definition
  * (de) Generische Klassen für die Tabellenbreite und Gestaltungsvorschriften für Tabellen
  *
  * @section content-tables
  */
  table {
    width: 100%;
    border-collapse: collapse;
    color: #444444;
    border-top: 1px #ccc solid;
    border-bottom: 1px #ccc solid;
    margin: 0 0 1.35714em 0;
  }
  table.narrow {
    margin: 0 0 1.42857em 0;
  }
  table.narrow th,
  table.narrow td {
    padding: 0 0.5em;
    line-height: 1.42857;
  }
  table.fixed {
    table-layout: fixed;
  }
  table.bordertable {
    border: 1px #ccc solid;
  }
  table.bordertable thead th {
    background: #e0e0e0;
    border-right: 1px #ccc solid;
    border-bottom: 1px #ccc solid;
  }
  table.bordertable tbody th[scope="row"] {
    background: #f0f0f0;
  }
  table.bordertable tbody th {
    border-right: 1px solid #ccc;
  }
  table.bordertable tbody td {
    border-right: 1px solid #ccc;
  }

  caption {
    font-variant: small-caps;
  }

  th,
  td {
    line-height: 1.5em;
    vertical-align: top;
    padding: 0.71429em 0.5em;
  }

  th *:first-child,
  td *:first-child {
    margin-top: 0;
  }

  th.nowrap,
  td.nowrap {
    white-space: nowrap;
  }

  thead th {
    text-align: left;
    color: #000;
    border-bottom: 2px #000 solid;
  }

  tbody {
    /* highlight row on mouse over */
  }
  tbody th {
    text-align: left;
    border-top: 1px solid #ccc;
  }
  tbody td {
    text-align: left;
    border-top: 1px solid #ccc;
  }
  tbody tr:hover th,
  tbody tr:hover td {
    background: #f8f8f8;
  }
}

@media screen {
    body {
        padding-top: 1.5em;
        padding-bottom: 1.5em;
        margin-left: auto;
        margin-right: auto;
        max-width: 60rem;
        font-family: "Droid Sans", Arial, Helvetica, sans-serif;
    }

    a.standardsButton {
        padding: 0.1em;
        padding-left: 0.5em;
        padding-right: 0.5em;
        border: 1px solid rgba(19, 181, 234, 1.0);
        background-color: rgba(19, 181, 234, 0.2);
        color: black;
        border-radius: 2px;
    }

    a.standardsButton:hover,
    a.standardsButton:focus {
        border: 1px solid rgba(19, 181, 234, 1.0);
        background-color: rgba(19, 181, 234, 0.7);
        color: black;
    }

    ul, ol {
        padding-left: 1.5em;
    }

    dl.compact {
        display: grid;
        grid-template-columns: auto 1fr;
        margin-bottom: 1.5em;
    }

    dl.compact > dt {
        grid-column: 1;
        margin-bottom: 0;
        padding-right: 0.5em;
    }

    dl.compact > dd {
        grid-column: 2;
        margin-bottom: 0;
    }

    div#status-notice {
        /* margin: 1.5em;
           padding: 1.5em; */
    }

    div#status-notice.active,
    div#status-notice.final,
    div#status-notice.draft {
        color: green;
    }

    div#status-notice.deferred,
    div#status-notice.deprecated,
    div#status-notice.experimental,
    div#status-notice.obsolete,
    div#status-notice.proposed,
    div#status-notice.protoxep,
    div#status-notice.rejected,
    div#status-notice.retracted {
        color: red;
    }

    ol.toc-appendices {
        padding: 0;
        list-style-type: upper-alpha;
        list-style-position: inside;
    }
    a {
        color: #328627 /* #c4410a */;
        background: transparent;
    }

    a:hover,
    a:focus {
        background-color: #328627 /* #c4410a */;
        color: white;
    }

    figure {
        margin-top: 1.5em;
        margin-bottom: 1.5em;
    }

    figure.code,
    figure.code-example,
    figure.example {
        /* margin: 1.5em; */
        padding: 1.5em;
        border: 1px solid rgba(19, 181, 234, 1.0);
    }
    figure.cve {
        padding: 1.5em;
        border: 5px solid rgba(180, 0, 0, 1.0);
    }

    figure > figcaption {
        margin-bottom: 0.5em;
        font-weight: bold;
    }

    figure.code-example > figcaption {
        font-weight: normal;
    }

    figure > *:last-child {
        margin-bottom: 0;
    }

    a.anchor-link {
        opacity: 0.3;
        margin-left: 0.5em;
        margin-right: 0.5em;
    }

    a.anchor-link > abbr {
        text-decoration: none;
        border: none;
    }

    h1 > a.anchor-link,
    h2 > a.anchor-link,
    h3 > a.anchor-link,
    h4 > a.anchor-link,
    h5 > a.anchor-link,
    h6 > a.anchor-link,
    div.revision-head > a.anchor-link {
        break-before: auto;
        visibility: hidden;
    }

    h1:hover > a.anchor-link,
    h2:hover > a.anchor-link,
    h3:hover > a.anchor-link,
    h4:hover > a.anchor-link,
    h5:hover > a.anchor-link,
    h6:hover > a.anchor-link,
    div.revision-head:hover > a.anchor-link  {
        visibility: visible;
    }

    pre.prettyprint {
        white-space: pre;
        overflow-x: auto;
    }

    ul.authors {
        display: inline-block;
        list-style-type: none;
        margin-bottom: 0;
        margin-left: 0;
        padding-left: 0;
    }

    ul.authors > li {
        margin: 0;
        padding: 0;
        display: inline;
    }

    ul.authors > li:before {
        content: ', ';
    }

    ul.authors > li:first-child:before {
        content: '';
    }

    ol.toc,
    ol.toc ol {
        counter-reset: item;
        list-style-type: none;
        padding-left: 0.5em;
    }

    ol.toc {
        padding-left: 0;
    }

    ol.toc li:before {
        content: counters(item, ".") ". ";
        counter-increment: item;
    }

    ol.revision-history {
        list-style-type: none;
        padding-left: 0;
    }

    ol.revision-history > li {
        margin-left: 0;
    }

    div.revision-head {
        font-weight: bold;
        font-size: 128.57143%;
    }

    div.revision-author {
        text-align: right;
        margin-bottom: 1.5em;
    }

    p + div.revision-author,
    ul + div.revision-author {
        margin-top: -1.5em;
    }

    div.revision-author:before {
        content: "— ";
    }

    div.docmeta-wrap {
        margin-left: 1.5em;
        margin-right: 1.5em;
        padding: 1.5em;
        border-left: 1px solid rgba(19, 181, 234, 1.0);
        display: flex;
    }

    div.docmeta-wrap > dl#docmeta {
        flex: 1 1 auto;
    }

    div.docmeta-wrap > div.timeline-wrap {
        flex: 1 0 auto;
        padding-left: 1.5em;
    }

    div.timeline-head {
        margin-right: 0.5em;
        font-size: 100%;
        font-weight: bold;
        line-height: 1.5;
        margin: 0 0 1.5em 0;
    }

    ol.timeline {
        text-align: right;
        list-style-type: none;
        margin: 0;
        padding: 0;
        border-right: 0.1em solid black;
    }

    ol.timeline > li {
        margin: 0;
        padding: 0;
        position: relative;
        padding: 0.5em;
        padding-right: 0;
    }

    ol.timeline > li::after,
    ol.timeline > li::before {
        display: none;
        position: relative;
        top: -0.1em;
        width: 0.4em;
        height: 0.4em;
        background: black;
        border-radius: 50%;
        content: "";
    }

    ol.timeline > li::after {
        display: inline-block;
        margin-right: -0.25em;
        margin-left: 0.5em;
    }

    ol.timeline > li::before {
        margin-left: -0.25em;
        margin-right: 0.5em;
    }

    ol.timeline > li.current {
        font-weight: bold;
    }

    pre {
        font-size: 87.5%;
    }

    .box {
        border-radius: 0;
    }
}

@media screen and ( min-width: 75em ) {
    html {
        padding-left: 17rem;
    }

    nav#toc {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: calc((100vw - 45rem) / 2 - 2rem);
        max-width: 20rem;
        padding: 0.5em;
        overflow-y: scroll;
    }

    nav#toc > a > h2 {
        font-size: 128.57143%;
        line-height: 1.16667;
        margin: 0 0 1.16667em 0;
    }

    nav#toc > a {
        font-size: inherit;
        display: block;
    }

    nav#toc > a:hover,
    nav#toc > a:focus {
        background-color: transparent;
    }

    nav#toc h2:before {
        display: block;
        font-size: 125%;
        background: #333;
        color: white;
        margin: -0.333333em;
        margin-bottom: 1em;
        padding: 0.3333333em;
        padding-left: 2.1666667em;
        background-image: url('https://xmpp.org/images/logos/xmpp-logo.svg');
        background-repeat: no-repeat;
        background-size: 1.5em;
        background-position: 0.3em 0.1em;
    }

    nav#toc ol,
    nav#toc li {
        margin-left: 0;
        padding-left: 0;
        margin-bottom: 0;
    }

    nav#toc ol.toc li {
        background-color: rgba(0, 0, 0, 0.1);
    }

    nav#toc ol.toc li:before  {
        content: '';
        counter-increment: none;
    }

    nav#toc > ol.toc {
        margin-left: -0.5em;
        margin-right: -0.5em;
    }

    nav#toc ol.toc li a {
        display: block;
        padding: 0.5em;
    }

    nav#toc ol.toc li a:before {
        content: counters(item, ".") ". ";
        counter-increment: item;
        color: #444444;
    }

    nav#toc ol.toc li a:hover:before {
        color: white;
    }

}

@media screen and ( max-width: 60em ) {
    body {
        padding: 1.5em;
    }

    h1 {
        font-size: 1.5em;
    }

    dl#docmeta > dd {
        margin-left: 0;
        padding-left: 0;
    }

    nav#toc > h2 {
        font-size: 1.25em;
    }
}

@media screen and ( max-width: 40em ) {
    ul, ol {
        padding-left: 0;
    }

    h2 {
        font-size: 171.42857%;
        line-height: 0.875;
        margin: 0 0 0.875em 0;
    }

    h3 {
        font-size: 150%;
        line-height: 1;
        margin: 0 0 1em 0;
    }

    h4 {
        font-size: 128.57143%;
        line-height: 1.16667;
        margin: 0 0 1.16667em 0;
    }

    h5 {
        font-size: 100%;
        font-weight: bold;
        line-height: 1.5;
        margin: 0 0 1.5em 0;
    }

    h6 {
        font-size: 100%;
        font-weight: bold;
        line-height: 1.5;
        margin: 0 0 1.5em 0;
    }

    h2,h3,h4,h5,h6 {
        text-indent: -1em;
        margin-left: 1em;
    }

    div.docmeta-wrap {
        display: block;
        margin-left: 0;
        margin-right: 0;
    }

    div.docmeta-wrap > div.timeline-wrap {
        padding-left: 0;
    }

    ol.timeline {
        border-left: 0.1em solid black;
        border-right: none;
        text-align: left;
        margin-left: 1.5em;
    }

    ol.timeline > li {
        padding-left: 0;
        padding-right: 0.5em;
    }

    ol.timeline > li::after {
        display: none;
    }

    ol.timeline > li::before {
        display: inline-block;
    }

    img {
        max-width: calc(100vw - 1em);
    }

    div.docmeta-wrap {
        border-left: none;
        padding-left: 0;
        padding-right: 0;
    }

    dl#docmeta {
        display: block;
    }

    dl#docmeta > dd {
        margin-left: 1.5em;
    }
}

@media screen and ( prefers-color-scheme: dark ) {
    body {
        background-color: #161616;
        color: #ccc;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #eee;
    }

    table {
        color: #eee;
    }

    tbody td {
        border-top: 1px solid #333;
    }

    tbody tr:hover th,
    tbody tr:hover td {
        background-color: #282828;
    }

    pre, code {
        color: red;
    }

    figure.code,
    figure.code-example,
    figure.example {
        background-color: #282828;
    }
    figure.cve {
        border: 5px solid rgba(120, 0, 0, 1.0);
    }

    .box {
        color: #ccc;
        background-color: #282828;
    }

    nav#toc ol.toc li {
        background-color: rgba(255, 255, 255, 0.05);
    }

    nav#toc ol.toc li a:before {
        color: #ccc;
    }

    a {
        color: #4b3;
    }

    a.standardsButton {
        color: #eee;
    }

    ol.timeline {
        border-right: 0.1em solid #ccc;
    }

    ol.timeline > li::after,
    ol.timeline > li::before {
        background: #ccc;
    }
}

@media print {
    a.anchor-link {
        display: none;
    }
}