@font-face {font-family:'Roboto';src: url('roboto.woff2') format('woff2')}
@font-face {font-family:'Roboto';src: url('roboto-bold.woff2') format('woff2');font-weight:700}
@font-face {font-family:'Roboto Mono';src: url('robotomono.woff2') format('woff2')}
@font-face {font-family:'Roboto Mono';src: url('robotomono-bold.woff2') format('woff2');font-weight:700}

.hide{display:none}
main{
	text-align:center;
	max-width:540px;
	margin: -50px auto 0;
	color:#fff;
	padding-left:10px;padding-right:10px;
}
@media only screen and (max-width:641px){main{margin-top:-10px}}
#games{
	list-style:none;
	margin:0;
	padding:0;
}

#games a{
	display:block;
	color:#fff;
	text-decoration:none;
	background-color:#1b252f;
	border-radius:113px;
	margin-bottom:10px;
	font-weight:bold;
	font-size:120%;
	padding: 10px 0;
	position:relative;
}
#games a:hover{
	background-color:#e63636;
}
#games small{
	font-size:80%;
	font-weight:normal;
	display:block;
	color:#505962;
}
#games .pkm_game a:hover small{
	color:#f76d6d;
}

.pkm_game a{
	background-size:cover;
	background-position:center center;
	background-blend-mode:overlay;
}
.pkm_game a:hover{
	background-blend-mode:multiply;
}
.gen1rby a{background-image:url(banner/rby.jpg)}
.gen2gsc a{background-image:url(banner/gsc.jpg)}
.gen3rse a{background-image:url(banner/rse.jpg)}
.gen3frlg a{background-image:url(banner/frlg.jpg)}
.gen4dppt a{background-image:url(banner/dppt.jpg)}
.gen4hgss a{background-image:url(banner/gsc.jpg)}
.gen5bw a{background-image:url(banner/bw.jpg)}
.gen5b2w2 a{background-image:url(banner/b2w2.jpg)}
.gen6xy a{background-image:url(banner/xy.jpg)}
.gen6oras a{background-image:url(banner/oras.jpg)}
.gen7sm a{background-image:url(banner/sm.jpg)}
.gen7usum a{background-image:url(banner/usum.jpg)}
.gen7letsgo a{background-image:url(banner/letsgo.jpg)}
.gen8swsh a{background-image:url(banner/swsh.jpg)}
.gen8bdsp a{background-image:url(banner/dppt.jpg)}

body{
	font:15px 'Roboto',sans-serif;
	margin:0;
	background-color:#202b37;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-webkit-tap-highlight-color:rgba(255,255,255,0);
	-webkit-focus-ring-color:rgba(0,0,0,0);
	user-select:none;
	cursor:default
}

#select-language{
	transform:scale(1.5);
	font-family:Roboto,sans-serif;
	font-size:100%;
	border:0;
	outline:0;
	background-color:transparent;
	color:#000;
	width:30px;
	height:28px;
	line-height:20px;
	transition: opacity .3s cubic-bezier(.4,0,.22,1);

	-webkit-appearance:none;
	-moz-appearance:none;
	text-overflow:'';
	padding: 4px 2px 4px 28px;
	
	
	background-image:url(svg/lang.svg);
	background-size:24px;
	background-position:3px;
	background-repeat:no-repeat;

	position:absolute;
	top:20px;
	right:20px;
}
#select-language:hover,#select-language:active{
	cursor:pointer;opacity:.7;
}
#select-language option{background-color:#eee}

#back-button{
	transform:scale(2);
	width:28px;
	height:32px;
	transition: opacity .3s cubic-bezier(.4,0,.22,1);
	background-image:url(svg/back.svg);
	background-size:24px;
	background-position:1px;
	background-repeat:no-repeat;
	position:absolute;
	top:15px;
	left:20px;
}
#back-button:hover{opacity:.7}

#overlay,#overlay2,#button-select{display:none!important}

