/* ==========================================================================
   Download Client — /downloads.

   Three parchment tables (parchment.css) on the theme's scroll. The one
   pressable thing on the page is the site's green button, drawn in CSS the
   way map.css draws Expand; everything else is rows, labels and links in the
   theme's own Verdana and colours. See docs/site-style-guide.md.
   ========================================================================== */
.dl-shell { position: relative; margin: 0; padding: 0 2px; color: #5A2800; font: 10pt/1.45 Verdana, Arial, sans-serif; }
.dl-shell *, .dl-shell *::before, .dl-shell *::after { box-sizing: border-box; }
.dl-shell :focus:not(:focus-visible) { outline: none; }
.dl-shell :focus-visible { outline: 2px solid #d9b34e; outline-offset: 1px; }
.dl-shell a { color: #004294; font-weight: bold; text-decoration: none; }
.dl-shell a:hover { color: #0063DC; text-decoration: underline; }

/* The download row. */
.dl-get { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 9px 10px; }
.dl-button {
	display: inline-flex; align-items: center; gap: 7px;
	height: 34px; padding: 0 16px 0 13px;
	border: 1px solid #14210f;
	background: #3f6a26;
	background: linear-gradient(to bottom, #7aa54a 0%, #4b7a2c 46%, #33591f 54%, #2a4a1b 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 1px rgba(0, 0, 0, .35);
	color: #ffd18c !important; font-size: 12px; font-weight: bold; line-height: 1; white-space: nowrap;
	text-decoration: none !important;
	text-shadow: -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, -1px 0 0 #000;
}
.dl-button svg { width: 15px; height: 15px; filter: drop-shadow(0 1px 0 #000); }
.dl-button:hover { background: linear-gradient(to bottom, #8cb85a 0%, #588c36 46%, #3d6826 54%, #325722 100%); color: #ffe0a8 !important; }
.dl-button:active { box-shadow: inset 0 2px 3px rgba(0, 0, 0, .45); }
.dl-get-note { color: #6b5b41; font-size: 9pt; }
.dl-get-note b { color: #5A2800; }

/* Facts: the character page's label/value rows. */
.dl-facts { width: 100%; border-collapse: collapse; }
.dl-facts td { padding: 4px 10px; color: #5A2800; font-size: 10pt; line-height: 1.45; vertical-align: top; background: #f1e0c6; }
.dl-facts tr:nth-child(even) td { background: #d4c0a1; }
.dl-facts .dl-label { width: 110px; font-weight: bold; white-space: nowrap; }

/* Steps: a numeral in the gutter, then the title and one line under it. */
.dl-steps { list-style: none; margin: 0; padding: 0; }
.dl-steps li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 10px 8px 12px; }
.dl-steps li > b { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; border: 1px solid #8a6f33; background: #efe6cc; box-shadow: inset 0 1px 3px rgba(90, 66, 26, .28); color: #5A2800; font-size: 10pt; font-weight: bold; line-height: 20px; text-align: center; }
.dl-steps strong { display: block; font-size: 10pt; font-weight: bold; }
.dl-steps span { display: block; margin-top: 1px; color: #6b5b41; font-size: 9pt; line-height: 1.45; }

/* Links: a Tibia list row, link then its one-line note. */
.dl-links { list-style: none; margin: 0; padding: 0; }
.dl-links li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 5px 10px 6px 24px; background-image: url(images/global/content/bullet.gif); background-repeat: no-repeat; background-position: 7px 6px; }
.dl-links a { font-size: 10pt; }
.dl-links span { color: #6b5b41; font-size: 9pt; }

@media (max-width: 900px) {
	#ContentColumn .dl-shell * { font-size: inherit !important; line-height: inherit !important; }
	#ContentColumn .dl-shell { font-size: 13px !important; line-height: 1.45 !important; }
	#ContentColumn .dl-button { font-size: 12px !important; line-height: 1 !important; }
	#ContentColumn .dl-get-note, #ContentColumn .dl-steps span, #ContentColumn .dl-links span { font-size: 12px !important; }
	.dl-get { padding: 8px; }
	.dl-button { height: 40px; padding: 0 18px 0 14px; }
	.dl-facts .dl-label { width: 84px; }
	.dl-facts td { padding: 6px 8px; }
	.dl-steps li { padding: 8px 8px 9px 10px; }
	.dl-links li { padding: 7px 8px 8px 24px; background-position: 7px 8px; }
	.dl-links span { flex-basis: 100%; }
}