*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	margin: 0;
	padding: 0;
}

body {
	background: #0a0a0a url(../img/nbg.png);
	background-repeat: repeat-x;
	background-position: bottom;
	width: 100%;
	max-width: 1200px;
	min-width: 320px;
	padding: 0 12px;
	margin: 0 auto;
	color: #000;
	font-size: 10pt;
	line-height: 1.25;
	font-family: Arial, Helvetica, sans-serif;
	word-wrap: break-word;
	overflow-x: hidden;
}

@media only screen and (min-width: 401px) {
	body { font-size: 11pt; }
}

@media screen and (max-width: 319px) {
	body { font-size: 9pt; }
}

.headbar {
	position: relative;
	background: url(../img/headbar_left.png) left no-repeat, url(../img/headbar_right.png) right no-repeat;
	height: 62px;
	top: 23px;
	z-index: 1;
	margin-top: -14px;
	width: 100%;
}

.headbar .center {
	background: url(../img/headbar_center.png) center repeat-x;
	height: 62px;
	margin-left: 55px;
	margin-right: 27px;
}

.paper {
	background: #fff2cb url(../img/paper.jpg);
	box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.75);
	color: #000;
	text-shadow: 0 1px 0 #faf2d7;
	width: 100%;
}

.paper .border {
	background: url(../img/border_left.png) left repeat-y, url(../img/border_right.png) right repeat-y;
	width: 100%;
}

.paper .border .padding {
	padding: 15px 24px;
}

.top_wave {
	background: url(../img/top_wave.png) repeat-x;
	height: 5px;
	margin-left: -15px;
	margin-right: -15px;
}

.light_paper {
	background: #e1dbbe url(../img/light_paper.jpg);
	color: #000;
	text-shadow: 0 1px 0 #faf2d7;
	margin-left: -15px;
	margin-right: -15px;
}

.bottom_wave {
	background: url(../img/bottom_wave.png) repeat-x;
	height: 5px;
	margin-left: -15px;
	margin-right: -15px;
}

.juosta {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	background: #e1dbbe url(../img/light_paper.jpg);
	text-shadow: 0 1px 0 #faf2d7;
	padding: 5px;
	margin-left: -15px;
	margin-right: -15px;
}

.juosta2 {
	border-top: 1px solid #b98a19;
	border-bottom: 1px solid #b98a19;
	background: #e1dbbe url(../img/light_paper.jpg);
	text-shadow: 0 1px 0 #faf2d7;
	padding: 10px 10px 10px 15px;
	margin-left: -15px;
	margin-right: -15px;
}

.footbar {
	position: relative;
	background: url(../img/footbar_left.png) left no-repeat, url(../img/footbar_right.png) right no-repeat;
	height: 29px;
	bottom: 12px;
	width: 100%;
}

.footbar .center {
	background: url(../img/footbar_center.png) center repeat-x;
	height: 29px;
	margin-left: 140px;
	margin-right: 99px;
}

a {
	color: #000;
	text-decoration: underline;
}

a:hover {
	color: #000;
	text-decoration: none;
}

