MediaWiki:Common.css

/* CSS placed here will be applied to all skins */
/* Размещённый здесь CSS будет применяться ко всем темам оформления */

@font-face {
    font-family: 'Share Tech Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://commons.wiki.gg/images/9/9c/Share_Tech_Mono_%28with_RU_glyphs%29.ttf?20240331233000) format('truetype');
}

@font-face {
    font-family: 'Fixedsys Excelsior';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://commons.wiki.gg/images/7/70/Fixedsys_Excelsior_3.01_Regular.ttf?20240402211700) format('truetype');
}

:root {
    --votv-background: url(/ru/images/b/be/Background-j.jpg);
    
    --votv-favicon: url(/images/4/4a/Site-favicon.ico);
    --votv-side-icon: url(/images/c/c0/Monitor_logo.png);
	
    --votv-logo: url(/ru/images/5/52/FileSite-logo.png);
    --votv-side-title: var(--votv-logo);
    
    --votv-font: sans-serif;
    --votv-font--highlights: 'Share Tech Mono', monospace;
    --votv-content-font-size: 1.10;
    
	--votv-background-color: #0b0a0d;
	--votv-background-color--rgb: 11, 10, 13;
	--votv-midground-color: #545454;
	--votv-forground-color: #ededed;
	--votv-forground-color--rgb: 237, 237, 237;
	
	--votv-main-color: #5BFE40;
    --votv-main-color--rgb: 91, 254, 64;
	--votv-main-color-dark: #127e00;
    --votv-main-color-dark--rgb: 18, 126, 0;
	
    --votv-accent-color: #fffb22;
    --votv-accent-color--rgb: 255, 251, 34;
	--votv-accent-color-dark: #ac840d;
    --votv-accent-color-dark--rgb: 172, 132, 13;
	
	--votv-secondary-accent-color: #FF8900;
	--votv-secondary-accent-color-dark: #bb6500;
	
	--votv-third-accent-color: #00FFFF;
    --votv-third-accent-color--rgb: 0, 255, 255;
	--votv-third-accent-color-dark: #009b9b;
    --votv-third-accent-color-dark--rgb: 0, 155, 155;
	
    --votv-firstheader: var(--votv-main-color);
    --votv-firstheader-shadow: 0px 0px 4px var( --votv-firstheader );
    
	--votv-header: var(--votv-main-color);
	--votv-header-shadow: 0px 0px 4px var(--votv-main-color);
	
    --votv-text-body: var(--votv-forground-color);
    --votv-text-body--rgb: var(--votv-forground-color--rgb);
	
	--votv-border_thin_w: 1px solid var(--votv-forground-color);
	
    --votv-border: 2px solid var(--votv-main-color);
	--votv-border_selected: 2px solid var(--votv-accent-color);
    
	--votv-border_thick: 4px solid var(--votv-main-color);
	--votv-border_selected_thick: 4px solid var(--votv-accent-color);
	
    --votv-link: var(--votv-main-color);
    --votv-link--rgb: var(--votv-main-color--rgb);
    --votv-link-visited: var(--votv-main-color-dark);
    --votv-link-visited--rgb: var(--votv-main-color-dark--rgb);
    --votv-link-new: #fc3b2c;
    --votv-link-new--rgb: 252,59,44;
    --votv-link-outside: var(--votv-third-accent-color);
    --votv-link-outside--rgb: var(--votv-third-accent-color--rgb);
    --votv-link-visited-outside: var(--votv-third-accent-color-dark);
    --votv-link-visited-outside--rgb: var(--votv-third-accent-color-dark--rgb);
	
	--votv-ingame-green: #5BFE40;
	--votv-ingame-yellow: #FFFB22;
	--votv-ingame-orange: #FF8900;
	--votv-ingame-cyan: #00FFFF;
	
	--votv-hunger-color: #874E2A;
	--votv-sleep-color: #4969A9;
	--votv-health-color: #BC0000;
	--votv-battery-color: #007C00;
	
	--votv-ingame-font: 'Fixedsys Excelsior', monospace;
	--votv-ingame-font-title: 'Share Tech Mono', monospace;
	
	/************************
	* AMBox Color Variables *
	*************************/
	
	--votv-ambox-color-default: #545454;
	--votv-ambox-color-default--rgb: 84, 84, 84;
	
	--votv-ambox-color-imporant: #ff0000;
	--votv-ambox-color-imporant--rgb: 255, 0, 0;
	
	--votv-ambox-color-mild-issue: #FFFB22;
	--votv-ambox-color-mild-issue--rgb: 255, 251, 34;
	
	--votv-ambox-color-good: #5BFE40;
	--votv-ambox-color-good--rgb: 91, 254, 64;
	
	--votv-ambox-color-technical: #800080;
	--votv-ambox-color-technical--rgb: 128, 0, 128;
	
	--votv-ambox-color-notice: #00FFFF;
	--votv-ambox-color-notice--rgb: 0, 255, 255;
	
	--votv-ambox-color-sub: #FF8900;
	--votv-ambox-color-sub--rgb: 255, 137, 0;
	
	/****************************
	* End AMBox Color Variables *
	*****************************/

	/***********************
	*  Portable Infoboxes  *
	************************/
	--pi-background: #151515;
	--pi-secondary-background: var(--pi-background);
	--pi-secondary-background--rgb: 21, 21, 21;
	--pi-secondary-background-label: var(--votv-main-color);
	--pi-border-color: var(--votv-main-color);
    --pi-width: 290px;
	/**************************
	*  End Portable Infoboxes *
	***************************/

	/***************
	*   Navboxes   *
	****************/
	--navbox-heading-background-color: rgba(var(--votv-main-color--rgb), 0.3);
	--navbox-heading-text-color: #fff;
	--navbox-cell-background-color: rgba(var(--votv-main-color--rgb), 0.1);
	--navbox-cell-text-color: #fff;
	/*******************
	*   End Navboxes   *
	********************/
	
	--template-spoiler-border: var(--votv-main-color-dark);
	--template-spoiler-background: var(--votv-midground-color);
	--template-spoiler-background--rgb: var(--votv-forground-color--rgb);
	
	--template-spoiler-hover-background--rgb: var(--votv-main-color-dark--rgb);
	--template-spoiler-hover-clicked-background--rgb: var(--votv-accent-color-dark--rgb);
}

