Template:Main page 2020.01 technical update/styles.css

.MainPage__banner {
	clear: both;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 1.2em 0 6px;
	border: 1px solid #ddd;
	background-color: #f9f9f9;
	color: #000;
}

.MainPage__banner__welcome {
	width: 100%;
	margin: 0.4em;
	text-align: center;
}

.content table.MainPage__table {
	overflow: hidden;
}

.MainPage__table ul {
	list-style-type: disc;
}

.MainPage__table {
	border-spacing: 0;
}

.MainPage__table tr {
	margin-top: 4px;
	border-spacing: 0;
}

.MainPageBG--featured-picture td,
.MainPageBG--featured-picture tr,
.MainPage__table tr,
.MainPage__column--left,
.MainPage__column--right {
	display: block;
	width: 100%;
}

/* support different one line three word header in mobile*/

@media all and ( max-width: 720px ) {
	.MainPage__heading--featured-article span { 
		display: inline-block;
	}
	.MainPage__heading--featured-article span.MainPage__heading--shorten {
		display: none;
	}
	.MainPage__heading--featured-article span:first-letter {
		text-transform: uppercase;
	}
}

@media all and ( max-width: 1200px ) {
	.MainPage__banner__links {
	  display: inline-block;
	  width: 100%;
	  text-align: center;
	  margin: 0;
	}
	.MainPage__banner__links li {
	  display: inline-block;
	  padding: 0 5px;
	}
}

@media all and ( min-width: 1000px ) {
	.MainPageBG--featured-list {
		margin-top: 4px;
		border: 1px solid #f2cedd;
		background: #fff5fa;
		overflow: auto;
	} 

	.MainPageBG--featured-picture {
		margin-top: 4px;
		border: 1px solid #ddcef2;
		background: #faf5ff;
		overflow: auto;
	}
	.MainPage__heading--otd {
		clear: both;
		margin: 0.5em;
		background: #cedff2;
		font-family: inherit;
		font-size: 120%;
		font-weight: bold;
		border: 1px solid #a3b0bf;
		color: #000;
		padding: 0.2em 0.4em;
	}
	.MainPage__heading-dyk {
		clear: both;
		margin: 0.5em;
		background: #cef2e0;
		font-family: inherit;
		font-size: 120%;
		font-weight: bold;
		border: 1px solid #a3bfb1;
		color: #000;
		padding: 0.2em 0.4em;
	}
	.MainPage__heading--featured-list {
		margin: 0.5em;
		background: #f2cedd;
		font-family: inherit;
		font-size: 120%;
		font-weight: bold;
		border: 1px solid #bfa3af;
		color: #000;
		padding: 0.2em 0.4em;
	}
	.MainPage__heading--other {
		margin: 0.5em;
		background: #eeeeee;
		border: 1px solid #ddd;
		color: #222;
		padding: 0.2em 0.4em;
		font-size: 120%;
		font-weight: bold;
		font-family: inherit;
	}
	.MainPage__heading--languages {
		margin: 0.5em;
		background: #efefef;
		border: 1px solid #ddd;
		color: #222;
		padding: 0.2em 0.4em;
		font-size: 120%;
		font-weight: bold;
		font-family: inherit;
	}
	.MainPage__heading--sister {
		margin: 0.5em;
		background: #eeeeee;
		border: 1px solid #ddd;
		color: #222;
		padding: 0.2em 0.4em;
		font-size: 120%;
		font-weight: bold;
		font-family: inherit;
	}
	.MainPage__heading--featured-picture {
		margin: 0.5em;
		background: #ddcef2;
		font-family: inherit;
		font-size: 120%;
		font-weight: bold;
		border: 1px solid #afa3bf;
		color: #000;
		padding: 0.2em 0.4em;
	}
	.MainPage__heading--featured-article {
		margin: 0.5em;
		background: #cef2e0;
		font-family: inherit;
		font-size: 120%;
		font-weight: bold;
		border: 1px solid #a3bfb1;
		color: #000;
		padding: 0.2em 0.4em;
	}
	.MainPage__heading--itn {
		margin: 0.5em;
		background: #cedff2;
		font-family: inherit;
		font-size: 120%;
		font-weight: bold;
		border: 1px solid #a3b0bf;
		color: #000;
		padding: 0.2em 0.4em;
	}
	.MainPageBG--featured-picture tr,
	.MainPage__table tr {
		display: table-row;
	}
	
	.MainPageBG--featured-picture td,
	.MainPage__column--left {
		display: table-cell;
	}

	.MainPage__column--left {
		width: 55%;
		border: 1px solid #cef2e0;
		padding: 0;
		vertical-align: top;
		color: #000;
		background-color: #f5fffa;
	}
	.MainPage__column--right {
		display: table-cell;
		width: 45%;
		border: 1px solid #cedff2;
		padding: 0;
		background: #f5faff;
		vertical-align: top;
	}
	.MainPage__other-areas {
		padding-top: 4px;
		padding-bottom: 2px;
		border: 1px solid #e2e2e2;
		overflow: auto;
		margin-top: 4px;
	}
}
@media all and ( min-width: 1200px ) {
	.MainPage__banner__links {
		position: absolute;
		right: -1em;
		top: 50%;
		margin-top: -2.4em;
		width: 38%;
		min-width: 25em;
		font-size: 95%;
	}
	.MainPage__banner {
		min-width: 47em;
		white-space: nowrap;
	}
	.MainPage__banner__welcome {
		width: 22em;
	}
		.MainPage__banner__links__1 {
		position: absolute;
		left: 0;
		top: 0;
	}
	.MainPage__banner__links__2 {
		position: absolute;
		left: 0;
		top: 1.6em;
	}
	.MainPage__banner__links__3 {
		position: absolute;
		left: 0;
		top: 3.2em;
	}
	.MainPage__banner__links__4 {
		position: absolute;
		left: 33%;
		top: 0;
	}
	.MainPage__banner__links__5 {
		position: absolute;
		left: 33%;
		top: 1.6em;
	}
	.MainPage__banner__links__6 {
		position: absolute;
		left: 33%;
		top: 3.2em;
	}
	.MainPage__banner__links__7 {
		position: absolute;
		left: 66%;
		top: 0;
	}
	.MainPage__banner__links__8 {
		position: absolute;
		left: 66%;
		top: 1.6em;
	}
	.MainPage__banner__links__9 {
		position: absolute;
		left: 66%;
		top: 3.2em;
	}
}

/* Night mode */
html.skin-night-mode-clientpref-1 .MainPage__other-areas,
html.skin-night-mode-clientpref-1 .MainPage__other-areas *,
html.skin-night-mode-clientpref-1 .MainPageBG,
html.skin-night-mode-clientpref-1 .MainPageBG div,
html.skin-night-mode-clientpref-1 .MainPage__table div,
html.skin-night-mode-clientpref-1 MainPage__table {
	background-color: inherit !important;
	background: inherit !important;
	color: inherit !important;
}

@media (prefers-color-scheme: dark) {
	html.skin-night-mode-clientpref-2 .MainPage__other-areas,
	html.skin-night-mode-clientpref-2 .MainPage__other-areas div,
	html.skin-night-mode-clientpref-2 .MainPageBG,
	html.skin-night-mode-clientpref-2 .MainPageBG div,
	html.skin-night-mode-clientpref-2 .MainPage__table div,
	html.skin-night-mode-clientpref-2 MainPage__table {
		background-color: inherit !important;
		background: inherit !important;
		color: inherit !important;
	}
}