Gamepedia Help Wiki
(Converted #left-navigation and #right-navigation top margin to px measurement to prevent breaking at less common font sizes)
Fdmchaud (talk | contribs)
No edit summary
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
+
/* CSS placed here will be applied to all skins */
   
 
/* For elements which only display in the mobile view */
 
/* For elements which only display in the mobile view */

Revision as of 23:09, 4 November 2019

/* CSS placed here will be applied to all skins */ 

/* For elements which only display in the mobile view */
.mobileonly {
    display: none;
}

/* Custom fonts */
@font-face {
    font-family: 'Verdana';
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: 'Verdana';
    font-style: normal;
    font-weight: 700;
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: local('Montserrat-Regular'), url("https://fonts.gstatic.com/s/montserrat/v5/zhcz-_WihjSQC0oHJ9TCYBsxEYwM7FgeyaSgU71cLG0.woff") format('woff');
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	src: local('Montserrat-Bold'), url("https://fonts.gstatic.com/s/montserrat/v5/IQHow_FEYlDC4Gzy_m8fcgFhaRv2pGgT5Kf0An0s4MM.woff") format('woff');
}
@font-face {
	font-family: 'Noto Sans SC';
	font-style: normal;
	font-weight: 400;
	src:url(//fonts.gstatic.com/ea/notosanssc/v1/NotoSansSC-Regular.woff2) format('woff2'),
    	url(//fonts.gstatic.com/ea/notosanssc/v1/NotoSansSC-Regular.woff) format('woff'),
    	url(//fonts.gstatic.com/ea/notosanssc/v1/NotoSansSC-Regular.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans SC';
	font-style: normal;
	font-weight: 500;
	src:url(//fonts.gstatic.com/ea/notosanssc/v1/NotoSansSC-Medium.woff2) format('woff2'),
    	url(//fonts.gstatic.com/ea/notosanssc/v1/NotoSansSC-Medium.woff) format('woff'),
    	url(//fonts.gstatic.com/ea/notosanssc/v1/NotoSansSC-Medium.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans SC';
	font-style: normal;
	font-weight: 700;
	src:url(//fonts.gstatic.com/ea/notosanssc/v1/NotoSansSC-Bold.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosanssc/v1/NotoSansSC-Bold.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanssc/v1/NotoSansSC-Bold.otf) format('opentype');
}

@font-face {
font-family: "FontAwesome";
font-weight: normal;
font-style: normal;
	src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.7.0");
	src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"),
		url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"),
		url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"),
		url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"),
		url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
}
@font-face{
	font-family: "FontAwesome 5";
	font-style: normal;
	font-weight: 400;
	src: url(https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-regular-400.eot);
	src: url(https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),
		url(https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-regular-400.woff2) format("woff2"),
		url(https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-regular-400.woff) format("woff"),
		url(https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-regular-400.ttf) format("truetype"),
		url(https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-regular-400.svg#fontawesome) format("svg");
}
@font-face{
	font-family: "FontAwesome 5";
	font-style: normal;
	font-weight: 900;
	src: url(https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-solid-900.eot);
	src: url(https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),
		url(https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-solid-900.woff2) format("woff2"),
		url(https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-solid-900.woff) format("woff"),
		url(https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-solid-900.ttf) format("truetype"),
		url(https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-solid-900.svg#fontawesome) format("svg");
}

body.skin-hydra {
	--background-color:#edeeee;
	--content-background:#fafafa;
	--dpl-blue-background:#042862;
	--dpl-dark-background:cyan;
	--dpl-light-background:lightcyan;
	--dpl3-background:#eee;
	--dplparameter-background:#fff3d2;
	--filter:none;
	--gp-icon:url("https://commons.gamepedia.com/media/commons.gamepedia.com/d/df/Gamepedia_light_transparent.png");
	--header-color:#141414;
	--heading-border:transparent;
	--heading-background:#B0E03B;
	--heading-color:#212121;
	--main-heading-color:#F37F20;
	--message-background:#fedc00;
	--sidebar-header: #141414;
	--sidebar-link: #F37F20;
	--text-color: #373737;
	background: var(--background-color);
	color: var(--text-color);
}
body.skin-hydradark {
	--background-color:#101010;
	--content-background:#212121;
	--dpl-blue-background:#042862;
	--dpl-dark-background:#181818;
	--dpl-light-background:#282828;
	--dpl3-background:#2b2b2b;/*#333;*/
	--dplparameter-background:var(--dpl-blue-background);/*#261000;/* #310 good too*/
	--filter:invert(1);
	--gp-icon:url("https://commons.gamepedia.com/media/commons.gamepedia.com/3/38/Gamepedia_dark_transparent.png");
	--header-color:#101010;
	--heading-background:transparent;
	--heading-border:#F37F20;
	--heading-color: #B0E03B;
	--main-heading-color: #B0E03B;
	--message-background:#383838;
	--sidebar-header: #F37F20;
	--sidebar-link: #E0E0E0;
	--text-color: #E0E0E0;
	background: var(--background-color);
	color: var(--text-color);
}
/* Framework */
html {
	--body-font: Montserrat, sans-serif;
}
html[lang="pl"] {
	--body-font: Varela-Regular, sans-serif;
}
html[lang="ru"] { 
	--body-font: Verdana, sans-serif;
}
html[lang="zh"] { 
	--body-font: "Noto Sans SC", sans-serif;
}
body {
   font-family: var(--body-font);
}

h1, 
h2 {
    border-bottom: 1px solid var(--text-color);
    font-family: var(--body-font);
}

h3, 
h4, 
h5, 
h6 {
    font-family: var(--body-font);
}

div#mw-page-base {
  background: var(--header-color);
  padding-top: 80px;
  height: 1.25em;
}

/* Sidebar */

div#mw-panel div.portal,
#mw-panel.collapsible-nav div.portal {
    background-image: none;
}

div#mw-panel div.portal div.body ul li a,
div#mw-panel div.portal div.body ul li a:link,
div#mw-panel div.portal div.body ul li a:visited {
    color: var(--sidebar-link);
}

div#mw-panel div.portal h3,
div#mw-navigation div#mw-panel div.portal h3,
#mw-panel.collapsible-nav div.portal h3 a,
#mw-panel.collapsible-nav .portal.collapsed h3 a,
#mw-panel.collapsible-nav .portal.collapsed h3 {
    color: var(--sidebar-header);
    font-weight: bold;
    text-transform: uppercase;
}

div#mw-panel {
    margin-top: -75px;
}

/* Logo */
#p-logo a {
	background-size:contain;
    width: 500px;
    height: 80px;
    margin-top: 70px;
}

div.vectorTabs,
div.vectorTabs span,
div.vectorTabs ul,
div.vectorTabs ul li,
div.vectorTabs ul li.selected,
div#mw-head div.vectorMenu h3,
div.vectorMenu h3 span {
    background-color: transparent;
    background-image: none;
    border: none;
	text-transform: uppercase;
	font-weight:bold;
	color:#fff;
}

div.vectorTabs li a, div.vectorTabs li a span, div.vectorMenu li a { color:#fff; }
div.vectorMenu div.menu {
	border-color: #343434; 
	background-color: #303030;
	top: 2.2em;
}

div.vectorTabs li.selected a, div.vectorTabs li.selected a:visited { background-color: var(--content-background); }
div#content { 
	margin-top: 0.1em;
	border: none;
}
div#mw-head { margin-top: 20px; }
#left-navigation, #right-navigation { margin-top: 57px; }
div.vectorTabs span a { padding-top: 0.25em; }
div.vectorMenu, div.vectorTabs ul li.mw-watchlink { margin-top: -0.8em; }
#p-search { margin-top: -1em; }
#p-search div#simpleSearch {
    border-radius: 4px;
}
div.vectorMenu h3 span::after { filter: invert(100%); }


/* Watchlist icon */
.vectorTabs #ca-watch.icon a {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+IDxwYXRoIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2YzN2YyMCIgc3Ryb2tlLXdpZHRoPSIuOTk5OTIiIGQ9Ik04LjEwMyAxLjE0NmwyLjE3NSA0LjQwOCA0Ljg2NC43MDctMy41MiAzLjQzMS44MzEgNC44NDUtNC4zNTEtMi4yODctNC4zNTEgMi4yODcuODMxLTQuODQ1LTMuNTItMy40MzEgNC44NjQtLjcwN3oiLz4gPC9zdmc+);
}

.vectorTabs #ca-watch.icon a:hover,
.vectorTabs #ca-watch.icon a:focus {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPiA8ZGVmcz4gPGxpbmVhckdyYWRpZW50IGlkPSJhIj4gPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjYzJlZGZmIi8+IDxzdG9wIG9mZnNldD0iLjUiIHN0b3AtY29sb3I9IiM2OGJkZmYiLz4gPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmZmIi8+IDwvbGluZWFyR3JhZGllbnQ+IDxsaW5lYXJHcmFkaWVudCBpZD0iYiIgeDE9IjEzLjQ3IiB4Mj0iNC41OTYiIHkxPSIxNC4zNjMiIHkyPSIzLjM5NyIgeGxpbms6aHJlZj0iI2EiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIi8+IDwvZGVmcz4gPHBhdGggZmlsbD0iI2YzN2YyMCIgc3Ryb2tlPSIjZjM3ZjIwIiBzdHJva2Utd2lkdGg9Ii45OTk5MiIgZD0iTTguMTAzIDEuMTQ2bDIuMTc1IDQuNDA4IDQuODY0LjcwNy0zLjUyIDMuNDMxLjgzMSA0Ljg0NS00LjM1MS0yLjI4Ny00LjM1MSAyLjI4Ny44MzEtNC44NDUtMy41Mi0zLjQzMSA0Ljg2NC0uNzA3eiIvPiA8L3N2Zz4=);
}

.vectorTabs #ca-unwatch.icon a {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPiA8ZGVmcz4gPGxpbmVhckdyYWRpZW50IGlkPSJhIj4gPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjYzJlZGZmIi8+IDxzdG9wIG9mZnNldD0iLjUiIHN0b3AtY29sb3I9IiM2OGJkZmYiLz4gPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmZmIi8+IDwvbGluZWFyR3JhZGllbnQ+IDxsaW5lYXJHcmFkaWVudCBpZD0iYiIgeDE9IjEzLjQ3IiB4Mj0iNC41OTYiIHkxPSIxNC4zNjMiIHkyPSIzLjM5NyIgeGxpbms6aHJlZj0iI2EiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIi8+IDwvZGVmcz4gPHBhdGggZmlsbD0iI2YzN2YyMCIgc3Ryb2tlPSIjZjM3ZjIwIiBzdHJva2Utd2lkdGg9Ii45OTk5MiIgZD0iTTguMTAzIDEuMTQ2bDIuMTc1IDQuNDA4IDQuODY0LjcwNy0zLjUyIDMuNDMxLjgzMSA0Ljg0NS00LjM1MS0yLjI4Ny00LjM1MSAyLjI4Ny44MzEtNC44NDUtMy41Mi0zLjQzMSA0Ljg2NC0uNzA3eiIvPiA8L3N2Zz4=);
}

