Template:Quest: Difference between revisions

From Elwiki
VisualWikitext
No edit summary
No edit summary
Line 1: Line 1:
<includeonly>{{#ifeq:{{{Generic|}}}|true|<div class="clearfix"></div>}}{{Segment
/* Color scheme */
| SectionCls=mw-collapsed mw-collapsible {{#ifeq:{{{Generic|}}}|true|generic-quest}}
:root {
| hStyles=font-size: 1.25em; padding: 7px; background-color: {{{HeaderColor|}}}; font-weight: 600; {{{HeaderStyles|}}}
    --accent-color: #00adda;
| hCls={{{HeaderCls|}}} {{#ifeq:{{{Generic|}}}|true|generic-quest-header}}
    --border-color: #d9d9d9;
| hStyle=border: 0; display: flex; align-items: center;
    --border-color-tone-2: #bbbbbb;
| Title0=<span style="margin-right: 6px">[[File:Quest Icon - {{#switch:{{{QuestType|}}}
    --theme-tone-2: #f5f5f5;
  | General|Repeatable|Daily|Daily Random|Weekly|Weekly Random|Monthly|Guild|Mentor|Character|Competition|Wedding|#default=General
    --theme-tone-3: #ededed;
  | Story|SideStory=Story
    --theme-tone-4: #f7f7f7;
  | Skill=Skill
    --theme-tone-5: #f4f5f7;
  | Event=Event
    --theme-tone-6: #f9fafb;
  | Class Change|Transcendence|Master=Class Change
    --theme-tone-7: #eaecf0;
  | PC Bang=PC Bang
    --text-color: black;
}}.png]]</span>{{{QuestName|}}}
    --text-color-invert: white;
| Style0=padding: 0;
}
| Content0=<span style="display: none;">{{</span>
 
{| style="text-align: left; width: 100%; margin: 0; padding: 0; border-style: solid hidden hidden;" class="wikitable"
::selection {
|-
    background-color: var(--accent-color);
! width=30% | Quest Acceptance Prerequisites
    color: white;
! width=30% | Objectives
}
! width=40% | Description
 
|-
::-moz-selection {
| width=30% |
    background-color: var(--accent-color);
{{{Requirement|* No requirements needed}}}
    color: white;
| width=30% |
}
{{{Objectives|}}}
 
| width=40% |
body {
{{{Description|}}}
    background-color: var(--theme-tone-7);
|-
}
{{#if:{{{QuestAD|}}}|
 
! colspan=3 {{!}} Quest Acceptance Dialogue {{#ifeq: {{{Dialogue|}}}|true|(No longer available)|}}
/* Font */
{{!}}-
html {
{{!}} colspan=3 {{!}}
    font-size: 107%;
{{{QuestAD|'''(None)'''}}}
    overflow-y: overlay;
|}}
}
|-
 
{{#if:{{{QuestCD|}}}|
html *:not(.wikiEditor-ui *, .mw-editfont-monospace),
! colspan=3 {{!}} Quest Completion Dialogue {{#ifeq: {{{Dialogue|}}}|true|(No longer available)|}}
#p-logo-text a {
{{!}}-
    font-family: "Segoe UI", "Frutiger", "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", "Arial", sans-serif;
{{!}} colspan=3 {{!}}
}
{{{QuestCD|'''(None)'''}}}
 
|}}
/* Generic elements */
|}
hr {
{| style="text-align: left; width: 100%; margin: 0%; padding: 0; border-style: solid hidden hidden;" class="wikitable"
    border: none;
! colspan=6 | Rewards
    height: 1px;
|-
    background-color: var(--border-color);
! width=10% colspan=2 | [[Currency]]/[[Experience Table|Experience]] !! width=45% colspan=2 | Common Rewards !! width=45% colspan=2 | Selective Rewards
}
|-
 
| ED  || {{{ED|0}}} || width="1%" | {{{CImage1|[[File:NOIMAGE.png]]}}} || {{{CReward1|N/A}}} || width="1%" | {{{SImage1|[[File:NOIMAGE.png]]}}} || {{{SReward1|N/A}}}
.main-accent {
|-
    color: var(--accent-color);
| EXP || {{{EXP|0}}} || width="1%" | {{{CImage2|[[File:NOIMAGE.png]]}}} || {{{CReward2|N/A}}} || width="1%" | {{{SImage2|[[File:NOIMAGE.png]]}}} || {{{SReward2|N/A}}}
}
|-
 
| AP  || {{{AP|0}}} || width="1%" | {{{CImage3|[[File:NOIMAGE.png]]}}} || {{{CReward3|N/A}}} || width="1%" | {{{SImage3|[[File:NOIMAGE.png]]}}} || {{{SReward3|N/A}}}
.clearfix {
|}
    clear: both;
<span style="display:none">}}</span>
}
}}</includeonly><noinclude>
 
=== Code Format ===
b,
<nowiki>{{Quest
th {
|HeaderColor=
    font-weight: 600;
|QuestType=
}
|QuestName=
 
|Requirement=
.wikiEditor-ui-toolbar {
|Objectives=
    background-image: none;
|Description=
    background-color: var(--theme-tone-5);
|QuestAD=
}
|QuestCD=
 
|ED=
.tone-7 {
|EXP=
    background-color: var(--theme-tone-7);
|AP=
}
|CImage1=
 
|CReward1=
.tone-4 {
|CImage2=
    background-color: var(--theme-tone-4);
|CReward2=
}
|CImage3=
 
|CReward3=
.color-normal {
|SImage1=
    color: var(--text-color);
|SReward1=
}
|SImage2=
 
|SReward2=
/* header */
|SImage3=
div.color-left,
|SReward3=
div.color-middle,
}}
div.color-right {
</nowiki>
    background-color: white;
</noinclude>
}
 
/* Logo */
#p-logo {
    background: #f8f9fa;
    border-radius: 5px 5px 0 0;
}
 
#p-logo-text a {
    padding: 0;
}
 
.mw-wiki-logo.fallback {
    height: 8em;
    background-position: bottom center;
}
 
#mw-site-navigation .sidebar-chunk {
    margin-top: 0;
    border-top: 0;
}
 
/* border */
div.mw-body h1.firstHeading,
div#mw-page-header-links li.selected {
    border-color: #c4d2d7;
}
 
/* Topbar */
#personal span {
    font-weight: 600;
}
 
#mw-header-hack {
    border-bottom: 1px solid var(--border-color);
}
 
#personal-inner {
    border-radius: 5px;
}
 
#personal h2 {
    padding-top: 7px;
}
 
#searchButton {
    background-position: top right;
    box-shadow: none;
    background-image: url("https://elwiki.net/wiki/images/e/e4/UI_-_Search.png");
    background-size: 34px;
    right: 0;
    margin-top: -1px;
}
 
#searchButton:hover {
    filter: brightness(1.1);
}
 
#mw-searchButton {
    display: none;
}
 
#searchInput {
    padding: 1em;
    transition: box-shadow 0.3s;
    border-color: var(--border-color);
    letter-spacing: 0.7px;
}
 
#searchInput:focus {
    outline: none;
    box-shadow: 2px 2px 5px rgb(0 0 0 / 20%);
}
 
#simpleSearch {
    border-radius: 5px;
    box-shadow: none;
}
 
#p-logo-text a {
    letter-spacing: 1.5px;
    font-weight: 600;
    color: rgb(60, 60, 60);
}
 
#p-logo-text a {
    display: flex;
    place-items: center;
    place-content: center;
    text-decoration: none !important;
    margin-top: -5px;
}
 
a#p-banner::before {
    content: "";
    height: 40px;
    width: 39px;
    display: block;
    background-image: url(https://elwiki.net/wiki/images/8/88/UI_-_Hedgehog.png);
    background-repeat: no-repeat;
    background-color: transparent;
    position: relative;
    margin-top: 0;
}
 
.suggestions-result-current {
    background: var(--accent-color) !important;
}
 
.highlight {
    font-weight: 600;
}
 
#personal h2 {
    background-image: none;
    padding-top: 6px;
    padding-left: 5px;
    letter-spacing: .75px;
}
 
#personal h2::after {
    width: 0;
    height: 0 !important;
    border: 0 solid transparent;
    border-left-width: 6px;
    border-right-width: 6px;
    border-top: 6px solid var(--border-color-tone-2);
    background-image: none;
    position: relative;
    top: -4px;
    margin-left: 10px;
}
 
#p-personal-label {
    display: none;
}
 
#personal-inner {
    padding: 0 !important;
}
 
#personal .dropdown .mw-portlet-body {
    margin-bottom: 0;
}
 
#personal .dropdown li {
    padding: 0;
}
 
#personal .dropdown li a {
    border: 0.25em solid white;
    display: block;
    padding: 0.4em;
    color: var(--text-color);
    border-radius: 6px;
    font-size: 1.02em;
    letter-spacing: 0.03em;
    transition: background-color 0.3s, color 0.2s;
    border-bottom: none;
    text-decoration: none;
}
 
#personal .dropdown li:last-child a {
    border-bottom: 0.25em solid white;
}
 
#personal .dropdown li:hover a {
    background-color: var(--accent-color);
    color: white;
}
 
#mw-wrapper #mw-header .dropdown {
    display: block !important;
    opacity: 0;
    pointer-events: none;
    transform: scale(0);
    transform-origin: top right;
    transition: 0.15s;
}
 
#mw-wrapper #mw-header .dropdown-active .dropdown {
    display: block !important;
    transform: scale(1);
    opacity: 1;
    pointer-events: all;
}
 
.suggestions, .suggestions .suggestions-suggestions-special {
    border-radius: 6px;
}
 
.suggestions .suggestions-results {
    border-radius: 6px 6px 0 0;
}
 
.suggestions .suggestions-result {
    padding: 0.5em 1em;
}
 
.suggestions .suggestions-special {
    padding: 0.5em 1em;
}
 
/* Footer */
 
#mw-footer {
    width: 65vw;
    margin-left: 14em !important;
    margin-right: 16em;
    padding-left: 0;
    padding-right: 0;
}
 
#mw-footer-container {
    width: fit-content;
    margin: auto;
    color: black;
    border: none;
    box-shadow: none;
}
 
#mw-footer-container a,
#mw-footer-container a:hover {
    color: var(--accent-color) !important;
    transition: 0.3s;
    font-weight: 600;
    transition: opacity 0.3s;
}
 
#mw-footer-container a:hover {
    opacity: 0.65;
}
 
/* main container */
#mw-content-container {
    border-bottom: none;
    min-height: 200vh;
}
 
#mw-content {
    border-bottom: none;
}
 
@media screen and (min-width: 1100px) and (max-width: 1340px) {
    #mw-related-navigation {
        display: none !important;
    }
 
    #mw-content {
        margin-left: 0;
        margin-right: 0;
        width: 70vw !important;
    }
 
    #content-bottom-stuff {
        padding: 1em 2em 3em;
        width: 70vw;
        background: var(--theme-tone-6);
        border-radius: 0 0 5px 5px;
        display: block;
    }
 
    #mw-data-after-content {
        background: transparent;
    }
}
 
@media screen and (min-width: 1100px) {
    #mw-content-wrapper {
        margin: 0;
        width: 100% !important;
    }
 
    #mw-content-wrapper {
        margin-left: 14em;
        margin-right: 16em;
        width: 65vw !important;
        min-width: 50%;
    }
 
    #mw-related-navigation {
        position: absolute;
        right: 1em;
    }
 
    #mw-site-navigation {
        position: absolute;
        left: 1em;
    }
 
    #mw-content-block {
        position: relative;
        display: flex !important;
    }
 
    #mw-header-container {
        padding: 0.65em 0 0;
    }
}
 
@media screen and (max-width: 1099px) {
    div#mw-site-navigation {
        z-index: 99;
    }
}
 
@media screen and (max-width: 850px) {
    #mw-content-block {
        background: var(--theme-tone-7);
    }
}
 
/* after content section */
#mw-data-after-content > div {
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 15px;
    place-items: center;
}
 
#mw-data-after-content br {
    display: none;
}
 
#mw-data-after-content {
    background: var(--theme-tone-6);
    border-radius: 0 0 5px 5px;
}
 
#mw-data-after-content a.nn-cmp-show {
    margin-top: 0.8em;
    display: inline-block;
    padding: 5px 10px;
    background-color: var(--theme-tone-7);
    width: fit-content;
    border-radius: 4px;
    font-weight: 600;
    color: black;
    transition: background-color 0.3s, color 0.2s;
    text-decoration: none;
}
 
#mw-data-after-content a.nn-cmp-show:hover {
    background-color: var(--accent-color);
    color: white;
}
 
@media screen and (min-width: 1100px) and (max-width: 1340px) {
    #content-bottom-stuff {
        margin-left: 0;
        display: table-caption;
    }
}
 
/****************************** Checkbox, Radio & Button Styles ******************************/
input,
button {
    position: relative;
}
 
/****************************** Namebox Styles ******************************/
table.nmbox {
    border-collapse: collapse;
    width: 100%;
    clear: both;
    font-size: 85%;
    border: 2px solid #bfdbe3;
    margin: 20px 0;
}
 