/***************************************/
/* No idea what this is. */
#mw-panel .mw-list-item a{	
	display: block;
}

#mw-panel .mw-list-item a:hover {
	color: var(--votv-accent-color);
}
#mw-panel .mw-list-item:hover {
	background-color:  var(--wiki-navigation-selected-background-color);
	border: 2px solid var(--votv-accent-color);
}
/***************************************/

/*****************************
*     Sidebar toggling       *
******************************/
@media screen and (min-width: 721px) {
	.content-size-expanded {
		
		#mw-panel {
			margin-bottom: 2em;
			display: none
		}
		
		.mw-body,
		.mw-footer {
			margin-inline: 1em;
		}
	}
	#nav-content-size-toggle {
		color: var( --wiki-content-link-color );
		position: absolute;
		bottom: 8px;
		left: calc( 10em / 2 );
		transform: translateX(-50%);
		font-weight: 900;
		font-size: 120%;
		cursor: pointer;
		padding: 4px;
		border: 2px solid var(--wiki-content-border-color);
	}
  
	#nav-content-size-toggle:hover {
		background-color:  var(--wiki-navigation-selected-background-color);
		border: 2px solid var(--wiki-accent-color);
		color: var(--wiki-accent-color);
	}

	#nav-content-size-toggle:active {
		background-color:  var(--wiki-navigation-selected-background-color);
		border: 2px solid var(--votv-secondary-accent-color);
		color: var(--votv-secondary-accent-color);
	}
}
@media screen and (max-width: 720px) {
  #nav-content-size-toggle {
    display: none;
  }
}
/******************************
*     End sidebar toggling    *
******************************/


/*****************************
*     PortableInfoboxes      *
******************************/
.portable-infobox {
	background: rgba(var(--pi-secondary-background--rgb), 0.5);
	border-radius: 8px;
	padding: 0 0.5em 1em;
}

.portable-infobox .pi-title,
.portable-infobox .pi-header {
	text-align:center;
	font-size:1.5em;
	color:var(--pi-secondary-background-label);
}

.mw-body .portable-infobox > .pi-title {
	font-size: 1.8em;
    font-weight: 900;
}

