MediaWiki:Common.css: Unterschied zwischen den Versionen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
K (Ausblenden der Lins zu den Diskussionseiten)
K (akt (Makeover))
(Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt)
Zeile 286: Zeile 286:
  
 
/* Infoboxen:  Achtung, Hinweis, Info, ToDo, Löschen, URLMove, Hauptartikel */
 
/* Infoboxen:  Achtung, Hinweis, Info, ToDo, Löschen, URLMove, Hauptartikel */
/* allgemein */
+
[role=complementary],
.note-box {
+
[role=link],
  margin: .5em 0 1em;
+
.continuation,
 +
.disambuigation,
 +
.example,
 +
[role=note] {
 +
border: thin solid transparent;
 +
border-left: thick solid #8db243;
 +
border-radius: 0 0.5em 0.5em 0;
 +
line-height: 1.5em;
 +
margin: .5em 0 1em;
 +
padding: 0 0 1em .5em;
 +
padding-left: calc(var(--ausrückung, 0em) + 1em);
 +
text-indent: calc(0em - var(--ausrückung, 0em))
 
}
 
}
/* als aside */
+
 
.note-box.aside {
+
[role=complementary] {
  text-align: left;
+
border-color: #dfac20;
 +
border-color: var(--yellow);
 
}
 
}
@media (min-width: 60em ) {
+
 
  .note-box.aside {
+
[role=complementary].autor {
    float: right;
+
max-width: 20em
    width: auto;
 
    max-width: 30em;
 
    margin: .5em 0 1em 1em;
 
  }
 
 
}
 
}
.note-box-title, .note-box-footer {
+
 
  margin: 0;
+
[role=complementary].aside {
  font-size: 102%;
+
text-align: left
  padding: 0 12px;
 
  border-width: thin;
 
  border-style: solid solid none;
 
  border-radius: 0 .7em 0 0;
 
  color: #fff;
 
 
}
 
}
.note-box-text:last-child {
+
 
  border-radius: 0 0 .7em .7em;
+
@media (min-width:60em) {
 +
[role=complementary].aside {
 +
float: right;
 +
width: auto;
 +
max-width: 30em;
 +
margin: .5em 0 1em 1em
 +
}
 
}
 
}
  
/* Grid-Layout für dl nur in {{Info und {{Text-Info Textboxen */
+
[role=complementary] [role=heading],
.note-box-info .note-box-text dl {
+
[role=note].attention [role=heading] {
 +
font-weight: bold;
 +
margin: 0 0 0.5em -1em;
 +
text-indent: 1em
 +
}
 +
 
 +
[role=complementary] dl {
 
display: grid;
 
display: grid;
grid-template-columns: 2em 1fr;
+
grid-template-columns: 2em 1fr
 
}
 
}
  
.note-box-info .note-box-text dd {
+
[role=complementary].autor dl {
margin: 0;
+
grid-template-columns: 5em 1fr
padding-left: 1em;
 
margin-bottom: 1em;
 
 
}
 
}
  
 +
[role=complementary] dt {
 +
font-weight: bold;
 +
margin-bottom: .1em
 +
}
  
.note-box-footer {
+
[role=complementary] dd {
  border-style: none solid solid;
+
margin: 0 0 1em;
  border-radius: 0 0 .7em .7em;
+
padding: 0 1em
 
}
 
}
.note-box-text {
+
 
  margin: -1px 0 0;
+
[role=link] {
  padding: 4px 12px;
+
border-left-color: var(--link-color);
  background-color: #fff;
 
  border-width: thin;
 
  border-style: solid;
 
  line-height: 1.5em;
 
 
}
 
}
.note-box-text, #a#b {
+
 
  border-style: solid solid none;
+
.continuation,
  margin: 0;
+
.disambuigation {
 +
border-color: var(--link-color);
 +
border-bottom-left-radius: 0.5em;
 +
background-color: var(--blue1);
 +
color: var(--text-color);
 
}
 
}
.note-box-text:last-child {
+
 
  border-style: solid;
+
.continuation .flex-item {
 +
text-align: center
 
}
 
}
  
/* Achtung *//* Löschen */
+
.continuation .flex-item:first-child {
.note-box-attention > .note-box-title,
+
padding-left: .6em;
.note-box-question > .note-box-title {
+
text-align: left
  border-color: #c32e04;
 
  background-color: #c32e04;
 
 
}
 
}
.note-box-attention > .note-box-text,
+
 
.note-box-question > .note-box-text {
+
.continuation .flex-item:last-child {
  border-color: #c32e04;
+
padding-right: .6em;
  background-color: #ffebe6;
+
text-align: right
 
}
 
}
  
