@keyframes wiggle{
	0%		{transform:rotateZ(-2deg);}
	50%		{transform:rotateZ(2deg);}
	100%	{transform:rotateZ(-2deg);}
	}
/*@keyframes sink{
	0%		{transform:scale(1,1);}
	15%		{transform:scale(0.66,0.66);}
	100%	{transform:scale(1,1);}
	}*/
@keyframes sink{
	0%		{ opacity:1.0; }
	10%		{ opacity:0.75; }
	100%	{ opacity:1.0; }
	}

html{
	height:100%;
	}

body{
	height:100%;
	font-family:"Verdana";
	font-size:16px;
	margin:0px;
	background-color:#eeeeee;
	text-align:center;
	background:url("res/t-grass.png");
	background-size:6%;
	}
a{
	color:rgb(120,160,60);
	text-decoration:none;
	}
a:hover{
	color:white;
	}
	
#game{
	padding-top:60px;
	height:calc(100% - 340px);
	overflow-y:scroll;
	}
#menu{
	width:100%;
	height:280px;
	position:fixed;
	bottom:0;
	background-color:rgb(225,240,250);
	overflow-y:scroll;
	background:url("res/t-sky.png");
	background-size:10%;
	}
	
.location{
	display:inline-block;
	width:200px;
	height:100px;
	cursor:pointer;
	color:white;
	font-size:20px;
	line-height:24px;
	border-radius:10px;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}
.location:hover{
	animation:wiggle 0.6s;
	animation-fill-mode:both;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in-out;
	}
.location:active{
	/*animation:sink 0.08s;*/
	/*animation-fill-mode:both;*/
	/*animation-timing-function:ease-in-out;*/
	animation:sink 0.2s;
	}
#forest{
	background:url("res/p-forest.png");
	background-size:25%;
	text-shadow:0 0 6px rgb(20,40,0);
	}
#forest:hover{
	box-shadow:0 0 10px rgba(20,40,0,0.66) inset;
	}
#forest:active{
	box-shadow:0 0 10px white inset;
	}
#lake{
	background:url("res/p-lake.png");
	background-size:25%;
	text-shadow:0 0 6px rgb(0,20,40);
	margin:0 10px;
	}
#lake:hover{
	box-shadow:0 0 10px rgba(0,20,40,0.66) inset;
	}
#lake:active{
	box-shadow:0 0 10px white inset;
	}
#mountain{
	background:url("res/p-mountain.png");
	background-size:25%;
	text-shadow:0 0 6px rgb(20,20,20);
	}
#mountain:hover{
	box-shadow:0 0 10px rgba(20,20,20,0.66) inset;
	}
#mountain:active{
	box-shadow:0 0 10px white inset;
	}
#village{
	background:url("res/p-village.png");
	background-size:25%;
	text-shadow:0 0 6px rgb(40,20,0);
	margin-top:20px;
	}
#village:hover{
	box-shadow:0 0 10px rgba(40,20,0,0.66) inset;
	}
#village:active{
	box-shadow:0 0 10px white inset;
	}
#buildings{
	padding:20px 40px 60px 40px;
	vertical-align:top;
	}
.building{
	display:inline-block;
	width:100px;
	height:100px;
	cursor:pointer;
	color:white;
	font-size:18px;
	border-radius:10px;
	text-shadow:0 0 6px rgb(20, 40, 0);
	margin:0 5px 10px 5px;
	vertical-align:top;
	background-color:rgba(100,140,80,0.2);
	background-size:cover;
	background-position:center;
	overflow:hidden;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}
.building:hover{
	box-shadow:0 0 10px rgba(20,40,0,0.66) inset;
	animation:wiggle 0.6s;
	animation-fill-mode:both;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in-out;
	}

#resourcelist{
	width:100%;
	position:fixed;
	margin-top:-61px;
	}
#test{
	display:inline-block;
	border:1px solid rgb(160,185,210);
	border-bottom:none;
	border-radius:10px 10px 0 0;
	overflow:hidden;
	}
.resources{
	display:inline-block;
	padding:3px 10px 5px 10px;
	height:22px;
	}
.resources img{
	width:20px;
	display:inline;
	vertical-align:bottom;
	}
.resources span{
	margin-right:4px;
	}
#resourceswood{
	background-color:rgb(210,230,200);
	}
#resourcesfood{
	background-color:rgb(200,230,240);
	}
#resourcesmineral{
	background-color:rgb(225,225,225);
	}
#resourcesgold{
	background-color:rgb(250,240,200);
	padding:3px 10px 5px 10px;
	height:22px;
	}
#resourcesgold img{
	width:16px;
	display:inline;
	vertical-align:bottom;
	}
.buyicon{
	width:20px;
	display:inline;
	vertical-align:bottom;
	}
	
.title{
	font-size:20px;
	background-color:rgb(160,190,220);
	background-color:rgb(80,80,80);
	color:white;
	padding:4px 0 2px 0;
	margin-bottom:10px;
	}
.buybutton{
	display:inline-block;
	min-height:24px;
	border-radius:4px;
	margin-bottom:4px;
	background-color:rgb(210,230,245);
	border:1px solid rgb(160,185,210);
	padding:0 6px;
	cursor:pointer;
	color:rgb(10,40,60);
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}
.buybutton:hover{
	background-color:rgb(190,220,245);
	border:1px solid rgb(40,100,140);
	}
.buybutton:active{
	background-color:rgb(250,255,255);
	border:1px solid rgb(160,190,230);
	}
	




.changelist{
	text-align:left;
	margin:6px 0 20px 0;
	}
.versionnumber{
	font-weight:bold;
	color:#666;
	border-bottom:1px solid #aaa;
	}