/*

 * An investigation of a div-based infobox, with support for low resolution

 */

.infobox-div {

	color: black;

	font-size: 88%;

	line-height: 1.5em;

}



div:not(.infobox-div-subbox) > .infobox-div-inner {

	border: 1px solid #a2a9b1;

	background-color: #f8f9fa;

	padding: 0.4em;

}

	

.infobox-div-subbox {

	display: contents;

}



@media (min-width: 300px) {

	.infobox-div-inner {

		display: grid;

	}

	

	.infobox-div-inner > div {

		grid-column: 1 / 3;

	}

	

	div.infobox-div-label {

		grid-column: 1 / 2;

	}

	

	div.infobox-div-data {

		grid-column: 2 / 3;

	}

	

	/* subgrid doesn't validate RIP

	 * can't do this yet

	.infobox-div-subbox > .infobox-div-inner {

		grid-template-columns: subgrid;

	}

	*/

}



@media (min-width: 720px) {

	.infobox-div {

		/* @noflip */

		margin: 0.5em 0 0.5em 1em;

		/* @noflip */

		float: right;

		/* @noflip */

		clear: right;

		width: 22em;

	}

}



/*

 * not strictly certain .infobox-div-subbox styles are necessary since the modules

 * now exclusively output infobox-div-subbox or infobox, not both

 * just replicating the module faithfully

 */

 /*

.infobox-div-subbox {

	margin: -3px;

}

*/





.infobox-div-above,

.infobox-div-title {

	font-size: 125%;

	font-weight: bold;

	text-align: center;

}



.infobox-div-title {

	padding: 0.2em;

}



.infobox-div-header,

.infobox-div-subheader,

.infobox-div-image,

.infobox-div-full-data,

.infobox-div-below {

	text-align: center;

}



/* must be declared after .infobox-full-data */

.infobox-div-label,

.infobox-div-data {

	/* @noflip */

	text-align: left;

}



.infobox-div-label {

	font-weight: bold;

}



.infobox-div-navbar {

	/* @noflip */

	text-align: right;

}



.infobox-div .navbar {

	font-size: 100%;

}



.infobox-div-3cols-child {

	margin: auto;

}