/* Hinweis */
+
.example {
.note-box-advice > .note-box-title {
+
border-left-color: #dfac20;
  border-color: #8db243;
+
background-color: var(--yellow1);
  background-color: #8db243;
 
}
 
.note-box-advice > .note-box-text {
 
  border-color: #8db243;
 
  background-color: #ebf5d7;
 
 
}
 
}
  
/* Info */
+
.example [role=heading] {
.note-box-info > .note-box-title{
+
font-weight: bold
  border-color: #5d7380;
 
  background-color: #5d7380;
 
}
 
.note-box-info > .note-box-text{
 
  border-color: #5d7380;
 
  background-color: #e4ebf2;
 
 
}
 
}
  
/* ToDo */
+
[role=note].attn {
.note-box-todo > .note-box-title {
+
border-left-color: #c82f04
  border-color: #3983ab;
 
  background-color: #3983ab;
 
}
 
.note-box-todo > .note-box-title a,
 
.note-box-todo > .note-box-title a:hover,
 
.note-box-todo > .note-box-title a:focus,
 
.note-box-todo > .note-box-title a:active {
 
  margin: 0;
 
  color: #fff;
 
}
 
.note-box-todo > .note-box-text {
 
  border-color: #3983ab;
 
  background-color: #e6f2f7;
 
}
 
.note-box-todo.private {
 
  display: none;
 
 
}
 
}
  
/* URLmove */
+
[role=note].attention {
.note-box-urlmove > .note-box-title {
+
border-color: #c82f04;
  border-color: #3983ab;
+
background-color: #ffebe6;
  background-color: #3983ab;
+
border-bottom-left-radius: 0.5em;
}
+
color: #333
.note-box-urlmove > .note-box-text {
 
  border-color: #3983ab;
 
  background-color: #e6f2f7;
 
 
}
 
}
  
/* AutorBox */
+
[role=note].attention [role=heading] {
.note-box-autor {
+
background-color: #c82f04
  max-width: 20em;
 
}
 
.note-box-autor > .note-box-title {
 
  border-color: #5d7380;
 
  background-color: #5d7380;
 
}
 
.note-box-autor > .note-box-text {
 
  border-color: #5d7380;
 
  background-color: #e4ebf2;
 
}
 
.note-box-autor-text {
 
  margin: 0 5px 0 0;
 
  font-weight: bold;
 
  font-size: 90%;
 
  float: left;
 
}
 
.note-box-autor-info {
 
  margin: 0;
 
  font-size: 90%;
 
 
}
 
}
  
/* Beachten, Empfehlung, Hauptartikel - common */
+
[role=note].attention [role=heading] a {
.note-box-notice-text, .note-box-recommendation-text, .note-box-mainarticle {
+
background-color: #c82f04;
  padding-left: 15px;
+
color: white
  border-left: 5px solid #3983ab;
 
  line-height: 1.5em;
 
  padding-left: calc(var(--ausrückung, 0em) + 15px);
 
  text-indent: calc(0em - var(--ausrückung, 0em));
 
 
}
 
}
  
/* Beachten */
+
.continuation [role=heading] {
.note-box-notice-text {
+
background-color: var(--link-color);
  border-left-color: #c32e04;
+
color: white;
  line-height: 1.5em;
+
font-weight: bold;
 +
margin: 0 0 0.5em -1em;
 +
text-indent: 1em
 
}
 
}
  
/* Empfehlung */
+
.note-box {
.note-box-recommendation-text {
+
margin: .5em 0 1em;
  border-left-color: #8db243;
+
outline: thin dotted hotpink;
  line-height: 1.5em;
 
 
}
 
}
  
li > .note-box-mainarticle {
+
.private {
  margin-left: -.75em;
+
display: none
 
}
 
}
  
/* Vorlage Beispiel */
 
 
.note-box-example {
 
.note-box-example {
  border-left: 5px solid #dfac20;
+
border-left: 5px solid #dfac20;
  padding-left: 15px;
+
padding-left: 15px;
  overflow: visible;
+
overflow: visible
 
}
 
}
.note-box-example > div:not(.note-box) {
+
 
  padding: .5em 0;
+
.note-box-example>div {
 +
padding: .5em 0
 
}
 
}
.note-box-example > div:nth-last-child(2) {
+
 
  padding-bottom: 0;
+
.note-box-example>div:nth-last-child(2) {
 +
padding-bottom: 0
 
}
 
}
.note-box-example > .note-box-title {
+
 
  color: #333;
+
.note-box-example>.note-box-title {
  background: none;
+
color: #333;
  border: none;
+
background: none;
  font-weight: bold;
+
border: none;
  font-size: 100%;
+
font-weight: bold;
  padding-top: 0;
+
font-size: 100%;
 +
padding-top: 0
 
}
 
}
.note-box-example > .note-box-title a {
+
 
  margin: 0 0 0 .5ch;
+
.note-box-example>.note-box-title a {
  color: rgb(38, 115, 191);
+
margin: 0 0 0 .5ch;
 +
/* color: rgb(38, 115, 191) */
 
}
 
}
.note-box-example > .note-box-text {
+
 
  border: none;
+
.note-box-example>.note-box-text {
 +
border: none
 
}
 
}
 +
 
