MediaWiki:Common.css

From MediaWiki
Revision as of 23:21, 3 September 2025 by Admin (talk | contribs) (UX: dark message boxes + heading spacing (patch step8))
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* === FALLBACK PREMENNÉ pre vanilla MediaWiki (Vector) === */
/* Fandom CSS používa veľa var() premenných, ktoré tu normálne nie sú.
   Tieto fallbacky zabezpečia, že farby a pozadia fungujú aj bez Fandom platformy. */
:root {
  /* “theme” fallbacky používané v tvojom CSS */
  --theme-page-background-color: #0a0a0a;
  --theme-page-background-color--secondary: #111111;
  --theme-page-background-color--rgb: 10,10,10;
  --theme-page-text-color: #ffffff;
  --theme-border-color: #FCEE0A;
  --theme-link-color: #29FFFF;
  --theme-link-color--rgb: 41,255,255;

  /* Cyberpunk wiki farby – nech sú dostupné aj keď sa netrafí body.theme-fandomdesktop-* */
  --cyberpunkwiki-background-color: #000000;
  --cyberpunkwiki-background-color-alt: #111111;
  --cyberpunkwiki-border-color: #FCEE0A;
  --cyberpunkwiki-border-color--secondary: #29FFFF;
  --cyberpunkwiki-text-color: #FFFFFF;
  --cyberpunkwiki-link-color: #29FFFF;
  --cyberpunkwiki-accent-color: #FCEE0A;
  --cyberpunkwiki-accent-color--secondary: #29FFFF;

  /* H2 underline assets (fallback ak Fandom URL nebeží) – môžeš zmeniť na lokálne súbory neskôr */
  --cyberpunkwiki-h2-background-image: url("/mediawiki/images/d/df/CP2077_header_bottom.svg");
  --cyberpunkwiki-main-box: url("/mediawiki/images/0/0e/Cyberpunk_2077_yellow_box.svg");
  --cyberpunkwiki-main-box-alt: url("/mediawiki/images/0/00/Cyberpunk_2077_dark_gray_box.svg");
}

/* === Aplikuj farby pre Vector skin (desktop) === */
.skin-vector body {
  color: var(--cyberpunkwiki-text-color);
  background: var(--cyberpunkwiki-background-color);
}
.skin-vector a,
.skin-vector a:visited {
  color: var(--cyberpunkwiki-link-color);
  text-decoration: var(--theme-link-decoration, none);
}
.skin-vector .mw-body,
.skin-vector .mw-workspace-container {
  background: var(--theme-page-background-color);
}
.skin-vector hr {
  border-color: var(--cyberpunkwiki-border-color);
  color: var(--cyberpunkwiki-border-color);
}

/* H2 underline efekt, aby fungoval aj bez Fandom tried */
.skin-vector .page-content h2:not(.all-maps__empty-title),
.skin-vector .pi-header {
  background-image: var(--cyberpunkwiki-h2-background-image);
  background-repeat: no-repeat;
  background-position: 25% 105%;
  background-size: 100% 10px;
  color: var(--cyberpunkwiki-accent-color--secondary);
  border-bottom: none;
  line-height: 1.2;
  font-family: BlenderProBold, sans-serif;
  overflow: auto;
}

/* Transparentnejší content ako na Fandome */
.skin-vector .page__main {
  background-color: rgba(var(--theme-page-background-color--rgb), 0.9);
}

/* CSS placed here will be applied to all skins */
/** Tables of Contents
 *
 *  1. FANDOM FIXES
 *      - Section for the skin and other things
 *  2. Portable Infoboxes
 *  2. Tabber
 *  4. CYBERPUNK WIKI - ACTUAL SITE CSS
 *      - Templates, templates, templates
 *
**/

/* Local Imports */
/* @import url("/load.php?mode=articles&articles=MediaWiki:CustomNavigation.css|MediaWiki:CustomTables.css|MediaWiki:CustomTemplates.css|MediaWiki:Netpages2077.css&only=styles"); */
@import url("/mediawiki/index.php?title=MediaWiki:CustomNavigation.css&action=raw&ctype=text/css");
@import url("/mediawiki/index.php?title=MediaWiki:CustomTables.css&action=raw&ctype=text/css");
@import url("/mediawiki/index.php?title=MediaWiki:CustomTemplates.css&action=raw&ctype=text/css");
@import url("/mediawiki/index.php?title=MediaWiki:Netpages2077.css&action=raw&ctype=text/css");



/* Declare Custom Fonts */
@font-face {
	font-family: "Rajdhani";
	font-style: normal;
	font-weight: 400;
	src: url('wiki/Special:FilePath/Rajdhani-Regular.ttf') format("opentype");
}

@font-face {
	font-family: "Orbitron";
	font-style: normal;
	font-weight: 400;
	src: url('wiki/Special:FilePath/Orbitron.ttf') format("opentype");
}

@font-face {
	font-family: "BlenderProBook";
	font-style: normal;
	font-weight: 400;
	src: url('wiki/Special:FilePath/BlenderPro-Book.ttf') format("opentype");
}

@font-face {
	font-family: "BlenderProBold";
	font-style: normal;
	font-weight: 700;
	src: url('wiki/Special:FilePath/BlenderPro-Bold.ttf') format("opentype");
}

