/* ===== Adjustments exclusive to this page for Pokémon box feel ===== */
	.maincol {
		background: url("icons/pokegrass.png") repeat top left /100px;
		border: 20px solid transparent;
		border-image: url(icons/pokegrass_border.png) 27 round;
		border-image-outset: 2px;
	}
	.banner {
		background: url("icons/tcg_banner.png") no-repeat top center /150px;
		border: 5px solid transparent;
		border-image: url(icons/tcg_banner_border.png) 32 round;
		background-size: cover;
	}
	.banner p {
		background-color: #5090F8;
		color: #eee;
	}
	.sidright button {
		margin-left: -5px;
	}
/* ===== end adjustments ===== */
	html {
		scroll-behavior: smooth;
	}
	.birdbuttons button {
		background-color: transparent;
		background-position: bottom;
		background-size: cover;
		background-repeat: no-repeat;
		background-clip: border-box;
		border: none;
		display: inline;
		width: 100px;
		height: 100px;
		margin: 0 5px;
	}
	button:hover {
		cursor:crosshair;
	}
	.hand {
		z-index: 3;
		position: absolute;
	}
.max { /* container for tablirb */
	width:95%;
	max-height: 500px;
	overflow-y: scroll;
	margin-left: auto;
	margin-right: auto;
}
.ballcontainer {
	width:95%;
	overflow-y: hidden;
	margin-left: auto;
	margin-right: auto;
}
.tablirb, .ballkey { /* "Table birb" for the card details, ballkey for the... Pokéball key (duh :P) */
	border: 3px solid #80B048;
	margin-left: auto;
	margin-right: auto;
	border-collapse: collapse;
	font-family: "Open Sans", system-ui;
	font-size: 16px;
	color: black;
}
.tablirb {
	width: 85%;
	background-color: #aaa;
	margin-top: 15px;
}
.ballkey {
	width:50%;
	margin-bottom: 25px;
	margin-top: 25px;
	background-color: #98C860;
}
.ballkey tr {
	text-align: center;
}
.ballkey div {
	margin-left:auto;
	margin-right: auto;
}
.tablirb tr:nth-child(1), .ballkey tr:nth-child(1) {
	background-color: #80B048;
	color:white;
	font-weight: 800;
	text-align: center;
	font-size: 20px;
	letter-spacing: 2px;
}

.tablirb tr:nth-child(1) {
	position: sticky;
	top:-5px;
}

.tablirb.bg tr {
	position: sticky;
}

.tablirb td, .ballkey td {
	padding: 8px 15px;
	border: 1px solid #63912C;
	height:25px;
}
.tablirb td:nth-child(1) {
	border-left:none;
	width: 100px;
}

.tablirb td:last-child {
	width:40%;
}
.tablirb tr:last-child, .tablirb tr:first-child {
	border-bottom: none;
}
.tablirb td:nth-child(3), .tablirb td:nth-child(5) {
	text-align: center;
}
.tablirb td:nth-child(5) {
	width: 20%;
}
.tablirb div { /* Card art thumbnails are placed inside these */
	margin: auto 0;
	width:100px;
	height: 50px;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
}
#noone { 
/* On page load, #noone is the "Select a Pokémon" table */
		border: 3px solid #80B048;
	text-align: center;
	font-family: 'jersey 25', sans-serif;
	font-size: 25px;
}

/* ===== ROW STYLES ===== */
.own, .fav, #noone { /* cards I own + bg color for noone */
	background-color: #98C860;
}

/* ===== end row styles ===== */

/* ===== EXPANSION AND POKEBALL ICONS ===== */
/* To keep this code clean (albeit unruly), set icons are located on spritesheets,
			organized by generation.
		When coding them in HTML, declare classes by generation (g1, g2, etc.),
			column ("co") and row ("ro") -- for example, "class='g1 co3 ro1'"
		Refer to "set icons spritesheet codex.txt" */		

