/* MixLegends additions to the original site's style sheet (mm.css): the pieces that were Flash or pictures we do not have
   (the header, the slogan, the main banner, the side banners, the Mix Mall promo, the "Siege Affair" / "Ranking" titles) and
   the sub pages' text. */

/* ---- header ---- */
.header-art { position: relative; width: 510px; height: 231px; }
.header-art img { display: block; }
.header-home { position: absolute; left: 0; top: 10px; width: 215px; height: 95px; }
.header-register { position: absolute; left: 8px; top: 182px; width: 135px; height: 45px; }
#topRightMiddle { height: 121px; padding-top: 62px; }
#topRightMiddle .slogan { display: block; }
/* the original page ran in quirks mode: pictures sit on the line without the gap under them */
#wrap img { vertical-align: top; }
/* (and a row holding only a spacer picture is as tall as the picture, not a line of text) */
#spacer, #spacerContentRight, #spacerLine, #topCategoryButton, #contentRightPanelTop, #contentRightPanelMiddle, #contentLeft > div:not([id]):not([class]) { font-size: 0; line-height: 0; }
#timeLeftBG { height: 23px; }
#topRightTimeRow .tz { color: #000; font-size: 11px; margin-left: 3px; }

/* ---- left column ---- */
#surveyAnswers label { cursor: pointer; }
#surveyButtons .vote { cursor: pointer; }
.vote-note { color: #b00; font-size: 10px; padding: 4px 8px 2px; }

/* ---- right column banners (the original's were pictures, 97 wide) ---- */
.side-banner { display: block; position: relative; width: 95px; height: 141px; margin: 0 auto 2px; overflow: hidden;
  background: linear-gradient(#0d1530, #23315f 60%, #3b5ea8); border: 1px solid #000; text-align: center; }
.side-banner b { display: block; padding-top: 10px; font: italic 900 17px/17px "Arial Black", Tahoma, sans-serif; color: #b6f03a;
  text-shadow: 1px 1px 0 #0b3a0f, -1px -1px 0 #0b3a0f, 1px -1px 0 #0b3a0f, -1px 1px 0 #0b3a0f; }
.side-banner img { position: absolute; left: 50%; bottom: 6px; width: 72px; margin-left: -36px; }
.side-banner:hover { text-decoration: none; filter: brightness(1.12); }

/* ---- home: main banner (the original's main_banner.jpg is gone from the archive) ---- */
.top-banner { display: block; position: relative; width: 401px; height: 102px; overflow: hidden; text-align: left;
  border: 1px solid #8aa6c9; background: linear-gradient(170deg, #0b4fa8 0%, #2a8ae0 45%, #8fd3ff 70%, #eaf8ff 100%); }
.top-banner strong { position: absolute; left: 16px; top: 14px; font: italic 900 34px/34px "Arial Black", Tahoma, sans-serif; color: #fff;
  text-shadow: 2px 2px 0 #13306e, -2px -2px 0 #13306e, 2px -2px 0 #13306e, -2px 2px 0 #13306e, 3px 4px 0 rgba(0,0,0,.35); }
.top-banner span { position: absolute; left: 18px; top: 62px; font: bold 12px Tahoma, sans-serif; color: #0d2350; }
.top-banner img { position: absolute; right: 6px; top: -6px; height: 160px; }
.top-banner:hover { text-decoration: none; }

/* ---- home: item recommendation ---- */
#itemImage .item-pic { display: block; width: 80px; height: 80px; margin: 9px 0 0 12px; }

/* ---- home: right panel titles (were bg_siege_affair_top.gif / bg_ranking_top.gif) ---- */
.panel-title { position: relative; margin: 0 10px 6px; padding: 10px 0 3px 22px; border-bottom: 4px solid #4C75AC; text-align: left;
  font: bold 14px Tahoma, sans-serif; color: #0E183B; }
.panel-title .dot { position: absolute; left: 0; top: 9px; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff6b0, #f2b800 60%, #8a5a00); border: 1px solid #0E183B; box-sizing: border-box; }
.panel-title .more { position: absolute; right: 0; top: 10px; width: 42px; height: 13px; border: 1px solid #7a8aa0; border-radius: 2px;
  background: linear-gradient(#fff, #d8dee8); font: 9px/13px Tahoma, sans-serif; text-align: center; color: #333; }
#contentRightPanelMiddle4thRow.bosses { height: auto; padding-bottom: 12px; }
#contentRightPanelMiddle5thRow { text-align: center; padding-top: 4px; }
#contentRightPanelBottom { height: 8px; background: url(/img/mm/bg_left_panel.gif); border-bottom: 1px solid #6d8bb3; }
.ranking-box { width: 141px; min-height: 64px; margin: 0 auto; padding: 8px; background: #fff; font: 11px/15px Tahoma, sans-serif;
  color: #0E183B; text-align: left; }

/* ---- home: news and events rows (the original's #news1stRow ... as classes) ---- */
.news { width: 400px; padding-top: 3px; }
.news1stRow { overflow: hidden; }
.newsTitle { float: left; max-width: 320px; text-align: left; font-weight: bold; }
#wrap .newsTitle img { vertical-align: 1px; }
.date { float: right; }
.news2ndRow { clear: both; text-align: left; margin-bottom: 9px; }
.briefNews { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---- footer ---- */
.foot-name { color: #2B6CAD; font-size: 13px; letter-spacing: .5px; }

/* ---- sub pages ---- */
.sub { line-height: 1.55; color: #3c3c3c; }
.sub h1 { position: relative; margin: 4px 0 12px; padding: 4px 0 4px 26px; border-bottom: 4px solid #4C75AC; font: bold 18px Tahoma, sans-serif; color: #0E183B; }
.sub h1::before { content: ''; position: absolute; left: 0; top: 7px; width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box;
  background: radial-gradient(circle at 40% 35%, #fff6b0, #f2b800 60%, #8a5a00); border: 1px solid #0E183B; }
.sub h2 { margin: 18px 0 8px; padding: 4px 8px; background: #293F5D; color: #fff; font: bold 13px Tahoma, sans-serif; }
.sub h3 { margin: 14px 0 6px; font-size: 12px; color: #0E183B; }
.sub p { margin: 0 0 10px; }
.sub ul, .sub ol { margin: 0 0 10px 22px; }
.sub li { margin-bottom: 4px; }
.sub a { color: #2B6CAD; text-decoration: underline; }
.sub table { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
.sub th, .sub td { border: 1px solid #c3cfdf; padding: 5px 8px; text-align: left; vertical-align: top; }
.sub th { background: #4C75AC; color: #fff; white-space: nowrap; }
.sub .note { background: #eef3f9; border-left: 4px solid #4C75AC; padding: 8px 10px; }
.sub .muted { color: #888; }
.sub .bar { background: url(/img/mm/bar_title.jpg) no-repeat; height: 22px; width: 378px; padding: 3px 0 0 25px; margin: 12px 0 6px;
  font-weight: bold; color: #000; }
.sub .news { width: 100%; }
.sub .newsTitle { max-width: 480px; }
.sub .news a { text-decoration: none; color: #3c3c3c; }
.sub .briefNews { white-space: normal; }
.sub img { max-width: 100%; }
.hero-cards { display: flex; gap: 10px; margin: 0 0 10px; }
.hero-cards figure { flex: 1; margin: 0; padding: 6px; background: #eef3f9; border: 1px solid #c3cfdf; text-align: center; }
.hero-cards img { height: 150px; width: auto; }
.hero-cards figcaption { color: #0E183B; }
.sub form label { display: block; margin: 0 0 8px; font-weight: bold; }
.sub input[type=text], .sub input[type=email], .sub input[type=password] { display: block; width: 260px; padding: 4px; margin-top: 3px; border: 1px solid #8aa6c9; }
.sub button { padding: 4px 16px; border: 1px solid #293F5D; background: linear-gradient(#5d86bd, #293F5D); color: #fff; font-weight: bold; cursor: pointer; }

/* ---- accounts, rankings, download (2026-10-19 - the 2008 site's Rankings / login pages) ---- */
.subhead { position: relative; }
.subhead .crumbs { position: absolute; right: 0; top: 10px; font-size: 11px; color: #3c3c3c; }
.sub .line { height: 6px; margin: 4px 0; border-top: 1px solid #b9c7da; border-bottom: 1px solid #e3e9f1; }
.sub .formtable { width: auto; border: 0; margin: 6px 0 4px; }
.sub .formtable td { border: 0; padding: 4px 8px 4px 0; vertical-align: middle; }
.sub .formtable td.label { width: 130px; font-weight: bold; color: #0E183B; white-space: nowrap; }
.sub .formtable input[type=text], .sub .formtable input[type=email], .sub .formtable input[type=password] { display: inline-block; width: 200px; margin: 0; }
.sub .formtable.info td { padding: 3px 8px 3px 0; }
.sub .hint { color: #888; font-size: 11px; }
.sub .formmsg { min-height: 18px; margin: 6px 0 10px; font-weight: bold; }
.sub .formmsg.bad, .sub .bad { color: #c0261a; }
.sub .formmsg.good, .sub .good { color: #1d7a2c; }
.sub .red { color: red; }
.sub .small { font-size: 11px; }
.sub button[disabled] { opacity: .6; cursor: wait; }
.sub .button-link { display: inline-block; padding: 4px 16px; border: 1px solid #293F5D; background: linear-gradient(#5d86bd, #293F5D);
  color: #fff; font-weight: bold; text-decoration: none; }
.sub .button-link:hover { filter: brightness(1.12); }
/* the 2008 ranking table: pale yellow head, grey stripes, every line ruled, centred */
.sub table.mmtable { border-collapse: collapse; width: 100%; margin: 0 0 14px; }
.sub table.mmtable td { border: 1px solid #a9a9a9; padding: 4px 6px; text-align: center; vertical-align: middle; }
.sub table.mmtable tr.head td { background: #FFFFCC; }
.sub table.mmtable tr:nth-child(odd):not(.head) td { background: #F0F0F0; }
.sub table.mmtable tr.hit td { background: #fff3b0; }
.sub table.mmtable td.who { text-align: left; }
.sub table.mmtable td.who img { vertical-align: middle; margin-right: 4px; }
.sub table.mmtable td.medal { font-weight: bold; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.5); }
.sub table.mmtable td.m1 { background: radial-gradient(circle, #ffe680 30%, #d9a61f 31%, #d9a61f 60%, transparent 61%) !important; }
.sub table.mmtable td.m2 { background: radial-gradient(circle, #f2f2f2 30%, #9aa3ad 31%, #9aa3ad 60%, transparent 61%) !important; }
.sub table.mmtable td.m3 { background: radial-gradient(circle, #f3c79a 30%, #b26b2a 31%, #b26b2a 60%, transparent 61%) !important; }
.rank-search { margin: 8px 0 4px; }
.rank-search input { display: inline-block !important; width: 160px !important; }
.rank-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 4px 0 0; }
.rank-tabs a { padding: 5px 10px; background: linear-gradient(#e7edf6, #c9d6e8); border: 1px solid #a9a9a9; border-bottom: 0;
  color: #0E183B !important; font-weight: bold; text-decoration: none !important; font-size: 11px; }
.rank-tabs a.on { background: #FFFFCC; }
/* download */
.download-box { text-align: center; margin: 10px 0 18px; }
.download-big { display: inline-flex; align-items: center; gap: 14px; padding: 12px 26px 12px 14px; border: 2px solid #785206; border-radius: 6px;
  background: linear-gradient(#ffe27a, #d9a61f 55%, #b9850f); box-shadow: 0 3px 0 #785206, 0 6px 14px rgba(0,0,0,.25);
  color: #1b1200 !important; text-decoration: none !important; }
.download-big:hover { filter: brightness(1.08); }
.download-big:active { transform: translateY(2px); box-shadow: 0 1px 0 #785206; }
.download-big img { width: 56px; height: 56px; }
.download-big b { display: block; font: italic 900 20px/22px "Arial Black", Tahoma, sans-serif; letter-spacing: .3px; }
.download-big small { display: block; font-size: 11px; color: #4a3400; margin-top: 2px; }
.sub .steps li { margin-bottom: 8px; }