.note-box-example .note-box-footer {
 
.note-box-example .note-box-footer {
  display: none;
+
display: none
 
}
 
}
.note-box-example-wiki, .note-box-example-code {
+
 
  margin-top: -1px;
+
.note-box-example-wiki,
  overflow: auto;
+
.note-box-example-code {
 +
margin-top: -1px;
 +
overflow: auto
 
}
 
}
 +
 
.note-box-example-code {
 
.note-box-example-code {
  font: 16px/19px monospace;
+
font: 16px/19px monospace;
  white-space: pre;
+
white-space: pre
 
}
 
}
 +
 
.note-box-example-code .ln-xtra,
 
.note-box-example-code .ln-xtra,
 
.note-box-example-code li.ln-xtra,
 
.note-box-example-code li.ln-xtra,
 
.note-box-example-code div.ln-xtra {
 
.note-box-example-code div.ln-xtra {
  background-color: #fcc;
+
background-color: var(--red);
 
}
 
}
 +
 
.note-box-example-code pre {
 
.note-box-example-code pre {
  margin: 0;
+
margin: 0;
  padding: 0;
+
padding: 0;
  border: none;
+
border: none;
  background-color: transparent;
+
background-color: transparent;
  font-size: 1em;
+
font-size: 1em
 
}
 
}
  
/* Vorlage Fortsetzung */
 
.note-box-continuation .note-box-title {
 
  background-color: #3983ab;
 
  border-color: #3983ab;
 
  width: calc(100% - 24px); /* mieser Hack, vermutlich flex-Pixel-Fehler */
 
}
 
.note-box-continuation .note-box-text {
 
  width: 100%;
 
  padding: 4px 0;
 
  border-color: currentColor;
 
  border-style: solid;
 
  border-radius: 0;
 
  background-color: #e6f2f7;
 
  color: #3983ab;
 
}
 
.note-box-continuation .note-box-title + .note-box-text {
 
  border-color: #3983ab;
 
}
 
.note-box-continuation .note-box-text .flex-item {
 
  text-align: center;
 
}
 
.note-box-continuation .note-box-text .flex-item:first-child {
 
  padding-left: 12px; 
 
  text-align: left;
 
}
 
.note-box-continuation .note-box-text .flex-item:last-child {
 
  padding-right: 12px;
 
  text-align: right;
 
}
 
  
  

Version vom 3. September 2022, 13:03 Uhr

/* CodingStyle */
div.codingstyle {
  position: relative;
  white-space: pre;
  background-color: hsla(80, 45%, 48%, .2);
  border: thin dashed #8db243;
  color: #000000;
  line-height: 1.1em;
  margin: 1em 0;
  padding: 0;
  font-size: 1em;
  -moz-tab-size: 2;
  tab-size: 2;
  font-family: monospace;
}
div.codingstyle.wrong,
div.codingstyle.obsolete {
  background: hsla(13, 96%, 39%, .1);
  border-color: #c32e04;
}
div.codingstyle > pre {
  border-color: transparent;
  background-color: transparent;
  margin: 0;
  padding: 1em 1em .8em;
}
div.codingstyle::before {
  content: "richtig";
  position: absolute;
  font-family: sans-serif;
  left: .5em;
  top: -.75em;
  font-weight: bold;
  color: #8db243;
  background: white;
  padding: .1em .5em;
  border-bottom: thin dashed #8db243;
}
div.codingstyle.wrong::before,
div.codingstyle.obsolete::before {
  content: "falsch";
  color: #c32e04;
  border-color: #c32e04;
}

div.codingstyle.obsolete::before {
  content: "obsolet";
}
/* #dokuwiki__pagetools {top: -35vh !important;} (Wenn Werbung geschaltet ist) */ 

/* Mehr Abstand für Edit-Buttons */
#wpSummary ~ div.editButtons {
    margin: 1.4em 0 2.4em -.1em;
}


/* CSS an dieser Stelle wirkt sich auf alle Skins aus */

/* Systemschriften */
html, body,
#firstHeading, .page-Startseite #mw-content-text > h1:first-child {
  font-family: "Segoe UI", Roboto, Calibri, -apple-system, BlinkMacSystemFont, "PT Sans", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Links neben Überschriften */
.locale-anchor::before {
    content: url("/images/7/7e/Link_icon_black.svg");
    display: inline-block;
    margin-left: .3em;
    width: .8em;
    padding: 0 .2em;
    border-radius: 0 .3em .3em;
}
.locale-anchor:hover::before, 
.locale-anchor:focus::before {
    background-color: #df6c20;
}
.locale-anchor span {
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
}

