MediaWiki:Common.css

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

/* pz-theme */
:root {
  --color-mw: #eaecf0;
  --color-mw-border: #a2a9b1;
  --color-red: #68191b;
  --color-blue: #185893;
  --link-red: #ddd6c1;
  --link-blue: #c1d6dd;
  --background-mw: #f8f9fa;
  --background-mw-even: #f2f2f2;
  --background-mw-odd: #f9f9f9;
  --background-mw-heading: #e5e5e5;
  --background-red: #f4f3eb;
  --background-blue: #ebf3f4;
  --background-message-error: #fee7e6;
  --background-message-warn: #fef6e7;
  --background-message-info: #a3caff;
  --border-mw: 1px solid #a2a9b1;
  --border-red: 1px solid #460c10;
  --border-blue: 1px solid #0f304a;
  --border-message-error: 1px solid #d33;
  --border-message-warn: 1px solid #fc3;
  --border-message-info: 1px solid #3366cc;
  --border-radius: 0.5em;
  --shadow-mw: 0 0 0.5em 0.1em #00000080;
}

/* Provide pixel art support, from https://stackoverflow.com/a/8888964/ */
ul.mw-search-results > li.mw-search-result img,
.gallery .gallerybox div.thumb img,
img.pixelart {
    image-rendering: optimizeSpeed;             /* Legal fallback */
    image-rendering: -moz-crisp-edges;          /* Firefox        */
    image-rendering: -o-crisp-edges;            /* Opera          */
    image-rendering: -webkit-optimize-contrast; /* Safari         */
    image-rendering: optimize-contrast;         /* CSS3 Proposed  */
    image-rendering: pixelated;                 /* CSS4 Proposed  */
    image-rendering: crisp-edges;               /* CSS4 Proposed  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+           */
}

/* Remove text decoration on link */
.no-decoration a:hover {
    text-decoration: none;
}

/* TEMPORARY CLASS: change link colour for mw collapsible toggle */
td.mw-collapse-data-color > span > a {
    color: #ffffff; 
    text-decoration: none; 
}

/* Clearer background color for wikitable */
table.wikitable > tr > th,
table.wikitable > * > tr > th {
  background-color: var(--background-mw-heading);
}
table.wikitable tr:nth-child(even) td{
	background-color: var(--background-mw-even);
}
table.wikitable tr:nth-child(odd) td{
	background-color: var(--background-mw-odd);
}
/* rounded corners wikitable */
table.wikitable {
    border-collapse: separate;
    border-spacing: 0;
    border: none;
    background: none;
    padding: 0;
}
table.wikitable > tr:first-child > th:first-child,
table.wikitable > tr:first-child > td:first-child,
table.wikitable > * > tr:first-child > th:first-child,
table.wikitable > * > tr:first-child > td:first-child {
    border-top-left-radius: var(--border-radius);
}
table.wikitable > tr:first-child > th:last-child,
table.wikitable > tr:first-child > td:last-child,
table.wikitable > * > tr:first-child > th:last-child,
table.wikitable > * > tr:first-child > td:last-child {
    border-top-right-radius: var(--border-radius);
}
table.wikitable > tr:last-child > td:first-child,
table.wikitable > tr:last-child > th:first-child,
table.wikitable > * > tr:last-child > td:first-child,
table.wikitable > * > tr:last-child > th:first-child {
    border-bottom-left-radius: var(--border-radius);
}
table.wikitable > tr:last-child > td:last-child,
table.wikitable > tr:last-child > th:last-child,
table.wikitable > * > tr:last-child > td:last-child,
table.wikitable > * > tr:last-child > th:last-child {
    border-bottom-right-radius: var(--border-radius);
}
/* remove some rounded corners for sortable wikitable  */
table.wikitable.sortable > tr:first-child > td:first-child,
table.wikitable.sortable > * > tr:first-child > td:first-child {
    border-top-left-radius: 0;
}
table.wikitable.sortable > tr:first-child > td:last-child,
table.wikitable.sortable > * > tr:first-child > td:last-child {
    border-top-right-radius: 0;
}
table.wikitable.sortable > tr:last-child > th:first-child,
table.wikitable.sortable > * > tr:last-child > th:first-child {
    border-bottom-left-radius: 0;
}
table.wikitable.sortable > tr:last-child > th:last-child,
table.wikitable.sortable > * > tr:last-child > th:last-child {
    border-bottom-right-radius: 0;
}
/* Custom table styles */
table.wikitable.theme-red > tr > th,
table.wikitable.theme-red > * > tr > th {
  background-color: var(--color-red);
  color: white;
}
table.wikitable.theme-blue > tr > th,
table.wikitable.theme-blue > * > tr > th {
  background-color: var(--color-blue);
  color: white;
}
table.wikitable.theme-red > tr > th a,
table.wikitable.theme-red > * > tr > th a {
  color: var(--link-red);
}
table.wikitable.theme-blue > tr > th a,
table.wikitable.theme-blue > * > tr > th a {
  color: var(--link-blue);
}
table.wikitable.theme-red > tr > th,
table.wikitable.theme-red > tr > td,
table.wikitable.theme-red > * > tr > th,
table.wikitable.theme-red > * > tr > td {
  border: var(--border-red);
}
table.wikitable.theme-blue > tr > th,
table.wikitable.theme-blue > tr > td,
table.wikitable.theme-blue > * > tr > th,
table.wikitable.theme-blue > * > tr > td {
  border: var(--border-blue);
}

