@font-face
{
 
	font-family: "IcoFont";
	font-weight: normal;
	font-style: "Regular";
	src: url("../fonts/icofont.woff2") format("woff2"),
	url("../fonts/icofont.woff") format("woff");
}

.stupidBattleBorder {
	/* Alas, we can't just do this with an outline because the inside can overflow,
	  and that looks bad with an outline.
	*/
	position:absolute;
	left: calc(50% - 458px);
	top: calc(50% - 323px);
	background-color: brown;
	width: 916px;
	height:666px;
}

.battleInnerDiv {
	border: 3px solid yellow;
	/* outline: 5px solid brown; */
	background-color: brown;
	margin:5px;
	width: 900px;
	height:650px;
	display:inline-block;
	text-align: center;
	color: yellow;
	font-family: Almendra;
	font-size: 24px;
}

.unitContainer {
	margin: auto;
	width: 600px;
	height: 100px; 
	/* border: 3px solid yellow; */
	background-color: #c54b4b;
	background-color: #c77;
	display: inline-block;
	vertical-align: middle;
}

.superUnitContainer {
	width: 900px;
	height: 100px; 
}

/* TODO: Re-do the way dragging is done in battle.js.  Then we can use left and right scroll buttons. */
.leftScrollButton,.rightScrollButton{
	font-family: IcoFont;
	height: 100%;
	color: yellow;
	display: none; /*inline-block;*/  /* to use these arrows, make display inline-block */
	font-weight: bold;
}

.gridUnitTitle {
	font-size:16px;
}

.battleGrid {
	margin: auto;
	width: 700px;
	height: 350px;
	border-collapse:collapse;
	border: 3px solid brown;
	background-color: #c54b4b;
	background-color: #c77;
	table-layout: fixed;
}
.battleGrid td {
	border: 3px solid brown;
	vertical-align:top;
}
.battleGrid tr {
	height:174px;
}

.battleBackground { 
	margin: 10px 0px;
	padding: 10px 0px;
}

#battleBackground {
	margin: 10px 0px;
}
.plainsBattle {
	background-image:url(../img/plains_battle.png);
}
.forestBattle {
	background-image:url(../img/forest_battle.png);
}
.mountainBattle {
	background-image:url(../img/mountain_battle.png);
}
.desertBattle {
	background-image:url(../img/desert_battle.png);
}


.emptyBattleCell {
	width:140px;
	font-size:16px;
}

.onGridBuffs {
	font-size: 12px;
	font-family: arial, san serif;
}

.deadUnit {
	filter: alpha(Opacity=25);
	opacity: 0.25;
}


ul.battleGridStats {
	font-size:12px;
	list-style: none;
	padding: 0px;
}

.battleUnitDescription {
	font-size:12px;
}

.unitOfFocus {
	/* border: 1px solid yellow; */
	background-color: #c77;
	border-radius: 15px;
}
/* New combat resolution for individual unit matchups */
.diceDiv {
	position:absolute;
	z-index: 10;
	left: calc(50% - 75px);
	top: calc(50% + 10px);
	width: 150px;
	height: 80px;
	display: none;
}

.matchupSummaryDiv {
	position: absolute;
	width: 160px;
	height: 20px;
	background-color:brown;
	color:yellow;
	top: calc(50% - 15px);
	display:none;
	font-size:12px;
	font-family: Arial, san-serif;
}