/* nav */
nav{
	position:-webkit-sticky;
	position:sticky;
	top:0px;
	z-index:9000;

	background-color:rgba(34,40,48,0.93);
	background-color:rgba(32,43,55,0.93);

	margin: -60px auto 20px;
	padding: 10px 0;
	
	backdrop-filter: blur(2px);
}

footer{
	text-align:center;
	color:#425060;
	margin-bottom:10px;
}
footer a{color:#708091}
footer a:hover{color:white}


.clickable:hover{cursor:pointer}
.help:hover{cursor:help}
.mono{font-family:'Roboto Mono',monospace}
.text-center{text-align:center}
.text-right{text-align:right}
.no-wrap{white-space:nowrap}
.clearfix{display:block;clear:both}


.sprite{
	background-image:url(sprites_v1b.png);
	background-size:90px 304px;
	background-repeat:no-repeat
}
i.sprite{
	display:inline-block;
	vertical-align:middle
}
.sprite.caught0{background-position:0px -120px;width:30px;height:30px}
.sprite.caught1{background-position:-30px -120px;width:30px;height:30px}
#dex-results .sprite.caught0{background-position:-60px -120px}
.sprite.caught-mini{background-position:-80px -48px;width:10px;height:10px;margin-left:2px;}

.sprite.location0{ background-position:0px -152px;width:24px;height:30px;}
.sprite.location1{ background-position:-24px -152px;width:24px;height:30px;}
#dex-results .sprite.location0{background-position:-68px -92px}
.sprite.back{background-position:-58px -148px}
.sprite.extlink{background-position:-76px -0px;width:14px;height:16px}
.sprite.pic{background-position:-76px -16px;width:14px;height:16px}
.sprite.share{background-position:-76px -32px;width:14px;height:16px}

.sprite.menu{background-position: -52px -252px;width:28px;height:20px;}
.sprite.game{background-position: -72px -64px;width:20px;height:20px;}
.sprite.globe{background-position: -70px -188px;width:20px;height:20px;}
	
	
.sprite.heart{background-position: -24px -96px;width:20px;height:18px}
.sprite.move-cat-0{background-position: -0 -184px;width:22px;height:16px}
.sprite.move-cat-1{background-position: -22px -184px;width:18px;height:16px}
.sprite.move-cat-2{background-position: -40px -184px;width:19px;height:16px}
#search.sprite{background-position:right -274px}


.sprite.encounter-condition{
	width:24px;height:24px;
	margin-left:-4px;
}
.encounter-condition.no_weather{background-position: -0px -0px}
.encounter-condition.overcast{background-position: -24px -0px}
.encounter-condition.raining{background-position: -48px -0px}
.encounter-condition.thunderstorm{background-position: -0px -24px}
.encounter-condition.snowing{background-position: -24px -24px}
.encounter-condition.snowstorm{background-position: -48px -24px}
.encounter-condition.intense_sun{background-position: -0px -48px}
.encounter-condition.sandstorm{background-position: -24px -48px}
.encounter-condition.heavy_fog{background-position: -48px -48px}

.encounter-condition.winter{background-position: -24px -24px}
.encounter-condition.spring{background-position: -24px -72px}
.encounter-condition.summer{background-position: -0px -48px}
.encounter-condition.autumn{background-position: -48px -72px}

.encounter-condition.morning{background-position: -0px -96px}
.encounter-condition.day{background-position: -0px -0px}
.encounter-condition.night{background-position: -0px -72px}


#home{
	margin: 0 auto;
	color:white;
}
#dex-results, #dex-navigator, nav, .screen{
	max-width:540px;
}
#dex-results, #dex-navigator{
	margin: 0 auto;
}

h1{
	display:inline-block;
	font-size:220%;
	border-top:5px solid #f94343;
	margin: 20px 0;
	text-transform:uppercase;
	color:white;
}



#dex-results{
	margin-bottom:40px
}