/* Button style */
table.button {
}
table.button td {
    background-color: #68191b;
    border: 2px solid #000000;
    color: #ffffff;
}
table.button td:hover {
    background-color: #b22328;
}
td.button a {
    display: block;
    width: 100%;
    height: 100%;
}
.button a {
    text-decoration: none; 
}

/* Make the list of references smaller */
ol.references {
	font-size: 100%;
} 
.references-small {
	font-size: 90%; 
}   

/* VALIDATOR NOTICE: the following is correct, but the W3C validator doesn't accept it */
/* -moz-* is a vendor-specific extension (CSS 2.1 4.1.2.1) */
/* column-count is from the CSS3 module "CSS Multi-column Layout" */
/* Please ignore any validator errors caused by these two lines */
.references-2column {
	font-size: 90%;
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2; 
}

/* Highlight clicked reference in blue to help navigation */
ol.references > li:target, sup.reference:target, cite:target {
	background-color: #ddeeff;
}

/* Ensure refs in table headers and the like aren't bold or italic */
sup.reference {
	font-weight: normal;
	font-style: normal;
}

/* Styling for citations */
cite {
	font-style: normal;
	word-wrap: break-word;
}

/* For linked citation numbers and document IDs, where
	 the number need not be shown on a screen or a handheld,
	 but should be included in the printed version */
@media screen, 
handheld, 
projection {
	cite *.printonly {
		display: none;
	}
}   

/* so they need to be the same width. */
/* Infobox template style */
/* TODO: remove after "infobox-old" replaced by "infobox" (new Template:Infobox) */
.infobox-old {
	border: 1px solid #aaaaaa;
	background-color: #f9f9f9;
	color: black;
	margin: 0.5em 0 0.5em 1em;
	padding: 0.2em;
	float: right;
	clear: right;
}
.infobox-old td,
.infobox-old th {
	vertical-align: top;
}
.infobox-old caption {
	font-size: larger;
}
.infobox-old.bordered {
	border-collapse: collapse;
}
.infobox-old.bordered td,
.infobox-old.bordered th {
	border: 1px solid #aaaaaa;
}
.infobox-old.bordered
.borderless td,
.infobox-old.bordered
.borderless th {
	border: 0;
}
.infobox-old.sisterproject {
	width: 20em;
	font-size: 90%;
}
.infobox-old.standard-talk {
	border: 1px solid #c0c090;
	background-color: #f8eaba;
}
.infobox-old.standard-talk.bordered td,
.infobox-old.standard-talk.bordered th {
	border: 1px solid #c0c090;
}