.nmbox th:first-of-type {
    width: 80px;
}
 
table.nmbox > tbody > tr > th,
table.nmbox > tbody > tr > td {
    padding: 0.4em 0.8em;
}
 
table.nmbox > tbody > tr > td {
    background-color: #f7fdff;
}
 
table.nmbox > tbody > tr > th {
    background-color: #ebf4f7;
}
 
#p-googleadsense .pBody {
    padding-top: 5px;
    text-align: center;
}
 
/* Collapsible toggle */
.mw-content-ltr .section-border .mw-collapsible-toggle {
    padding-right: 10px;
    position: absolute;
    right: 0;
}
 
/* section */
 
div.section-wrapper {
    padding: 0.5em;
    border-radius: 5px;
    border-width: 2px;
    border-style: solid;
    clear: both;
}
 
table.top-nav {
    border-spacing: 0;
    width: auto;
    margin: 1em;
    text-align: center;
    vertical-align: middle;
}
 
table.section,
table.section-side-column {
    position: relative;
    width: 100%;
    margin: 0;
    border-width: 1px;
    border-style: solid;
    border-spacing: 0;
}
 
table.section > tbody > tr:first-child {
    text-align: center;
    background-color: var(--theme-tone-7);
}
 
table.section > tbody > tr:first-child > th {
    line-height: 1em;
    padding: 0.5em 0;
    text-align: center;
    vertical-align: middle;
    border-width: 1px;
    border-style: solid;
    border-top: none !important;
}
 
table.section > tbody > tr:last-child > td {
    vertical-align: top;
    padding: 0.5em;
    border: none;
    border-bottom: none !important;
}
 
table.section > tbody > tr:first-child > th:first-child,
table.section > tbody > tr:last-child > td:first-child {
    border-left: none !important;
}
 
table.section > tbody > tr:first-child > th:last-child,
table.section > tbody > tr:last-child > td:last-child {
    border-right: none !important;
}
 
table.section > tbody > tr:first-child > th ~ th,
table.section > tbody > tr:last-child > td ~ td {
    border-left: none !important;
}
 
table.section-side-column {
    text-align: center;
}
 
table.section-side-column > tbody > tr > td:first-child {
    width: 50%;
    height: 400px;
    padding: 10px;
}
 
table.section-side-column > tbody > tr > td:last-child {
    border-left: 1px solid #000;
    height: 420px;
    padding: 0;
}
 
table.section-side-column > tbody > tr > td:last-child > table.section > tbody > tr:last-child > td {
    vertical-align: middle;
}
 
table.section-side-column > tbody > tr > td:last-child > table.section {
    text-align: center;
    border: none;
}
 
table.section-side-column > tbody > tr > td:last-child > table.section + table.section {
    border-top-width: 1px;
    border-top-style: solid;
}
 
table.section-border,
table.section-border.section > tbody > tr > th,
table.section-border.section > tbody > tr > td,
.section-border.tabdiv > ul,
.section-border:not(table) {
    border-color: var(--border-color);
    border-width: 1px !important;
}
 
.section-border-top-radius {
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
}
 
.section-border-bottom-radius {
    -webkit-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
}
 
table.section-border.section > tbody > tr > th {
    background-color: var(--theme-tone-7);
}
 
.section-border .wikitable > * > tr > th {
    border-color: var(--border-color);
    background-color: var(--theme-tone-5);
}
 
.section-border .wikitable > * > tr > td {
    border-color: var(--border-color);
}
 
.wikitable > * > tr > td {
    background-color: #fff;
}
 
.wikitable > * > tr > th {
    border-bottom-width: 1px;
}
 
.tabber-new .wikitable tr th {
    background-color: var(--theme-tone-2);
}
 
table.section-border {
    margin: 10px 0;
    border-radius: 4px;
}
 
.section-border-right td:first-of-type {
    border-right: 1px solid var(--border-color) !important;
}
 
.section-tabber .section-border {
    margin-top: 5px;
}
 
.section-tabber .tabber-ul {
    margin-top: 5px;
}
 
/* section - character */
.mw-content-ltr .section-border.section-characters .mw-collapsible-toggle {
    padding-top: 0;
}
 
.section-characters .textfloat a + a {
    font-size: 1.3em;
    margin-left: 7px;
}
 
.section-characters th {
    padding: 10px !important;
    border-radius: 3px;
}
 
.section-characters table table td {
    font-size: 1.085em;
    font-weight: 600;
}
 
.section-characters table .textfloat th {
    color: white !important;
}
 
/* tabber section design */
 
.section-tabber .tabber-new ul:not(.tabber-ul) li {
    display: block;
}
 
.section-tabber .tabber-new ul:not(.tabber-ul) li a {
    color: black !important;
    padding: 5px 10px;
    background: #eee;
    margin: 5px 0;
    display: block;
    font-weight: 600;
    border-radius: 5px;
    transition: background-color 0.3s;
}
 
.section-tabber .tabber-new ul:not(.tabber-ul) li a:hover {
    background: #e3e3e3;
}
 
.section-tabber .tabber-new ul:not(.tabber-ul) li a {
    text-decoration: none !important;
}
 
.section-tabber .tabber-new ul:not(.tabber-ul) {
    margin-left: 5px;
    margin-right: 5px;
}
 
.section-tabber .tabber-content {
    padding: 0 5px 5px 5px !important;
}
 
.section-fields > tbody > tr > th {
    color: black !important;
    text-shadow: none !important;
}
 
/* floating text */
 
.textfloat {
    color: #fff;
    text-shadow: 1px 1px 1px #000;
}
 
table.section-border .textfloat:not(.section-characters table .textfloat) {
    text-shadow: none;
    color: black;
    font-weight: 600;
}
 
table.section-border .textfloat th {
    font-weight: 600;
}
 
.section-tabber table tr.textfloat th {
    color: white;
    text-shadow: 1px 1px 1px #000;
}
 
.section-tabber table tr.textfloat th a {
    vertical-align: middle;
    font-size: 1.15em;
}
 
.textfloat a,
.textfloat a:link,
.textfloat a:visited,
.textfloat a:hover,
.textfloat a:active {
    color: inherit;
}
 
th {
    background-color: inherit;
}
 
/**
    Bilibili Sidebar Style
**/
.portal h3 {
    background-image: none !important;
    padding: 0 0 3px 0 !important;
}
 
.portal h3,
.portal h3:hover,
.portal h3:active,
.portal h3:link,
.portal h3:visited {
    font-weight: bolder !important;
    text-decoration: none !important;
}
 
.portal li > ul {
    position: absolute;
    visibility: hidden;
    left: 100%;
    background-color: #fff;
    margin-top: -1em !important;
    margin-left: -10px !important;
    min-width: 180px;
    max-width: 230px;
    opacity: 0;
    -webkit-box-shadow: 10px 10px 10px #ccf;
    -moz-box-shadow: 10px 10px 10px #ccf;
    box-shadow: 10px 10px 10px #ccf;
}
 
.portal li:hover > ul {
    opacity: 1;
    visibility: visible;
}
 
.portal ul,
.portal li,
.portal a,
.portal strong.selflink {
    display: block;
}
 
.portal a,
.portal strong.selflink {
    max-width: 96%;
}
 
.portal li {
    position: relative;
    font-weight: bold;
    font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
    text-decoration: none;
    padding: 0;
    margin: 0;
}
 
.portal li:hover {
    -webkit-transform: translateX(10px);
    -moz-transform: translateX(10px);
    -ms-transform: translateX(10px);
    -o-transform: translateX(10px);
    transform: translateX(10px);
}
 
.portal a,
.portal a:link,
.portal a:visited,
.portal a:hover,
.portal a:active,
.portal strong.selflink {
    text-decoration: none;
    color: #000 !important;
}
 
.portal a:before,
.portal a:after,
.portal strong.selflink:before,
.portal strong.selflink:after {
    color: #07a3d7;
    margin: auto 3px;
}
 
.portal a:before,
.portal strong.selflink:before {
    content: ">";
}
 
.portal a:after,
.portal strong.selflink:after {
    content: "<";
    visibility: hidden;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    -o-transform: translateX(15px);
    transform: translateX(15px);
}
 
.portal a:hover:after,
.portal strong.selflink:hover:after {
    visibility: visible;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
}
 
.portal strong.selflink {
    color: #07a3d7 !important;
    border-bottom: 2px #07a3d7 solid;
}
 
.portal a:after,
.portal strong.selflink:after,
.portal li {
    -webkit-transition: transform 0.3s;
    -moz-transition: transform 0.3s;
    -o-transition: transform 0.3s;
    transition: transform 0.3s;
}
 
.portal li > ul {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}
 
/** floating header **/
.persistHeader {
    position: fixed;
    top: 0;
    display: block;
    width: 100%;
    z-index: 3000;
    background-color: red;
}
 
.persistHeader.visible {
    visibility: visible;
}
 
code {
    display: inline-block;
    font-weight: bold;
    font-family: "Consolas", "Menlo", "Deja Vu Sans Mono", "Bitstream Vera Sans Mono", monospace;
    background-color: #eee;
    color: #4e9a06;
    padding: 2px 0.4em;
    border-radius: 3px;
}
 