.small { font-size: 9pt; }
.small2 { font-size: 7pt; }
.big { font-size: 13pt; }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.bold { font-weight: bold; }
pp.italic { font-style: italic; }
.green { color: #00450d; }
.red { color: #ff0000; }
.pilka { color: #959090; }
.geltona { color: #deab0f; }
.black { color: black; }
.float_left { float: left; }
.razdel5 { height: 5px; }
.razdel10 { height: 10px; }
.razdel15 { height: 15px; }
.razdel20 { height: 20px; }

.lygis {
	position: absolute;
	z-index: 6;
	margin-top: 65px;
	background-image: url(../img/lygis2.png);
	width: 27px;
	height: 20px;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	color: #fff9eb;
	text-align: center;
	padding-top: 3px;
	font-size: 13px;
	text-shadow: 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000, -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000;
}

.daiktu_kiekis {
	position: absolute;
	z-index: 6;
	width: 40px;
	height: 10px;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	color: #fff9eb;
	text-align: center;
	padding-top: 3px;
	font-size: 13px;
	text-shadow: 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000, -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000;
}

.pliusas {
	position: relative;
	z-index: 5;
	margin-bottom: -28px;
	left: 42px;
	background: url('/img/pliusas.png');
	width: 15px;
	height: 12px;
	border-radius: 0;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	color: #fff9eb;
	text-align: center;
	padding-top: 3px;
	font-size: 13px;
	text-shadow: 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000, -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000;
}

.stiprumas,
.stiprumas2,
.stiprumas3 {
	position: relative;
	z-index: 5;
	margin: 0 auto;
	margin-top: -20px;
	width: 30px;
	height: 7px;
	border-radius: 0;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	color: #fff9eb;
	text-align: center;
	padding-top: 3px;
	font-size: 13px;
	text-shadow: 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000, -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000;
}

.stiprumas { background: url('/img/item2/daikto_retumas1.png'); }
.stiprumas2 { background: url('/img/item2/daikto_retumas2.png'); }
.stiprumas3 { background: url('/img/item2/daikto_retumas3.png'); }

.hp {
	position: relative;
	z-index: 5;
	margin: 0 auto;
	margin-top: -9px;
	background-color: rgba(255, 255, 255, 1);
	border-bottom: 1px solid black;
	width: 100px;
	height: 5px;
	border-radius: 0;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	color: #fff9eb;
	text-align: center;
	padding-top: 3px;
	font-size: 13px;
	text-shadow: 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000, -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000;
}

.hp2 {
	position: absolute;
	z-index: 6;
	margin-top: -3px;
	background-color: rgba(255, 45, 0, 1);
	max-width: 100px;
	height: 5px;
	border-radius: 0;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	color: #fff9eb;
	text-align: center;
	padding-top: 3px;
	font-size: 13px;
	text-shadow: 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000, -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000;
}

.exp {
	position: absolute;
	z-index: 4;
	margin-top: 71px;
	margin-left: 22px;
	background-color: silver;
	border: 1px solid black;
	width: 60px;
	height: 7px;
	border-radius: 6px;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	color: #fff9eb;
	text-align: center;
	padding-top: 3px;
	font-size: 13px;
	text-shadow: 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000, -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000;
}

.exp2 {
	position: absolute;
	z-index: 5;
	margin-top: -2.5px;
	background-color: blue;
	max-width: 60px;
	height: 6px;
	border-radius: 6px;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	color: #fff9eb;
	text-align: center;
	padding-top: 3px;
	font-size: 13px;
	text-shadow: 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000, -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000;
}

input::-webkit-input-placeholder {
	color: #9d8c6b;
}

input[type="text"],
input[type="password"],
input[type="file"],
textarea,
select {
	background: url(../img/light_paper.jpg);
	border: 1px solid #24211c;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
	width: 100%;
	max-width: 520px;
	padding: 10px 12px;
	color: #000;
	border-radius: 3px;
	-webkit-appearance: none;
	appearance: none;
}

input.min[type="text"],
select.min {
	background: url(../img/light_paper.jpg);
	border: 1px solid #24211c;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
	width: 100%;
	max-width: 120px;
	padding: 10px 12px;
	color: #000;
	border-radius: 3px;
	-webkit-appearance: none;
	appearance: none;
}

input.mini[type="text"],
select.mini {
	background: url(../img/light_paper.jpg);
	border: 1px solid #24211c;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
	width: 100%;
	max-width: 220px;
	padding: 10px 12px;
	color: #000;
	border-radius: 3px;
	-webkit-appearance: none;
	appearance: none;
}

select {
	width: 100%;
	max-width: 520px;
}

select.min {
	width: 100%;
	max-width: 120px;
}

select.mini {
	width: 100%;
	max-width: 220px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="file"]:focus,
textarea:focus,
select:focus {
	background: url(../img/light_paper.jpg);
	border: 1px solid #000;
	outline: none;
}

input[type="submit"],
input[type="button"],
.button,
button {
	font-size: 8pt;
	line-height: 1.25;
	font-family: Arial, Helvetica, sans-serif;
	outline: none;
	border: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	background: url(../img/btn_blue_center.png) repeat-x;
	text-align: center;
	position: relative;
	display: block;
	width: 100%;
	max-width: 340px;
	text-decoration: none;
	height: 42px;
	text-transform: uppercase;
	font-weight: bold;
	color: #ebdb84;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
	margin: 0 auto;
}

input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover,
button:hover {
	background: url(../img/btn_blue_center_hvr.png) repeat-x;
	color: #f6e89c;
}

input[type="submit"]::before,
input[type="button"]::before,
.button::before,
button::before {
	content: "";
	background: url(../img/btn_blue_left.png) no-repeat;
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0;
	height: 42px;
	width: 24px;
}

input[type="submit"]:hover::before,
input[type="button"]:hover::before,
.button:hover::before,
button:hover::before {
	background: url(../img/btn_blue_left_hvr.png) no-repeat;
}

input[type="submit"]::after,
input[type="button"]::after,
.button::after,
button::after {
	content: "";
	background: url(../img/btn_blue_right.png) no-repeat;
	display: inline-block;
	position: absolute;
	right: 0;
	top: 0;
	height: 42px;
	width: 24px;
}

input[type="submit"]:hover::after,
input[type="button"]:hover::after,
.button:hover::after,
button:hover::after {
	background: url(../img/btn_blue_right_hvr.png) no-repeat;
}

input[type="submit"] span,
input[type="button"] span,
.button span,
button span {
	position: relative;
}

.paper .border .padding .btn_blue,
.paper .border .padding .btn_green {
	font-size: 8pt;
	text-align: center;
	position: relative;
	display: block;
	text-decoration: none;
	height: 42px;
	text-transform: uppercase;
	font-weight: bold;
	color: #ebdb84;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
	width: 100%;
	max-width: 340px;
	margin: 0 auto;
}

.paper .border .padding .btn_blue {
	background: url(../img/btn_blue_center.png) repeat-x;
}

.paper .border .padding .btn_blue:hover {
	background: url(../img/btn_blue_center_hvr.png) repeat-x;
	color: #f6e89c;
}

.paper .border .padding .btn_blue::before {
	content: "";
	background: url(../img/btn_blue_left.png) no-repeat;
	display: inline-block;
	position: absolute;
	left: 0;
	height: 42px;
	width: 24px;
}

.paper .border .padding .btn_blue:hover::before {
	background: url(../img/btn_blue_left_hvr.png) no-repeat;
}

.paper .border .padding .btn_blue::after {
	content: "";
	background: url(../img/btn_blue_right.png) no-repeat;
	display: inline-block;
	position: absolute;
	right: 0;
	height: 42px;
	width: 24px;
}

.paper .border .padding .btn_blue:hover::after {
	background: url(../img/btn_blue_right_hvr.png) no-repeat;
}

.paper .border .padding .btn_blue span,
.paper .border .padding .btn_green span {
	position: relative;
	top: 14px;
}

.paper .border .padding .btn_green {
	background: url(../img/btn_green_center.png) repeat-x;
}

.paper .border .padding .btn_green:hover {
	background: url(../img/btn_green_center_hvr.png) repeat-x;
	color: #f6e89c;
}

.paper .border .padding .btn_green::before {
	content: "";
	background: url(../img/btn_green_left.png) no-repeat;
	display: inline-block;
	position: absolute;
	left: 0;
	height: 42px;
	width: 24px;
}

.paper .border .padding .btn_green:hover::before {
	background: url(../img/btn_green_left_hvr.png) no-repeat;
}

.paper .border .padding .btn_green::after {
	content: "";
	background: url(../img/btn_green_right.png) no-repeat;
	display: inline-block;
	position: absolute;
	right: 0;
	height: 42px;
	width: 24px;
}

.paper .border .padding .btn_green:hover::after {
	background: url(../img/btn_green_right_hvr.png) no-repeat;
}

.paper .border .padding .dialog tr:first-child td {
	position: relative;
	top: 3px;
}

.paper .border .padding .dialog tr:last-child td {
	position: relative;
	bottom: 3px;
}

.paper .border .padding .dialog tr:first-child td:first-child {
	width: 42px;
	padding-right: 8px;
}

.paper .border .padding .dialog tr:first-child td:last-child {
	vertical-align: middle;
	text-align: left;
}

.paper .border .padding .dialog tr:first-child td:last-child h3 {
	color: #500404;
	font-weight: bold;
	font-size: 12pt;
	display: block;
	text-decoration: none;
}

.paper .border .padding .dialog tr:last-child td .say_arrow {
	background: url(../img/say_arrow.png) no-repeat;
	position: relative;
	top: 5px;
	left: 16px;
	width: 13px;
	height: 7px;
	display: inline-block;
}

.paper .border .padding .dialog tr:last-child td .say {
	background: #e1dbbe url(../img/light_paper.jpg);
	font-size: 0.8em;
	border: 1px solid #24211c;
	border-radius: 4px;
	padding: 10px;
	color: #000;
	text-shadow: 0 1px 0 #faf2d7;
}

.light_paper .razdel {
	background: #cebc98;
	height: 1px;
	border-top: 1px solid #f8f2d1;
	border-bottom: 1px solid #f8f2d1;
}

.light_paper a {
	background: url(../img/link_arrow.png) no-repeat right;
	display: block;
	padding: 10px 15px;
	text-decoration: none;
	color: #24211c;
}

.light_paper a:hover {
	background: url(../img/link_arrow_hvr.png) no-repeat right;
	text-decoration: underline;
	color: #000;
}

.light_paper a img {
	vertical-align: middle;
	position: relative;
	bottom: 2px;
	margin: 0 8px 0 0;
}

.copyright {
	color: #e3cc98;
	text-align: center;
	padding: 0 0 25px 0;
}

.copyright a {
	color: #fff;
	text-decoration: underline;
}

.copyright a:hover {
	color: #fff;
	text-decoration: none;
}

img {
	vertical-align: middle;
	max-width: 100%;
	 
}

ul, li {
	list-style: square;
	margin: 0 0 0 5px;
	padding: 1px;
}

.page {
	border-radius: 6px;
	height: 20px;
	padding: 3px 6px;
	text-align: center;
	text-decoration: none;
	border: #b98a19 solid 1px;
	margin: 2px;
	display: inline-block;
}

.page:hover {
	border: #000 solid 1px;
	font-weight: normal;
	box-shadow: 0 0 2px 0 #7f8178;
}

#pushed {
	box-shadow: inset 0 0 3px #a2a2a1;
	border: #a08544 solid 1px;
}

.tp { position: relative; bottom: 10px; left: 10px; }
.tp2 { position: relative; bottom: 10px; right: 10px; }

.soon2 {
	color: black;
	position: absolute;
	cursor: default;
	display: block;
	font-size: 10px;
	padding: 2px;
	height: 18px;
	line-height: 10px;
	text-align: center;
	right: 1px;
	top: -1px;
}

.soon3 {
	color: black;
	position: absolute;
	cursor: default;
	display: block;
	font-size: 10px;
	padding: 2px;
	height: 18px;
	line-height: 10px;
	text-align: center;
	left: 1px;
	top: -1px;
}

.middle { vertical-align: middle; }

#stockBar {
	font-size: 10px;
	font-weight: bold;
	display: inline-grid;
	grid-template-columns: auto 5px auto;
	grid-template-rows: 36px;
	box-sizing: border-box;
	margin-top: -8px;
	max-width: 100%;
	overflow-x: auto;
}

#stockBar .warehouse {
	grid-column-start: 1;
	grid-template-columns: repeat(4, minmax(70px, 78px));
}

#stockBar .warehouse,
#stockBar .granary {
	position: relative;
	padding: 3px;
	display: inline-grid;
	background-image: linear-gradient(to bottom, #cba467 5%, #f3e2ae 13%, #efbf7b 32%, #aa8050 48%, #835e35 72%, #ad8a54 93%, #d7b672 100%);
	border: 1px solid #34220d;
	border-radius: 4px;
	max-width: 100%;
}

#stockBar .warehouse::before,
#stockBar .granary::before {
	content: "";
	position: absolute;
	top: 2px;
	right: 2px;
	bottom: 2px;
	left: 2px;
	background-color: #664e40;
	border: solid 1px #44321d;
	border-radius: 1px;
}