/* Styling for Dark Theme (Cyberpunk 2077) */
body.theme-fandomdesktop-dark {
	--cyberpunkwiki-background-color: #000000;
	--cyberpunkwiki-background-color-alt: #111111;
	--cyberpunkwiki-background-color--secondary: #222222;
	--cyberpunkwiki-background-color--tertiary: #333333;
	--cyberpunkwiki-border-color: #FCEE0A;
	--cyberpunkwiki-border-color--secondary: #29FFFF;
	--cyberpunkwiki-border-color--tertiary: #29FFFF;
	--cyberpunkwiki-text-color: #FFFFFF;
	--cyberpunkwiki-text-color--secondary: #000000;
	--cyberpunkwiki-text-color--tertiary: #111111;
	--cyberpunkwiki-link-color: #29FFFF;
	--cyberpunkwiki-accent-color: #FCEE0A;
	--cyberpunkwiki-accent-color--secondary: #29FFFF;
	--cyberpunkwiki-accent-color--tertiary: #29FFFF;

	/* Navbox & Tables */
	--table-title-color: #000000;
	--table-title-font-color: #FFFFFF;
	--table-group-color: #000000;
	--table-subgroup-color: #000000;
	--table-subgroup-group-color: #000000;

	/* Infobox */
	--cyberpunkwiki-navbox-border-color: #FCEE0A;
	--cyberpunkwiki-navbox-background-color: #000000;
	--cyberpunkwiki-infobox-background: url("/mediawiki/images/e/e6/Cyberpunk_2077_vertical_edge.svg");
	/* Infobox Stat Bar */
	--cyberpunkwiki-pi-stat-bar-value: #FFFFFF;
	--cyberpunkwiki-pi-stat-bar-bg: #FFFFFF40;
	--cyberpunkwiki-pi-stat-bar-bg2: rgba(255,255,255,0.25);
	--cyberpunkwiki-pi-stat-bar-min-bg: #FCEE0A;
	--cyberpunkwiki-pi-stat-bar-max-bg: #FFFFFF80;
	--cyberpunkwiki-pi-stat-bar-max-bg2: rgba(255,255,255,0.5);

	/* Misc */
	--cyberpunkwiki-h2-background-image: url("/mediawiki/images/b/ba/Cyberpunk_2077_header_bottom.svg");
	--cyberpunkwiki-main-box: url("/mediawiki/images/0/0e/Cyberpunk_2077_yellow_box.svg");
	--cyberpunkwiki-main-box-alt: url("/mediawiki/images/0/00/Cyberpunk_2077_dark_gray_box.svg");

	--theme-page-background-color--secondary: #222222; /* change Fandom's default secondary background to match better with the Cyberpunk Wiki's theme */
	--theme-border-color: #FCEE0A; /* change Fandom's default border color to match better with the Cyberpunk Wiki's theme */
	--theme-link-decoration: none;
	--cyberpunkwiki-database-font-color: #F75049;
	--cyberpunkwiki-database-title-color: #5EF6FF;
	--cyberpunkwiki-icon-color: brightness(0) invert(84%) sepia(99%) saturate(2195%) hue-rotate(128deg) brightness(108%) contrast(101%);
	
    /* variables for Template:CompMsg */
	--cyberpunkwiki-comp-color: #29FFFF;
	--cyberpunkwiki-comp-alt-color: #008B8B;
	--cyberpunkwiki-comp-transcript-color: #FFFFFF;
}
/* Styling for Light Theme (Cyberpunk RED) */
body.theme-fandomdesktop-light {
	--cyberpunkwiki-background-color: #FFFFFF;
	--cyberpunkwiki-background-color-alt: #FFD6C7;
	--cyberpunkwiki-background-color--secondary: #F5F6F6;
	--cyberpunkwiki-background-color--tertiary: #F5F6F6;
	--cyberpunkwiki-border-color: #E4321B;
	--cyberpunkwiki-border-color--secondary: #E4321B;
	--cyberpunkwiki-border-color--tertiary: #E4321B;
	--cyberpunkwiki-text-color: #000000;
	--cyberpunkwiki-text-color--secondary: #FFFFFF;
	--cyberpunkwiki-text-color--tertiary: #222222;
	--cyberpunkwiki-link-color: #E4321B;
	--cyberpunkwiki-accent-color: #E4321B;
	--cyberpunkwiki-accent-color--secondary: #E4321B;
	--cyberpunkwiki-accent-color--tertiary: #E4321B;

	/* Navbox & Tables */
	--table-title-color: #E4321B;
	--table-title-font-color: #000000;
	--table-group-color: #E4321B;
	--table-subgroup-color: #FFFFFF;
	--table-subgroup-group-color: #FFD6C7;
	
	/* Infobox */
	--cyberpunkwiki-navbox-border-color: #E4321B;
	--cyberpunkwiki-navbox-background-color: #FFD6C7;
	--cyberpunkwiki-infobox-background: url("/mediawiki/images/7/7e/Cyberpunk_RED_vertical_edge.svg");
	/* Infobox Stat Bar */
	--cyberpunkwiki-pi-stat-bar-value: #FFFFFF;
	--cyberpunkwiki-pi-stat-bar-bg: #FFFFFF40;
	--cyberpunkwiki-pi-stat-bar-bg2: rgba(255,255,255,0.25);
	--cyberpunkwiki-pi-stat-bar-min-bg: #E4321B;
	--cyberpunkwiki-pi-stat-bar-max-bg: #FFFFFF80;
	--cyberpunkwiki-pi-stat-bar-max-bg2: rgba(255,255,255,0.5);

	/* Misc */
	--cyberpunkwiki-h2-background-image: url("/mediawiki/images/d/d8/Cyberpunk_RED_header_bottom.svg");
	--cyberpunkwiki-main-box: url("/mediawiki/images/b/be/Cyberpunk_RED_vivid_red_box.svg");
	--cyberpunkwiki-main-box-alt: url("/mediawiki/images/8/80/Cyberpunk_RED_pale_orange_box.svg");
	
	--theme-page-background-color--secondary: #FFD6C7; /* change Fandom's default secondary background to match better with the Cyberpunk Wiki's theme */
	--theme-border-color: #E4321B; /* change Fandom's default border color to match better with the Cyberpunk Wiki's theme */
	--cyberpunkwiki-database-font-color: #F75049;
	--cyberpunkwiki-database-title-color: #5EF6FF;
	--cyberpunkwiki-icon-color: brightness(0) invert(17%) sepia(96%) saturate(4997%) hue-rotate(3deg) brightness(105%) contrast(79%);
	
    /* variables for Template:CompMsg */
	--cyberpunkwiki-comp-color: #8B0000;
	--cyberpunkwiki-comp-alt-color: #CD5C5C;
	--cyberpunkwiki-comp-transcript-color: #000000;
}
body.theme-fandomdesktop-dark .mw-highlight { --pygments-background: var(--theme-page-background-color--secondary); }

hr {
	color: var(--cyberpunkwiki-border-color);
}

/** FANDOM FIXES **/
/* Framework */

/* article page transparency */
.page__main { background-color: rgba(var(--theme-page-background-color--rgb),0.9); }

.fandom-community-header__background.cover { background-position: unset; }

.page {	color: var(--cyberpunkwiki-text-color); }

/*  Wiki banner/header to make text more readable on graphic bg */
/** text shadow **/
.wds-tabs .first-level-item, .page-counter {
  text-shadow: -1px 1px 0 #111, 1px 1px 0 #111, 1px -1px 0 #111, -1px -1px 0 #111;
}

.fandom-community-header__community-name {
	display: none;
}