.set, .own, .want { /* .want = most wanted cards I don't yet own */
	background-repeat: no-repeat;
}
.set {
	max-width:40px;
	max-height:40px;
	&.g1 {background-image: url("tcg/set-icons/tcg_icons_gen1.png"); background-size: 240px 40px;}
	&.g2 {background-image: url("tcg/set-icons/tcg_icons_gen2.png"); background-size: 240px 80px;}
	&.g3 {background-image: url("tcg/set-icons/tcg_icons_gen3.png"); background-size: 240px 120px;}
	&.g4 {background-image: url("tcg/set-icons/tcg_icons_gen4.png"); background-size: 240px 120px;}
	&.g5 {background-image: url("tcg/set-icons/tcg_icons_gen5.png"); background-size: 240px 80px;}
	&.g6 {background-image: url("tcg/set-icons/tcg_icons_gen6.png"); background-size: 240px 120px;}
	&.g7 {background-image: url("tcg/set-icons/tcg_icons_gen7.png"); background-size: 240px 120px;}
	&.g8 {background-image: url("tcg/set-icons/tcg_icons_gen8.png"); background-size: 240px 120px;}
	&.g9 {background-image: url("tcg/set-icons/tcg_icons_gen9.png"); background-size: 240px 160px;}
	&.promo {background-image: url("tcg/set-icons/tcg_icons_promo.png"); background-size: 240px 120px;}
	&.co1 {background-position-x: 0px;}
	&.co2 {background-position-x: -40px;}
	&.co3 {background-position-x: -80px;}
	&.co4 {background-position-x: -120px;}
	&.co5 {background-position-x: -160px;}
	&.co6 {background-position-x: -200px}
	&.ro1 {background-position-y: 0px;}
	&.ro2 {background-position-y: -40px;}
	&.ro3 {background-position-y: -80px;}
	&.ro4 {background-position-y: -120px;}
}
.tablirb td:nth-child(1) div, .keynot, .keyown, .keyfav, .keywant { 
/* .keynot, .keyown, .keyfav, .keywant for .ballkey */
	width:24px;
	height: 24px;
	background-image:url('tcg/pokeballs.png');
	background-position-x: -24px;
}

.tablirb td:nth-child(4) b, .tablirb td:nth-child(5) b, .tablirb td:nth-child(6) b, .tablirb td:nth-child(7) b {
	color: #BF4A4C;
}

.tablirb td:nth-child(6) img, .tablirb td:nth-child(4) img {
	margin-left: auto;
	margin-right: auto;
	display: inline;
	max-height: 25px;
	width: auto;
}

.tablirb td:nth-child(7) img {
	max-height: 40px;
	width: auto;
}

.own td:nth-child(1) div, .keyown {
	background-position-x: 0px;
}

.fav td:nth-child(1) div, .keyfav {
	background-position-x: -48px;
}

.want td:nth-child(1) div, .keywant {
	background-position-x: -72px;
}

/* ===== SPRITE SHEETS ===== */
/* divs in these tables are treated as containers for card/icon art. 
		When coding HTML tags, add style='background-position' in increments of --- x: -100px, y: -50px */