#stockBar .warehouse .capacity,
#stockBar .granary .capacity {
	color: #fff9eb;
	grid-template-columns: 30px 1fr;
	grid-template-rows: 28px;
}

#stockBar .warehouse .capacity,
#stockBar .warehouse .stockBarButton,
#stockBar .granary .capacity,
#stockBar .granary .stockBarButton {
	grid-column-start: auto;
	grid-row-start: 1;
	display: inline-grid;
	height: 25px;
	width: 74px;
	position: relative;
	color: #333;
	grid-template-columns: 18px 1fr 2px;
	grid-template-rows: 22px;
	background-color: #e3d4bc;
	border: 2px solid #968879;
	border-bottom-color: #695b52;
	border-top-color: #f4e8d3;
}

#stockBar .warehouse .capacity i,
#stockBar .granary .capacity i {
	grid-column-start: 1;
	justify-self: center;
}

#stockBar .warehouse .capacity i,
#stockBar .warehouse .capacity .value,
#stockBar .granary .capacity i,
#stockBar .granary .capacity .value {
	grid-row-start: 1;
	display: inline-block;
	align-self: center;
	text-align: center;
}

#stockBar i.warehouse_medium {
	background-image: url(../img/pastatai/sandelis2.png);
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
}

#stockBar .warehouse .capacity .value,
#stockBar .granary .capacity .value {
	grid-column-start: 2;
}

