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

/*Skeleton position*/
@media only screen and (min-width: 600px) {
  #skeleton {
    float: right;
  }
}

.joinTeamRow{
	display:flex; 
	flex-direction:row; 
	justify-content:center; 
	flex-wrap:wrap;
	background: #f8f9fa; 
	border: solid 1px #e5e5e5;
	padding: 0.75em ;
	margin: 1.5em 0em;
}

@media only screen and (max-width: 1100px) {
  .joinTeamRow {
    clear: both;
    margin-top:1em;
  }
}

.featureRowTitle {
    background: #3498DB;
    color: white;
    padding: 0.75em;
    box-sizing: border-box;
    height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125em;
}

.joinTeamHeader{
	display:flex; 
	justify-content:center; 
	background: #3498db; 
	margin: -0.75em -0.75em 1em -0.75em;
	box-sizing: border-box;
    height: 3em;
}

.joinTeamTitle{
	margin-left:2em; 
	font-size:1.125em; 
	display:flex; 
	align-items:center; 
	color:white;
	font-weight: 700;
}

.mainPageIntro{
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	flex-wrap:wrap;
}
@media only screen and (min-width: 1700px) {
	.mainPageIntroText{
		max-width:450px;	
	}
}

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

/* 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 {
    margin-bottom: 0.5em;
}

/*------------------
1.6 Table of Contents
--------------------*/

.toctitle {
    background: #3498DB;
    color: white;
    margin: -7px -7px 0.5em -7px;
    font-size: 1.125em;
    box-sizing: border-box;
    height: 2.5em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.toctitle h2 {
    color: white;
}

.toctogglelabel{
	color:white;
}

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

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

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

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

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

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

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

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

/* Reliable sources link for Template: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;
}

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

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