.rainbow-text {
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0, #f22),
        color-stop(0.15, #f2f),
        color-stop(0.3, #22f),
        color-stop(0.45, #2ff),
        color-stop(0.6, #2f2),
        color-stop(0.75, #2f2),
        color-stop(0.9, #ff2),
        color-stop(1, #f22)
    );
    background-image: gradient(
        linear,
        left top,
        right top,
        color-stop(0, #f22),
        color-stop(0.15, #f2f),
        color-stop(0.3, #22f),
        color-stop(0.45, #2ff),
        color-stop(0.6, #2f2),
        color-stop(0.75, #2f2),
        color-stop(0.9, #ff2),
        color-stop(1, #f22)
    );
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}
 
.rainbow {
    background-color: orange;
}
 
* {
    text-rendering: optimizeSpeed;
}
 
.mw-body .external {
    padding-right: 0;
    background-image: none;
}
 
.shady,
.shady a {
    background-color: black !important;
    color: transparent !important;
}
 
.shady:hover,
.shady:hover a,
.shady a:hover {
    background-color: black !important;
    color: white !important;
}
 
/* Hoverimage */
.hoverimage img {
    opacity: 0;
    filter: alpha(opacity=0);
}
 
.hoverimage img:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}
 
.hoverimages img {
    opacity: 0.85;
    filter: alpha(opacity=0);
}
 
.hoverimages img:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}
 
/* Installing Hover Logo */
#WikiHeader h1.wordmark img {
    opacity: 0.85;
    filter: alpha(opacity=85);
    /* For IE8 and earlier */
}
 
#WikiHeader h1.wordmark img:hover {
    opacity: 1;
    filter: alpha(opacity=100);
    /* For IE8 and earlier */
}
 
/* ImageHover */
.fadeout img:hover {
    opacity: 0;
}
 
.fadeout img:active {
    opacity: 0;
}
 
body:not(.editor) .fadeout-container.fadeout-hide-bottom > :nth-child(2) {
    visibility: hidden;
    /* the 'body:not(.editor)' is used to prevent hiding the image in editing mode where it is not displayed properly */
}
 
/* Tooltip */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
 
.tooltiptext {
    visibility: hidden;
    min-width: 400px;
    padding: 12px 14px;
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: calc(20px + 100%);
    z-index: 100004;
    background: #fff;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15);
    border: 1px solid #a2a9b1;
    border-radius: 2px;
    font-weight: normal;
    text-shadow: none;
}
 
.tooltiptext:after,
.tooltiptext:before {
    content: "";
    position: absolute;
    left: 50%;
    border-style: solid;
}
 
.tooltiptext:after {
    top: 100%;
    bottom: auto;
    width: 20px;
    height: 20px;
    background: #fff;
    margin-top: -10px;
    margin-left: -10px;
    box-shadow: 1px 1px 0px #a2a9b1;
    transform: rotate(45deg);
    border-width: 0;
}
 
.tooltiptext:before {
    top: 100%;
    bottom: auto;
    border-width: 18px;
    margin-left: -18px;
    border-color: rgba(0, 0, 0, 0.15) transparent transparent transparent;
    pointer-events: none;
}
 
.tooltip .tooltip .tooltiptext {
    bottom: auto;
    top: calc(20px + 100%);
}
 
.tooltip .tooltip .tooltiptext:after {
    top: auto;
    bottom: 100%;
    border-width: 15px;
    margin-left: -15px;
    border-color: transparent transparent white transparent;
    width: 0;
    height: 0;
    box-shadow: none;
    background: none;
    transform: none;
}
 
.tooltip .tooltip .tooltiptext:before {
    top: auto;
    bottom: 100%;
    border-width: 16px;
    margin-left: -16px;
    border-color: transparent transparent #888 transparent;
}
 
.tooltiptext hr {
    margin: 10px 0 12px;
    position: relative;
    background: none;
}
 
.tooltiptext hr:after {
    content: "";
    display: block;
    width: 100%;
    height: 1px !important;
    position: absolute;
    left: -14px;
    background: #a2a9b1;
    padding: 0 14px;
}
 
.tooltip:hover > .tooltiptext {
    visibility: visible;
}
 
.tooltiptext {
    opacity: 0;
    transition: opacity 200ms ease, visibility 0s ease 200ms, transform 200ms ease;
    transform: translate(-50%, 8px);
}
 
.tooltip .tooltip .tooltiptext {
    transform: translate(-50%, -8px);
}
 
.tooltip:hover > .tooltiptext {
    opacity: 1;
    transition-delay: 0s;
    transform: translate(-50%, 0);
}
 
.tooltiptext a {
    color: #0645ad;
    border-bottom: 0;
}
 
.tooltiptext a:visited {
    color: #0b0080;
}
 
.tooltiptext a:active {
    color: #faa700;
}
 
.tooltiptext a:hover,
a:focus {
    text-decoration: underline;
}
 
.tooltiptext {
    color: #252525;
}
 
.tooltiptext a.new {
    color: #ba0000;
}
 
.mwe-math-element {
    filter: brightness(0%);
}
 
@media screen and (max-width: 767px) {
    table {
        max-width: 100%;
        overflow-x: auto;
        display: inline-table !important;
    }
 
    .hscroll {
        width: 100%;
        overflow-x: scroll;
    }
 
    .infobox {
        float: left !important;
    }
}
 
/* Styling for Extension:Tabs */
 
.tabs-tabbox {
    position: relative;
    margin: 0 0 15px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 3px;
}
 
.tabs-tabbox > .tabs-label {
    padding: 5px 10px;
    background: none;
    border: none;
    border-radius: 0;
    font-weight: bold;
    color: #54595d;
    border-bottom: 2px solid #c3c3c3;
    transition: border-color 0.3s, color 0.3s;
    font-size: 15px;
    margin: 0 !important;
    display: inline-block;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
 
.tabs-tabbox > .tabs-container {
    padding: 10px 10px 10px 0;
    margin-top: 0;
    border: none;
    overflow-x: auto;
    flex-basis: 100%;
}
 
.tabs-tabbox > .tabs-label:hover {
    background: none;
}
 
.tabs-tabbox > .tabs-input:checked + .tabs-label,
.tabs-input-0:checked + .tabs-input-1 + .tabs-label,
.tabs-tabbox > .tabs-label:hover {
    border-bottom-color: var(--accent-color);
    color: var(--accent-color);
}
 
.tabs-tabbox [type="radio"],
.tabs-tabbox .tabs-tabbox label:nth-of-type(2),
.tabs-content.tabs-content-2:empty {
    display: none !important;
}
 
.infobox .tabs-tabbox {
    margin: 2px 0 0 0;
    place-content: center;
    place-items: center;
}
 
body:not(oldbrowser) .tabs-content {
    display: none;
}
 
@media screen and (min-width: 851px) and (max-width: 1099px) {
    #mw-site-navigation {
        z-index: 99;
    }
}
 
.tabs-tabbox > .tabs-input:checked + .tabs-label,
.tabs-input-0:checked + .tabs-input-1 + .tabs-label {
    background: none;
}
 
.tabs-background {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0;
    height: 46px;
    background-color: var(--theme-tone-4);
    border-bottom: 2px solid var(--theme-tone-2);
}
 
.infobox * {
    z-index: 2;
}
 
.tabs.tabs-tabbox .tabs-tabbox {
    margin-top: -3px !important;
}
 
/* Styling for Extension:Tabs end */
 
/* Tabs styling (new) */
 
div.tabdiv > ul > li:hover,
div.tabdiv > ul > li.active {
    background: var(--accent-color);
    border-bottom-color: var(--accent-color);
    color: white;
}
 
div.tabdiv > ul > li {
    border-bottom: 2px solid #c3c3c3;
    transition: border-color 0.3s, background-color 0.3s, color 0.3s;
    cursor: pointer;
    padding: 5px 15px;
    height: auto;
    line-height: normal;
    margin-right: 3px !important;
    margin-bottom: 0;
    color: #54595d;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    background-color: var(--theme-tone-2);
    border-radius: 4px 4px 0 0;
}
 
div.tabdiv > ul > li a {
    transition: color 0.3s;
    color: #54595d !important;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
 
div.tabdiv > ul > li.active a:not(.infobox a),
div.tabdiv > ul > li:hover a:not(.infobox a) {
    color: white !important;
}
 
div.tabdiv div.tabdiv:not(.forceport) > ul,
table.infobox div.tabdiv:not(.forceport) > ul,
div.tabdiv,
div.tabdiv > ul,
div.tabdiv.forceland > ul {
    border: none;
}
 
.image > div.tabdiv > ul {
    padding-top: 7px;
    padding-bottom: 5px;
}
 
div.tabber-new {
    display: flex;
    flex-direction: column;
}
 
div.tabber-new > ul {
    display: flex;
    flex-wrap: wrap;
}
 
.tabber-new .tabber-tab {
    color: #54595d;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    background-color: var(--theme-tone-2);
    border-radius: 4px 4px 0 0;
}
 
div.tabdiv.tabber-new > div {
    padding: 0;
}
 
.tabber-center .tabber-ul {
    justify-content: center;
}
 
div.tabber-vertical {
    display: flex !important;
    flex-direction: row;
}
 
.tabber-vertical > .tabber-ul .tabber-tab:first-child {
    margin-top: 0;
}
 
.tabber-vertical > .tabber-ul {
    flex-direction: column;
    margin-right: 25px;
}
 
div.tabber-border div.tabber-content {
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: 5px;
}
 
div.tabber-border.tabber-padding > div.tabber-content {
    padding: 10px 20px;
}
 
.tabber-content > table:first-child {
    margin-top: 0;
}
 
.tabber-content > h2 {
    margin-top: 0.5em;
}
 
.tabber-content p:not(.fadeout-container):first-child {
    margin-top: 0.5em;
}
 
.tabber-new.fancy > ul {
    gap: 0 6px;
}
 
.tabber-new.fancy > .tabber-ul .tabber-tab,
.tabber-new.fancy > .tabber-ul .tabber-tab.active {
    background-color: transparent;
    border-bottom: none;
    transform: skew(-10deg);
    border-radius: 0;
    /* background-image: linear-gradient(to left bottom, #00A5EA 0, transparent 90%), linear-gradient(to left top, #00A5EA 49px, #00E2FE 50px); */
    color: white;
    text-align: center;
    color: #5f5f5f;
    transition: none;
    font-weight: 600;
}
 
.tabber-new.fancy > .tabber-ul .tabber-tab:hover,
.tabber-new.fancy > .tabber-ul .tabber-tab.active {
    background-image: linear-gradient(to left bottom, #00a5ea 0, transparent 70%),
        linear-gradient(to left top, #20b7e5 49px, #00f6ff 50px);
    color: white;
}
 
.tabber-new.fancy > .tabber-ul .tabber-tab::after {
    content: "";
    display: none;
    position: absolute;
    width: 18px;
    right: -11px;
    bottom: -8px;
    height: 18px;
    background-repeat: no-repeat;
    background-image: url("https://elwiki.net/wiki/images/6/64/Tabber_-_Arrow.png");
}
 
.tabber-new.fancy > .tabber-ul .tabber-tab.active::after {
    display: block;
}
 
.tabber-new.fancy > .tabber-content table {
    border-color: #bdbdbd;
}
 
.tabber-new.fancy > .tabber-ul .tabber-tab-content {
    transform: skew(10deg);
    display: block;
}
 
/* Tabs styling (new) end */
 
/* Infobox */
.infobox-wrap {
    padding: 0;
    float: right;
    clear: right;
    position: relative;
}
 
table.infobox div.tabdiv:not(.forceport) > ul {
    background-color: #f7f7f7;
    padding: 7px 0 7px 0;
    border-bottom: 2px solid var(--theme-tone-2);
    align-items: center;
    justify-content: center;
}
 
.infobox .tabber-new > .tabber-content {
    margin-top: 10px;
}
 
table.infobox div.tabdiv:not(.forceport) > ul ~ div ul {
    margin-top: -10px;
    margin-left: -10px;
    margin-right: -10px;
    background: none;
    border-bottom: none;
}
 
table.infobox div.tabdiv:not(.forceport) > ul > li {
    padding-top: 0;
}
 
.infobox div.tabdiv > ul > li:hover,
.infobox div.tabdiv > ul > li.active {
    background: none;
    color: var(--accent-color);
    border-radius: 0;
}
 
table.infobox div.tabdiv:not(.forceport) > ul > li {
    background: none;
}
 
.infobox div.tabdiv > ul > li {
    padding: 5px 10px;
    margin-right: 5px !important;
}
 
.infobox .tabber-content p:first-child {
    margin-top: 5px;
}
 
.infobox div.tabdiv > ul > li.active a,
.infobox div.tabdiv > ul > li:hover a {
    color: var(--accent-color) !important;
}
 
/* Remove .mw-body-content stacking context so the tooltip can
  overlap with elements outside content area and be shown properly */
.mw-body-content {
    z-index: auto;
}
 
/* Template fix */
dfn {
    display: none !important;
}
 
/* Image margin in headlines */
.mw-headline .image img {
    padding-bottom: 5px;
}
 
/* Navbar */
.sidebar-chunk,
#p-logo,
#p-banner,
#personal,
#personal-inner,
#mw-data-after-content img,
#mw-data-after-content a,
::placeholder {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
 
::-moz-placeholder {
    user-select: none;
    -moz-user-select: none;
}
 
::-webkit-placeholder {
    user-select: none;
    -webkit-user-select: none;
}
 
#mw-site-navigation {
    z-index: 3;
}
 
#mw-site-navigation .sidebar-chunk li {
    padding: 0;
}
 
.sidebar-chunk a {
    padding: 0.4em 0 0.4em 0.4em;
    font-size: 1.02em;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: background-color 0.3s, color 0.2s;
    border-radius: 6px;
    border: 0.25em solid #f8f9fa;
    border-bottom: none;
}
 
.sidebar-chunk ul > li:last-child > a {
    border-bottom: 0.25em solid #f8f9fa;
}
 
.sidebar-chunk li {
    font-size: 1.02em;
    font-weight: 600;
}
 
.sidebar-chunk a::before,
.sidebar-chunk a::after {
    content: unset !important;
}
 
.sidebar-chunk ul li > a {
    padding: 0.3em;
    background-image: none !important;
}
 
.sidebar-chunk ul li > a[href="#.21"],
.sidebar-chunk .mw-selflink {
    cursor: default;
}
 
.sidebar-chunk li > ul a {
    border-color: #fff;
}
 
.sidebar-chunk a,
.sidebar-chunk a:link,
.sidebar-chunk a:visited,
.sidebar-chunk strong.selflink {
    text-decoration: none;
    color: #000;
}
 
.sidebar-chunk li:hover > a,
.sidebar-chunk li:hover > a:link,
.sidebar-chunk .mw-selflink,
.sidebar-chunk a.mw-has-selflink {
    background: var(--accent-color);
    color: white;
}
 
#mw-related-navigation .sidebar-chunk li {
    padding: 0;
}
 
#mw-site-navigation .sidebar-chunk {
    padding: 1.6em;
}
 
.sidebar-chunk li:hover {
    transform: none !important;
}
 
.sidebar-chunk li > ul {
    top: 0;
    border-radius: 5px;
    box-shadow: 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%), 0 2px 4px -1px rgb(0 0 0 / 30%);
}
 
.sidebar-chunk li:hover > ul {
    pointer-events: all;
    transform: translateX(0);
}
 
div.sidebar-chunk li > ul {
    visibility: visible !important;
    pointer-events: none;
    left: 100%;
    margin-left: 0 !important;
    display: block;
    transform: translateX(-7px);
    transition: 0.3s !important;
    border: 1px solid var(--border-color);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1) !important;
}
 
div.sidebar-chunk h3 {
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-left: 0.65em !important;
}
 
.sidebar-chunk {
    border-radius: 5px;
}
 
#site-tools .mw-portlet-body {
    margin-bottom: 0 !important;
}
 
#mw-related-navigation .sidebar-chunk #p-normal-catlinks .mw-portlet-body {
    margin-bottom: 1.5em;
}
 
/* vertical grid table */
.vgrid-table {
    display: grid;
    grid-template-columns: 135px auto;
    gap: 5px;
}
 
.vgrid-table > div {
    padding: 2px;
    box-shadow: 0 0 0 1px var(--border-color);
    height: 100%;
}
 
/* title */
.vgrid-table > .vgrid-cat {
    font-weight: 600;
    width: 100%;
    height: 100%;
    display: flex;
    place-content: center;
    place-items: center;
    text-align: center;
    background-color: var(--theme-tone-5);
}
 
/* content */
.vgrid-table > div:not(.vgrid-cat) {
    display: flex;
    place-content: start;
    flex-direction: row;
    place-items: center;
}
 
.vgrid-table > div:not(.vgrid-cat) ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    list-style-type: none;
    gap: 0.3em;
    place-items: center;
    padding: 0 0.9em;
    padding-left: 0;
}
 
.vgrid-table > div:not(.vgrid-cat) ul li {
    position: relative;
    padding: 5px;
}
 
.vgrid-table > div:not(.vgrid-cat) ul li::after {
    content: "▪";
    position: absolute;
    right: -0.37em;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
}
 
.vgrid-table > div:not(.vgrid-cat) ul li:last-child::after {
    content: unset;
}
 
.vgrid-table > div:not(.vgrid-cat) ul li a {
    font-weight: 600;
    color: black !important;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.2s;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    text-decoration: none;
}
 
.vgrid-table > div:not(.vgrid-cat) ul li a:hover,
.vgrid-table > div:not(.vgrid-cat) ul li a.mw-selflink {
    color: white !important;
    background-color: var(--accent-color);
}
 
.vgrid-table > .vgrid-cat > span {
    padding: 4px;
}
 
.vgrid-table .textfloat {
    color: #fff !important;
    text-shadow: 1px 1px 1px #000 !important;
}
 
.vgrid-table > div .vgrid-cat {
    background: var(--theme-tone-5);
    padding: 2px 6px;
    font-weight: 600;
    margin-left: -2px;
    height: 100%;
    width: 135px;
    min-width: 135px;
    text-align: center;
    border-right: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
 
table .vgrid-table {
    margin-bottom: 5px;
}
 
/* Long table tooltip adjustments */
.long-table {
    overflow-x: auto;
}
 
.long-table .tooltiptext:not(.tooltip-up .tooltiptext) {
    top: calc(20px + 100%);
    box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.15);
    bottom: auto;
}
 
.long-table .tooltiptext:not(.tooltip-up .tooltiptext):before {
    bottom: 100%;
    top: unset;
    border-color: transparent transparent rgba(0, 0, 0, 0.15) transparent;
}
 
.long-table .tooltiptext:not(.tooltip-up .tooltiptext):after {
    bottom: 100%;
    margin-bottom: -10px;
    top: unset;
    transform: rotate(225deg);
}
 
/* systems */
.section-systems table th:nth-of-type(2n + 1) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
 
.section-systems table th:nth-of-type(2n) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
 
/* status effect icons */
.status {
    display: inline-flex;
    gap: 0.35em;
}
 
.status .tooltip {
    white-space: nowrap;
}
 
/* Quest */
 
.job-change-collapsible {
    border: 1px solid var(--border-color-tone-2);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
}
 
.job-change-collapsible [style*="1.25em"] * {
    font-size: 15.2px !important;
}
 
.job-change-collapsible > .section > .mw-collapsible-toggle {
    color: white;
    text-shadow: 1px 1px 1px #000;
    top: 5px;
    right: 7px;
    height: fit-content;
}
 
.job-change-collapsible > .section > .mw-collapsible-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
}
 
.job-change-collapsible .section .section {
    border-bottom: 1px solid var(--border-color-tone-2);
}
 
.job-change-collapsible .section .section:first-of-type {
    border-bottom: 1px solid var(--border-color-tone-2);
}
 
.job-change-collapsible .mw-collapsible-toggle-default::before,
.job-change-collapsible .mw-collapsible-toggle-default::after,
.job-change-collapsible .mw-collapsible-text {
    display: none;
}
 
.job-change-collapsible .section {
    position: relative;
}
 
.job-change-collapsible .mw-collapsible-toggle {
    display: block;
    position: absolute;
    right: 5px;
    top: 7px;
    padding: 3px 5px;
    transition: 0.3s;
    border-radius: 4px;
}
 
.job-change-collapsible .mw-collapsible-toggle:hover {
    background-color: var(--theme-tone-7);
}
 
.client-js .job-change-collapsible div.mw-collapsed:not(.mw-made-collapsible):before,
.client-js .generic-quest.mw-collapsed:not(.mw-made-collapsible):before {
    content: unset; /* (Bandaid for FoUC) */
}
 
.job-change-collapsible .mw-collapsible-toggle::after {
    display: block;
    content: "Hide";
}
 
.job-change-collapsible .mw-collapsed .mw-collapsible-toggle::after {
    display: block;
    content: "Show";
}
 
.job-change-collapsible .mw-collapsible-toggle {
    font-weight: 600;
}
 
.generic-quest {
    position: relative;
    margin-bottom: 5px;
}
 
.generic-quest > div {
    border-radius: 4px;
}
 
.generic-quest .mw-collapsible-toggle {
    color: white !important;
    text-shadow: 1px 1px 1px #000;
    font-size: 1em;
    position: absolute;
    right: 7px;
    top: 11px;
}
 
.generic-quest .mw-collapsible-toggle a {
    color: white !important;
    font-weight: 600;
}
 
.generic-quest > .mw-collapsible-content {
    border: 1px solid var(--border-color);
}
 
.generic-quest .mw-collapsible-toggle-default::before,
.generic-quest .mw-collapsible-toggle-default::after,
.generic-quest .mw-collapsible-text {
    display: none;
}
 
.generic-quest .mw-collapsible-toggle::after {
    display: block;
    content: "(Hide)";
}
 
.generic-quest.mw-collapsed .mw-collapsible-toggle::after {
    display: block;
    content: "(Show)";
}
 
.generic-quest .mw-collapsible-toggle {
    font-weight: 600;
}
 
.generic-quest > div:not(.mw-collapsed > div) {
    border-radius: 4px 4px 0 0;
}
 
/* combo overlay */
.combo-overlay a {
    display: flex;
}
 
/* New Infobox */
.infobox-new {
    float: right;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-left: 1rem;
    max-width: 450px;
    margin-bottom: 1em;
}
 
.infobox-new-header {
    padding: 7px;
    text-align: center;
    text-shadow: 1px 1px 1px #000;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    color: white;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
 
.infobox-character .infobox-new-image {
    margin: 5px 0;
}
 
.infobox-character .infobox-new-header img[alt^="Mini Icon"] {
    display: none;
}
 
.infobox-new-image {
    text-align: center;
}
 
.infobox-new-image img {
    max-width: 100%;
    height: auto;
}
 
.infobox-equipment .infobox-new-image {
    margin: 5px;
}
 
.infobox-new .infobox-row {
    display: grid;
    grid-template-columns: 100px auto;
    border-top: 1px solid var(--border-color);
}
 
.infobox-song .infobox-row,
.infobox-goods .infobox-row {
    grid-template-columns: 125px auto;
}
 
.infobox-new .infobox-row.infobox-double-row {
    grid-template-columns: 100px calc((100% - 100px) / 2) calc((100% - 100px) / 2);
}
 
.infobox-new .infobox-row-title {
    padding: 8px;
    border-right: 1px solid var(--border-color);
    font-weight: 600;
    background-color: var(--theme-tone-4);
    display: flex;
    align-items: center;
    word-break: break-word;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
 
.infobox-new .infobox-row-content {
    padding: 8px;
    display: flex;
    align-items: center;
}
 
.infobox-new .infobox-row-content:nth-child(3) {
    border-left: 1px solid var(--border-color);
}
 
.infobox-new .embedvideo {
    width: 350px;
    height: 197px;
}
 
.infobox-song .embedvideo {
    max-width: 375px;
    margin: 0;
}
 
.infobox-new .infobox-row-content.infobox-video-row {
    padding: 0;
}
 
.infobox-new .tabber-ul {
    place-items: center;
    place-content: center;
    background-color: var(--theme-tone-4);
    border-bottom: 1px solid var(--border-color);
    --accent-color: var(--theme-tone-3);
}
 
.infobox-new .tabber-tab {
    margin-top: 0;
    background-color: transparent;
    border-bottom: 0;
    border-radius: 0;
    margin-right: 0 !important;
    padding: 7px 12px;
    font-size: 15px;
    border-right: 1px solid var(--border-color);
    color: var(--text-color) !important;
    font-weight: 600;
}
 
.infobox-new .tabdiv .tabdiv .tabber-ul {
    border-bottom: 1px solid var(--border-color);
}
 
.infobox-new .tabber-tab:first-child {
    border-left: 1px solid var(--border-color);
}
 
.infobox-new .infobox-row-content img[alt^="Mini Icon"] {
    vertical-align: sub;
}
 
.infobox-new .infobox-row-content table {
    margin: 5px 0;
}
 
/* New nmbox */
.nmbox-new {
    display: grid;
    grid-template-columns: min-content auto;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin: 1em 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
 
.nmbox-new .nmbox-new-header {
    display: flex;
    place-content: center;
    place-items: center;
    background-color: var(--theme-tone-5);
    padding: 8px;
    border-right: 1px solid var(--border-color);
    border-radius: 4px 0 0 4px;
}
 
.nmbox-new .nmbox-new-header a {
    text-decoration: none !important;
    white-space: pre;
}
 
.nmbox-new .nmbox-new-header a b {
    color: var(--text-color);
    font-weight: 600;
}
 
.nmbox-new .nmbox-new-content {
    display: flex;
    place-items: center;
}
 
.nmbox-new ul {
    display: flex;
    place-items: center;
    list-style-type: none;
    margin: 0;
    flex-wrap: wrap;
}
 
.nmbox-new ul li {
    display: block;
}
 
.nmbox-new ul a {
    color: var(--text-color);
    text-decoration: none !important;
    display: flex;
    place-content: center;
    place-items: center;
    padding: 8px;
    transition: background-color 0.2s;
    font-size: 14px;
    direction: ltr;
}
 
.nmbox-new ul .mw-selflink,
.nmbox-new ul b {
    font-weight: 600;
    color: var(--text-color);
}
 
.nmbox-new ul a:hover {
    background-color: var(--theme-tone-5);
}
 
/* Tables */
table[cellpadding="5"][border="1"][style],
table[cellpadding="5"][border="1"][style] td {
    border-color: #c1c1c1;
}
 
table[cellpadding="5"][border="1"][style] tr[style],
table[cellpadding="5"][border="1"][style] tr[style] th {
    border: 1px solid rgb(71, 71, 71);
}
 
tr[style*="#444444"] th {
    color: white;
    text-shadow: none !important;
}
 
tr[style*="background:#444444"] a {
    color: white !important;
    text-shadow: none !important;
}
 
table[cellpadding="5"][border="1"][style] tr[style*="#444444"],
table[cellpadding="5"][border="1"][style] tr[style*="#444444"] th {
    border-color: black;
}
 
/* Char stats */
.char-stats {
    display: inline-grid;
    grid-template-columns: repeat(3, 105px);
    grid-template-rows: repeat(3, 30px);
    gap: 5px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
 
.char-stats-cat,
.char-stats-attack-caption,
.char-stats-attack {
    background-color: var(--theme-tone-5);
    color: var(--text-color);
    font-weight: 600;
    display: flex;
    place-items: center;
    place-content: center;
    transform: skew(-7deg);
    border-bottom: 2px solid var(--border-color);
}
 
.char-stats-cat {
    place-content: start;
    padding-left: 8px;
}
 
.char-stats-cat span,
.char-stats-attack-caption span,
.char-stats-attack img {
    transform: skew(7deg);
}
 
.char-stats-active {
    background-image: url("https://elwiki.net/wiki/images/f/f5/UI_-_Stats_Active.png");
    background-repeat: no-repeat;
    display: flex;
    place-items: center;
    place-content: center;
    color: white;
    font-weight: 600;
}
 
.char-stats-attack {
    display: flex;
    place-items: center;
    place-content: center;
    grid-row: span 2;
    /*    background-color: var(--theme-tone-5); */
}
 
.char-stats-attack img {
    width: 57px;
    height: auto;
}
 
/* SkillNav */
.skillnav .separate a:not(.image),
.forcenav a:not(.image) {
    margin-right: 13px;
    font-weight: 600;
}
 
.skillnav .separate a:not(.image):last-child,
.forcenav a:not(.image):last-child {
    margin-right: 0;
}
 
.forcenav .forcedot::before {
    content: "▪";
    margin-right: 13px;
}
 
.forcenav table.section .section .section th {
    border-left: 1px solid var(--border-color) !important;
    border-right: 1px solid var(--border-color) !important;
    background: var(--theme-tone-4) !important;
}
 
table.section > tbody > tr:first-child > th.skillnav-section {
    background-color: var(--theme-tone-3) !important;
    text-shadow: none;
    border-top: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-color);
}
 
/* Force tabs */
.force-tabs .parent-tab {
    border: 1px solid rgb(71, 71, 71);
}
 
.force-tabs .parent-tab a:not(.mw-selflink) {
    color: black !important;
    text-decoration: none !important;
}
 
.parent-tab a {
    height: 100%;
    display: block;
    padding: 0 0.5em;
}
 
.force-tabs .parent-alt-tab {
    transition: 0.3s;
}
 
.force-tabs .parent-tab.parent-alt-tab a {
    color: white !important;
    text-shadow: 1px 1px 1px #000;
}
 
.force-tabs .parent-alt-tab:hover {
    transform: translateY(-5px);
}
 
.parent-tabs .mw-selflink {
    font-weight: 600 !important;
}
 
/* Warning */
div.mw-warning-with-logexcerpt {
    padding: 15px;
    border-radius: 6px;
    border: none;
    background: var(--theme-tone-5);
    margin-bottom: 1em;
    border: 1px solid var(--border-color);
}
 
.mw-warning-with-logexcerpt p:first-of-type {
    margin-top: 0;
}
 
.mw-warning-with-logexcerpt strong {
    font-weight: 600;
}
 
/* Responsive Navbar */
@media screen and (min-width: 851px) and (max-width: 1099px) {
    #mw-site-navigation .sidebar-chunk {
        padding: 0 !important;
    }
 
    #mw-site-navigation .sidebar-inner {
        padding: 1em;
    }
 
    .sidebar-chunk ul li > a {
        border-color: white;
    }
}
 
@media screen and (max-width: 850px) {
    .sidebar-inner,
    .dropdown {
        background: #f8f9fa;
    }
}

Revision as of 00:09, 3 May 2022

/* Color scheme */

root {
   --accent-color: #00adda;
   --border-color: #d9d9d9;
   --border-color-tone-2: #bbbbbb;
   --theme-tone-2: #f5f5f5;
   --theme-tone-3: #ededed;
   --theme-tone-4: #f7f7f7;
   --theme-tone-5: #f4f5f7;
   --theme-tone-6: #f9fafb;
   --theme-tone-7: #eaecf0;
   --text-color: black;
   --text-color-invert: white;

}

selection {
   background-color: var(--accent-color);
   color: white;

}

-moz-selection {
   background-color: var(--accent-color);
   color: white;

}

body { 

   background-color: var(--theme-tone-7);

}

/* Font */ html { 

   font-size: 107%;
   overflow-y: overlay;

}

html *:not(.wikiEditor-ui *, .mw-editfont-monospace),

  1. p-logo-text a {
   font-family: "Segoe UI", "Frutiger", "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", "Arial", sans-serif;

}

/* Generic elements */ hr { 

   border: none;
   height: 1px;
   background-color: var(--border-color);

}

.main-accent { 

   color: var(--accent-color);

}

.clearfix { 

   clear: both;

}

b, th { 

   font-weight: 600;

}

.wikiEditor-ui-toolbar { 

   background-image: none;
   background-color: var(--theme-tone-5);

}

.tone-7 { 

   background-color: var(--theme-tone-7);

}

.tone-4 { 

   background-color: var(--theme-tone-4);

}

.color-normal { 

   color: var(--text-color);

}

/* header */ div.color-left, div.color-middle, div.color-right { 

   background-color: white;

}

/* Logo */

  1. p-logo {
   background: #f8f9fa;
   border-radius: 5px 5px 0 0;

}

  1. p-logo-text a {
   padding: 0;

}

.mw-wiki-logo.fallback { 

   height: 8em;
   background-position: bottom center;

}

  1. mw-site-navigation .sidebar-chunk {
   margin-top: 0;
   border-top: 0;

}

/* border */ div.mw-body h1.firstHeading, div#mw-page-header-links li.selected { 

   border-color: #c4d2d7;

}

/* Topbar */

  1. personal span {
   font-weight: 600;

}

  1. mw-header-hack {
   border-bottom: 1px solid var(--border-color);

}

  1. personal-inner {
   border-radius: 5px;

}

  1. personal h2 {
   padding-top: 7px;

}

  1. searchButton {
   background-position: top right;
   box-shadow: none;
   background-image: url("https://elwiki.net/wiki/images/e/e4/UI_-_Search.png");
   background-size: 34px;
   right: 0;
   margin-top: -1px;

}

  1. searchButton:hover {
   filter: brightness(1.1);

}

  1. mw-searchButton {
   display: none;

}

  1. searchInput {
   padding: 1em;
   transition: box-shadow 0.3s;
   border-color: var(--border-color);
   letter-spacing: 0.7px;

}

  1. searchInput:focus {
   outline: none;
   box-shadow: 2px 2px 5px rgb(0 0 0 / 20%);

}

  1. simpleSearch {
   border-radius: 5px;
   box-shadow: none;

}

  1. p-logo-text a {
   letter-spacing: 1.5px;
   font-weight: 600;
   color: rgb(60, 60, 60);

}

  1. p-logo-text a {
   display: flex;
   place-items: center;
   place-content: center;
   text-decoration: none !important;
   margin-top: -5px;

}

a#p-banner::before { 

   content: "";
   height: 40px;
   width: 39px;
   display: block;
   background-image: url(https://elwiki.net/wiki/images/8/88/UI_-_Hedgehog.png);
   background-repeat: no-repeat;
   background-color: transparent;
   position: relative;
   margin-top: 0;

}

.suggestions-result-current { 

   background: var(--accent-color) !important;

}

.highlight { 

   font-weight: 600;

}

  1. personal h2 {
   background-image: none;
   padding-top: 6px;
   padding-left: 5px;
   letter-spacing: .75px;

}

  1. personal h2::after {
   width: 0;
   height: 0 !important;
   border: 0 solid transparent;
   border-left-width: 6px;
   border-right-width: 6px;
   border-top: 6px solid var(--border-color-tone-2);
   background-image: none;
   position: relative;
   top: -4px;
   margin-left: 10px;

}

  1. p-personal-label {
   display: none;

}

  1. personal-inner {
   padding: 0 !important;

}

  1. personal .dropdown .mw-portlet-body {
   margin-bottom: 0;

}

  1. personal .dropdown li {
   padding: 0;

}

  1. personal .dropdown li a {
   border: 0.25em solid white;
   display: block;
   padding: 0.4em;
   color: var(--text-color);
   border-radius: 6px;
   font-size: 1.02em;
   letter-spacing: 0.03em;
   transition: background-color 0.3s, color 0.2s;
   border-bottom: none;
   text-decoration: none;

}

  1. personal .dropdown li:last-child a {
   border-bottom: 0.25em solid white;

}

  1. personal .dropdown li:hover a {
   background-color: var(--accent-color);
   color: white;

}

  1. mw-wrapper #mw-header .dropdown {
   display: block !important;
   opacity: 0;
   pointer-events: none;
   transform: scale(0);
   transform-origin: top right;
   transition: 0.15s;

}

  1. mw-wrapper #mw-header .dropdown-active .dropdown {
   display: block !important;
   transform: scale(1);
   opacity: 1;
   pointer-events: all;

}

.suggestions, .suggestions .suggestions-suggestions-special { 

   border-radius: 6px;

}

.suggestions .suggestions-results { 

   border-radius: 6px 6px 0 0;

}

.suggestions .suggestions-result { 

   padding: 0.5em 1em;

}

.suggestions .suggestions-special { 

   padding: 0.5em 1em;

}

/* Footer */

  1. mw-footer {
   width: 65vw;
   margin-left: 14em !important;
   margin-right: 16em;
   padding-left: 0;
   padding-right: 0;

}

  1. mw-footer-container {
   width: fit-content;
   margin: auto;
   color: black;
   border: none;
   box-shadow: none;

}

  1. mw-footer-container a,
  2. mw-footer-container a:hover {
   color: var(--accent-color) !important;
   transition: 0.3s;
   font-weight: 600;
   transition: opacity 0.3s;

}

  1. mw-footer-container a:hover {
   opacity: 0.65;

}

/* main container */

  1. mw-content-container {
   border-bottom: none;
   min-height: 200vh;

}

  1. mw-content {
   border-bottom: none;

}

@media screen and (min-width: 1100px) and (max-width: 1340px) { 

   #mw-related-navigation {
       display: none !important;
   }

   #mw-content {
       margin-left: 0;
       margin-right: 0;
       width: 70vw !important;
   }

   #content-bottom-stuff {
       padding: 1em 2em 3em;
       width: 70vw;
       background: var(--theme-tone-6);
       border-radius: 0 0 5px 5px;
       display: block;
   }

   #mw-data-after-content {
       background: transparent;
   }

}

