mirror of
https://github.com/moparisthebest/xeps
synced 2024-11-15 13:55:03 -05:00
1509 lines
29 KiB
CSS
1509 lines
29 KiB
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;
|
|
}
|
|
|
|
/* 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 {
|
|
font-size: 75%;
|
|
line-height: 0;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
sup {
|
|
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 {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
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;
|
|
}
|
|
|
|
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: #c4410a;
|
|
background: transparent;
|
|
}
|
|
|
|
a:hover,
|
|
a:focus {
|
|
background-color: #c4410a;
|
|
color: white;
|
|
}
|
|
|
|
figure {
|
|
margin-top: 1.5em;
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
figure.code,
|
|
figure.code-example {
|
|
/* margin: 1.5em; */
|
|
padding: 1.5em;
|
|
border: 1px solid rgba(19, 181, 234, 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 {
|
|
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 {
|
|
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;
|
|
}
|
|
|
|
dl#docmeta {
|
|
margin-left: 1.5em;
|
|
margin-right: 1.5em;
|
|
padding: 1.5em;
|
|
border-left: 1px solid rgba(19, 181, 234, 1.0);
|
|
}
|
|
|
|
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%;
|
|
}
|
|
}
|
|
|
|
@media screen and ( min-width: 75em ) {
|
|
body {
|
|
margin-right: 0;
|
|
margin-left: auto;
|
|
max-width: 60rem;
|
|
}
|
|
|
|
nav#toc {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 15rem;
|
|
width: calc((100vw - 60rem) - 2rem);
|
|
max-width: 30rem;
|
|
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: 150%;
|
|
background-color: rgba(19, 181, 234, 1.0);
|
|
margin: -0.333333em;
|
|
margin-bottom: 1em;
|
|
padding: 0.3333333em;
|
|
padding-left: 2.1666667em;
|
|
background-image: url('https://xmpp.org/theme/images/xmpp-logo.svg');
|
|
background-repeat: no-repeat;
|
|
background-size: 1.5em;
|
|
background-position: 0.33333333em 0.33333333em;
|
|
}
|
|
|
|
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 ( min-width: 90em ) {
|
|
body {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
nav#toc {
|
|
width: calc((100vw - 60rem) / 2 - 2em);
|
|
}
|
|
}
|
|
|
|
@media screen and ( max-width: 60em ) {
|
|
body {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
dl#docmeta > dd {
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
nav#toc > h2 {
|
|
font-size: 1.25em;
|
|
}
|
|
}
|