MediaWiki:Common.css: Difference between revisions

From WikiMSK

No edit summary
No edit summary
 
Line 70: Line 70:
}
}


nav.nav.flex-column {
@media only screen and (min-width: 900px) {
    margin-left: 15px;
nav.nav.flex-column {
    margin-top: 25px;
    margin-left: 15px;
    margin-right: -18px;
    margin-top: 25px;
    padding: 6px 15px 0px 14px;
    margin-right: -18px;
    background-color: #f8f9fa;
    padding: 6px 15px 0px 14px;
    background-color: #f8f9fa;
}
}
}



Latest revision as of 20:17, 30 March 2023

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap');
/*
~~TABLE OF CONTENTS~~
1. GLOBAL STYLES
    1.1 Main Page specific
	1.2 Navigation
	1.3 Tables
	1.4 Portal Section
	1.5 Other
	1.6 Table of Contents
	1.8 Footer
	1.9 Toolbar
	1.10  Add file icons for links
	1.11 Category links
2. INFORMATION AND NAVIGATION BOXES
	2.1 Information Boxes
	2.2 Navigation Boxes
3. OTHER TEMPLATES
	3.1 Reliable sources
	3.2 Notices
	3.3 EBQ Article info
	3.4 Red flags
	3.5 Tool Tips
	3.6 Author infobox
4. EXTENSIONS
	4.1 Embed Video
	4.2 Mermaid
	4.3 Quiz
	4.4 Access Control
	4.5 Echo
	4.6 MsUpload
	4.7 MSCatSelect
	4.8 Popups
	4.9 Page forms
	4.10 Breadcrumbs
	4.11 Semantic Mediawiki
	4.12 Tabber
	4.13 RelatedArticles
*/

/*
==============
1. GLOBAL STYLES 
==============

:root {
  --wikimsk-color:#3498DB;
  --wikimsk-color-100:#EEFBFF;
  --wikimsk-color-200:#b3e5ff47;
  --wikimsk-color-300:#3498DB;
  --wikimsk-color-400:#0079B9;
  --wikimsk-color-500:#005C99;
  --wikimsk-color-600:#004079;
  --wikimsk-color-700:#00265B
}

/*------------------
1.1 Main Page Specific
--------------------*/
/*remove main page title from the main page*/
body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; }

/*------------------
1.2 Navigation
--------------------*/

/*left hand navigation*/
#mw-navigation {
    background-color: #f8f9fa;
}

@media only screen and (min-width: 900px) {
	nav.nav.flex-column {
	    margin-left: 15px;
	    margin-top: 25px;
	    margin-right: -18px;
	    padding: 6px 15px 0px 14px;
	    background-color: #f8f9fa;
	}
}

#mw-navigation {
    background-color: #fff; 
}

#mw-navigation {
    border-right:none;
}

/*------------------
1.3 Tables
--------------------*/

/*modify table header*/
.wikitable > tr > th, .wikitable > * > tr > th {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left:0.5em;
  text-align: left;
  background-color: #B3E5FF;
  /*color: white;*/
}