#stockBar .warehouse .stockBarButton,
#stockBar .granary .stockBarButton {
	height: 25px;
	width: 73px;
	position: relative;
	color: #333;
	grid-template-columns: 16px 1fr 2px;
	grid-template-rows: 22px;
	background-color: #e3d4bc;
	border: 2px solid #968879;
	border-bottom-color: #695b52;
	border-top-color: #f4e8d3;
	margin-left: 1px;
}

#stockBar .warehouse .stockBarButton i,
#stockBar .granary .stockBarButton i {
	grid-column-start: 1;
	justify-self: center;
	align-self: end;
}

#stockBar .warehouse .stockBarButton > *,
#stockBar .granary .stockBarButton > * {
	pointer-events: none;
}

i.molis_small {
	background-image: url(../img/resursai/molis.png);
	width: 16px;
	height: 18px;
	background-repeat: no-repeat;
}

i.mediena_small {
	background-image: url(../img/resursai/mediena.png);
	width: 16px;
	height: 18px;
	background-repeat: no-repeat;
}

i.ruda_small {
	background-image: url(../img/resursai/ruda.png);
	width: 16px;
	height: 18px;
	background-repeat: no-repeat;
}

#stockBar .warehouse .stockBarButton .value,
#stockBar .granary .stockBarButton .value {
	justify-self: end;
}

#stockBar .warehouse .stockBarButton .value,
#stockBar .warehouse .stockBarButton .barBox,
#stockBar .granary .stockBarButton .value,
#stockBar .granary .stockBarButton .barBox {
	grid-column-start: 2;
	grid-row-start: 1;
	margin-top: -1px;
	line-height: 9px;
	text-align: right;
}

#stockBar .warehouse .stockBarButton .barBox,
#stockBar .granary .stockBarButton .barBox {
	align-self: end;
	width: 53px;
	height: 3px;
	border: 1px solid #52372a;
	background-color: #52372a;
}

#stockBar .warehouse .stockBarButton .barBox .bar,
#stockBar .granary .stockBarButton .barBox .bar {
	background-color: #699e32;
	height: 100%;
}

a.capacity,
a.stockBarButton {
	text-decoration: none;
}

#navigation {
	display: grid;
	grid-template-columns: repeat(5, minmax(58px, 60px));
	grid-template-rows: 60px;
	justify-content: center;
	gap: 8px;
	margin-top: 7px;
}

#navigation > a.village,
#navigation > label.village {
	width: 58px;
	height: 58px;
}

#navigation > a::before,
#navigation > label::before {
	position: absolute;
	top: 5px;
	right: 5px;
	bottom: 5px;
	left: 5px;
	border: 1px solid #553420;
	border-radius: 50%;
	box-shadow: 0 -1px 0 0 #89735d, 0 1px 0 0 #aa9789, -1px 0 0 0 #8e7360, 1px 0 0 0 #8e7360, inset 0 0 3px 0 rgba(0, 0, 0, 0.5);
	background-color: #5e4538;
	transition-duration: 150ms;
}

#navigation > a.village::after,
#navigation > label.village::after {
	top: 1px;
	left: 1px;
}

#navigation > a::after,
#navigation > label::after {
	width: 62px;
	height: 62px;
	position: absolute;
	background-image: url(../img/navigation.png);
	transition: top 150ms;
}

#navigation > a.village.buildingView::after,
#navigation > label.village.buildingView::after {
	background-position: 0 -124px;
}

#navigation > a.village.buildingView.active::after,
#navigation > label.village.buildingView.active::after {
	background-position: 0 -186px;
}

#navigation > a.map::after,
#navigation > label.map::after {
	background-position: 0 -248px;
}

#navigation > a.map.active::after,
#navigation > label.map.active::after {
	background-position: 0 -310px;
}