/* Diskussionsseiten ausblenden */
body:not([class*="page-Benutzer"]) #ca-talk {
  display: none;
}
body:not([class*="page-Benutzer"]) #ca-watch {
  display: none !important; /*dann braucht man auch Seiten nicht beobachten */
}

/** talkpage-header nicht für Benutzerdiskussionen **/
body[class*=page-Benutzer_Diskussion] .mw-talkpageheader,
body[class*=page-Benutzer_Diskussion] .mw-talkpageheader + p {
  display: none;
}

/** max-width für Bilder **/
img {
  max-width: 100%;
  height: auto;
}

/* 2 Spalten */
div.twocol {
    float: left;
    min-width: 12em;
    padding: 0 1% 0 0;
    width: 49%;
}
div.twocol + div.twocol {
    padding: 0 0 0 1%;
}

@media (max-width: 73em ) {
    div.twocol div.twocol {
        min-width: 100%;
        padding: 0;
    }
}

@media (max-width: 50em ) {
    div.twocol {
        min-width: 100%;
   }
   div.twocol + div.twocol {
        padding: 0;
   }
}

/* 3 Spalten */
 
@media (min-width: 50em ) {
    div.threecol {
        display: flex;
    }
    div.threecol > .flex-item {
        flex: 1 1 auto;
        width: 100vw;
        margin: 0 1em 0 0;
    }
    div.threecol > .flex-item:last-child {
        margin: 0;
    }
}

/* reduzierte Einrückung für ol innerhalb von nSpalten */

.mw-content-ltr .nSpalten ol {
margin: 0.3em 0 0 1.6em;
}

/* Hinweis, dass unsigned als subst eingebunden werden sollte */
.action-submit .unsigned::after {
    background: none repeat scroll 0 0 #c32e04;
    color: white;
    content: "An `subst:` gedacht?";
    margin-left: .5em;
    padding: .1em .5em;
    vertical-align: top;
}
/* Tabellen Finanzbericht */
.finanzbericht td:not(:first-child) {
  text-align: right;
}

/* Quick-Syntax-Box */
.selfhtml_quick_syntax_examples {
  width: 100%;
  margin: 1em 0;
  padding: 0.2em 0;
  border: 1px solid rgb(102, 102, 255);
  border-top: none;
  background-color: rgb(250, 250, 255);
}
.selfhtml_quick_syntax_examples caption {
  padding: 0.1em 0.5em;
  border: 1px solid rgb(102, 102, 255);
  border-bottom: none;
  background-color: rgb(250, 250, 255);
  text-align: left;
  font-weight: bold;
}
.selfhtml_quick_syntax_examples th {
  padding: 0 0.5em;
  text-align: left;
}
.selfhtml_quick_syntax_examples td {
  padding: 0 0.5em;
  vertical-align: top;
}
#selfhtml_quick_syntax_examples_lastline {
  padding-bottom: .5em;
  padding-top: 1em;
}

/* CharInsert-Extension */
#specialchars {
  margin-top: 10px;
  padding:1px;
  border: 1px solid #aaaaaa;
  text-align: center;
  display: block;
}
#specialchars a {
  color: blue;
}

/* Üsim2 */
.vorlage_h2 {
  font-size: 1.5em;
  border-bottom: 2px solid #c4d4da;
  padding-bottom: .15em;
  margin-top: 2em;
  margin-bottom: .75em;
  font-weight: normal;
}
 
/* Inhaltsverzeichnis (TOC) */
.toc td {
  padding: 5px 0;
}

/* Vorlage TOC */
.tocleft {
  float: left;
  margin-right: 1.5em;
  background: white;
  padding-right: 1em;
}
.tocright {
  float: right;
  margin-left: 1.5em;
  background: white;
  padding-left: 1em;
}
.toclimit-1 .toclevel-1 ul,
.toclimit-2 .toclevel-2 ul,
.toclimit-3 .toclevel-3 ul,
.toclimit-4 .toclevel-4 ul,
.toclimit-5 .toclevel-5 ul,
.toclimit-6 .toclevel-6 ul {
  display: none;
}
.tocright.aside {
  margin-left: 0;
  margin-bottom: 1.5em;
}
@media (min-width: 60em) {
  .tocright.aside {
    white-space: nowrap;
  }
}

/* einzeiliges Inhaltsverzeichnis */
.tocinline .toctoggle,
.tocinline .tocnumber {
  display: none;
}
.tocinline,
.tocinline #toctitle,
.tocinline #toctitle > h2,
.tocinline #toc ul,
.tocinline #toc li {
  display: inline;
}
.tocinline #toctitle > h2 {
  margin-right: 1em;
}
.tocinline #toc a {
  padding: 0 .4em;
}
.nonumbering .tocnumber {
  display: none;
}

