body {
	width: 590px;
	padding: 0;
	margin: 5px;
}

/* upgrades */
.plus-0:after, .plus-1:after, .plus-2:after, .plus-3:after, .plus-4:after, .plus-5:after {
	content: '';
	display: inline-block;
	height: 74px;
	width: 94px;
	position: absolute;
	top: -15px; /* 70px */
	left: 60px; /* 55px */
	transform: scale(0.75);
}

.plus-0:after {
	background: url('images/icons/upgrade-0.png');
}

.plus-1:after {
	background: url('images/icons/upgrade-1.png');
}

.plus-2:after {
	background: url('images/icons/upgrade-2.png');
}

.plus-3:after {
	background: url('images/icons/upgrade-3.png');
}

.plus-4:after {
	background: url('images/icons/upgrade-4.png');
}

.plus-5:after {
	background: url('images/icons/upgrade-5.png');
}

/* elements */
.light {
	background: LightGoldenrodYellow;
}

.dark {
	background: thistle;
}

.fire {
	background: peachpuff;
}

.water {
	background: lightblue;
}

.wind {
	background: #C7E2AA;
}

/* damage types */
.physical {
	background-position: 100% 0;
	background-image: url('images/icons/damage-physical2.png');
	background-repeat: no-repeat;
}

.magic {
	background-position: 100% 0;
	background-image: url('images/icons/damage-magic2.png');
	background-repeat: no-repeat;
}

body > *:last-child {
	margin-bottom: 0;
}

table.banners {
	border: 4px outset #CCC;
}

table.banners thead {
	display: none;
}

table.banners > tbody {
	display: block;
}

table.banners > tbody > tr {
	display: grid;
	grid-template-areas:
		"portrait costume upgrades"
		"portrait dates upgrades"
		"portrait summary summary"
		"portrait purpose purpose"
		;

	grid-gap: 0.125em 0.5em;
	grid-template-columns: 134px 1fr auto;
	grid-template-rows: auto auto auto 1fr;
	position: relative;
	min-height: 134px;
}

table.banners > tbody > tr + tr {
	margin-top: 2px;
}
/*
table.banners tbody tr {
	background: white;
}
*/
table.banners tbody td.start_date {
	background-color: white;
}
/*
table.banners tbody tr:nth-child(2n),
table.banners tbody tr.upcoming:nth-child(2n):before {
	background-color: #DDD;
}
*/
table.banners > tbody td {
	align-self: baseline;
}

table.banners tbody tr.retired {
	display: none;
}

table.banners tbody {
	position: relative;
}

table.banners tbody .draw {
	grid-area: 1 / 1;
	position: absolute;
	top: 134px;
	margin-top: -1.5em;
	border-radius: 0.25em;
	background-color: white;
}

}

table.banners tbody tr.upcoming {
	position: relative;
}

table.banners tbody tr.upcoming:before {
	content: "Coming Soon";
	position: absolute;
	background: white;
	top: 0;
	left: 0;
}

table.banners tbody .image {
	grid-area: portrait;
	align-self: start;
	min-height: 90px;
}

table.banners tbody .costume {
	font-size: 1.5em;
	grid-area: costume;
}

table.banners tbody td.dates {
	grid-area: dates;
	font-size: 0.8em;
}

table.banners > tbody .summary {
	grid-area: summary;
}

table.banners > tbody .last_day[title]:not(:empty):before {
	content: attr(title);
}
table.banners > tbody .last_day:not(:empty):before {
	content: 'Last Day';
	display: block;
	border-bottom: 1px solid;
}

table.banners tr.limited .draw {
	background: linear-gradient(90deg, #E8BEFA, #ABBFFF, #BBF3C0, #FCF4C9, #FEE3E2, #FBCDF2);
}

table.banners tr.limited .draw:after {
	display: inline;
	content: 'LIMITED';
	/*background: linear-gradient(90deg, #69b7eb, #b3dbd3, #f4d6db);*/
/*	background: linear-gradient(90deg, #E8BEFA, #ABBFFF, #BBF3C0, #FCF4C9, #FEE3E2, #FBCDF2);*/
/*	border: 1px solid;*/
	font-size: 0.8em;
	font-style: italic;
	margin-left: 0.75em;
}

td.upgrades.unknown table,
td.purpose.unknown table {
	display: none;
}

/* UPGRADES */

table.banners td.upgrades {
	grid-area: upgrades;
}

table.upgrades {
	display: block;
	width: 100%;
	font-size: 0.8em;
}

table.upgrades tbody {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: repeat(3, 1fr) 2fr;
	grid-gap: 0.125em 0.5em;
	border-spacing: 0;
	width: 100%;
}

table.upgrades tr {
	display: block;
}

table.upgrades th {
	display: block;
	border-bottom: 1px solid;
}

table.upgrades td {
	display: block;
	text-align: center;
}

table.upgrades .none {
	opacity: 0.25;
}

/* PURPOSE (TIER INFO) */

.meta {
	background: linear-gradient(90deg, #E8BEFA, #ABBFFF, #BBF3C0, #FCF4C9, #FEE3E2, #FBCDF2);
	border-radius: 0.5em;
	border: 1px solid #666;
	font-weight: bold;
}

td.purpose {
	grid-area: purpose;
	font-size: 0.8em;
}

table.purpose {
	width: 100%;
}

table.purpose tbody {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: repeat(6, 1fr);
	grid-gap: 0.125em 0.5em;
	border-spacing: 0;
}

table.purpose tr {
}

table.purpose th,
table.purpose td {
	display: block;
	text-align: center;
}

table.purpose td:first-child {
	border-bottom: 1px solid;
	margin-bottom: 2px;
}