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:
		"banner character sp_reduction"
		"banner costume minimum"
		"banner summary desired"
		;
*/
	grid-gap: 0.125em 0.5em;
	grid-template-columns: 134px 1fr 1fr 1fr 1fr 1.5fr;
	grid-template-rows: auto auto 1fr;
}

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 td.image {
	min-height: 90px;
}

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

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

table.banners tbody .draw {
	position: absolute;
	top: 135px;
	left: 0;
	margin-top: -1.5em;
	background: white;
	border-radius: 0.25em;
	padding: 0 0.25em;
	z-index: 2;
}

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

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

/*tr.upcoming .last_day,*/
table.banners tr.current .start_date {
	display: none;
}

table.banners tbody tr.upcoming .start_date {
	position: absolute;
	top: 1.1em;
	left: 0;
	grid-column: unset;
	grid-row: unset;
}

table.banners tr.limited .costume:after {
	display: inline-block;
	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;
	padding: 0.125em;
	margin-left: 0.5em;
}

table.banners tbody .image {
	grid-area: "banner";
	grid-row-start: 1;
	grid-row-end: 10;
	grid-column: 1;
	align-self: start;
}

table.banners tbody .character {
	font: 1.25em bold;
	grid-area: "character";
	grid-column: 2;
	grid-column-start: 2;
	grid-column-end: 7;
	grid-row: 1;
}

table.banners tbody .costume {
	font-size: 1.5em;
	grid-area: "costume";
	grid-column: 2;
	grid-column-start: 2;
	grid-column-end: 7;
	grid-row: 2;
}

table.banners tbody .summary {
	grid-area: "summary";
	grid-column: 2;
	grid-column-start: 2;
	grid-column-end: 7;
	grid-row: 3;
}

table.banners tbody .sp_reduction {
	grid-area: "sp_reduction";
	grid-column: 2;
	grid-row: 4;
	text-align: center;
}
table.banners tbody .sp_reduction:not(:empty):before {
	content: '-1SP';
	display: block;
	border-bottom: 1px solid;
}

table.banners tbody .minimum {
	grid-area: "minimum";
	grid-column: 3;
	grid-row: 4;
	text-align: center;
}
table.banners tbody .minimum:not(:empty):before {
	content: 'Min';
	display: block;
	border-bottom: 1px solid;
}

table.banners tbody .desired {
	grid-area: "desired";
	grid-column: 4;
	grid-row: 4;
	text-align: center;
}
table.banners tbody .desired:not(:empty):before {
	content: 'Goal';
	display: block;
	border-bottom: 1px solid;
}

table.banners tbody .pub {
	grid-area: "pub";
	grid-column: 5;
	grid-row: 4;
	text-align: center;
}
table.banners tbody .pub:not(:empty):before {
	content: 'Pub';
	display: block;
	border-bottom: 1px solid;
}

table.banners tbody .draw {
/*
	grid-area: "draw";
	grid-column: 4;
	grid-row: 1;
	*/
}

table.banners tbody .start_date {
/*	grid-area: "start_date";
	grid-column: 4;
	grid-row: 2;
	*/
}
table.banners tbody .last_day {
	/*grid-area: "last_day";*/
	grid-column: 6;
	grid-row: 4;
	text-align: center;
}
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;
}