/* Empire standings and avatar pages. The markup comes from the game's report
   tool, so these rules follow its class names, in this site's colours. */

.report { font-size: 12px; line-height: 1.5; }
.report td { font-size: 12px; }
.report small { font-size: 11px; }
.report small small { font-size: 10px; }
.report big { font-size: 16px; }
.report img { max-width: 100%; }
.report-foot { margin-top: 14px; }

.report .ll { text-decoration: none; }
.report .a1 {
	display: inline-block;
	padding: 2px 14px;
	border: 1px solid #444444;
	background-color: #1a1a1a;
	color: #cccccc;
	text-decoration: none;
}
.report .a1:hover { color: #ffffff; border-color: #6699aa; }

.report .page-title { text-align: center; margin-bottom: 10px; }
.report .page-title-text { font-family: "Trebuchet MS", Arial, sans-serif; font-weight: bold; }
.report .page-highlight { color: #ffffff; }
.report .page-indent { margin-left: 10px; }
.report .page-align-right { text-align: right; }
.report .page-align-center { text-align: center; }
.report .page-align-top { vertical-align: top; }
.report .page-align-middle { vertical-align: middle; }
.report .page-font { font-family: Verdana, Arial, sans-serif; }

/* Empire standings */
.report-standings > table { width: 100%; }
.report .standings-main { vertical-align: top; width: 75%; padding-right: 12px; }
.report .standings-table {
	width: 100%;
	text-align: left;
	background-color: #0a0e18;
	border: 1px solid #1a2236;
	border-spacing: 2px;
}
.report .standings-table td { padding: 3px 4px; }
.report .standings-column-heading { vertical-align: top; background-color: #16233f; color: #ffffff; }
.report .standings-flag-column { width: 104px; }
/* Flags: 100 x 45 for an empire; its allies and vassals, which the report indents, are shown smaller. */
.report .standings-table img {
	display: block; width: 100px; max-width: 100%; height: auto; aspect-ratio: 100 / 45; box-sizing: border-box;
	object-fit: contain; background-color: #05080f; border: 1px solid #1a2236;
}   /* every flag shows whole, in its own proportions, in the same frame, which shrinks with the column */
.report .standings-table td.page-align-right > img { width: 60px; margin-left: auto; }
.report .standings-score-heading { background-color: #4a2318; }
.report .standings-score { vertical-align: top; text-align: right; }
.report .standings-score-empire { background-color: #33160c; }
.report .standings-score-ally { background-color: #1f0e08; }
.report .standings-score-vassal { background-color: #130905; }

/* The heading row this site puts above a report: title on the left, buttons or a date on the right. */
.report-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.report-bar .btn { margin-left: 4px; }
.btn.tab-on, a.btn.tab-on:link, a.btn.tab-on:visited { color: #ffffff; border-color: #6699aa; background-color: #101826; cursor: default; }
.report-intro { margin: 4px 0 10px 0; line-height: 1.6; }
.report-filter { width: 220px; max-width: 100%; margin-bottom: 2px; }

/* Avatar directory */
.report-list { padding: 0; }
.report-list .page-indent { margin: 0; }
.report .avatar-list { width: 100%; border-collapse: collapse; }
.report .avatar-list td { padding: 7px 12px; vertical-align: middle; border-bottom: 1px solid #141b2b; }
.report .avatar-list tr:last-child > td { border-bottom: 0; }
.report .avatar-list tr:hover > td { background-color: #0e1422; }
.report .avatar-list td:first-child { width: 56px; padding-right: 0; text-align: center; }
.report .avatar-list td:first-child img { display: block; margin: 0 auto; border: 1px solid #1a2236; }
.report .avatar-list td > br { display: none; }
.report .avatar-list .page-font { font-size: 13px; }
.report .avatar-list a.ll:link, .report .avatar-list a.ll:visited { color: #9cc4d2; }
.report .avatar-list a.ll:hover { color: #ffffff; text-decoration: none; }
.report .avatar-list td.page-align-right { white-space: nowrap; }
.report .avatar-list td.page-align-right small { font-family: Consolas, "Courier New", monospace; font-size: 11px; letter-spacing: 1px; color: #6f7c8c; }
.report .avatar-list big { font-size: 13px; color: #ffffff; letter-spacing: 1px; }
.report .avatar-highborn { color: #ffcc00; }
.report .avatar-demiavatar { color: #5f8dff; }

/* Avatar profile */
.report-profile { padding: 14px 18px 18px 18px; line-height: 1.9; }
.report-profile .page-font > hr.avatar-rule:first-child { display: none; }
.report-profile .avatar-rule { clear: both; height: 1px; border: 0; margin: 14px 0 6px 0; background: linear-gradient(to right, #2a3344 0%, #2a3344 60%, transparent 100%); }
.report-profile .avatar-section-title { display: block; text-align: left; font-size: 10px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; color: #6699aa; }
.report-profile .page-highlight big { font-family: "Trebuchet MS", Arial, sans-serif; font-size: 18px; letter-spacing: 1px; }
.report-profile .page-highlight i { font-style: normal; font-family: Consolas, "Courier New", monospace; font-size: 11px; letter-spacing: 1px; color: #6f7c8c; margin-left: 6px; }
.report-profile b { color: #cccccc; }
.report-profile .avatar-selfie { float: right; width: 100%; max-width: 320px; margin: 0 0 12px 16px; border: 1px solid #1a2236; }
.report-profile table { border-spacing: 2px; margin: 6px 0; }
.report-profile .avatar-detail-heading { background-color: #16233f; color: #ffffff; padding: 2px 8px; }
.report-profile .avatar-detail-cell { background-color: #070b14; padding: 2px 8px; }

@media (max-width: 700px) {
	.report .standings-table img { min-width: 64px; }   /* the frame keeps its shape; this keeps it readable on a phone */
	.report .standings-table td.page-align-right > img { min-width: 40px; }
	.report-standings > table, .report-standings > table > tbody, .report-standings > table > tbody > tr,
	.report-standings > table > tbody > tr > td { display: block; width: auto; }
	.report .avatar-selfie { float: none; margin: 0 0 10px 0; }
}