style.scss

/* VARIABLES */
$global-font-color:#000;

$color-attack:#ed6774;
$color-defense:#6696ed;
$color-hp:#0088a6;

$color-move-power:#a60087;
$color-move-energy:#0087a6;
$color-move-duration:#87a600;

$color-faint:#ff0000;
$color-shield:#df46e5;

$color-bug-dark:#9bc231;
$color-bug-light:#aec92c;
$color-dark-dark:#52505e;
$color-dark-light:#6e7681;
$color-dragon-dark:#1065b6;
$color-dragon-light:#067fc4;
$color-electric-dark:#f3d43e;
$color-electric-light:#fedf6b;
$color-fairy-dark:#eb8de1;
$color-fairy-light:#f6a7e8;
$color-fighting-dark:#ce3d64;
$color-fighting-light:#e34448;
$color-fire-dark:#fe9d59;
$color-fire-light:#feb04b;
$color-flying-dark:#91a8de;
$color-flying-light:#a7c1f2;
$color-ghost-dark:#5069ac;
$color-ghost-light:#7571d0;
$color-grass-dark:#5fbb50;
$color-grass-light:#59c079;
$color-ground-dark:#d87b40;
$color-ground-light:#d2976b;
$color-ice-dark:#74d3bd;
$color-ice-light:#94ddd6;
$color-normal-dark:#909aa3;
$color-normal-light:#a3a49e;
$color-poison-light:#a662c7;
$color-poison-dark:#c662d6;
$color-psychic-dark:#f2726f;
$color-psychic-light:#fda194;
$color-rock-dark:#c7b98c;
$color-rock-light:#d7cd90;
$color-steel-dark:#50879c;
$color-steel-light:#5aafb4;
$color-water-dark:#4f91db;
$color-water-light:#6ac7e9;

$color-ranking:#fff6d4;
$color-highlight:#222;

$color-links:#003748;
$color-blue-light:#004c66;
$color-blue-dark:#00171c;

$color-gold:#eabd49;
$color-gold-dark:#b99027;
$color-purple:#7f4da8;
$color-purple-dark:#3b1f52;

$color-off-white:#eee;
$color-off-black:#333;

$color-stat-buff:#f1841c;
$color-stat-debuff:#0158d0;


/* MIXINS */

@mixin transition($property, $duration, $ease, $delay){
    -webkit-transition: $property $duration $ease $delay;
    -moz-transition: $property $duration $ease $delay;
    -o-transition: $property $duration $ease $delay;
    transition: $property $duration $ease $delay;
}

@mixin transform($property){
	-moz-transform: $property;
	-webkit-transform: $property;
	-o-transform: $property;
	-ms-transform: $property;
	transform: $property;
}

@mixin gradient($light, $dark){
	background: $dark; /* Old browsers */
	background: -moz-linear-gradient(top, $light 30%, $dark 99%) !important; /* FF3.6-15 */
	background: -webkit-linear-gradient(top, $light 30%,$dark 99%) !important; /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, $light 30%,$dark 99%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

/* STRUCTURE */

html{
	height:100%;
}

body, html{
	margin: 0;
	font-family: Arial, sans-serif;
	color:$global-font-color;
}

body{
	background:#f3fbfe;
	background-size:cover;
	position:relative;
	min-height:100%;
}

.clear{
	clear:both;
}

.hide{
	display:none;
}

.mobile{
	display:none;
}

header{
	padding:5px;
	box-sizing:border-box;

	.header-wrap{
		max-width:800px;
		margin:0 auto;
	}

	.title{
		font-size: 18px;
		margin: 0;
		display: inline-block;
		font-weight: normal;

		a{
			background-image: url(../img/app_192.png);
			background-size: contain;
			text-decoration: none;
			color: #000;
			padding: 3px 0 3px 40px;
			background-repeat: no-repeat;
			display: block;
		}
	}

	.menu{
		padding:3px 0;
		float:right;

		a{
			display:block;
			float: left;
			margin-left:20px;
			color:$color-links;
			text-decoration: none;
			background-repeat: no-repeat;
			padding-left: 22px;
			background-size: contain;
			font-weight:bold;
		}
	}
}

footer{
	max-width:800px;
	position: relative;
	z-index: 10;
	text-align: center;
	font-size:12px;
	margin:0 auto;

	p:first-of-type{
		margin-top:0;
	}
}

#main{
	max-width:800px;
	margin: auto;
	padding:10px;
    border-radius: 12px;

	& > h1{
		margin:0;
	}
}

#main{
	position:relative;
	z-index: 10;
}

header{
	position:relative;
	z-index:25;
}

.background{
	position:fixed;
	bottom:0;
	width:100%;
}

.section{
	margin:10px 0;

	&.white{
		background: rgba(255,255,255,0.85);
		padding: 10px;
		border-radius: 8px;
	}

	&.error{
		display:none;
		text-align: center;
	}

	p:first-of-type{
		margin-top:0;
	}

	.toggle-content p:first-of-type{
		margin:1em 0;
	}

	p.description{
		margin:1em 0;
	}

	h2{
		font-size:18px;
	}
}

.section.about{
	text-align: left;

	p{
		margin:1em 0;
	}
}

.toggle-content{
	display:none;
}

.active + .toggle-content{
	display:block;
}

/* HOME PAGE STYLING */

.home{
	a.button{
		display:block;
		text-decoration: none;
		color:#000;
		border-radius:8px;
		margin:20px auto;
		padding:10px;
		box-sizing:border-box;
		max-width:400px;

		h2{
			margin:0;
			font-size:32px;
			padding-left:33px;
			background-repeat: no-repeat;
			background-position:0 center;
			color:$color-links;

			&.no-logo{
				padding-left:0;
			}
		}

		p{
			margin:0;
			font-size:14px;
		}
	}
}

.icon-battle{
	background-image:url('../img/icon_battle.png');
}

.icon-rankings{
	background-image:url('../img/icon_rankings.png');
}

.icon-team{
	background-image:url('../img/icon_team.png');
}