#dex-results a{
	background-color:#1b252f;
	margin:0 4px 4px 4px;

	font-size:115%;
	display:block;
	text-decoration:none;
	color:white;
	position:relative;
	border-radius:100px;
}
#dex-results a.location-link{
	padding: 20px;
}
/*#dex-results a:nth-child(odd){
	background-color:#1b252f;
}*/
/*#dex-results .poke-icon{
	background-size: 2560px 1920px;
	width:80px;height:60px;
}*/
#dex-results a:hover{
	background-color:#48525e;
}
#dex-results .mono{color: #4f5d6e}
#dex-results a:hover .mono{color: #5f6d7e}

.caught0, .caught1{
	transform:scale(1.25);
	position:absolute;
	right: 20px;
	top:50%;
	margin-top:-15px;
	transition: opacity .2s cubic-bezier(.4,0,.22,1);
}

.caught0.clickable:hover, .caught1.clickable:hover{
	opacity:.7;
}




#dex-navigator{
	margin: 0 auto;
	overflow:hidden;
	position:relative;
	height:30px;
	font-weight:700;
}
#dex-navigator ul{
	text-align:left;
	position:absolute;
	top:0;
	left:0;
	list-style:none;
	padding:0;
	margin:0;
	/*width:calc(180px * (4 + 6));*/
	
	transition: .4s left cubic-bezier(.4,0,.22,1);
}
#dex-navigator li{
	display:inline-block;
	width:180px;
	text-align:center;
}
#dex-navigator li.clickable{
	color:#3e4957;
	color:#3b5065;
	transition: color .15s cubic-bezier(.4,0,.22,1);
}
#dex-navigator li.selected, #dex-navigator li.clickable:hover{
	color:white;
}











.screen{
	margin:0 auto 30px;
	position:relative;
	display:none
}



#dex-status{
	margin-bottom:20px;
}
#progress-bar{
	background-color:#1b2128;
	/*background-color:#303a45;*/
	height:5px;
	border-radius:8px;
	width:200px;
	display:inline-block;
	vertical-align:middle;
	text-align:left;
}
#progress-bar>div{
	background-color:#f94085;
	background-color:#f94343;
	border-radius:8px;
	height:100%;
	transition:width .2s cubic-bezier(.4,0,.22,1);
}

@keyframes progress-bar-glow {
	0%{background-color:#f94085; box-shadow: #f94085 0 0 8px}
	100%{background-color:#ffa800; box-shadow: #ffa800 0 0 8px}
}
#progress-bar.complete>div{
	animation-name: progress-bar-glow;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}



#dex-search{
	position:relative;
	width:400px;
	max-width:90%;
	margin: 0 auto;
}
#dex-search-filters{
	position:absolute;
	top:10px;
	left:15px;
}
.filter{
	background-color:white;
	color:black;
	font-size:12px;
	font-weight:700;
	padding: 2px 12px !important; border-radius:60px;
	margin-right:4px;
	text-transform: uppercase;
}
.filter-missing{
	background-color:#383e44;
	color:white;
}
#search{
	font-family:inherit;
	font-size:110%;
	width:100%;
	background-color:#181e24;
	background-blend-mode:difference;
	color:white;
	border:none;
	padding: 15px 40px 15px 15px;
	height:40px;
	border-radius:20px;
	transition: background-color .2s cubic-bezier(.4,0,.22,1), color .2s cubic-bezier(.4,0,.22,1);
	box-sizing:border-box;
}
#search:focus{
	background-color:white;
	color:black;
	outline:none;
}










.screen-title{
	position:relative;
	background-color:#b32929;
	color:white;
	border-radius:3px 3px 0 0;
	padding:10px 20px;
	text-align:center;
	margin-top:20px;
}
.screen-title .mono{font-weight:700}
.screen-title>span{
	margin-left:10px;
	font-size:21px;
	font-weight:400;
}
.screen-title small{
	display:block;
	font-size:72%;
	color:#ea5e5e
}
.screen-title .mono{
	color:#dd5656;
	font-size:90%;
}

