Template:Human Infobox/styles.css

.HumanTemplate {
	padding: 4px;
	box-sizing: border-box;
	border-radius: 10px;
	border: 3px solid rgba(0, 0, 0, 0.35);
	display: table;
	margin: auto;
}

/* INFOBOX */
.HumanDataGrid {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.HumanDataWide {
	display: flex; 
	flex-flow: column;
	text-align: center;
	flex-basis: 100%;
}

.HumanDataHalf {
	display: flex; 
	flex-flow: column;
	text-align: center;
	flex-basis: 49%;
	flex-grow: 2;
}

.HumanDataHeading {
	margin: 0px 10px !important;
}

.HumanData {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 3px;
	border-radius: 6px;
	background-color: #FFF;
	line-height: 110%;
	flex-grow: 1;
}

.HumanData a {
	color: inherit;
}

.HumanStatGrid {
	width: 100%;
	display: grid;
	gap: 4px;
	grid-template-columns: repeat(6, 1fr);
}

.HumanStatBox {
	box-sizing: border-box; 
	border-radius: 4px; 
	padding: 3px;
	background-color: #C0C0C0;
}

.HumanCaption {
	font-size: 10px;
}

/* TABLES */

.HumanTemplate table {
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
	
	/* Undo Minerva table styling */
	display: table;
	margin: unset;

	/* Fix for Timeless */
	width: 100%;
}

.HumanTemplate table th,
.HumanTemplate table td {
	padding: 2px;
	border: 1px solid black;
}

.HumanTemplate table th {
	background-color: rgba(255, 255, 255, 0.35);
}

.HumanTemplate table td {
	background-color: #fff;
}

.HumanTemplate table.subheader-table caption {
  border-bottom: 1px solid #000;
}

.HumanTemplate table.subheader-table tr:first-child > th {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.35);
}

/* Hide external table borders */
.HumanTemplate table > thead > tr:first-child > th,
.HumanTemplate table:not(.sortable) > tbody > tr:first-child > th,
.HumanTemplate table:not(.sortable) > tbody > tr:first-child > td {
	border-top: none;
}
.HumanTemplate table > thead > tr > th:first-child,
.HumanTemplate table > tbody > tr > th:first-child,
.HumanTemplate table > tbody > tr > td:first-child {
	border-left: none;
}
.HumanTemplate table > thead > tr > th:last-child,
.HumanTemplate table > tbody > tr > th:last-child,
.HumanTemplate table > tbody > tr > td:last-child {
	border-right: none;
}
.HumanTemplate table > tbody > tr:last-child > th,
.HumanTemplate table > tbody > tr:last-child > td {
	border-bottom: none;
}

/* Round corner cells */
.HumanTemplate table > thead > tr:first-child > th:first-child,
.HumanTemplate table:not(.sortable) > tbody > tr:first-child > th:first-child,
.HumanTemplate table:not(.sortable) > tbody > tr:first-child > td:first-child {
	border-top-left-radius: 6px;
}
.HumanTemplate table > thead > tr:first-child > th:last-child,
.HumanTemplate table:not(.sortable) > tbody > tr:first-child > th:last-child,
.HumanTemplate table:not(.sortable) > tbody > tr:first-child > td:last-child {
	border-top-right-radius: 6px;
}
.HumanTemplate table > tbody > tr:last-child > th:first-child,
.HumanTemplate table > tbody > tr:last-child > td:first-child {
	border-bottom-left-radius: 6px;
}
.HumanTemplate table > tbody > tr:last-child > th:last-child,
.HumanTemplate table > tbody > tr:last-child > td:last-child {
	border-bottom-right-radius: 6px;
}

.HumanInfoTableBox table > thead > tr:first-child > th:first-child,
.HumanInfoTableBox table:not(.sortable) > tbody > tr:first-child > th:first-child,
.HumanInfoTableBox table:not(.sortable) > tbody > tr:first-child > td:first-child {
	border-top-left-radius: 4px;
}
.HumanInfoTableBox table > thead > tr:first-child > th:last-child,
.HumanInfoTableBox table:not(.sortable) > tbody > tr:first-child > th:last-child,
.HumanInfoTableBox table:not(.sortable) > tbody > tr:first-child > td:last-child {
	border-top-right-radius: 4px;
}
.HumanInfoTableBox table > tbody > tr:last-child > th:first-child,
.HumanInfoTableBox table > tbody > tr:last-child > td:first-child {
	border-bottom-left-radius: 4px;
}
.HumanInfoTableBox table > tbody > tr:last-child > th:last-child,
.HumanInfoTableBox table > tbody > tr:last-child > td:last-child {
	border-bottom-right-radius: 4px;
}