.icon-contribute{
	background-image:url('../img/icon_contribute.png');
}

.icon-articles{
	background-image:url('../img/icon_articles.png');
}

.icon-moves{
	background-image:url('../img/icon_moves.png');
}

.icon-twitter{
	background-image:url('../img/icon_twitter.png');
	min-height:18px;

	span{ display:none; }
}

.flex{
	display:flex;

	&.cols-3 > div{
		flex-basis:33%;
	}
}

/* POKEMON SELECT */

.poke{

	max-width:200px;

	&:first-of-type{
		float:left;
	}

	&:nth-of-type(2){
		float:right;

		.poke-stats{
			text-align: right;

			.stat-label{
				float:right !important;
			}

			.stat-container .bar-back{
				float:right;

				@include transform(scale(-1, 1));
			}
		}

		a.swap{
			display:none;
		}
	}

	input, select{
		display:block;
		margin:10px 0;
		max-width:200px;
		background: $color-off-white;
		border: 1px solid $color-off-black;

		&.poke-select{
			font-size:18px;
			font-weight:bold;
		}

		&.charged{
			font-weight:bold;
		}
	}

	.poke-stats{
		box-sizing:border-box;
		border-radius: 8px;
		padding: 5px;
		max-width:200px;
		background:rgba(255, 255, 255, 0.75);
		display:none;

		.stat-container {
			font-size:10px;

			color:$color-off-black;

			.stat-label{
				width:80px;
				float:left;

				.label-name{
					display:inline-block;
					width:35px;
				}

				.stat{
					display: inline-block;
					font-size:14px;
					font-weight: bold;

					&.buff{
						color:$color-stat-buff;
					}

					&.debuff{
						color:$color-stat-debuff;
					}
				}
			}

			&.overall .stat-label{
				width:auto;
				margin-top: 5px;
				border-top: 1px solid #666;
				padding-top: 5px;
			}

			.bar-back{
				width:100px;
				height:4px;
				border-radius:8px;
				float:left;

				.bar{
					width:100%;
					height:100%;
					border-radius:8px;
					margin-top:7px;
					background:rgba(0,0,0,0.6);

					@include transition(width, 150ms, cubic-bezier(0.47, 0, 0.745, 0.715), 0s);
				}
			}
		}

		.types {
			text-align: center;

			.type{
				display:inline-block;
				border-radius: 8px;
				padding: 2px 5px;
				margin: 0 2px;
				font-size:12px;
			}
		}

		.hp.bar-back{
			position:relative;
			border:3px solid #666;
			padding:2px;
			width:100%;
			height:30px;
			box-sizing:border-box;
			margin-top:20px;
			background: $color-blue-dark;

			.bar{
				width:100%;
				height:100%;
				background-color:$color-hp;

				@include transition(width, 0.2s, ease-out, 0s);
			}

			.stat{
				position:absolute;
				width:100%;
				left:0;
				top:4px;
				text-align:center;
				color:#fff;
				font-weight:bold;
			}
		}

		h3{
			margin:0;
			font-weight:normal;

			&.cp{
				text-align:center;
			}

			&.section-title{
				font-size: 14px;
				font-weight: bold;
				color: $color-off-black;
				margin-top: 20px;
			}
		}


		a{
			font-size:14px;
			text-decoration:none;
			color:$color-links;
			display:block;
			margin:5px 0;

			&.clear-selection{
				margin-top:10px;
			}
		}

		.advanced-section{

			.fields{
				display:none;
				
				.ivs input{
					display:inline;
					width:25%;
					max-width:66px;
					background:none;
					border:none;
					border-bottom:1px solid #888;
					border-radius:0px;
					height: 22px;
					-moz-appearance:textfield; /* Firefox */
					
					&::-webkit-outer-spin-button,
					&::-webkit-inner-spin-button {
						/* display: none; <- Crashes Chrome on hover */
						-webkit-appearance: none;
						margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
					}
					
					&:focus{
						outline: none;
						border-bottom: 3px solid $color-gold;
					}
				}
				
				.ivs-group{
					width:75%;
					float:right;
					text-align:right;
					height:42px;
				}

				.stat-modifiers input{
					float:left;
					width:50%;
				}

				.ivs h3,
				.stat-modifiers h3{
					font-size: 14px;
					text-align: center;
					font-weight: bold;
				}
			}

			.maximize-section{
				border: 1px solid #888;
			    border-radius: 8px;
			    padding: 5px;
				margin-bottom:15px;
				clear:both;

				.check{
					display: inline-block;
				    font-size: 12px;
				    margin-right: 5px;
				    margin-bottom: 5px;
					margin-top:0;
				}
				

				.maximize-stats{
					font-size:12px;
					margin-top:5px;
				}
				
				.restore-default{
					font-size:12px;
				}
			}

			&.active{

				.fields{
					display:block;
				}
			}
		}

		.move-select.fast{
			margin-top:5px;
		}

	}

	.legacy{
		font-size:12px;
		margin-top:10px;
	}

	.options{
		margin: 20px 0;

		.start-hp,
		.start-energy{
			margin:5px 0;
			max-width:129px;
		}

		.flex{
			justify-content: space-between;
		}

		.shield-baiting,
		.priority,
		.negate-fast-moves{
			text-align: left;
			font-size:14px;
		}

		.pull-from-timeline{
			margin-bottom:15px;
		}

		.label{
			margin:5px 5px 5px 0;
		}
	}

	a.random,
	a.swap{
		font-size: 10px;
		text-decoration: none;
		color: #003748;
		padding: 3px 3px 3px 16px;
		background: rgba(255,255,255,.75);
		display: inline-block;
		background-image:url('../img/random.png');
		background-repeat: no-repeat;
		background-position: 3px center;
		border-radius:8px;
		margin-bottom:10px;
	}

	a.swap{
		padding-left:18px;
		background-image:url('../img/swap.png');
	}

	.move-bars{
		display:flex;
		justify-content: space-around;

		.move-bar{
			width: 40px;
			height: 40px;
			border-radius: 40px;
			position: relative;
			overflow: hidden;
			border: 2px solid rgba(0,0,0,0);
			box-sizing: border-box;
			color:$color-off-white;
			margin-top:5px;
			display:none;
			cursor:pointer;

			@include transition(border, 0.2s, ease-out, 0s);

			&.active{
				border:2px solid rgba(0,0,0,1);
			}

			.label{
				position: relative;
				z-index: 10;
				text-align: center;
				padding-top: 10px;
				font-weight: bold;
			}

			.bar, .bar-back{
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			.bar{
				@include transition(height, 0.2s, ease-out, 0s);
			}

			.bar-back{
				opacity:.3;
			}
		}
	}

	.move-details{
		font-size:12px;
		min-height:15px;
		text-align: left;

		.move-stat{

			color:$color-off-black;

			.stat{
				width: 15px;
				height: 14px;
				background: #999;
				display: inline-block;
				border-radius: 15px;
				text-align: center;
				padding-top: 1px;
				color:$color-off-white;
				font-weight:bold;
				background:$color-off-black;
			}
		}
	}

	&.multi{
		display:none;
		float:right;

		.poke-stats{
			display:block;
		}

		.cup-select{
			margin-top:62px;
			width:100%;

			option[value="custom"]{
				display:block;
			}
		}

		.custom-options{
			display:none;

			.add-poke-btn{
				font-size: 14px;
				width: 100%;
				margin-bottom: 0;
			}

			.export-btn{
				margin-top:15px;
			}
		}

		.rankings-container{

			max-height:295px;

			.rank{
				padding: 0 5px;
				position:relative;

				&:hover{
					border-left:none;
					box-shadow:0px 2px;
				}

				.name-container{
					float:none;
				}

				.moves{
					margin-left:0;
				}

				.remove{

					position:absolute;
					top:2px;
					right: 5px;
					font-weight: bold;
					background:$color-off-black;
					color:$color-off-white;
					border-radius: 4px;
					padding: 0 4px;
					font-size: 12px;

					&:after{
						content:"x";
					}

					&:hover{
						background:#ff0000;
					}
				}
			}
		}

		.quick-fill-buttons{
			justify-content: space-around;
		}
	}

}

.poke-select-container{
	&.single{

		.poke:nth-of-type(1){
			a.random{
				float:left;
			}
			a.swap{
				float:right;
			}
		}

		.poke:nth-of-type(2){
			display: block;

			a.random{
				float:right;
			}

			a.swap{
				float:left;
			}
		}
		.poke:nth-of-type(3){
			display: none;
		}
	}

	&.multi{
		.poke:nth-of-type(2),
		.hp.bar-back,
		.move-bars{
			display: none;
		}
		.poke:nth-of-type(3){
			display: block;
		}
	}
}

.arrow-up{
	display: none;
}

.active{
	.arrow-up{
		display:inline;
	}

	.arrow-down{
		display:none;
	}
}

/* GENERAL FORM STYLING */

select, input{
	border-radius:4px;
	padding:3px 8px;
	box-sizing:border-box;
	width:100%;
}

.league-select,
.cup-select,
.mode-select{
    font-size: 18px;
    width: auto;
    background: none;
    font-weight: bold;
}

.cup-select option[value="custom"]{
	display:none;
}

.button{
	display:block;
	font-size:18px;
	margin:10px auto;
    border-radius: 8px;
    border: 2px solid #000;
    padding: 10px;
    cursor: pointer;
	text-decoration: none;
	color:#000;

	@include gradient($color-gold, $color-gold-dark);

	&.update-btn{
		display:none;
	}
}

.share-link-container{

	text-align: center;
	margin-top:20px;

	p{
		margin:0;
	}
}

.share-link,
.rank .details .share-link.detail-section{
	display: inline-block;
	background: $color-blue-light;
	background-image:url('../img/link.png');
	background-repeat: no-repeat;
	background-position: 6px center;
	background-size: 20px;
	padding: 5px 5px 5px 35px;
	border-radius: 8px;
	margin:5px auto;


	input{
		width: auto;
		display: inline-block;
		border: none;
		background: $color-blue-dark;
		color: $color-off-white;
		padding: 5px;
	}

	.copy{
		display: inline-block;
		font-weight: bold;
		font-size:13px;
		cursor: pointer;
		color: $color-off-white;
		margin: 5px;
		border-radius: 8px;
	}
}

.continue-container{
	margin:15px auto;

	p{
		margin:0;
	}

	.name{
		font-weight:bold;
	}

	.button{
		display:inline-block;
		margin:5px auto;
	}
}


.check{
	margin-top:10px;
	cursor: pointer;

	span{
		display: block;
		width: 17px;
		height: 17px;
		border-radius: 8px;
		background: $color-off-black;
		border: 2px solid $color-off-black;
		box-sizing:border-box;
		margin: 0px 5px 0 0;
		float: left;
	}

	&.on{
		span{
			@include gradient($color-gold, $color-gold-dark);
		}
	}

	&:hover:not(.on){
		span{
			background:#555;
		}
	}
}


/* BATTLE TIMELINE */

.battle-results{
	display:none;
	text-align: center;

	.timeline-container{
		max-width:95%;
		margin: 0 auto;
		background: rgba(255, 255, 255, 0.5);
		height: 80px;
		border-radius:8px;
		border:1px solid #000;
		position:relative;
		overflow:hidden;

		.tracker{
			position:absolute;
			width:1px;
			height:100%;
			border-left:1px solid #000;
			top:0;
		}

		&.sandbox-mode{
			background-color: rgba(255, 240, 200, 0.75);
			border: 1px solid $color-gold;

			.item.charged:hover,
			.item.interaction:hover,
			.item.fast:not(.disabled):hover{
				@include gradient($color-gold, $color-gold-dark);
				border-color:$color-gold-dark;
			}

			.item.disabled{
				opacity: 0.5;

				&:hover{
					cursor:initial;
				}
			}

			.item.interaction{
				display: block !important;
				border:2px solid #000;
				cursor:pointer;

				&.disabled{
					cursor:pointer;
					border:2px solid #666;
				}

				&.both{
					border: 3px solid #000;
				}

				&.wait{
					border-style:dotted;
				}
			}
		}

		&.zoom{
			height:90px;
			overflow-x:scroll;
		}
	}

	.sandbox-btn-container{
		max-width:95%;
		margin: 0 auto;

		.sandbox-btn{
			@include transition(background, 0.25s, 0s, ease-out);


			position: relative;
			background:#888;
			color:$color-off-white;
			border-radius: 12px;
			font-size:17px;
			line-height:16px;
			text-decoration: none;
			cursor: pointer;
			padding: 1px 8px;
			margin-bottom:5px;
			float:right;
			overflow:hidden;

		  -webkit-touch-callout: none; /* iOS Safari */
			-webkit-user-select: none; /* Safari */
			 -khtml-user-select: none; /* Konqueror HTML */
			   -moz-user-select: none; /* Firefox */
				-ms-user-select: none; /* Internet Explorer/Edge */
					user-select: none; /* Non-prefixed version, currently
										  supported by Chrome and Opera */

			span{
				position: relative;
				z-index:5;
			}

			&.active{
				color:$color-off-black;
				background:$color-gold;

				.btn-background{
					left:0;
				}
			}
		}

		.sandbox{
			width:19px;
			height:19px;
			border-radius:12px;
			background:$color-gold;
			float:right;
			margin: 0 10px;
			cursor:pointer;

			@include transform(scale(0, 0));
			@include transition(transform, 0.3s, cubic-bezier(0.64, 0.57, 0.67, 1.53), 0s);

			&.active{
				@include transform(scale(1, 1));
			}
		}

		.clear-btn:after{
			content:"\021BB";
		}
	}

	.playback{
		max-width: 300px;
    	margin: 10px auto;
		padding: 2px 10px;

		.flex{
			display:flex;
			justify-content: space-between;
		}

		.playback-btn{
			width:16px;
			height:19px;
			background-position: center center;
			background-repeat:no-repeat;

			&.play{
				background-image:url('../img/playback_play.png');
			}

			&.play.active{
				background-image:url('../img/playback_pause.png');
			}

			&.replay{
				background-image:url('../img/playback_replay.png');
			}
		}

		.playback-speed,
		.playback-scale{
			padding: 0;
			background: none;
			border-radius: 8px;
			width: 85px;
		}

		.disclaimer{
			display:none;
			font-size: 12px;
			margin-top:10px;
		}
	}

	.summary{
		display:inline-block;
		margin:15px auto;
		font-size:18px;
		line-height: 26px;

		span.time,
		span.name{
			padding:0;
		}

		.disclaimer{
			margin:15px 0;
			font-size:14px;
		}

		p{
			font-size:14px;
		}
	}

	.tip{
		text-align:center;
	}

	.battle-details{
		text-align: left;

		table{
			margin: 10px auto 0 auto;
			text-align: center;

			.name{
				font-size:14px;
				font-weight: bold;
			}

			.rating.star{
				display: block;
				background-image:url('../img/starburst_red.png');
				text-decoration: none;

				&.win{
					background-image:url('../img/starburst.png');
				}
			}
		}
		
		.breakpoints-section{
			max-width:340px;
			margin: 0 auto;
			
			.bold{
				font-weight:bold;
			}
			
			.ivs .button{
				font-size:14px;
				margin:0;
				padding: 5px;
				border: none;
				background:$color-off-black !important;
				color:$color-off-white;
			}
			
			.golden-combination .button{
				display:inline-block;
				font-size:14px;
				padding: 5px 15px;
				margin:0;
				font-weight:bold;
				border: none;
				background:$color-off-black !important;
				color:$color-off-white;
			}
		}
	}

	&.multi{
		text-align: left;

		.poke-search{
			margin-top:15px;
		}

		.button{
			display:inline-block;
		}

		.rankings-container{
			.rank:hover{
				border-left:none;
				cursor:initial;
			}
		}
	}
}

.rating-table{

	text-align: center;

	tr{
		background:none;
	}

	.shield{
		display:inline-block;
		width:17px;
		height:16px;
		background-size:contain;
		background-image:url('../img/shield.png');

		&.shield-none{
			background-image:url('../img/shield_none.png');
		}

		&.shield-double{
			width:36px;
		}
	}
}

.timeline{
	border-top:1px dashed #000;
	position:relative;
	width:100%;
	margin: 25px 0 30px 0;
	top:0;
	left:0;

	&:nth-of-type(2){
		margin: 35px 0 25px 0;
	}

	.item-container{
		position:absolute;
		top:0;


		.item{
			display:block;
			cursor:pointer;
			position:relative;
			left:-50%;
			z-index:10;
			text-decoration:none;

			@include transform(scale(0, 0));
			@include transition(transform, 0.3s, cubic-bezier(0.64, 0.57, 0.67, 1.53), 0s);

			&.fast{
				width:7px;
				height:8px;
				top:-5px;
				border:1px solid #000;
				z-index:10;
			}

			&.charged{
				width:20px;
				height:20px;
				border-radius:20px;
				top:-12px;
				border:2px solid #000;
				z-index: 10;
			}

			&.shield{
				width:22px;
				height:20px;
				top:-10px;
				background:url('../img/shield.png');
				z-index: 10;
			}

			&.faint{
				color:$color-faint;
				font-size:20px;
				top: -11px;
				font-weight: bold;
			}

			&.faint::after{
				content:"X";
			}

			&.tap{
				width:6px;
				height:2px;
				top:-2px;
				background:#000;
				cursor:initial;
				border:2px solid #000;
				border-radius:12px;
				background:none !important;

				&.interaction{
					display:none;
				}
			}

			&.buff{
				background-image:url('../img/move_buff.png') !important;
				background-position: center -50% !important;
				background-repeat: no-repeat !important;

				-webkit-animation: BUFF-ANIMATION 1.5s infinite; /* Safari 4+ */
				-moz-animation:    BUFF-ANIMATION 1.5s infinite; /* Fx 5+ */
				-o-animation:      BUFF-ANIMATION 1.5s infinite; /* Opera 12+ */
				animation:         BUFF-ANIMATION 1.5s infinite; /* IE 10+, Fx 29+ */
				animation-timing-function: linear;
			}

			&.debuff{
				background-image:url('../img/move_debuff.png') !important;
				background-position: center 150% !important;
				background-repeat: no-repeat !important;

				-webkit-animation: DEBUFF-ANIMATION 1.5s infinite; /* Safari 4+ */
				-moz-animation:    DEBUFF-ANIMATION 1.5s infinite; /* Fx 5+ */
				-o-animation:      DEBUFF-ANIMATION 1.5s infinite; /* Opera 12+ */
				animation:         DEBUFF-ANIMATION 1.5s infinite; /* IE 10+, Fx 29+ */
				animation-timing-function: linear;
			}

			&.active{
				@include transform(scale(1, 1));
			}

		}
	}
}

.sandbox{
	display:none;
}

.stats-table{
	.label{
		max-width:85px;
		text-align: left;
		font-weight: bold;
		font-size:12px;

		span:after{
			font-size:14px;
			content:"\025B4";
			visibility: hidden;
		}

		&.asc span:after{
			visibility: visible;
			content:"\025B4";
		}

		&.desc span:after{
			visibility: visible;
			content:"\025BE";
		}
	}

	tr:nth-child(2n){
		background: rgba(0,0,0,.15);
	}

	td{
		padding:5px;
	}

	span.type{
		display:block;
		border-radius:8px;
		padding:2px 4px;
		text-align: center;

		&.dark,
		&.dragon{
			color:$color-off-white;
		}
	}

	&.sortable-table{

		.label{
			cursor:pointer;

			-webkit-touch-callout: none; /* iOS Safari */
			-webkit-user-select: none; /* Safari */
			-khtml-user-select: none; /* Konqueror HTML */
			-moz-user-select: none; /* Firefox */
			-ms-user-select: none; /* Internet Explorer/Edge */
				user-select: none; /* Non-prefixed version, currently
									  supported by Chrome and Opera */
		}
	}
}

/* Buff and debuff background animations */

@-webkit-keyframes BUFF-ANIMATION {
  0%   { background-position: center -50%; }
  100% { background-position: center 150%; }
}
@-moz-keyframes BUFF-ANIMATION {
  0%   { background-position: center -50%; }
  100% { background-position: center 150%; }
}
@-o-keyframes BUFF-ANIMATION {
  0%   { background-position: center -50%; }
  100% { background-position: center 150%; }
}
@keyframes BUFF-ANIMATION {
  0%   { background-position: center -50%; }
  100% { background-position: center 150%; }
}


@-webkit-keyframes DEBUFF-ANIMATION {
  0%   { background-position: center 150%; }
  100% { background-position: center -50%; }
}
@-moz-keyframes DEBUFF-ANIMATION {
  0%   { background-position: center 150%; }
  100% { background-position: center -50%; }
}
@-o-keyframes DEBUFF-ANIMATION {
  0%   { background-position: center 150%; }
  100% { background-position: center -50%; }
}
@keyframes DEBUFF-ANIMATION {
  0%   { background-position: center 150%; }
  100% { background-position: center -50%; }
}


.tooltip{
	position:absolute;
	border-radius:8px;
	padding:5px;
	width:100px;
	text-align: left;
	z-index:20;
	pointer-events: none;

	&.faint{
		background:$color-faint;
	}

	&.shield{
		background:$color-shield;
	}

	&.tap{
		background:#eee;
	}

	h3{
		margin:0;
		font-size:14px;
	}
}

/* RANKING STYLING */

.ranking-header {
	width:50%;
	float:left;
	font-weight: bold;
	padding:5px 10px;
	box-sizing:border-box;

	&.right{
		text-align: right;
	}
}

.rankings-container {

	margin-top:20px;
	max-height:400px;
	overflow-y:scroll;

	&.threats,
	&.alternatives{
		overflow-y:initial;
	}

	& > .rank:hover, > .rank.selected{
		border-left:10px solid $color-highlight;
	}
}

.rank{
	padding:5px 10px;
	border-radius:8px;
	margin-bottom:5px;

	&.hide{
		display:none !important;
	}

	.name-container{
		float:left;
		padding:5px 0;
	}

	.number{
		padding-right:10px;
	}
	.name{
		font-weight:bold;
	}

	.rating-container{
		.rating{
			float:right;
			color:$color-ranking;
			background-color: rgba(0,0,0,.6);
			border-radius: 8px;
			text-align: right;
		}

		a{
			display:inline-block;
			width:32px;
			height:28px;
			background-image:url('../img/eye.png');
			background-repeat: no-repeat;
			background-position: 0 center;
			margin-right:10px;
			float:right;
			opacity: .5;
		}
	}


	.moves{
		display:flex;
		font-size:12px;

		.move{
			width: 16px;
			height: 16px;
			border: 1px solid #000;
			border-radius: 12px;
			padding: 3px;
			line-height: 16px;
			text-align: center;
			margin-right:5px;

			&:first-of-type{
				border:none;
			}
		}
	}

	.moveset{
		.rating{
			background: rgba(0,0,0,.7);
			padding:5px;
		}
	}

	.details{
		display:none;
		cursor:initial;

		&.active{
			display:flex;
			flex-wrap:wrap;
		}

		.detail-section{
			background:rgba(255,255,255,0.8);
			padding:5px;
			border-radius:8px;
			box-sizing: border-box;
			margin-top:5px;

			&.float{
				width: 49.5%;

				&.margin{
					margin-right:1%;
				}
			}

			&.overall{
				width: 100%;
				display: flex;
				justify-content: space-around;

				.rating-container{
					text-align:center;

					.ranking-header{
						float:none;
					}

					.rating{
						padding: 5px;
						display: inline-block;
						float: none;
						text-align: center;
						margin: 0 auto;
						font-weight:bold;
						background-color: rgba(0,0,0,.65);
					}
				}
			}

			.move{
				display:inline-block;
				padding:5px;
				margin-right:5px;
				border-radius:8px;

				&.charged{
					font-weight:bold;
				}
			}

			.rating-container .rating{
				background-color: rgba(0,0,0,.35);
			}
		}

		.multi-battle-link{
			width:100%;
			margin:10px 0;
			text-align: center;

			p{
				margin: 0;
			}

			a.button{
				font-size:16px;
				display:inline-block;
				margin: 0;
			}
		}

		h2{ margin: 0 0 5px 0; }
	}
}

.rankings-container > .rank,
.rankings-container > .rank > .rating-container{
	cursor: pointer;
}

.rating.star,
.rankings-container > .rank > .rating-container > .rating.star{
	background-image:url('../img/starburst.png');
	background-size:contain;
	background-repeat:no-repeat;
	color:$color-ranking;
	background-color: rgba(0,0,0,.6);
	border-radius: 8px;
	padding: 5px 5px 5px 36px;
	font-weight: bold;
	width:auto;
	text-decoration: none;
}

.rankings-container > .rank > .rating-container > .rating{
	background-image:none;
	padding:5px;
	width:42px;
	text-align: center;
	font-weight: bold;
}

.ranking-categories{
	float:right;

	a{
		text-decoration: none;
		color:$color-off-black;
		padding:10px;
		border-radius:8px;
		display:inline-block;

		&.selected{
			background:#fff;
			font-weight:bold;
		}
	}
}

.poke-search{
	max-width:200px;
	display:block;
}

.options{
	margin: 40px 0 20px 0;
}

.check.limited{
	.limited-title{
		display: inline;
	}
}

.limited-title{
	color:$color-gold;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    font-weight: bold;
}

.rankings-container .limited-rank{
	@include gradient($color-gold, $color-gold-dark);

	.name-container{
		color:#000;
	}
}

.asterisk{
	font-size:12px;
	margin-bottom:15px;
}

/* TEAM BUILD STYLING */

.team-build{

	display:flex;
	justify-content: space-between;

	.poke{

		a.random{
			margin-bottom: 0;
		}

		a.swap{
			display:none;
		}

		&:nth-of-type(2){

			.poke-stats{
				text-align: left;

				.stat-label{
					float:left !important;
				}

				.bar-back{
					@include transform(scale(1, 1));
				}

				.hp.bar-back .stat{
					@include transform(scale(1, 1));
				}
			}
		}

		.options, .bar-back, .move-bars{
			display:none;
		}
	}
}

.typings{
	display:none;

	a.toggle{
		font-size:1.17em;
		font-weight:bold;
		margin:1em 0;

		&:first-of-type{
			margin-top:0;
		}
	}

	.defense,
	.offense{
		overflow-x:scroll;

		table{
			td{
				padding:5px 10px;

				&.heading{
					font-weight:bold;
				}

				&.name{
					display:block;
					width:120px;
				}
			}
		}
	}
}

.summary{
	li{
		line-height:24px;
		margin-bottom:10px;
	}
}

.summary span,
.article span.type{
	padding: 2px 5px;
	border-radius: 8px;
	font-weight: bold;
}

.article span.type{
	font-weight:normal;
}

.typeRating{
	border:2px solid #000;
	border-radius:8px;
	text-align: center;
    margin: 5px;
    overflow: hidden;

	h4{
		margin:0;
		padding:2px 10px;
	}
}

.threats.rankings-container,
.alternatives.rankings-container{
	.rank{
		cursor:initial;

		&:hover{
			border-left:none;
		}
	}
}

.histograms{
    display: flex;
    justify-content: space-around;

	.histogram{
		position:relative;
		width:31%;
		text-align: center;
		padding-left:20px;
		box-sizing:border-box;

		.chart{
			height:200px;
			border:1px solid $color-blue-dark;
			background: rgba(255,255,255,.6);
			overflow: hidden;

			.segment{
				float:left;
				position:relative;
				height:100%;
				box-sizing:border-box;

				&:nth-of-type(10){
					border-right: 1px dashed rgba(0, 0, 0, .5);
				}

				.bar{
					position: absolute;
					bottom:0;
					width:100%;

					@include transition(height, 0.3s, ease-out, 0s);
				}
			}
		}

		h2{
			font-size:18px;
		}

		.move-label{
			font-size:12px;
		}

		.star.rating{
			font-size: 14px;
    		display: inline-block;
		}

		.x-axis{
			display: flex;
			justify-content: space-between;

			div{
				font-size:12px;
				width:27px;

				&:first-of-type{
					text-align:left;
				}
			}
		}

		.button{
			font-size: 12px;
			border: 1px solid #000;
			padding: 5px;
			display: none;
		}

		.label-x-axis{
			position:absolute;
			left:-20px;
			top:50%;

			@include transform(rotate(270deg));
		}

		.stats{
			text-align: left;
			margin: 10px 0;
			display:flex;
			font-size:12px;
		}

	}
}

/* ARTICLE */

.article{

	p:first-of-type{
		margin-top:1em;
	}

	p{
		line-height:26px;
	}

	.article-section{

		h3{
			font-weight:normal;
		}
	}

	h2{
		font-size: 22px;
		margin-bottom: 10px;
	}

	h3.article-header,
	.tip{
		background: rgba(0,0,0,.5);
		padding: 10px;
		border-radius: 8px;
		color:$color-off-white;
	}

	table{
		border:none;
		margin:0 auto;

		td{
			padding:5px;
			vertical-align: top;

			&.buff{
				color:$color-stat-buff;
			}
		}

		tr:nth-of-type(2n){
			background:rgba(0,0,0,.1);
		}
	}

	.rating-table{

		td{
			padding: 1px;
		}

		a{
			display:block;
			padding:5px 12px;
			border-radius:8px;
			text-decoration: none;

			span{
				display:block;
				margin:0 auto;
				width:18px;
				height:18px;
			}

			&.win{
				background-color: rgb(1, 141, 186);

				span{
					border-radius:20px;
					background:#fff6d4;
				}
			}

			&.close-win{
				background-color: rgba(63, 94, 172, 1);

				span{
					border-radius:20px;
					border:2px solid #fff6d4;
					box-sizing:border-box;
				}
			}

			&.close-loss{
				background-color: rgba(114, 54, 159, 1);

				span{
					color:#ffacdb;

					&:after{
						content:"x";
					}
				}
			}

			/*
			*	|	||
			*	||	|_
			*/

			&.loss{
				background-color: rgb(185, 0, 143);

				span{
					color:#ff6abe;
					font-size:18px;
					font-weight:bold;

					&:after{
						content:"X";
					}
				}
			}

			&.tie{
				background-color: rgb(93, 71, 165);

				span{
					color:#fff6d4;

					&:after{
						content:"-";
					}
				}
			}
		}

		td.name{
			vertical-align: middle;
			text-align: left;
			padding-right:10px;
		}

		&.legend{
			margin:0;
			text-align: left;

			td{
				padding:5px;
			}

			a.rating{
				text-align: center;
			}
		}
	}
}

.article-item{
	.col-9{
		padding: 0 10px;
	}

	img{
		display:block;
		border:1px solid #000;
	}

	h4{
		margin-top:0;
	}
}

.article, .article-item{

	.date{
		margin-bottom:1em;
		font-size:14px;
	}

	h1:first-of-type,
	h4:first-of-type{
		margin:0;
	}

	img{
		display:block;
		max-width:100%;
		border:1px solid #000;
	}

}


/* CONTRIBUTORS */

.contribute{

	h2{
		font-size:20px;
	}

	.supporters{
		justify-content: center;
		flex-wrap:wrap;

		.supporter-container{

			margin-bottom:15px;

			img{
				display:block;
				max-height:85px;
				margin: 0 auto;
			}

			.space{
				width:85px;
				height:85px;
			}

		}

		.supporter{
			background:#fff;
			border-radius:8px;
			padding:10px;
			margin:5px;
		}
	}
}

/* MOVES PAGE */

.move-table-container{
	max-width: 400px;
	margin: 0 auto;

	.poke-search{
		margin-top:15px;
	}
}

.move-explore-container{
	max-width:500px;
	margin:0 auto;

	.move-select-container{
		justify-content: space-between;

		.move-select-item{
			max-width:180px;
		}

		.poke-search{
			margin-bottom:5px;
		}

		.check{
			font-size:14px;
		}

		h3{
			font-size:14px;
		}
	}

	.moveset-stats{
		flex-wrap:wrap;
		justify-content: center;
		text-align: center;

		.stat{
			margin:10px 15px;

			h3{
				margin-top:0;
				font-size:14px;
			}
		}
	}

	.explore-results{

		margin-top:30px;

		h2{
			margin-top:30px;
		}

		h2 + div{
			font-size:14px;
		}

		.rankings-container{
			margin-top:10px;
		}

		a.rank{
			display:block;
			text-decoration: none;
			color:#000;

			&:hover{
				border-left:none;
			}

			.name-container{
				pointer-events: none;
				float: none;
			}
		}
	}
}

.moves{
	p:first-of-type{
		margin-top:1em;
	}
}

/* MODAL WINDOW */

.modal{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,.5);
	z-index:20;
	padding:10px;
	box-sizing:border-box;

	.modal-container{
		position:relative;
		background: rgba(255, 255, 255, 0.96);
		margin: 0 auto;
		max-width: 400px;
		vertical-align: middle;
		margin-top: 50px;
		border-radius: 8px;
		overflow:hidden;

		.modal-header{
			padding:10px;
			background:$color-gold;
			font-size:24px;
			font-weight: bold;
		}

		.modal-close{

			position: absolute;
			top:0;
			right:0;
			padding:10px;
			cursor:pointer;

			&:after{
				content:"X";
			}
		}

		.modal-content{
			padding:10px;
		}

		.poke.single{
			float:none;
			margin:0 auto;
			max-width:200px;

			.poke-stats{
				background:none;
			}

			.clear-selection,
			.hp.bar-back,
			.move-bars,
			.random,
			.swap,
			.stat-container,
			.auto-select,
			.options{
				display:none;
			}
		}

		.poke-search{
			margin-bottom:5px;
		}

		.move-select{
			max-width:200px;
		}
	}

	.sandbox-move-select{
		.move-select{
			font-size:18px;
			margin-bottom:10px;
		}

		.move-stats{
			flex-wrap:wrap;
			justify-content: space-around;
			text-align:center;

			&> div{
				padding:10px;

			}

			span.stat{
				display:block;
				font-weight:bold;
			}
		}
	}

	.list-export{

		.list-text{
			width:100%;
			height:200px;
		}

		.copy{
			display:inline-block;
			cursor: pointer;
			font-weight:bold;
			background:$color-blue-light;
			color:$color-off-white;
			padding:5px;
			border-radius:8px;
			margin:5px 0;
		}
	}

	.save-list{
		input{
			font-size:18px;
		}
	}


	.button{
		margin:25px auto 0 auto;
		display:inline-block;
	}

}