.portable-infobox > .pi-header,
.portable-infobox > .pi-data,
.portable-infobox > .pi-data:last-child {
	border: 1.5px solid var(--pi-border-color);
	
	align-content: center;
	align-items: center;
	justify-content: center;
}

.portable-infobox .pi-data + .pi-data {
  border-top: 0;
}

.portable-infobox .pi-image {
	border-block: 0.25em solid rgba(var(--votv-main-color-dark--rgb), 0.25);
	margin-bottom: 8px;
}

.pi-image-thumbnail {
	max-width:100%;
}

.pi-section-navigation .pi-section-tab.pi-section-active,
.pi-section-navigation .pi-section-tab.current,
.pi-media-collection .pi-tab-link.current {
	background: rgba(var(--pi-secondary-background--rgb), 0.1);
	color: var(--pi-secondary-background-label);
}

/* overqualify these to overwrite normal content heading styles */
.mw-body .portable-infobox h2,
.mw-body .portable-infobox h3 {
	border-bottom: 0;
	font-family: inherit;
	font-weight: 700;
	margin: 0;
	font-family: var(--votv-font--highlights);
}

/* Framed images */
.pi-theme-imageborder .pi-title + .pi-image {
    background:
        no-repeat center / contain url(/images/e/ec/Image_frame.png?20240325184526),
        no-repeat center / 95% url(/images/2/29/Image_background.png?20240325184500);
    background-size: contain;
    padding: 0;
    margin: 0.3em;
}
.pi-theme-imageborder .pi-title + .pi-image .pi-image-thumbnail {
    margin: 14px 14px 24px;
}

/****************************
*   End PortableInfoboxes   *
*****************************/

/*********************
* Quick-nav Template *
*********************/
.quick-nav{
	display: flex;
	flex-flow: column;
	align-items: center;
	text-align: center;
	width: fit-content;
	gap: 1%;
	padding: 5px;
	height: auto;
	
	.quicknav-image{
		text-align: center;
		padding: 5px;
		
		img{
			min-width: 96px;
			max-width: 128px;
			height: auto;
		}
	}
	
	.quicknav-link{
		
		font-size: 1.5em;
		font-weight: bold;
		
		a{
			text-decoration: underline;
		}
	}
	
	.quicknav-text{
		width: fit-content;
	}
}

.quick-nav-sideways {
	flex-flow: row;
	text-align: left;
	gap: 0.25%;
	width: auto;
}

.quick-nav-small {
	padding: 0px;
	
	.quicknav-image{
		padding: 0px;
		
		img{
			min-width: 32px;
			max-width: 32px;
		}
	}
	
	.quicknav-link{
		font-size: 100%;
		font-weight: normal;
	}
}

/*************************
* End Quick-nav Template *
**************************/

/************************
* Start DRUID infoboxes *
************************/
.druid-container {
    --druid-background-color: var(--wiki-body-dynamic-color);
    --druid-background-color--rgb: var(--wiki-body-dynamic-color--rgb);
	
	--druid-title-font: var(--votv-font--highlights);
	--druid-title-color: var(--wiki-heading-color--primary);
	
	--druid-border: 2px solid var(--wiki-content-border-color);
	
	--druid-focused-background-color: var(--wiki-accent-color);
	--druid-focused-outline-color: var(--wiki-accent-color);
	--druid-focused-text-color: var(--wiki-body-background-color);
	
	--druid-hover-background-color: var(--wiki-accent-color);
	--druid-hover-text-color: var(--wiki-accent-color);
	--druid-hover-background-color--rgb:var(--wiki-accent-color--rgb);
}

.druid-outside{
	float: right;
  	background: rgba(var(--wiki-body-dynamic-color--rgb), .05);
	border-radius: 8px;
	padding: 0.5em 1em 1em;
}


.druid-container {
    float: right;
    clear: right;
    width: 20em;
    box-sizing:border-box;
    border-collapse:collapse;
    margin: 0px;
}

@media screen and (max-width: 450px) {
  .druid-container {
    width:100%;
  }
}

@media screen and (max-width: 720px) {
  .druid-container {
    float: none;
    margin: 0.5rem auto;
  }
}