/*Add table striping*/
.wikitable tr:nth-child(even) {background-color: #f8f9fa;}
.wikitable tr:nth-child(odd) {background-color: white;}

th.tableSubHeading {
    background-color: #b3e5ff47!important;
    color: #404040!important;
}

td.sign {
    padding-right: 10px;
}

table.object.border {
    border: none!important;
}

tr.correction {
    border: solid 1px gainsboro;
    background-color: #f8f9fa!important;

}

.wikitable{
min-width: 50%;
}

/*Remove borders from inside tables*/
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td{
	border:none!important;
	line-height:1.6rem!important;
}

.plaintable tbody tr td, .plaintable tbody tr th {
    padding: 5px;
    border: solid 1px gainsboro;
    line-height:1.6rem;

}

.plaintable > tr > th, .plaintable > * > tr > th {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0.5rem;
    text-align: left;
    background-color: #3498DB;
    color: white;
}

.plaintable > caption {
    font-weight: bold;
}
/*------------------
1.4 Portal Section
--------------------*/

.portalMainBox{
	padding: 18px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 5px;
}

.otherHeadBox {
    padding: 4px;
    font-size: 110%;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
    background-color: #BCD8D8;
}

.portalSections {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

@media only screen and (max-width: 1000px) {
	.portalSections .card-container{
		width:100%;
	}
}

.portalSection{
	border:solid 1px #BCD8D8;
	border-radius:5px 5px 0 0;
	margin:10px;
	flex-grow: 1;
	padding: 0px 0px 20px 0px;
}

.otherContentBox {
    padding: 0 10px;
}

/* Style for Template:Portal boxes*/
.portal-boxes{
  display:flex;
  justify-content:space-around;
  flex-direction:row;
  flex-wrap:wrap;
}

.portal-box{
 min-width:200px; 
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 padding: 20px;
}

.portal-box-label {
    margin-top: 15px;
    /* font-style: italic; */
    font-weight: 600;
    font-size: 1.25em;
}

#mw-hidden-catlinks {
  display: none;
}

/*------------------
1.5 Other
--------------------*/

section.authors a {
    color: grey!important;
}
section.authors {
    font-size: 0.75rem!important;
    color: grey;
    margin-top: -0.4rem;
    margin-bottom: 1.1rem;
}

p{
	line-height:1.5;
}

/*Hide citoid errors. Optional gadget to make them show again.*/
.cs1-visible-error{
	display:none;
}

cite a.new {
    color: currentColor!important;
    text-decoration: none;
    /* opacity: 0.5; */
    pointer-events: none;
}

/*Head in sand moment for SPARQL search*/
.searchresults .warningbox {
    display: none;
}

/*Fix pop up dialog box on mobile*/
@media only screen and (max-width: 550px) {
.mw-mmv-download-dialog {
    width: 100%;
    left: 0;
    top: 20%;
    height: fit-content;
}
}

/* hide advanced search box 
#mw-searchoptions{
	display:none;
}
*/

.advancedSearchToggle {
    cursor: pointer;
    box-sizing: border-box;
    padding: 0.6em!important;
    color: #007bff;
}

/* curved */
.curved {
  border-radius: 5px;
}

/*Quotes*/
.right-quote { float: right; }
.left-quote  { float: left;  }
blockquote p span{margin-right:20px;}

/* Adjust logo size*/
#mw-navigation .mw-wiki-logo {
    height: 7em!important;
    width: 7em!important;
}

/*increase margin at top of dl lists*/
dl {
    margin-top: 1em;
}

/*list adjustments*/
.mw-content-ltr ul, .mw-content-ltr ol {
    margin-bottom: 1rem;
}

.mw-content-ltr ul li ul {
    margin-bottom: 0.3rem!important;
}

.mw-content-ltr ol li ul {
    margin-bottom: 0.3rem!important;
}

ol ol {
    list-style-type: lower-alpha;
}

/*Fix incorrect horizontal scroll wheel appearing on category pages*/
.mw-category{
    overflow: hidden!important;
}

/*collapsible tables make white colour*/
a.mw-collapsible-text {
    color: black;
}

.mw-gallery-packed{
	text-align:left!important;
}

/*
@media only screen and (max-width: 500px) {

li.gallerybox, li.gallerybox div, li.gallerybox div .thumb, li.gallerybox div .thumb div a img {
width:100%!important;
}
}
*/

@media only screen and (max-width: 500px) {
	ul.gallery {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	}
}

/*Hack to make references columns not overflow*/
.mw-references-columns{
	    overflow: hidden;
}

.nowrap, .nowraplinks a {
    white-space: nowrap;
}

/*fixes small heights with visual editor in certain situations*/
#content{
    height: 100%;
}

div.floatleft, table.floatleft {
    margin: 0 1.25rem 0.5rem 0;
}
/*------------------
1.6 Table of Contents
--------------------*/
.toctitle, .toctitle-custom {
    background: #3498DB;
    color: white;
    font-size: 1.125em;
    box-sizing: border-box;
    height: 2.5em;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (min-width: 600px) {
    .toctitle {
    margin: -7px -7px 0.5em -7px;
   }
}
.toctitle h2 {
    color: white;
}

.toctogglelabel{
	color:white;
}

.toc p a {
    font-size: 1.125em;
}

.toc-custom {
    border: 1px solid #a2a9b1;
    background-color: #f8f9fa;
    font-size: 95%;
    display: table;
    padding-bottom: 0.75rem;
}

.toc-custom p{
	padding: 0.75rem 0.75rem 0 0.75rem!important;
}

@media only screen and (max-width: 768px) {
 #toc{
	min-width:100%;
 }
}