.vectorTabs #ca-unwatch.icon a:hover,
.vectorTabs #ca-unwatch.icon a:focus {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+IDxwYXRoIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2YzN2YyMCIgc3Ryb2tlLXdpZHRoPSIuOTk5OTIiIGQ9Ik04LjEwMyAxLjE0NmwyLjE3NSA0LjQwOCA0Ljg2NC43MDctMy41MiAzLjQzMS44MzEgNC44NDUtNC4zNTEtMi4yODctNC4zNTEgMi4yODcuODMxLTQuODQ1LTMuNTItMy40MzEgNC44NjQtLjcwN3oiLz4gPC9zdmc+);
}

.vectorTabs #ca-unwatch.icon a,
.vectorTabs #ca-watch.icon a {
	background-size: 16px;
}
/* Smokie Gradient */

.smokie {
    background:#f4a638;
    background:-moz-linear-gradient(top,  #ff9600, #dfdd38 50%, #c0d43b 100%);
    background:-webkit-gradient(linear, left top, left bottom, color-stop (0% #ff9600), color-stop(50%,#dfdd38), color-stop(100%,#c0d43b ));
    background:-webkit-linear-gradient(top, #ff9600 0%, #dfdd38 50%, #c0d43b 100%);
    background:-o-linear-gradient(top, #ff9600 0%, #dfdd38 50%, #c0d43b  100%);
    background:-ms-linear-gradient(top, #ff9600 0%, #dfdd38 50%, #c0d43b  100%);
    background:linear-gradient(to bottom, #ff9600 0%, #dfdd38 50%, #c0d43b  100%);
}

/* Style for horizontal lists (separator following item).
   IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].
   @source mediawiki.org/wiki/Snippets/Horizontal_lists
   @revision 6 (2014-05-09)
   @author [[User:Edokter]]
 */
.hlist dl,
.hlist ol,
.hlist ul {
    margin: 0;
    padding: 0;
}
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
    margin: 0;
    display: inline;
}
/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
    display: inline;
}
/* Generate interpuncts */
.hlist dt:after {
    content: ": ";
}
.hlist dd:after,
.hlist li:after {
    content: " · ";
    font-weight: bold;
}
.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
    content: none;
}
/* For IE8 */
.hlist dd.hlist-last-child:after,
.hlist dt.hlist-last-child:after,
.hlist li.hlist-last-child:after {
    content: none;
}
/* Add parentheses around nested lists */
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
    content: " (";
    font-weight: normal;
}
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
    content: ") ";
    font-weight: normal;
}
/* For IE8 */
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {
    content: ") ";
    font-weight: normal;
}
/* Put ordinals in front of ordered list items */
.hlist ol {
    counter-reset: listitem;
}
.hlist ol > li {
    counter-increment: listitem;
}
.hlist ol > li:before {
    content: " " counter(listitem) " ";
    white-space: nowrap;
}
.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
    content: " (" counter(listitem) " ";
}

/* This governs the sections on the Community portal */
.cpbox {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}

.cpbox #admins {
    box-sizing: border-box;
    width: calc(33% - 10px);
    margin: 5px;
    flex-grow: 1;
    min-width: 300px;
}

