body {
	position: absolute;
	height: 100%;
	width: 100%;
	margin: 0px;
	background-color: brown;
}
.mapContainer {
	overflow-x:scroll;
	overflow-y:scroll;
	width: calc(100% - 300px);
	height: calc(100% - 65px);
	border-top: 3px solid #540000; /*#004D00;*/
	position:relative;
	background-color: #291;
}
#tempMessage {
	position: absolute;
	top: 65px;
	width: calc(60% - 300px);
	height: 25px;
	z-index: 100;
	background-color: #c54b4b;
	background-color: #c77;
	color: white;
	display: none;
	border: 3px solid #540000;
	border-top: none;
	left: 20%;
}
.map {
	display: block;
}
.rightDiv {
	border-top: 3px solid #540000;
	border-bottom: 3px solid #540000;
	position: absolute;
	right:0px;
	width: 300px;
	top: 62px;
	bottom: 30px;
	background-color: #c54b4b;
	background-color: #c77;
}

.rightInnerDiv {
	position: absolute;
	left: 0px;
	right: 0px;
	top:0px;
	bottom:0px;
	margin: 4px;
	border: 2px solid #540000;
}
.unitType {
	font-size:small;
}
.icon20 {
	background-image: url(../img/icons.png);
	height: 20px;
	width: 20px;
	display: inline-block;
}
.middledIcon20 {
	vertical-align:middle;
}

.Infantry {
	background-position: 0px 0px;
}
.Archers {
	background-position: -20px 0px;
}
.Cavalry {
	background-position: -40px 0px;
}
.Monsters {
	background-position: -60px 0px;
}

.forestIcon {
	background-position: -80px 0px;
}
.mountainsIcon {
	background-position: -100px 0px;
}
.hammerIcon {
	background-position: -140px 0px;
}

.plainsIcon {
	background-position: -120px 0px;
}
.desertIcon {
	background-position: -120px 0px;
}
.unknownIcon {
	background-position: -120px 0px;
}


.unitIcon {
	background-image: url(../img/grid_units.png);
	height: 254px;
	width: 200px;
}
.hex {
	position:absolute;
	width:300px;
	height: 258px;
	background-image: url(../img/hexes.png);
}

.highlightedHex {
	background-image: url(../img/highlighted_hexes.png);
}

.mountains {
	background-position: 0px 0px;
}
.plains {
	background-position: -300px 0px;
}
.desert {
	background-position: -600px 0px;
}
.forest {
	background-position: -900px 0px;
}
.castle {
	background-position-y: -258px;
}
.cave {
	background-position-y: -516px;
}
.improvement, .farm, .lumberyard, .mine {
	background-position-y: -774px;
}


.unknown {
	background-position: -1200px 0px;
}
.innerCell {
	width:180px; 
	height:150px;
	margin: 60px 60px;
	
	border-radius: 10px;
}


.small_army0, .small_army1, .small_army2, .small_army3 {
	background-image: url(../img/small_armies.png);
	position: relative;
	top: 60px;
	width:90px;
	height: 60px;
}

.small_army0 {
	background-position: 0px 0px;
}
.small_army1 {
	background-position: -90px 0px;
}
.small_army2 {
	background-position: -180px 0px;
}
.small_army3 {
	background-position: -270px 0px;
}

.dialogDiv {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	vertical-align: middle;
	display: none;
}
.dialogMessage {
	position: absolute;
	border: 3px solid yellow;
	outline: 5px solid brown;
	background-color: brown;
	left: calc(50% - 220px);
	top: calc(50% - 240px);
	width: 400px;
	height:480px;
	display:inline-block;
	text-align: center;
	padding: 10px 20px;
	color: yellow;
	font-family: Almendra;
	font-size: 20px;
}
.dialogMessage button
{
	border: 1px solid yellow;
	background-color:brown;
	color:yellow;
}

.dialogQuote {
	font-size: 12px;
	width:60%;
	margin: auto;
}

.dialogUnitIcon {
	margin: 10px auto;
	width: 100px;
}
.purchaseDiv { 
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	vertical-align: middle;
	display: none;
}
.purchaseInnerDiv {
	position: absolute;
	border: 3px solid yellow;
	outline: 5px solid brown;
	background-color: brown;
	left: calc(50% - 450px);
	top: calc(50% - 360px);
	width: 900px;
	height:720px;
	display:inline-block;
	text-align: center;
	padding: 0px 0px;
	color: yellow;
	font-family: Almendra;
	font-size: 24px;
	/*overflow: hidden;  the help bubble needs to overflow*/
}
.battleDiv { 
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	vertical-align: middle;
	display: none;
}
.terrainBackground { 
	background-size: 286px auto;
	padding-top: 75px;
	font-size: 28px;
}
.plainsBackground { 
	background-image:url(../img/plains_battle.png);
}
.forestBackground { 
	background-image:url(../img/forest_battle.png);
}
.desertBackground { 
	background-image:url(../img/desert_battle.png);
}
.mountainsBackground { 
	background-image:url(../img/mountain_battle.png);
}


.troopDetails {
	display:none;
	font-weight:normal;
	position: absolute;
	left: 80px;
	background: brown;
	color:yellow;
	padding: 10px;
	border-radius: 10px;
}
.troopDetails ul {
	list-style-type: none;
	padding-left: 10px;
}
.troopList:hover {
	font-weight:bold;
}
.troopList:hover .troopDetails {
	display:block;
}
.smallUnitIcon {
	background-image: url(../img/grid_units_small.png);
	height: 96px;
	width: 100px;	
	filter: alpha(Opacity=75);
	opacity: 0.75;
	/*border: 3px solid brown;*/
	border-radius:25px;
	text-align:right;
	vertical-align: top;
	font-size: 14px;
	font-family: arial, san serif;
	cursor: pointer;
}

