/* ===========================================================================
   Khitera — account panel.

   A port of the 2006 Tibia.com layout, taken node-for-node from the reference
   template in ~/real77/webref (index.php for structure, basic.css for geometry).
   Class names, nesting and sprite usage mirror the original deliberately so the
   two can be diffed.

   Rules that were learned the hard way and must not be undone:

     * Content boxes are NINE elements with corner sprites and tiled edges. They
       are not a bordered div and cannot be approximated with CSS borders.
     * Box content tiles content/scroll.gif -- cream #FEF1D8. Body text is DARK
       on light. Only caption bars and the title strip are dark with light text.
     * Menu buttons are a six-layer sprite stack and the section name is an
       IMAGE (label-<category>.gif), not type.
     * Submenu items hang between two chain sprites.

   See AIManual §15.
   =========================================================================== */

@font-face {
	font-family: "Martel";
	src: url("/res/martel.ttf") format("truetype");
	font-weight: normal;
	font-display: swap;
}

:root {
	--page:        #051122;
	--parchment:   #f1e0c6;   /* .Odd  */
	--parchment-2: #d5c0a1;   /* .Even */
	--frame-brown: #793d03;   /* .Border_2 / .Border_3 */
	--caption:     #5f4d41;   /* .CaptionContainer -- caption bars ONLY */
	--submenu-bg:  #0d2e2b;   /* .Submenu */
	--submenu-rule:#4b7874;
	--submenu-fg:  #d7d7d7;
	--ink:         #23180d;
	--headline:    #f0d1a4;   /* headline.php rgb(240,209,164) */
	--red:         #a11;
	--online:      #0b8a0b;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	padding: 0;
	background-color: var(--page);
	color: var(--ink);
	font-family: Verdana, Arial, sans-serif;
	font-size: 11px;
	line-height: 1.5;
}