#navigation > a.map::after,
#navigation > a.statistics::after,
#navigation > a.reports::after,
#navigation > a.messages::after,
#navigation > a.dailyQuests::after,
#navigation > a.mobileMenuButton::after,
#navigation > a.mobileShopButton::after,
#navigation > label.map::after,
#navigation > label.statistics::after,
#navigation > label.reports::after,
#navigation > label.messages::after,
#navigation > label.dailyQuests::after,
#navigation > label.mobileMenuButton::after,
#navigation > label.mobileShopButton::after {
	top: -3px;
	left: -3px;
}

#navigation > a::before,
#navigation > a::after,
#navigation > label::before,
#navigation > label::after {
	content: "";
}

#navigation > a.statistics::after,
#navigation > label.statistics::after {
	background-position: 0 -372px;
}

#navigation > a.statistics.active::after,
#navigation > label.statistics.active::after {
	background-position: 0 -434px;
}

#navigation > a.messages::after,
#navigation > label.messages::after {
	background-position: 0 -620px;
}

#navigation > a.messages.active::after,
#navigation > label.messages.active::after {
	background-position: 0 -682px;
}

#navigation > a .indicator,
#navigation > label .indicator {
	position: absolute;
	z-index: 6;
	background-image: url(../img/indicator.png);
	width: 27px;
	height: 23px;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	color: #fff9eb;
	text-align: center;
	padding-top: 3px;
	font-size: 13px;
	text-shadow: 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000, -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000;
}

#navigation > a.reports::after,
#navigation > label.reports::after {
	background-position: 0 -496px;
}

#navigation > a.reports.active::after,
#navigation > label.reports.active::after {
	background-position: 0 -558px;
}

#navigation > a.map,
#navigation > a.statistics,
#navigation > a.reports,
#navigation > a.messages,
#navigation > a.dailyQuests,
#navigation > a.mobileMenuButton,
#navigation > a.mobileShopButton,
#navigation > label.map,
#navigation > label.statistics,
#navigation > label.reports,
#navigation > label.messages,
#navigation > label.dailyQuests,
#navigation > label.mobileMenuButton,
#navigation > label.mobileShopButton {
	width: 58px;
	height: 58px;
}

#navigation > a,
#navigation > label {
	position: relative;
	border: 1px solid #553420;
	border-radius: 50%;
	background-image: linear-gradient(to bottom, #cbb198, #7b6050);
	box-shadow: inset 0 1px 0 0 #ddcbb7, inset 0 -1px 0 0 #664f3d, inset 1px 0 0 0 #bba693, inset -1px 0 0 0 #7d6651, 0 3px 3px 0 rgba(0, 0, 0, 0.3);
	display: inline-block;
	transition-duration: 150ms;
	-webkit-tap-highlight-color: transparent;
	justify-self: end;
	align-self: end;
}

#header #navigation > a.village.buildingView,
#header #navigation > label.village.buildingView {
	grid-column-start: 1;
}

#navigation > a.map,
#navigation > label.map {
	grid-column-start: 2;
}

#navigation > a.statistics,
#navigation > label.statistics {
	grid-column-start: 3;
}

#navigation > a.reports,
#navigation > label.reports {
	grid-column-start: 4;
}

#navigation > a.messages,
#navigation > label.messages {
	grid-column-start: 5;
}

#navigation > a:hover,
#navigation > a:focus,
#navigation > label:hover,
#navigation > label:focus {
	background-image: linear-gradient(to bottom, #dbc1a8, #b49581);
}

#navigation > a:hover::before,
#navigation > a:focus::before,
#navigation > label:hover::before,
#navigation > label:focus::before {
	filter: saturate(0.8) brightness(1.2);
	background-color: #7a6153;
	box-shadow: 0 -1px 0 0 #9b856f, 0 1px 0 0 #bca99b, -1px 0 0 0 #a08572, 1px 0 0 0 #a08572, inset 0 0 3px 0 rgba(0, 0, 0, 0.5);
}

#navigation > a.village.buildingView:hover::after,
#navigation > a.village.buildingView:focus::after,
#navigation > label.village.buildingView:hover::after,
#navigation > label.village.buildingView:focus::after {
	background-position: 0 -186px;
}

#navigation > a.village:hover::after,
#navigation > a.village:focus::after,
#navigation > label.village:hover::after,
#navigation > label.village:focus::after {
	top: -2px;
}

#navigation > a.map:hover::after,
#navigation > a.map:focus::after,
#navigation > label.map:hover::after,
#navigation > label.map:focus::after {
	background-position: 0 -310px;
}

#navigation > a.map:hover::after,
#navigation > a.map:focus::after,
#navigation > a.statistics:hover::after,
#navigation > a.statistics:focus::after,
#navigation > a.reports:hover::after,
#navigation > a.reports:focus::after,
#navigation > a.messages:hover::after,
#navigation > a.messages:focus::after,
#navigation > a.dailyQuests:hover::after,
#navigation > a.dailyQuests:focus::after,
#navigation > a.mobileMenuButton:hover::after,
#navigation > a.mobileMenuButton:focus::after,
#navigation > a.mobileShopButton:hover::after,
#navigation > a.mobileShopButton:focus::after,
#navigation > label.map:hover::after,
#navigation > label.map:focus::after,
#navigation > label.statistics:hover::after,
#navigation > label.statistics:focus::after,
#navigation > label.reports:hover::after,
#navigation > label.reports:focus::after,
#navigation > label.messages:hover::after,
#navigation > label.messages:focus::after,
#navigation > label.dailyQuests:hover::after,
#navigation > label.dailyQuests:focus::after,
#navigation > label.mobileMenuButton:hover::after,
#navigation > label.mobileMenuButton:focus::after,
#navigation > label.mobileShopButton:hover::after,
#navigation > label.mobileShopButton:focus::after {
	top: -5px;
}