.cpbox #help {
    box-sizing: border-box;
    width: calc(67% - 10px);
    margin: 5px;
    flex-grow: 1;
}

.feature {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    padding: 10px;
}
.cpbox .feature h2:first-of-type{
	margin-top:0;
}
/* Classes permitting setting of alignment on desktop only or differently on desktop and mobile */
/* (See .mobileleft, .mobilecenter, .mobileright in MediaWiki:Mobile.css for the mobile equivalents */
.desktopleft {
    text-align: left;
}

.desktopcenter {
    text-align: center;
}

.desktopright {
    text-align: right;
}
.mwe-popups.flipped-y, .mwe-popups.flipped-x-y { margin-top: -30px; }

/* Front page styles */
div.button a {
	background: var(--main-heading-color);
    color: var(--content-background);
    padding: 0 1em;
    border-radius: 5px;
    font-size: 130%;
    font-weight: bold;
    text-decoration: none;
    display:inline-block;
}

div.button a:hover {
	background-color: #8fb72e;
}
    
.fpmain {
    width: 100%;
    overflow: hidden;
    z-index: 1;
}

.fpbanner {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid #82A8AF;
    box-shadow: 0 2px 5px #687478;
    color: #9CCAD2;
    margin: 0 5px 5px 5px;
    padding: 5px;
    min-height: 80px;
}