/* POKÉDEX & AVAILABILITY */

.HumanInfoTable {
	display: flex; 
	flex-direction: column; 
	gap: 4px; 
	width: 100%; 
	max-width: 750px;
}

.HumanInfoLabel {
	text-align: center; 
	padding: 2px; 
	display: flex; 
	align-items: center; 
	justify-content: center;
}

.HumanInfoGenLabel {
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	font-size: 85%; 
	line-height: 110%;
}

.HumanInfoTableBox {
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	padding: 3px;
}

@media (max-width:850px) {
	.HumanInfoGenLabel {
		margin: 0 20px;
	}
	
	.HumanInfoDexContainer{
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		padding: 3px 3px 0 3px;
	}
	
	.HumanInfoDexGrid {
		padding: 3px;
		display: flex;
		gap: 4px;
		justify-content: center;
		border-radius: 6px;
		background-color: #FFF;
	}
	
	.HumanInfoDexFlag {
		border-radius: 4px;
		font-size: 80%; 
		line-height: 110%;
		padding: 2px;
		min-width: 60px;
	}
	
	.HumanInfoTableBox {
		font-size: 90%;
	}
	
	.HumanInfoNoDex {
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
	}
	
	.HumanInfoTableGame {
		width: 100px;
		line-height: 110%;
	}
}

@media (min-width:851px) {
	.HumanInfoLabelGrid {
		display: grid;
		grid-template-columns: 100px auto;
		gap: 4px;
	}
	
	.HumanInfoLabel {
		width: 100px;
	}
	
	.HumanInfoDexContainer {
		background-color: transparent!important;
	}
	
	.HumanInfoDexGrid {
		display: flex;
		gap: 4px;
		justify-content: flex-end;
	}

	.HumanInfoDexFlag {
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		font-size: 85%; 
		line-height: 110%;
	}
	
	.HumanInfoNoDex {
		border-top-right-radius: 6px;
	}
	
	.HumanInfoTableGame {
		width: 120px;
		line-height: 120%;
	}

}

/* TYPE EFFECTIVENESS */
.HumanEffectGrid {
	display: flex; 
	gap: 2px; 
	flex-wrap: wrap;
}

.HumanEffectBox {
	width: 120px; 
	border-radius: 4px;
	text-align: center; 
	display: grid; 
	grid-template-columns: 90px 20px; 
	gap: 5px; 
	align-items: center;
	padding: 4px 2px;
}

.HumanEffectText {
	display: flex; 
	align-items: center; 
	justify-content: center;
}

.HumanEffectCircle {
	height: 20px; 
	border-radius: 20px; 
	background: #FFF; 
	display: flex; 
	align-items: center; 
	justify-content: center;
	font-size: smaller;
}

.HumanEffectNone {
	width: 120px; 
	border-radius: 4px; 
	background: #000; 
	text-align: center; 
	padding: 4px 2px
}

/* OTHER */
.HumanTemplateHeader {
	border-radius: 6px; 
	padding: 2px 4px; 
	margin-bottom: 4px;
}

.HumanNotesBox {
	border-radius: 6px;
	padding: 2px 4px;
	margin-top: 4px;
}

/* TANGROWTH */
.TangrowthBox {
	max-width: 750px; 
	display: grid; 
	gap: 2px; 
	grid-template-columns: 150px 1fr; 
	margin: 0 auto 10px auto;
	border-top-left-radius: 150px; 
	border-bottom-left-radius: 150px; 
	border-top-right-radius: 12px; 
	border-bottom-right-radius: 12px; 
	box-sizing: border-box;
}

.TangrowthImage {
	display: flex; 
	align-items: center;
}

.TangrowthCircle {
	border-radius: 150px; 
	height: 150px; 
	width: 150px; 
	box-sizing: border-box;
	 background-color: #FFE; 
	 overflow: hidden; 
	 display: flex; 
	 justify-content: center;
}

.TangrowthText {
	border-radius: 10px; 
	margin: 4px 4px 4px 0; 
	background-color: #FFE; 
	padding: 6px; 
	display: flex; 
	align-items: center;
}