@media screen and (min-width: 1100px) { 

   #mw-content-wrapper {
       margin: 0;
       width: 100% !important;
   }

   #mw-content-wrapper {
       margin-left: 14em;
       margin-right: 16em;
       width: 65vw !important;
       min-width: 50%;
   }

   #mw-related-navigation {
       position: absolute;
       right: 1em;
   }

   #mw-site-navigation {
       position: absolute;
       left: 1em;
   }

   #mw-content-block {
       position: relative;
       display: flex !important;
   }

   #mw-header-container {
       padding: 0.65em 0 0;
   }

}

@media screen and (max-width: 1099px) { 

   div#mw-site-navigation {
       z-index: 99;
   }

}

@media screen and (max-width: 850px) { 

   #mw-content-block {
       background: var(--theme-tone-7);
   }

}

/* after content section */

  1. mw-data-after-content > div {
   display: flex;
   flex-direction: column;
   padding: 10px;
   gap: 15px;
   place-items: center;

}

  1. mw-data-after-content br {
   display: none;

}

  1. mw-data-after-content {
   background: var(--theme-tone-6);
   border-radius: 0 0 5px 5px;

}

  1. mw-data-after-content a.nn-cmp-show {
   margin-top: 0.8em;
   display: inline-block;
   padding: 5px 10px;
   background-color: var(--theme-tone-7);
   width: fit-content;
   border-radius: 4px;
   font-weight: 600;
   color: black;
   transition: background-color 0.3s, color 0.2s;
   text-decoration: none;

}

  1. mw-data-after-content a.nn-cmp-show:hover {
   background-color: var(--accent-color);
   color: white;

}