/* Styles for bordered infobox with merged rows */
.infobox-old.bordered .mergedtoprow td,
.infobox-old.bordered .mergedtoprow th {
	border: 0;
	border-top: 1px solid #aaaaaa;
	border-right: 1px solid #aaaaaa;
}
.infobox-old.bordered .mergedrow td,
.infobox-old.bordered .mergedrow th {
	border: 0;
	border-right: 1px solid #aaaaaa;
}

/* Styles for geography infoboxes, e.g., countries, country subdivisions, cities, etc.*/
.infobox-old.geography {
	text-align: left;
	border-collapse: collapse;
	line-height: 1.2em;
	font-size: 90%;
}
.infobox-old.geography  td,
.infobox-old.geography  th {
	border-top: solid 1px #aaaaaa;
	padding: 0.4em 0.6em 0.4em 0.6em;
}
.infobox-old.geography .mergedtoprow td,
.infobox-old.geography
.mergedtoprow th {
	border-top: solid 1px #aaaaaa;
	padding: 0.4em 0.6em 0.2em 0.6em;
}
.infobox-old.geography
.mergedrow td,
.infobox-old.geography
.mergedrow th {
	border: 0;
	padding: 0 0.6em 0.2em 0.6em;
}
.infobox-old.geography
.mergedbottomrow td,
.infobox-old.geography
.mergedbottomrow th {
	border-top: 0;
	border-bottom: solid 1px #aaaaaa;
	padding: 0 0.6em 0.4em 0.6em;
}
.infobox-old.geography
.maptable td,
.infobox-old.geography
.maptable th {
	border: 0;
	padding: 0;
}

/* Style rules for media list templates */
div.medialist {
	min-height: 50px;
	margin: 1em;
	background-position: top left;
	background-repeat: no-repeat;
}
div.medialist ul {
	list-style-type: none;
	 list-style-image: none;
	margin: 0;
}
div.medialist ul li {
	padding-bottom: 0.5em;
}
div.medialist ul li li {
	font-size: 91%;
	padding-bottom: 0;
}

/* Colored watchlist numbers */
.mw-plusminus-pos {
	color: #006400;
}

/* dark green */
.mw-plusminus-neg {
	color: #8b0000;
}

/* dark red */
.rellink,
.dablink {
	font-style: italic;
	padding-left: 2em;
}
.rellink i,
.dablink i {
	font-style: normal;
}

/* Style for horizontal UL lists */
.horizontal ul {
	padding: 0;
	margin: 0;
}
.horizontal li {
	padding: 0 0.6em 0 0.4em;
	display: inline;
	border-right: 1px solid;
}
.horizontal li:last-child {
	border-right: none;
	padding-right: 0;
}

/* When <div class="nonumtoc"> is used on the table of contents,
	the ToC will display without numbers */
.nonumtoc .tocnumber {
	display: none;
}
.nonumtoc #toc ul,
.nonumtoc .toc ul {
	line-height: 1.5em;
	list-style: none;
	margin:
	.3em 0 0;
	padding: 0;
}
.nonumtoc #toc ul ul, 
.nonumtoc
.toc ul ul {
	 margin: 0 0 0 2em; 
}

/* Prevent line breaks in silly places:
	1) links when we don't want them to
	2) HTML formulae
	3) Ref tags with group names <ref group="Note"> --> "[Note 1]" */
.nowraplinks a, span.texhtml, sup.reference a {
	white-space: nowrap;
}

.thumbinner {
	min-width: 100px;
}

/* Inline divs in ImageMaps (code borrowed from de.wiki) */
.imagemap-inline div {
	display: inline;
}

