/* Layout and images follow the old official site. Rules are trimmed to what
   these pages use. Phone rules are at the end. */

/* reset */
html, body, div, span, h1, h2, h3, h4, p, a, img, strong, small, ul, li, form, label,
table, tbody, thead, tr, th, td, button, input {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
*, *::before, *::after { box-sizing: content-box; }
ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
html { height: 100%; }
body {
	background: #000 url(../img/container-bg.jpg) repeat-y 50% 0;
	color: #160400;
	font: 12px/16px Arial, Helvetica, sans-serif;
	height: 100%;
}
img { border: none; display: block; }
#page { min-height: 100%; overflow: hidden; }
.center { text-align: center; }

/* header */
.header-wrapper {
	background: url(../img/header-bg.jpg) no-repeat 50% 0;
	height: 253px;
}
#header {
	height: 230px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	width: 930px;
}
.logo {
	display: block;
	left: 350px;
	position: absolute;
	top: 5px;
	width: 230px;
}
.logo img { height: auto; width: 100%; }
.header-box {
	margin: 132px 0 0 199px;
	overflow: hidden;
	width: 534px;
}
#regBtn {
	background: url(../img/reg-btn.jpg) no-repeat;
	height: 92px;
	margin: 0 auto;
	width: 533px;
}
#regBtn:hover { background-position: 0 -92px; }
#regBtn a#toReg {
	color: #f2e69f;
	display: block;
	font-size: 21px;
	font-weight: bold;
	height: 72px;
	line-height: 72px;
	overflow: hidden;
	padding: 0 0 0 100px;
	text-align: left;
	text-decoration: none;
	text-shadow: 2px 2px 5px #000;
	white-space: nowrap;
	width: 433px;
}
#regSteps { height: 20px; text-align: center; }
#regSteps a { color: #f2e69f; font-weight: bold; text-decoration: none; }
#regSteps a:hover, #regBtn a#toReg:hover { color: #fff; }
#regSteps span { font-size: 12px; }
#userBox { margin: 150px 0 0; }
.header-box-nav-login { display: flex; gap: 14px; justify-content: center; }
.nav-box-btn {
	background-color: transparent;
	background-repeat: no-repeat;
	color: #fef6aa;
	cursor: pointer;
	display: block;
	font: 12px/15px Arial, Helvetica, sans-serif;
	height: 20px;
	padding: 5px 0 0 18px;
	text-align: center;
	text-decoration: none;
	width: 132px;
}
.nav-box-btn:hover { text-decoration: underline; }
.nav-box-btn-1 { background-image: url(../img/nav-box-login-1-bg.gif); }
.nav-box-btn-2 { background-image: url(../img/nav-box-login-2-bg.gif); }
.nav-box-btn-4 { background-image: url(../img/nav-box-login-4-bg.gif); }

/* footer */
.footer-wrapper {
	background: url(../img/footer-bg.png) no-repeat 50% 0;
	float: left;
	height: 220px;
	margin: -130px 0 0;
	width: 100%;
}
#footer { margin: 0 auto; overflow: hidden; width: 930px; }
#footer ul {
	background: url(../img/footer-box.jpg) no-repeat;
	font-size: 11px;
	height: 41px;
	line-height: 15px;
	margin: 127px 0 0 171px;
	padding: 9px 0 0;
	text-align: center;
	width: 585px;
}
#footer ul li {
	background: url(../img/sep.gif) no-repeat 0 7px;
	color: #ae9467;
	display: inline;
	padding: 0 5px 0 13px;
}
#footer ul li.first { background: none; display: block; padding: 0; }
#footer ul li.plain { background: none; }
#footer ul li a { color: #ae9467; text-decoration: none; }
#footer ul li a:hover { text-decoration: underline; }

/* columns */
.container-wrapper {
	background: url(../img/container-bg-top.jpg) no-repeat 50% 0;
	float: left;
	min-height: 520px;
	padding: 0 0 150px;
	width: 100%;
}
.container { margin: 0 auto; position: relative; width: 930px; }
.col-1, .col-3 {
	float: left;
	margin: -64px 0 0 11px;
	overflow: hidden;
	position: relative;
	width: 157px;
}
.col-3 { float: right; margin: -64px 9px 0 0; }
.col-2 { float: left; margin: 33px 0 0 46px; width: 507px; }

