body {
	font-family: Verdana, Arial, sans-serif;
	font-size: 11px;
	color: #aaaaaa;
	background-color: #070b14;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><rect width='240' height='240' fill='%23070b14'/><g fill='white'><circle cx='90' cy='46' r='0.4' opacity='0.33'/><circle cx='218' cy='145' r='0.4' opacity='0.42'/><circle cx='137' cy='62' r='0.4' opacity='0.4'/><circle cx='25' cy='69' r='0.4' opacity='0.4'/><circle cx='169' cy='168' r='0.6' opacity='0.46'/><circle cx='157' cy='109' r='0.4' opacity='0.36'/><circle cx='150' cy='227' r='0.4' opacity='0.4'/><circle cx='146' cy='38' r='0.6' opacity='0.56'/><circle cx='182' cy='54' r='0.4' opacity='0.42'/><circle cx='56' cy='103' r='0.4' opacity='0.45'/><circle cx='135' cy='182' r='0.4' opacity='0.46'/><circle cx='127' cy='157' r='0.9' opacity='0.72'/><circle cx='71' cy='211' r='0.4' opacity='0.46'/><circle cx='28' cy='155' r='0.4' opacity='0.41'/><circle cx='95' cy='194' r='0.4' opacity='0.43'/><circle cx='26' cy='38' r='0.4' opacity='0.35'/><circle cx='133' cy='115' r='0.4' opacity='0.44'/><circle cx='232' cy='217' r='0.4' opacity='0.45'/><circle cx='160' cy='135' r='0.6' opacity='0.54'/><circle cx='223' cy='31' r='0.9' opacity='0.74'/><circle cx='178' cy='24' r='0.4' opacity='0.45'/><circle cx='182' cy='218' r='0.4' opacity='0.45'/></g></svg>");
}