/* Increase the height of the image upload box */
#wpUploadDescription {
	height: 13em;
}

/* Reduce line-height for <sup> and <sub> */
sup, sub {
	line-height: 1em; }

/* Prevent floating boxes from overlapping any category listings,
	file histories, edit previews, and edit [Show changes] views */
#mw-subcategories, #mw-pages, #mw-category-media,
#filehistory, #wikiPreview, #wikiDiff {
	clear: both;
}

/* Div based "warning" style system messages (system messages). */
div.mw-warning-with-logexcerpt, 
div.mw-lag-warn-high, 
div.mw-cascadeprotectedwarning {
	clear: both;
	margin: 0.2em 0;
	border: 1px solid #bb7070;
	background: #ffdbdb;
	padding: 0.25em 0.9em;
}
/* Div based "system" style messages (system messages). */
div.mw-lag-warn-normal, 
div.noarticletext, 
div.fmbox-system {
	clear: both;
	margin: 0.2em 0;
	border: 1px solid #aaa;
	background: #f9f9f9;
	padding: 0.25em 0.9em;
}

/* Selectively hide headers in WikiProject banners */
.wpb .wpb-header             { display: none; }
.wpbs-inner .wpb .wpb-header { display: block; }     /* for IE */
.wpbs-inner .wpb .wpb-header { display: table-row; } /* for real browsers */
.wpbs-inner .wpb-outside     { display: none; }      /* hide things that should only display outside shells */

/* Allow limiting of which header levels are shown in a TOC;
	<div class="toclimit-3">, for instance, will limit to
	showing ==headings== and ===headings=== but no further
	(as long as there are no =headings= on the page, which
	there shouldn't be according to the MoS).  */
.toclimit-2 .toclevel-2,
.toclimit-3 .toclevel-3,
.toclimit-4 .toclevel-4,
.toclimit-5 .toclevel-5,
.toclimit-6 .toclevel-6,
.toclimit-7 .toclevel-7 {
	display: none;
}

/* Numbered lists (ordered) */
/* Use #, ##, ### wikitext to produce the usual system of numbered lists (1, 2, 3; then a, b, c; then i, ii, iii) */
ol { 
	list-style-type: decimal; 
}
ol li > ol { 
	list-style-type: lower-alpha; 
}
ol li > ol li > ol { 
	list-style-type: lower-roman; 
}

/* Bulleted lists (unordered) */
/* Use *, **, *** wikitext to produce the usual system of bulleted lists (•; then ◦; then ▪) */
ul { 
	list-style-image: none;
	list-style-type: disc;
}
ul li > ul { 
	list-style-type: circle;
}
ul li > ul li > ul { 
	list-style-type: square;
}

/* Regional logos
.mw-wiki-logo:lang(en-gb) {
	background-image: url(https://pzwiki.net/w/images/3/37/Spiffo_rummage.png) !important;
} */

/* Custom CSS for code */
pre.code {
    background-color: #f8f9fa;
    border: 1px solid #eaecf0;
    color: #000000;
    line-height: 1.3;
    padding: 1em;
    tab-size: 4;
}
pre.code span.comment {
    color: #408080;
    font-style: italic;
}
pre.code span.function {
    color: #0000ff;
}
pre.code span.keyword {
    color: #008000;
    font-weight: bold;
}
span.obsolete {
    color: #ff0000;
}

/* Template:Section */
div.pz-section {
  display: flex;
  flex-direction: column;
  border: var(--border-mw);
  border-radius: calc(var(--border-radius) * 2);
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: var(--shadow-mw);
}
div.pz-section.theme-red {
  background-color: var(--background-red);
  border: var(--border-red);
}
div.pz-section.theme-blue {
  background-color: var(--background-blue);
  border: var(--border-blue);
}
div.pz-section > h2 {
  text-align: center;
  margin: 0;
  padding: calc(var(--border-radius) / 2);
}
div.pz-section.theme-red > h2 {
  background-color: var(--color-red);
  color: white;
}
div.pz-section.theme-blue > h2 {
  background-color: var(--color-blue);
  color: white;
}
div.pz-section.theme-red > h2 a {
  color: var(--link-red);
}
div.pz-section.theme-blue > h2 a {
  color: var(--link-blue);
}
div.pz-section > div {
  flex-grow: 1;
  padding: var(--border-radius);
}
div.pz-section > div h3 {
  text-align: center;
  border-bottom: var(--border-mw);
}