/* Vorlage Begrüßung */
.toc.hallo a {
  display: inline-flex;
}


/* Infoboxen:  Achtung, Hinweis, Info, ToDo, Löschen, URLMove, Hauptartikel */
[role=complementary],
[role=link],
.continuation,
.disambuigation,
.example,
[role=note] {
	border: thin solid transparent;
	border-left: thick solid #8db243;
	border-radius: 0 0.5em 0.5em 0;
	line-height: 1.5em;
	margin: .5em 0 1em;
	padding: 0 0 1em .5em;
	padding-left: calc(var(--ausrückung, 0em) + 1em);
	text-indent: calc(0em - var(--ausrückung, 0em))
}

[role=complementary] {
	border-color: #dfac20;
	border-color: var(--yellow);
}

[role=complementary].autor {
	max-width: 20em
}

[role=complementary].aside {
	text-align: left
}

@media (min-width:60em) {
	[role=complementary].aside {
		float: right;
		width: auto;
		max-width: 30em;
		margin: .5em 0 1em 1em
	}
}

[role=complementary] [role=heading],
[role=note].attention [role=heading] {
	font-weight: bold;
	margin: 0 0 0.5em -1em;
	text-indent: 1em
}

[role=complementary] dl {
	display: grid;
	grid-template-columns: 2em 1fr
}

[role=complementary].autor dl {
	grid-template-columns: 5em 1fr
}

[role=complementary] dt {
	font-weight: bold;
	margin-bottom: .1em
}

[role=complementary] dd {
	margin: 0 0 1em;
	padding: 0 1em
}

[role=link] {
	border-left-color: var(--link-color);
}

.continuation,
.disambuigation {
	border-color: var(--link-color);
	border-bottom-left-radius: 0.5em;
	background-color: var(--blue1);
	color: var(--text-color);
}

.continuation .flex-item {
	text-align: center
}

.continuation .flex-item:first-child {
	padding-left: .6em;
	text-align: left
}

.continuation .flex-item:last-child {
	padding-right: .6em;
	text-align: right
}

.example {
	border-left-color: #dfac20;
	background-color: var(--yellow1);
}

.example [role=heading] {
	font-weight: bold
}

[role=note].attn {
	border-left-color: #c82f04
}

[role=note].attention {
	border-color: #c82f04;
	background-color: #ffebe6;
	border-bottom-left-radius: 0.5em;
	color: #333
}

[role=note].attention [role=heading] {
	background-color: #c82f04
}

[role=note].attention [role=heading] a {
	background-color: #c82f04;
	color: white
}

.continuation [role=heading] {
	background-color: var(--link-color);
	color: white;
	font-weight: bold;
	margin: 0 0 0.5em -1em;
	text-indent: 1em
}

.note-box {
	margin: .5em 0 1em;
	outline: thin dotted hotpink;
}

.private {
	display: none
}

.note-box-example {
	border-left: 5px solid #dfac20;
	padding-left: 15px;
	overflow: visible
}

.note-box-example>div {
	padding: .5em 0
}

.note-box-example>div:nth-last-child(2) {
	padding-bottom: 0
}

.note-box-example>.note-box-title {
	color: #333;
	background: none;
	border: none;
	font-weight: bold;
	font-size: 100%;
	padding-top: 0
}

.note-box-example>.note-box-title a {
	margin: 0 0 0 .5ch;
	/* color: rgb(38, 115, 191) */
}

.note-box-example>.note-box-text {
	border: none
}

.note-box-example .note-box-footer {
	display: none
}

.note-box-example-wiki,
.note-box-example-code {
	margin-top: -1px;
	overflow: auto
}

.note-box-example-code {
	font: 16px/19px monospace;
	white-space: pre
}

.note-box-example-code .ln-xtra,
.note-box-example-code li.ln-xtra,
.note-box-example-code div.ln-xtra {
	background-color: var(--red);
}

.note-box-example-code pre {
	margin: 0;
	padding: 0;
	border: none;
	background-color: transparent;
	font-size: 1em
}