.tablePidgey td:nth-child(2) div, #Pidgeybg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_pidgey.jpg");}
.tablePidgeotto td:nth-child(2) div, #Pidgeottobg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_pidgeotto.jpg");}
.tablePidgeot td:nth-child(2) div, #Pidgeotbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_pidgeot.jpg");}
.tableSpearow td:nth-child(2) div, #Spearowbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_spearow.jpg");}
.tableFearow td:nth-child(2) div, #Fearowbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_fearow.jpg");}
.tablePsyduck td:nth-child(2) div, #Psyduckbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_psyduck.jpg");}
.tableGolduck td:nth-child(2) div, #Golduckbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_golduck.jpg");}
.tableFarfetchd td:nth-child(2) div, #Farfetchdbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_farfetchd.jpg");}
.tableFarfetchdGalar td:nth-child(2) div, #FarfetchdGalarbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_farfetchdGalar.jpg");}
.tableDoduo td:nth-child(2) div, #Doduobg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_doduo.jpg");}
.tableDodrio td:nth-child(2) div, #Dodriobg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_dodrio.jpg");}
.tableArticuno td:nth-child(2) div, #Articunobg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_articuno.jpg");}
.tableArticunoGalar td:nth-child(2) div, #ArticunoGalarbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_articunoGalar.jpg");}
.tableZapdos td:nth-child(2) div, #Zapdosbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_zapdos.jpg");}
.tableZapdosGalar td:nth-child(2) div, #ZapdosGalarbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_zapdosGalar.jpg");}
.tablePorygon td:nth-child(2) div, #Porygonbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_porygon.jpg");}
.tablePorygon2 td:nth-child(2) div, #Porygon2bg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_porygon2.jpg");}
.tablePorygonZ td:nth-child(2) div, #PorygonZbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_porygonZ.jpg");}
.tableMoltres td:nth-child(2) div, #Moltresbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_moltres.jpg");}
.tableMoltresGalar td:nth-child(2) div, #MoltresGalarbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_moltresGalar.jpg");}
.tableHoothoot td:nth-child(2) div, #Hoothootbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_hoothoot.jpg");}
.tableNoctowl td:nth-child(2) div, #Noctowlbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_noctowl.jpg");}
.tableTogepi td:nth-child(2) div, #Togepibg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_togepi.jpg");}
.tableTogetic td:nth-child(2) div, #Togeticbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_togetic.jpg");}
.tableTogekiss td:nth-child(2) div, #Togekissbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Togekiss.jpg");}
.tableSirfetchd td:nth-child(2) div, #Sirfetchdbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_sirfetchd.jpg");}
.tableNatu td:nth-child(2) div, #Natubg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_natu.jpg");}
.tableXatu td:nth-child(2) div, #Xatubg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_xatu.jpg");}
.tableMurkrow td:nth-child(2) div, #Murkrowbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_murkrow.jpg");}
.tableHonchkrow td:nth-child(2) div, #Honchkrowbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_honchkrow.jpg");}
.tableDelibird td:nth-child(2) div, #Delibirdbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_delibird.jpg");}
.tableSkarmory td:nth-child(2) div, #Skarmorybg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Skarmory.jpg");}
.tableLugia td:nth-child(2) div, #Lugiabg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Lugia.jpg");}
.tableHoOh td:nth-child(2) div, #HoOhbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_HoOh.jpg");}
.tableTorchic td:nth-child(2) div, #Torchicbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Torchic.jpg");}
.tableCombusken td:nth-child(2) div, #Combuskenbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Combusken.jpg");}
.tableBlaziken td:nth-child(2) div, #Blazikenbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Blaziken.jpg");}
.tableTaillow td:nth-child(2) div, #Taillowbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Taillow.jpg");}
.tableSwellow td:nth-child(2) div, #Swellowbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Swellow.jpg");}
.tableWingull td:nth-child(2) div, #Wingullbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Wingull.jpg");}
.tablePelipper td:nth-child(2) div, #Pelipperbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Pelipper.jpg");}
.tableSwablu td:nth-child(2) div, #Swablubg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Swablu.jpg");}
.tableAltaria td:nth-child(2) div, #Altariabg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Altaria.jpg");}
.tableLatias td:nth-child(2) div, #Latiasbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Latias.jpg");}
.tableLatios td:nth-child(2) div, #Latiosbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Latios.jpg");}
.tablePiplup td:nth-child(2) div, #Piplupbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Piplup.jpg");}
.tablePrinplup td:nth-child(2) div, #Prinplupbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Prinplup.jpg");}
.tableEmpoleon td:nth-child(2) div, #Empoleonbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Empoleon.jpg");}
.tableStarly td:nth-child(2) div, #Starlybg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Starly.jpg");}
.tableStaravia td:nth-child(2) div, #Staraviabg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Staravia.jpg");}
.tableStaraptor td:nth-child(2) div, #Staraptorbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Staraptor.jpg");}
.tableChatot td:nth-child(2) div, #Chatotbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Chatot.jpg");}
.tableCresselia td:nth-child(2) div, #Cresseliabg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Cresselia.jpg");}
.tablePidove td:nth-child(2) div, #Pidovebg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Pidove.jpg");}
.tableTranquill td:nth-child(2) div, #Tranquillbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Tranquill.jpg");}
.tableUnfezant td:nth-child(2) div, #Unfezantbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Unfezant.jpg");}
.tableSigilyph td:nth-child(2) div, #Sigilyphbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Sigilyph.jpg");}
.tableArchen td:nth-child(2) div, #Archenbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Archen.jpg");}
.tableArcheops td:nth-child(2) div, #Archeopsbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Archeops.jpg");}
.tableDucklett td:nth-child(2) div, #Ducklettbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Ducklett.jpg");}
.tableSwanna td:nth-child(2) div, #Swannabg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Swanna.jpg");}
.tableRufflet td:nth-child(2) div, #Ruffletbg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Rufflet.jpg");}
.tableBraviary td:nth-child(2) div, #Braviarybg td:nth-child(3) div {background-image:url("tcg/cardsheet/cardsheet_Braviary.jpg");}



/* ===== end sprite sheets ===== */

@keyframes pickup {
	50% {
		background-position: 0px 0px, 0px 0px, 0px 0px;
		background-size: 100% 100%, 100% 100%, 100% 100%;
	}
  100% {
  	background-position: 0px -5px, 0px -10px, -10px 0px;
  	background-size: 100% 100%, 100% 100%, 120% 100%;
  }
}
@keyframes putdown {
	50% {
		background-position: 0px 0px, 0px 0px, 0px 0px;
		background-size: 100% 100%, 100% 100%, 100% 100%;
	}
  100% {
  	background-position: 0px -10px, 0px -10px, -10px 0px;
  	background-size: 100% 100%, 100% 100%, 120% 100%;
  }
}
@media screen and (max-width: 2000px) {
  .maincol {
    width: 85%;
  }
}
@media screen and (max-width: 900px) {
  .maincol {
    width: 100%;
  }
  .max {
  	width: 100%;
  }
}