body 
{
    background-color:#aaa;
		font-family:sans-serif;
}

.hide {
	display:none;
}

.world {
	position:absolute;
	overflow:hidden;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
}

.mapwrapper {
	position:absolute;
	left:50%;
	top:50%;
}
.map {
	display:table;
	width:16384px;
	height:16384px;
	
	transition: transform 0.5s;

	position:absolute;
	left:0px;
	top:0px;
	transform-origin: 0px 0px;
	transform : scale(1,1);
	transition: transform 0.15s;
}

.map>.row {
	display: table-row;
	height:128px;
}
.cell {
	display: table-cell;
	width:128px;
}
.cell:hover {
	background-color:#0f0;
	box-shadow: 0px 0px 16px 16px white inset;
	z-index: 1;
}

.cell[data-terrain="water"] {
	background-color: blue;
	background-image: url("images/water.png");
}
.cell[data-terrain="shore"] {
	background-color: orange;
	background-image: url("images/shore.png");
	
}
.cell[data-terrain="grass"] {
	background-color: green;
	background-image: url("images/grass.png");
}
.cell[data-terrain="forest"] {
	background-color: darkgreen;
	background-image: url("images/forest.png");
}
.cell[data-terrain="mountain"] {
	background-color: grey;
	background-image: url("images/mountains.png");
}
.cell:before {
	position:relative;
	top:1px;
	left:10px;
	font-size: 32px;
	padding: 5px;
	color: pink;
}

.cell:hover:before {
	background-color:#800;
	box-shadow: 1px 1px 1px 1px white inset, -1px -1px 1px 1px black inset;
}

.cell[data-goodness="-2"]:before {
	content:"➖➖";
}
.cell[data-goodness="-1"]:before {
	content:"➖";
}
.cell[data-goodness="1"]:before {
	content:"➕";
}
.cell[data-goodness="2"]:before {
	content:"➕➕";
}

.unit_container {
	position:absolute;
	left:0;
	top:0;
	width:0;
	height:0;	
	z-index:1;
}

.unit {
	position: absolute;
	transition: all 0.5s;
}

.unit img{
  padding-left: 44px;
  height: 96px;
  padding-top: 32px;
}

.button {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
 user-select: none;
}
.town {
	position: absolute;
}

.town .population {
	width: 128px;
	height: 128px;
	font-size: 64px;
	font-family: sans-serif;
	color: rgba(255,255,255,0.9);
	position: absolute;
	left: 0px;
	top: 0px;
	text-align: center;
	line-height: 128px;
	text-shadow: 4px 4px 8px black;
}
.unit:hover {
	filter: drop-shadow(0px 0px 10px white);
}

.unit.selected {
	filter: drop-shadow(0px 0px 10px yellow);
}

.view {
	border-radius:16px;
	background-color: rgba(0,0,64,0.5);
	border: 1px solid red;
}

.unitview {
	position:absolute;
	right:0px;
	top:0px;
	width:200px;
	height:150px;
}

.unitview .button {
	background-color: #aaa;
	color: #222;
	font-family: sans-serif;
	text-align:center;
}

.unitview .action.button {
	font-size: 11px;
	line-height: 20px;
	height: 16px;
	width: 46px;
	height: 20px;
  visibility:hidden;
	border-radius:5px;
	box-shadow: -1px -1px 3px 0px black inset, 1px 1px 4px 0px white inset, 0px 0px 2px 1px black;
}

.unitview .action.button.available {
	visibility:visible;
}

.unitview .action.button:active {
	margin-top:1px;
	margin-bottom:-1px;	
	box-shadow: 1px 1px 3px 0px black inset, -1px -1px 4px 0px white inset, 0px 0px 2px 1px black;
}

.unitview .button.settle {
	position:absolute;
	right:52px;
	bottom: 28px;
}
.unitview .button.road {
	position:absolute;
	right:5px;
	bottom: 28px;
}

.unitview .button.improve {
	position:absolute;
	right:5px;
	bottom: 6px;
}

.unitview>ul {
    position: absolute;
    top: 4px;
    right: 30px;
    color: white;
    list-style: none;
    padding: 0px;
}

.unitview>.key {
	width: 22px;
	height: 22px;
	background-color: black;
	border: 1px solid grey;
	color: yellow;
	position: absolute;
	text-align:center;
}
.unitview>.key.w {
	bottom: 32px;
	left:40px;
}
.unitview>.key.a {
	bottom: 6px;
	left:10px;
}
.unitview>.key.s {
	bottom: 6px;
	left:40px;
}
.unitview>.key.d {
	bottom: 6px;
	left:70px;
}

.unitview>img {
	position: absolute;
	width: 32px;
	height: 64px;
	background-color: grey;
	top: 14px;
	left: 11px;
	box-shadow: 2px 2px 7px 3px black inset;
	padding: 6px;
	border-radius: 4px;
}

.cityview {
	width :800px;
	height:600px;
	left:0px;
	right:0px;
	margin: auto;
	position:absolute;
	transform: scale(0,0);
	transition: all 0.5s;
	opacity:0.1;
}

.cityview.showing {
	transform: scale(1,1);	
	opacity:1.0;
}

.cityview>.close.button  {
	font-size:48px;
	line-height:48px;
	color:red;
	position:absolute;
	right:0px;
	top:0px;
	padding:0px;
	margin:0px;
	user-select:none;
	z-index:1;
}

.cityview>.territory {
	position:absolute;
	width:448px;
	height:448px;
	display:table;
  border-radius:140px;
	overflow:hidden;
	box-shadow: 0px 0px 8px 16px black inset;
	right:4px;
	top:4px;
}

