MediaWiki:Common.css

/* CSS placed here will be applied to all skins */
/******************************
 * Hide items on main page
 ******************************/
.action-view.page-Main_Page #siteSub,
.action-view.page-Main_Page #contentSub,
.action-view.page-Main_Page .firstHeading {
    display: none !important;
}

/******************************
 * Changing the tagline
 ******************************/
#siteSub { 
	display:none;
}
	/*display:block; 
	font-weight:500; 
	font-size:90%;
	padding-bottom: 1em;
}*/

/******************************
 * To make images responsive
 ******************************/
.res-img img {
	max-width:100%;
	height:auto;
	margin-bottom:0.2em;
	text-align:center;
	border-radius:10px;
}

.res-img-800 img {
	display: block;
    margin-left: auto;
    margin-right: auto;
	max-width:100%;
	width:800px;
	height:auto;
	margin-bottom:0.2em;
	text-align:center;
	border-radius:10px;
}

.res-img-1000 img {
	display: block;
    margin-left: auto;
    margin-right: auto;
	max-width:100%;
	width:1000px;
	height:auto;
	margin-bottom:0.2em;
	text-align:center;
	border-radius:10px;
}

.res-img-1200 img {
	display: block;
    margin-left: auto;
    margin-right: auto;
	max-width:100%;
	width:1200px;
	height:auto;
	margin-bottom:0.2em;
	text-align:center;
	border-radius:10px;
}

/******************************
 * Columns on the main page
 ******************************/
@media all and (min-width: 768px) {
	.mainpage-column {
		float: left;
		width: 50%;
	}
	.mainpage-column-first {
		padding-right: 10px;
	}
	.mainpage-column-second {
		padding-left: 10px;
	}
	.mainpage-sister-projects {
		text-align: center;
	}
}
 
 /******************************
 * Tabber, toolbar, main body 
       and heading fonts
 ******************************/
 .tabber_tabs {
 	font-family:avenir;
 	font-weight:200;
 	font-variant:small-caps;
 }
 .mw-body .firstHeading {
 	font-family:avenir;
 	/*font-weight:300;8?
 	/*font-variant:small-caps;*/
 }
 .mw-body-content h2 {
 	font-family:avenir;
 	/*font-weight:300;*/
 	/*font-variant:small-caps;*/
 	font-size:1.6em;
 }
 .mw-body-content h3, .mw-body-content h4 {
 	font-family:avenir;
 	/*font-weight:300;*/
 	/*font-variant:small-caps;*/
 	font-size:1.4em;
 }
 .mw-article-toolbar-container {
 	font-family:avenir;
 	text-transform:uppercase;
 }
 .vector-sticky-header-context-bar-primary {
 	font-family:avenir;
 	font-weight:300;
 }
 /*.mw-body {
 	font-family:avenir;
 	font-weight:300;
 	font-size:115%;
 }*/
 /******************************
 * Hide category header 3
 ******************************/
 div.mw-category-generated h3 {
   display: none;
}

/******************************
 * Collapsible elements
 ******************************/
.mw-collapsible-toggle-default::before {
    content: '[';
}
.mw-collapsible-toggle-default::after {
    content: ']';
}
.mw-collapsible-toggle {
    float: right;
    padding: 2px 5px;
    font-weight: normal;
    font-size: 85%;
    padding-right: 5px;
}

/******************************
 * Font-size in text editor
 ******************************/
#wpTextbox1 {
	font-size:0.9em;
}

/******************************
 * Make references smaller
 ******************************/
ol.references,
div.reflist,
div.refbegin {
    font-size: 90%;            /* Default font-size */
    margin-bottom: 0.5em;
}
div.refbegin-100 {
    font-size: 100%;           /* Option for normal fontsize in {{refbegin}} */
}
div.reflist ol.references {
    font-size: 100%;           /* Reset font-size when nested in div.reflist */
    list-style-type: inherit;  /* Enable custom list style types */
}

/***************************************
 * Small font for hidden categories
 ***************************************/
#mw-hidden-catlinks { 
	font-size: 87% !important; 
}

/***************************************
 * Banner and photo slider on main page
 ***************************************/
.banner-image {
    position: relative;
    overflow: hidden;
    max-width: 1200px; 
    height: auto;
    margin-bottom: 0;
}
.banner-image img {
    max-width: 100%;
    height: auto;
    /*width: auto\9;*/
    border-radius:10px;
}
.banner-box-wide {
    width: 80%
}
.banner-box-left,
.banner-box-right {
	padding: 4px;
	background: rgb(16,16,16);
	background: rgba(0,0,0,0.3);
	border-radius: 4px;
	width: 40%;
}
.banner-box-left {
    left: 3%;
    text-align: center;
}
.banner-box-right {
    right: 3%;
    text-align: center;
}
.mainpage_box {
	padding:5px 10px;
}
.mainpage-shadowbox {
	color: white;
	background: rgb(16,16,16);
	background: rgba(0,0,0,0.3);
	border-radius: 4px;
}
.mainpage-shadowbox h2, .mainpage-shadowbox h3 {
	color: white;
	border:none;
	font-family: sans-serif;
    line-height: 1.2em;
	margin:0;
}
.mainpage-shadowbox h2 {
	font-size: 190%;
}
.mainpage-shadowbox h3 {
	font-size: 130%;
	padding: 0;
}
#mainpage-maplinks a, .mainpage-shadowbox a {
	color: white;
	font-weight: bold;
}
.banner-box-2 {
    position: absolute;
    z-index: 2;
    margin: 1em 0;
    min-width: 20em;
}
.banner-box-2 .quote {
    font-size: 90%;
    line-height: 1.3em;
}
.mainpage_box h3 {
	margin:0.1em 0;
}