@media only screen and (min-width: 768px) {
 #toc{
	min-width:350px;
 }
}
/*------------------
1.8 Footer
--------------------*/

/* footer logo */

.footer-logos{
	display:flex; 
	flex-direction:row; 
	justify-content:center;
	align-items:center;
	margin-bottom:2em;
}

.nzamm-logo {
    margin-left:1em;
    margin-right:1em;
}

.tmmfnz-logo {
    margin-left: 1em;
    margin-right:1em;
}

#footer-poweredbyico::before {
    content: '';
}

.footer-icons {
    padding-left: 0.3rem!important;
}

@media only screen and (min-width: 600px) {
	#footer-icons {
    	float: right;
	}
}

#footer-icons {
    float: right;
}

/*------------------
1.9 Toolbar
--------------------*/

/* toolbar icons */
.tool.tool-button {
    width: 30px!important;
    height: 30px!important;
}

/*------------------
1.10  Add file icons for links
--------------------*/

p a[href$=".pdf"]::before, li a[href$=".pdf"]::before, p a[href$=".PDF"]::before, li a[href$=".PDF"]::before {
    content: url(https://wikimsk.org/w/resources/assets/document-icons/pdf.png);
    padding-right: 5px;
}

p a[href$=".doc"]::before, p a[href$=".docx"]::before {
    content: url(https://wikimsk.org/w/resources/assets/document-icons/doc.png);
    padding-right: 5px;
}

li a[href$=".doc"]::before, li a[href$=".docx"]::before {
    content: url(https://wikimsk.org/w/resources/assets/document-icons/doc.png);
    padding-right: 5px;
}

p a[href$=".ppt"]::before, p a[href$=".pptx"]::before {
    content: url(https://wikimsk.org/w/resources/assets/document-icons/ppt.png);
    padding-right: 5px;
}

p a[href$=".xls"]::before, p a[href$=".xlsx"]::before {
    content: url(https://wikimsk.org/w/resources/assets/document-icons/xls.png);
    padding-right: 5px;
}

/*------------------
1.11  Category Links
--------------------*/
.catlinks .mw-normal-catlinks > a {
    color: #72777d!important;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.catlinks .mw-normal-catlinks > ul {
    margin: 0;
    padding-top: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8125rem;
}

.catlinks .mw-normal-catlinks > ul li {
    display: block;
    margin: 0 10px 10px 0;
    padding: 0;
    border: 0;
}

.catlinks .mw-normal-catlinks > ul li a {
    padding: 8px 12px;
    display: block;
    border: 1px solid #f8f9fa;
    background-color: #f8f9fa;
    color: #72777d !important;
    box-shadow: 0 1px 3px rgb(0 0 0 / 3%), 0 1px 2px rgb(0 0 0 / 6%);
    transition: background 0.2s ease,color 0.2s ease,border 0.2s ease,transform 0.2s cubic-bezier(0.77,0.2,0.05,1),box-shadow 0.2s ease;
    font-size: 1.1em;
}

.catlinks {
    border: none!important;
    background: none!important;
    padding: 5px;
    margin-top: 1em;
    clear: both;
}

.catlinks .mw-normal-catlinks > ul li a:hover {
    background: #3498DB;
    color: white!important;
    text-decoration: none;
}

/*
==============
2. Information and Navigation Boxes
==============
*/

/*------------------
2.1 Information Boxes
--------------------*/

td.infobox-image {
    background: #f8f9fa;
}

.infobox-image a img {
    width: 100%;
}

.infobox tbody tr:not(:first-of-type) {
    background-color: #f8f9fa;
}

th.title {
    font-size: 16px!important;
    line-height: 1.25;
    padding: 12px 9px!important;
}

.infobox tr th {
    padding: 0.5rem;
}

table.infobox, table.navbar {
  border: 1px solid #aaa;
  border-spacing: 1;
  background-color: white;
}

.infobox td, .navbar td .navbar th {
  padding: 4px;
}
.infobox th, .navbar th {
  /*background-color: #99CBED;*/
  white-space: nowrap;
  padding: 5px;
  /*border: solid 1px #143C57;*/
}
.infobox tr.title th, .navbar tr.title th,
.infobox th.title, .navbar th.title {
  color: white;
  background-color: #3498DB;
  text-align: center;
  padding: 5px;
}
.infobox td, .navbar td {
  text-align: left;
}

.infobox .kv th, .navbar .kv th {
  width: 15%;
}

@media screen and (min-width: 768px) {
	.infobox.side {
	  width: 22em;
	  float: right;
	  margin-left: 0.5em;
	}
}


.infobox.side td, .infobox.side th {
  font-size: 80%;
}

@media only screen and (max-width: 600px) {
  .infobox.side {
    width: 100%;
  }
}

.infobox {
    margin-bottom: 1rem;
}

#profile tr:first-child {
    display: none;
}

#profile th {
    background: none;
    border: none;
}

#profile tbody tr th.title {
    background: #f1f4f7!important;
}

#profile tr {
    border-bottom: solid gainsboro 0.1rem;
}


#profile{
	border:none;
}

