User:Merds/CSS/Infobox.css

/*<syntaxhighlight lang="css">*/
/* variables */
:root {
	--table-header: #b1886f;
    --table-subheader: #d1b9ad;
    --table-body: #fff8ee;
    --table-border: #e9d8cc;
}

.infobox {
	font-size: .85em;
    width: 300px;
    border-collapse: collapse;
    float: right;
    table-layout: fixed;
    margin: 0.5em 0 1em 1em;
}

.infobox .infobox-buttons {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    grid-gap: 3px;
    margin-bottom: 3px;
}

.infobox .infobox-buttons .button {
	background: var(--table-header);
    padding: 0 5px;
    font-weight: bold;
    flex: 1 1 20%;
	max-width: 20%;
	color: white;
}

.infobox tbody {
    border: 1px solid var(--table-border);
    background: var(--table-body);
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(231, 215, 199, 0.5);
}

.infobox .infobox-header {
	background: var(--table-header);
	padding: 0.5em 0;
	text-align: center;
	color: white;
	font-size: 1.15em;
	font-weight: bold;
	line-height: 1.4em;
}

.infobox .infobox-image {
    text-align: center;
    background: var(--body-main);
}

.infobox .infobox-subheader {
	background: var(--table-subheader);
	font-weight: bold;
	text-align: center;
	color: white;
}

.infobox .infobox-padding {
	backgound: var(--table-body);
}

.infobox tr td:not(.infobox-padding) {
    padding: 0.2em 0.5em;
}

.infobox th:not(.infobox-header):not(.infobox-subheader):not(.infobox-nested) {
    border-right: 2px solid var(--table-subheader);
    text-align: right;
    padding: 0.2em 0.5em;
}

/*Hide*/
.hidden {
	display: none;
}

/*</syntaxhighlight>*/