/* side boxes */
.boxes-top { background: url(../img/box-top-1.jpg) no-repeat; height: 23px; width: 157px; }
.col-3 .boxes-top { background-image: url(../img/box-top-2.jpg); }
.boxes-bottom {
	background: url(../img/box-bottom.png) no-repeat;
	height: 48px;
	margin: 0 0 0 4px;
	width: 150px;
}
.boxes-middle {
	background: url(../img/box-middle.png) no-repeat;
	height: 32px;
	margin: 0 0 0 12px;
	width: 134px;
}
.modul-box { background: url(../img/modul-box-bg.jpg) repeat-y; width: 157px; }
.modul-box .modul-box-bg { background: url(../img/modul-box-top.jpg) no-repeat; }
.modul-box-2 .modul-box-bg { background-image: url(../img/modul-box-top-2.jpg); }
.modul-box .modul-box-bg-bottom {
	background: url(../img/modul-box-bottom.jpg) no-repeat 0 100%;
	min-height: 132px;
	overflow: hidden;
	padding: 0 0 5px;
	width: 100%;
}
.main-nav { margin: 24px 0 0; padding: 0 0 16px; }
.main-nav li { padding: 0 0 5px; }
.main-nav li a, .modul-box h3 {
	background: url(../img/main-mav-bg.gif) no-repeat;
	color: #fef6aa;
	display: block;
	font-size: 12px;
	font-weight: bold;
	height: 26px;
	line-height: 15px;
	overflow: hidden;
	padding: 8px 0 0;
	text-align: center;
	text-decoration: none;
	width: 157px;
}
.modul-box h3 { margin: 24px 0 0; }
.main-nav li a:hover, .main-nav li a.active { background-position: 0 -34px; color: #fffde8; }
.download-btn {
	background: url(../img/nav-download-btn.jpg) no-repeat;
	display: block;
	height: 68px;
	margin: 4px 0 9px 14px;
	width: 130px;
}

/* side login */
.form-login { margin: 6px 0 0 14px; overflow: hidden; padding: 0 0 12px; width: 129px; }
.form-login label { color: #4a1e00; display: block; font-size: 11px; line-height: 14px; }
.form-login .input {
	background: url(../img/input-bg-4.gif) no-repeat;
	height: 18px;
	margin: 2px 0 0;
	padding: 0 0 4px;
	width: 129px;
}
.form-login .input input {
	background: none;
	color: #160400;
	font: 11px/13px Arial, Helvetica, sans-serif;
	height: 14px;
	margin: 2px 0 0 4px;
	outline: none;
	width: 121px;
}
.welcome p { color: #4a1e00; font-size: 11px; line-height: 16px; text-align: center; }
.offset { color: #943b00; font-weight: bold; }
.button {
	background: url(../img/button-bg-2.gif) no-repeat;
	color: #dfbf8b;
	cursor: pointer;
	display: block;
	font: 11px/14px Arial, Helvetica, sans-serif;
	height: 20px;
	margin: 4px 0 0;
	padding: 0 14px 2px 0;
	text-align: center;
	width: 115px;
}
.button:hover, .btn:hover { text-decoration: underline; }
.btn {
	background: url(../img/button-bg-2.gif) no-repeat;
	color: #dfbf8b;
	display: block;
	font-size: 10px;
	font-weight: bold;
	height: 17px;
	line-height: 12px;
	margin: 4px 0 0;
	padding: 3px 14px 0 0;
	text-align: center;
	text-decoration: none;
	width: 115px;
}
.agbok { color: #775555; font-size: 9px; line-height: 11px; margin: 8px 0 0; text-align: center; }
.agbok a { color: #8d0404; text-decoration: none; }

/* top players */
.form-score { margin: 5px 0 0 10px; padding: 0 0 8px; width: 137px; }
.form-score ul { margin: 6px 0 0; padding: 0 0 1px; }
.form-score ul li { color: #4a1e00; font-size: 11px; line-height: 14px; padding: 3px 0 3px 6px; }
.form-score ul li.light { background: url(../img/light_gf.gif) no-repeat; }
.form-score ul li div {
	background: no-repeat 100% 0;
	overflow: hidden;
	padding-right: 26px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.form-score ul li div.empire1 { background-image: url(../img/1_s.png); }
.form-score ul li div.empire2 { background-image: url(../img/2_s.png); }
.form-score ul li div.empire3 { background-image: url(../img/3_s.png); }
.form-score ul li strong { color: #8d0404; margin: 0 4px 0 0; }
.form-score .btn { background-image: url(../img/button-bg-3.gif); margin: 6px 0 0 4px; }
.side-note { color: #4a1e00; font-size: 11px; line-height: 14px; padding: 6px; text-align: center; }

/* centre */
.content { background: url(../img/content-box-bg.jpg) repeat-y; width: 507px; }
.content .content-bg { background: url(../img/content-box-top.jpg) no-repeat; }
.content .content-bg-bottom {
	background: url(../img/content-box-bottom.jpg) no-repeat 0 100%;
	overflow: hidden;
	padding: 0 11px 11px;
	width: 485px;
}
.content h2 {
	background: url(../img/heading-3.jpg) no-repeat;
	color: #7b1300;
	font-size: 14px;
	font-weight: bold;
	height: 16px;
	line-height: 16px;
	margin: 11px 0 0;
	padding: 7px 0 7px 33px;
}
.shadow {
	background: url(../img/shadow-2.png) no-repeat;
	height: 5px;
	margin: 0 0 8px;
	overflow: hidden;
	width: 507px;
}
.inner-content { margin: 8px 12px 0; padding: 0 0 12px; }
.inner-content p { line-height: 16px; margin: 0; padding: 0 0 10px; }
.inner-content h3 {
	color: #7b1300;
	font-size: 13px;
	font-weight: bold;
	line-height: 15px;
	margin: 9px 0 0;
	padding: 0 0 8px;
}
.inner-content ul { margin: 0; padding: 0 0 6px; }
.inner-content ul li {
	background: url(../img/bullet.gif) no-repeat;
	padding: 0 0 10px 20px;
}
.inner-content a { color: #8d0404; font-weight: bold; }
.plain-table { margin: 0 0 12px; table-layout: fixed; width: 100%; }
.plain-table th, .plain-table td {
	border-bottom: 1px solid #b79647;
	line-height: 16px;
	padding: 6px 8px;
	text-align: left;
	vertical-align: top;
}
.plain-table th { color: #7b1300; font-weight: bold; width: 84px; }
.notice-ok {
	background: url(../img/valid-icon.gif) no-repeat 0 1px;
	color: #006f07;
	font-weight: bold;
	margin: 12px 0;
	padding: 0 0 0 24px;
}
.notice-wait { color: #7b1300; font-size: 13px; font-weight: bold; text-align: center; }

/* forms */
.inner-form-border { border: 1px solid #aa8551; margin: 15px 0 20px 25px; width: 430px; }
.inner-form-box {
	background: url(../img/form-bg.jpg) repeat;
	border: 1px solid #c6ab74;
	color: #4a1e00;
	overflow: hidden;
	padding: 15px;
}
.inner-form-box h3 { color: #4a1e00; font-size: 18px; height: 33px; line-height: 22px; }
.inner-form-box p { line-height: 16px; margin: 0 0 10px; }
.inner-form-box a { color: #8d0404; text-decoration: none; }
.inner-form-box a:hover { text-decoration: underline; }
.trenner {
	background: url(../img/trenner-shadow.jpg) no-repeat 50% 0;
	border-top: 1px solid #b28a45;
	height: 8px;
	margin: 0 auto 8px;
}
#toLogin {
	background: url(../img/button-bg-2.gif) no-repeat;
	color: #dfbf8b;
	float: right;
	font-size: 10px;
	font-weight: normal;
	height: 20px;
	line-height: 20px;
	padding: 0 20px 0 0;
	text-align: center;
	width: 109px;
}
.grid-form { margin: 8px 0 0; }
.form-row {
	align-items: center;
	column-gap: 12px;
	display: grid;
	grid-template-columns: 130px 1fr;
	margin: 0 0 12px;
}
.form-row label { color: #4a1e00; font-weight: bold; }
.form-row input {
	background: url(../img/form-input-bg.gif) repeat-x;
	border: 1px solid #622400;
	box-sizing: border-box;
	color: #534236;
	font: bold 14px/18px Arial, Helvetica, sans-serif;
	height: 30px;
	padding: 4px 8px;
	width: 100%;
}
.form-row input:focus { border-color: #8d0404; outline: none; }
.form-row small { color: #775555; font-size: 11px; grid-column: 2; line-height: 14px; margin: 3px 0 0; }
.form-note { color: #775555; font-size: 11px; }
.btn-big, a.btn-big {
	background: url(../img/btn-big.jpg) no-repeat;
	border: 0;
	color: #dfbf8b;
	cursor: pointer;
	display: block;
	font: bold 16px/38px Arial, Helvetica, sans-serif;
	height: 38px;
	margin: 12px auto 4px;
	max-width: 100%;
	text-align: center;
	text-decoration: none;
	text-shadow: -1px -1px #000;
	width: 287px;
}
.btn-big:hover, a.btn-big:hover { background-position: 0 -38px; color: #fff; text-decoration: none; }
#subscribe { margin: 12px auto 0; max-width: 287px; }
#subscribe h3 { font-size: 13px; height: auto; text-align: center; }
.error-mini {
	background: url(../img/error-mini.gif) no-repeat 0 0;
	color: #af1b03;
	font-weight: bold;
	margin: 10px 0 12px;
	padding: 0 0 0 20px;
}
.delete-code {
	background: #cdb78b;
	border: 1px solid #997c47;
	color: #7b1300;
	font: bold 24px/40px Arial, Helvetica, sans-serif;
	letter-spacing: 4px;
	text-align: center;
}

/* download */
#bigDownload {
	background: url(../img/big-download.jpg) no-repeat;
	box-sizing: border-box;
	color: #fff9c7;
	display: block;
	font-size: 22px;
	font-weight: bold;
	height: 103px;
	line-height: 103px;
	margin: 0 auto 12px;
	padding: 0 0 0 112px;
	text-align: left;
	text-decoration: none;
	text-shadow: 2px 2px 5px #000;
	width: 398px;
}
#bigDownload:hover { background-position: 0 -108px; color: #fff; }

/* rankings */
.tabs-nav { display: flex; gap: 6px; margin: 8px 0 0; }
.tabs-nav li { background: url(../img/tabs2-navi.png) no-repeat 0 -40px; flex: 1; height: 34px; }
.tabs-nav li + li { background-position: -240px -40px; }
.tabs-nav li.selected { background-position: 0 0; }
.tabs-nav li + li.selected { background-position: -240px 0; }
.tabs-nav li a {
	color: #7b1300;
	display: block;
	font: bold 12px/30px Arial, Helvetica, sans-serif;
	text-align: center;
	text-decoration: none;
}
.tabs-nav li a:hover { text-decoration: underline; }
.rank-table { margin: 8px 0 0; table-layout: fixed; width: 100%; }
.rank-table th, .rank-table td {
	border: 1px solid #b39164;
	color: #8d0404;
	line-height: 14px;
	overflow-wrap: anywhere;
	padding: 7px 8px;
	text-align: left;
	vertical-align: middle;
}
.rank-table th { background: url(../img/table-zebra.jpg); font-weight: bold; }
.rank-table tbody tr:nth-child(even) { background: url(../img/table-zebra.jpg); }
.rank-table .col-rank { font-weight: bold; text-align: center; width: 36px; }
.rank-table .col-num { text-align: center; width: 48px; }
.rank-table .col-empire { width: 64px; }
.rank-table .col-guild { width: 104px; }
.rank-table .empty { text-align: center; }
.rank-note { color: #775555; font-size: 11px; margin: 8px 0 0; text-align: right; }

/* phone and tablet: one column, images that have a fixed width become fluid */
@media (max-width: 929px) {
	body { font-size: 14px; line-height: 20px; }
	.header-wrapper { height: auto; min-height: 196px; }
	#header { height: auto; padding: 0 16px 16px; width: auto; }
	.logo { left: 50%; margin-left: -115px; }
	.header-box { margin: 124px auto 0; max-width: 533px; width: 100%; }
	#regBtn { background-size: 533px 184px; border-radius: 4px; max-width: 100%; width: auto; }
	#regBtn a#toReg { font-size: 16px; padding: 0 0 0 96px; width: auto; }
	#regSteps span { font-size: 11px; }
	#userBox { margin: 124px 0 0; }
	.header-box-nav-login { flex-wrap: wrap; }

	.container-wrapper { background: none; min-height: 0; padding: 0 0 130px; }
	.container { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 0; width: auto; }
	.col-1, .col-2, .col-3 { float: none; margin: 0; overflow: visible; width: 100%; }
	.col-1 { order: 1; }
	.col-2 { order: 2; }
	.col-3 { order: 3; }

	.boxes-top, .boxes-middle, .boxes-bottom { display: none; }
	.modul-box {
		background: url(../img/form-bg.jpg) repeat;
		border: 1px solid #aa8551;
		box-sizing: border-box;
		margin: 0 0 12px;
		padding: 12px 4px;
		width: 100%;
	}
	.modul-box .modul-box-bg, .modul-box .modul-box-bg-bottom { background: none; min-height: 0; padding: 0; }
	.box-download { display: none; }
	.main-nav {
		display: grid;
		gap: 4px 8px;
		grid-template-columns: repeat(auto-fit, 157px);
		justify-content: center;
		margin: 0;
		padding: 0;
	}
	.main-nav li { padding: 0; }
	.modul-box h3 { margin: 0 auto 8px; }
	.form-login, .form-score { margin: 0 auto; }

	.content, .shadow { max-width: 100%; }
	.content { background-size: 100% auto; width: 100%; }
	.content .content-bg { background-size: 100% auto; }
	.content .content-bg-bottom { background-size: 100% auto; box-sizing: border-box; padding: 0 8px 12px; width: 100%; }
	.shadow { background-size: 100% 100%; width: 100%; }
	.inner-content { margin: 8px 4px 0; }
	.inner-form-border { box-sizing: border-box; margin: 12px 0; max-width: 100%; width: 100%; }
	.inner-form-box { padding: 12px; }
	.form-row { display: block; }
	.form-row label { display: block; margin: 0 0 4px; }
	.form-row input { font-size: 16px; height: 38px; }
	.form-row small { display: block; }
	.btn-big, a.btn-big { background-size: 100% 76px; }
	.btn-big:hover, a.btn-big:hover { background-position: 0 -38px; }
	#bigDownload { background-size: 100% auto; font-size: 17px; height: auto; line-height: 1; max-width: 398px; padding: 11% 0 11% 30%; width: 100%; }
	#bigDownload:hover { background-position: 0 0; }
	.plain-table th { white-space: nowrap; width: 84px; }

	.tabs-nav li { background: #d8c493; border: 1px solid #b39164; height: auto; }
	.tabs-nav li + li { background: #d8c493; }
	.tabs-nav li.selected, .tabs-nav li + li.selected { background: #ead9ac; }
	.tabs-nav li a { font-size: 14px; line-height: 36px; }
	.rank-table th, .rank-table td { font-size: 12px; padding: 6px 4px; }
	.rank-table .col-rank { width: 30px; }
	.rank-table .col-num { width: 40px; }
	.rank-table .col-empire { width: 52px; }
	.rank-table .col-guild { width: 68px; }

	.footer-wrapper { background-position: 50% 0; }
	#footer { padding: 0 16px; width: auto; }
	#footer ul {
		background: none;
		box-sizing: border-box;
		height: auto;
		margin: 128px auto 0;
		max-width: 100%;
		padding: 0;
		width: auto;
	}
}