/* Draft 02: reference-informed, CSS2 beveled image-slice geometry. */
body { background:#78a2ce; }
.blue-field { position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; overflow:hidden; }
.blue-field i { position:absolute; display:block; left:0; width:100%; font-size:0; line-height:0; }
.blue-field .track { height:1px; background:#cfeaf4; border-bottom:1px solid #a4c7e0; }
.blue-field .diagonal { position:absolute; display:block; width:2px; height:1px; background:#d4edf7; border-left:1px solid #91b7d7; font-size:0; }
.blue-corner { position:absolute; bottom:0; left:0; width:78px; height:34px; background:#0877ac; border-top:3px double #51b3d2; }
.corner-edge { position:absolute; bottom:0; left:78px; width:0; height:0; border-right:40px solid transparent; border-bottom:37px solid #0877ac; }
.header { background:#b5d8ec; }
.head-table { background-color:transparent; border-top:1px solid #e6f7ff; }
.brand { position:relative; padding:0 18px 0 10px; width:254px; border:0; background:transparent; }
.brand a { display:block; width:244px; height:50px; padding:3px 0; border-top:1px solid #ddf6ff; border-bottom:3px double #76cbe7; background:#fff; }
.original-logo { display:block; }
.brand-notch { position:absolute; left:265px; bottom:0; width:0; height:0; border-right:17px solid transparent; border-bottom:17px solid #d3ebf6; }
.head-caption { color:#304e79; font:9px Arial,sans-serif; letter-spacing:1px; padding-left:10px; margin-top:42px; }
.menu-page { background:#86afd3; }
.sidebar { padding-top:7px; }
.login { border:1px solid #90b4d1; border-top:3px double #e9f7ff; background:#b4d3e8; margin-bottom:6px; }
.login-head { height:22px; line-height:22px; border-top:0; border-bottom:3px double #9cc7df; background:#d7e8f2; color:#1c3f7d; font-style:italic; }
.login-head a { color:#a83e25; background:#f5f7f6; border:2px outset #d6e8f0; line-height:15px; padding:0 5px; margin-top:1px; }
.login table { margin-top:7px; }
.login input[type=text],.login input[type=password] { border:2px inset #d3e8f2; background:#fcfdfd; }
.enter input { background:#f2f5f7; border:2px outset #eaf6ff; font-weight:bold; font-style:italic; }
.nav { padding-top:3px; padding-bottom:9px; }
.nav-link { position:relative; margin-bottom:3px; width:178px; height:19px; line-height:18px; padding:0 6px 0 13px; color:#182e6a; background:#f0f5f6; border-top:2px solid #dfedf4; border-left:0; border-right:0; border-bottom:3px solid #d28256; font-style:italic; }
.nav-link:before { content:""; position:absolute; left:0; right:0; top:2px; border-top:1px solid #fff; }
.nav-link:after { content:""; position:absolute; left:0; right:0; bottom:-5px; border-top:1px solid #567a9f; border-bottom:1px solid #cce3f0; }
.bevel-left { position:absolute; left:0; top:-2px; width:0; height:0; border-right:8px solid transparent; border-top:9px solid #a8cce2; }
.bevel-right { position:absolute; right:0; top:-2px; width:0; height:0; border-left:11px solid transparent; border-top:12px solid #92b5d0; }
.nav-link .button-label { color:#142665; padding:0; }
.nav-link .nav-dot { color:#d9a265; padding-right:7px; font-style:normal; }
.nav-0 { margin-bottom:12px; border-bottom-color:#bf7150; }
.nav-2 { margin-bottom:12px; }
.nav-3,.nav-4 { border-bottom-color:#719d6c; }
.nav-3 .nav-dot,.nav-4 .nav-dot { color:#8baf70; }
.nav-link:hover { background:#fff; border-bottom-color:#e5a642; }
.game-link { position:relative; margin-bottom:7px; width:197px; height:56px; background:#b5cbe2; border:1px solid #e1edf8; border-bottom:3px double #6393b9; }
.game-cap { display:block; height:14px; line-height:14px; background:#e7eef7; color:#273466; font-size:10px; font-weight:bold; font-style:italic; text-align:left; padding-left:9px; border-bottom:2px solid #7da4c9; }
.game-window { display:block; height:40px; overflow:hidden; }
.game-window img { position:relative; top:-14px; }
.game-edge { position:absolute; right:0; top:0; width:0; height:0; border-left:12px solid transparent; border-top:12px solid #8cafce; }
.kof b { padding-top:4px; } .kof { background:#c7dce9; }
.flash-note { color:#e9f5ff; margin-top:12px; }
.archive-link { position:relative; border:0; border-top:2px solid #e3f1f8; border-bottom:3px solid #5c8fab; color:#163e72; background:#e8f1f6; font-style:italic; padding:3px 10px 3px 16px; margin-top:12px; margin-right:3px; }
.main-page { background:#94b9d9; }
.banner { background:transparent; }
.banner-select a { color:#254377; border-top:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #799abb; border-bottom:1px solid #799abb; }
.news-box { margin-top:6px; border-top:3px double #c5e4f3; border-left:3px double #d4ebf5; border-right:3px double #89b1d5; border-bottom:3px double #85aad0; background:#b8d5ea; }
.news-head { position:relative; height:31px; background:#b7d6e9; border:0; border-top:1px solid #dff3fc; border-bottom:4px double #8cb6d5; padding-left:20px; }
.news-head b { font:bold italic 17px Arial,sans-serif; letter-spacing:2px; color:#204b83; }
.news-head span { color:#3a6694; font-size:10px; }
.panel-left { position:absolute; left:0; top:0; width:0; height:0; border-right:12px solid transparent; border-top:12px solid #8db5d5; }
.panel-right { position:absolute; right:0; top:0; width:0; height:0; border-left:12px solid transparent; border-top:12px solid #8db5d5; }
.news-body { background:#b0cee6; border-left:4px double #d1e9f6; border-right:4px double #d1e9f6; padding:0 12px; }
.news-document { background:#b0cee6; color:#14396b; }
.news-document td { color:#14396b; }
.news-document .section-bar { background:#0875b2; border-top:1px solid #72b9dc; border-bottom:2px solid #3f94c3; color:#f4faff; }
.news-document .section-bar font { color:#f4faff; }
.news-bottom { height:9px; line-height:9px; border-bottom:1px solid #cfebf8; background:#a3c6e1; }
.footer { border-top:3px double #81b3d1; background:#76a0cb; }
.footer .blue-field { background:#76a0cb; }
.footer .blue-field i,.footer .blue-field b { display:none; }
.footer .blue-corner { width:90px; height:35px; }
.footer .corner-edge { left:90px; border-bottom-width:35px; }
.copyright { color:#edf7ff; padding-left:15px; }
.draft-label,.draft-label a { color:#123761; }
.restored { background:#b6d2e7; }
.page-copy { background:#c6deed; border:3px double #e2f2fa; width:491px; margin:18px 18px; padding:12px 14px; }
.page-copy .wide-art { margin-left:-35px; }
.page-title { border-bottom:4px double #9dc4dd; color:#143b76; }

/* Recovered 198x25 button surround. The overlaid navigation wording is reconstructed. */
.nav-link { width:198px; height:25px; line-height:25px; padding:0; border:0; background:transparent url(assets/recovered-20040723192503_sd_bt00.gif) no-repeat 0 0; }
.nav-link:hover { background:transparent url(assets/recovered-20040723192503_sd_bt00.gif) no-repeat 0 0; }
.nav-link .bevel-left,.nav-link .bevel-right,.nav-link .nav-dot { display:none; }
.nav-link:before,.nav-link:after { display:none; }
.nav-link .button-label { display:block; position:absolute; left:26px; top:2px; width:137px; height:15px; line-height:15px; background:#e5e7ed; color:#071c62; font-weight:bold; }
.nav-link:hover .button-label { color:#bd3b16; }
.nav-1 .button-label,.nav-2 .button-label { border-bottom:1px solid #d5ab64; }
.nav-3 .button-label,.nav-4 .button-label { border-bottom:1px solid #8ca16a; }

.news-head { padding:0; height:30px; border:0; background:transparent; }

.brand a { width:162px; height:25px; padding:6px 12px; margin-left:17px; border:3px double #91c6dc; }
.original-logo { margin:0 auto; }
.game-link { margin-bottom:3px; }
.nav { padding-bottom:3px; }
.flash-note { margin-top:6px; margin-bottom:6px; }
.archive-link { margin-top:5px; }

.main-page .blue-corner,.main-page .corner-edge,.restored .blue-corner,.restored .corner-edge { display:none; }

/* Native circle slice: 214px content origin + 47px artwork offset = 261px.
   Preserve the historical tool position at 582px: 261 + 321 = 582. */
.header-v5 { position:relative; height:71px; overflow:hidden; background:#0033cc; }
.header-lines { position:absolute; left:0; top:0; width:100%; height:71px; overflow:hidden; }
.header-lines i { position:absolute; left:0; width:100%; height:1px; display:block; font-size:0; line-height:0; }
.header-rings { position:absolute; left:261px; top:0; }
.combined-brand { display:block; position:absolute; left:22px; top:11px; width:245px; height:49px; overflow:hidden; }
.combined-brand img { position:absolute; left:-5px; top:-29px; }
.unofficial-mark { position:absolute; right:3px; top:0; font:bold italic 8px/10px Arial,sans-serif; letter-spacing:2px; color:#b8442c; opacity:.85; text-shadow:0 0 2px #fff,0 0 1px #fff; }
.header-links { position:absolute; left:582px; top:0; width:199px; height:71px; }
.header-cap { height:25px; background:#0033cc; }
.header-links td { padding:0; vertical-align:top; line-height:0; }
.header-links img { display:block; }

/* Draft 04: screenshot color groups; bilingual labels in ordinary HTML/CSS2. */
.en { font-family:Arial,sans-serif; font-size:10px; font-weight:normal; font-style:normal; }
.nav-link .button-accent { position:absolute; display:block; height:1px; font-size:0; line-height:0; background:#bf624f; }
.nav-1 .button-accent,.nav-2 .button-accent { background:#d3a15a; }
.nav-3 .button-accent,.nav-4 .button-accent { background:#78955f; }
.nav-4 { margin-bottom:12px; }
.nav-6 .button-accent { background:#c94343; }
.nav-5 .button-accent { background:#4f7fb3; }
.nav-link .button-label { font-size:11px; white-space:nowrap; border:0; }
.nav-link .en { font-size:10px; color:#243967; padding:0; }
.login-head { padding:0 4px; font-size:10px; }
.login-head a { padding:0 2px; }
.login-head .en { font-size:9px; }
.game-cap .en { font-size:9px; }
.kintaro .game-cap { height:26px; line-height:13px; }
.kintaro { height:68px; }
.game-link small .en { font-size:9px; }
.flash-note { line-height:12px; }
.flash-note .en { font-size:9px; }
.archive-link { margin-bottom:0; line-height:16px; }
.archive-link .en { font-size:10px; color:#304e70; }
.header-links { left:582px; width:199px; text-align:center; }
.header-links a { display:block; position:relative; width:91px; height:36px; text-decoration:none; margin:0; }
.header-links .en { display:block; margin-top:3px; line-height:12px; font-size:9px; color:#142b6a; }
.header-links a:hover,.header-links a:focus { color:#0033cc; }
.header-links a:hover img,.header-links a:focus img { outline:1px solid #fff; }
.header-links a:hover .en,.header-links a:focus .en { color:#0033cc; text-decoration:underline; }
/* Keep bevels and silhouettes stationary; hover changes only the inset label and accents. */
.nav-link:hover .button-label,.nav-link:focus .button-label { background:#fff; color:#0033cc; text-decoration:underline; }
.nav-link:hover .en,.nav-link:focus .en { color:#0033cc; }
.nav-link:hover .button-accent,.nav-link:focus .button-accent { background:#da503b; }
.nav-1:hover .button-accent,.nav-2:hover .button-accent,.nav-1:focus .button-accent,.nav-2:focus .button-accent { background:#e28a20; }
.nav-3:hover .button-accent,.nav-4:hover .button-accent,.nav-3:focus .button-accent,.nav-4:focus .button-accent { background:#528b31; }
.nav-5:hover .button-accent,.nav-5:focus .button-accent { background:#2462a8; }
.nav-link:focus { outline:1px dotted #0033cc; }
.game-link:hover .game-cap,.game-link:focus .game-cap { background:#fff; color:#0033cc; }
.archive-link:hover,.archive-link:focus { color:#0033cc; text-decoration:underline; }
.login-head a:hover,.login-head a:focus { color:#0033cc; }
.enter input:hover,.enter input:focus { color:#0033cc; background:#fff; }
.page-title .en { font-size:14px; }

/* Original 567x63 title-bar artwork; missing wording is an HTML reconstruction. */
.period-title,.original-page-title { position:relative; width:567px; height:63px; padding:0; margin:0; border:0; background-repeat:no-repeat; }
.period-title .title-wording-patch { position:absolute; top:15px; height:26px; background-position:-470px -15px; background-repeat:no-repeat; font-size:0; line-height:0; }
.period-title strong { position:absolute; left:252px; top:13px; width:299px; height:24px; line-height:24px; font:bold italic 22px "MS PGothic",Osaka,Arial,sans-serif; color:#000066; white-space:nowrap; }
.period-title .title-english,.original-page-title .title-english { position:absolute; right:19px; top:46px; font:10px Arial,sans-serif; color:#173e6c; }
.period-subtitle { display:block; width:344px; padding:3px 5px; border-top:1px solid #eaf6ff; border-bottom:2px solid #648eb4; background:#c5ddec; font-weight:bold; }
.period-subtitle small { font:10px Arial,sans-serif; }
.publisher-logo-slot { display:block; width:165px; height:101px; background:#000; text-align:center; }

/* Expanded platform catalogue. CSS2 and static tables; no client framework. */
.game-catalogue { position:relative; width:519px; margin:12px 24px 30px; color:#000066; font-size:12px; line-height:1.5; }
.game-catalogue p { margin:6px 0 10px; }
.catalogue-intro { border-bottom:1px solid #80a4c9; padding-bottom:9px; }
.catalogue-intro b { font-size:15px; }
.catalogue-jumps { padding:6px; background:#d5e7f3; border:2px outset #edf7ff; font-size:10px; text-align:center; }
.game-catalogue .catalogue-help,.group-note { font-size:10px; color:#25496e; }
.game-section { font-size:14px; padding:4px 8px; margin:20px 0 7px; color:#fff; background:#0864a4; border-top:1px solid #e8f4fd; border-bottom:2px solid #376393; border-left:7px solid #d56957; }
.game-section.other { border-left-color:#e7a058; }
.game-section.unreleased { border-left-color:#8caf64; }
.game-section small { font-size:11px; font-weight:normal; }
.game-entry { margin:0 0 13px; border:1px solid #85a6c7; border-top:1px solid #e7f3fa; background:#c5dced; table-layout:fixed; }
.game-name { padding:4px 7px; background:#dfedf5; border-bottom:1px solid #9cbbd7; font-size:12px; }
.game-name span { font-size:11px; font-weight:normal; }
.game-art { padding:7px 5px; width:177px; }
.game-picture { display:block; position:relative; overflow:hidden; width:165px; height:124px; background:#0a1b35; border:1px solid #6889ac; }
.game-picture img { position:absolute; }
.game-details { padding:7px 8px 4px 0; }
.game-details .game-meta { font-size:10px; color:#214969; margin-top:0; }
.game-details p { margin-bottom:7px; }
.game-details .game-links { font-size:10px; }
.back-top { text-align:right; font-size:10px; }
.source-path { font-size:10px; word-wrap:break-word; }
.catalogue-back { position:relative; margin:5px 24px; font-size:11px; }

/* Stand-ins for unrecovered images (see reconstruction notes). */
.stand-in { border:1px solid #8db7ec; }
.stand-in-window { display:inline-block; position:relative; overflow:hidden; border:1px solid #8db7ec; }
.stand-in-window img,.logo-window img { position:absolute; }
.logo-window { display:block; position:relative; overflow:hidden; width:165px; height:101px; background:#0a1b35; }
.carrier-button { display:block; width:51px; height:58px; border:2px outset #f2d7b4; background:#f6a23c; color:#fff; font:bold italic 15px Arial,sans-serif; line-height:58px; text-align:center; }
.carrier-button b { color:#3b2a8f; }
.close-button { display:inline-block; padding:2px 8px; border:2px outset #e2eef5; background:#d7e8f5; color:#000066; font:bold 11px Arial,sans-serif; }
.close-button small { font-weight:normal; }
.stand-in-credit { display:block; font:9px Arial,sans-serif; color:#55708c; margin-top:2px; }

/* Original Flash image sequence, with small period-style playback controls. */
.banner { height:216px; }
.banner-select { left:8px; right:auto; top:196px; bottom:auto; height:18px; line-height:18px; white-space:nowrap; }
.banner-select a { font-size:9px; padding:1px 4px; }
.banner-select a.banner-current { background:#124c8a; color:#fff; }
.banner-select a:hover,.banner-select a:focus { background:#fff; color:#0033cc; }
.kof { height:98px; }
.kof .game-cap { height:28px; line-height:14px; padding-left:5px; font-size:10px; }
.kof .game-window { height:68px; background:#abc800; }
.kof .game-window img { display:block; top:0; }
.rebuild-news { width:470px; }
.news-document .news-era { font-size:10px; color:#173f71; margin:5px 0; }
.news-document .rebuild-news .section-bar { color:#fff; padding:2px 4px; }
.rebuild-news .section-bar .en { color:#fff; }
.rebuild-news-copy { padding:5px 5px 10px; font-size:10px; line-height:1.5; }