#navigation > a.reports:hover::after,
#navigation > a.reports:focus::after,
#navigation > label.reports:hover::after,
#navigation > label.reports:focus::after {
	background-position: 0 -558px;
}

#navigation > a.messages:hover::after,
#navigation > a.messages:focus::after,
#navigation > label.messages:hover::after,
#navigation > label.messages:focus::after {
	background-position: 0 -682px;
}

#navigation > a.statistics:hover::after,
#navigation > a.statistics:focus::after,
#navigation > label.statistics:hover::after,
#navigation > label.statistics:focus::after {
	background-position: 0 -434px;
}

/* Modernesnis lentelių vaizdas */
.stats-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
	margin-bottom: 10px;
	display: block;
	overflow-x: auto;
	white-space: nowrap;
}

.stats-table thead,
.stats-table tbody,
.stats-table tr {
	width: 100%;
}

.stats-table th {
	text-align: left;
	border-bottom: 2px solid #666;
	padding: 6px 4px;
}

.stats-table td {
	padding: 6px 4px;
	border-bottom: 1px solid #ccc;
	white-space: nowrap;
}

.stats-highlight {
	background: #fff7b3;
	font-weight: bold;
}

.stats-table tr:hover {
	background: #f3f3f3;
	cursor: default;
}

/* HALL OF FAME */
.hall-menu {
	text-align: center;
	padding: 10px;
	justify-content: center;
	margin-bottom: 14px;
}

.hall-menu a {
	background: none !important;
	padding: 8px 16px;
	color: white;
	margin-right: 5px;
	text-decoration: none;
	border-radius: 5px;
	display: inline-block;
	min-width: 110px;
	text-align: center;
}

.halltable {
	width: 100%;
	border-collapse: collapse;
	margin-top: 15px;
	display: block;
	overflow-x: auto;
	white-space: nowrap;
}

.halltable th {
	background: none !important;
	padding: 6px;
	border: 1px solid #000;
	text-align: center;
}

.halltable td {
	background: #fee;
	padding: 6px;
	border: 3px solid #ccc;
	text-align: center;
}

.halltable tr:nth-child(even) {
	background: none !important;
}

.top1 { background: none !important; }
.top2 { background: none !important; }
.top3 { background: none !important; }

.nodata {
	background: #fee;
	padding: 10px;
	border: 1px solid #800;
	margin: 10px 0;
	text-align: center;
}

/* Travian-like map */
.mapWrap {
	display: block;
	width: 100%;
	overflow-x: auto;
	background: #000;
	padding: 2px;
}

.mapTbl {
	border-collapse: collapse;
	margin: 0 auto;
}

.mCell {
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
}

.mTile {
	display: block;
	width: 32px;
	height: 32px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.mTile:hover {
	outline: 2px solid #fff;
	box-shadow: 0 0 0 2px #000 inset;
}

.mHere {
	outline: 2px solid #ff0000;
	box-shadow: 0 0 0 2px #000 inset;
}

.mapNav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 6px 0;
	flex-wrap: wrap;
}

/* Tablet */
@media screen and (min-width: 768px) {
	body {
		max-width: 980px;
		padding: 0 18px;
		font-size: 11pt;
	}

	.paper .border .padding {
		padding: 20px 30px;
	}

	.stats-table {
		font-size: 13px;
	}

	.mCell,
	.mTile {
		width: 36px;
		height: 36px;
	}
}

/* Desktop */
@media screen and (min-width: 1024px) {
	body {
		max-width: 1280px;
		font-size: 12pt;
		padding: 0 24px;
	}

	.paper .border .padding {
		padding: 24px 40px;
	}

	.headbar {
		height: 72px;
		top: 18px;
	}

	.headbar .center {
		height: 72px;
		margin-left: 70px;
		margin-right: 40px;
	}

	.footbar {
		height: 34px;
		bottom: 10px;
	}

	.footbar .center {
		height: 34px;
		margin-left: 180px;
		margin-right: 140px;
	}

	.big {
		font-size: 15pt;
	}

	.small {
		font-size: 10pt;
	}

	.stats-table {
		font-size: 14px;
	}

	.halltable th,
	.halltable td,
	.stats-table th,
	.stats-table td {
		padding: 10px 8px;
	}

	#navigation {
		gap: 14px;
		margin-top: 14px;
	}

	.mapWrap {
		padding: 6px;
	}

	.mCell,
	.mTile {
		width: 40px;
		height: 40px;
	}
}

/* Small mobile adjustments */
@media screen and (max-width: 480px) {
	body {
		padding: 0 8px;
	}

	.paper .border .padding {
		padding: 12px 14px;
	}

	.top_wave,
	.bottom_wave,
	.light_paper,
	.juosta,
	.juosta2 {
		margin-left: -8px;
		margin-right: -8px;
	}

	#navigation {
		grid-template-columns: repeat(5, 58px);
		gap: 4px;
		overflow-x: auto;
		justify-content: start;
		padding-bottom: 4px;
	}

	input[type="submit"],
	input[type="button"],
	.button,
	button,
	.paper .border .padding .btn_blue,
	.paper .border .padding .btn_green {
		max-width: 100%;
	}

	select,
	input[type="text"],
	input[type="password"],
	input[type="file"],
	textarea {
		max-width: 100%;
	}
}
/* ===== MAP PAGE REWORK ===== */