/* TEXTS & FONTS */

h1.title{
	font-size:18px;
	margin:0;
}

h2{
	font-size:14px;
	margin-bottom:0;
}

a.toggle{
	color:$color-blue-dark;
	text-decoration: none;
	font-weight:bold;
	display: block;
}

.center{
	text-align: center;
}

/* TYPE COLORS */

.bug{ @include gradient($color-bug-dark, $color-bug-light); }
.dark{ @include gradient($color-dark-dark, $color-dark-light); }
.dragon{ @include gradient($color-dragon-dark, $color-dragon-light); }
.electric{ @include gradient($color-electric-dark, $color-electric-light); }
.fairy{ @include gradient($color-fairy-dark, $color-fairy-light); }
.fighting{ @include gradient($color-fighting-dark, $color-fighting-light); }
.fire{ @include gradient($color-fire-dark, $color-fire-light); }
.flying{ @include gradient($color-flying-dark, $color-flying-light); }
.ghost{ @include gradient($color-ghost-dark, $color-ghost-light); }
.grass{ @include gradient($color-grass-dark, $color-grass-light); }
.ground{ @include gradient($color-ground-dark, $color-ground-light); }
.ice{ @include gradient($color-ice-dark, $color-ice-light); }
.normal{ @include gradient($color-normal-dark, $color-normal-light); }
.poison{ @include gradient($color-poison-dark, $color-poison-light); }
.psychic{ @include gradient($color-psychic-dark, $color-psychic-light); }
.rock{ @include gradient($color-rock-dark, $color-rock-light); }
.steel{ @include gradient($color-steel-dark, $color-steel-light); }
.water{ @include gradient($color-water-dark, $color-water-light); }

