@font-face{/* creature name */
    font-family: "Perceval-Bold"; 
    src: url('http://chazu.arkku.net/files/font/Perceval-Bold.ttf');
}
@font-face{ /* power score, mana cost*/
	font-family: "Laserjerks Regular";
    src: url('http://chazu.arkku.net/files/font/Laserjerks%20Regular.ttf');
}
@font-face{/* race name */
    font-family:"Armada Bold";
    src: url('http://chazu.arkku.net/files/font/Armada%20Bold.otf');
}

.cardContainer{
	float:left;
}
.infoContainer{
	border: 1px solid grey;
	padding: 15px;
	margin:auto;
	max-width:350px;
}
.cardTemplate{
	max-width: 350px;
	position:absolute;
}
.creatureAvatar{
	max-width: 284px;
	position:absolute;
	top: 72px;
	left:57px;
}

.name{
	position:absolute;
	font-family:"Perceval-Bold";
	text-align: center;
	width: 285px;
	top: 32px;
	left:60px;
	font-size: 22px;
	color: black;
	xtext-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
	text-shadow: 0px 0px 1px black;
}
.race{
	position:absolute;
	xborder: 1px solid white;
	font-family: "Armada Bold";
	text-align: center;
	width: 285px;
	top: 56px;
	left:60px;
	font-size: 10px;
	color: #262626;
	text-shadow: 0px 0px 0.5px #262626;
}
.powerScore {
	position:absolute;
	top: 445px;
	left:34px;
	font-family: "Laserjerks Regular";
	color: #e6e6e6;
	font-size: 25px;
	text-shadow: 0px 0px 1px black, 2px 2px black;
}
.manaCost{
	position:absolute;
	top: 24px;
	left:34px;
	font-family: "Laserjerks Regular";
	color: #e6e6e6;
	font-size: 25px;
	text-shadow:  2px 2px black, 0px 0px 2px #e6e6e6;
}
.megaConsoleContainer {
	margin:auto;
	xborder-top: 1px solid grey;
	xborder-bottom:none;
	width: 350px;
	max-height: 60%;
	margin-top: 10px;
	color:black;
	font-size: 12px;
	overflow:hidden;
	font-family: monospace;
	padding-left: 5px;
}

.megaConsoleContainer:after {
	position: absolute;
	bottom: 0;  
	height: 100%;
	width: 100%;
	content: "";
	pointer-events: none; /* so the text is still selectable */
/* Permalink - use to edit and share this gradient: t  http://colorzilla.com/gradient-editor/#ffffff+77,ffffff+100&0+77,1+100 */
background: -moz-linear-gradient(top, rgba(255,255,255,0) 77%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 77%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0) 77%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	
	
}


.megaConsole{
	
}

button.reloadButton {
	width:100%;
	height:30px;
	margin-bottom:10px;
	cursor:pointer;
}

#title {
	text-align:center;
}