@font-face {
    font-family: 'Pokemon GB';
    src: url('img/PokemonGB.ttf');
}

@font-face {
    font-family: 'Open Sans';
    src: url('../../img/OpenSans.ttf');
}

body {
	margin:0px;
	width:100%;
	height:100%;
	background-color:#424242;
	background-repeat:no-repeat;
	background-size:cover;
	font-family:'Open Sans';
	font-size:13px;
	color:#fff;
}

div.centered {
	position:absolute;
	top:50%;
	left:20px;
	right:20px;
	text-align:center;
	transform:translateY(-50%);
}

/*
	in base
*/


#canvas-container {
	position:fixed;
	top:50%;
	left:50%;
	width:800px;
	height:480px;
	margin-top:-240px;
	margin-left:-400px;
	background-color:#fff;
	box-shadow:0px 0px 20px #2b2b2b;
	overflow:hidden;
	color:#000;
}

#splash {
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	z-index:5;
	background-color:#fff;
	text-align:center;
	transition:opacity 1s, background-color 1s;
}

#splash a {
	text-decoration:none;
}

#splash a img {
	border:none;
}

div.pokemon-container {
	background-repeat:no-repeat;
	background-size:contain;
	transition:height 0.4s, left 0.08s;
}

#ally-container {
	position:absolute;
	bottom:120px;
	left:170px;
	width:130px;
	height:0px;
}

#foe-container {
	position:absolute;
	top:30px;
	right:170px;
	width:180px;
	height:180px;
}

div.name-data {
	position:absolute;
	width:250px;
	height:40px;
	font-family:"Pokemon GB";
	font-size:18px;
	line-height:120%;
	transition:left 2s, right 2s;
}

div.name-data span {
	margin:0px 30px 0px 50px;
	font-size:15px;
}

#name-data-ally {
	bottom:200px;
	right:170px;
	text-align:right;
	opacity:0;
}

#name-data-foe {
	top:40px;
	left:170px;
	text-align:left;
}

div.hp-gauge {
	position:absolute;
	width:200px;
	height:75px;
	background-repeat:no-repeat;
	background-size:contain;
	font-family:"Pokemon GB";
	transition:left 2s, right 2s;
}

div.hp-gauge span {
	position:absolute;
	font-size:10px;
	font-weight:bold;
}

#hp-gauge-ally {
	bottom:120px;
	right:170px;
	background-image:url('img/hp-gauge-ally.png');
	opacity:0;
}

#hp-gauge-ally span {
	top:10px;
	left:25px;
}

#hp-gauge-ally span.hp-bar-container {
	top:10px;
	left:60px;
}

#hp-gauge-foe {
	top:80px;
	left:170px;
	background-image:url('img/hp-gauge-foe.png');
}

#hp-gauge-foe span {
	top:20px;
	left:20px;
}

#hp-gauge-foe span.hp-bar-container {
	top:20px;
	left:55px;
}

span.hp-bar-container {
	position:absolute;
	display:inline-block;
	width:120px;
	height:5px;
	border:2px solid #424242;
	border-radius:5px;
	overflow:hidden;
}

div.hp-bar {
	position:absolute;
	top:0px;
	left:0px;
	display:inline-block;
	height:5px;
	background-color:#94F1BA;
	transition:width 0.5s;
}

#trainer-container {
	position:absolute;
	bottom:90px;
	left:170px;
	width:130px;
	height:180px;
	background-repeat:no-repeat;
	background-size:contain;
	transition:left 1.5s;
}

#ball {
	position:absolute;
	bottom:230px;
	left:210px;
	width:30px;
	height:30px;
	background-repeat:no-repeat;
	background-size:contain;
	background-image:url('img/ball.png');
	opacity:0;
	transition:left 1s, bottom 1s, opacity 0.3s;
}

#prompt-container {
	position:absolute;
	bottom:20px;
	left:170px;
	right:170px;
	z-index:2;
	height:70px;
	padding:10px;
	border:6px double #000;
	background-color:#fff;
	font-family:"Pokemon GB";
	font-size:18px;
	color:#000;
	line-height:200%;
}

#attack-picker {
	display:none;
	position:absolute;
	bottom:20px;
	left:170px;
	right:170px;
	z-index:3;
	height:70px;
	padding:10px;
	border:6px double #000;
	background-color:#fff;
	font-family:"Pokemon GB";
	font-size:18px;
	color:#000;
	text-align:right;
}

#attack-cursor {
	display:inline-block;
	position:relative;
	width:12px;
	height:18px;
	background-image:url('img/attack-cursor.png');
	background-repeat:no-repeat;
	background-size:contain;
}