/* Compatibility layer for the embedded browser shipped with the game. */
html, body { margin: 0; padding: 0; background: #0b0e16 url("assets/azhyron2.png") top center no-repeat; color: #f4f0ee; font-family: Arial, Tahoma, sans-serif; }
body { font-size: 14px; }
a { color: #d9e2ff; text-decoration: none; }
.topbar { display: block; min-height: 44px; padding: 12px 18px; background: #101522; border-bottom: 1px solid #53627e; text-align: center; }
.brand { display: inline-block; margin-right: 28px; color: #fff; font-family: Georgia, serif; font-size: 22px; font-weight: bold; }
.topbar nav { display: inline; }
.topbar nav a, .nav-button { display: inline-block; margin: 0 8px; padding: 5px 0; border: 0; background: transparent; color: #d9e2ff; font-size: 15px; font-weight: bold; }
.hero { min-height: 0; padding: 120px 18px 35px; }
.page-grid { display: block; width: 100%; margin: 0 auto; }
.left-column, .right-column { display: block; }
.panel, .shop-band, .download-band { background: #101522; border: 1px solid #4c5d7c; box-shadow: none; }
.login-panel, .online-panel, .ranking-mini, .media-panel, .register-panel { margin: 0 auto 16px; padding: 18px; }
.register-panel { max-width: 760px; }
.login-panel, .online-panel, .ranking-mini, .media-panel { max-width: 760px; }
h1 { margin: 10px 0 24px; color: #fff; font-family: Georgia, serif; font-size: 42px; line-height: 1.1; text-align: center; }
h2 { color: #fff; font-size: 24px; }
h3 { color: #fff; }
p, label, small, output, .link-row, .online-panel > span, .register-form small { color: #d5dbea; }
.stack-form, .register-form { display: block; }
.stack-form input, .register-form input { display: block; width: 96%; height: 34px; margin: 7px 0; padding: 0 8px; border: 1px solid #60708c; background: #080b12; color: #fff; }
.stack-form button, .main-button, .shop-buy { display: inline-block; min-height: 34px; padding: 5px 16px; border: 1px solid #aab7d0; background: #263653; color: #fff; font-weight: bold; }
.register-form label { display: block; margin: 12px 0; }
.register-form label > span { display: block; margin-bottom: 4px; color: #fff; text-align: left; }
.register-form small { display: block; margin: 3px 0 8px; }
.channels { display: block; }
.channels div { display: block; min-height: 28px; margin: 6px 0; padding: 6px 9px; border: 1px solid #53627e; color: #e3e9f5; }
.channels i { display: inline-block; width: 9px; height: 9px; margin-right: 8px; background: #4fd56d; }
.channels div.is-offline i { background: #e2444f; }
.ranking-list, .tabs, .media-grid, .shop-list { display: block; }
.ranking-card, .shop-card { display: block; margin: 8px 0; padding: 12px; border: 1px solid #53627e; background: #151d2c; }
.ranking-card span, .ranking-card strong, .ranking-card small { display: inline-block; margin-right: 10px; }
.shop-band { margin-top: 22px; padding: 28px 18px; }
.shop-heading { display: block; margin-bottom: 18px; }
.shop-heading h2 { margin: 4px 0; }
.shop-card { min-height: 0; }
.shop-card-visual { display: block; min-height: 42px; padding: 14px; border: 1px solid #53627e; background: #0a0e17; color: #c8dcff; text-align: center; }
.shop-card-copy h3 { margin: 12px 0 6px; }
.shop-card-copy p { min-height: 0; }
.shop-card-footer { display: block; margin-top: 12px; }
.shop-card-footer strong { display: inline-block; margin-right: 20px; color: #ffd48c; }
.empty-shop { padding: 20px; border: 1px solid #53627e; color: #d5dbea; }
.download-band { display: block; margin-top: 18px; padding: 24px 18px; }
footer { padding: 20px; background: #101522; color: #b8c3d8; text-align: center; }