/* Add drop shadows to the wiki header elements to improve contrast */
.fandom-community-header__image img {
  filter: drop-shadow(0 0 4px #000) drop-shadow(0 0 18px #000);
}

.fandom-community-header__community-name-wrapper,
.fandom-community-header .page-counter,
.fandom-community-header__top-container .wds-button,
.fandom-community-header__local-navigation .first-level-item {
  filter: drop-shadow(0 0 4px #000) drop-shadow(0 0 18px #000);
}

.fandom-sticky-header {
  color:#000;
}

.fandom-community-header__local-navigation .first-level-item a {
  color: #fff !important;
}

.mainpage .page-header__title, .mainpage .page-header__separator { display: none; } /* Removing title on main page */
.page-footer__languages { display: none; } /* hides interwiki lang section at bottom of pages as can be accessed in dropdown at top */
.wikia-photogallery-add { display: none; } /* hides the gallery add photo button */

.page-content p, .page-content section { margin: 0.5em 0; }
.page-content p + p { margin-top: 0; }
.page-content dl { margin: 0.2em 0 0.5em; }
.page__main p+ul, .page__main p+ol { margin-top: -0.5em; }
.page__main .wds-tabber p:first-of-type+ul:first-of-type, .page__main .wds-tabber p:first-of-type+ol:first-of-type { margin-top: 0; }
.page-content ol:not(.portable-infobox ol):not(.special), 
.page-content ul:not(.cp-nav-wrapper ul):not(.hlist ul):not(.toc ul):not(.wikia-slideshow-wrapper ul):not(.plainlist ul) {
	margin: 0 0 0 1.8em;
}
.page-content ol.references {
	margin-left: 0.9em;
}
.page-content ol.special {
	margin-left: 2.7em;
}
ul.gallery { 
	margin: 0; /* MAIN-28514 */
} 
.page-content li::marker {
	color: var(--cyberpunkwiki-accent-color--secondary);
}

/* Content headers */
.page-content h2:not(.all-maps__empty-title), .pi-header  {
	border-bottom: none;
	background-image: var(--cyberpunkwiki-h2-background-image);
	background-repeat: no-repeat;
	background-position: 25% 105%;
	background-size: 100% 10px;
	line-height: 1.2;
	color: var(--cyberpunkwiki-accent-color--secondary);
	font-family: BlenderProBold, sans-serif;
	/* text-shadow: -1px 1px 0 #111, 1px 1px 0 #111, 1px -1px 0 #111, -1px -1px 0 #111;
	font-size: 18pt; */
	overflow: auto; /*temporary fix for the underline overflow ~Surafbrov*/
}

.page-content h3, .toc .toctitle h2 { 
	color: var(--cyberpunkwiki-accent-color--secondary); 
	font-family: BlenderProBold, sans-serif;
	font-size: 1.25em;
}
.page-content h4, .page-content h5, .page-content h6 {
	font-family: BlenderProBook, sans-serif;
	font-size: 1.25em;
}

.toc .toctitle h2 { 
	background-image: none; /* prevent h2 style from affecting the TOC box */
	text-transform: uppercase;
}

/* fixing highlighted reference issue */
ol.references li:target, sup.reference:target { background-color: rgba(var(--theme-link-color--rgb),.2); }

/* reference list to keep it from being kicked to the bottom */
.mw-parser-output .mw-references-wrap { clear: none; }

/* light mode fix to be darker */ /*
.theme-fandomdesktop-light .page-content h2:not(.pi-item),
.theme-fandomdesktop-light .page-content h3:not(.pi-data-label) {
	text-shadow: none;
	color: #000000;
} */

/** Portable Infoboxes **/
/* Eliminate border between rows  */
.pi-border-color { border-top-color: transparent; }
.portable-infobox { border-top-color: var(--cyberpunkwiki-accent-color); }

/* Fix caption size */
.portable-infobox .pi-caption { font-size: 12px; }

.portable-infobox {
    position: relative;
    margin-right:5px;
    border:1px solid var(--cyberpunkwiki-navbox-border-color);
    border-radius:10px 0px 0px 10px;
    background-color: var(--cyberpunkwiki-navbox-background-color);
    padding-bottom:4px;
}

.portable-infobox ul {
	margin: 0 0 0 1em;
}

/* fixes it so right border overlaps any infobox images */
.portable-infobox::after {
    content: "";
    position: absolute;
    width: 6%;
    height: 100%;
    top: 0px;
    right: 0px;
    background-image: var(--cyberpunkwiki-infobox-background);
    background-repeat: repeat-y;
    background-size: 32px 1080px;
}
 
/* edits portable infobox headers and titles to center */
#content .pi-title {
    background-color: transparent;
    border-radius: 10px 10px 0px 0px;
    color: var(--cyberpunkwiki-accent-color--secondary);
    border-bottom: none;
    margin-top: 5px;
    text-align: center;
    font-family: BlenderProBold, sans-serif;
    font-size: 1.4em;
    background-image: none; /* prevents h2 article header from adding image to infobox headers */
}
 
.pi-header {
    background-color: transparent;
    color: var(--cyberpunkwiki-accent-color--secondary);
    margin: 5px 15px !important;
    text-align: center;
	font-family: BlenderProBold, sans-serif !important;
    font-size: 1.2em !important;
    background-position: 0% 135% !important; /* fixes h2 article header from adding image for infobox */
	text-transform: none !important;
}
.pi-horizontal-group .pi-header { 
	text-align: center; 
}

/* captions */
.portable-infobox .pi-caption {
    text-align: center;
    line-height: 150%;
}

/* caption light mode fix */
.theme-fandomdesktop-light .portable-infobox .pi-caption {
  color: #8a8a8a;
}
 
/* spacing between infobox rows */
.pi-item-spacing {
    padding: 3px !important;
}
 
/* portable infobox data labels (not input fields) */
.pi-data-label {
    padding: 3px 5px 3px 1px;
    text-align: right;
    border-right:1px var(--cyberpunkwiki-accent-color) solid;
    color: var(--cyberpunkwiki-accent-color--secondary);
    text-transform: none !important;
}
/* Fix stacked data labels */
.pi-layout-stacked .pi-data-label {
    text-align: left;
}
 
.pi-data-value {
    padding-top: 3px;
    padding-right: 1px;
}

/** smart group  fix **/
/* remove vertical borders */
.pi-smart-data-label, .pi-smart-data-value {
	border:none !important;
}

.pi-smart-data-label {
  text-align: center !important;
}

.pi-smart-group-head + .pi-smart-group-body {
  margin-top: 0px !important;
}

.pi-header + .pi-smart-group {
  margin-top: 0px;
}

.pi-smart-group-head {
  margin-top: 0px !important;
}

/* to keep right border of infobox from possibly covering up text */
.pi-smart-data-label:last-child, .pi-smart-data-value:last-child {
	padding-right:14px !important;
}

/* removes data label background from smart groups and keeps them centered*/
.pi-horizontal-group .pi-data-label {
	text-align:center;
}

/* all portable infobox images, including tabber images */
.pi-image {
    background-color: transparent !important; /* will revert to default otherwise */
    padding: 0.12em 0em .1em 0em !important; /*add a little padding around images so they don't go edge to edge*/
}
 
/* portable infobox thumbnail images only */
.pi-image-thumbnail {
    background-color: transparent !important; /*will revert to default otherwise */
}
 
/* portable infobox thumbnail galleries fix */
.portable-infobox .wds-tab__content, .portable-infobox .pi-image-collection-tab-content {/* Wikia */
    background-color: transparent !important; /* makes it so whatever the infobox background is set to, it'll flow consistently behind the images, like patterns */
}

/* remove hyphenations from infobox so no splitting words */
.portable-infobox .pi-navigation,
.portable-infobox .pi-header,
.portable-infobox .pi-caption,
.portable-infobox .pi-data-value,
.portable-infobox .pi-data-label {
    -webkit-hyphens:none;
    -moz-hyphens:none;
    -ms-hyphens:none;
    hyphens:none;
}

/** Tabber **/
/* the whole tab row */
ul.wds-tabs, ul.pi-image-collection-tabs {/* Wikia */
    margin: auto 0 auto 0.01em; /* this fixes it so the image doesn't overlap the tabs and centers the tabs */
}
 
/* all tabs */
.pi-image-collection {/* wds-tabber maybe? */
    text-align: center;
    font-size: 13px;
}

/* activated tab */
ul.wds-tabs li.wds-is-current {
    background-color: transparent !important;
    border: 0px none;
    color: var(--cyberpunkwiki-accent-color);
}
 
/* activated hover tab */
ul.wds-tabs li.wds-is-current:hover {
    background-color: transparent !important;
    border: 0px none;
    color: var(--cyberpunkwiki-accent-color--secondary);
}
 
/* inactive tab */
ul.wds-tabs li {
    border: 0px none;
    margin: 0px 4px;
}
 
/* inactive tab hover */
ul.wds-tabs li:hover {
    background-color: transparent !important;
    border: 0px none;
    color: var(--cyberpunkwiki-accent-color--secondary);
}

/* section edits for different panels in infobox. Not this is only for the new style that was added to the backend called "section" and may not be in use*/
.pi-section-label {
 text-transform:none;
 height:20px;
}

/*** tabber for portable infobox and images ***/
/* whole row, centers tabs but is based on tab width */
.portable-infobox ul.wds-tabs li {
	margin-left: auto;
	margin-right: auto;
}

/* activated tab */
.wds-tabs__tab.wds-is-current {
    background-color: transparent;
    border: 0px none;
    color: var(--cyberpunkwiki-accent-color);
}
 
/* activated hover tab */
.wds-tabs__tab.wds-is-current:hover {
    background-color: transparent;
    border: 0px none;
    color: var(--cyberpunkwiki-accent-color--secondary);
}
 
/* inactive tab */
.wds-tabs__tab {
    border: 0px none;
    margin: 0px 4px;
}
 
/* inactive tab hover */
.wds-tabs__tab:hover {
    background-color: transparent;
    border: 0px none;
    color: var(--cyberpunkwiki-accent-color--secondary);
}

/* No underline for tab links */
.wds-tabs__tab-label a:active, .wds-tabs__tab-label a:focus, .wds-tabs__tab-label a:hover{ text-decoration: none; }

/** CYBERPUNK WIKI - ACTUAL SITE CSS **/
/* Main Page header styles */
.mainpage-header {
    font-size:18pt;
    letter-spacing:1px;
    text-align:center;
    margin-top:5px;
    background-image: var(--cyberpunkwiki-h2-background-image);
    background-repeat:no-repeat;
    background-position:50% 100%;
    background-size:70% 8px;
    color: var(--cyberpunkwiki-accent-color--secondary);
    padding-bottom:6px;
}

.page-header__title {
	font-family: BlenderProBook, sans-serif;
}

/* for smaller screen resolutions */
@media only screen and (max-width: 1024px) {
	.mainpage-header {
		background-size: 70% 6px;
	}

	/* Fixing smaller h2 headers styling */
	#content h2 {
		background-position-y: 30px;
		padding-bottom: 6px;
		text-shadow: -1px 1px 0 #111, 1px 1px 0 #111, 1px -1px 0 #111, -1px -1px 0 #111;
		font-size: 15pt;
    }
}

/* fixes right column on main page to align with left */
.main-page-tag-rcs .divYellowBox { margin-top: 0px; }

/****************************************************/
/*                  portal main                     */
/* Code created by Tierrie on the Dragon Age Wiki   */
/*      Code updated for UCP by Alex/Ursuul         */
/****************************************************/
/* container settings */
#portal_slider a.external:after,
.portal_metro .toc {
	display: none;
}
#portal_slider.portal_metro.ui-corner-all {
	border-radius: 0;
}
.portal_container { position: relative; display: inline-block; margin-bottom: 15px; width: 100%; }
/* give all containers a black background so the opacity changes results in a brightness change */
.portal_metro:before { position: absolute; top: 0; left: 0; width:100%; height: 100%; /**/content: "";/* experimental */ background-color: rgb(0,0,0); z-index: -2; }
.portal_metro { border:3px solid var(--cyberpunkwiki-border-color); }
.portal_metro .portal_body { padding: 0 10px 0 10px; overflow: hidden; }
/* pages nested within a slider container should not render borders twice */
.portal_metro .portal_metro { border: none; }
.portal_metro.ui-tabs .ui-tabs-panel { padding: 0; }
.portal_metro#portal_slider, .portal_metro#portal_slider .portal_body { padding: 0; }

