.LangPhonemeChart {
	display: grid;
	/* X = Header row + NUMBER OF MANNERS */
}

	.LangPhonemeChart a {
		text-decoration: none;
	}

		.LangPhonemeChart a:link {
			color: inherit;
		}

.LangPhonemeChart {
	font-family: 'Segoe UI', 'SF Pro Display', Tahoma, Geneva, Verdana, sans-serif;
	line-height: 1.5em;
}

	/**/.LangPhonemeChart div.PhonemeMannerBox {
		display: grid;
		align-items: center;
		background-color: rgb(255, 248, 220);
		border: 1px green solid;
		grid-template-columns: 1fr 8fr; /* default setting for now: 13 Apr 25 */
	}

		/**/.LangPhonemeChart div.PhonemeMannerBox div.PhonemeSubmannerBox {
			display: grid;
			align-items: center;
			background-color: rgb(255, 255, 255);
		}

			/**/.LangPhonemeChart div.PhonemeMannerBox div.PhonemeSubmannerBox div.PhonemeSubmannerRow {
				display: grid;
				padding-left: 0.25em;
				border: 1px brown solid;
				align-items: center;
				grid-template-columns: 1fr 11fr; /* default setting for now: 13 Apr 25 */
			}

				/**/.LangPhonemeChart div.PhonemeMannerBox div.PhonemeSubmannerBox div.PhonemeSubmannerRow:nth-child(2n+1) {
					background-color: rgb(255, 248, 220);
				}

				/**/.LangPhonemeChart div.PhonemeMannerBox div.PhonemeSubmannerBox div.PhonemeSubmannerRow:first-child {
					border-top: none;
				}

				/**/.LangPhonemeChart div.PhonemeMannerBox div.PhonemeSubmannerBox div.PhonemeSubmannerRow:last-child {
					border-bottom: none;
				}

				/**/.LangPhonemeChart div.PhonemeMannerBox div.PhonemeSubmannerBox div.PhonemeSubmannerRow .PlaceHeadRow div {
					font-family: 'Segoe UI';
					font-weight: bold;
					font-size: 110%;
				}

				/**/.LangPhonemeChart div.PhonemeMannerBox div.PhonemeSubmannerBox div.PhonemeSubmannerRow > div.PhonemePlaceBox {
					display: grid;
					grid-template-columns: repeat(11, 1fr); /* default setting for now: 13 Apr 25 */
				}

				/**/.LangPhonemeChart div.PhonemeMannerBox div.PhonemeSubmannerBox div.PhonemeSubmannerRow .PlaceHeadRow div {
					font-size: 110%;
					padding: 3px;
					text-align: center;
					margin: 3px;
					text-align: center;
					display: grid;
				}

				/**/.LangPhonemeChart div.PhonemeMannerBox div.PhonemeSubmannerBox div.PhonemeSubmannerRow > div.PhonemePlaceBox {
					background-color: white;
					padding: 3px 0;
					margin: 3px;
				}

					.LangPhonemeChart div.PhonemeMannerBox div.PhonemeSubmannerBox div.PhonemeSubmannerRow > div.PhonemePlaceBox div {
						display: grid;
						grid-template-rows: 1fr;
						font-family: 'Times New Roman', Times, serif;
						font-weight: bold;
						font-size: 140%;
						align-items: center;
						text-align: center;
						padding: 3px 0;
						margin: 2px;
					}

				/**/.LangPhonemeChart div.PhonemeMannerBox div.PhonemeSubmannerBox div.PhonemeSubmannerRow.PlaceHeadRow div.PhonemePlaceBox,
				/**/.LangPhonemeChart div.PhonemeMannerBox div.PhonemeSubmannerBox div.PhonemeSubmannerRow.PlaceOfArticulationTitleRow div.PhonemePlaceBox {
					background-color: #FAE0FF;
					margin: 0;
					border-bottom: none;
				}

					/**/.LangPhonemeChart div.PhonemeMannerBox div.PhonemeSubmannerBox div.PhonemeSubmannerRow.PlaceHeadRow div.PhonemePlaceBox div,
					/**/.LangPhonemeChart div.PhonemeMannerBox div.PhonemeSubmannerBox div.PhonemeSubmannerRow.PlaceOfArticulationTitleRow div.PhonemePlaceBox div {
						font-size: 100%;
						color: navy;
						border-left: 2px navy solid;
					}

					/**/.LangPhonemeChart div.PhonemeMannerBox div.PhonemeSubmannerBox div.PhonemeSubmannerRow.PlaceOfArticulationTitleRow div.PhonemePlaceBox div {
						border-left: none;
					}

						/**/.LangPhonemeChart div.PhonemeMannerBox div.PhonemeSubmannerBox div.PhonemeSubmannerRow.PlaceHeadRow div.PhonemePlaceBox div:first-child,
						/**/.LangPhonemeChart div.PhonemeMannerBox div.PhonemeSubmannerBox div.PhonemeSubmannerRow.PlaceOfArticulationTitleRow div.PhonemePlaceBox div:first-child {
							border-left: none;
						}

					/**/.LangPhonemeChart div.PhonemeMannerBox div.PhonemeSubmannerBox div.PhonemeSubmannerRow.PlaceOfArticulationTitleRow div.PhonemePlaceBox div {
						grid-column-start: 1;
						/* INSTANTIATE THIS IN EACH LANGUAGE FILE: grid - column - end: 12; */
					}