@media screen and (min-width: 1100px) and (max-width: 1340px) { 

   #content-bottom-stuff {
       margin-left: 0;
       display: table-caption;
   }

}

/****************************** Checkbox, Radio & Button Styles ******************************/ input, button { 

   position: relative;

}

/****************************** Namebox Styles ******************************/ table.nmbox { 

   border-collapse: collapse;
   width: 100%;
   clear: both;
   font-size: 85%;
   border: 2px solid #bfdbe3;
   margin: 20px 0;

}

.nmbox th:first-of-type { 

   width: 80px;

}

table.nmbox > tbody > tr > th, table.nmbox > tbody > tr > td { 

   padding: 0.4em 0.8em;

}

table.nmbox > tbody > tr > td { 

   background-color: #f7fdff;

}

table.nmbox > tbody > tr > th { 

   background-color: #ebf4f7;

}

  1. p-googleadsense .pBody {
   padding-top: 5px;
   text-align: center;

}

/* Collapsible toggle */ .mw-content-ltr .section-border .mw-collapsible-toggle { 

   padding-right: 10px;
   position: absolute;
   right: 0;

}

/* section */

div.section-wrapper { 

   padding: 0.5em;
   border-radius: 5px;
   border-width: 2px;
   border-style: solid;
   clear: both;

}

table.top-nav { 

   border-spacing: 0;
   width: auto;
   margin: 1em;
   text-align: center;
   vertical-align: middle;

}

table.section, table.section-side-column { 

   position: relative;
   width: 100%;
   margin: 0;
   border-width: 1px;
   border-style: solid;
   border-spacing: 0;

}

table.section > tbody > tr:first-child { 

   text-align: center;
   background-color: var(--theme-tone-7);

}

table.section > tbody > tr:first-child > th { 

   line-height: 1em;
   padding: 0.5em 0;
   text-align: center;
   vertical-align: middle;
   border-width: 1px;
   border-style: solid;
   border-top: none !important;

}

table.section > tbody > tr:last-child > td { 

   vertical-align: top;
   padding: 0.5em;
   border: none;
   border-bottom: none !important;

}

table.section > tbody > tr:first-child > th:first-child, table.section > tbody > tr:last-child > td:first-child { 

   border-left: none !important;

}

table.section > tbody > tr:first-child > th:last-child, table.section > tbody > tr:last-child > td:last-child { 

   border-right: none !important;

}

table.section > tbody > tr:first-child > th ~ th, table.section > tbody > tr:last-child > td ~ td { 

   border-left: none !important;

}

table.section-side-column { 

   text-align: center;

}

table.section-side-column > tbody > tr > td:first-child { 

   width: 50%;
   height: 400px;
   padding: 10px;

}

table.section-side-column > tbody > tr > td:last-child { 

   border-left: 1px solid #000;
   height: 420px;
   padding: 0;

}

table.section-side-column > tbody > tr > td:last-child > table.section > tbody > tr:last-child > td { 

   vertical-align: middle;

}

table.section-side-column > tbody > tr > td:last-child > table.section { 

   text-align: center;
   border: none;

}

table.section-side-column > tbody > tr > td:last-child > table.section + table.section { 

   border-top-width: 1px;
   border-top-style: solid;

}

table.section-border, table.section-border.section > tbody > tr > th, table.section-border.section > tbody > tr > td, .section-border.tabdiv > ul, .section-border:not(table) { 

   border-color: var(--border-color);
   border-width: 1px !important;

}