/* font title and sliders */
.portal_metro [class^=portal_sliderlink] .mw-headline, .portal_metro [class^=portal_sliderlink] .portal_slidertext, .portal_metro .portal_header_text, .portal_vtab.ui-tabs-vertical .ui-tabs-nav li a, .portal_vtab.ui-tabs-vertical .ui-tabs-panel li a, .portal_vtab.ui-tabs-vertical .ui-tabs-panel h2  { width: 100%; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; text-align:left; color: white; }

/* main tabs headers */
.portal_metro [class^=portal_sliderlink] .mw-headline,
.portal_metro [class^=portal_sliderlink] .portal_slidertext,
.portal_metro .portal_header_text,
.portal_vtab.ui-tabs-vertical .ui-tabs-nav li a {
  text-transform:uppercase;
}
.portal_metro [class^=portal_sliderlink] .mw-headline, .portal_vtab.ui-tabs-vertical .ui-tabs-nav li a { filter:drop-shadow(0 0 3px #000) drop-shadow(0 0 15px #000);}
.portal_vtab.ui-tabs-vertical .ui-tabs-panel li a {filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 10px #000);}

/** sub category headers **/
.portal_vtab.ui-tabs-vertical .ui-tabs-nav li a {
  font-size: 14pt !important;
  padding-left: 10px !important;
}

/** headers inside sub categories **/
.portal_vtab.ui-tabs-vertical .ui-tabs-panel h2 {
  background-image:none;
  color: white !important;
}

/** fix padding between headers and list **/
.portal_vtab.ui-tabs-vertical .ui-tabs-panel h2 + ul {
  padding-top: 5px !important;
}

/** list of text **/
.portal_vtab.ui-tabs-vertical .ui-tabs-panel li {
  font-size: 14pt;
  line-height: 22pt;
}
 /** fix red links in portal template **/
.portal_vtab.ui-tabs-vertical .ui-tabs-panel a.new {
  color: #e81a3f !important;
}

/** plain text **/
.portal_vtab.ui-tabs-vertical .ui-tabs-panel {
  color: white;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}

.portal_metro .portal_header_text { font-size: 2em; padding-top: 15px; }
.portal_metro [class^=portal_sliderlink] { font-size: 1.4em; }

/* portal headers, headerlinks colors and formatting */
.portal_metro .portal_header { position: relative; margin-bottom: 6px; padding: 0; }
.portal_metro .portal_header_text { border-bottom: none; padding-left: 15px; }
.portal_metro .portal_headerlinks { font-size: 0.8em; position: absolute; right: 1em; top: 1em; padding-bottom: 2px; z-index: 1; }
.portal_metro .portal_header, .portal_metro .portal_header a:link, .portal_metro .portal_header a:visited, .portal_metro .portal_header a:hover, .portal_metro .portal_header a:active { color: rgb(89,105,57); }

/* slider text position */
.portal_metro [class^=portal_sliderlink] .portal_slidertext { position: absolute; bottom: 10px; left: 10px; color: #FFFFFF; font-size: large;/* Experimental */}
.portal_metro#portal_main .portal_sliderlink-2 .portal_slidertext { display: block; font-size: xx-large;/*experimental*/ left: 20px; line-height: 1em; }

/* main slider sizing */
.portal_metro#portal_main [class^=portal_sliderlink] { cursor: pointer; position: absolute; overflow: hidden; }
.portal_metro#portal_main, .portal_vtab.ui-tabs-vertical, .portal_vtab.ui-tabs-vertical .ui-tabs-nav, .portal_vtab.ui-tabs-vertical .ui-tabs-panel { height: 450px; }
.portal_metro#portal_main .portal_sliderlink-2 { width: 100%; }

/* Transclucency patch */
#portal_slider #portal_main .portal_body:before,
#portal_slider #portal_main .portal_body:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    width: 225px;
    height: 450px;
    background-color: #000000;
}

.portal_sliderlink-2 {
    z-index: 20;
}
.portal_sliderlink-2 ~ [class^="portal_sliderlink"] {
    z-index: 40;
}

/* slider background */
.portal_metro#portal_main [class^=portal_sliderlink]:before { /**content: "";/* Experimental */ width: 100%; height: 100%; top: 0; left: 0; background-color: rgb(0,0,0); position: absolute; z-index: -1; }

/* Experimental */
.portal_metro#portal_main [class^=portal_sliderlink] {
    /*content: "";*/
    position: absolute;
    top: 0;
    /*left: 0;*/
    /*z-index: -1;*/
    /*width: 100%;*/
    height: 100%;
    background-color: rgb(0, 0, 0);
    opacity: 0.8;
}

.portal_metro#portal_main [class^=portal_sliderlink]:hover {
    opacity: 1;
}

#portal_slider #portal_main .portal_body:after {
    z-index: 10;
    width: 100%;
}

/* slider background */
.portal_metro#portal_main [class^=portal_sliderlink]:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    opacity: 0.8;
}

.portal_metro#portal_main [class^=portal_sliderlink]:hover:after { opacity: 1; }
.portal_metro#portal_main .portal_sliderlink-2 { top: 0px; left: 0px; height: 450px; background-image: url('/mediawiki/images/6/64/Cp_bg_slider_2077.png/revision/latest?cb=20201120031537'); background-position: center; }
.portal_metro#portal_main .portal_sliderlink-3 { top: 0px; right: 0px; height: 112px; background-image: url('/mediawiki/images/5/59/Cp_bg_slider_2013_small.png/revision/latest?cb=20201121005633'); background-position: center; }
.portal_metro#portal_main .portal_sliderlink-4 { top: 112px; right: 0px; height: 113px; background-image: url('/mediawiki/images/d/d2/Cp_bg_slider_2020_small.png/revision/latest?cb=20201121004818'); background-position: center; }
.portal_metro#portal_main .portal_sliderlink-5 { top: 225px; right: 0px; height: 112px; background-image: url('/mediawiki/images/5/58/Cp_bg_slider_red_small.png/revision/latest?cb=20201121000417'); background-position: center; }
.portal_metro#portal_main .portal_sliderlink-6 { top: 337px; right: 0px; height: 113px; background-image: url('/mediawiki/images/5/50/Cp_bg_slider_other_small.png/revision/latest?cb=20201121004845'); background-position: center; }

/* slider sub category background */
#portal_slider .ui-state-active,
#portal_slider .ui-state-default,
#portal_slider .ui-widget-content,
#portal_slider .ui-widget-header {
	background: none;
}

#portal_main, #portal_cp2077, #portal_cp2013, #portal_cp2020, #portal_cpred, #portal_other { position: relative; }
#portal_cp2013:after, #portal_cp2020:after, #portal_cpred:after, #portal_other:after, #portal_cp2077:after { z-index: -1; background-repeat: no-repeat; content : ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#portal_cp2077 { background-image: url('/mediawiki/images/6/64/Cp_bg_slider_2077.png/revision/latest?cb=20201120031537'); background-position: center; }
#portal_cp2013 { background-image: url('/mediawiki/images/b/b2/Cp_bg_slider_2013.png/revision/latest?cb=20201121005646'); background-position: center; }
#portal_cp2020 { background-image: url('/mediawiki/images/a/a5/Cp_bg_slider_2020.png/revision/latest?cb=20201121004834'); background-position: center; }
#portal_cpred { background-image: url('/mediawiki/images/1/1e/Cp_bg_slider_red.png/revision/latest?cb=20201120033744'); background-position: center; }
#portal_other { background-image: url('/mediawiki/images/d/d3/Cp_bg_slider_other.png/revision/latest?cb=20201121004855'); background-position: center; }