/******************************
 * TABLE: Plain table (Green)
 ******************************/
 table.plaintable {
  background-color: #f2f2f2;
  color: #444;
  margin: 0 0 1em 0;
  border: 1px solid #fff;
  text-align: left;
  border-collapse: collapse;
}

table.plaintable > tr > th,
table.plaintable > tr > td,
table.plaintable > * > tr > th,
table.plaintable > * > tr > td {	
  border: 2px solid #fff;
  padding: 0.1em 0.4em 0.1em 0.6em;
  text-align: left;
}

table.plaintable > tr > th,
table.plaintable > * > tr > th {
  background-color: #50ab8a;
  text-align: center;
  color: #fff;
  padding: 10px 5px;
}

table.plaintable > caption {
  font-weight: bold;
}

table.plaintable td:hover {
  background: #e5e5e5;
}

/******************************
 * To change the colour of text
 ******************************/
.white a { 
	color: white; 
}
.green a { 
	color: green; 
}
.blue a {
	color: blue; 
}

/******************************
 * HIDE ELEMENTS ON FILE PAGES

#filehistory { 
	display: none; Hides the "File history" header
} 

#mw-imagepage-section-filehistory { 
	display: none;  Hides the "file history" table 
}
*********************************/

/******************************
 * Footer stuff
 ******************************/
 .mw-footer-container {
 	padding-top: 0;
 }
 
 /******************************
 * TabberNeue stuff
 ******************************/
 .tabber__tabs {
 	font-size: large;
 }
 
/******************************
 * Gallery content
******************************/
div.gallerytext {
	padding:0;
}

/******************************
 * Upload description area
******************************/
textarea {
	font-family:Courier;
	font-size:13px;
}

 /******************************
 * CSS from Mediawiki.org
 ******************************/
.mainpage_row {
	display: flex;
	flex-direction: row;
	flex-flow: row wrap;
	justify-content: space-between;
	padding: 0;
	margin: 0 -5px 0 -5px;
}
.mainpage_box {
	flex: 1;
	margin: 5px;
	min-width: 360px;
	/*border: 1px solid #CCC;
	padding: 0 10px 10px 10px;                   Hiding these elements for timeb being
	box-shadow: 0 2px 2px rgba(0,0,0,0.1); */
}
.mainpage_box h3 {
	/* Reset padding so is equal across skins */
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	/* Padding left gets overridden by headanchor gadget */
	margin: 0.5em 0;
}
/* Set padding left only if headanchor gadget is not enabled */
.mainpage_box h3:not(.tpl-vheadanchor-heading) {
	padding-left: 0;
}
.mainpage_box h3 .header_icon {
	float: left;
	margin-right: 5px;
}
/*.mainpage_box .items {
	border-top: 1px solid #CCC;    Hiding this class for the time being
	padding-top: 0.5em;
}*/
.mainpage_box p:last-child {
	margin-bottom: 0;
}
.mainpage_boxcontents_small {
	font-size: 95%;
}
/* Style the "other languages" box the same way as other boxes on the main page */
.mw-pt-languages {
	display: block;
	background: none;
	border: 1px solid #CCC;
	box-shadow: 0 2px 2px rgba(0,0,0,0.1);
	width: auto;
}
.mw-pt-languages-label {
	background: none;
	border-right: none;
}

@media screen and (max-width: 719px) {
	.thumb {
		float: none;
	}
	.thumb, .thumbinner {
		margin-left: auto;
		margin-right: auto;
	}
}

 /******************************
 * FLEX FOR "THIS PHOTO" PAGES 
 ******************************/
/* {
  box-sizing: border-box;
}*/

/* Column container */
/*.row {  
  display: flex;
  flex-wrap: wrap;
} */

.flex-container {
  display: flex;
  flex-direction: row;
}

/* Create two unequal columns that sits next to each other */
/* left column */
.left-side {
  flex: 65%;
  background-color: #f7f7f7;
  border:1px solid #ccc;
  padding: 10px;
  margin: 5px;
  box-shadow: 0 4px 4px rgba(0,0,0,0.1);
}

/* right column */
.right-side {
  flex: 25%;
  background-color: #f7f7f7;
  border:1px solid #ccc;
  padding: 10px;
  margin: 5px;
  box-shadow: 0 4px 4px rgba(0,0,0,0.1);
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

/*********************************************************
 * Styling for a responsive image gallery with 4 coloumns
 *********************************************************/
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 5px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 1;
  max-width: 100%;
  /*background-color:var(--color-surface-1);*/
  /*border:1px solid var(--border-color-base);*/
  /*color:var(--color-base-emphasized);*/
  border-radius: 8px;
  /*box-shadow: 0 3px 6px rgba(0,0,0,0.04),0 3px 6px rgba(0,0,0,0.0575);*/
  padding: 5px;
  margin: 5px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
  .column {
    flex: 48%;
    max-width: 100%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

 /******************************
 * FLEX FOR HORIZONTAL INFOBOXES
 ******************************/
/* Create two unequal columns that sits next to each other */
/* left column */
.left-side-infobox {
  flex: 50%;
  background-color: #fff;
  /*padding: 10px;*/
  margin: 10px;
}

/* right column */
.right-side-infobox {
  flex: 50%;
  background-color: #fff;
  /*padding: 10px;*/
  margin: 10px;
}