.druid-main-images-file,
.druid-main-image {
    text-align:center;
    background:
    	no-repeat center / contain url(/images/e/ec/Image_frame.png?20240325184526),
    	no-repeat center / 95% url(/images/2/29/Image_background.png?20240325184500);
    background-size: contain;
    padding: 1em;
    width: auto;
    a{
	    width: 256px; /* why does this look weird */
	    height: 256px;
	    display: flex;
    	margin-left: auto;
    	margin-right: auto;
    }
}

.druid-main-images-file img,
.druid-main-image img {
	max-height: 256px;
	max-width: 256px;
	height: auto;
	width: auto;
	margin: auto;
}

.druid-title,
.druid-section{
	font-family: var(--druid-title-font);
	color: var(--druid-title-color);
	text-align:center;
}

.druid-title{
	font-size: 1.8em;
	font-weight: 900;
}

.druid-section {
 	font-size:1.25em;
	border-bottom: 2px solid;
}

.druid-row{
	border: var(--druid-border);
	text-align: center;
}

.druid-row-ingamedesc{
	border: unset;
	border-bottom: var(--druid-border);
	font-style: italic;
}

.druid-label {
	width:7em;
	border-right: var(--druid-border);
	font-family: var(--druid-title-font);
	font-size: 1.1em;
}

.druid-tabs{
	text-align: center;
	font-family: var(--druid-title-font);
	font-size: 1.25em;
}

.druid-main-images {
    padding: 5px;
}

.druid-main-images-labels {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 0.25em;
    gap: 0.25em;
}

.druid-main-images-label {
    cursor: pointer;
    flex: 1 1 auto;
    text-align: center;
    transition: .1s ease-in;
    outline: var(--druid-border);
}

.druid-main-images-label.focused {
    background: var(--druid-focused-background-color);
    color: var(--druid-focused-text-color);
	outline: 2px solid var(--druid-focused-outline-color);
}

.druid-main-images-label:not(.focused):hover {
    background: rgba(var(--druid-hover-background-color--rgb), 0.25);
	outline: 2px solid var(--druid-hover-background-color);
}

.druid-toggleable-data:not(.focused),
.druid-main-images-file:not(.focused),
.druid-toggleable-heading:not(.focused) {
    display: none;
}

.druid-row:not(:has(.druid-grid)):has(.druid-toggleable-data-empty.focused) {
    display: none;
}

.druid-section:has(.druid-toggleable-heading-empty.focused) {
    display: none;
}

.druid-grid {
    display:grid;
}

.druid-grid-section {
	border: unset;
}

.druid-grid-item {
    background: rgba(var(--druid-background-color--rgb), .1); /* REPLACE THIS */
	margin: 0.25em;
    padding: 0.25em;

}

.druid-grid-item .druid-label{
	width:100%;
	border-right: unset;
	border-bottom: var(--druid-border);
}

.druid-grid-section{
	border-bottom: var(--druid-border);
	margin: 0;
	text-align: center;
}
	
.druid-collapsed {
    display: none;
}

.druid-collapsible {
    cursor: pointer;
    position: relative;
}

.druid-collapsible th::before  {
    content: "-";
    display: block;
    position: absolute;
    right: 10px;
    font-size: 20px;
    font-weight: bold;
}

.druid-collapsible-collapsed th::before {
    content:'+';
}

tr.druid-collapsible th.druid-section:hover,
.druid-collapsible:hover th::before,
.druid-collapsible-collapsed:hover  th::before{
	color: var(--druid-hover-text-color);
	transition: .1s ease-in;
}

tr.druid-collapsible th.druid-section:hover{
	background: rgba(var(--druid-hover-background-color--rgb), 0.25);
	transition: .1s ease-in;
}

tr:nth-child(n+2 of :has(.druid-section)) .druid-section{ /* THIS IS WHAT MAKES THE NON-FIRST SECTION OF THE DRUID INFOBOX HAVE BORDER, GODDAMN IT TOOK SO LONG TO FIGURE THIS OUT. SHOUTOUTS TO mrcrackerplays ON DISCORD. */
	border: var(--druid-border);
}
/**********************
* End DRUID infoboxes *
***********************/

/**************************
* Start Modular Templates *
**************************/
/********* [[Template:Ambox]] *********/
.ambox {
	background: rgba(var(--ambox-color--rgb), 0.15);
	border-radius: 1.25em;
	display: flex;
	align-items: center;
	gap: .6em;
	margin: 1em 0;
	padding: 3px .6em;
}