.section-border-top-radius { 

   -webkit-border-top-left-radius: 5px;
   border-top-left-radius: 5px;
   -moz-border-radius-topleft: 5px;
   -webkit-border-top-right-radius: 5px;
   border-top-right-radius: 5px;
   -moz-border-radius-topright: 5px;

}

.section-border-bottom-radius { 

   -webkit-border-bottom-left-radius: 5px;
   border-bottom-left-radius: 5px;
   -moz-border-radius-bottomleft: 5px;
   -webkit-border-bottom-right-radius: 5px;
   border-bottom-right-radius: 5px;
   -moz-border-radius-bottomright: 5px;

}

table.section-border.section > tbody > tr > th { 

   background-color: var(--theme-tone-7);

}

.section-border .wikitable > * > tr > th { 

   border-color: var(--border-color);
   background-color: var(--theme-tone-5);

}

.section-border .wikitable > * > tr > td { 

   border-color: var(--border-color);

}

.wikitable > * > tr > td { 

   background-color: #fff;

}

.wikitable > * > tr > th { 

   border-bottom-width: 1px;

}

.tabber-new .wikitable tr th { 

   background-color: var(--theme-tone-2);

}

table.section-border { 

   margin: 10px 0;
   border-radius: 4px;

}

.section-border-right td:first-of-type { 

   border-right: 1px solid var(--border-color) !important;

}

.section-tabber .section-border { 

   margin-top: 5px;

}

.section-tabber .tabber-ul { 

   margin-top: 5px;

}

/* section - character */ .mw-content-ltr .section-border.section-characters .mw-collapsible-toggle { 

   padding-top: 0;

}

.section-characters .textfloat a + a { 

   font-size: 1.3em;
   margin-left: 7px;

}

.section-characters th { 

   padding: 10px !important;
   border-radius: 3px;

}

.section-characters table table td { 

   font-size: 1.085em;
   font-weight: 600;

}

.section-characters table .textfloat th { 

   color: white !important;

}

/* tabber section design */

.section-tabber .tabber-new ul:not(.tabber-ul) li { 

   display: block;

}

.section-tabber .tabber-new ul:not(.tabber-ul) li a { 

   color: black !important;
   padding: 5px 10px;
   background: #eee;
   margin: 5px 0;
   display: block;
   font-weight: 600;
   border-radius: 5px;
   transition: background-color 0.3s;

}

.section-tabber .tabber-new ul:not(.tabber-ul) li a:hover { 

   background: #e3e3e3;

}

.section-tabber .tabber-new ul:not(.tabber-ul) li a { 

   text-decoration: none !important;

}

.section-tabber .tabber-new ul:not(.tabber-ul) { 

   margin-left: 5px;
   margin-right: 5px;

}

.section-tabber .tabber-content { 

   padding: 0 5px 5px 5px !important;

}

.section-fields > tbody > tr > th { 

   color: black !important;
   text-shadow: none !important;

}

/* floating text */

.textfloat { 

   color: #fff;
   text-shadow: 1px 1px 1px #000;

}

table.section-border .textfloat:not(.section-characters table .textfloat) { 

   text-shadow: none;
   color: black;
   font-weight: 600;

}

table.section-border .textfloat th { 

   font-weight: 600;

}

.section-tabber table tr.textfloat th { 

   color: white;
   text-shadow: 1px 1px 1px #000;

}

.section-tabber table tr.textfloat th a { 

   vertical-align: middle;
   font-size: 1.15em;

}

.textfloat a, .textfloat a:link, .textfloat a:visited, .textfloat a:hover, .textfloat a:active { 

   color: inherit;

}

th { 

   background-color: inherit;

}

/** 

   Bilibili Sidebar Style
    • /

.portal h3 { 

   background-image: none !important;
   padding: 0 0 3px 0 !important;

}

.portal h3, .portal h3:hover, .portal h3:active, .portal h3:link, .portal h3:visited { 

   font-weight: bolder !important;
   text-decoration: none !important;

}

.portal li > ul { 

   position: absolute;
   visibility: hidden;
   left: 100%;
   background-color: #fff;
   margin-top: -1em !important;
   margin-left: -10px !important;
   min-width: 180px;
   max-width: 230px;
   opacity: 0;
   -webkit-box-shadow: 10px 10px 10px #ccf;
   -moz-box-shadow: 10px 10px 10px #ccf;
   box-shadow: 10px 10px 10px #ccf;

}

.portal li:hover > ul { 

   opacity: 1;
   visibility: visible;

}

.portal ul, .portal li, .portal a, .portal strong.selflink { 

   display: block;

}

.portal a, .portal strong.selflink { 

   max-width: 96%;

}

.portal li { 

   position: relative;
   font-weight: bold;
   font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
   text-decoration: none;
   padding: 0;
   margin: 0;

}

.portal li:hover { 

   -webkit-transform: translateX(10px);
   -moz-transform: translateX(10px);
   -ms-transform: translateX(10px);
   -o-transform: translateX(10px);
   transform: translateX(10px);

}

.portal a, .portal a:link, .portal a:visited, .portal a:hover, .portal a:active, .portal strong.selflink { 

   text-decoration: none;
   color: #000 !important;

}

.portal a:before, .portal a:after, .portal strong.selflink:before, .portal strong.selflink:after { 

   color: #07a3d7;
   margin: auto 3px;

}

.portal a:before, .portal strong.selflink:before { 

   content: ">";

}

.portal a:after, .portal strong.selflink:after { 

   content: "<";
   visibility: hidden;
   -webkit-transform: translateX(15px);
   -moz-transform: translateX(15px);
   -ms-transform: translateX(15px);
   -o-transform: translateX(15px);
   transform: translateX(15px);

}

.portal a:hover:after, .portal strong.selflink:hover:after { 

   visibility: visible;
   -webkit-transform: translateX(0px);
   -moz-transform: translateX(0px);
   -ms-transform: translateX(0px);
   -o-transform: translateX(0px);
   transform: translateX(0px);

}

.portal strong.selflink { 

   color: #07a3d7 !important;
   border-bottom: 2px #07a3d7 solid;

}

.portal a:after, .portal strong.selflink:after, .portal li { 

   -webkit-transition: transform 0.3s;
   -moz-transition: transform 0.3s;
   -o-transition: transform 0.3s;
   transition: transform 0.3s;

}

.portal li > ul { 

   -webkit-transition: opacity 0.3s;
   -moz-transition: opacity 0.3s;
   -o-transition: opacity 0.3s;
   transition: opacity 0.3s;

}

/** floating header **/ .persistHeader { 

   position: fixed;
   top: 0;
   display: block;
   width: 100%;
   z-index: 3000;
   background-color: red;

}

.persistHeader.visible { 

   visibility: visible;

}

code { 

   display: inline-block;
   font-weight: bold;
   font-family: "Consolas", "Menlo", "Deja Vu Sans Mono", "Bitstream Vera Sans Mono", monospace;
   background-color: #eee;
   color: #4e9a06;
   padding: 2px 0.4em;
   border-radius: 3px;

}