.map-page {
	margin-top: 10px;
}

.map-topbar {
	margin-bottom: 14px;
}

.map-units-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 18px;
	align-items: center;
	justify-content: center;
	padding: 12px 10px;
}

.map-unit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: bold;
}

.map-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 18px;
	align-items: start;
}

.map-left,
.map-right {
	min-width: 0;
}

.map-card {
	background: #e1dbbe url(../img/light_paper.jpg);
	border: 1px solid #b98a19;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 1px 3px rgba(0,0,0,0.12);
	padding: 14px;
	margin-bottom: 16px;
}

.map-card-title {
	font-size: 24px;
	line-height: 1.1;
	font-weight: bold;
	margin: 0 0 12px 0;
	color: #2f2417;
}

.map-card-subtitle {
	font-size: 18px;
	line-height: 1.15;
	font-weight: bold;
	margin: 0 0 10px 0;
	color: #2f2417;
}

.map-shell {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.map-arrow-side a,
.map-arrow-vertical a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.map-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.map-grid-wrap {
	background: #d7c79c;
	border: 1px solid #8c6c2d;
	padding: 8px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}

.map-grid {
	border-collapse: collapse;
	margin: 0;
}

.map-grid td {
	padding: 0;
	margin: 0;
	line-height: 0;
}

.map-grid img {
	display: block;
	max-width: none;
}

.map-jump-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.map-jump-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
}

.map-field label {
	display: block;
	font-weight: bold;
	margin-bottom: 4px;
}

.map-field input.min {
	max-width: none;
	width: 100%;
}

.map-note-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.map-note-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border: 1px solid #c9b17d;
	background: rgba(255,255,255,0.18);
	text-decoration: none;
}

.map-note-item:hover {
	background: rgba(255,255,255,0.28);
}

.map-note-item img {
	width: 54px;
	height: 54px;
	object-fit: contain;
	flex: 0 0 54px;
}

.map-info-row {
	margin-bottom: 8px;
}

.map-empty {
	color: #5a4c33;
	font-size: 10pt;
}

.map-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.map-actions a {
	text-decoration: none;
}

.map-actions .light_paper {
	margin-left: 0;
	margin-right: 0;
}

.map-actions .top_wave,
.map-actions .bottom_wave {
	margin-left: 0;
	margin-right: 0;
}

@media screen and (max-width: 900px) {
	.map-layout {
		grid-template-columns: 1fr;
	}

	.map-right {
		order: 2;
	}

	.map-left {
		order: 1;
	}
}

@media screen and (max-width: 640px) {
	.map-shell {
		gap: 8px;
	}

	.map-card {
		padding: 10px;
	}

	.map-jump-row {
		grid-template-columns: 1fr;
	}
}
/* ===== MAP RESPONSIVE FIX ===== */

.map-page {
	width: 100%;
}

.map-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) 320px;
	gap: 18px;
	align-items: start;
}

.map-left,
.map-right {
	min-width: 0;
}

.map-card {
	padding: 12px;
	margin-bottom: 14px;
}

.map-card-title {
	font-size: 24px;
	line-height: 1.1;
	margin: 0 0 10px 0;
	font-weight: bold;
}

.map-card-subtitle {
	font-size: 18px;
	line-height: 1.1;
	margin: 0 0 10px 0;
	font-weight: bold;
}

.map-shell {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
}

.map-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
}

.map-grid-wrap {
	background: #d7c79c;
	border: 1px solid #8c6c2d;
	padding: 4px;
	max-width: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.map-grid {
	border-collapse: collapse;
	margin: 0 auto;
}

.map-grid td {
	padding: 0;
	margin: 0;
	line-height: 0;
}

.map-grid img {
	display: block;
	max-width: none;
	height: auto;
}

.map-jump-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.map-jump-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.map-field label {
	display: block;
	font-weight: bold;
	margin-bottom: 4px;
}

.map-field input.min {
	width: 100%;
	max-width: none;
}

.map-units-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	align-items: center;
	justify-content: center;
}

.map-unit {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: bold;
}

.map-note-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.map-note-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border: 1px solid #c9b17d;
	background: rgba(255,255,255,0.18);
	text-decoration: none;
}

.map-note-item img {
	width: 52px;
	height: 52px;
	flex: 0 0 52px;
	object-fit: cover;
	border: 1px solid #c9b17d;
	background: #d7c79c;
	padding: 2px;
}

.map-selected-box {
	display: flex;
	gap: 12px;
	align-items: center;
}

.map-selected-box img {
	width: 72px;
	height: 72px;
	object-fit: contain;
	flex: 0 0 72px;
}