.ambox.border{
	border-left: 10px solid var(--ambox-color);
}


@media (min-width: 720px) {
	.ambox {
		margin-inline: 10%;
	}
}

.ambox.tiny {
	padding: .04rem .5em;
	margin-inline: 0;
    width: fit-content;
}

.ambox.tiny.border{
	border-left: 6px solid var(--ambox-color);
}

.ambox + .ambox {
	margin-top: -.6em;
}

.ambox-content p {
	margin: .15em 0;
}

.ambox-title {
	font-weight: bold;
	font-size: 1.25em;
}

.ambox-text{
	font-size: 0.95em;
}

.ambox.tiny .ambox-title {
	font-size: 1em;
}
/********* [[Template:Hatnote]] *********/
.hatnote {
    padding: 1px 0 1px 1.6em;
    margin-bottom: 0.5em;
    font-style: italic;
    border-top: 1px solid var(--wiki-body-dynamic-color--secondary--inverted);
    border-bottom: 1px solid var(--wiki-body-dynamic-color--secondary--inverted);
}

.hatnote.icon {
	padding-left: 0;	
}

/********* [[Template:Spoiler]] *********/
.spoiler-content {
  background-color: rgb(127, 127, 127);
  transition: all 0.3s;
  cursor: pointer;
}

.spoiler-content > span {
  opacity: 0;
  transition: all 0.3s;
}

.spoiler-content > * {
  pointer-events:none;
}

.spoiler-content.show > * {
  pointer-events:unset;
}

.spoiler-content.show {
  background-color: rgba(127, 127, 127, 0);
}

.spoiler-content.show > span {
  opacity: 1;
}

/********* [[Template:Link icon]] *********/
.link-icon {
	display: inline-flex; 
	align-items: baseline;
}

.link-icon .regular {
    align-self: center;
}

.link-icon .regular a {
	display: flex;
}

.link-icon .regular img {
	height: var(--link-icon-size);
	max-width: var(--link-icon-size);
}

.link-icon .fallback {
	outline: 1px solid var(--wiki-content-text-color);
	border-radius: 50%;
	text-align: center;
	width: var(--link-icon-size);
	line-height: var(--link-icon-size);
}

.link-icon.notext .fallback {
	display: inline-block;
}

.link-icon.notext {
    display: inline;
}

/********* [[Template:Quote]] *********/
.quote {
    background: var(--wiki-content-background-color--secondary);
    border-radius: 5px;
    border: 2px solid var(--wiki-content-border-color);
    margin: .5em 0;
    padding: .5em;
}

.quote .block {
	display: block;
}

.quote .title {
	font-size: large;
    font-weight: bold;
}

.quote .content {
	font-style: italic;
}

.quote .author {
	font-weight: bold;
	text-align: end;
}

.quote .marks-wrapper {
	display: flex;
	gap: 5px;
}

.quote .marks-wrapper::before,
.quote .marks-wrapper::after {
	font-size: 100px;
    line-height: 0px;
}

.quote .marks-wrapper::before {
	content: "“";
	margin-top: 40px;
}

.quote .marks-wrapper::after {
	content: "”";
	align-self: end;
	margin-bottom: -10px;
}

/************************
* End Modular Templates *
************************/

/****************************************
* Semantically-correct horizontal lists *
****************************************/
.hlist dl,
.hlist ol,
.hlist ul {
	margin: 0;
	padding: 0;
}

/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
	/*
	 * don't trust the note that says margin doesn't work with inline
	 * removing margin: 0 makes dds have margins again
	 * We also want to reset margin-right in Minerva
	 */
	margin: 0; 
	display: inline;
}

/* Display requested top-level lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
/* Display nested lists inline */
.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 {
	display: none;
}

/* TODO: :not() can maybe be used here to remove the later rule. naive test
 * seems to work. more testing needed. like so: */
.hlist dt:not(:last-child)::after {
	content: ": ";
}
.hlist dd:not(:last-child)::after,
.hlist li:not(:last-child)::after {
	content: " · ";
	font-weight: bold;
}

/* 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";
}
/********************************************
* End semantically-correct horizontal lists *
*********************************************/

