/* ===== 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 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 {
	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 80px;}
	&.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 { 
/* .keynot, .keyown, .keyfav for .ballkey */
	width:24px;
	height: 24px;
	background-image:url('tcg/pokeballs.png');
	background-position-x: -24px;
}

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

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

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


/* ===== 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");}

/* ===== 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%;
  }
}