.MannerTitle,
.SubmannerTitle,
.LangPhonemeChart div.PhonemeMannerBox div.PhonemeSubmannerBox div.PhonemeSubmannerRow > div.PhonemePlaceBox.ArticulationTitle div,
/**/.LangPhonemeChart div.PhonemeMannerBox div.PhonemeSubmannerBox div.PhonemeSubmannerRow > div.PhonemePlaceBox.PlaceCategoryTitle div,
/**/.LangPhonemeChart div.PhonemeMannerBox div.PhonemeSubmannerBox div.PhonemeSubmannerRow > div.PhonemePlaceBox.PlaceTitle div {
	font-family: 'Segoe UI', 'SF Pro Display', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 90%;
	padding-left: 0.25em;
}

.MannerTitle {
	font-weight: bold;
	color: firebrick;
}

.SubmannerTitle {
	font-size: 120%;
	font-style: italic;
}

.PlaceTitle, .SubplaceTitle {
	font-weight: normal;
	font-size: 90%;
}

p {
	font-size: 120%;
}

span.emp {
	font-family: 'Times New Roman';
	font-size: 140%;
	color: red;
}
/* THE FOLOOWING STYLES ARE DIFFERENT FOR DIFFERENT LAYOUTS OF THE PHONOLOGY CHARTS */
.labial {
	grid-column-start: 1;
	grid-column-end: 3;
}

.coronal {
	grid-column-start: 3;
	grid-column-end: 7;
}

.dorsal {
	grid-column-start: 7;
	grid-column-end: 10;
}

.laryngeal {
	grid-column-start: 10;
	grid-column-end: 12;
}

.bilabial {
	grid-column-start: 1;
}

.labiodental {
	grid-column-start: 2;
}

.dental {
	grid-column-start: 3;
}

.alveolar {
	grid-column-start: 4;
}

.postalveolar {
	grid-column-start: 5;
}

.dent-alv-post {
	grid-column-start: 3;
	grid-column-end: 6;
}

.retroflex {
	grid-column-start: 6;
}

.palatal, .labialpalatal {
	grid-column-start: 7;
}

.velar {
	grid-column-start: 8;
}

.uvular {
	grid-column-start: 9;
}

.epiglottal, .pharyngeal {
	grid-column-start: 10;
}

.glottal {
	grid-column-start: 11;
}

.unrounded,
.rounded,
.na-roundness,
.voiceless,
.voiced,
.no-ipa,
.aspirated,
.ejective {
	border-width: 2px;
	border-style: solid;
}

.unrounded {
	border-color: #A65300;
	background-color: #EFDFC4;
}

.rounded {
	background-color: #C8FFFF;
	border-color: #0000CA;
	border-radius: 18px;
}

.na-roundness {
	background-color: #CACACA;
	border-color: #333333;
	border-style: none;
}

.voiceless {
	border-color: #CA0000;
	background-color: #FFDFDF;
	grid-row-start: 1;
}

.voiced {
	border-color: #00CA00;
	background-color: #DFFFDF;
	grid-row-start: 2;
}

.ejective {
	border-color: orange;
	background-color: rgb(253, 255, 213);
	grid-row-start: 3;
}

.aspirated {
	border-color: purple;
	background-color: rgb(244, 231, 255);
}

.no-ipa {
	border-color: transparent;
	background-color: transparent;
	margin: 3px 0;
}

.voiceless.impos, .voiced.impos {
	background-color: #9B9B9B;
	border: 1px dotted #CDCDCD;
	margin: 3px 0;
}


div.unrounded,
div.rounded,
div.na-roundness,
div.voiceless,
div.voiced,
div.no-ipa {
	border-width: 2px;
	border-style: solid;
}

div.unrounded {
	border-color: #A65300;
	background-color: #EFDFC4;
}

div.rounded {
	background-color: #C8FFFF;
	border-color: #0000CA;
	border-radius: 18px;
}

div.na-roundness {
	background-color: #CACACA;
	border-color: #333333;
	border-style: none;
}

div.voiceless {
	border-color: #CA0000;
	background-color: #FFDFDF;
}

div.voiced {
	border-color: #00CA00;
	background-color: #DFFFDF;
}

div.no-ipa {
	border-color: transparent;
	background-color: transparent;
	margin: 3px 0;
}

.voiceless.impos {
	grid-row-start: 1;
}

.voiced.impos {
	grid-row-start: 2;
}

.impos {
	background-color: #9B9B9B;
	color: white;
	border: 1px dotted #CDCDCD;
	margin: 3px 0;
}

