MediaWiki:Common.css

/* Possibly for addition to MW skin */

.tright .thumbinner {padding-left: 1.2em; }
.tleft .thumbinner {padding-right: 1.2em; }

img.thumbimage { width: 100% !important; }
div.thumbinner { width: auto !important; }

/* Infobox title styling */
.ibox-title { padding: 10px; }
.syllable-box-title { position: relative; top: -13px; float: left; margin: 0px; }
.ibox-label { clear: both; }

/* Resources dropdown fix for mobile */
@media (max-width: 770px) {
li.dropdown {
position: relative; 
}
.dropdown .dropdown-menu,
.dropdown .dropdown-panel {
background-color: transparent;
border-width: 0px;
box-shadow: 0 0 0 #fff;
}
.dropdown-menu > li > a {
clear: both;
line-height: 20px;
border-radius: 3px;
color: #777;
padding: 9px 15px;
}
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
}
}

/* Text styling */

span.enpron {background-color: #CEE3F6; border-bottom: 2x solid #5882FA; }

/* Pinyin Quick Start Guide Points List styling */

.mw-content-ltr div.points-big ul, .mw-content-rtl .mw-content-ltr div.points-big ul, .mw-content-ltr div.points-big ol, .mw-content-rtl .mw-content-ltr div.points-big ol {
max-width: 22em;
border: 1px solid #ddd;
background-color: #fdfdfd;
font-size: 120%;
margin: 0.5em 0 1.2em 2em;
padding: 1em 2.5em;
}

div.points-big ol li, div.points-big ul li {
line-height: 1.8em;
}

/* Accents Table */

table.accents {
width: 100%;
overflow: auto;
margin-bottom: 1.5em;
}

table.accents tr {
padding: 1.3em 0;
}

table.accents td {
border: 1px solid white;
}

table.accents th {
font-weight: bold;
}

table.accents td.plus {
text-align: center;
font-weight: bold;
background-color: #A9F5BC;
}

table.accents td.minus {
text-align: center;
font-weight: bold;
background-color: #F5A9A9;
}

/* For Tone Change Tables */

table.table em {
    background-color: #FFFFAA;
    font-style: normal;
}

/* Make Embedded YouTube Videos Responsive */
/* CSS Code via: https://themeskills.com/make-embedded-youtube-videos-responsive-wordpress/ */

.YT-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
margin-bottom:1em;
height:0;
overflow:hidden;
}

.YT-container iframe, .YT-container p iframe, .YT-container object, .YT-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

/* Make Image Grids Responsive with "imgrid" classes */
/* CSS Code via: https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp */

.imgrid-row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.imgrid-column {
  flex: 25%;
  max-width: 24%;
  padding: 0 4px;
}

.imgrid-column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

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

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