MediaWiki:Common.css

/**************************************************************
* Allgemeine Variablen und andere                             *
**************************************************************/
:root {	--sbox-lightgrey: #f8f9fa; }
pre:hover { border-color: #a2a9b1; }

/************************************************************** 
* Das folgende CSS wird für alle Benutzeroberflächen geladen  *
* Einstellungen für Magyra-Weltkarte                          *
**************************************************************/
div.magyra { 
    padding: 1em; 
    background-color: #009acd; 
    color: #eee;
}
div.magyra table { width: 100%; }
div.magyra a { color: #eee; }

/**************************************************************
* Einstellungen für Vorlage:Angebot                           *
**************************************************************/
table.angebot .tw {
    padding: 0 5px 15px 5px;
    background-image: url(http://unitopia.intelligense.de/images/f/f8/Angebot-tw.gif);
    font-weight: bold;
    white-space: nowrap;
    text-align: center;
}
table.angebot .lw { background-image: url(http://unitopia.intelligense.de/images/2/2f/Angebot-lw.gif); }
table.angebot .mw { background-image: url(http://unitopia.intelligense.de/images/4/41/Angebot-mw.gif); }
table.angebot .rw { background-image: url(http://unitopia.intelligense.de/images/c/c5/Angebot-rw.gif); }
table.angebot .bw { background-image: url(http://unitopia.intelligense.de/images/4/44/Angebot-bw.gif); }
table.angebot .bl,
table.angebot .br { line-height: 0 }

div.frosch { width: 314px; }
div.frosch div.h {
    width: 314px;
    height: 31px;
    margin: 0;
    padding: 0;
    background-image: url(http://unitopia.intelligense.de/images/e/ec/Angebot1.gif);
    background-repeat: no-repeat;
    background-position: bottom;
}

/**************************************************************
* Einstellungen für Facebook-Like-Box                         *
**************************************************************/
div.fb_iframe_widget {
    width: 10em;
    margin-bottom: 1em;
    overflow: hidden;
}
div.fb_iframe_widget iframe { max-width: 160px !important; }

/**************************************************************
* Einstellungen für Vorlage:Todo                              *
**************************************************************/
.todo {
    padding: 1em;
    border: 1px solid #ed161a;
    background-color: #ed161a05; 
}
    .todo img {
        float: left;
        width: 60px;
        height: auto;
        margin-right: 1em;
        clear: both;
}
    .todo hr { background-color: #ed161a; }

/* Verkleinerte Version in Tabellen und Asciikarten */
table div.todo,
.kascii div.todo {
    margin-top: .38em;
    padding: .2em .5em;
}
table div.todo img,
.kascii div.todo img { 
    width: 20px;
    margin-right: .5em;
}
table div.todo span,
.kascii div.todo span { display: none; }

/**************************************************************
* Einstellungen für die Vorlage:Hidden                        *
**************************************************************/
div.fabenhidden .mw-collapsible-toggle { float: left; }
div.hidden { 
    width: auto;
    min-height: 21px;
    margin: -1px 0;
    border: 1px solid #aaa;
    background-color: var(--sbox-lightgrey);
}
div.hidden.hul { margin-left: 1.5em; }
div.hidden span.mw-collapsible-toggle,
div.hiddenfr { 
    float: right;
    padding-top: 0.15em;
    padding-right: 0.5em;
}
div.hiddenfr + ul:first-of-type { margin-left: 0; }
div.hiddenfr + ul:first-of-type li { padding-left: 0.2em; }
div#content div.hiddenfr + p:first-of-type {
    margin: 0;
    padding: 0.3em 0 0.2em 0.5em;
}
div.hidden .fabenhidden { padding: 0 0.5em 0.5em; }
div.hidden .fabenhidden pre { margin: 0; }
div.hidden .fabenhidden:after { clear: both; }

/**************************************************************
* Einstellungen für die Vorlage:Subpages                      *
**************************************************************/
div.subpages {
    padding: 0 2px;
    border: 1px solid #A2A9B1;
    background-color: var(--sbox-lightgrey);
}
div.subpages div.mw-prefixindex-body {
    columns: unset;
    -moz-columns: unset;
    -webkit-columns: unset;
    break-inside: unset;
     page-break-inside: unset;
    -webkit-column-break-inside: unset;
}
div.subpages ul.mw-prefixindex-list,
div.subpages div.mw-prefixindex-body ul.mw-prefixindex-list {
    margin: 0;
    padding: 5px;
    list-style: none;
    columns: 20em 4;
    -moz-columns: 15em 5;
    -webkit-columns: 15em 5
     break-inside: avoid-column;
     page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
}
div.subpages ul.mw-prefixindex-list li:before { 
    content: "» ";
    font-weight: bold;
    font-size: 1.25em;
    color: #00528c;
}
div.subpages ul.mw-prefixindex-list li .allpagesredirect { display: inline-block; }

/**************************************************************
* Einstellungen für die Vorlage:Info                          *
**************************************************************/
#info .prelook + p:first-of-type {
    margin: 0;
    line-height: 0;
}

#info table.wikitable { 
    display: inline-block;
    margin: 0.75em 0 0 0;
    border: none;
    padding: 0;
    background-color: transparent;
    vertical-align: top;
}
#info table.wikitable tr:first-of-type td { border-top: none; }
#info table.wikitable tr:last-of-type td { border-bottom: none; }
#info table.wikitable tr td:first-of-type { border-left: none; }
#info table.wikitable tr td:last-of-type {
    border-right: none;
    vertical-align: bottom;
}

#info .tipp {
    position: relative;
        top: -1px;
        right: 4px;
    padding: 0;
    cursor: help;
    font-size: 14px;
    color: darkgray;
}
#info .tipp span { display: none; }
#info .tipp:hover span {
    position: absolute;
        top: 25px;
        left: 20px;
    display: block;
    width: 300px;
    border: 1px solid grey;
    padding: 5px;
    font-size: initial;
    color: initial;
    background-color: lightgoldenrodyellow;
    box-shadow: 10px 10px 20px 0px grey;
}

/**************************************************************
* Einstellungen für die Vorlage:Info/Navbox                   *
* Wenn eingebunden, dann Unterkategorien ausblenden           *
**************************************************************/
#navbox div div { 
    display: table-cell;
    width: 33.63%;
}
#navbox ul {
    display: flex;
    flex-wrap: wrap;
}
    #navbox ul li {
        flex-basis: 33.333333%;
        min-width: 140px;
    }
	
.page-Kategorie_Abenteuer #mw-subcategories,
.page-Kategorie_Engel #mw-subcategories,
.page-Kategorie_Gilde #mw-subcategories,
.page-Kategorie_Rätsel #mw-subcategories,
.page-Kategorie_Spiele #mw-subcategories  { display: none; }

/**************************************************************
* Einstellungen für die Vorlage:Info/Navhead                  *
* Die Vorlage nutzt zudem noch id="catlinks" class="catlinks" *
**************************************************************/
.navhead { margin-top: 0; border-top-width: 0; }
.navhead:first-of-type,
div.subpage:first-of-type + .navhead { 
    margin-top: -8px;
    border-top-width: 1px;
}
.navhead ul { margin: 0; }
.navhead ul li:nth-child(1) { padding-left: 0; }

/**************************************************************
* Einstellungen für die Navhead-Bar                           *
**************************************************************/
#navhead {
    width: 100%;
    margin-bottom: 5px;
    padding: 5px;
    border: 1px solid #AAA;
    border-spacing: 0;
    background-color: var(--sbox-lightgrey);
    font-size: 95%;
    text-align: left;
}

/**************************************************************
* Einstellungen für Vorlage:Karte                             *
**************************************************************/
div.map {
    width: 80%;
    margin: 50px;
    padding: 10px -10px 10px 20px;
    background-color: #000;
    color: #FFF;
    font-family: Courier New;
    font-size: 12px;
}

/**************************************************************
* Einstellungen für die Vorlage:Karte/Ascii                   *
**************************************************************/
.kascii {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    border: 1px solid #aaa;
    background-color: var(--sbox-lightgrey);
}
.kascii div.toccolours {
    width: 100%;
    margin: 2px;
    border: none;
    padding: 0;
    font-family: monospace,Courier;
    font-size: smaller;
}
    .kasciik { 
        display: flex;
        flex: 1 1 auto;
        border-top: 1px solid #aaa;
        border-right: 1px solid #aaa;
    	padding: 1.25em 1.75em;
        align-items: center;
    	line-height: 1.25em;
        letter-spacing: 0.05em;
    	font-family: monospace,Courier;
    	white-space: pre;
    }
    .kasciil { 
	flex: 1000 1 auto;
        border: none;
        border-top: 1px solid #aaa;
	padding: 0 1em;
	line-height: normal;
    	font-family: monospace,Courier;
    	white-space: pre;
    }
    .kasciiz {
    	flex: 10000 1 auto;
    }
    .kasciil p,
    .kasciil pre,
    .kasciik pre {
        margin: 0;
        border: none;
        padding: 0;
        line-height: 1.3em;
    }

/**************************************************************
* Einstellungen für die Vorlage:Karte/History                 *
**************************************************************/
div.history {
    width: 80%; 
    margin: 1.5em auto; 
    padding: 1em; 
    border: 4px solid #7F3300; 
    background-color: #fff;
    text-align: left;
}

/**************************************************************
* Einstellungen für die Vorlage:Startbox                      *
**************************************************************/
#startbox {
    float: right;
    margin-bottom: 1em;
    margin-left: 1.5em;
}
    .startbox {
        width: 259.5px;
        margin-top: -65px;
        padding: 10px 0 5px;
        border: 1px solid #AAA;
        background-color: var(--sbox-lightgrey);
    }
    .startbox ul {
        display: flex;
        flex-wrap: wrap;
    }
    .startbox ul:first-child::after,
    .startbox ul:nth-child(2)::after {
        content: '';
        width: 256px;
        margin-left: -20px;
        border-bottom: 1px solid #AAA;
    }
    .startbox ul li:nth-of-type(2n+1) { flex: 1 1 62%; }
    .startbox ul li:nth-of-type(2n+0) { flex: 1 1 38%; }

/**************************************************************
* Einstellungen für Vorlage:Kompass, -start & -kurs           *
**************************************************************/
.kompass {
    min-width: 485px;
    margin: 5px 20px 0 0;
    background-color: var(--sbox-lightgrey);
    border: 1px solid #AAA;
}
.kompassbild {
    float: right;
    margin: 0 10px -75px 0;
    padding-top: 5px;
}
.kompass table { width: 100%; }
    .kompass .tr-second td { border-bottom: 1px solid #AAA; }
    .kompass .tr-third { vertical-align: top; }
        .kompass .tr-third .td-first { padding-left: 10px; }
        .kompass .tr-third .td-second,
        .kompass .tr-third .td-fourth { 
            padding-right: 10px;
            text-align: left; 
        }
            .kompass .tr-third .td-second dl,
            .kompass .tr-third .td-fourth dl {
                -webkit-margin-before: 0.3em;
                margin-bottom: 0; 
                margin-left: 0;
            }
                .kompass .tr-third .td-second dd,
                .kompass .tr-third .td-fourth dd {
                    margin-bottom: 0; 
                    -webkit-margin-after: 0.09825em;
                    margin-left: 0;
                }
    .kompass .tr-fourth td { border-top: 1px solid #AAA; }

/**************************************************************
* Einstellungen für Vorlage:Tab                               *
**************************************************************/
.mw-collapsible-content div.vtab1 { margin-top: 1px; }

.vmtab .kascii {
    margin: -0.25em;
    border: none;
}
.vmtab .noresize { margin: 0.25em; }

span.vtab1,span.vtab { 
    display: inline-block; 
    position: relative;
    top: 1px;
    margin-right: 0.277em;
    border: 1px solid #aaa;
    padding: 0.5em;
    background-color: #fff;
    line-height: 0.95em;
}
span.vtab1 { float: left; }
span.vtab1,span.vtab:target {
    top: 2px;
    border-bottom: 0;
    background-color: var(--sbox-lightgrey);
    font-weight: bold;
}
span.vtab:target ~ span.vtab1 {
    top: 1px;
    border-bottom: 1px solid #aaa;
    background-color: #fff;
    font-weight: normal;
}

div.vtab { display: none; }
div.vtab1 { 
    border: 1px solid #aaa;
    padding: 0.25em;
    background-color: var(--sbox-lightgrey);
}

span.vtab:target ~ div.vtab1 { display: none; }
span.vtab2:target ~ div.vtab2,span.vtab3:target ~ div.vtab3,span.vtab4:target ~ div.vtab4,span.vtab5:target ~ div.vtab5,
span.vtab6:target ~ div.vtab6,span.vtab7:target ~ div.vtab7,span.vtab8:target ~ div.vtab8,span.vtab9:target ~ div.vtab9,
span.vtab10:target ~ div.vtab10,span.vtab11:target ~ div.vtab11,span.vtab12:target ~ div.vtab12,span.vtab13:target ~ div.vtab13,
span.vtab14:target ~ div.vtab14,span.vtab15:target ~ div.vtab15,span.vtab16:target ~ div.vtab16,span.vtab17:target ~ div.vtab17,
span.vtab18:target ~ div.vtab18,span.vtab19:target ~ div.vtab19,span.vtab20:target ~ div.vtab20 { 
    display: block;
    border: 1px solid #aaa;
    padding: 0.25em;
    background-color: var(--sbox-lightgrey);
    clear: left;
}

/**************************************************************
* Clearfix-Klasse                                             *
**************************************************************/
.clearfix:after { 
    content: " ";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

/**************************************************************
* Einstellungen für gewisse Situationen                       *
**************************************************************/
.red { color: #ff0000; }
.redbox { padding: 5px; border: 2px solid #ff0000; background-color:#fff; }
.green { color: #267f00; }
.greenbox { padding: 5px; border: 2px solid #00e533; background-color:#fff; }
.blue { color: #0000ff; }
.bluebox { padding: 5px; border: 2px solid #0000ff; background-color:#fff; }

/**************************************************************
* Einstellungen für MediaWiki:Loginreqpagetext                *
**************************************************************/
.Loginreqpagetext ul { list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="2.5"/></svg>'); }

/**************************************************************
* Einstellungen für Erfahrung Spiele und Rätsel               *
**************************************************************/
#erfahrung {
    margin: 0;
    line-height: inherit;
}
#erfahrung li { margin: 0 0 0 31px; }
#erfahrung .mw-empty-elt { display: list-item; }

.stabelle tr td:nth-of-type(4), .stabelle tr td:nth-of-type(5),
.stabelle tr td:nth-of-type(6), .stabelle tr td:nth-of-type(7),
.rtabelle tr td:nth-of-type(4) { text-align: center; }

/**************************************************************
* Einstellungen für Vorlage:Subpage und id=contentSub         *
**************************************************************/
div.subpage {
    font-size: 84%;
    line-height: 1.2em;
    margin: 0 0 1.4em 1em;
    color: #545454;
    width: auto;
}


/**************************************************************
* Einstellungen für Vorlage:Stammbaum und Stambaum/step2      *
**************************************************************/
.stammbaum {
    border: 0;
    border-spacing: 0;
    background-color: transparent;
}
.stammbaum td.zelle {
    padding: 0.2em 0.4em;
    border: 1px solid #AAA;
    background-color: var(--sbox-lightgrey);
}
.stammbaum td.zelle:hover { border-color: #0645ad; }
.stammbaum div.w1 { width: 1em; }
.stammbaum div.w2 { width: 2em; }
.stammbaum div.h1 { height: 1em; }
.stammbaum div.h2 { height: 2em; }
.stammbaum div span { font: 1px/1px serif; }

/**************************************************************
* Einstellungen für Vorlage:Blauglänzend(/Waffen) - Tabellen  *
**************************************************************/
.blauglaenzend { text-align: left; }
.blauglaenzend tbody tr th { background-color: #0080ff; }
.blauglaenzend td.hiddenhead {
    padding: 0;
    border-right: hidden;
    border-left: hidden;
    text-align: left;
}
.blauglaenzend td.hiddentop { border-top: hidden; }

/**************************************************************
* Einstellungen für Vorlage:Headlines                         *
**************************************************************/
.headlines {
    margin: .3em 0 0 0;
    border-bottom: none;
    padding: .5em 0 0 0;
    line-height: 1.6;
}
.h1.headlines {
    height: 32px;
    margin: 0 0 .25em 0;
    border-bottom: 1px solid #aaa;
    font-size: 1.8em;
}
.h2.headlines {
    height: 27px;
    margin: 1em 0 .25em 0;
    border-bottom: 1px solid #aaa;
    font-size: 1.5em;
}
.h3.headlines {
    height: 26px;
    font-size: 1.17em;
}
.h4.headlines,
.h5.headlines,
.h6.headlines {
    height: 22px;
    font-size: 100%;
}

/**************************************************************
* <pre>-Tag im Kleinformat (+ falls in einer Tabelle)         *
**************************************************************/
pre.tiny {
    margin: 0;
    padding: 0 1em;
    line-height: 1.45;
}

table.tinytable td { padding: 0; }
table.tinytable dl { margin: 0; }

/**************************************************************
* Einstellungen für Vorlage:Spalten                           *
**************************************************************/
.spalten {
    width: 100%;
    margin: 0.5em 0;
    column-count: 3;
    column-width: 20em;
}
#mw-content-text .spalten dl,
.spalten ul {
    margin-top: 0;
    margin-bottom: 0;
}
.spalten.fitcontent {
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
}
-spalten h3,
.spalten h4,
.spalten h5 { margin-top: 0; }