/* Responsive layout */
/* TODO: remove after "pz-responsive" replaced with "pz-container" */
div.pz-responsive {
  width: 100%;
  display: flex;
}
div.pz-responsive > div {
  display: flex;
  flex-direction: column;
}
div.pz-responsive > div:first-child {
  flex-basis: 70%;
  margin-right: 10px;
}
div.pz-responsive > div:last-child {
  flex-basis: 30%;
}
div.pz-responsive > div > div {
  margin-bottom: 10px;
}
div.pz-responsive > div > div:last-child {
  margin-bottom: 0;
  flex-grow: 1;
}
/** Responsive images **/
div.pz-responsive img {
  width: 100%;
  height: auto;
}
/** Mobile layout **/
@media screen and (max-width: 1280px) {
  div.pz-responsive {
    flex-direction: column;
  }
  div.pz-responsive > div:first-child {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

/* Template:Mbox */
div.mbox {
  position: relative;
  display: flex;
  align-items: center;
  border: var(--border-mw);
  border-radius: var(--border-radius);
  background-color: var(--background-mw);
  margin-bottom: 0.5em;
  padding-left: var(--border-radius);
  overflow: hidden;
}
div.mbox > div:first-child {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--border-radius);
  background-color: var(--color-mw);
}
div.mbox > div:first-child + div {
  flex-shrink: 0;
  padding: var(--border-radius);
  text-align: center;
  border-right: var(--border-mw);
}
div.mbox > div:first-child + div img {
  width: 32px;
  height: auto;
}
div.mbox > div:last-child {
  flex-grow: 1;
  padding: calc(var(--border-radius) / 2) var(--border-radius);
}

/* Template:Infobox */
div.infobox {
  float: right;
  clear: right;
  width: 350px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background-color: var(--background-mw);
  border: 1px solid var(--color-red);
  border-radius: calc(var(--border-radius) * 2);
  margin: 0.5em 0 0.5em 1em;
  box-shadow: var(--shadow-mw);
  overflow: hidden;
}
div.infobox > div:first-child {
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  padding: calc(var(--border-radius) / 2);
}
div.infobox div.infobox-image {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
div.infobox div.infobox-image > div.infobox-preview {
  display: none; /* handled with js */
  margin: 0 auto;
}
div.infobox div.infobox-image > div.infobox-preview img {
  max-width: 200px;
  height: auto;
}
div.infobox div.infobox-image > div.infobox-caption {
  text-align: center;
  font-style: italic;
}
div.infobox div.infobox-image > div.infobox-gallery {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  flex-wrap: wrap;
}
div.infobox div.infobox-image > div.infobox-gallery img {
  border: var(--border-mw);
  border-radius: var(--border-radius);
  padding: 1px;
  width: auto;
  max-height: 32px;
  cursor: pointer;
}
div.infobox div.infobox-image > div.infobox-gallery img:hover {
  background: var(--color-mw);
  box-shadow: 0 0 0.25em var(--color-mw-border);
}
div.infobox div.infobox-image > div.infobox-gallery img.selected {
  background: var(--color-mw);
  box-shadow: 0 0 0.25em var(--color-mw-border) inset;
}
div.infobox div.infobox-section {
    position: relative;
}
div.infobox div.infobox-section > div:first-child {
  text-align: center;
  font-size: 1.0em;
  font-weight: bold;
  padding: calc(var(--border-radius) / 2);
}
div.infobox div.infobox-section > div.mw-collapsible {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}
div.infobox div.infobox-section > div.toggle {
  color: white;
}
div.infobox div.infobox-item {
  display: flex;
}
div.infobox div.infobox-item > div {
  padding: 0 0.5em;
  overflow:auto; /* temporary fix for long values (item_id) */
}
div.infobox div.infobox-item > div:first-child {
  width: 40%;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
  background-color: var(--background-mw-even);
}
div.infobox div.infobox-item > div:first-child img {
  width: 1.5em;
  height: 1.5em;
}
div.infobox div.infobox-item > div:first-child img.auto-size {
  width: auto;
  height: auto;
}

/* Template:Documentation */
div.documentation {
  display: flex;
  flex-direction: column;
}
div.documentation > div {
  border: var(--border-mw);
  padding: var(--border-radius);
}
div.documentation > div:first-child {
  background-color: var(--background-mw-heading);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  margin-bottom: 0.2em;
  text-transform: uppercase;
  font-weight: bold;
}
div.documentation > div:first-child img {
  max-width: 2em;
  max-height: 2em;
}
div.documentation > div:first-child + div {
  background-color: var(--background-mw);
  margin-bottom: 0.2em;
}
div.documentation > div:last-child {
  background-color: var(--background-mw-heading);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  text-align: right;
  font-style: italic;
}

/* Template:Header */
div.header {
  display: flex;
  padding: 0.5em 0;
  margin-bottom: 0.5em;
  border-radius: var(--border-radius);
}
div.header.theme-red {
  background-color: var(--color-red);
  border: var(--border-red);
  color: white;
}
div.header.theme-blue {
  background-color: var(--color-blue);
  border: var(--border-blue);
  color: white;
}
div.header.theme-red a {
  color: var(--link-red);
}
div.header.theme-blue a {
  color: var(--link-blue);
}
div.header > div:first-child {
  font-weight: bold;
  padding: 0 0.5em;
}
div.header > div:last-child {
  flex-grow: 1;
  padding: 0 0.5em;
}
div.header.theme-red > div:first-child {
  border-right: 1px solid var(--link-red);
}
div.header.theme-blue > div:first-child {
  border-right: 1px solid var(--link-blue);
}

/* Template:Mask */
.mask {
  color: black;
  background-color: black;
  transition: color 0.2s linear;
}
.mask:hover {
  color: white;
}

/* Template:Navbox */
div.navbox {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--background-mw);
  border: 1px solid var(--color-mw);
  border-radius: var(--border-radius);
  margin: 0.5em auto;
  overflow: hidden;
}
div.navbox.theme-red {
  border: var(--border-red);
}
div.navbox.theme-blue {
  border: var(--border-blue);
}
div.navbox > div:first-child {
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  padding: calc(var(--border-radius) / 2) var(--border-radius); /* <!-- */
}
div.navbox.theme-red > div:first-child {
  background-color: var(--color-red);
  color: white;
}
div.navbox.theme-blue > div:first-child {
  background-color: var(--color-blue);
  color: white;
}
div.navbox.theme-red > div:first-child a {
  color: var(--link-red);
}
div.navbox.theme-blue > div:first-child a {
  color: var(--link-blue);
}
/* second-level of navbox */
div.navbox div.navbox > div:first-child {
    font-size: 1.0em;
    filter: brightness(120%);
}
/* third-level of navbox */
div.navbox div.navbox div.navbox > div:first-child {
    font-size: 0.9em;
    filter: brightness(150%)
}
div.navbox > div.mw-collapsible {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}
div.navbox.theme-red > div.toggle,
div.navbox.theme-blue > div.toggle {
  color: white;
}
div.navbox div.navbox-row {
  background-color: var(--color-mw);
  text-align: center;
}
div.navbox > div.mw-collapsible .navbox {
  border: none;
  border-radius: 0;
  box-shadow: 0 0;
  margin: 0;
}
div.navbox > div.mw-collapsible div.navbox-section {
  display: flex;
  gap: 2px;
}
div.navbox > div.mw-collapsible div.navbox-section > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1;
}
div.navbox > div.mw-collapsible div.navbox-section > div:first-child + div {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.navbox > div.mw-collapsible div.navbox-item {
  display: flex;
  gap: 2px;
}
div.navbox > div.mw-collapsible div.navbox-item > div:first-child {
  width: 20%;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--background-mw-even);
  font-weight: bold;
  text-align: center;
}
div.navbox > div.mw-collapsible div.navbox-item > div:last-child {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Scale image on hover */
/* Used on main page for quick links */
.scale-image img {
    transition: all 0.2s ease-in-out;
}
.scale-image img:hover {
    transform: scale(1.05);
}

/* Images should be responsive */
/* Image will resize based on container size, instead of being static. */
.res-img img {
    max-width: 100%;
    height: auto;
}

/* Template:Togglebox */
div.togglebox {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius);
  margin: 0.5em auto;
  padding: var(--border-radius);
}
div.togglebox.theme-red {
  background-color: var(--color-red);
}
div.togglebox.theme-blue {
  background-color: var(--color-blue);
}
div.togglebox > div:first-child {
  font-size: 1.2em;
  font-weight: bold;
  padding: 0 var(--border-radius);
}
div.togglebox.theme-red > div:first-child {
  color: white;
}
div.togglebox.theme-blue > div:first-child {
  color: white;
}
div.togglebox.theme-red > div:first-child a {
  color: var(--link-red);
}
div.togglebox.theme-blue > div:first-child a {
  color: var(--link-blue);
}
div.togglebox > div.mw-collapsible {
  background-color: var(--background-mw);
  border-radius: var(--border-radius);
  padding: var(--border-radius);
  margin-top: 0.5em;
}
div.togglebox.theme-red > div.mw-collapsible { /* ToggleBox content div red */
  /* background-color: var(--background-red); */
}
div.togglebox.theme-blue > div.mw-collapsible { /* ToggleBox content div blue */
  /* background-color: var(--background-blue); */
}
div.togglebox > div.toggle {
  color: white;
}