.fpbannertable {
    background: transparent;
    border: none;
    display: table;
    width: 100%; 
    min-height: 75px;
    margin: 0;
    padding: 5px;
}

.fpbannercell {
    display: table-cell; 
    text-align: center; 
    vertical-align: middle;
}

.fpbannerblock {
    border: none;
    color: #FFFFFF;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.75);
    font-size: 132%;
    width: 100%;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
}

.fpmidsections {
    float: left;
    width: 100%;
    overflow: hidden;
}

.fpbox {
    background: rgba(170, 170, 170, 0.05);
    border: 1px solid #F37F20;
    box-shadow: 0 0 2px #F37F20;
    color: var(--text-color);
    margin: 5px 5px 5px 5px;
    padding: 0;
    overflow: auto;
}

.fpbox .body { padding: 0 10px 10px; }

.fpbox .mainheading {
    border: none;
    border-bottom: 1px solid #F37F20;
    color: var(--main-heading-color);
    font-size: 150%;
    font-weight: bold;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
    overflow: auto;
}

.fpbox .heading {
    background: var(--heading-background);
    border: none;
    color: var(--heading-color);
    font-size: 132%;
    font-weight: bold;
    margin: 0 0 10px 0;
    padding: 0;
    overflow: auto;
}

.fpbox .heading::after {
	content:'';
	display:block;
	margin:0 auto;
	width: 95%;
	padding-top:5px;
	border-bottom: 1px solid var(--heading-border);
}

.fpmain .columns .leftcol {
    width: 100%;
    margin: 0;
    padding: 0;
}

.fpmain .columns .rightcol {
    width: 100%;
    margin: 0;
    padding: 0;
}

.fpsection1, .fpsection2, .fpsection3, .fpsection4 {
    float: left;
    clear: both; 
    width: 100%;
}

div.fp2columnonly, div.fp3columnonly {
    display: none; 
}

@media (min-width: 790px) {
  .fpsection1 {
    float: left;
    clear: none;
    width: 50%;
  }

  .fpmidsections {
    clear: none;
    float: right;
    width: 50%;
  }

  .fpsection4 {
    float: left;
    clear: none;
    width: 50%;
  }

  div.fp2columnonly {
    display: block; 
  }
}

@media (min-width: 990px) {
  .fpmain .columns .leftcol {
    float: left;
    width: 50%;
    margin: 0;
    padding: 0;
  }

  .fpmain .columns .rightcol {
    float: right;
    width: 50%;
    margin: 0;
    padding: 0;
  }
}

@media (min-width: 1390px) {
  .fpmidsections {
    clear: none;
    float: right;
    width: 66.667%;
  }

  .fpsection1 {
    clear: none;
    width: 33.333%;
  }

  .fpsection2 {
    clear: none;
    width: 50%;
  }

  .fpsection3 {
    clear: none;
    width: 50%;
  }
 
  .fpsection4 {
    clear: left;
    width: 33.333%;
  }

  div.fp2columnonly {
    display: none; 
  }

  div.fp3columnonly {
    display: block; 
  }
}

.fpbox.plain {
    border: none;
    box-shadow: none;
    background: transparent;
}

.fpimagelist ul {
    list-style-type: none;
    list-style-image: none;
}

.fpvideos {
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
}

.fpvideo {
    display: inline-block;
    margin: 0 5px;
}

.columns {
  padding: 0;
  margin: 10px 0 0 0;
  overflow: hidden;
}

.columns .leftcol {
  float: left;
  width: 50%;
  margin: 0;
  padding: 0;
}

.columns .centercol {
  float: left;
  margin: 0;
  padding: 0;
}

.columns .rightcol {
  float: right;
  width: 50%;
  margin: 0;
  padding: 0;
}

ul {
  list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAANCAYAAABhPKSIAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3ggeCzk6oIsHewAAACtJREFUGNNjYBh0gJGBgYHha6PCfpgAd/0DR0aogAOSwgNM2LQzEW0mVtsBjvcLXbwN1UwAAAAASUVORK5CYII=");
}

pre,
.mw-code,
code {
  border: 1px dashed #696969;
  border-radius: 4px;
  background: rgba(171,171,171,0.1);
  color: var(--text-color);
  white-space: pre-wrap;
  word-wrap: break-word;
}
pre code {
	border: 0;
}
pre + pre,
div.mw-code + div.mw-code {
	margin-top: -1px;
}
.mw-highlight { background: none; }

div.toc,
div#toc,
div.mw-warning,
.toccolours {
  border-color: #5d5d5d;
  background: var(--background-color);
  color: var(--text-color);
  margin: 0 0 10px 0;
  padding: 3px 6px;
}

/* Anchors */
a,
a:visited,
a.external,
a.external:visited,
a.extiw,
a.extiw:visited,
div#content a.extiw,
div#content a.extiw:visited,
div#content a.external, 
div#content a.external:visited,
#global-wrapper #mw-indicator-mw-helplink a,
#global-wrapper #preftoc a,
#global-wrapper #preftoc a:active {
    color: #F37F20;
}

#global-wrapper #preftoc li.selected a {
	color: var(--text-color);
}

.ambox {
    background-color: rgba(120,120,120,0.2);
    border-bottom-color: #383838;
    border-right-color: #383838;
    border-top-color: #383838;
    border-collapse: collapse;
    font-size: 95%;
    margin: 0 auto 2px auto;
    width: 80%;
}