img { border: none; }
a { color: #1a4f8a; text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- page scaffold (#ArtworkHelper / #Bodycontainer / #ContentRow) --------
   THE LAYOUT CONTRACT. .menu-column and .themebox-column are position:absolute
   with top:0 and resolve against .content-row, which MUST keep position:relative
   and MUST remain their direct parent. If either is broken -- the property
   removed, or the columns reparented -- both escape to the next positioned
   ancestor and pile up at the top of the page.

   DOM order inside .content-row is strict:
       .menu-column  ->  .content-column (content, then footer)  ->  .themebox-column
   -------------------------------------------------------------------------- */

.artwork-helper {
	width: 100%;
	height: 100%;
	min-width: 1000px;
	background-image: url("/res/images/header/background-artwork.jpg");
	background-position: top center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	text-align: center;
}

.bodycontainer {
	display: table;
	width: 100%;
	min-width: 1000px;
	max-width: 1200px;
	height: 100%;
	margin: 0 auto;
	text-align: left;
}

.content-row {
	position: relative;
	top: 155px;
	padding-bottom: 175px;
}

/* three columns: menu left, content centre, themeboxes right */
.menu-column {
	position: absolute;
	left: 0;
	top: 0;
	width: 180px;
	margin: 0 15px;
}

.content-column {
	position: relative;
	margin-left: 205px;
	margin-right: 205px;
}

.themebox-column {
	position: absolute;
	top: 0;
	right: 0;
	width: 180px;
	margin-right: 15px;
	margin-left: 25px;
	text-align: center;
}

/* --- left artwork -------------------------------------------------------- */
/* The original hangs the logo here with a statue either side. We render the
   world name in Martel in place of the Tibia logo; the statues are scenery. */

.left-artwork {
	position: absolute;
	top: -140px;
	left: 4px;
	width: 166px;
	height: 140px;
	z-index: 5;
}

.left-artwork .statue {
	position: absolute;
	top: 0;
	width: 32px;
	height: 30px;
	z-index: 10;
}

.left-artwork .statue-l { left: 5px; }
.left-artwork .statue-r { right: 25px; }

/* Logo 166x82 at top 20; name plate 166x43 at top 102, attaching to the logo's
   bottom edge by design. Both z-index 5, under the statues. */
.left-artwork .logo-top {
	position: absolute;
	top: 20px;
	left: 0;
	width: 166px;
	height: 82px;
	z-index: 5;
}

.left-artwork .logo-bottom {
	position: absolute;
	top: 102px;
	left: 0;
	width: 166px;
	height: 43px;
	z-index: 5;
}



/* --- menu ---------------------------------------------------------------- */
/* .MenuButton 170x32; .Icon 32x32 at left 8; .Label 116x22 at top 6 left 42. */

.menu-item { position: relative; margin-bottom: 2px; }

.menu-button {
	position: relative;
	left: 5px;
	height: 32px;
	width: 170px;
	background: url("/res/images/menu/button-background.gif") no-repeat;
	cursor: pointer;
}

.menu-button:hover { background-image: url("/res/images/menu/button-background-over.gif"); }

.menu-button .light {
	position: absolute;
	width: 2px;
	height: 2px;
	background: url("/res/images/menu/green-light.gif") no-repeat;
	visibility: hidden;
}

.menu-button:hover .light { visibility: visible; }
.menu-button .light-lu { top: 2px;  left: 3px; }
.menu-button .light-ru { top: 2px;  right: 3px; }
.menu-button .light-ld { top: 28px; left: 3px; }

.menu-button .icon {
	position: absolute;
	top: 0;
	left: 8px;
	width: 32px;
	height: 32px;
	background-repeat: no-repeat;
}

.menu-button .label {
	position: absolute;
	top: 6px;
	left: 42px;
	width: 116px;
	height: 22px;
	background-repeat: no-repeat;
}

/* plus when the category is collapsed, minus when open -- index.php:119 opens
   news only and leaves every other category closed. */
.menu-button .extend {
	position: absolute;
	top: 20px;
	right: -2px;
	width: 12px;
	height: 12px;
	background: url("/res/images/general/minus.gif") no-repeat;
}

.menu-item.closed .menu-button .extend {
	background-image: url("/res/images/general/plus.gif");
}

/* --- submenu ------------------------------------------------------------- */

.menu-item.closed .submenu { display: none; }

.submenu {
	position: relative;
	width: 160px;
	margin: 0 5px 0 10px;
	background-color: var(--submenu-bg);
}

.submenu a { display: block; color: var(--submenu-fg); }
.submenu a:hover { color: #fff; text-decoration: none; }

.submenu-item { position: relative; margin: 0; padding: 0; }

.submenu-item .chain-l,
.submenu-item .chain-r {
	position: absolute;
	top: 0;
	width: 7px;
	height: 33px;
	background: url("/res/images/general/chain.gif") repeat-y;
}

.submenu-item .chain-l { left: -5px; }
.submenu-item .chain-r { right: -4px; }



.submenu-item .label-text {
	margin: 0;
	padding: 2px 2px 2px 15px;
	border-bottom: 1px solid var(--submenu-rule);
	overflow: hidden;
}

.menu-bottom {
	position: relative;
	left: 5px;
	height: 12px;
	width: 180px;
	background: url("/res/images/general/box-bottom.gif") no-repeat;
}

/* --- content boxes ------------------------------------------------------- */
/*
     .box
       .corner-tl .corner-tr
       .border-1                 tiled top edge
       .border-title             title strip + headline image
       .border-2 > .border-3 > .box-content   parchment
       .border-1                 tiled bottom edge
       .corner-wrap > .corner-bl / .corner-br
*/

.box { position: relative; margin: 0 0 12px; }

.box .corner-tl, .box .corner-tr,
.box .corner-bl, .box .corner-br {
	position: absolute;
	width: 17px;
	height: 17px;
	z-index: 50;
}

.box .corner-tl { top: -4px; left: -5px;     background: url("/res/images/content/corner-tl.gif") no-repeat; }
.box .corner-tr { top: -4px; right: -5px;    background: url("/res/images/content/corner-tr.gif") no-repeat; }
.box .corner-bl { bottom: -4px; left: -6px;  background: url("/res/images/content/corner-bl.gif") no-repeat; }
.box .corner-br { bottom: -4px; right: -6px; background: url("/res/images/content/corner-br.gif") no-repeat; }
.box .corner-wrap { position: absolute; width: 100%; }

.box .border-1 {
	position: relative;
	height: 6px;
	width: 100%;
	background: url("/res/images/content/border-1.gif") repeat-x;
}

.box .border-title {
	position: relative;
	height: 24px;
	background: url("/res/images/content/title-background-green.gif") repeat-x;
}

.box .border-title img.title { position: absolute; top: 6px; left: 5px; }

.box .border-title .title-text {
	position: absolute;
	top: 0;
	left: 9px;
	font-family: "Martel", Georgia, serif;
	font-size: 18px;
	line-height: 24px;
	color: var(--headline);
	white-space: nowrap;
}

.box .border-2 { margin: 4px; padding: 0; background-color: var(--frame-brown); }
.box .border-3 {
	margin: 1px;
	border-top: 1px solid var(--frame-brown);
	border-bottom: 1px solid var(--frame-brown);
}

/* Cream parchment, dark text. This is the single most important rule here. */
.box .box-content {
	background: url("/res/images/content/scroll.gif") repeat;
	padding: 8px 10px;
	color: var(--ink);
}

.box .box-content > :first-child { margin-top: 0; }
.box .box-content > :last-child  { margin-bottom: 0; }

.note    { color: #6a5230; font-style: italic; }
.warning { color: var(--red); font-weight: bold; }

/* --- tables -------------------------------------------------------------- */
/* Everything sits on parchment. Header cells are bold dark text on the banded
   tone, following .LabelV in the reference -- NOT a dark bar with white text,
   which was the mistake that made the whole site read as brown. */

table { width: 100%; border-collapse: collapse; font-size: 11px; }

th {
	padding: 3px 8px;
	text-align: left;
	font-weight: bold;
	color: var(--ink);
	background-color: var(--parchment-2);
	border-bottom: 1px solid rgba(121,61,3,.35);
	white-space: nowrap;
}

td {
	padding: 3px 8px;
	vertical-align: top;
	color: var(--ink);
	background-color: transparent;
}

tr:nth-child(even) td { background-color: rgba(213,192,161,.5); }

table.info th {
	width: 165px;
	background-color: transparent;
	border-bottom: 0;
	vertical-align: top;
	white-space: normal;
	padding-right: 10px;
}

table.info tr:nth-child(even) th { background-color: transparent; }
table.info tr:nth-child(even) td { background-color: rgba(213,192,161,.5); }
table.info td { word-break: break-word; }

th.num, td.num { text-align: right; white-space: nowrap; }
td a { font-weight: bold; }

.online  { color: var(--online); font-weight: bold; }
.offline { color: var(--red); }

/* --- forms --------------------------------------------------------------- */

label {
	display: block;
	margin: 8px 0 3px;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: .06em;
	color: #6a4a1c;
}

input[type=text], input[type=password], input[type=number], select {
	display: block;
	width: 260px;
	max-width: 100%;
	padding: 3px 5px;
	font-family: inherit;
	font-size: 12px;
	color: var(--ink);
	background: #fffaf0;
	border: 1px solid #9a7c52;
}

input:focus, select:focus { outline: 1px solid var(--frame-brown); }

input[type=submit], .button {
	display: inline-block;
	height: 24px;
	margin: 10px 6px 0 0;
	padding: 0 14px;
	line-height: 22px;
	font-family: inherit;
	font-size: 11px;
	font-weight: bold;
	color: var(--headline);
	cursor: pointer;
	background: url("/res/images/content/title-background-green.gif") repeat-x;
	border: 1px solid #2c1c08;
	text-shadow: 0 1px 1px rgba(0,0,0,.6);
}

input[type=submit]:hover, .button:hover { color: #fff; text-decoration: none; }
input[disabled], input[disabled]:hover { opacity: .55; cursor: not-allowed; }

/* --- themeboxes (right column) ------------------------------------------- */

.themebox {
	position: relative;
	width: 180px;
	margin-bottom: 10px;
	color: var(--headline);
}

.themebox .tb-top {
	height: 12px;
	background: url("/res/images/general/box-top.gif") no-repeat;
}

.themebox .tb-body {
	padding: 6px 12px 8px;
	background-color: rgba(5,17,34,.72);
	border-left: 1px solid rgba(240,209,164,.18);
	border-right: 1px solid rgba(240,209,164,.18);
	font-size: 10px;
	text-align: center;
}

.themebox .tb-bottom {
	height: 12px;
	background: url("/res/images/general/box-bottom.gif") no-repeat;
}

.themebox h3 {
	margin: 0 0 4px;
	font-family: "Martel", Georgia, serif;
	font-size: 15px;
	font-weight: normal;
	color: var(--headline);
}

.themebox .big {
	display: block;
	margin: 4px 0 0;
	font-family: "Martel", Georgia, serif;
	font-size: 30px;
	line-height: 1.1;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0,0,0,.8);
}

.themebox a { color: var(--headline); }
.pedestal { display: block; margin: 0 auto 6px; }

/* --- misc ---------------------------------------------------------------- */

.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 12px; }
.filters select { width: 175px; }
.filters input[type=submit] { margin-top: 0; }

.tag {
	display: inline-block;
	margin-left: 5px;
	padding: 0 5px;
	font-size: 9px;
	font-weight: bold;
	text-transform: uppercase;
	color: var(--headline);
	background: var(--frame-brown);
}

.forsale { color: #1c6b1c; font-weight: bold; }
.bidding { color: #9a5b00; font-weight: bold; }

.flavour {
	font-style: italic;
	color: #6a5230;
	border-left: 3px solid rgba(121,61,3,.3);
	padding-left: 9px;
}

.scroll-x { overflow-x: auto; }

/* #Footer sits inside #ContentColumn in the reference, not over the backdrop. */
.footer {
	position: relative;
	width: 100%;
	margin-top: 10px;
	padding-bottom: 20px;
	text-align: center;
	font-size: 9px;
	color: #fff;
}

.footer a { color: #fff; }

@media (max-width: 1040px) {
	.content-row { top: 120px; }
	.menu-column, .themebox-column { position: static; width: auto; margin: 0 0 14px; }
	.content-column { margin: 0; }
	.left-artwork { display: none; }
	.menu-button, .submenu, .menu-bottom { left: 0; margin-left: 0; }
	table.info th { width: auto; }
}

/* --- login box (left column, index.php:303) ------------------------------ */
/*
   No input fields. Three status strips on the tiled textfield background with a
   layered sprite button between them; logging in happens on /account. Geometry
   from basic.css:260-321.
*/

.loginbox {
	position: relative;
	left: 5px;
	width: 170px;
	margin: 0 0 30px;
}

.loginbox .login-top,
.loginbox .login-bottom {
	position: relative;
	height: 12px;
	width: 180px;
	margin-left: -5px;
	background-repeat: no-repeat;
}

.loginbox .login-top    { background-image: url("/res/images/general/box-top.gif"); }
.loginbox .login-bottom { background-image: url("/res/images/general/box-bottom.gif"); }

.loginbox .login-border {
	position: absolute;
	top: 12px;
	bottom: 12px;
	width: 8px;
	background: url("/res/images/general/chain.gif") repeat-y;
	z-index: 10;
}

.loginbox .login-left  { left: -5px; }
.loginbox .login-right { right: -5px; }

/* one status strip: 160x13, on the tiled textfield background */
.loginbox .loginstatus {
	position: relative;
	left: 0;
	height: 13px;
	width: 160px;
	background: url("/res/images/loginbox/loginbox-textfield-background.gif") repeat-y;
}

.loginbox .loginstatus-text {
	position: absolute;
	top: 1px;
	left: 18px;
	width: 124px;
	height: 11px;
	display: block;
	background-repeat: no-repeat;
	cursor: pointer;
}

.loginbox .login-button-container {
	height: 26px;
	width: 160px;
	background: url("/res/images/loginbox/loginbox-textfield-background.gif") repeat-y;
}

.loginbox .login-button {
	position: relative;
	display: block;
	top: 1px;
	left: 12px;
	height: 25px;
	width: 135px;
	background: url("/res/images/global/buttons/sbutton.gif") no-repeat;
}

.loginbox .login-button .button-face {
	position: absolute;
	top: 0;
	left: 0;
	width: 135px;
	height: 25px;
	background: url("/res/images/global/buttons/sbutton_over.gif") no-repeat;
	opacity: 0;
}

.loginbox .login-button:hover .button-face { opacity: 1; }

.loginbox .login-button .button-text {
	position: absolute;
	top: 0;
	left: 0;
	width: 135px;
	height: 22px;
	z-index: 15;
	background-repeat: no-repeat;
	cursor: pointer;
}

.loginbox .clearer { clear: both; height: 2px; }

/* --- sprite buttons ------------------------------------------------------ */

.sbutton {
	display: inline-block;
	width: 135px;
	height: 25px;
	margin: 10px 4px 0 0;
	border: 0;
	background: none;
	cursor: pointer;
	vertical-align: middle;
}

/* --- news / front page --------------------------------------------------- */

.news-entry { margin-bottom: 16px; }
.news-entry:last-child { margin-bottom: 0; }

.news-icon { float: left; margin: 2px 8px 4px 0; }

.news-date {
	font-size: 10px;
	font-weight: bold;
	color: #6a5230;
}

.news-title {
	margin: 0 0 4px;
	font-family: "Martel", Georgia, serif;
	font-size: 17px;
	font-weight: normal;
	color: #5a2800;
}

.news-body { margin: 0; overflow: hidden; }

.dropcap {
	float: left;
	margin: 0 4px 0 0;
}

/* --- themebox headers ---------------------------------------------------- */

.themebox .tb-head { display: block; margin: 0 auto 6px; max-width: 100%; }
.themebox .sbutton { margin: 8px auto 0; display: block; }

/* --- remaining content sprites ------------------------------------------- */

/* table drop shadow, as the original hangs on data tables */
.scroll-x table { box-shadow: 3px 3px 0 rgba(60,36,10,.18); }

/* attention marker for warnings */
.warning::before {
	content: "";
	display: inline-block;
	width: 12px; height: 12px;
	margin-right: 5px;
	vertical-align: -2px;
	background: url("/res/images/content/attentionsign.gif") no-repeat center;
	background-size: contain;
}

/* bulleted notes */
.note.bulleted {
	padding-left: 18px;
	background: url("/res/images/global/content/bullet.gif") no-repeat 0 2px;
}

/* back-to-top, bottom of every page */
.back-to-top {
	position: relative;
	clear: both;
	margin: 4px 0 0;
	padding: 0;
	text-align: right;
	line-height: 0;
}

.back-to-top img { vertical-align: middle; }