/* used in Project Zomboid Wiki and PZwiki:Community Portal */
div.pz-container {
  width: 100%;
  display: flex;
  gap: 0.5em;
}
div.pz-container > div {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
div.pz-container > div:first-child {
  flex-basis: 70%;
}
div.pz-container > div:last-child {
  flex-basis: 30%;
}
div.pz-container > div > div:last-child {
  flex-grow: 1;
}
div.pz-container img {
  width: auto;
  height: auto;
}
@media screen and (max-width: 1280px) {
  div.pz-container {
    flex-direction: column;
  }
}

/* Toggle for collapsible templates */
div.toggle::after {
  content: "◥";
  position: absolute;
  top: 0.2em;
  right: 0.7em;
  font-size: 1.2em;
  font-weight: bold;
  transition: transform 0.2s linear;
}
div.toggle.small::after {
    font-size: 1.1em;
}
div.toggle.large::after {
  top: 0.5em;
  right: 1em;
}
div.mw-collapsed + div.toggle::after {
  transform: rotate(90deg);
}

/* Template:Userbox showcase */
div.userbox-showcase {
  min-width: 240px;
  float: right;
  clear: right;
  margin: 0 0 1em 0.5em;
  border: var(--border-blue);
  border-radius: calc(var(--border-radius) * 2);
  overflow: hidden;
}
div.userbox-showcase > div {
  padding: var(--border-radius);
}
div.userbox-showcase > div:first-child {
  text-align: center;
  background-color: var(--color-blue);
  color: white;
  font-size: 1.2em;
  font-weight: bold;
}
div.userbox-showcase > div:first-child a {
  color: var(--link-blue);
}
div.userbox-showcase > div:last-child {
  display: flex;
  flex-direction: column;
  gap: var(--border-radius);
  background-color: var(--background-blue);
}

/* Template: Userbox */
div.userbox {
  display: flex;
  min-height: 40px;
  max-width: 240px;
  border: var(--border-mw);
  border-radius: var(--border-radius);
  overflow: hidden;
  margin: 0.5em;
}
div.userbox > div {
  padding: var(--border-radius);
  min-height: 32px;
  display: flex;
  align-items: center;
}
div.userbox > div:first-child {
  text-align: center;
  font-weight: bold;
  flex-basis: 32px;
  flex-shrink: 0;
  border-right: var(--border-mw);
  justify-content: center;
}
div.userbox > div:first-child img {
  max-width: 32px;
  height: auto;
}
div.userbox > div:last-child {
  flex-grow: 1;
  font-size: 0.75em;
  padding: 0 var(--border-radius);
}
div.userbox.awards {
  display: block;
}
div.userbox.awards > div:first-child {
  float: left;
}
div.userbox-showcase > div:last-child > div.userbox {
  margin: 0;
}

/* for nav bar */
div.navbar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5em;
  padding: var(--border-radius);
  border-radius: calc(2 * var(--border-radius));
}
div.navbar > a {
  padding: var(--border-radius);
  border-radius: var(--border-radius);
  border: var(--border-mw);
  background-color: var(--color-mw);
  transition: all 0.2s linear;
  text-decoration: none;
}
div.navbar.theme-red > a {
  background-color: var(--color-red);
  color: var(--link-red);
  border: var(--border-red);
}
div.navbar.theme-blue > a {
  background-color: var(--color-blue);
  color: var(--link-blue);
  border: var(--border-blue);
}
div.navbar > a:first-child {
  font-weight: bold;
}
div.navbar > a:hover {
  border-radius: calc(var(--border-radius) * 2);
}
div.navbar.theme-red > a:hover {
  background-color: #b22328; /* light red */
}
div.navbar.theme-blue > a:hover {
  background-color: #2f8cd8; /* light blue */
}
div.navbar > a.mw-selflink {
  border-radius: calc(var(--border-radius) * 2);
  color: white;
}
div.navbar.theme-red > a.mw-selflink {
  background-color: #b22328; /* light red */
}
div.navbar.theme-blue > a.mw-selflink {
  background-color: #2f8cd8; /* light blue */
}