td        { font-family: Verdana, Arial, sans-serif; font-size: 11px; color: #aaaaaa; }
a:link    { color: #6699aa; text-decoration: none; }
a:visited { color: #557788; text-decoration: none; }
a:hover   { color: #ffffff; text-decoration: underline; }

.logo {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 22px;
	font-weight: bold;
	color: #ffffff;
	letter-spacing: 4px;
}

.padright {
	padding-right: 40px;
}

.tag {
	font-family: Verdana, Arial;
	font-size: 10px;
	color: #555555;
	letter-spacing: 2px;
}

.navbar a {
	font-family: Verdana, Arial;
	font-size: 10px;
	letter-spacing: 1px;
}

.navbar {
	border-top: 1px solid #222222;
	border-bottom: 1px solid #222222;
	display: flex;
	height: 32px;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
	margin-bottom: 10px;
}

.hd {
	font-family: Verdana, Arial;
	font-size: 11px;
	color: #ffffff;
	font-weight: bold;
	letter-spacing: 1px;
	border-left: 2px solid #5a7a96;
	padding: 1px 0 1px 8px;
	display: inline-block;
}

.hd-line {
	height: 1px;
	width: 100%;
	margin: 6px 0;
	background: linear-gradient(to right, #2a3344 0%, #2a3344 60%, transparent 100%);
}

.date  { font-family: "Courier New", monospace; font-size: 10px; font-weight: bold; color: #6699aa; }
.small { font-size: 10px; color: #777777; }
.field {
	background-color: #111111;
	color: #cccccc;
	border: 1px solid #333333;
	font-family: Verdana;
	font-size: 11px;
	padding: 2px;
}

.btn {
	background-color: #1a1a1a;
	color: #cccccc;
	border: 1px solid #444444;
	font-family: Verdana;
	font-size: 10px;
	padding: 2px 10px;
	cursor: pointer;
}

.btn:hover { color: #ffffff; border-color: #6699aa; }

.panel {
	background-color: #0a0e18;
	border: 1px solid #1a2236;
	padding: 10px 12px;
	margin-top: 8px;
	margin-bottom: 15px;
}

hr.thin {
	border: 0;
	border-top: 1px dashed #2a3344;
	height: 0;
	margin: 14px 0;
}

.chatlog {
	background-color: #0a0e18;
	border: 1px solid #1a2236;
	height: 240px;
	overflow-y: auto;
	padding: 8px 10px;
	margin-top: 8px;
	font-family: "Courier New", monospace;
	font-size: 10px;
	line-height: 14px;
}

.chatlog .entry { margin-bottom: 8px; }
.chatlog .ts    { color: #6699aa; }
.chatlog .nm    { color: #ffffff; font-weight: bold; }
.chatlog .msg   { color: #aaaaaa; font-family: Verdana, Arial, sans-serif; font-size: 10px; }

.hero {
	display: block;
	border-top: 1px solid #1a1a1a;
	border-bottom: 1px solid #1a1a1a;
}

.intro { line-height: 18px; font-size: 1em; }
.up    { color: #6699aa; }
.down  { color: #aa5544; }
.pt-8  { padding-top: 8px; }
.pt-4  { padding-top: 4px; }
.foot  { border-top: 1px solid #222222; padding-top: 14px; }
.err   { color: #cc5544; }
.ok    { color: #6699aa; }
.logtitle { font-weight: bold; }

.centerwrapper {
	display: flex;
	justify-content: center;
}

.maincol {
}

.toptable {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	margin-top: 40px;
}

.topcontent {
	padding-top: 100px;
}

.navleft,
.navright {
	display: flex;
	gap: 5px;
	align-items: center;
}

.sidebar {
	width: 180px;
}

.maintable, .titletable {
	width: 100%;
	table-layout: fixed;
}

.filter-bar    { background-color: #0a0e18; border: 1px solid #1a2236; padding: 7px 10px; margin-bottom: 10px; }
.filter-label  { font-size: 10px; color: #556677; letter-spacing: 1px; margin-right: 4px; }
.filter-field  { background-color: #0d1220; color: #aaaaaa; border: 1px solid #252f42; font-family: Verdana; font-size: 10px; padding: 2px 5px; }
.filter-select { background-color: #0d1220; color: #aaaaaa; border: 1px solid #252f42; font-family: Verdana; font-size: 10px; padding: 2px; }
.filter-check  { margin-left: 12px; }
.filter-check input { vertical-align: middle; margin: 0 4px 0 0; }
.filter-check label { cursor: pointer; font-size: 10px; color: #556677; letter-spacing: 1px; }

.summary-bar { font-family: "Courier New", monospace; font-size: 10px; color: #334455; letter-spacing: 1px; margin-bottom: 8px; }
.summary-bar span { color: #557799; }

.roster { border-collapse: collapse; width: 100%; table-layout: fixed; }
.roster thead th {
	font-family: Verdana, Arial; font-size: 10px;
	color: #6699aa; font-weight: bold; letter-spacing: 1px;
	text-align: left; padding: 5px 6px;
	border-bottom: 1px solid #1e2d40;
	background-color: #090d17;
	white-space: nowrap;
}

.roster thead th a { color: #6699aa; }
.roster thead th a:hover { color: #aaccee; text-decoration: none; }
.roster tbody td { padding: 6px 6px; border-bottom: 1px solid #0f1520; vertical-align: middle; }
.roster tbody tr:hover td { background-color: #0c1222; }

.dot { font-size: 14px; line-height: 1; }
.dot-on  {
	color: #44bb77;
	text-shadow: 0 0 6px #44bb77, 0 0 2px #88ddaa;
	animation: dot-pulse 2.4s ease-in-out infinite;
}

.dot-off { color: #2a3a4a; }
@keyframes dot-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.55; }
}

.reg-field { width: 160px; }
.reg-panel { max-width: 260px; }

.av-name a { color: #ccd9e6; font-weight: bold; }
.av-name a:hover { color: #ffffff; }
.av-rank   { font-size: 10px; color: #556677; font-style: italic; }
.av-empire { font-size: 11px; color: #7a8a99; }
.av-flag   { display: block; max-width: 28px; max-height: 18px; border: 1px solid #1a2236; }

.registertext {
	width: 500px;
}

.av-identity { background-color: #0a0e18; border: 1px solid #1a2236; padding: 14px 16px; margin: 8px 0px 15px 0px; }
.av-identity-name { font-family: "Trebuchet MS", Arial, sans-serif; font-size: 18px; font-weight: bold; color: #ccd9e6; letter-spacing: 2px; }
.av-identity-sub  { font-size: 10px; color: #556677; letter-spacing: 1px; margin-top: 4px; }
.av-empire-name   { font-size: 11px; color: #7a8a99; margin-top: 6px; }
.av-flag-big          { width: 120px; height: auto; border: 1px solid #1a2236; display: block; }

.info-grid { width: 100%; border-collapse: collapse; margin-top: 0; }
.info-grid td { padding: 5px 6px; border-bottom: 1px solid #0f1520; vertical-align: middle; }
.info-grid tr:last-child td { border-bottom: none; }
.info-label { font-size: 10px; color: #556677; letter-spacing: 1px; white-space: nowrap; width: 140px; }
.info-value { color: #aaaaaa; font-size: 11px; }
.info-value.mono { font-family: "Courier New", monospace; font-size: 10px; color: #6699aa; }
.info-value.bright { color: #ccd9e6; }

.back-link { font-size: 10px; color: #556677; letter-spacing: 1px; }
.back-link a { color: #6699aa; }
.back-link a:hover { color: #ffffff; }

.section-gap { height: 10px; }

@media (max-width: 780px) {
	.sidebar, #playersOnline {
		display: none;
	}
	
	.navbar {
		flex-direction: column;
		gap: 8px;
		padding: 4px 0px;
	}
}
	
@media (min-width: 2000px) {
	.toptable {
		max-width: 1400px;
	}
}