.back-button{
	border-radius:20px;
	width:40px;height:40px;
	transition: opacity .2s cubic-bezier(.4,0,.22,1);
	position:absolute;
	top:50%;
	left:10px;
	margin-top:-20px;
}
.back-button:hover{
	opacity:.7;
}





#abilities td{text-align:center;/*vertical-align:top*/}






span.type{
	color:white;
	text-shadow:#525252 0 1px;
	padding:4px 8px;
	font-weight:700;
	text-transform:uppercase;
	font-size:80%;
	vertical-align:middle;
}
.type.cat-0{background-color:#ff4400}
.type.cat-1{background-color:#2266cc}
.type.cat-2{background-color:#999999}
.type.type-unknown{background-color:#68a090}
.type.type-0{background-color:#ada594}
.type.type-1{background-color:#a55239}
.type.type-2{background-color:#9cadf7}
.type.type-3{background-color:#b55aa5}
.type.type-4{background-color:#d6b55a}
.type.type-5{background-color:#bda55a}
.type.type-6{background-color:#adbd21}
.type.type-7{background-color:#6363b5}
.type.type-8{background-color:#adadc6}
.type.type-9{background-color:#f75231}
.type.type-10{background-color:#399cff}
.type.type-11{background-color:#7bce52}
.type.type-12{background-color:#ffc631}
.type.type-13{background-color:#ff73a5}
.type.type-14{background-color:#5acee7}
.type.type-15{background-color:#7b63e7}
.type.type-16{background-color:#735a4a}
.type.type-17{background-color:#f7b5f7}
#pokemon .type:first-child{border-top-left-radius:3px;border-bottom-left-radius:3px}
#pokemon .type:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}

.table-moves tr>td:first-child div{white-space:nowrap;}
.table-moves .type{display:inline-block;box-sizing:border-box;height:20px;text-align:center}
.table-moves .type>.sprite{vertical-align:bottom}
.table-moves .type:first-child{width:80px}
.table-moves .type:last-child{margin-left:1px;width:40px}

.weakness{
	background-color:#ddd;
	display:inline-block;
	width:32px;
	padding: 2px 2px;
	border-radius:3px;
}
.weakness.green{background-color:#5bbf23;color:white}
.weakness.orange{background-color:#ee4e4e;color:white}

#block-top{
	background-color:#e63636;
	margin:0 auto;
	position:relative;
	background-image:url(pokemon_top.png);
	background-size:cover;
	background-position:center;
	padding-top:12px;
	padding-bottom:14px;
}

#dex-img-container{
	text-align:center;
	/*white-space:nowrap;*/
	margin-bottom:10px;
}
#dex-img-container:before{
	display:inline-block;
	height:100%;
	vertical-align:middle;
}
#dex-types{display:block;margin-bottom:16px}
#tabs{
	/*background-color:rgba(0,0,0,.5);*/
	text-align:center;
	color:#ea7878;
	text-transform:uppercase;
	font-weight:700;
}
#tabs span{
	padding-bottom:3px;
	margin:0 15px;
	border-bottom:2px solid transparent;
}
#tabs span:hover{cursor:pointer; color:white;}
#tabs span.selected{
	color:white;
	border-color:white;
}

table{
	width:100%;
	border-collapse: collapse;
	font-size: inherit;
}
table tr{
	border-bottom: 1px solid #e4e4e4;
}
table tr:last-child{
	border-bottom: none;
}
table td{
	padding: 6px 0
}



#dex-damages td{text-align:center}
#dex-damages tr:nth-child(2)>td{vertical-align:top}
#dex-damages .type{
	width:96px;
	box-sizing:border-box;
	display:block;
	text-align:center;
	margin:2px auto 0;
	border-radius:3px;
}












.block{
	padding:12px; margin:0 auto;
	line-height:1.5;
	background-color:#f4f4f4
}
#tab-collection .block:last-child, #tab-competitive .block:last-child, #location-encounters{border-radius:0 0 3px 3px}

.block h2{
	position:-webkit-sticky;
	position:sticky;
	top: 0px;
	z-index:9000;
	margin:-12px -12px 10px; padding:2px 8px;
	color:#4b55b2;
	display:block;
	color:white;
	background-color:#979797;
	text-align:center;
	text-transform: uppercase;
	font-size: 95%;
	font-weight:700;
	
	background-image:url(pokemon_header.png);
	background-size:cover;
	background-position:center center;
}
.block.block-red h2{background-color:#e63636}
.block.block-blue h2{background-color:#5e66e1}
.block.block-green h2{background-color:#58ae54}



.block a{
	color:#316489;
	text-decoration:none;
}
.block.block-green a{color:#318937}
.block a:hover{
	color:black;
	text-decoration:underline;
}
.block img{vertical-align:middle}


.location-name a:after{display:block;content:""}

.games{
	display:inline-block;
	white-space: nowrap;
	margin:0 4px;
}
.games .game{
	height:8px;
	display:inline-block;
	vertical-align:middle;
	width: 10px;
	height: 10px;
	margin-right:2px;
	box-sizing:border-box;
	/*background-color:#deecf1;*/
	border-radius:20px;
}
.block-moreinfo .games{margin:0}
.block-moreinfo .games:first-child{margin-left:4px}
.block-moreinfo .game{
	width: 6px;
	height: 6px;
}
.block-moreinfo .game.game-not-available{
	/* background-color:#eafee8; */
	display:none
}
.rates{white-space: nowrap;}
.rates small{font-size:80%}


.games .game-rby0{background-color:#df522d}
.games .game-rby1{background-color:#1f97c4}
.games .game-rby2{background-color:#face0b}

.games .game-gsc0{background-color:#E1A40D}
.games .game-gsc1{background-color:#C5C5C5}
.games .game-gsc2{background-color:#65DBF5}

.games .game-rse0{background-color:#A00000}
.games .game-rse1{background-color:#0000A0}
.games .game-rse2{background-color:#00A000}

.games .game-frlg0{background-color:#EF7013}
.games .game-frlg1{background-color:#05BA54}

.games .game-dppt0{background-color:#AAAAFF}
.games .game-dppt1{background-color:#FFAAAA}
.games .game-dppt2{background-color:#999999}

.games .game-hgss0{background-color:#E1A40D}
.games .game-hgss1{background-color:#C5C5C5}

.games .game-bw0{background-color:#444444}
.games .game-bw1{background-color:white;border:1px solid black}

.games .game-b2w20{background-color:#444444}
.games .game-b2w21{background-color:white;border:1px solid black}


.games .game-oras0{background-color:#AB2813}
.games .game-oras1{background-color:#26649C}


.games .game-letsgo0{background-color:#f5da26}
.games .game-letsgo1{background-color:#d4924b}


.games .game-xy0, .games .game-xy1, .games .game-swsh0,.games .game-swsh1,.games .game-sm0,.games .game-sm1,.games .game-usum0,.games .game-usum1, .games .game-swsh2,.games .game-swsh3{
	background-image:url(sprites_v1b.png);
	background-size:90px 304px;
	background-repeat:no-repeat;
	border-radius:0px;
	
	height:20px;
}
.games .game-xy0{background-position:-0px -212px; width:22px}
.games .game-xy1{background-position:-22px -212px; width:20px}
.games .game-swsh0{background-position:-42px -212px; width:14px}
.games .game-swsh1{background-position:-56px -212px; width:16px}
.games .game-sm0{background-position:-0px -232px; width:20px}
.games .game-sm1{background-position:-20px -232px; width:16px}
.games .game-usum0{background-position:-36px -232px; width:20px}
.games .game-usum1{background-position:-56px -232px; width:18px}
.games .game-swsh2{background-position:-0px -252px; width:17px}
.games .game-swsh3{background-position:-17px -252px; width:18px}





#evoline{
	text-align:center
}
#evoline ul{
	list-style:none;
	padding:0px;
	margin:0px;
	/*border:1px dotted blue;*/
	display:inline-block;
	vertical-align:middle
}
#evoline li{
	padding:0px;
	margin:0px;
	/*border:1px dotted red;*/
}


.poke-icon{
	display:inline-block;
	transition: opacity .3s cubic-bezier(.4,0,.22,1);
	vertical-align:middle;
	image-rendering:crisp-edges;
	image-rendering:pixelated
}
.poke-icon.disabled{opacity:.5}
.poke-icon.clickable:hover{
	cursor:pointer;
	opacity:.8!important
}
.poke-icon.big{margin: -24px -12px 0;}













.locked-hidden-ability{text-decoration:line-through}



#extra-links tr>td:first-child{
	width:20px;
}

.table-moves tr{
	position:relative;
}
.table-moves tr>td:nth-child(1){
	text-align:right;
	width:30px;
}
.table-moves tr>td:nth-child(2){
	padding-left:10px
}
.table-moves tr>td:nth-child(3){
	text-align:right;
}
.table-moves tr>td:nth-child(4){
	position:absolute;
	right:0;
	background: linear-gradient(to right, transparent 0%,#f4f4f4 20px);
	padding-left:30px;
	opacity:0;
	transition:opacity .1s cubic-bezier(.4,0,.22,1);
}
.table-moves tr:hover>td:nth-child(4){
	opacity:1;
}

.table-encounters tr>td:nth-child(3),
.table-encounters tr>td:nth-child(5){
	text-align:right;
}




#location-icon{
	position: absolute;
	right: 20px;
	top: 50%;
	margin-top: -15px;
}
.location-link .sprite{
	position: absolute;
	right: 20px;
	top: 50%;
	margin-top: -15px;
}
#location-encounters .block{padding:6px 12px}
#location-encounters h2{margin-top:0px}
.grid-encounters>tr>td:nth-child(2){
	text-align:center
}
.grid-encounter{
	position:relative;
	display:inline-block;
	text-align:center;
	width:16.5%;
	height:90px;
}
.grid-encounter .poke-icon.big{margin:-8px 0 4px}
.grid-encounter>div:nth-child(2){
	font-size:80%
}


.breeditem{
	text-align:center;
	font-weight:700;
	font-size:90%
}









header{
	background-repeat: no-repeat;
	height:380px;
	background-size:540px auto, 1920px auto, auto auto;
	background-position:center 88px, center bottom, 0% 0%;
	background-image: url(header_gen1.png), url(header_common.png), linear-gradient(to bottom, #3a5369 0%,#273a4b 100%);
}
















/* RESPONSIVE DESIGN */
@media only screen and (max-width:641px){
	body{
		font-size:14px;
		margin:0 auto
	}
	.block{padding:12px 4px}
	#location-encounters .block{padding:0 4px}

	#table-encounters-container{
		overflow-x:auto;
	}

	.block h2{margin-left:-4px;margin-right:-4px;}

	.screen{
		margin: 0px auto;
		padding: 0 0 0;
		box-shadow:none;	
	}
	.screen-title{
		border-radius:0;
		margin-top:0;
	}
	#tab-collection .block:last-child, #tab-competitive .block:last-child, #location-encounters{border-radius:0}

	#dex-damages .type{
		width:68px;
		font-size:80%;
		padding-left:2px;
		padding-right:2px;
	}
	nav{
		margin-top:0px;
	}

	.sprite.encounter-condition{
		margin-left:-8px;
	}

	.grid-encounter{
		width:19.9%;
	}

	header{
		height:200px;
		background-size:264px auto, auto 80px, auto auto;
		background-position:center 72px, center 160px, 0% 0%;
	}
}