@media screen and (max-width: 900px) {
	.map-layout {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.map-right,
	.map-left {
		order: initial;
	}
}

@media screen and (max-width: 700px) {
	.map-card {
		padding: 10px;
	}

	.map-card-title {
		font-size: 20px;
	}

	.map-card-subtitle {
		font-size: 16px;
	}

	.map-jump-row {
		grid-template-columns: 1fr;
	}

	.map-shell {
		display: block;
		text-align: center;
	}

	.map-arrow-side {
		display: inline-block;
		vertical-align: middle;
		margin: 0 6px;
	}

	.map-center {
		display: inline-flex;
		width: auto;
		max-width: 100%;
	}

	.map-grid-wrap {
		max-width: calc(100vw - 56px);
		margin: 0 auto;
	}

	.map-selected-box {
		align-items: flex-start;
	}

	.map-selected-box img {
		width: 58px;
		height: 58px;
		flex-basis: 58px;
	}

	.juosta2.map-topbar {
		padding-left: 10px;
		padding-right: 10px;
	}
}

@media screen and (max-width: 480px) {
	body {
		padding-left: 6px;
		padding-right: 6px;
	}

	.paper .border .padding {
		padding: 10px 12px;
	}

	.map-card {
		padding: 8px;
	}

	.map-grid-wrap {
		max-width: calc(100vw - 38px);
		padding: 2px;
	}

	.map-note-item {
		gap: 8px;
		padding: 7px;
	}

	.map-note-item img {
		width: 44px;
		height: 44px;
		flex-basis: 44px;
	}

	.map-selected-box {
		gap: 8px;
	}

	.map-selected-box img {
		width: 48px;
		height: 48px;
		flex-basis: 48px;
	}
}
/* ===== MAP TILE SIZE (DESKTOP vs MOBILE) ===== */

/* MOBILE (default) */
.map-grid img {
	display: block;
	width: 32px;
	height: 32px;
	max-width: none;
	image-rendering: pixelated;
}

/* TABLET */
@media screen and (min-width: 768px) {
	.map-grid img {
		width: 40px;
		height: 40px;
	}
}

/* DESKTOP */
@media screen and (min-width: 1100px) {
	.map-grid img {
		width: 48px;
		height: 48px;
	}
}

/* EXTRA BIG DESKTOP (optional, jei nori dar didesnio) */
@media screen and (min-width: 1400px) {
	.map-grid img {
		width: 56px;
		height: 56px;
	}
}

/* mažiau oro aplink mapą */
.map-shell {
	gap: 6px;
}

.map-center {
	gap: 4px;
	width: 100%;
}

.map-grid-wrap {
	padding: 3px;
	display: inline-block;
	max-width: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
/* ===== MAP DESKTOP/MOBILE SPLIT ===== */

.map-page {
	width: 100%;
	margin-top: 10px;
}

.map-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) 320px;
	gap: 18px;
	align-items: start;
}

.map-left,
.map-right {
	min-width: 0;
}

.map-card {
	background: #e1dbbe url(../img/light_paper.jpg);
	border: 1px solid #b98a19;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 1px 3px rgba(0,0,0,0.12);
	padding: 12px;
	margin-bottom: 14px;
}

.map-card-title {
	font-size: 24px;
	line-height: 1.1;
	font-weight: bold;
	margin: 0 0 10px 0;
	color: #2f2417;
}

.map-card-subtitle {
	font-size: 18px;
	line-height: 1.1;
	font-weight: bold;
	margin: 0 0 10px 0;
	color: #2f2417;
}

.map-topbar {
	margin-bottom: 14px;
}

.map-units-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	align-items: center;
	justify-content: center;
}

.map-unit {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: bold;
}

.map-shell {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
}

.map-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 100%;
}

.map-grid-wrap {
	background: #d7c79c;
	border: 1px solid #8c6c2d;
	padding: 3px;
	display: inline-block;
	max-width: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.map-grid {
	border-collapse: collapse;
	margin: 0 auto;
}

.map-grid td {
	padding: 0;
	margin: 0;
	line-height: 0;
}

.map-grid img {
	display: block;
	width: 32px;
	height: 32px;
	max-width: none;
	image-rendering: pixelated;
}

.map-jump-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.map-jump-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.map-field label {
	display: block;
	font-weight: bold;
	margin-bottom: 4px;
}

.map-field input.min {
	width: 100%;
	max-width: none;
}

.map-note-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.map-note-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border: 1px solid #c9b17d;
	background: rgba(255,255,255,0.18);
	text-decoration: none;
}

.map-note-item img {
	width: 52px;
	height: 52px;
	flex: 0 0 52px;
	object-fit: cover;
	border: 1px solid #c9b17d;
	background: #d7c79c;
	padding: 2px;
}

.map-empty {
	color: #5a4c33;
	font-size: 10pt;
}

.map-selected-box {
	display: flex;
	gap: 12px;
	align-items: center;
}

.map-info-row {
	margin-bottom: 6px;
}

/* tablet */
@media screen and (min-width: 768px) {
	.map-grid img {
		width: 40px;
		height: 40px;
	}
}

/* desktop */
@media screen and (min-width: 1100px) {
	.map-grid img {
		width: 40px;
		height: 40px;
	}
}

/* extra big desktop */
@media screen and (min-width: 1400px) {
	.map-grid img {
		width: 40px;
		height: 40px;
	}
}

/* jei kas nors atsidaro siauresniam lange desktop layoutą */
@media screen and (max-width: 900px) {
	.map-layout {
		grid-template-columns: 1fr;
	}
}
.map-oasis-grid {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap:10px;
}

.map-oasis-card {
	display:flex;
	gap:10px;
	padding:10px;
	border:1px solid #c9b17d;
	background:#eee;
	text-decoration:none;
}