.smallBlueUnitIcon {
	background-image: url(../img/grid_units_small_blue.png);
}
.smallYellowUnitIcon {
	background-image: url(../img/grid_units_small_yellow.png);
}
.smallGreenUnitIcon {
	background-image: url(../img/grid_units_small_green.png);
}
.smallBrownUnitIcon {
	background-image: url(../img/grid_units_small_brown.png);
}
.smallUnitIcon:hover
{
	/*border: 3px solid gold;*/
	filter: alpha(Opacity=100);
	opacity: 1.0;
}
.opaque
{
	/*border: 3px solid gold;*/
	filter: alpha(Opacity=100);
	opacity: 1.0;
}

.Barracks0, .Archery_Range0, .Stable0, .Armory0 {
	background-image: url(../img/buildings.png);
	height: 80px;
	width: 150px;
}

.Barracks1, .Archery_Range1, .Stable1, .Armory1 {
	background-image: url(../img/buildings.png);
	height: 80px;
	width: 150px;
	background-position: -150px 0px;
}

.Barracks2, .Archery_Range2, .Stable2 {
	background-image: url(../img/buildings.png);
	height: 80px;
	width: 150px;
	background-position: -300px 0px;
}

.Archery_Range3 {
	background-image: url(../img/buildings.png);
	height: 80px;
	width: 150px;
	background-position: -450px 0px;
}

.blurred, .blurred:hover {
	border: 3px solid brown;
	filter: alpha(Opacity=25);
	opacity: 0.25;
	cursor: default;
}

h1 {
	color:yellow;
	margin: 10px;
	font-family: Almendra;
}

#status {
	position: relative;
    top: -60px;
    padding: 0px 10px;
	float:right;
	color:yellow;
	text-align:right;
}
.unitCost {
	float:right;
	font-size:small;
}

button {
	background-color:brown;
	color:yellow;
	border: 1px solid yellow;
	border-radius: 5px;
	font-size: 24px;
	padding: 6px 20px;
}
button:disabled {
	color: #999;
}

.buildButton {
	font-size:16px;
	margin: 10px;
	float: right;
}

.bottomRightDiv button {
	font-size:12px;
	padding: 3px 5px;
	margin: 3px;
}

.bottomRightDiv {
	/* border: 3px solid #004D00; */
	position: absolute;
	right:0px;
	width: 303px;
	height: 30px;
	bottom: 0px;
	/*background-color: #291;	*/
	text-align: right;
}
.rightDiv hr {
	border-top: 1px solid #540000;
	border-bottom: none;
}
.detailsDiv {
	margin: 3px;
}

.splitArmyDiv {
	font-family: Almendra;
	color:yellow;
	position: absolute;
	width: 800px;
	left: calc(50% - 400px);
	top: 150px;
	height: 640px;
	background-color: brown;
	display:none;
	outline: 2px solid brown;
	border: 1px solid yellow;
}

.difficultyDiv {
	font-family: Almendra;
	color:yellow;
	position: absolute;
	width: 500px;
	left: calc(50% - 250px);
	top: calc(50% - 200px);
	background-color: brown;
	font-size: 32px;
	/* display:none; */
	outline: 2px solid brown;
	border: 1px solid yellow;
	text-align:center;
}

.difficultySelectionText {
	position:relative;
	left: 100px;
	top:-50px;
	width: 300px;
	text-align:left;
}
.difficultyList {
	margin: 0px;
	padding: 0px;
}

.difficultyOption {
	list-style-type: none;
	height: 120px;
	cursor: pointer;
}

.difficultyOption:hover {
	background-color: #b53b3b;
	/*background-color: #c77;*/
}
.leftArmySplit {
	position: absolute;
	left: 10px;
	right: calc(50% + 10px);
	top: 10px;
	bottom: 10px;
	/*background-color: #c54b4b;*/
}

.rightArmySplit {
	position: absolute;
	left: calc(50% + 10px);
	right: 10px;
	top: 10px;
	bottom: 10px;
	/*background-color: #c54b4b;*/
}

.verticalTroopListDiv {
	border: 1px solid #540000; 
	background-color: #c54b4b;
	background-color: #c77;
	width: 360px;
	height: 550px;

	display: flex;
	flex-wrap:wrap;
	align-content: flex-start;
	/*overflow-y:auto;*/
}

.splitArmyBottomDiv {
	position: absolute;
	bottom: 10px;
	right:30px;
}

.labeledUnitIcon {
	width: 100px;
	line-height: 18px;
}
.unitStatsDiv {
	position: absolute;
	left: 100px;
	top: 0px;
	width: 150px;
	padding:0px;
	text-align: left;
}

.brw-tooltip {
	background-color: pink;
	color: blue;
	font-size: 10px;
}
/* Exact size of flag.png */
.flag {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 91px;
	height: 30px;
}

.flag0 {
	background-color: #760000;
}
.flag1 {
	background-color:blue;
}
.flag2 {
	background-color:#F1E500; /* yellow */
}
.flag3 {
	background-color:green;
}
.flag4 {
	background-color:brown;
}
p.tiny {
	font-size: 10px;
}
.statsTitle {
	font-size:24px;
	padding:0px;
	margin:0px;
	color:black;
}
.statsNote {
	font-size:10px;
}

.copyright {
	font-size: 12px;
	text-align: right;
}