.dark, .dragon, .ghost {
	> .name-container{
		color:$color-off-white;
	}

}

.buff, .debuff{
	&.bug{ background-color:$color-bug-dark !important; }
	&.dark{ background-color:$color-dark-dark !important; }
	&.dragon{ background-color:$color-dragon-dark !important; }
	&.electric{ background-color:$color-electric-dark !important; }
	&.fairy{ background-color:$color-fairy-dark !important; }
	&.fighting{ background-color:$color-fighting-dark !important; }
	&.fire{ background-color:$color-fire-dark !important; }
	&.flying{ background-color:$color-flying-dark !important; }
	&.ghost{ background-color:$color-ghost-dark !important; }
	&.grass{ background-color:$color-grass-dark !important; }
	&.ground{ background-color:$color-ground-dark !important; }
	&.ice{ background-color:$color-ice-dark !important; }
	&.normal{ background-color:$color-normal-dark !important; }
	&.poison{ background-color:$color-poison-dark !important; }
	&.psychic{ background-color:$color-psychic-dark !important; }
	&.rock{ background-color:$color-rock-dark !important; }
	&.steel{ background-color:$color-steel-dark !important; }
	&.water{ background-color:$color-water-dark !important; }

}

.tap{
	&.bug{ border-color:$color-bug-dark !important; }
	&.dark{ border-color:$color-dark-dark !important; }
	&.dragon{ border-color:$color-dragon-dark !important; }
	&.electric{ border-color:$color-electric-dark !important; }
	&.fairy{ border-color:$color-fairy-dark !important; }
	&.fighting{ border-color:$color-fighting-dark !important; }
	&.fire{ border-color:$color-fire-dark !important; }
	&.flying{ border-color:$color-flying-dark !important; }
	&.ghost{ border-color:$color-ghost-dark !important; }
	&.grass{ border-color:$color-grass-dark !important; }
	&.ground{ border-color:$color-ground-dark !important; }
	&.ice{ border-color:$color-ice-dark !important; }
	&.normal{ border-color:$color-normal-dark !important; }
	&.poison{ border-color:$color-poison-dark !important; }
	&.psychic{ border-color:$color-psychic-dark !important; }
	&.rock{ border-color:$color-rock-dark !important; }
	&.steel{ border-color:$color-steel-dark !important; }
	&.water{ border-color:$color-water-dark !important; }

}