#profile tbody tr {
    background-color: white;
}

/*------------------
2.2 Navigation Boxes
--------------------*/

/* Default style for navigation boxes */
.navbox {                     /* Navbox container style */
	box-sizing: border-box;
	border: 1px solid #a2a9b1;
	width: 100%;
	clear: both;
	font-size: 88%;
	text-align: center;
	padding: 1px;
	margin: 1em auto 0;       /* Prevent preceding content from clinging to navboxes */
}
.navbox .navbox {
	margin-top: 0;            /* No top margin for nested navboxes */
}
.navbox + .navbox {
	margin-top: -1px;         /* Single pixel border between adjacent navboxes */
}
.navbox-inner,
.navbox-subgroup {
	width: 100%;
}
.navbox-group,
.navbox-title,
.navbox-abovebelow {
	padding: 0.25em 1em;      /* Title, group and above/below styles */
	line-height: 1.5em;
	text-align: center;
}
th.navbox-group {             /* Group style */
	white-space: nowrap;
	/* @noflip */
	text-align: right;
}
.navbox,
.navbox-subgroup {
	background-color: #fdfdfd; /* Background color */
}
.navbox-list {
	line-height: 1.5em;
	border-color: #fdfdfd;    /* Must match background color */
}
/* cell spacing for navbox cells */
tr + tr > .navbox-abovebelow,
tr + tr > .navbox-group,
tr + tr > .navbox-image,
tr + tr > .navbox-list {    /* Borders above 2nd, 3rd, etc. rows */
	border-top: 2px solid #fdfdfd; /* Must match background color */
}
.navbox th,
.navbox-title {
	background-color: #B3E5FF;      /* Level 1 color */
	color:black;
}

.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
	background-color: #99CBED;      /* Level 2 color */
	color:black;
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
	background-color: #B3E5FF;      /* Level 3 color */
	color:black;
}
.navbox-even {
	background-color: #f7f7f7;      /* Even row striping */
}
.navbox-odd {
	background-color: transparent;  /* Odd row striping */
}
.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
	padding: 0.125em 0;       /* Adjust hlist padding in navboxes */
}

/* Default styling for Navbar template */
.navbar {
	display: inline;
	font-size: 88%;
	font-weight: normal;
}
.navbar ul {
	display: inline-block;
	white-space: nowrap;
}
.mw-body-content .navbar ul {
	line-height: inherit;
}
.navbar li {
	word-spacing: -0.125em;
}
.navbar.mini li abbr[title] {
	font-variant: small-caps;
	border-bottom: none;
	text-decoration: none;
	cursor: inherit;
}
/* Navbar styling when nested in infobox and navbox */
.infobox .navbar {
	font-size: 100%;
}
.navbox .navbar {
	display: block;
	font-size: 100%;
}
.navbox-title .navbar {
	/* @noflip */
	float: left;
	/* @noflip */
	text-align: left;
	/* @noflip */
	margin-right: 0.5em;
}