body.LangPhonemeChart div.VowelGrid > div {
	display: grid;
}

body.LangPhonemeChart div.VowelGrid {
	width: 50%;
}

	body.LangPhonemeChart div.VowelGrid > div {
		grid-template-columns: 2fr 6fr;
	}

		body.LangPhonemeChart div.VowelGrid > div a {
			text-decoration: none;
			color: black;
		}

div.LegendBox {
	width: 40%;
	font-size: 130%;
	margin-bottom: 1em;
	border-width: 2px 0;
	border-style: dotted;
	border-color: green;
	padding: 0.5em 0;
	background-color: white;
	color: black;
}

	div.LegendBox p {
		font-size: 90%;
	}

	div.LegendBox .LegendRow {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	div.LegendBox.Consonant .LegendRow .voiceless,
	div.LegendBox.Consonant .LegendRow .voiced,
	div.LegendBox.Consonant .LegendRow .ejective,
	div.LegendBox.Consonant .LegendRow .impos,
	div.LegendBox.Vowel .LegendRow .unrounded,
	div.LegendBox.Vowel .LegendRow .rounded,
	div.LegendBox.Vowel .LegendRow .na-roundness {
		grid-row-start: 1;
		margin: 0 0.125em;
	}

	div.LegendBox > div {
		font-family: "Times New Roman", Times, serif;
		margin: 1px;
		padding: 0.25em;
		text-align: center;
	}

	div.LegendBox div.LegendRow > div > div:first-child {
		font-weight: bold;
		padding: 0.25em 0;
	}

	div.LegendBox .LegendRow > div > div:last-child {
		color: navy;
		padding: 0.25em;
	}

	div.LegendBox a {
		font-size: 100%;
		text-decoration: green wavy underline 1px;
	}

body.LangPhonemeChart div.VowelGrid > div {
	display: grid;
}

body.LangPhonemeChart div.VowelGrid {
	width: 50%;
}

	body.LangPhonemeChart div.VowelGrid > div {
		grid-template-columns: 2fr 6fr;
	}

		body.LangPhonemeChart div.VowelGrid > div a {
			text-decoration: none;
			color: black;
		}

div.VowelGrid > div .rounded a:hover,
div.VowelGrid > div .unrounded a:hover,
div.VowelGrid > div .na-roundness a:hover,
div.VowelGrid > div .rounded a:hover {
	background-color: purple;
}

div.VowelGrid > div .unrounded a:hover {
	background-color: #AD7103;
}

div.VowelGrid > div .na-roundness a:hover {
	background-color: black;
}

div.VowelGrid > div > div:first-child {
	font-size: 120%;
	font-weight: bold;
	align-content: center;
	padding-left: 1em;
	background-color: rgb(255, 248, 220);
}

div.VowelGrid > div:nth-child(2n+1) {
	border-width: 1px 0;
	border-color: gray;
	border-style: solid;
}


div.HorizMainHead {
	text-align: center;
	font-size: 130%;
	padding: 3px;
}

div.HorizMainHead, div.HorizSubHead {
	font-weight: bold;
	background-color: #ddddff;
}

div.HorizSubHead,
div.SymbolsRow {
	display: grid;
	grid-template-columns: repeat(11, 1fr);
	text-align: center;
	padding: 6px 0;
}

	div.HorizSubHead div {
		justify-content: center;
	}

	div.HorizSubHead.Vowel {
		grid-template-columns: 4fr 1fr 4fr 1fr 4fr;
	}

		div.HorizSubHead.Vowel div:first-child {
			justify-content: start;
		}

		div.HorizSubHead.Vowel div:nth-child(3) {
		}

		div.HorizSubHead.Vowel div:last-child {
			justify-content: end;
		}

	div.HorizSubHead > div {
		display: flex;
		align-items: center;
	}

	div.SymbolsRow.Consonant {
		grid-template-columns: repeat(2, 1fr) 3fr repeat(6, 1fr);
	}

	div.SymbolsRow.Vowel {
		grid-template-columns: repeat(2, 1fr) 2fr repeat(2, 1fr) 2fr repeat(2, 1fr);
	}

	div.SymbolsRow div {
		display: grid;
		font-family: 'Times New Roman', Times, serif;
		font-weight: bold;
		font-size: 120%;
		padding: 3px;
	}

	.PhoneInventory {
		background-color: #DEEAF6;
		border: 1px navy dotted;
	 }

		.PhoneInventory > div {
			display: grid;
			grid-template-columns: 1fr 1fr 2fr repeat(4, 3fr);
			padding: 2px 0;
		}

		.PhoneInventory div.InventoryHead {
			font-weight: bold;
		}

		.PhoneInventory > div > div:first-child, .PhoneInventory > div > div:nth-child(2) {
			text-align: center;
		}

		.PhoneInventory > div > div.IPA {
			font-size: 140%;
			font-family: Times New Roman;
			font-weight: bold;
			color: firebrick;
			padding-bottom: 3px;
		}