.ambox-gray {
    border-left-color: #383838;
}

.ambox.ambox-tiny {
    font-size: 90%;
    margin: 2px 0;
    width: auto;
}

.ambox + .ambox {
     margin-top: -2px;
}

.ambox-text {
     padding: 0.25em 0.5em;
}

.ambox-image {
     padding: 2px 0px 2px 0.5em;
     text-align: center;
     width: 60px;
}

.ambox-tiny .ambox-image {
     padding: 2px 0.5em;
     text-align: left;
     width: auto;
}

/* Ambox colors */
.ambox-blue {
     border-left: 10px solid #1e90ff;
}

.ambox-red {
     border-left: 10px solid #b22222;
}

.ambox-orange {
     border-left: 10px solid #f28500;
}

.ambox-yellow {
     border-left: 10px solid #f4c430;
}

.ambox-purple {
     border-left: 10px solid #9932cc;
}

.ambox-gray {
     border-left: 10px solid #bba;
}

.ambox-green {
     border-left: 10px solid #228b22;
}

/* Ambox small text */
.amsmalltext {
     font-size: smaller;
     margin-left:0.8em;
     margin-top:0.5em;
}


/* Navbox template style */
/* Navbox container style */
.navbox {
    border: 1px solid #9F6A00;
    font-size: 88%;
    text-align: center;
    width: 100%;
    margin: auto;
    padding: 1px;
    clear: both;
}

.navbox-inner,
.navbox-subgroup {
    width: 100%;
}

/* Title, group and above/below styles */
.navbox-group,
.navbox-title,
.navbox-abovebelow {
    text-align: center;	
    padding: 0.25em 1em;
    line-height: 1.5em;
}

/* Group style */
th.navbox-group {				
    white-space: nowrap;
    /* @noflip */
    text-align: right;
}

.navbox,
.navbox-subgroup {
    background-color: transparent;
}

.navbox-list {
    line-height: 1.8em;
    border-color: transparent;	/* Must match background color */
}

/* Level 1 color */
.navbox th,
.navbox-title {
    background-color: #282828;
    border: 0 solid #9F6A00;
    color: #FFFFFF;
}

/* Level 2 color */
.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
    background: #282828;
}

/* Level 3 color */
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
    background: #444444;		
}

/* Odd row striping */
.navbox-odd {
    background: transparent;	
}

/* Even row striping */
.navbox-even {
    background-color: rgba(128,128,128,0.3);	
}

/* Single pixel border between adjacent navboxes */
table.navbox + table.navbox {	
    margin-top: -1px;
}

/* Default styling for Navbar template */
.navbar {
    font-size: 88%;
    font-weight: normal;
}

/* Navbar styling when nested in infobox and navbox */
.navbox .navbar {
    display: block;
    font-size: 100%;
}

.navbox-title .navbar {
    float: left;
    text-align: left;
    margin-right: 0.5em;
    width: 6em;
}

/* Styling for JQuery makeCollapsible, matching that of collapseButton */
.mw-collapsible-toggle {
    font-weight: normal;
    /* @noflip */
    text-align: right;
}

.navbox .mw-collapsible-toggle {
    width: 6em;
}

/* .navbox .mw-collapsible-toggle a, */
.wikitable .mw-collapsible-toggle a {
    color: #F58120 !important;
}

.mw-collapsible-toggle.mw-collapsible-toggle-expanded a, 
.mw-collapsible-toggle.mw-collapsible-toggle-collapsed a {
    color: #F37F20;
}

/* Infobox template style */
.infobox {
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #505050;
    float: right;
    font-size: 89%; 
    margin-bottom: 0.5em;
    padding: 0.2em;
    width: 300px;
}

.infobox td.infoboxlabel {
    border: 2px solid inherit; 
    font-weight: bold;
    padding: 0.5px 7px;
    text-align: right;
}

.infoboxname {
    background-color: #f58120;
    color: #000;
    font-size: 110%;
    font-weight: bold;
    padding: 0.5em;
}

.infoboxdescription {
    background-color: #f58120;
    color: #000;
}