/* Vorlagen Icon und Iconset */
.smetadaten {
  float: right;
}
ul.siconset {
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
}
span.sicon {
  display: inline-block;
  position: relative;
  width: 32px;
  height: 32px;
  overflow: hidden;
}
li.sicon {
  float: left;
  position: relative;
  width: 32px;
  height: 32px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.sicon img {
  position: absolute;
  border: 0;
  max-width: none;
}
/* BrowserIcons */
span.bricon {
  vertical-align: middle;
}
.bricon .version {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font: bold 10px/11px sans-serif;
  text-align: center;
}
.sicon_op img {top: -0px; left: 0; }
 
.sicon_ie img { top: -31px; left: 0; } 
.sicon_ie8 img { top: -31px; left: -279px; }
.sicon_ie9 img { top: -31px; left: -310px; }
.sicon_ie10 img { top: -31px; left: -341px; }
.sicon_ie11 img { top: -31px; left: -372px; }
.sicon_edge img { top: -31px; left: -403px; }
 
.sicon_fx img { top: -62px; left: 0; }

.sicon_saf img { top: -93px; left: 0; }
.sicon_saf8 img { top: -93px; left: -372px; }
.sicon_saf9 img { top: -93px; left: -403px; }
.sicon_saf10 img { top: -93px; left: -434px; }
.sicon_saf11 img { top: -93px; left: -465px; }
 
.sicon_chr img { top: -155px; left: -0px; }
 
.sicon_html2 img { top: -186px; left: -0px; }
.sicon_html3_2 img { top: -186px; left: -31px; }
.sicon_html4 img { top: -186px; left: -62px; }
.sicon_html5 img { top: -186px; left: -93px; }
.sicon_html5v img { top: -186px; left: -124px; }
 
.sicon_xhtml1 img { top: -186px; left: -217px; }
.sicon_xhtml1_1 img { top: -186px; left: -248px; }
 
.sicon_css1 img { top: -217px; left: -0px; }
.sicon_css2 img { top: -217px; left: -31px; }
.sicon_css2_1 img { top: -217px; left: -62px; }
.sicon_css3 img { top: -217px; left: -93px; }
.sicon_css4 img { top: -217px; left: -124px; }
 
.sicon_dom1 img { top: -217px; left: -465px; }
.sicon_dom2 img { top: -217px; left: -434px; }
.sicon_dom3 img { top: -217px; left: -403px; }
 
.sicon_ecma1 img { top: -217px; left: -186px; }
.sicon_ecma2 img { top: -217px; left: -217px; }
.sicon_ecma3 img { top: -217px; left: -248px; }
.sicon_ecma4 img { top: -217px; left: -279px; }
.sicon_ecma5 img { top: -217px; left: -310px; }
.sicon_ecma6 img { top: -217px; left: -341px; }
 
.sicon_js_ms img { top: -248px; left: -0px; }
.sicon_js1_0 img { top: -248px; left: -31px; }
.sicon_js1_1 img { top: -248px; left: -62px; }
.sicon_js1_2 img { top: -248px; left: -93px; }
.sicon_js1_3 img { top: -248px; left: -124px; }
.sicon_js1_4 img { top: -248px; left: -155px; }
.sicon_js1_5 img { top: -248px; left: -186px; }
.sicon_js1_6 img { top: -248px; left: -217px; }
.sicon_js1_7 img { top: -248px; left: -248px; }
.sicon_js1_8 img { top: -248px; left: -279px; }

.sicon_jq img { top: -310px; left: -0px; }
.sicon_jq1_0 img { top: -310px; left: -31px; }
.sicon_jq1_1 img { top: -310px; left: -62px; }
.sicon_jq1_2 img { top: -310px; left: -93px; }
.sicon_jq1_3 img { top: -310px; left: -124px; }
.sicon_jq1_4 img { top: -310px; left: -155px; }
.sicon_jq1_5 img { top: -310px; left: -186px; }
.sicon_jq1_6 img { top: -310px; left: -217px; }
 
.sicon_achtung img { top: -279px; left: -0px; }
.sicon_visuell img { top: -279px; left: -31px; }
.sicon_aural img { top: -279px; left: -62px; }
.sicon_print img { top: -279px; left: -93px; }
.sicon_ro img { top: -279px; left: -124px; }
.sicon_rw img { top: -279px; left: -155px; }
.sicon_frei img { top: -279px; left: -186px; }
.sicon_leer img { top: -279px; left: -217px; }
.sicon_leer1 img { top: -279px; left: -248px; }
.sicon_leer2 img { top: -279px; left: -279px; }
 
.sicon_xml1 img { top: -186px; left: -403px; }
.sicon_xslt1 img { top: -186px; left: -434px; }
.sicon_xpath1 img { top: -186px; left: -465px; }
 
.sicon_svg1 img { top: -279px; left: -0px; }
.sicon_svg1_1 img { top: -279px; left: -31px; }
.sicon_svg1_2 img { top: -279px; left: -62px; }
.sicon_svg2 img { top: -279px; left: -93px; }
 
.sicon_mathml1 img { top: -279px; left: -186px; }
.sicon_mathml2 img { top: -279px; left: -217px; }
.sicon_mathml3 img { top: -279px; left: -248px; }
 
.sicon_php4 img { top: -0px; left: -0px; }
.sicon_php5 img { top: -0px; left: -31px; }
.sicon_php7 img { top: -0px; left: -62px; }
 
.sicon_perl5_6 img { top: -31px; left: -0px; }
.sicon_perl5_8 img { top: -31px; left: -31px; }
.sicon_perl5_10 img { top: -31px; left: -62px; }
.sicon_perl6 img { top: -31px; left: -93px; }
 
.sicon_java img { top: -341px; left: 0; }
.sicon_java0 img { top: -341px; left: -31px; }
.sicon_java1 img { top: -341px; left: -62px; }
.sicon_java2 img { top: -341px; left: -93px; }
.sicon_java3 img { top: -341px; left: -124px; }
.sicon_java4 img { top: -341px; left: -155px; }
.sicon_java5 img { top: -341px; left: -186px; }
.sicon_java6 img { top: -341px; left: -217px; }
.sicon_java7 img { top: -341px; left: -248px; }
.sicon_java8 img { top: -341px; left: -279px; }

.sicon_as1 img { top: -62px; left: -0px; }
.sicon_as2 img { top: -62px; left: -31px; }
.sicon_as3 img { top: -62px; left: -62px; }
 
.sicon_flash2 img { top: -93px; left: -0px; }
.sicon_flash3 img { top: -93px; left: -31px; }
.sicon_flash4 img { top: -93px; left: -62px; }
.sicon_flash5 img { top: -93px; left: -93px; }
.sicon_flash6 img { top: -93px; left: -124px; }
.sicon_flash7 img { top: -93px; left: -155px; }
.sicon_flash8 img { top: -93px; left: -186px; }
.sicon_flash9 img { top: -93px; left: -217px; }
.sicon_flash10 img { top: -93px; left: -248px; }
 
.sicon_sl1 img { top: -124px; left: -0px; }
.sicon_sl2 img { top: -124px; left: -31px; }
.sicon_sl3 img { top: -124px; left: -62px; }
.sicon_sl4 img { top: -124px; left: -93px; }
 
.sicon_ap1_3 img { top: -155px; left: -0px; }
.sicon_ap2_0 img { top: -155px; left: -31px; }
.sicon_ap2_2 img { top: -155px; left: -62px; }
.sicon_ap2_4 img { top: -155px; left: -93px; }
 
.sicon_iis1 img { top: -186px; left: -0px; }
.sicon_iis2 img { top: -186px; left: -31px; }
.sicon_iis3 img { top: -186px; left: -62px; }
.sicon_iis4 img { top: -186px; left: -93px; }
.sicon_iis5 img { top: -186px; left: -124px; }
.sicon_iis5_1 img { top: -186px; left: -155px; }
.sicon_iis6 img { top: -186px; left: -186px; }
.sicon_iis7 img { top: -186px; left: -217px; }
.sicon_iis7_5 img { top: -186px; left: -248px; }
 
.sicon_cgi1_0 img { top: -217px; left: -0px; }
.sicon_cgi1_1 img { top: -217px; left: -31px; }
 
.sicon_http1_0 img { top: -217px; left: -62px; }
.sicon_http1_1 img { top: -217px; left: -93px; }
.sicon_http2 img { top: -217px; left: -155px; }
 
.sicon_ssl1 img { top: -248px; left: -62px; }
.sicon_ssl2 img { top: -248px; left: -93px; }
.sicon_ssl3 img { top: -248px; left: -124px; }
 
.sicon_tls1_0 img { top: -248px; left: -155px; }
.sicon_tls1_1 img { top: -248px; left: -186px; }
.sicon_tls1_2 img { top: -248px; left: -217px; }
 
.sicon_ssi img { top: -248px; left: -31px; }
.sicon_ftp img { top: -217px; left: -124px; }
.sicon_mime1 img { top: -248px; left: -0px; }

.sicon_android img { top: -310px; left: -0px; }
.sicon_sass img { top: -310px; left: -31px; }

/* Vorlage Cursordemo */
.cursordemo { 
  padding: 0 2em 0 .2em;
  border: thin solid;
  font-weight: bold;
  background: #e8ddca;
}

/* Vorlagen zur Begriffsklärung */
.vorlage_bk {
  margin: 10px 0;
  padding-left: 10px;
  border: thin solid #c62100;
  border-left-width: 10px;
  border-radius: 0 .7em .7em;
  background-color: #f1f3f4;
}
/* Referenz-Tabellen */
div.flexcontainer {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 60em ) {
  div.flexcontainer {
    flex-direction: column;
  }
}
div.wrapper { /* kann irgendwann weg */
  width: 60%;
  min-width: 600px;
  display: inline-block;
}
div.wrapper .note-box-example {
  max-width: 600px;
}
table.reference {
  margin-top: 0; 
  margin-right: 0; 
  border: 0 none;
  background: transparent;
}
@media (max-width: 60em ) {
  table.reference {
    width: 100%;
  }
}
table.reference tr th,
table.reference tr td {
  padding: .3em .7em;
}
table.reference .sicon, table.reference img {
        vertical-align: middle;
}
table.reference ul {
  margin-left: .8em;
}
table.attribute-reference {
	width: 60%;
	min-width: 600px;
}
table.attribute-reference > caption {
        background: #f1f3f4;
        border: 1px solid #d5d5d5;
        border-bottom: none;
        padding: 0.5em 1em;
}
table.html5-element-reference .syntax p {
        background-color: #fdfcf3;
        border: 1px dashed #e7c157;
        color: #000000;
        font-family: monospace;
        font-size: 1.2em;
        line-height: 1.1em;
        padding: .8em 1em;
}
.wrapper > table {
  width: 100%;
}

/* Tabelle Hilfe:Farbtabelle */

table.farbtabelle {
        border-collapse: separate;
        border-spacing: .2em;
}
table.farbtabelle tr th, 
table.farbtabelle tr td {
        padding: 0.4em 1em;
        text-align: center;
}
table.farbtabelle tr td:nth-child(2) {
        text-align: left;
}

/* Tabelle JavaScript-Attribute */
table.js-attr caption {
  text-align: left;
  font-weight: bold;
  margin-bottom: 1em;
}
table.js-attr td {
  background-color: #dce5ee;
  padding: .25em 2em .25em .5em;
}
table.js-attr td:first-child {
  background-color: #cdd8e4;
}
table.js-attr tr:first-child td:last-child {
  border-top-right-radius: .5em;
}
table.js-attr tr:last-child td:first-child {
  border-bottom-left-radius: .5em;
}
table.js-attr tr:last-child td:last-child {
  border-bottom-right-radius: .5em;
}


@media (max-width: 60em ) {
	.tocright, .aside {
		width: 100%;
		margin: 0;
		padding: 0;
		text-align: center;
	}
	.aside .toc > b {
		display: block;
	}
	.aside ul {
		display: inline;
		margin: 0!important;
		padding: 0!important;
	}
	.aside li {
		display: inline;
		margin: 0!important;
		padding: 0!important;
	}
	.aside li a::after, .aside li b::after, .aside li strong::after {
		content: url("/skins/Selfhtml/images/bullet.gif");
		padding: 0 .2em 0 .4em;
		white-space: nowrap;
	}
        .aside li b > a::after {
                content: "";
                padding: 0;
        }
	.aside .toc > ul:first-of-type > li:first-of-type > a::before,
        .aside .toc > ul:first-of-type > li:first-of-type > b::before {
		content: url("/skins/Selfhtml/images/bullet.gif");
		padding: 0 .4em 0 .2em;
	}
}

dl#browsersupport {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cg style='fill:none; stroke: currentColor; stroke-width: 25;stroke-linejoin: round;'%3E%3Ccircle cx='500' cy='500' r='475' /%3E%3Cpath d='M30,500 h950 m-475,-475 v950 c350,-166 350,-782 0,-950 c-350,166 -350,782 0,950 M140,200 c200,110 520,110 720,0 M140,800 c200,-110 520,-110 720,0 ' /%3E%3C/g%3E%3C/svg%3E");
	background-position:left;
	background-repeat: no-repeat;
  margin-left: 1em;	
	padding-left: 3em;	
	float: right;
	clear: right;
}