/* RESPONSIVE */

@media only screen and (max-width: 720px) {

	.mobile{
		display:block;
	}

	header{

		background:$color-gold;
		position:fixed;
		width:100%;
		z-index:50;

		.title{
			float:none;
			text-align: center;
		}

		.menu{
			display:none;
			float:none;
			clear:both;
			margin-top:15px;
			padding:0;

			a{
				float:none;
				margin: 10px 0;
				padding-left: 34px;
				font-size: 22px;
			}

			.icon-twitter span{ display:inline-block; }
		}

		.hamburger{
			display:block;
			float:right;

			.meat{
				width: 30px;
				height: 5px;
				margin: 3px 0;
				border-radius: 8px;
				background:#000;
			}
		}
	}

	#main{
		padding-top:45px;

		& > h1{
		font-size:26px;
		}
	}

	.tooltip.sandbox{
		display:none !important;
	}

	.stats-table.sortable-table{
		font-size:14px;
	}

	.poke{
		width:49%;

		.poke-stats{
			max-width:100%;
		}

		input, select, .bar-back{
			max-width:100%;
		}

		.poke-stats .stat-container .bar-back{
			width:60px;
		}
	}

	.rank{
		.details .detail-section{

			&.float{
				float:none;
				width:100%;

				&:first-of-type{
					margin: 5px 0 5px 0;
				}

				&.margin{
					margin-right:0;
				}
			}

			.name{
				font-size:14px;
			}
		}

		.moves{
			max-width:180px;
		}

		.rating-container .rating{
			width:auto !important;
		}
	}

	.histograms{
		display:block;

		.histogram{
			width:80%;
			max-width:600px;
			margin:20px auto;
		}
	}

	.flex{
		.col-3{
			flex-basis:25%;
		}
		.col-9{
			flex-basis:75%;
		}
	}

	.league-select,
	.cup-select{
		max-width:49%;
	}
}

@media only screen and (min-width: 721px) {
	.menu{
		position:relative;

		.more{
			font-size:40px;
			font-family:serif;
			line-height:0;
			padding:0;

			&:after{
				content:"...";
			}
		}

		.submenu{
			padding-top:10px;
			max-width:200px;
			position: absolute;
			right: 0;
			top: 12px;
			height:0;
			overflow: hidden;
			pointer-events: none;

			@include transition(all, .125s, linear, 0s);

			&.active{
				display:block;
				height:150px;
				pointer-events: auto;
			}

			.submenu-wrap{
				padding:2px 5px;
				background:$color-gold;
			}

			a{
				float:none;
				margin: 6px 0;
				width: 120px;
			}
		}
	}

}