#characterContainer {
	width: 100%;
	height: 420px;
	position: absolute;
	bottom: 75px;
}

.player {
	height: 200px;
	width: 250px;
	margin: 0 100px;
	text-align: center;
}

.player img {
	height: 350px;
}

.player.light-horse {
	float: left;
}

.player.dark-horse {
	float: right;
}

#powerContainer {
	width: 100%;
}

.power {
	float: left;
	height: 135px;
}

.power.light-horse {
	background: url("../images/light-power.png") repeat-x;
	background-position: 0px 20px;
	-webkit-animation: moveLightPower .75s infinite;
	-webkit-animation-timing-function: linear;
}

.light-explosion {
	height: 200px;
	width: 64px;
	background: url("../images/light-exposion.png") no-repeat;
	float: right;
	-webkit-animation: explosionMovement .15s infinite;
	background-size: 100% 100%;
}

.power.dark-horse {
	background: url("../images/dark-power.png") repeat-x;
	background-position: 0px 20px;
	-webkit-animation: moveDarkPower .75s infinite;
	-webkit-animation-timing-function: linear;
}

.dark-explosion {
	height: 200px;
	width: 64px;
	background: url("../images/dark-explosion.png") no-repeat;
	float: left;
	-webkit-animation: explosionMovement .15s infinite;
	-webkit-animation-delay: .25s;
	background-size: 100% 100%;
}

.letter-bubble {
	width: 100px;
	background: rgb(255,255,255);
	border-radius: 7px;
	border: 5px solid black;
	font-weight: bold;
	text-align: center;
	font-size: 3.75em;
	padding: .25em 0;
	margin: 0 auto 25px;
}

.light-horse {
	-webkit-animation: bobLightBubble 2s infinite;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-delay: .25s;
}

.dark-horse {
	-webkit-animation: bobDarkBubble 2s infinite;
	-webkit-animation-timing-function: ease-out;
}