fieldset { border-color: #F37F20; }
#global-wrapper #preferences legend { color: #F37F20; }
.client-js #preferences fieldset { background: none; }

/* [[Template:Message]] */
table.gpmbox {
    background:var(--message-background);
    color:var(--text-color);
}

.scalable img, img.scalable {
    max-width: 100%;
    height:auto;
}

/* class for adding a contrasting glow to an image */
.glow {
    background: rgba(0,0,0,0);
    -webkit-filter: drop-shadow(0px 0px 10px #666);
    filter: drop-shadow(0px 0px 3.5px #666) drop-shadow(1px 1px 1px #666);
}

/* Added and removed character counts */
.mw-plusminus-neg {
    color: #da2d2d;
}

.mw-plusminus-pos {
    color: #039603;
}


/* GeSHi syntax highlighting */
.mw-highlight .kw1 {
    color: var(--text-color);
    font-weight: bold;
}

.mw-highlight .nf {
    color: #02abab;
}


/* Operators */
.mw-highlight .p,
.mw-highlight .o {color: var(--text-color); font-weight: bold;}

/* Comments */
.mw-highlight .c {color: #8d9e6b; font-weight: bold;}

/* HTML Tags */
.mw-highlight .nt {color: #89a228;}

/* IDs */
.mw-highlight .nn {color: #9a9ac3;}

/* Classes */
.mw-highlight .nc {color: #7676ff;}

/* Pseudo-classes */
.mw-highlight .nd {color: #cf82ff;}

/* Properties */
.mw-highlight .k, 
.mw-highlight .kp {color: var(--text-color); font-weight: normal;}

/* Keywords */
.mw-highlight .nb {color: #ff5858;}

/* Text values, strings */
.mw-highlight .kc,
.mw-highlight .s1,
.mw-highlight .s2,
.mw-highlight .sx,
.mw-highlight .n {color: #03a503;}

/* Numeric values */
.mw-highlight .mi,
.mw-highlight .mf {color: #02abab; font-weight: bold;}

/* Units */
.mw-highlight .kt {color: #a57184;}

/* #Color values */
.mw-highlight .mh {color: #7d9c0e;}

/* !important */
.mw-highlight .cp {color: #F37F20;}


#searchlog th {
    background: var(--background-color);
}

#searchlog,
#searchlog th,
#searchlog td {
    border: 1px solid #808080;
}

/* Thumbnails */
html .thumbimage {
    background-color: transparent;
}

/* JSON */
.mw-json { color: #fff; }
.mw-json tr { background-color: rgba(105,105,105,0.2); }
.mw-json th { background-color: #000; }
.mw-json .value, .mw-json-single-value { background-color: #424242; }

/* Wikitable */
table.wikitable {
  background: transparent;
  border: none;
  color: #373737;
  margin: 0 0 10px 0;
  padding: 3px 6px;
}

table.wikitable th,
table.wikitable tr th,
table.wikitable > tr > th,
table.wikitable > * > tr > th {
  border: 1px solid #5a5a5a;
  background: rgba(128,128,128,0.5);
  color: var(--text-color);
}

table.wikitable td,
table.wikitable tr td,
table.wikitable > tr > td,
table.wikitable > * > tr > td {
  border: 1px solid #5a5a5a;
  background: transparent;
}

/* Match CategoryTree arrow color with theme */
.CategoryTreeToggle { color: #F37F20; }


.TablePager,
.mw-datatable,
table.mw_metadata {
    background-color: transparent;
    border: 1px solid #969696;
}

.TablePager th,
.mw-datatable th,
table.mw_metadata th {
    background-color: rgba(96, 96, 96, 0.5);
    border: 1px solid #969696;
    color: #ffffff;
}

.TablePager tr:hover td,
.mw-datatable tr:hover td {
    background-color: rgba(128,128,128, 0.3) !important;
    color: #ffffff;
}

.TablePager th a,
.mw-datatable th a,
table.mw_metadata th a {
    color: #FFFFFF !important;
}
 
.TablePager td,
.mw-datatable td,
table.mw_metadata td {
    background-color: transparent;
    border: 1px solid #969696;
}

.copyright-icon { filter:var(--filter); }

/* Fix for making areas more readable in either Hydra or Hydradark */
.bg-highlight {
    background-color: rgba(80, 80, 80, 0.2);
    border: 1px solid #080808;
}

/* Gamepedia images tweak */
.gamepedia-icon {
    background-image: var(--gp-icon);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 500px;
    height: 111px;
}

/* for "edit this page" tab and "discussion" tab etc */
.pagetab {
     border-style: solid solid none;
     border-width: thin;
     border-color: #808080;
     padding:0.25ex 1ex 0ex;
     font-size: 95%;
}

/* Expand section arrow tweak */
.mw-ui-icon.mw-ui-icon-before::before,
.mw-ui-icon.mw-ui-icon-element::before {
    filter: var(--filter);
}

/* Visual editor */
.oo-ui-decoratedOptionWidget .oo-ui-iconElement-icon,
.oo-ui-decoratedOptionWidget .oo-ui-indicatorElement-indicator,
.oo-ui-fieldsetLayout.oo-ui-iconElement > .oo-ui-fieldsetLayout-header > .oo-ui-iconElement-icon {
    filter: var(--filter);
}

.oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon,
.oo-ui-popupToolGroup.oo-ui-labelElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label,
.oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-iconElement > .oo-ui-tool-link .oo-ui-iconElement-icon {
    filter: var(--filter);
}

/* Notifications */
.mw-echo-ui-notificationsInboxWidget-toolbarWrapper,
.mw-echo-ui-crossWikiNotificationItemWidget-group,
.mw-echo-ui-bundleNotificationItemWidget-group {
	background: inherit;
}

/* Special:BotPasswords */
.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:first-child td {
	background-color: inherit;
}

.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(2n) td {
	background-color: rgba(128,128,128,0.5);
}

div.mainavatar {
    filter: drop-shadow(0px 0px 3.5px #666) drop-shadow(1px 1px 1px #666);
}

.ve-ui-mwSaveDialog-options {
    background-color: var(--background-color);
}

.ve-ui-mwSaveDialog-license {
    color: var(--text-color);
}

.oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
    background-color: var(--background-color);
    border: 1px solid #383838;
    box-shadow: 0 2px 2px 0 rgba(128,128,128,0.4);
}

.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title,
.oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
    color: var(--text-color);
}

.oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover,
.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover,
.oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-widget-enabled:hover,
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-optionWidget.oo-ui-decoratedOptionWidget.oo-ui-outlineOptionWidget.oo-ui-outlineOptionWidget-level-0.oo-ui-iconElement.oo-ui-labelElement:hover {
    background-color: rgba(128,128,128,0.4);
}

.ve-ui-specialCharacterDialog .oo-ui-outlineOptionWidget,
.ve-ui-specialCharacterPage, 
.ve-ui-specialCharacterPage h3 { 
	color: var(--text-color);
}

.oo-ui-popupToolGroup.oo-ui-widget-enabled.oo-ui-popupToolGroup-active {
    background-color: rgba(128,128,128,0.4);
}
.warning { color: #F37F20; }

table.zebra > tbody > tr:nth-child(2n) {background-color: rgba(128,128,128,0.2);}
.ve-init-mw-switchPopupWidget .oo-ui-checkboxInputWidget [type='checkbox']{ opacity:1; }

.interwiki-ru { font-family: Verdana, sans-serif; }
ol.references li:target, sup.reference:target { background-color: rgba(128,128,128,0.5); }

/* PageForms edit screen fix */
.skin-hydradark div.editSchemaSection .sectionHeader {
	    color: #000;
}

/***************************
* Used by [[Template:Key]] *
****************************/
.key {
	display:inline-block;
	white-space:nowrap;
}

.key kbd {
  padding: 0.1em 0.6em 0.1em 0.6em; 
  margin-right:2px; 
  font-size:85%; 
  font-family:inherit; 
  font-style:normal;
  border-radius: .2em; 
}

/* Dark Wiki Variation */
.keysDark {
  color:black; 
  border: 1px solid rgb(170, 170, 170); 
  box-shadow: 0.1em 0.2em 0.2em rgb(221, 221, 221); 
  background-image: linear-gradient(to bottom, rgb(238, 238, 238), rgb(249, 249, 249), rgb(238, 238, 238)); 
  background-color: rgb(249, 249, 249); 
}

/* Light Wiki Variation */
.keysLight {
  color:white; 
  border: 1px solid rgb(0, 0, 0); 
  box-shadow: 0.1em 0.2em 0.2em rgb(0, 0, 0); 
  background-image: linear-gradient(to bottom, rgb(0, 0, 0), rgb(15, 15, 15), rgb(30, 30, 30)); 
  background-color: rgb(30, 30, 30); 
}

/******************************
* End Template:Key coloration *
*******************************/

/* [[Extension:Header Tabs/Example]] style fix */
.skin-hydradark .ui-state-active, .skin-hydradark .ui-widget-content .ui-state-active, .skin-hydradark .ui-widget-header .ui-state-active,
.skin-hydradark .ui-state-default, .skin-hydradark .ui-widget-content .ui-state-default, .skin-hydradark .ui-widget-header .ui-state-default { background-image: none; background-color: #222; border-color: #F37F20; }
.skin-hydradark .ui-state-default a, .skin-hydradark .ui-state-default a:link, .skin-hydradark .ui-state-default a:visited { color: #FFF; }
.skin-hydradark .ui-state-default a:hover { color: #F37F20; }

.skin-hydradark .ui-state-hover,
.skin-hydradark .ui-widget-content .ui-state-hover,
.skin-hydradark .ui-widget-header .ui-state-hover,
.skin-hydradark .ui-state-focus,
.skin-hydradark .ui-widget-content .ui-state-focus,
.skin-hydradark .ui-widget-header .ui-state-focus {
  border-bottom: none;
  background: #222;
  color: #F37F20;
}
.skin-hydradark #headerTabs.large .ui-widget-content a { color: #F37F20; }
/* End [[Extension:Header Tabs/Example]] style fix */

/*******************************
*     Extension:DPL Manual     *
********************************/
.dpl.blue-background {
	background-color:var(--dpl-blue-background);
}
.dpl.dark-background {
	background-color:var(--dpl-dark-background);
}
.dpl.light-background {
	background-color:var(--dpl-light-background);
}
#dpl pre,
#dpl .mw-code,
#dpl code {
    border: 1px solid #505050;
    background: #282828;/*IE8 doesn't support rgba() notation*/
    background: rgba(115,115,115,0.1);
}
#dpl code.mw-highlight,
#dpl code code {
	background: none;
	border: 0;
	padding: 0;
}
.dpl.secsep pre {
	margin: 0;
}
.dpl.secsep p,
.dpl.secsep br {
	margin: 0;
	line-height: .5;
}
table.dpl.multisec pre {
	margin: 0;
}
table.dpl.multisec > * > tr {
	vertical-align: top;
}
table.dpl.multisec > * > tr:first-child td {
	padding: 0 20px 5px;
}
table.dpl.multisec tr.dpl.pre td {
	padding: 0;
}
table tr.dpl.cols2 > td {
	width: 50%;
}
table tr.dpl.cols2.pre > td {
	padding-bottom: 5px;
}
/* Template:DPL3 */
.dpl3 {
	background-color:var(--dpl3-background);
	font:120% Courier, monospace;
}
/* Template:DPL parameter */
table.wikitable.dplparameter {
	width:100%;
	border-spacing:0;
}
table.wikitable.dplparameter > * > tr > td:first-child {
	background-color:var(--dplparameter-background);
	padding:5px;
	width:200px;
	font:130% Courier, monospace;
}
table.wikitable.dplparameter > * > tr > td:nth-child(2) {
	padding:5px;
}
/*******************************/

/* front page - contact user:kittymmeow for questions */
#fp-container {
	display: grid;
	grid-template-areas: "a" "b" "c" "d";
	grid-template-columns: 100%;
}
@media screen and (min-width:990px) {
	#fp-container {
		grid-template-areas: "a b" "c d";
		grid-template-columns: 50% 50%;
	}
}
@media screen and (min-width:1350px) {
	#fp-container {
		grid-template-areas: "a b c" "a b d";
		grid-template-columns: 33.3% 33.3% 33.3%;
	}
}

.fp-section {
	display: flex;
	flex-wrap: wrap;
}

#fp-1 {
	grid-area: a;
}

#fp-2 {
	grid-area: b;
}

#fp-3 {
	grid-area: c;
}

#fp-4 {
	grid-area: d;
}

.fp-box {
	background: rgba(170,170,170,0.05);
	border: 1px solid #F37F20;
	box-shadow: 0 0 2px #F37F20;
	color: var(--text-color);
	margin: 0.5em;
	padding: 0.75em;
	width: calc(100% - 2px);
	box-sizing: border-box;
}

.fp-heading {
	background: var(--heading-background);
	color: var(--heading-color);
	font-size: 132%;
	font-weight: bold;
	margin: 0 0 0.5em;
	padding: 0 0 0.25em;
	text-align: center;
	border-bottom: 1px solid var(--heading-border);
}

.fp-box.plain {
	border: none;
	box-shadow: none;
	padding: 0;
	background: transparent;
}

.fp-mainheading {
	border-bottom: 1px solid #F37F20;
	color: var(--main-heading-color);
	font-size: 150%;
	font-weight: bold;
	margin: 0 0 0.5em;
	padding: 0 0 0.25em;
	overflow: auto;
}

.fp-subheading {
	margin-bottom: 0.5em;
	font-size: 110%;
	line-height: 1.2;
}

.fp-columns {
	-webkit-column-width: 12em;
	-moz-column-width: 12em;
	column-width: 12em;
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	-webkit-column-gap: 0.25em;
	-moz-column-gap: 0.25em;
	column-gap: 0.25em;
}

.fp-columns ul {
	margin: 0;
}

.fp-columns li {
	display: block;
	width: 100%;
	margin-bottom: 0.25em;
	box-sizing: border-box;
	border: 1px solid rgba(243, 127, 32, 0.2);
	background: rgba(170,170,170,0.05);
	border-radius: 4px;
}

.fp-columns li a,
.fp-columns li a.external {
	padding: 0.25em 0.5em;
	display: block;
	border-radius: 4px;
	text-decoration: none;
	box-sizing: border-box;
	background-image: none;
}

.fp-columns li a:hover {
	background: rgba(0,0,0,0.2);
	text-decoration: none;
}

.fp-box .embedvideo,
.fp-box .embedvideowrap {
	width: 100%!important;
	max-width: 300px;
	margin: 0 auto;
}

.fp-box .embedvideowrap iframe {
	width: 100%!important;
}

#fptweets { 
  min-height:calc(350px + 2.5em); /* so that ad/cookie blockers don't break the layout if they hide it */
}

@media screen and (max-width:720px) {
	.fp-welcomeimage {
		display: none;
	}
}

div#mw-panel div.portal li a[href="https://discord.gg/fandom"] {
    display: inline-block;
    position:relative;
    height: 20px;
    width: 119px;
    margin-top: 10px;
}

div#mw-panel div.portal li a[href="https://discord.gg/fandom"]::before {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    content:"";
    background:url(https://discordapp.com/api/guilds/563020189604773888/embed.png) no-repeat;
}

.tutorial-real-regex::before {
  font-family: "FontAwesome";
  content:'\f058';
  font-weight:bold;
  color:green;
}

/********************************
* Used on [[Range blocks/IPv6]] *
*********************************/
.skin-hydradark .gray {
  color:gray;
}

.skin-hydradark .red {
  color:red;
}

.skin-hydradark .orange {
  color:orange;
}

.skin-hydradark .yellow {
  color:yellow;
}

.skin-hydradark .green {
  color:green;
}

.skin-hydradark .blue {
  color:aqua;
}

/****/

.skin-hydra .gray {
  color:gray;
}

.skin-hydra .red {
  color:darkred;
}

.skin-hydra .orange {
  color:#BF7500;
}

.skin-hydra .yellow {
  color:#A59F5E;
}

.skin-hydra .green {
  color:green;
}

.skin-hydra .blue {
  color:blue;
}
/***********************
* End IPv6 list colors *
************************/

/* Notifications */
.reverb-npnrb-site a:link,
.reverb-npnrb-site a:active,
.reverb-npnrb-site a:visited,
.skin-hydra .reverb-npnrb-site a:link,
.skin-hydra .reverb-npnrb-site a:active,
.skin-hydra .reverb-npnrb-site a:visited,
.skin-minerva .reverb-npnrb-site a:link,
.skin-minerva .reverb-npnrb-site a:active,
.skin-minerva .reverb-npnrb-site a:visited {
	color: var(--text-color);
}