/* Style for horizontal lists (separator following item).
   @source mediawiki.org/wiki/Snippets/Horizontal_lists
   @revision 8 (2016-05-21)
   @author [[User:Edokter]]
 */
.hlist dl,
.hlist ol,
.hlist ul {
	margin: 0;
	padding: 0;
}
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
	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 {
	display: none;
}

/* Generate interpuncts */
.hlist dt:after {
	content: ": ";
}

/**
 * Note hlist style usage differd in
 * the Minerva skin. Remember .hlist is a class defined in core as well! Please check Minerva desktop (and Minerva.css) when changing
 * See https://phabricator.wikimedia.org/T213239
 */
.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;
}

.nobold{
	font-weight:400;
}


/*
==============
3. OTHER TEMPLATES
==============
*/

/*------------------
3.1 Reliable sources
--------------------*/
/*box shadows don't work in templatestyles*/
.reliableSources {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction:column;
    background-color: #d3d3d345;
    padding: 5px 0px 5px 0px;
    /*border: solid 1px black;*/
    margin-top:20px;
    margin-bottom: 20px;
    border-radius: 3px;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.11);
    -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.11);
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.11);
}

/*------------------
3.2 Notices
--------------------*/

.notice.stub {
  font-style: italic;
}

.notice {
	text-align: center;
	max-width: 700px;
	padding: 0.5em;
    background-color: #fbfbfb;
    border-top: 1px solid #a2a9b1;
    border-bottom: 1px solid #a2a9b1;
    border-right: 1px solid #a2a9b1;
    border-left: 10px solid #3498DB;
    margin: 5px auto;
}

.mw-indicators {
    float: right;
}

.mw-indicator {
    display: inline-block;
}

/*------------------
3.3 EBQ Article info
--------------------*/

.citebox{
	color:#006600;
	padding:0px 0px 15px 0px;
	font-size:16px;
}



/*------------------
3.4 Red flags
--------------------*/

.redFlagsHeading {
    background-image: none !important;
    font-weight: 500;
    color: #656565 !important;
    padding-top: 14px;
    margin-left: 0px !important;
    padding-left: 0px !important;
}

.redFlags {
    color: #af212f;
    font-weight: 500;
    background-color: #efefef;
    border-left-style: solid;
    border-left-width: 3px;
    border-left-color: #656565;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 0px;
    padding-bottom: 14px;
}

.redFlagsList ul li {
    margin-left: -1em;
    padding: 0.5em 2em 0.5em 2em;
    list-style: none;
    background-image: url(https://wikimsk.org/w/images/0/0a/Red-flag.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px;
}

.redFlagsList ul {
	line-height: 1rem;
}

/*------------------
3.5 Tool Tips
--------------------*/

/*Abbreviation styling for Abbr template. By using data-title we suppress the native tooltip.*/
abbr[data-title] {
  position: relative;
  
  /* ensure consistent styling across browsers */
  text-decoration: underline dotted;
  cursor: help;
}

abbr[data-title]:hover::after,
abbr[data-title]:focus::after {
  content: attr(data-title);
  
  /* position tooltip like the native one */
  position: absolute;
  left: 0;
  bottom: -30px;
  width: auto;
  white-space: nowrap;
  
  /* style tooltip */
  background-color: #1e1e1e;
  color: #fff;
  border-radius: 3px;
  box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.4);
  font-size: 14px;
  padding: 3px 5px;
}

/*------------------
3.6 Reviewer infobox data
--------------------*/

.info-section {
    justify-content: row;
    display: grid;
    grid-template-columns: 2fr 5fr;
    grid-gap: 10px;
    color: #444;
}

.contributors {
    line-height: 1;
    font-size: 0.75rem;
}

/*
==============
4. EXTENSIONS 
==============
*/

/*------------------
4.1 Embed Video
--------------------*/

.embedvideowrap{
	min-height:200px!important;
}

.embedvideowrap iframe {
    min-width: 350px!important;
    min-height: 200px!important;
}