/* Don't show In other languages when editing pages on Vector skins, until we find better solution */
#p-lang {
  display: none;
}

/* Template:Key */
kbd.keyboard-key {
  border: 1px solid #aaaaaa;
  border-radius: 0.2em;
  box-shadow: 0.1em 0.2em 0.2em #dddddd;
  background-image: linear-gradient(to bottom, #eeeeee, #f9f9f9, #eeeeee);
  padding: 0.1em 0.3em;
  font-family: inherit;
  font-size: 0.85em;
}

/* Template:Quote */
.quote {
    display: flex;
    font-family: 'Georgia', 'Times New Roman', 'Times', serif;
}
.quote .quote-mark {
    font-weight: bold;
    font-size: 4em;
    height: 1em;
}
.quote .quote-text {
    margin: 0.5em;
    padding-left: 0.5em;
    border-left: 1px solid #000000;
    font-style: italic;
}
.quote .quote-author {
    text-align: right;
}

/* Mediawiki:Sitenotice */
.sitenotice-card {
    background-color: #f8f9fa;
    color: #000000;
    text-align: center;
    justify-content: space-between;
    margin: 0.75rem 0;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #eaecf0;
    display: flex;
    width: auto;
    align-items: center;
}
.sitenotice-card > div {
    display: flex;
    flex-direction: column;
}
.sitenotice-card .image-container-left {
    margin-right: 1rem;
}
.sitenotice-card .image-container-right {
    margin-left: 1rem;
}