.portal_metro#portal_slider .portal_navlink { display: none; }
.portal_metro#portal_slider { }
.portal_metro#portal_slider .portal_navlink { display: block; position: absolute; bottom: 8px; left: 8px; z-index: 2; }
.portal_metro#portal_slider .portal_navlink img { opacity: 0.3; }
.portal_metro#portal_slider .portal_navlink img:hover { opacity: 0.8; }
.portal_metro#portal_slider .portal_header { position: absolute; width: 100px; height: 50px; right: 10px; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical { padding: 0; } 
.portal_metro#portal_slider .portal_vtab.ui-corner-all {
	border: 0;
	border-radius: 0;
}
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav { border: none; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-panel { position: absolute; left: 200px; top: 0px; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav { padding: 0; width: 200px; float: left; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li { cursor: pointer; margin: 0; top: 0; clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding: 0; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li a { background: none; font-size: 1.2em; display:block; width: 100%; padding: .25em 0 .5em 1em; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected a { background: none; cursor: pointer; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav:after { height: 420px; content: ""; width: 100%; overflow-y: hidden; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav:before { }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav:before, .portal_vtab.ui-tabs-vertical .ui-tabs-nav:after, .portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li.ui-state-default { background-color: rgba(0,0,0,0.6); }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li.ui-state-active { background-color: transparent; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li.ui-state-hover { background-color: transparent; }

.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical { width: 100%; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; border-right-width: 1px; border-right-width: 1px; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-panel ul { padding: 12px 0 0 5px; margin: 0; /* columns: 2; -webkit-columns: 2; -moz-columns: 2; */ }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-panel li { list-style: none; padding: 0.25em 0 0.25em 1em; margin: 0; }
/* changes text for the links within sub tabs */
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav .ui-corner-left {
	border: 0;
	border-radius: 0;
}
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-panel li a { font-size: 1.2em; display:block; color: rgb(255,255,255); color: #FFFFFF;}
/* changes h2 text within sub tabs */
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-panel h2 { filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 10px #000); padding: 0.5em 0 0 1em; margin: 0; border-bottom: none; text-transform: uppercase; color: rgb(89,105,57); font-size: 1.25em; }

/* column classes */
.portal_metro#portal_slider .cols_2 ul { columns: 2; -webkit-columns: 2; -moz-columns: 2; }
.portal_metro#portal_slider .cols_3 ul { columns: 3; -webkit-columns: 3; -moz-columns: 3; }
.portal_metro#portal_slider .cols_4 ul { columns: 4; -webkit-columns: 4; -moz-columns: 4; }

/********************************/
/* portal screen wide overrides */
/********************************/
@media screen and (max-width: 1023px) {
    #portal_slider #portal_main .portal_body:before,
    .portal_metro [class^=portal_sliderlink] {
        width: 225px;
    }

    .portal_metro#portal_main .portal_sliderlink-2 .portal_slidertext {
        width: 360px;
    }

    .portal_metro#portal_images .wikia-slideshow-wrapper,
    .portal_metro#portal_images .wikia-slideshow-images,
    .portal_metro#portal_images img.thumbimage,
    .portal_metro#portal_images {
        height: 280px !important;
    }

    .WikiaRail .module {
        position: relative;
    }
}

@media screen and (min-width: 1023px) and (max-width: 1650px) {
    #portal_slider #portal_main .portal_body:before,
    .portal_metro [class^=portal_sliderlink] {
        width: 225px;
    }

    .portal_metro#portal_main .portal_sliderlink-2 .portal_slidertext {
        width: 360px;
    }

    .portal_metro#portal_images .wikia-slideshow-wrapper,
    .portal_metro#portal_images .wikia-slideshow-images,
    .portal_metro#portal_images img.thumbimage,
    .portal_metro#portal_images {
        height: 280px !important;
    }
}
@media screen and (min-width: 1650px) {
    #portal_slider #portal_main .portal_body:before,
    .portal_metro [class^=portal_sliderlink] {
        width: 300px;
    }
}

/* default settings for div table */
.divTable { display: table; }
.divTableRow { display: table-row; }
.divTableCell, .divTableHead { display: table-cell; padding: 10px; }
.divTableBody { display: table-row-group; }

/* Curved notice banner style */
.bannercurve {
	background-color: rgba(255, 255, 255, 0.10);
	margin: 10px auto;
	border: 1px solid var(--cyberpunkwiki-accent-color);
	border-left: 4px solid var(--cyberpunkwiki-accent-color);
	text-align: center;
	color: var(--cyberpunkwiki-text-color);
	width: auto;
	overflow: auto;
	padding: 5px;
}

.bannerdoubleborder {
	background-color: rgba(255,255,255,0.1);
	border:7px double #101010; /* color is whatever article bg color is */
	max-width: 90%;
	margin: auto;
	padding: 8px;
	text-align: center;
}

/* spoiler/warning box */
.warningbanner {
  background-image: url(/mediawiki/images/1/17/CP2077_warning_box.svg/revision/latest?cb=20241218194135);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  min-width: 40%;
  padding: 5px;
  margin: auto;
  overflow: visible;
}

.warningtext {
  padding: 20px 15px 20px 25px;
  text-align: center;
}

/*** FD light mode theme  ***/
.theme-fandomdesktop-light .bannerdoubleborder {
	background-color:rgba(0,0,0,0.20);
	border-color: #e6e6e6;
}

/* for reflist template */
.references-small { 
	font-size: 70%; 
}

/***************/
/* quote boxes */
/***************/
.quotebox { /* border: 1px solid #523F35; background:#FFF77D; */ -moz-border-radius: 1em; border-radius: 1em; -webkit-border-radius: 1em; display: table; }
.quotebox + .quotebox { margin:1em 0 0 0; }
.quotebox .leftquote { color: #FFF77D; font-size: 3em; font-family: Times New Roman, serif; font-weight: bold; text-align: left; padding:0.3em 0 0 0.3em; }
.quotebox .rightquote { color: #FFF77D; font-size: 3em; font-family: Times New Roman, serif; font-weight: bold; text-align:right; padding:0 0.3em 0 0; }
.quotebox .quote { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.9em; padding: 1em 0.2em 0 0.2em; line-height: 1.6em; width: 100%; }
.quotebox .attribution { text-align: right; padding: 0em 1em 0.4em 0; font-weight: bold; font-style: oblique; }

/* Style for horizontal lists (separator following item).
   @source mediawiki.org/wiki/Snippets/Horizontal_lists
   @revision 9 (2016-08-10)
   @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;
}
/* Hide empty list items */
.hlist .mw-empty-li,
.hlist .mw-empty-elt {
    display: none;
}
/* 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;
}
/* 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;
}
/* 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) "\a0";
}
.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
    content: " (" counter(listitem) "\a0";
}

/* Prevents line breaks in links, used for navboxes */
.nowraplinks a, .nobreak { white-space: nowrap; }

/* --- TABLE DESIGNS --- */
/*******************
 * Navboxes
 *******************/
/*
* CSS Vars
* Note: The linter will throw an error. See [Help:Advanced CSS and JS (Fandom) this page] for more info.
*/
.navbox {
	--navbox-bg-color:var(--theme-page-background-color);
	--navbox-text-color:var(--theme-page-text-color);
	--navbox-title-color:#00687d;
	--navbox-header-color:rgba(100, 100, 100 ,.3);
	--navbox-alt-color:rgba(85,85,85,0.2);
	--navbox-border-color:var(--cyberpunkwiki-border-color--secondary);
}
.navbox {
    width: 100%;
    background: var(--navbox-bg-color, white);
    color: var(--navbox-text-color, black);
    margin: 10px auto;
    font-size: 88%;
    clear: both;
    padding: 2px;
    border-spacing: 0;
    border: 1px solid var(--navbox-border-color);
}

/* Merges navboxes that are directly under eachother */
.navbox + .navbox {
    margin-top: -15px;
}

.navbox .navbox-title {
    background: var(--navbox-title-color);
    color: #fff;
    font-weight: bold;
    font-size: 105%;
}

.theme-fandomdesktop-light .navbox-title {
  background: #8f001b;
}

.theme-fandomdesktop-light .navbox-title a {
  color: #FCEE0A;
}

.navbox-title th {
  filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 2px #000);
}

.navbox .navbox-vde {
    float:left;
    width:65px;
}

.navbox .navbox-title-padright {
    padding-right: 65px;
}

.navbox .navbox-title-padleft {
    padding-left: 65px;
}

.navbox .navbox-subgroup {
    border-spacing: 0;
    width: 100%;
}

.navbox .navbox-gutter {
    height: 2px;
}

.navbox .navbox-subgroup .navbox-gutter {
    background: var(--navbox-bg-color, white);
}

.navbox .navbox-section-row > td {
    padding: 0;
    height: 100%;
}

.navbox .navbox-section {
    width: 100%;
    border-spacing: 0;
}

.navbox .navbox-above,
.navbox .navbox-below {
    background: var(--navbox-header-color, #DDF);
    text-align: center;
}

.navbox .navbox-image {
    background: var(--navbox-bg-color, white);
    text-align: center;
}

.navbox .navbox-group,
.navbox .navbox-header {
    background: var(--navbox-header-color, #DDF);
    color: var(--navbox-text-color, black);
    font-weight: bold;
    height: 100%;
    padding: 2px 4px;
}

.navbox .navbox-header-collapsible {
    padding-left: 65px;
}

.navbox .navbox-group {
    text-align: right;
    padding-right: 1em;
    min-width: 150px;
}

.navbox .navbox-group,
.navbox .navbox-image-left {
    border-right: 2px solid var(--navbox-bg-color, white);
}

.navbox-image-right {
    border-left: 2px solid var(--navbox-bg-color, white);
}

.navbox .navbox-list {
    background: var(--navbox-bg-color, white);
    color: var(--navbox-text-color, black);
    width: 100%;
    height: 100%;
    padding: 0 !important;
}

.navbox .alt > .navbox-list {
    background: var(--navbox-alt-color, #F7F7F7);
}

.navbox .navbox-list div {
    padding: 0px 4px;
}

.navbox .navbox-list.no-group {
    text-align: center;
}

.navbox .mw-collapsible-toggle {
    width: 65px;
}

/* for printing purposes, won't show navbox if one wants to print page */
@media print {
    .navbox {
        display: none;
        }}


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

.divYellowBox {
	border: 3px solid transparent;
	-webkit-border-image: var(--cyberpunkwiki-main-box) round;
	-o-border-image: var(--cyberpunkwiki-main-box) round;
	border-image: var(--cyberpunkwiki-main-box) round;
	border-image-slice: 10% fill;
	border-image-width: 20px;
	margin: 10px auto;
	overflow: hidden;
	text-align:center;
}
 
.divGrayBox {
	border: 3px solid transparent;
	-webkit-border-image: var(--cyberpunkwiki-main-box-alt) round;
	-o-border-image: var(--cyberpunkwiki-main-box-alt) round;
	border-image: var(--cyberpunkwiki-main-box-alt) round;
	border-image-slice: 10% fill;
	border-image-width: 20px;
	padding: 10px;
}
 
.BlockQuote {
	display: block;
	border: 2px solid var(--cyberpunkwiki-border-color);
	border-radius: 10px;
	text-align: center;
	padding: 1em;
	overflow: hidden;
}

.BlockQuote p {
	white-space:pre-wrap;
}

.BlockQuote br {
	display: none; !important
}

/*** category images ***/
/* outer div around image */
#mw-category-media .gallerybox {
    border: 1px solid var(--cyberpunkwiki-border-color);
}

/* thumbnail image */
#mw-category-media .thumb {
    background-color: transparent;
    border: 0 !important;
}

/* thumbnails in unused images section */
li.gallerybox div.thumb {
    border: none !important;
    background: transparent !important;
}

/* video/image thumbnails */
.gallery-image-wrapper {
    border: none !important;
    background-color: transparent;
}

/* Tabs */
.cptabs {
    width:100%;
    margin-bottom:10px;
    background-image: var(--cyberpunkwiki-h2-background-image);
    background-repeat: no-repeat;
    background-position: 25% 105%;
    background-size:100% 10px;
    padding-bottom: 6px;
}

.cptabs ul {
    margin:0px;
    padding:0px;
    height:27px;
}

.cptabs li {
    display:inline-block;
    margin-right:0px;
    padding:0px;
    height:20px;
}
 
.cptabs li a {
	display:block;
	text-decoration:none !important;
}

.cptabs li span {
    padding:7px 15px 7px 15px;
    border:2px solid var(--cyberpunkwiki-border-color);
    border-bottom:none !important;
    border-radius:10px 10px 0px 0px;
    height:24px;
    line-height:10px;
    display:block;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

.cptabs .mw-selflink span, .cptabs .mw-selflink span:hover {
	color:#111111;
	border:2px solid var(--cyberpunkwiki-border-color);
	border-bottom:none !important;
	background-color: var(--cyberpunkwiki-accent-color);
   -moz-box-shadow:0px 0px 5px rgba(255,239,0,0.75);
   -webkit-box-shadow:0px 0px 5px rgba(255,239,0,0.75);
	box-shadow:0px 0px 5px rgba(255,239,0,0.75);
}
 
.cptabs li a span:hover {
    border-color: var(--cyberpunkwiki-accent-color--secondary);
    -moz-box-shadow:0px 0px 5px rgba(39,209,244,0.75);
    -webkit-box-shadow:0px 0px 5px rgba(39,209,244,0.75);
    box-shadow:0px 0px 5px rgba(39,209,244,0.75);
}

/*** Tabber coding ***/
ul.tabbernav {
	border-bottom:none !important;
}
.tabberlive {
	margin-top:1px;
	overflow:auto;
}
.tabberlive > .tabbertab:not(.tabbertabhide) {
	border:none !important;
}
.tabberlive > .tabbernav > li > a {
	font-size:14pt;
	font-weight:400 !important;
	letter-spacing:1px;
	text-align:center;
	padding-bottom:1%;
	background-color:transparent;
	border:none;
	color:#d5d4d4 !important;
	padding: 0px 5px;
}
.tabberlive > .tabbernav > li > a:hover {
	background-color:transparent;
	color:#ebe152 !important;
	background-image: none;
}

.tabberlive > .tabbernav > li > a:active {
	background-color:transparent
}
.tabberlive > .tabbernav > li.tabberactive > a {
	background-color:transparent;
	border:none;
	color: var(--cyberpunkwiki-accent-color--secondary) !important;
}
.tabberlive > .tabbernav > li.tabberactive > a:hover {
	background-color:transparent;
	border:none;
}
.tabberlive > .tabbernav > li.tabberactive > a:active {
	background-color:transparent;
}
 
/* remove extra spacing within the gallery */
.wikia-gallery-item {
	padding-bottom: 0 !important;
}
/*** end Tabber style edits ***/

/* light mode fix */
.theme-fandomdesktop-light .DBContainer { background-color: rgba(0,0,0,.9); }

/* [[Template:Plainlist]] */
.page-content .plainlist ul {
    line-height: inherit;
    list-style: none none;
    margin: 0;
}
.page-content .plainlist ul li { margin-bottom: 0; }

/* Styling for Template:CraftingTable */
.CraftingTable {
	display:inline-block;
	width:auto;
	max-width:535px;
}
.CraftingTable-Table {
	max-width:535px;
	font-size:12px;
}
.CraftingTable-Table tr, .CraftingTable-Table td { vertical-align: top; }
.CraftingTable-Block {
	border: 1px solid var(--theme-border-color);
	margin: 0px;
	padding: 1px 2px;
	background-color: var(--theme-page-background-color--secondary);
}

.CraftingTable-Block + .CraftingTable-Block { margin-top: 3px; }
.CraftingTable-Table .selflink { font-weight: normal; }
.theme-fandomdesktop-light .CraftingTable-arrow .image {
	background-image: url(/mediawiki/images/1/1f/Pent-arrow_light.png/revision/latest);
	background-repeat: no-repeat;
	width: 14px;
	background-size: contain;
	background-position: center;
}
.theme-fandomdesktop-light .CraftingTable-arrow .image img { opacity: 0; }

/*** Infobox Stat Bar ***/
.pi-stat-name {
    text-align: right;
    margin-right: 12px !important;
}

.pi-stat-bar {
	display: -webkit-inline-box;
	vertical-align: text-top;
	background-color: var(--cyberpunkwiki-pi-stat-bar-bg);
	background-color: var(--cyberpunkwiki-pi-stat-bar-bg2);
	width: 100px !important;
	max-width: 100px !important;
	height: 13px;
	margin-left: 0px !important;
}

.pi-stat-bar-min {
	background-color: var(--cyberpunkwiki-pi-stat-bar-min-bg);
}

.pi-stat-bar-max {
	background-color: var(--cyberpunkwiki-pi-stat-bar-max-bg);
	background-color: var(--cyberpunkwiki-pi-stat-bar-max-bg2);
}

.pi-stat-bar-max:after {
	content: '';
}

.pi-stat-bar-value {
	color: var(--cyberpunkwiki-pi-stat-bar-value);
	font-weight: bold;
}
/*** For coloring enemy abilities ***/
.theme-fandomdesktop-dark .icon-template {
	filter: var(--cyberpunkwiki-icon-color)
}
.theme-fandomdesktop-light .icon-template { 
	filter: invert(100%) !important; 
}

/* for light mode icons used across a variety of templates and pages */
.theme-fandomdesktop-light .filtericon {
	filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000);
}

.fandom-sticky-header__sitename {
	display: none;
}

section[data-item-name="general"] img {
	filter: var(--cyberpunkwiki-icon-color);
}

section[data-item-name="stats"] img {
	filter: var(--cyberpunkwiki-icon-color);
}

.condition {
	color: var(--cyberpunkwiki-link-color);
}
/* === PATCH step1: base dark + sidebar === */
:root{
  --bg:#0d0d0d; --bg-2:#111; --text:#e0e0e0;
  --link:#00d0ff; --link-visited:#a0a0ff; --link-hover:#ffcc00;
  --border:#333;
}

html, body{background:var(--bg)!important;color:var(--text)!important;}
.mw-body, .mw-body-content, #content{background:var(--bg)!important;color:var(--text)!important;}

/* top bar & navigation */
#mw-head, #left-navigation, #right-navigation{background:var(--bg)!important;}

/* left sidebar */
#mw-panel, #mw-panel .portal, #p-logo{background:var(--bg-2)!important;color:var(--text)!important;}
#mw-panel .portal h3, #mw-panel .portal li a{color:#cfcfcf!important;}
#mw-panel .portal li a:hover{color:var(--link-hover)!important;}

/* links */
a{color:var(--link)!important;}
a:visited{color:var(--link-visited)!important;}
a:hover{color:var(--link-hover)!important;}

/* tables / infoboxes */
table, .wikitable, .infobox{
  background:#1a1a1a!important;color:var(--text)!important;border:1px solid var(--border)!important;
}
.wikititle, .wikitable th, .infobox th{background:#222!important;color:var(--link-hover)!important;}
/* === PATCH step2: Cyberpunk accent === */

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: #ffcc00 !important;
  border-bottom: 1px solid #333 !important;
}

/* Links */
a { color: #39d1ff !important; }
a:visited { color: #a0a0ff !important; }
a:hover { color: #ffcc00 !important; }

/* Infobox */
.infobox {
  background: #111 !important;
  border: 2px solid #ffcc00 !important;
  color: #e0e0e0 !important;
}
.infobox th {
  background: #222 !important;
  color: #ffcc00 !important;
}
.infobox td {
  background: #181818 !important;
}

/* Navbox */
.navbox {
  background: #111 !important;
  border: 1px solid #ffcc00 !important;
}
.navbox-title {
  background: #222 !important;
  color: #ffcc00 !important;
}

/* Tables */
.wikitable {
  background: #1a1a1a !important;
  border: 1px solid #ffcc00 !important;
}
.wikitable th {
  background: #222 !important;
  color: #ffcc00 !important;
}

/* Sidebar highlight */
#mw-panel .portal h3 {
  color: #ffcc00 !important;
}
/* === PATCH step3: header, footer, layout, toc, buttons === */

/* Layout width + center content (Vector) */
.mw-body, .mw-content-container, #content {
  max-width: 1080px !important;
  margin: 0 auto !important;
  box-shadow: 0 0 0 1px #222, 0 10px 40px rgba(0,0,0,.4);
}

/* Top bar look */
#mw-head, #left-navigation, #right-navigation {
  border-bottom: 1px solid #222 !important;
}

/* Page title strip */
.firstHeading {
  background: linear-gradient(90deg, #111 0%, #0d0d0d 60%);
  padding: .6rem .8rem;
  margin: 0 0 .8rem 0;
  color: #ffcc00 !important;
  border-left: 4px solid #ffcc00;
}

/* TOC — compact card with accent border */
#toc, .toc {
  background: #121212 !important;
  border: 1px solid #333 !important;
  border-left: 3px solid #ffcc00 !important;
  border-radius: 4px;
  padding: .6rem .8rem !important;
}
.tocnumber { color: #ffcc00 !important; }

/* Infobox image & small polish */
.infobox .image img,
.infobox img {
  border: 1px solid #333;
  background: #0e0e0e;
  padding: 2px;
  border-radius: 2px;
  max-width: 100%;
}

/* Tables – subtle row stripes */
.wikitable tr:nth-child(even) td { background: #171717 !important; }
.wikitable tr:nth-child(odd)  td { background: #1b1b1b !important; }

/* Navbox links */
.navbox a { color: #39d1ff !important; }
.navbox a:hover { color: #ffcc00 !important; }

/* Buttons (MediaWiki UI) */
.mw-ui-button, .mw-ui-progressive, .mw-ui-primary {
  background: #ffcc00 !important;
  color: #111 !important;
  border: 1px solid #eab800 !important;
}
.mw-ui-button:hover { filter: brightness(1.05); }
.mw-ui-quiet { color: #39d1ff !important; }
.mw-ui-quiet:hover { color: #ffcc00 !important; }

/* Code/Pre blocks */
pre, code, .mw-code {
  background: #101010 !important;
  color: #e8e8e8 !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 4px;
}
pre { padding: .6rem .8rem !important; overflow: auto; }

/* Blockquotes */
blockquote {
  border-left: 3px solid #ffcc00;
  background: #111;
  padding: .6rem .8rem;
  color: #dcdcdc;
}

/* Lists tighter + readable */
.mw-body-content ul, .mw-body-content ol { margin: .4rem 0 .8rem 2rem !important; }
.mw-body-content li { line-height: 1.5; }

/* Footer */
#footer, .mw-footer {
  background: #0f0f0f !important;
  border-top: 1px solid #222 !important;
  color: #9a9a9a !important;
  padding-top: 12px;
}
#footer a, .mw-footer a { color: #c8c8c8 !important; }
#footer a:hover, .mw-footer a:hover { color: #ffcc00 !important; }

/* Categories bar */
#catlinks {
  background: #111 !important;
  border: 1px solid #333 !important;
  border-left: 3px solid #ffcc00 !important;
}
#catlinks a { color: #39d1ff !important; }
#catlinks a:hover { color: #ffcc00 !important; }

/* Minor polish for edit sections */
.mw-editsection, .mw-editsection a {
  color: #888 !important;
}
.mw-editsection a:hover { color: #ffcc00 !important; }
/* === PATCH step4: kill white spots, polish Vector === */

/* Inputs / search */
input, textarea, select { background:#121212!important; color:#e0e0e0!important; border:1px solid #333!important; }
input::placeholder, textarea::placeholder { color:#8a8a8a!important; }
#simpleSearch, .vector-search-box { background:#111!important; border:1px solid #222!important; }
.vector-search-box-input { background:#121212!important; color:#e0e0e0!important; border-color:#333!important; }
.vector-search-box .vector-search-box-input:focus { outline: none!important; box-shadow: 0 0 0 1px #ffcc00 inset; }

/* Top tabs (Vector) */
.vector-menu-tabs, .vector-menu-tabs a { background:#0f0f0f!important; color:#ddd!important; border-color:#222!important; }
.vector-menu-tabs .selected a { background:#141414!important; color:#ffcc00!important; border-bottom-color:#141414!important; }
.vector-sticky-header { background:#0d0d0d!important; border-bottom:1px solid #222!important; }

/* Portlets / sidebar bodies */
.portal, .portal .body { background:#111!important; }

/* Thumbnails / galleries */
.thumb, .thumbinner { background:#111!important; border:1px solid #333!important; }
.thumbcaption { background:#0f0f0f!important; color:#cfcfcf!important; border-top:1px solid #333!important; }
.gallery, .gallerybox, .gallerytext { background:#111!important; border:1px solid #333!important; }

/* Message boxes / notices / hatnotes */
.ambox, .tmbox, .ombox, .fmbox, .imbox, .cmbox, .notice, .hatnote, .metadata {
  background:#111!important; color:#e0e0e0!important; border:1px solid #333!important; border-left:3px solid #ffcc00!important;
}

/* References */
ol.references, .references, .refbegin, .refend {
  background:#111!important; border:1px solid #333!important; padding:.6rem .8rem!important; border-left:3px solid #ffcc00!important;
}
.references li { margin: .25rem 0!important; }

/* Collapsible areas */
.mw-collapsible-content { background:#121212!important; border-top:1px solid #222!important; }

/* Infobox links for contrast */
.infobox a { color:#39d1ff!important; }
.infobox a:hover { color:#ffcc00!important; }

/* Horizontal rule */
hr { border:0; border-top:1px solid #222!important; }

/* Inline code / kbd */
code, kbd, samp { background:#101010!important; color:#e8e8e8!important; border:1px solid #2a2a2a!important; border-radius:3px; padding:0 .25rem; }
/* === PATCH step5: link hover glow === */

/* smooth transitions for links */
a, .mw-body-content a, .navbox a, .infobox a, #mw-panel .portal li a {
  transition: color .15s ease, text-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}

/* default link colors stay ako máme už */
a { text-decoration: none; }
a:hover, a:focus { 
  color: #ffcc00 !important; 
  text-decoration: underline; 
  text-underline-offset: 2px;
  text-shadow: 0 0 6px rgba(255, 204, 0, .55);
  outline: none;
}

/* infobox & navbox konkrétne (vyšší kontrast) */
.infobox a:hover, .infobox a:focus,
.navbox a:hover, .navbox a:focus {
  color: #ffcc00 !important;
  text-shadow: 0 0 8px rgba(255, 204, 0, .65);
}

/* sidebar (ľavé menu) */
#mw-panel .portal li a:hover, 
#mw-panel .portal li a:focus {
  color: #ffcc00 !important;
  text-shadow: 0 0 6px rgba(255, 204, 0, .5);
}

/* breadcrumbs / edit-section / footer odkazy */
#siteSub a:hover, .mw-editsection a:hover, #footer a:hover,
#siteSub a:focus, .mw-editsection a:focus, #footer a:focus {
  color: #ffcc00 !important;
  text-shadow: 0 0 5px rgba(255, 204, 0, .5);
}

/* bezpečný focus pre klávesnicu (ak link nemá hover) */
a:focus-visible {
  outline: 2px solid #ffcc00;
  outline-offset: 2px;
  text-decoration: none;
}
/* === PATCH step6: fandom-like hover bar & TOC/sidebar highlight === */

/* univerzálny žltý podčiarkovací pruh na hover (bez glow) */
a, .mw-body-content a, .navbox a, .infobox a, #mw-panel .portal li a {
  text-decoration: none;
  background-image: linear-gradient(#ffcc00,#ffcc00);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 2px;                 /* hrúbka pruhu */
  transition: background-size .18s ease, color .18s ease;
}
a:hover, a:focus {
  color: #ffcc00 !important;
  background-size: 100% 2px;               /* pruh sa roztiahne pod text */
  text-shadow: none !important;            /* vypni predchádzajúci glow */
  outline: none;
}

/* v infoboxe a navboxe jemnejší efekt (nech pruh neskáče cez tesný layout) */
.infobox a, .navbox a {
  background-size: 0 1.5px;
}
.infobox a:hover, .navbox a:hover,
.infobox a:focus, .navbox a:focus {
  background-size: 100% 1.5px;
}

/* TOC – zvýrazni celý riadok na hover + žltý ľavý okraj */
#toc ul li, .toc ul li {
  transition: background-color .15s ease, border-color .15s ease;
  border-left: 2px solid transparent;
}
#toc ul li:hover, .toc ul li:hover {
  background: rgba(255, 204, 0, .08);
  border-left-color: #ffcc00;
}
#toc a, .toc a {
  background-image: none;                  /* v TOC nechaj iba block highlight */
  text-decoration: none;
}
#toc a:hover, .toc a:hover { color: #ffcc00 !important; }

/* ľavé menu – celé položky na hover s tenkým žltým okrajom vľavo */
#mw-panel .portal ul li {
  border-left: 2px solid transparent;
  transition: background-color .15s ease, border-color .15s ease;
}
#mw-panel .portal ul li:hover {
  background: rgba(255, 204, 0, .08);
  border-left-color: #ffcc00;
}
#mw-panel .portal li a {
  background-image: none;                  /* pre menu použijeme block highlight, nie podčiarknutie */
}

/* breadcrumbs / edit-section / footer – tenší pruh */
#siteSub a, .mw-editsection a, #footer a {
  background-size: 0 1px;
}
#siteSub a:hover, .mw-editsection a:hover, #footer a:hover {
  background-size: 100% 1px;
  color: #ffcc00 !important;
}

/* accessibility: klávesový focus bez posunu layoutu */
a:focus-visible {
  outline: 2px solid #ffcc00;
  outline-offset: 2px;
  background-size: 100% 2px;
}
/* === PATCH step7: refine TOC, link underline, infobox header === */

/* A) BODY LINKS – tenší „fandom“ underline, iba v obsahu stránky */
.mw-body-content a {
  text-decoration: none;
  background-image: linear-gradient(#ffcc00,#ffcc00);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;            /* 1px je decentnejšie */
  transition: background-size .16s ease, color .16s ease;
}
.mw-body-content a:hover, .mw-body-content a:focus {
  color: #ffcc00 !important;
  background-size: 100% 1px;
  text-shadow: none !important;
}

/* Zachovaj predchádzajúce farby pre navbox/infobox odkazy, ale bez background pruhu */
.navbox a, .infobox a { background-image: none; }

/* B) TOC – jemný block highlight, hlavne žltý ľavý pás; menšia intenzita */
#toc ul li, .toc ul li {
  border-left: 2px solid transparent;
  transition: background-color .12s ease, border-color .12s ease;
}
#toc ul li:hover, .toc ul li:hover {
  background: rgba(255, 204, 0, .05);  /* z ~.08 → .05 */
  border-left-color: #ffcc00;
}
#toc a, .toc a { color: #cfe8ff; background-image: none; }
#toc a:hover, .toc a:focus { color: #ffcc00 !important; }

/* C) INFOBOX HEADER – žltý pás s čiernym textom, bez bieleho pozadia */
.infobox .infobox-above,
.infobox caption,
.infobox .infobox-title,
.infobox th.heading {
  background: #ffcc00 !important;
  color: #111 !important;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid #eab800 !important;
  padding: .35rem .5rem !important;
}
.infobox, .infobox td, .infobox th {
  border-color: #2b2b2b !important;      /* jemnejšie línie vo vnútri */
}
.infobox td { background: #151515 !important; }
.infobox th { background: #1b1b1b !important; color: #ffcc00 !important; }

/* D) Vector tabs – ešte subtílnejšie */
.vector-menu-tabs, .vector-menu-tabs a { border-color:#222 !important; }
.vector-menu-tabs .selected a {
  background:#121212 !important; 
  border-bottom-color:#121212 !important; 
  color:#ffcc00 !important;
}

/* E) Typografia – trocha čitateľnejšie odseky */
.mw-parser-output > p { line-height: 1.6; }

/* F) Jemnejšie horizontálne čiary */
hr { border-top: 1px solid #1f1f1f !important; }

/* G) Bez „bar underline“ v sidebare (používame block highlight z predošlého patchu) */
#mw-panel .portal li a { background-image: none; }
/* === PATCH step8: message boxes + heading rhythm === */

/* A) Štýly pre všetky message boxy (error/warn/info/note) v dark štýle */
.ambox, .tmbox, .ombox, .fmbox, .imbox, .cmbox, .mw-message-box, .hatnote, .notice {
  background:#111 !important;
  color:#e6e6e6 !important;
  border:1px solid #333 !important;
  border-left:4px solid #4aa3ff !important; /* default = info modrá */
  padding:.65rem .8rem !important;
  margin:.8rem 0 !important;
  border-radius:3px;
}
.mw-message-box-warning, .ambox-warning, .ombox-warning {
  border-left-color:#ffcc00 !important;
}
.mw-message-box-error, .ambox-serious, .ombox-crit, .error {
  border-left-color:#ff5b5b !important;
  background:#140f0f !important;
}
.mw-message-box-success, .ambox-green {
  border-left-color:#66d17a !important;
  background:#0f1410 !important;
}
.hatnote { font-style: italic; color:#d0d0d0 !important; }

/* Linky v boxoch */
.ambox a, .mw-message-box a, .hatnote a {
  color:#39d1ff !important;
}
.ambox a:hover, .mw-message-box a:hover, .hatnote a:hover {
  color:#ffcc00 !important;
}

/* B) Nadpisy – vzdušnejšie medzery a konzistentná veľkosť */
h1.firstHeading { margin: .25rem 0 1.0rem 0 !important; }
.mw-parser-output h2 { margin: 1.4rem 0 .6rem !important; font-size:1.6rem; }
.mw-parser-output h3 { margin: 1.0rem 0 .45rem !important; font-size:1.25rem; }
.mw-parser-output h4 { margin: .8rem 0 .35rem !important; font-size:1.1rem; }

/* jemnejší underline pri h2/h3, aby nelietali línie */
.mw-parser-output h2, .mw-parser-output h3 {
  border-bottom:1px solid #1f1f1f !important;
}

/* C) TOC – tenší ľavý pás a ľahšie pozadie pri hover */
#toc ul li, .toc ul li { border-left-width:1px !important; }
#toc ul li:hover, .toc ul li:hover { background: rgba(255,204,0,.04) !important; }

/* D) References – lepší kontrast odsekov v zozname */
.references li { line-height:1.5; }

/* E) Error hlášky zo šablón (červený text) – znížiť agresivitu farby na dark pozadí */
.mw-parser-output .error, .error { color:#ff7a7a !important; }