.realm{
	display: inline-block;
}
.cityGrid{
	display:inline-grid;
}
.city{
	width: 150px;
	height: 60px;
	border-style: solid;
	text-align : center;
	margin: 5px;
	display:inline-block;
	border-width: 1px;
}
.blank{
	visibility: hidden;
}
.stability{
	float:right;
	font-size: 15px;
	background: #ffffff;
	width: 25px;
	height: 25px;
	text-align : center;
}
.Count {
	font-size: 25px;
	width: 40px;
	height: 30px;
	text-align : center;
}
.CountBox {
	float:left;
	width: 40px;
	height: 70px;
	margin: 8px;
}
.dark{
	background: #9999ff;
}
.light{
	background: #ccccff;
}
.influenceButton{
	font-size: 10px;
	background: #aaaaaa;
	width: 15px;
	height: 15px;
	text-align : center;
	margin: 0px;
	display: inline-block;
}

.influenceButton:hover{
	background: #777777;
	cursor:pointer;
}

.darkOwnerShip{
	border-width: 5px;
}
.lightOwnerShip{
	border-color: #ffff88;
	border-width: 5px;
	margin: 0px;
}
.role{
	float:right;
	width: 25px;
	height: 25px;
	background-color: #888888;
}

.stronghold-light{
	background-color: #ffff88;
}
.stronghold-dark{
	background-color: #222222;
}
.battleground{
	background-color: #44aa44;
}
.balanced{
	border-color: #4444aa;
	border-style:solid;
}
.warToken{
	border-color: #aa4444;
	border-style:solid;
}

.purpleRegion .light{
	background: #cc99ff;
}
.purpleRegion .dark{
	background: #aa55ff;
}
.purpleRegion .city{
	background: #bb77ff;
}

.redRegion .light{
	background: #ffcccc;
}
.redRegion .dark{
	background: #ff9999;
}
.redRegion .city{
	background: #ffaaaa;
}


.blueRegion .light{
	background: #ccccff;
}
.blueRegion .dark{
	background: #9999ff;
}
.blueRegion .city{
	background: #aaaaff;
}


.greenRegion .light{
	background: #ccffcc;
}
.greenRegion .dark{
	background: #99ff99;
}
.greenRegion .city{
	background: #aaffaa;
}

.card{
	width: 120px;
	height: 180px;
	background:#aaaaaa;
	margin: 5px;
	display:inline-block;
	font-size:12px;
	vertical-align: top;
	position: relative;
}
.cardUseButton{
	width: 110px;
	height: 30px;
	background:#ffffff;
	margin: 5px;
	text-align: center;
	font-size:12px;
	position: absolute;
	bottom: 0;
	vertical-align: middle;
	cursor: pointer;
}
.cardText{
	margin:10px;
	width:100px;
}
#lightHand{
	background-color: #ffff88 ;
	width:680px;
}
#darkHand{
	background-color: #444444 ;
	width:680px;
}
.hand{
	display: inline-block;
}

.removeButton{
	background-color: #aaaaaa;
	width:20px;
	display:inline-block;
	text-align: center;
	margin: 1px;
}