/* Accessibility */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

html, body { margin: 0; padding: 0; box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body { font: 11px "Lucida Sans Unicode", Verdana, sans-serif; margin: 0; padding: 0; background:#09739B url('/images/bg2.png') repeat-x fixed top; }
input,select { font-family: Verdana; font-size: 10px; }
img { border: 0 solid; max-width: 100%; height: auto; }
a:link, a:active, a:visited { text-decoration: none; color: #22c; }
a:hover, .boxbottom a:hover { text-decoration: underline; color:#c22; }
#wrapper { max-width: 1200px; min-width: 950px; margin: 0 auto; padding: 10px; position: relative; box-sizing: border-box; }
header[role="banner"] { width: 100%; margin: 0; padding: 0; }
#banner { background: url('/images/banner/header.jpg') no-repeat left; height: 100px; margin: 0; position: relative; display: block; }
#banner a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; }
.topbar { background: #000 url('/images/banner/navtop.gif') repeat-x; height: 31px; margin: 0; overflow: hidden; }
.topbar a { cursor: pointer; }
.topbar img { padding-right: 1px; border: 0; }
nav.topbar .theme-selector { float: left; margin: 7px 0 0 15px; display: inline-flex !important; align-items: center; gap: 8px; white-space: nowrap; }
nav.topbar .theme-selector .theader { display: inline-block !important; white-space: nowrap; margin: 0; padding: 0 8px 0 0; vertical-align: middle; }
nav.topbar .theme-options { display: inline-flex !important; gap: 2px; align-items: center; white-space: nowrap; vertical-align: middle; }
.bottombar { background: #000 url('/images/banner/nav.gif') repeat-x; border-bottom: 1px #000 solid; height: 31px; margin: 0; overflow: hidden; }
nav.bottombar .bottombar-content { display: flex !important; align-items: center; justify-content: flex-end !important; width: 100%; height: 100%; padding-right: 15px; box-sizing: border-box; }
nav.bottombar .search-container { display: flex !important; align-items: center; margin-left: auto; }
nav.bottombar .search-container form { display: flex !important; gap: 5px; align-items: center; }
nav.bottombar .search-container input[type="text"] { padding: 3px 8px; border: 1px solid #ccc; border-radius: 3px; font-size: 11px; }
nav.bottombar .search-container input[type="submit"] { padding: 3px 12px; cursor: pointer; border: 1px solid #555; background: #666; color: #fff; border-radius: 3px; font-size: 11px; }
nav.bottombar .search-container input[type="submit"]:hover { background: #777; }
.theader { border: none; color: #fff; font-weight: bold; font-size: 12px; padding: 0 5px 0 10px; }
.theader img { vertical-align: middle; padding: 0 0 2px 5px; }
#body { margin: 0; padding: 0; width: 100%; }
#sidebar { float: left; width: 19%; }
.navigation { }
.navigation ul { width: 100%; border: 1px #000 solid; list-style: none; padding: 0; margin: 0 0 10px; background-color:#B3B8BA; }
.navigation li { margin: 0; }
.navigation h3 { margin: 0; width: 100%; border: 1px solid #000; border-bottom: 0; text-align: center; font-weight: normal; background-color:#005474; color:#fff; }
.navigation a { display: block; padding: 3px 0; text-decoration: none; }
.navigation a:link, .navigation a:visited { color:#000; }
.navigation a:active, .navigation a:hover { background:#A0A5A7; color:#c22; }
.navigation img { vertical-align: middle; padding: 0 8px; }
#content { float: right; width: 80%; }
.tabletop,.header,.title1,.title2,.title3 { font-weight: bold; }
h1.boxtop, .boxtop { border: 1px solid #000; border-bottom: 0; text-align: center; padding: 3px 1px; background-color:#005474; color:#fff; margin: 0 !important; display: block; font-size: 12px; font-weight: bold; line-height: 1.2; text-transform: none; }
h1.boxtop { margin-top: 0 !important; margin-bottom: 0 !important; margin-block-start: 0 !important; margin-block-end: 0 !important; }
.boxbottom { border: 1px solid #000; margin-bottom: 18px; padding: 2px 5px; background-color:#B3B8BA; clear: both; }
.boxbottom ul { list-style: none; text-align: left; padding-left: 0; margin: 0; }
.boxbottom li { margin: 0; }
.boxed a { display: block; text-decoration: none; color: #FFF; }
.boxed { margin-bottom: 3px; border: 1px #000 solid; text-align: center; font-weight: bold; width: 100%; font-size: 12px; padding: 1px 0; background-color:#005474; color:#fff; }
.tabletop { border: 1px solid #000; border-left-style: none; text-align: center; margin-bottom: 18px; padding: 1px; background-color:#005474; color:#fff; }
.tablebottom,#complete { border: 1px solid #000; border-left-style: none; border-top-style: none; text-align: center; margin-bottom: 18px; padding: 1px; background-color:#B3B8BA; }
.header { font-weight: bold; margin-bottom: 18px; padding: 1px 0; background-color:#B3B8BA; }
.content { margin-bottom: 18px; padding: 1px 1px 1px 10px; background-color:#B3B8BA; }
.navigation h3,h1.boxtop,.boxtop,.tabletop { background-image: url('/img/gradient_bg.png'); background-position: left; padding-top: 3px; padding-bottom: 3px; font-size: 12px; }
.toc { width: 35%; list-style-type: none; background-color:#a8afb2; border:1px solid #666; }
ul.toc { font-size: 12px; padding: 10px; }
.toc ul { margin-left: 30px; }
.toc li { padding-top: 3px; }
.faq { margin: 20px 10px; padding: 10px 10px 5px 0; border-left:5px #007EBB solid; background-color:#a8afb2; }
.faq span { margin-left: 2%; font-weight: bold; font-size: 12px; text-transform: uppercase; }
.faq p { margin-left: 5%; }
.title1 { margin-top: 20px; margin-bottom: 18px; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; border-bottom: 1px #9a9a9a dashed; padding: 10px; border-top:3px #005875 solid; background-color:#a8afb2; }
.title2 { margin-top: 20px; letter-spacing: 2px; border-bottom: 1px #9a9a9a dashed; font-size: 13px; padding: 5px; border-top:3px #005875 solid; background-color:#a8afb2; border-top-width:2px; }
.title3 { font-size: 11px; padding: 5px; }
.notice,.info { width: 70%; margin: 0 auto; padding: 10px 10px 10px 70px; }
.notice { border: 2px #FB9E8E solid; background: #f6d2d2 url('/img/notice.png') 5px 50% no-repeat; color: #C04C32; }
.info { margin-top: 10px; border: 2px #54AADE solid; background: #d9e0f7 url('/img/info.png') 5px 50% no-repeat; color: #006080; }
.toc_img { float: right; margin: 1em 1em 0 0; }
.fright { float: right; padding: 10px; }
.fleft { float: left; padding: 10px; }
.fmid { display: block; margin: 0 auto; padding: 1em 0; }
.quote { margin-bottom: 18px; font-style: italic; padding: 1px 1px 1px 10px; background-color:#B3B8BA; }
#footer { text-align: center; margin: -10px; }
#footer p { margin: 0; }
#footer li { list-style: none; }
#footer a { color:#fff; }
span.postmeta { color:#4a4a4a; }
.step-title, .part { color:#424242; }
.vip { color:#004FC6; }
table.misc_list_table { background-color:#666; }
/* Guide list: CSS Grid */
.guide-list { display: grid; grid-template-columns: 1fr 80px 40% 100px; width: 100%; border-left: 1px solid #000; margin-bottom: 1em; }
.guide-list.guide-list--3col { grid-template-columns: 1fr 80px 40%; }
.guide-list > div { min-width: 0; box-sizing: border-box; }
.guide-list-header { background: #005474 url('/img/gradient_bg.png') left repeat-x; color: #fff; font-weight: bold; font-size: 12px; text-align: center; padding: 3px 5px; border: 1px solid #000; border-left: none; }
.guide-list-cell { background: #B3B8BA; text-align: center; padding: 2px 5px; font-size: 11px; border: 1px solid #000; border-left: none; border-top: none; word-break: break-word; }
/* Info badge — replaces broken ?.gif on quests page */
.info-badge { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; border: 1px solid #fff; color: #fff; font-size: 9px; font-weight: bold; vertical-align: middle; line-height: 1; }
ul.guides { border-left:1px #666 solid; border-top:1px #666 solid; }
ul.guides li { background-color:#878d8f; border-bottom:1px #666 solid; }
ul.guides li.alt { background-color:#a8afb2; }
.vote img { vertical-align:middle; }
.vote,.vote:link,.vote:visited { float: right; display: block; margin: 5px 0 3px; background-color: #555; border: 1px solid #222; color: #eee; padding: 3px; background-image: url('/img/gradient_bg.png'); background-position: left; }
.boxbottom .vote:active,.boxbottom .vote:hover { background-color: #778; border: 1px solid #444; color: #fff; text-decoration: none; }
.null,.boxbottom .null:active,.boxbottom .null:hover { background-color: #666; border: 1px solid #333; color: #eee; }
.news { margin: 0 0 20px; padding: 0 8px; border-bottom: 1px solid #000; }
.news h3 { font-size: 18px; padding: 9px 0; margin: 0; }
.news .postmeta { font-size: 10px; font-style: italic; }
.news img.avatar { float: left; padding: 5px 10px 0 0; border: 0; height: 50px; }
.news p { padding: 0 10px; }
.tick { display:inline !important; display:none; }
address { display:inline; }
.hide { display:none; }
img.mainpagethumb { border:3px solid whitesmoke; box-shadow: 0 0 2px black; -webkit-filter: contrast(100%); -moz-filter: contrast(100%); -o-filter: contrast(100%); -ms-filter: contrast(100%); margin: 10px; }
img:hover.mainpagethumb { border: 3px solid whitesmoke; box-shadow: 0 0 20px black; left: -2px; top: -2px; position: relative; -webkit-filter: contrast(120%); -moz-filter: contrast(120%); -o-filter: contrast(120%); -ms-filter: contrast(120%); }

/* ========================================
   RESPONSIVE ADDITIONS
   ======================================== */

 @media (max-width: 950px) {
  #banner { margin: 0; background-size: cover; }
  #banner a { width: 100%; }
  .topbar, .bottombar { margin-left: 0; margin-right: 0; }
}

 @media (max-width: 768px) {
  #body { width: 100%; padding: 0 5px; }
  #sidebar { float: none; width: 100%; margin-bottom: 15px; }
  #content { float: none; width: 100%; }
}

 @media (max-width: 600px) {
  table[style*="800px"] { width: 100% !important; }
  table[style*="800px"] tr { display: flex; flex-wrap: wrap; justify-content: center; }
  table[style*="800px"] td { flex: 0 0 45%; margin: 2.5%; }
  .bottombar table tr { display: block; }
  .bottombar td { display: block !important; width: 100% !important; text-align: center !important; padding: 3px 0 !important; }
  .bottombar input[type="text"] { width: 70%; }
  .topbar > div { margin: 5px !important; }
  .topbar img { max-width: 30px; }
  .notice, .info { width: 90%; padding-left: 45px; background-size: 25px; }
  .fright, .fleft, .toc_img { float: none; display: block; margin: 10px auto; text-align: center; }
}

 @media (max-width: 400px) {
  table[style*="800px"] td { flex: 0 0 90%; }
}