@media (prefers-color-scheme: dark) {
	dl#browsersupport {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cg style='fill:none; stroke: white; stroke-width: 25;stroke-linejoin: round;'%3E%3Ccircle cx='500' cy='500' r='475' /%3E%3Cpath d='M30,500 h950 m-475,-475 v950 c350,-166 350,-782 0,-950 c-350,166 -350,782 0,950 M140,200 c200,110 520,110 720,0 M140,800 c200,-110 520,-110 720,0 ' /%3E%3C/g%3E%3C/svg%3E");
	}
}

/* Cards */

.cards-container { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(17em, 1fr));
  gap:2em;
}
.cards-container > * { /* All children: p a, div or img */
  margin: 0;
  padding: 0;
  align-items: stretch;
}
.cards-container div a {
  text-decoration:none;
}
.cards-container > p > a {
  align-items: stretch;
}

.cards-container a:hover > span,
.cards-container a:focus > span,
.cards-container a:hover > img,
.cards-container a:focus > img {
  box-shadow: 3px 3px 15px;
}
.cards-container a> span {
  display: inline-block;
  width: 100%;
  height:100%;
  box-sizing: border-box;
  border:medium solid; 
  border-radius:0 0.5em 0.5em;
  padding: 1em; 
}


/* Ausblenden der Diskussionsseiten */
#pt-anoncontribs,
#pt-anontalk,
#pt-mycontris,
#pt-watchlist,
#ca-talk {
  display:none;
}