.cityview .cell:before {
	position:relative;
	top:1px;
	left:5px;
	font-size: 8px;
	padding: 2px;
	color: pink;
}

.cityview .cell.unreachable {
	pointer-events:none;
	opacity:0.5;
}

.cityview>.stats {
	position:absolute;
	border-radius:8px;
	background-color: rgba(255,255,255,0.3);
	left:6px;
	top:4px;
	width: 320px;
	height: 448px;
	color:white;
	font-family:sans-serif;
}

.cityview>.production {
	position:absolute;
	border-radius:8px;
	background-color: rgba(255,255,255,0.3);
	color:white;
	left:6px;
	bottom:4px;
	width:320px;
	height:130px;
}

.cityview>.improvements {
	position:absolute;
	border-radius:8px;
	background-color: rgba(255,255,255,0.3);
	color:white;
	right:6px;
	bottom:4px;
	width:320px;
	height:130px;
	
}

.cityview .foodstore {
	position:absolute;
	left:5px;
	bottom:5px;
}

.cityview .materialsstore {
	position:absolute;
	left:5px;
	bottom:25px;	
}
.cityview .growththreshold {
	position:absolute;
	right:5px;
	bottom:5px;	
}

.cityview>.territory>.row {
	display: table-row;
	height:64px;
}

.cityview>.territory>.row>.cell {
	position:relative;
	display: table-cell;
	width:64px;
	background-size: 64px 64px;
}

.cityview>.territory>.town {
	background-image: url("images/town.png");
	background-size:64px 64px;
	position:absolute;
	left:192px;
	top:192px;
	width:64px;
	height:64px;
	z-index:1;
}
.cityview>.territory>.town_____:before {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 64px;
	height: 64px;
	line-height: 64px;
	font-size: 64px;
	color: white;
	content: "☺";
  z-index:4;

}


.cityview>.territory>.row>.cell:after {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 64px;
	height: 64px;
	line-height: 64px;
	font-size: 64px;
	color: white;
	content: "☺";
  z-index:4;
	transform: scale(10,10);
	opacity:0.0;
	transition: all 0.3s;
	pointer-events:none;
}
.cityview>.territory>.row>.cell.utilised:after {
	transform: scale(1,1);
	opacity:1;

}

.cityview>.workersidle {
	transition:all 0.7s;
	position:absolute;
	width:64px;
	height: 64px;
	top: 54px;
	right: 405px;
	text-align:center;
	line-height:16px;
	color:white;
	font-size:16px;
}

.cityview .cell.unavailable {
	pointer-events:none;
	box-shadow: 0px 0px 33px 0px red inset;
}

.cityview>.workersidle:before {
	transition:all 0.7s;
	position:absolute;
	right:0px;
	bottom:62px;
	content: "☺";
	width:64px;
	height: 64px;
	font-size:64px;
	line-height:64px;
}
.cityview>.workersidle:empty {
	opacity:0;
}

.panel {
	width :300px;
	height:100px;
	left:0px;
	right:0px;
	margin: auto;
	position:absolute;
	bottom:0px;
	margin: auto;
	color:white;
	position:absolute;
	border-radius:16px 16px 0px 0px;
}

.panel .treasury {
	position: absolute;
	left:14px;
	top:16px;	
}


.panel .button {
	position:absolute;
	width:96px;
	height:32px;
	border-radius:5px;
	background-color: #aaa;
	font-family:sans-serif;
	text-align:center;
	color:black;
	font-size:14px;
	line-height:32px;
	padding-bottom:1px;
	box-shadow: -1px -1px 3px 0px black inset, 1px 1px 4px 0px white inset, 0px 0px 2px 1px black;
}
.panel .button:active {
	padding-bottom:0px;
	padding-top:0px;
	box-shadow: 1px 1px 3px 0px black inset, -1px -1px 4px 0px white inset, 0px 0px 2px 1px black;	
}

.panel .button.endturn {
	right: 10px;
	bottom:  10px;
}
.panel .button.findunit {
	right: 10px;
	bottom:  52px;
}


.production .button {
	position:absolute;
	width:96px;
	height:32px;
	border-radius:5px;
	background-color: #aaa;
	font-family:sans-serif;
	text-align:center;
	color:black;
	font-size:14px;
	line-height:32px;
	padding-bottom:1px;
	box-shadow: -1px -1px 3px 0px black inset, 1px 1px 4px 0px white inset, 0px 0px 2px 1px black;
}
.production .button:active {
	padding-bottom:0px;
	padding-top:0px;
	box-shadow: 1px 1px 3px 0px black inset, -1px -1px 4px 0px white inset, 0px 0px 2px 1px black;	
}

.production .button.change {
	right:6px;
	bottom:4px;
}
.production .button.complete {
	left:6px;
	bottom:4px;
	display:none;
}

.construction.menu {
	left: 0px;
	top: 150px;
	margin: auto;
	position: absolute;
	width: 348px;
	height: 400px;
	right: 0px;
	box-shadow: 3px 3px 5px 5px rgba(0,0,0,0.5);
	overflow-y: scroll;
}

.construction.menu ul {
	list-style: none;
	margin: 6px 10px;
	color: #ddd;
	padding: 0px;
}

.construction.menu li {
	opacity:0.3;
	display:none;		
}

.construction.menu li:hover {
	background-color: rgba(256,256,128,0.2);
}
.construction.menu li.available {
	opacity:1;
	display:block;
}