MediaWiki:Common.css

/*
~~TABLE OF CONTENTS~~
1. GLOBAL STYLES
	1.1 Main page specific
	1.2 Collapsible H2 headers
	1.3 Navigation
	1.4 Tables
	1.4 Portal Section
	1.5 Other
	1.6 Table of Contents
	1.7 Feeds
	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
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 Dynamic Page List

*/

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

/*------------------
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; }

/*H2 elements that don't collapse*/
.non-collapsibleH2{
	font-size:155%;
	margin-bottom: .5rem!important;
    font-weight: 500;
    line-height: 1.2;
    color: #000;
    background: none;
    margin: 0;
    overflow: hidden;
    padding-top: 0.5em;
    padding-bottom: 0.17em;
    border-bottom: 1px solid #a2a9b1;
}

/*------------------
1.2 Collapsible H2 headers
--------------------*/

/*Note that collapsible headers is activated through gadgets*/
/* CSS part of the code for collapsible buttons*/

h2 button {
  all: inherit;
  border: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0.5em 0;
}


h2 button:focus svg {
  outline: 2px solid;
}


h2 button svg {
  height: 1em;
  margin-left: 0.5em;
}

[aria-expanded="true"] .vert {
  display: none;
}

[aria-expanded] rect {
  fill: currentColor;
}


/*------------------
1.3 Navigation
--------------------*/

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

/*------------------
1.4 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: #3498DB;
  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: #B3E5FF!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;

}

/*------------------
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;
}

.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;
}

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

/* 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;
}

/*increase margin at bottom of ul lists*/
.mw-content-ltr ul, .mw-content-ltr ol {
    margin-bottom: 1rem;
}

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

/*------------------
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, .toctitle-custom {
    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: 7px;
}
@media only screen and (min-width: 600px) {
 .toc{
	min-width:300px;
 }
}
/*------------------
1.7 Feeds
--------------------*/

/* update feed section */
.feed-section {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	flex-wrap:wrap;
}

.rss-feed {
    border: solid 1px gainsboro;
    padding: 15px;
    background-color: #f8f9fa;
    max-width: 400px;
}

/*------------------
1.8 Footer
--------------------*/

/* footer logo */

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

.nzamm-logo {
    width: 150px;
    margin-left:1em;
}

.tmmfnz-logo {
    width: 130px;
    margin-left: 2em;
}

.mskultrasound-logo {
    width: 160px;
    margin-left: 2em;
    margin-right:1em;
}


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

#footer-poweredbyico {
    margin-left: 10px;
}

@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 {
    content: url(https://wikimsk.org/w/resources/assets/document-icons/pdf.png);
    padding-right: 5px;
}

p 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;
}

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
--------------------*/

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

.infobox td, .navbar td .infobox th, .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%;
  }
}

/*------------------
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: #3498DB;      /* Level 1 color */
	color:white;
}
.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
--------------------*/
.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;
}

/*------------------
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;
    margin-bottom: 17px;
}

.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;
}

/*------------------
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;
}

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

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

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

.embedvideowrap iframe {
    min-width: 400px!important;
    min-height: 225px!important;
}

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

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

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

.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;
	}
}

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

/*Fix msupload display*/
#msupload-bottom {
    height: 36px!important;
}

/*------------------
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 Dynamic Page List
--------------------*/
.galleryfilename{
	font-size:1.125rem;
	text-align:center;
}