.rainbow-text { 

   background-image: -webkit-gradient(
       linear,
       left top,
       right top,
       color-stop(0, #f22),
       color-stop(0.15, #f2f),
       color-stop(0.3, #22f),
       color-stop(0.45, #2ff),
       color-stop(0.6, #2f2),
       color-stop(0.75, #2f2),
       color-stop(0.9, #ff2),
       color-stop(1, #f22)
   );
   background-image: gradient(
       linear,
       left top,
       right top,
       color-stop(0, #f22),
       color-stop(0.15, #f2f),
       color-stop(0.3, #22f),
       color-stop(0.45, #2ff),
       color-stop(0.6, #2f2),
       color-stop(0.75, #2f2),
       color-stop(0.9, #ff2),
       color-stop(1, #f22)
   );
   color: transparent;
   -webkit-background-clip: text;
   background-clip: text;

}

.rainbow { 

   background-color: orange;

}

  • {
   text-rendering: optimizeSpeed;

}

.mw-body .external { 

   padding-right: 0;
   background-image: none;

}

.shady, .shady a { 

   background-color: black !important;
   color: transparent !important;

}

.shady:hover, .shady:hover a, .shady a:hover { 

   background-color: black !important;
   color: white !important;

}

/* Hoverimage */ .hoverimage img { 

   opacity: 0;
   filter: alpha(opacity=0);

}

.hoverimage img:hover { 

   opacity: 1;
   filter: alpha(opacity=100);

}

.hoverimages img { 

   opacity: 0.85;
   filter: alpha(opacity=0);

}

.hoverimages img:hover { 

   opacity: 1;
   filter: alpha(opacity=100);

}

/* Installing Hover Logo */

  1. WikiHeader h1.wordmark img {
   opacity: 0.85;
   filter: alpha(opacity=85);
   /* For IE8 and earlier */

}

  1. WikiHeader h1.wordmark img:hover {
   opacity: 1;
   filter: alpha(opacity=100);
   /* For IE8 and earlier */

}

/* ImageHover */ .fadeout img:hover { 

   opacity: 0;

}

.fadeout img:active { 

   opacity: 0;

}

body:not(.editor) .fadeout-container.fadeout-hide-bottom > :nth-child(2) { 

   visibility: hidden;
   /* the 'body:not(.editor)' is used to prevent hiding the image in editing mode where it is not displayed properly */

}

/* Tooltip */ .tooltip { 

   position: relative;
   display: inline-block;
   border-bottom: 1px dotted black;

}

.tooltiptext { 

   visibility: hidden;
   min-width: 400px;
   padding: 12px 14px;
   text-align: center;
   position: absolute;
   left: 50%;
   bottom: calc(20px + 100%);
   z-index: 100004;
   background: #fff;
   box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15);
   border: 1px solid #a2a9b1;
   border-radius: 2px;
   font-weight: normal;
   text-shadow: none;

}

.tooltiptext:after, .tooltiptext:before { 

   content: "";
   position: absolute;
   left: 50%;
   border-style: solid;

}

.tooltiptext:after { 

   top: 100%;
   bottom: auto;
   width: 20px;
   height: 20px;
   background: #fff;
   margin-top: -10px;
   margin-left: -10px;
   box-shadow: 1px 1px 0px #a2a9b1;
   transform: rotate(45deg);
   border-width: 0;

}

.tooltiptext:before { 

   top: 100%;
   bottom: auto;
   border-width: 18px;
   margin-left: -18px;
   border-color: rgba(0, 0, 0, 0.15) transparent transparent transparent;
   pointer-events: none;

}

.tooltip .tooltip .tooltiptext { 

   bottom: auto;
   top: calc(20px + 100%);

}

.tooltip .tooltip .tooltiptext:after { 

   top: auto;
   bottom: 100%;
   border-width: 15px;
   margin-left: -15px;
   border-color: transparent transparent white transparent;
   width: 0;
   height: 0;
   box-shadow: none;
   background: none;
   transform: none;

}

.tooltip .tooltip .tooltiptext:before { 

   top: auto;
   bottom: 100%;
   border-width: 16px;
   margin-left: -16px;
   border-color: transparent transparent #888 transparent;

}

.tooltiptext hr { 

   margin: 10px 0 12px;
   position: relative;
   background: none;

}

.tooltiptext hr:after { 

   content: "";
   display: block;
   width: 100%;
   height: 1px !important;
   position: absolute;
   left: -14px;
   background: #a2a9b1;
   padding: 0 14px;

}

.tooltip:hover > .tooltiptext { 

   visibility: visible;

}

.tooltiptext { 

   opacity: 0;
   transition: opacity 200ms ease, visibility 0s ease 200ms, transform 200ms ease;
   transform: translate(-50%, 8px);

}

.tooltip .tooltip .tooltiptext { 

   transform: translate(-50%, -8px);

}

.tooltip:hover > .tooltiptext { 

   opacity: 1;
   transition-delay: 0s;
   transform: translate(-50%, 0);

}

.tooltiptext a { 

   color: #0645ad;
   border-bottom: 0;

}

.tooltiptext a:visited { 

   color: #0b0080;

}

.tooltiptext a:active { 

   color: #faa700;

}

.tooltiptext a:hover, a:focus { 

   text-decoration: underline;

}

.tooltiptext { 

   color: #252525;

}

.tooltiptext a.new { 

   color: #ba0000;

}

.mwe-math-element { 

   filter: brightness(0%);

}

@media screen and (max-width: 767px) { 

   table {
       max-width: 100%;
       overflow-x: auto;
       display: inline-table !important;
   }

   .hscroll {
       width: 100%;
       overflow-x: scroll;
   }

   .infobox {
       float: left !important;
   }

}

/* Styling for Extension:Tabs */

.tabs-tabbox { 

   position: relative;
   margin: 0 0 15px 0;
   display: flex;
   flex-wrap: wrap;
   gap: 10px 3px;

}

.tabs-tabbox > .tabs-label { 

   padding: 5px 10px;
   background: none;
   border: none;
   border-radius: 0;
   font-weight: bold;
   color: #54595d;
   border-bottom: 2px solid #c3c3c3;
   transition: border-color 0.3s, color 0.3s;
   font-size: 15px;
   margin: 0 !important;
   display: inline-block;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;

}

.tabs-tabbox > .tabs-container { 

   padding: 10px 10px 10px 0;
   margin-top: 0;
   border: none;
   overflow-x: auto;
   flex-basis: 100%;

}

.tabs-tabbox > .tabs-label:hover { 

   background: none;

}

.tabs-tabbox > .tabs-input:checked + .tabs-label, .tabs-input-0:checked + .tabs-input-1 + .tabs-label, .tabs-tabbox > .tabs-label:hover { 

   border-bottom-color: var(--accent-color);
   color: var(--accent-color);

}

.tabs-tabbox [type="radio"], .tabs-tabbox .tabs-tabbox label:nth-of-type(2), .tabs-content.tabs-content-2:empty { 

   display: none !important;

}

.infobox .tabs-tabbox { 

   margin: 2px 0 0 0;
   place-content: center;
   place-items: center;

}

body:not(oldbrowser) .tabs-content { 

   display: none;

}

@media screen and (min-width: 851px) and (max-width: 1099px) { 

   #mw-site-navigation {
       z-index: 99;
   }

}

.tabs-tabbox > .tabs-input:checked + .tabs-label, .tabs-input-0:checked + .tabs-input-1 + .tabs-label { 

   background: none;

}

.tabs-background { 

   width: 100%;
   position: absolute;
   top: 0px;
   left: 0;
   height: 46px;
   background-color: var(--theme-tone-4);
   border-bottom: 2px solid var(--theme-tone-2);

}

.infobox * { 

   z-index: 2;

}

.tabs.tabs-tabbox .tabs-tabbox { 

   margin-top: -3px !important;

}

/* Styling for Extension:Tabs end */

/* Tabs styling (new) */

div.tabdiv > ul > li:hover, div.tabdiv > ul > li.active { 

   background: var(--accent-color);
   border-bottom-color: var(--accent-color);
   color: white;

}

div.tabdiv > ul > li { 

   border-bottom: 2px solid #c3c3c3;
   transition: border-color 0.3s, background-color 0.3s, color 0.3s;
   cursor: pointer;
   padding: 5px 15px;
   height: auto;
   line-height: normal;
   margin-right: 3px !important;
   margin-bottom: 0;
   color: #54595d;
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   background-color: var(--theme-tone-2);
   border-radius: 4px 4px 0 0;

}

div.tabdiv > ul > li a { 

   transition: color 0.3s;
   color: #54595d !important;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;

}

div.tabdiv > ul > li.active a:not(.infobox a), div.tabdiv > ul > li:hover a:not(.infobox a) { 

   color: white !important;

}

div.tabdiv div.tabdiv:not(.forceport) > ul, table.infobox div.tabdiv:not(.forceport) > ul, div.tabdiv, div.tabdiv > ul, div.tabdiv.forceland > ul { 

   border: none;

}

.image > div.tabdiv > ul { 

   padding-top: 7px;
   padding-bottom: 5px;

}

div.tabber-new { 

   display: flex;
   flex-direction: column;

}

div.tabber-new > ul { 

   display: flex;
   flex-wrap: wrap;

}

.tabber-new .tabber-tab { 

   color: #54595d;
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   background-color: var(--theme-tone-2);
   border-radius: 4px 4px 0 0;

}

div.tabdiv.tabber-new > div { 

   padding: 0;

}

.tabber-center .tabber-ul { 

   justify-content: center;

}

div.tabber-vertical { 

   display: flex !important;
   flex-direction: row;

}

.tabber-vertical > .tabber-ul .tabber-tab:first-child { 

   margin-top: 0;

}

.tabber-vertical > .tabber-ul { 

   flex-direction: column;
   margin-right: 25px;

}

div.tabber-border div.tabber-content { 

   border: 1px solid var(--border-color);
   padding: 15px;
   border-radius: 5px;

}

div.tabber-border.tabber-padding > div.tabber-content { 

   padding: 10px 20px;

}

.tabber-content > table:first-child { 

   margin-top: 0;

}

.tabber-content > h2 { 

   margin-top: 0.5em;

}

.tabber-content p:not(.fadeout-container):first-child { 

   margin-top: 0.5em;

}

.tabber-new.fancy > ul { 

   gap: 0 6px;

}

.tabber-new.fancy > .tabber-ul .tabber-tab, .tabber-new.fancy > .tabber-ul .tabber-tab.active { 

   background-color: transparent;
   border-bottom: none;
   transform: skew(-10deg);
   border-radius: 0;
   /* background-image: linear-gradient(to left bottom, #00A5EA 0, transparent 90%), linear-gradient(to left top, #00A5EA 49px, #00E2FE 50px); */
   color: white;
   text-align: center;
   color: #5f5f5f;
   transition: none;
   font-weight: 600;

}

.tabber-new.fancy > .tabber-ul .tabber-tab:hover, .tabber-new.fancy > .tabber-ul .tabber-tab.active { 

   background-image: linear-gradient(to left bottom, #00a5ea 0, transparent 70%),
       linear-gradient(to left top, #20b7e5 49px, #00f6ff 50px);
   color: white;

}

.tabber-new.fancy > .tabber-ul .tabber-tab::after { 

   content: "";
   display: none;
   position: absolute;
   width: 18px;
   right: -11px;
   bottom: -8px;
   height: 18px;
   background-repeat: no-repeat;
   background-image: url("https://elwiki.net/wiki/images/6/64/Tabber_-_Arrow.png");

}

.tabber-new.fancy > .tabber-ul .tabber-tab.active::after { 

   display: block;

}

.tabber-new.fancy > .tabber-content table { 

   border-color: #bdbdbd;

}

.tabber-new.fancy > .tabber-ul .tabber-tab-content { 

   transform: skew(10deg);
   display: block;

}

/* Tabs styling (new) end */

/* Infobox */ .infobox-wrap { 

   padding: 0;
   float: right;
   clear: right;
   position: relative;

}

table.infobox div.tabdiv:not(.forceport) > ul { 

   background-color: #f7f7f7;
   padding: 7px 0 7px 0;
   border-bottom: 2px solid var(--theme-tone-2);
   align-items: center;
   justify-content: center;

}

.infobox .tabber-new > .tabber-content { 

   margin-top: 10px;

}

table.infobox div.tabdiv:not(.forceport) > ul ~ div ul { 

   margin-top: -10px;
   margin-left: -10px;
   margin-right: -10px;
   background: none;
   border-bottom: none;

}

table.infobox div.tabdiv:not(.forceport) > ul > li { 

   padding-top: 0;

}

.infobox div.tabdiv > ul > li:hover, .infobox div.tabdiv > ul > li.active { 

   background: none;
   color: var(--accent-color);
   border-radius: 0;

}

table.infobox div.tabdiv:not(.forceport) > ul > li { 

   background: none;

}

.infobox div.tabdiv > ul > li { 

   padding: 5px 10px;
   margin-right: 5px !important;

}

.infobox .tabber-content p:first-child { 

   margin-top: 5px;

}

.infobox div.tabdiv > ul > li.active a, .infobox div.tabdiv > ul > li:hover a { 

   color: var(--accent-color) !important;

}

/* Remove .mw-body-content stacking context so the tooltip can 

  overlap with elements outside content area and be shown properly */

.mw-body-content { 

   z-index: auto;

}

/* Template fix */ dfn { 

   display: none !important;

}

/* Image margin in headlines */ .mw-headline .image img { 

   padding-bottom: 5px;

}

/* Navbar */ .sidebar-chunk,

  1. p-logo,
  2. p-banner,
  3. personal,
  4. personal-inner,
  5. mw-data-after-content img,
  6. mw-data-after-content a,
placeholder {
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;

}

-moz-placeholder {
   user-select: none;
   -moz-user-select: none;

}

-webkit-placeholder {
   user-select: none;
   -webkit-user-select: none;

}

  1. mw-site-navigation {
   z-index: 3;

}

  1. mw-site-navigation .sidebar-chunk li {
   padding: 0;

}

.sidebar-chunk a { 

   padding: 0.4em 0 0.4em 0.4em;
   font-size: 1.02em;
   font-weight: 600;
   letter-spacing: 0.03em;
   transition: background-color 0.3s, color 0.2s;
   border-radius: 6px;
   border: 0.25em solid #f8f9fa;
   border-bottom: none;

}

.sidebar-chunk ul > li:last-child > a { 

   border-bottom: 0.25em solid #f8f9fa;

}

.sidebar-chunk li { 

   font-size: 1.02em;
   font-weight: 600;

}

.sidebar-chunk a::before, .sidebar-chunk a::after { 

   content: unset !important;

}

.sidebar-chunk ul li > a { 

   padding: 0.3em;
   background-image: none !important;

}

.sidebar-chunk ul li > a[href="#.21"], .sidebar-chunk .mw-selflink { 

   cursor: default;

}

.sidebar-chunk li > ul a { 

   border-color: #fff;

}

.sidebar-chunk a, .sidebar-chunk a:link, .sidebar-chunk a:visited, .sidebar-chunk strong.selflink { 

   text-decoration: none;
   color: #000;

}

.sidebar-chunk li:hover > a, .sidebar-chunk li:hover > a:link, .sidebar-chunk .mw-selflink, .sidebar-chunk a.mw-has-selflink { 

   background: var(--accent-color);
   color: white;

}

  1. mw-related-navigation .sidebar-chunk li {
   padding: 0;

}

  1. mw-site-navigation .sidebar-chunk {
   padding: 1.6em;

}

.sidebar-chunk li:hover { 

   transform: none !important;

}

.sidebar-chunk li > ul { 

   top: 0;
   border-radius: 5px;
   box-shadow: 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%), 0 2px 4px -1px rgb(0 0 0 / 30%);

}

.sidebar-chunk li:hover > ul { 

   pointer-events: all;
   transform: translateX(0);

}

div.sidebar-chunk li > ul { 

   visibility: visible !important;
   pointer-events: none;
   left: 100%;
   margin-left: 0 !important;
   display: block;
   transform: translateX(-7px);
   transition: 0.3s !important;
   border: 1px solid var(--border-color);
   box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1) !important;

}

div.sidebar-chunk h3 { 

   font-size: 1em;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   margin-left: 0.65em !important;

}

.sidebar-chunk { 

   border-radius: 5px;

}

  1. site-tools .mw-portlet-body {
   margin-bottom: 0 !important;

}

  1. mw-related-navigation .sidebar-chunk #p-normal-catlinks .mw-portlet-body {
   margin-bottom: 1.5em;

}

/* vertical grid table */ .vgrid-table { 

   display: grid;
   grid-template-columns: 135px auto;
   gap: 5px;

}

.vgrid-table > div { 

   padding: 2px;
   box-shadow: 0 0 0 1px var(--border-color);
   height: 100%;

}

/* title */ .vgrid-table > .vgrid-cat { 

   font-weight: 600;
   width: 100%;
   height: 100%;
   display: flex;
   place-content: center;
   place-items: center;
   text-align: center;
   background-color: var(--theme-tone-5);

}

/* content */ .vgrid-table > div:not(.vgrid-cat) { 

   display: flex;
   place-content: start;
   flex-direction: row;
   place-items: center;

}

.vgrid-table > div:not(.vgrid-cat) ul { 

   display: flex;
   flex-wrap: wrap;
   margin: 0;
   list-style-type: none;
   gap: 0.3em;
   place-items: center;
   padding: 0 0.9em;
   padding-left: 0;

}

.vgrid-table > div:not(.vgrid-cat) ul li { 

   position: relative;
   padding: 5px;

}

.vgrid-table > div:not(.vgrid-cat) ul li::after { 

   content: "▪";
   position: absolute;
   right: -0.37em;
   top: 50%;
   transform: translateY(-50%);
   font-size: 0.8em;

}

.vgrid-table > div:not(.vgrid-cat) ul li:last-child::after { 

   content: unset;

}

.vgrid-table > div:not(.vgrid-cat) ul li a { 

   font-weight: 600;
   color: black !important;
   padding: 5px;
   border-radius: 4px;
   transition: background-color 0.3s, color 0.2s;
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   text-decoration: none;

}

.vgrid-table > div:not(.vgrid-cat) ul li a:hover, .vgrid-table > div:not(.vgrid-cat) ul li a.mw-selflink { 

   color: white !important;
   background-color: var(--accent-color);

}

.vgrid-table > .vgrid-cat > span { 

   padding: 4px;

}

.vgrid-table .textfloat { 

   color: #fff !important;
   text-shadow: 1px 1px 1px #000 !important;

}

.vgrid-table > div .vgrid-cat { 

   background: var(--theme-tone-5);
   padding: 2px 6px;
   font-weight: 600;
   margin-left: -2px;
   height: 100%;
   width: 135px;
   min-width: 135px;
   text-align: center;
   border-right: 1px solid var(--border-color);
   display: flex;
   align-items: center;
   justify-content: center;

}

table .vgrid-table { 

   margin-bottom: 5px;

}

/* Long table tooltip adjustments */ .long-table { 

   overflow-x: auto;

}

.long-table .tooltiptext:not(.tooltip-up .tooltiptext) { 

   top: calc(20px + 100%);
   box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.15);
   bottom: auto;

}

.long-table .tooltiptext:not(.tooltip-up .tooltiptext):before { 

   bottom: 100%;
   top: unset;
   border-color: transparent transparent rgba(0, 0, 0, 0.15) transparent;

}

.long-table .tooltiptext:not(.tooltip-up .tooltiptext):after { 

   bottom: 100%;
   margin-bottom: -10px;
   top: unset;
   transform: rotate(225deg);

}

/* systems */ .section-systems table th:nth-of-type(2n + 1) { 

   border-top-right-radius: 0;
   border-bottom-right-radius: 0;

}

.section-systems table th:nth-of-type(2n) { 

   border-top-left-radius: 0;
   border-bottom-left-radius: 0;

}

/* status effect icons */ .status { 

   display: inline-flex;
   gap: 0.35em;

}

.status .tooltip { 

   white-space: nowrap;

}

/* Quest */

.job-change-collapsible { 

   border: 1px solid var(--border-color-tone-2);
   border-radius: 4px;
   display: flex;
   flex-direction: column;

}

.job-change-collapsible [style*="1.25em"] * { 

   font-size: 15.2px !important;

}

.job-change-collapsible > .section > .mw-collapsible-toggle { 

   color: white;
   text-shadow: 1px 1px 1px #000;
   top: 5px;
   right: 7px;
   height: fit-content;

}

.job-change-collapsible > .section > .mw-collapsible-toggle:hover { 

   background-color: rgba(255, 255, 255, 0.15);

}

.job-change-collapsible .section .section { 

   border-bottom: 1px solid var(--border-color-tone-2);

}

.job-change-collapsible .section .section:first-of-type { 

   border-bottom: 1px solid var(--border-color-tone-2);

}

.job-change-collapsible .mw-collapsible-toggle-default::before, .job-change-collapsible .mw-collapsible-toggle-default::after, .job-change-collapsible .mw-collapsible-text { 

   display: none;

}

.job-change-collapsible .section { 

   position: relative;

}

.job-change-collapsible .mw-collapsible-toggle { 

   display: block;
   position: absolute;
   right: 5px;
   top: 7px;
   padding: 3px 5px;
   transition: 0.3s;
   border-radius: 4px;

}

.job-change-collapsible .mw-collapsible-toggle:hover { 

   background-color: var(--theme-tone-7);

}

.client-js .job-change-collapsible div.mw-collapsed:not(.mw-made-collapsible):before, .client-js .generic-quest.mw-collapsed:not(.mw-made-collapsible):before { 

   content: unset; /* (Bandaid for FoUC) */

}

.job-change-collapsible .mw-collapsible-toggle::after { 

   display: block;
   content: "Hide";

}

.job-change-collapsible .mw-collapsed .mw-collapsible-toggle::after { 

   display: block;
   content: "Show";

}

.job-change-collapsible .mw-collapsible-toggle { 

   font-weight: 600;

}

.generic-quest { 

   position: relative;
   margin-bottom: 5px;

}

.generic-quest > div { 

   border-radius: 4px;

}

.generic-quest .mw-collapsible-toggle { 

   color: white !important;
   text-shadow: 1px 1px 1px #000;
   font-size: 1em;
   position: absolute;
   right: 7px;
   top: 11px;

}

.generic-quest .mw-collapsible-toggle a { 

   color: white !important;
   font-weight: 600;

}

.generic-quest > .mw-collapsible-content { 

   border: 1px solid var(--border-color);

}

.generic-quest .mw-collapsible-toggle-default::before, .generic-quest .mw-collapsible-toggle-default::after, .generic-quest .mw-collapsible-text { 

   display: none;

}

.generic-quest .mw-collapsible-toggle::after { 

   display: block;
   content: "(Hide)";

}

.generic-quest.mw-collapsed .mw-collapsible-toggle::after { 

   display: block;
   content: "(Show)";

}

.generic-quest .mw-collapsible-toggle { 

   font-weight: 600;

}

.generic-quest > div:not(.mw-collapsed > div) { 

   border-radius: 4px 4px 0 0;

}

/* combo overlay */ .combo-overlay a { 

   display: flex;

}

/* New Infobox */ .infobox-new { 

   float: right;
   border: 1px solid var(--border-color);
   border-radius: 4px;
   margin-left: 1rem;
   max-width: 450px;
   margin-bottom: 1em;

}

.infobox-new-header { 

   padding: 7px;
   text-align: center;
   text-shadow: 1px 1px 1px #000;
   font-weight: 600;
   border-bottom: 1px solid var(--border-color);
   color: white;
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;

}

.infobox-character .infobox-new-image { 

   margin: 5px 0;

}

.infobox-character .infobox-new-header img[alt^="Mini Icon"] { 

   display: none;

}

.infobox-new-image { 

   text-align: center;

}

.infobox-new-image img { 

   max-width: 100%;
   height: auto;

}

.infobox-equipment .infobox-new-image { 

   margin: 5px;

}

.infobox-new .infobox-row { 

   display: grid;
   grid-template-columns: 100px auto;
   border-top: 1px solid var(--border-color);

}

.infobox-song .infobox-row, .infobox-goods .infobox-row { 

   grid-template-columns: 125px auto;

}

.infobox-new .infobox-row.infobox-double-row { 

   grid-template-columns: 100px calc((100% - 100px) / 2) calc((100% - 100px) / 2);

}

.infobox-new .infobox-row-title { 

   padding: 8px;
   border-right: 1px solid var(--border-color);
   font-weight: 600;
   background-color: var(--theme-tone-4);
   display: flex;
   align-items: center;
   word-break: break-word;
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;

}

.infobox-new .infobox-row-content { 

   padding: 8px;
   display: flex;
   align-items: center;

}

.infobox-new .infobox-row-content:nth-child(3) { 

   border-left: 1px solid var(--border-color);

}

.infobox-new .embedvideo { 

   width: 350px;
   height: 197px;

}

.infobox-song .embedvideo { 

   max-width: 375px;
   margin: 0;

}

.infobox-new .infobox-row-content.infobox-video-row { 

   padding: 0;

}

.infobox-new .tabber-ul { 

   place-items: center;
   place-content: center;
   background-color: var(--theme-tone-4);
   border-bottom: 1px solid var(--border-color);
   --accent-color: var(--theme-tone-3);

}

.infobox-new .tabber-tab { 

   margin-top: 0;
   background-color: transparent;
   border-bottom: 0;
   border-radius: 0;
   margin-right: 0 !important;
   padding: 7px 12px;
   font-size: 15px;
   border-right: 1px solid var(--border-color);
   color: var(--text-color) !important;
   font-weight: 600;

}

.infobox-new .tabdiv .tabdiv .tabber-ul { 

   border-bottom: 1px solid var(--border-color);

}

.infobox-new .tabber-tab:first-child { 

   border-left: 1px solid var(--border-color);

}

.infobox-new .infobox-row-content img[alt^="Mini Icon"] { 

   vertical-align: sub;

}

.infobox-new .infobox-row-content table { 

   margin: 5px 0;

}

/* New nmbox */ .nmbox-new { 

   display: grid;
   grid-template-columns: min-content auto;
   border: 1px solid var(--border-color);
   border-radius: 4px;
   margin: 1em 0;
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;

}

.nmbox-new .nmbox-new-header { 

   display: flex;
   place-content: center;
   place-items: center;
   background-color: var(--theme-tone-5);
   padding: 8px;
   border-right: 1px solid var(--border-color);
   border-radius: 4px 0 0 4px;

}

.nmbox-new .nmbox-new-header a { 

   text-decoration: none !important;
   white-space: pre;

}

.nmbox-new .nmbox-new-header a b { 

   color: var(--text-color);
   font-weight: 600;

}

.nmbox-new .nmbox-new-content { 

   display: flex;
   place-items: center;

}

.nmbox-new ul { 

   display: flex;
   place-items: center;
   list-style-type: none;
   margin: 0;
   flex-wrap: wrap;

}

.nmbox-new ul li { 

   display: block;

}

.nmbox-new ul a { 

   color: var(--text-color);
   text-decoration: none !important;
   display: flex;
   place-content: center;
   place-items: center;
   padding: 8px;
   transition: background-color 0.2s;
   font-size: 14px;
   direction: ltr;

}

.nmbox-new ul .mw-selflink, .nmbox-new ul b { 

   font-weight: 600;
   color: var(--text-color);

}

.nmbox-new ul a:hover { 

   background-color: var(--theme-tone-5);

}

/* Tables */ table[cellpadding="5"][border="1"][style], table[cellpadding="5"][border="1"][style] td { 

   border-color: #c1c1c1;

}

table[cellpadding="5"][border="1"][style] tr[style], table[cellpadding="5"][border="1"][style] tr[style] th { 

   border: 1px solid rgb(71, 71, 71);

}

tr[style*="#444444"] th { 

   color: white;
   text-shadow: none !important;

}

tr[style*="background:#444444"] a { 

   color: white !important;
   text-shadow: none !important;

}

table[cellpadding="5"][border="1"][style] tr[style*="#444444"], table[cellpadding="5"][border="1"][style] tr[style*="#444444"] th { 

   border-color: black;

}

/* Char stats */ .char-stats { 

   display: inline-grid;
   grid-template-columns: repeat(3, 105px);
   grid-template-rows: repeat(3, 30px);
   gap: 5px;
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;

}

.char-stats-cat, .char-stats-attack-caption, .char-stats-attack { 

   background-color: var(--theme-tone-5);
   color: var(--text-color);
   font-weight: 600;
   display: flex;
   place-items: center;
   place-content: center;
   transform: skew(-7deg);
   border-bottom: 2px solid var(--border-color);

}

.char-stats-cat { 

   place-content: start;
   padding-left: 8px;

}

.char-stats-cat span, .char-stats-attack-caption span, .char-stats-attack img { 

   transform: skew(7deg);

}

.char-stats-active { 

   background-image: url("https://elwiki.net/wiki/images/f/f5/UI_-_Stats_Active.png");
   background-repeat: no-repeat;
   display: flex;
   place-items: center;
   place-content: center;
   color: white;
   font-weight: 600;

}

.char-stats-attack { 

   display: flex;
   place-items: center;
   place-content: center;
   grid-row: span 2;
   /*     background-color: var(--theme-tone-5); */

}

.char-stats-attack img { 

   width: 57px;
   height: auto;

}

/* SkillNav */ .skillnav .separate a:not(.image), .forcenav a:not(.image) { 

   margin-right: 13px;
   font-weight: 600;

}

.skillnav .separate a:not(.image):last-child, .forcenav a:not(.image):last-child { 

   margin-right: 0;

}

.forcenav .forcedot::before { 

   content: "▪";
   margin-right: 13px;

}

.forcenav table.section .section .section th { 

   border-left: 1px solid var(--border-color) !important;
   border-right: 1px solid var(--border-color) !important;
   background: var(--theme-tone-4) !important;

}

table.section > tbody > tr:first-child > th.skillnav-section { 

   background-color: var(--theme-tone-3) !important;
   text-shadow: none;
   border-top: 1px solid var(--border-color) !important;
   border-bottom: 1px solid var(--border-color) !important;
   color: var(--text-color);

}

/* Force tabs */ .force-tabs .parent-tab { 

   border: 1px solid rgb(71, 71, 71);

}

.force-tabs .parent-tab a:not(.mw-selflink) { 

   color: black !important;
   text-decoration: none !important;

}

.parent-tab a { 

   height: 100%;
   display: block;
   padding: 0 0.5em;

}

.force-tabs .parent-alt-tab { 

   transition: 0.3s;

}

.force-tabs .parent-tab.parent-alt-tab a { 

   color: white !important;
   text-shadow: 1px 1px 1px #000;

}

.force-tabs .parent-alt-tab:hover { 

   transform: translateY(-5px);

}

.parent-tabs .mw-selflink { 

   font-weight: 600 !important;

}

/* Warning */ div.mw-warning-with-logexcerpt { 

   padding: 15px;
   border-radius: 6px;
   border: none;
   background: var(--theme-tone-5);
   margin-bottom: 1em;
   border: 1px solid var(--border-color);

}

.mw-warning-with-logexcerpt p:first-of-type { 

   margin-top: 0;

}

.mw-warning-with-logexcerpt strong { 

   font-weight: 600;

}

/* Responsive Navbar */ @media screen and (min-width: 851px) and (max-width: 1099px) { 

   #mw-site-navigation .sidebar-chunk {
       padding: 0 !important;
   }

   #mw-site-navigation .sidebar-inner {
       padding: 1em;
   }

   .sidebar-chunk ul li > a {
       border-color: white;
   }

}

@media screen and (max-width: 850px) { 

   .sidebar-inner,
   .dropdown {
       background: #f8f9fa;
   }

}

Retrieved from "https://elwiki.net:443/wiki/index.php?title=Template:Quest&oldid=759878"