/******************
* Main Page Stuff *
*******************/

/***** old *****/
#mp-about{
	.mp-header{
		font-size: 1.5em;
	}
	
	.mp-body{
		font-size: 1em;
		margin: 1%;
	}
}

#mp-nav{
	.mp-footer{
		border-top: var(--votv-border)
	}
	
	img{
		border: var(--votv-border);
	}
}

/************ Old + Alex ************/
#mp-container {
	--cell-spacing: 1.2em 1.8em;
}

#mp-container {
	gap: var(--cell-spacing);
	display: flex;
	flex-direction: row;
    flex-wrap: wrap;
	padding: 1%;
}

.mp-row{
 	display: flex;
 	flex-flow: row;
	justify-content: stretch;
	align-items: stretch;
	gap: var(--cell-spacing);

	
	& > .mp-box:first-child,
	& > .mp-column:first-child {
		flex-grow: 1;
	}
	
	& > .mp-box:last-child {
		flex-basis: 20%;
		flex-grow: 0;
	}
}

.mp-column{
 	display: flex;
 	flex-flow: column;
	justify-content: stretch;
	align-items: stretch;
	gap: var(--cell-spacing);
}


.mp-box {
	text-align: center;
	border: 2px solid var(--votv-main-color-dark); 
	background: black;
	font-family: var(--votv-font--highlights);
	flex: 1 1 auto;
	font-size: 1.1em;
	
	.mp-header{
		color: var(--votv-firstheader); /* placing it here makes it actually override stuff */
		text-shadow: var(--votv-firstheader-shadow);
		
		font-size: 1.5em;
		font-weight: bold;
		margin: 0;
		padding-top:0;
		border-bottom: 2px solid var(--votv-main-color-dark);
		text-decoration: 2px underline var(--votv-main-color-dark);
	}
	
	.mp-body {
		margin: 0.5em 1em;
	}
}


#mp-welcome{
	.mp-header{
		font-size: 2.5em;
		font-weight: bold;
		
		margin: 1%;
	}
	
	.mp-body{
		font-size: 1.5em;
		
		margin: 1%;
	}
	.mp-links{
		margin: 1%;
		font-size: 1.25em;
	}
}

#mp-quicklinks{
	font-size: 1.25em;
    padding: 0 25px;
}

.mp-flexrow{
		display: flex;
		flex-flow: row;
		flex-wrap: wrap;
		justify-content: space-evenly;
}

#mp-usefullinks {
	  .mp-body {
  	    text-align: left;
	  }
	
	  ul {
        list-style: none;
  		  margin: 0;
	  }
}

#mp-quicklinks ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 800px;
	margin: 0 auto;
}


/***** New FadenMir *****/
.mp-sub-cat-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.mp-sub-cat-box {
	li {
    text-align: left;
    }
	h4{
    	text-align: left;
		margin-left: 40px;
	}
}
.mp-sub-cat-box {
    flex: 1 0 50%;
    font-size: 20px;
}
.mp-container{
	flex-direction: row;
    flex-wrap: wrap;
}
.mp-flexrow .quick-nav {
    flex: 1 1 20%;
}
#mp-usefullinks .mp-body {
	height: 80%;
}
#mp-usefullinks ul {
	display: flex; 
	height: 100%;
	align-content: space-between;
	justify-content: space-evenly;
	flex-direction: column;
}
@media only screen and (max-width: 940px) {
  #mp-usefullinks ul {
	flex-direction: row;
  }
}
@media only screen and (max-width: 425px) 	{
	#mp-usefullinks ul, #mp-quicklinks ul {
		flex-direction: column;
    	text-align: center;
	}
	.mp-flexrow .quick-nav {
		padding: 0px;
	}
}
/***********************
* End Main Page Stuff *
***********************/
.votv-note{
	border: 1px solid var(--wiki-content-border-color);
	background:var(--wiki-content-background-color--secondary);
	text-align: center;
	white-space: nowrap;
}

.mw-collapsible-toggle-default .mw-collapsible-text {
	color: var(--votv-main-color);
}

.mw-collapsible-toggle-default:active .mw-collapsible-text{
	color: var(--votv-accent-color);
}
/*** Miscellaneous ***/
/* Hides the edit section */
.mw-editsection { display:none }