video{
	max-width:100%;
}

/*------------------
4.2 Mermaid
--------------------*/

.mermaidTooltip {
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 5px;
    border-radius: 6px;
}

/*------------------
4.3 Quiz
--------------------*/

/*Make feedback always show after submit*/
.quiz .correction.unselected {
    display: revert;
}

.quizForm p input[type="submit"] {
    margin: 30px;
}

.quiz .question {
    margin-bottom: 2em;
}

/*------------------
4.4 Access Control
--------------------*/

/*Access control*/
#accesscontrol{
	display:none;
}

/*------------------
4.5 Echo
--------------------*/

.mw-echo-ui-overlay{
z-index:9999!important;
}
/*make notification window go above everything else. */

#personal-echo-icons {
    display: block!important;
}

@media screen {
	 div.mw-echo-ui-overlay {
		 z-index: 100;
	}
	 .mw-echo-alert {
		 display: block;
		 padding: 0.25em 1em;
		 margin-left: -1em;
		 margin-right: -1em;
	}
	 #personal-extra {
		 white-space: nowrap;
	}
	 #personal-extra ul {
		 list-style: none;
		 margin: 0.85em 0 0;
		 padding: 0;
	}
	 #personal-extra li {
		 margin: 0 0.4em 0 0;
		 float: left;
	}
}
 @media screen and (min-width: 851px) {
	 div#personal {
		 padding-left: 0;
	}
	 #personal-extra {
		 float: left;
		 padding: 0 0.75em;
	}
}
 @media screen and (max-width: 850px) {
	 .mw-echo-ui-notificationBadgeButtonPopupWidget {
		 z-index: 2;
	}
	 #personal-extra {
		 position: absolute;
		 top: 0.9em;
		 right: 8.75em;
	}
	 #personal-extra li {
		 margin-right: 1.25em;
	}
	 .mw-echo-ui-overlay {
		 margin: 0 10px;
	}
	 .mw-echo-ui-overlay .oo-ui-popupWidget-anchored > .oo-ui-popupWidget-anchor {
		 display: none;
	}
	 .mw-echo-ui-overlay .mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
		 left: 0 !important;
		 width: 100%;
	}
	 .mw-echo-ui-overlay .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup {
		 width: initial !important;
		 max-width: 500px;
	}
	 .mw-echo-ui-overlay .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup .oo-ui-clippableElement-clippable {
		 width: 100% !important;
	}
}

#personal-echo-icons {
  margin-top: -5px;
}

/*------------------
4.6 MsUpload
--------------------*/

#msupload-dropzone {
    padding: 12px!important;
    height: 50px!important;
}

#msupload-bottom {
    height: 40px;
}

/*------------------
4.7 MSCatSelect
--------------------*/

/*Fix display*/
#MsCatSelect {
    padding: 10px 20px 0px 20px!important;
}

.addcat {
    padding-bottom: 25px!important;
}

/*------------------
4.8 Popups
--------------------*/

/* This is a terrible way of fixing the popup bug where it goes off screen in small viewports*/
@media only screen and (max-width: 600px) {
  .mwe-popups {
    width:100%!important;
    left:0px!important;
  }
}

/*------------------
4.9 Page Forms
--------------------*/
/* fix page forms create button styling */
.oo-ui-horizontalLayout > .oo-ui-widget {
    margin-bottom: 8px;
    margin-left: 0.5rem;
}

.pfPageNameWithoutNamespace {
    max-width: 90%;
}

/*------------------
4.10 Bread Crumbs
--------------------*/
#contentSub, #contentSub2{
	margin:0;
}

/*------------------
4.11 SemanticMediaWiki
--------------------*/
#mw-indicator-smw-entity-examiner {
	display: none !important;
}

/*------------------
4.12 Tabber
--------------------*/
.tabber__tabs {
    padding-bottom: 0rem;
}

.tabber__header {
    margin-bottom: 1rem;
}

/*------------------
5.13 RelatedArticles
--------------------*/
.ra-read-more {
    width: 100%;
}
@media screen {
	.dropdown-item:focus, .dropdown-item:hover {
		background-color: #e9ecef55;
	}
}