img {
	vertical-align: text-top;
}

.numeric {
	text-align: center;
}

table.inventory {
	border-collapse: collapse;
	border: 1px solid;
	position: relative;
}

table.inventory td, table.inventory th {
	border: 1px solid;
	padding: 0.25em;
}

table.inventory th {
	background-color: #CCC;
	position: sticky;
	top: 0; /* Don't forget this, required for the stickiness */
}

table.inventory td {
	text-align: center;
}

table.inventory td img {
	max-width: 48px;
	max-height: 60px;
}

table.inventory th img {
	border-radius: 50%;
	width: 24px;
	height: 24px;
}

th img[alt="Crit DMG"] {
	background: red;
}

th img[alt="ATK"] {
	background: green;
}

th img[alt="Magic ATK"] {
	background: blue;
}

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

.dark {
	background: thistle;
}

.fire {
	background: peachpuff;
}

.water {
	background: lightblue;
}

.wind {
	background: #C7E2AA;
}

/* element toggle */
input {
	position: relative;
	z-index: 1;
}

label {
	padding: 0.5em 0.5em 0.5em 1.75em;
	border-radius: 0.25em;
	position: relative;
	left: -1.5em;
}

input#fire:checked ~ table.costumes tbody:not(.fire) {
	display: none;
}

input#wind:checked ~ table.costumes tbody:not(.wind) {
	display: none;
}

input#water:checked ~ table.costumes tbody:not(.water) {
	display: none;
}

input#light:checked ~ table.costumes tbody:not(.light) {
	display: none;
}

input#dark:checked ~ table.costumes tbody:not(.dark) {
	display: none;
}

input#unengraved:checked ~ table.costumes tbody:not([data-awakening=""]) {
	display: none;
}

input#engraved:checked ~ table.costumes tbody:not([data-awakening="engraved"]) {
	display: none;
}

input#awakened:checked ~ table.costumes tbody:not([data-awakening="awakened"]) {
	display: none;
}

input#none:checked ~ table.costumes tbody:not([data-exclusive=""]) {
	display: none;
}

input#no-sr:checked ~ table.costumes tbody[data-exclusive~="SR"] {
	display: none;
}

input#sr:checked ~ table.costumes tbody:not([data-exclusive~="SR"]) {
	display: none;
}

input#no-ur:checked ~ table.costumes tbody[data-exclusive~="UR"] {
	display: none;
}

input#ur:checked ~ table.costumes tbody:not([data-exclusive~="UR"]) {
	display: none;
}


tr[data-limited="t"] td.portrait {
	position: relative;
}

tr[data-limited="t"] td.portrait:before {
	background: url('images/icons/limited.png') no-repeat; /* 161 x 64 */
	background-size: contain;
	content: '';
	display: inline-block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 94px;
	height: 25px;
}

/* upgrades */
td.upgrades {
	display: inline-block;
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-size: contain; /* 94 x 74 */
	padding-left: 55px;
	overflow: hidden;
	height: 45px;
	width: 55px;
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 1;
}
/*
.plus-0 .upgrades {
	background: url('images/icons/upgrade-0.png');
}
*/
.plus-1 td.upgrades {
	background-image: url('images/icons/upgrade-1.png');
}

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

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

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

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

.plus- {
	opacity: 0.4;
}

/* potentials */
td.potentials {
	display: inline-block;
	box-sizing: border-box;
	background-size: contain; /* 36 x 36 */
	padding-left: 30px;
	overflow: hidden;
	height: 30px;
	width: 30px;
	position: absolute;
	bottom: 5px;
	right: 5px;
	z-index: 1;
}

.potentials-0 td.potentials {
	background-image: url('images/icons/potentials-0.png');
}

.potentials-1 td.potentials {
	background-image: url('images/icons/potentials-1.png');
}

.potentials-2 td.potentials {
	background-image: url('images/icons/potentials-2.png');
}

.potentials-3 td.potentials {
	background-image: url('images/icons/potentials-3.png');
}

.costumes {
	margin-top: 1em;
}

.costumes, .costumes tbody {
	display: block;
}

.costumes caption,
.costumes thead {
	display: none;
}

.costumes tbody tr + tr {
	display: inline-block;
	position: relative;
}

.costumes td.costume {
	display: none;
}

td.exclusive-,
td.exclusive-UR,
td.exclusive-SR {
	display: block;
	display: inline-block;
	box-sizing: border-box;
	padding-left: 100%;
	width: 63px; /* 126 */
	min-height: 47px; /* 93 */
	overflow: hidden;
}

td.exclusive-UR {
	background: url('images/icons/gear-Ur.png') no-repeat;
	background-size: 63px;
}

td.exclusive-SR {
	background: url('images/icons/gear-Sr.png') no-repeat;
	background-size: 63px;
}

[data-refinement]:after {
	content: attr(data-refinement);
	display: block;
	position: absolute;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	color: white;
	font-weight: bold;
	top: -25px;
	right: -15px;
}

[data-refinement="12"]:after,
[data-refinement="13"]:after,
[data-refinement="14"]:after,
[data-refinement="15"]:after,
[data-refinement="16"]:after {
	background: url(images/icons/refinement-r.png) no-repeat;
}

[data-refinement="17"]:after,
[data-refinement="18"]:after,
[data-refinement="19"]:after,
[data-refinement="20"]:after {
	background: url(images/icons/refinement-sr.png) no-repeat;
}

[data-refinement="21"]:after,
[data-refinement="22"]:after,
[data-refinement="23"]:after,
[data-refinement="24"]:after {
	background: url(images/icons/refinement-ur.png) no-repeat;
}