/*
  Netsphere website: additions to the archived alaplaya stylesheets (base_packaged/all/subsite_s4/tap_s4).
  Recreates with CSS what the archive is missing (404 sprites: seo/bg-panel, layout/s4/bg-nav, sidebar box frames,
  btn-slide, bg-btn-area, separators, menu drop backgrounds) and styles the pages that were never archived.
*/
:root {
    --s4-orange: #ff931f;
    --s4-nav: #fda217;
    --s4-blue: #037cc9;
    --s4-cyan: #99efe8;
    --s4-light: #bedaeb;
    --s4-steel: #738dbe;
    --s4-dark: #22314e;
}

body.alaplaya { font-family: 'Century Gothic', Verdana, Arial, Helvetica, sans-serif; font-size: 11px; background: #000; }
#background { background: #000 url('/images/backgrounds/bg_s4_full.jpg') no-repeat center 30px; min-height: 1200px; }
a { color: var(--s4-light); }
a:hover { color: #fff; }

/* ---- top panel (bg-panel.png missing) ---- */
.panel { background: linear-gradient(#2a2a2a, #050505); border-bottom: 1px solid #333; z-index: 10000; height: 30px; }
.panel .add-nav li { border-right-color: #444; }
.panel .add-nav li a { background: none; padding-right: 14px; position: relative; font-weight: bold; }
.panel .add-nav li a:after { content: ''; position: absolute; right: 2px; top: 5px; border: 4px solid transparent; border-top-color: #fff; }
.panel .clock { float: left; margin: 8px 0 0 25px; color: #fff; font: bold 11px Georgia, serif; }
.panel .clock div { float: left; }
.panel .clock .jclock { padding-left: 5px; }
.panel .social { float: left; margin: 4px 0 0 10px; }
.panel .social a img { height: 20px; width: 20px; margin-right: 2px; vertical-align: middle; }
#login-topbar { float: right; height: 87px; width: 500px; background: url('/images/layout/control_center_bg.png') no-repeat; position: relative; color: #000; }
#login-topbar .login-box { width: 210px; float: left; padding-top: 5px; }
#login-topbar .row { overflow: hidden; }
#login-topbar .lable { float: left; padding: 2px 5px 0; min-width: 75px; font: 11px Georgia, serif; color: #000; text-align: center; display: block; width: 120px; }
#login-topbar .text input { width: 124px; font-size: 11px; border: 1px solid #888; padding: 2px 3px; margin-left: 2px; }
#login-topbar .row.forgot { text-align: right; width: 192px; }
#login-topbar .row.forgot a { color: #333; font-size: 9px; }
#login-topbar .login-btn { position: absolute; left: 210px; top: 32px; }
#login-topbar .topbar-create-btn { position: absolute; right: 15px; top: 25px; }
#login-topbar .topbar-create-btn .aside { width: auto; float: none; margin: 0; }
#login-topbar .topbar-create-btn .btn-area a { background: none; }
#login-topbar .topbar-create-btn .btn-area a span { background: none; color: #fff; font: bold 14px Georgia, serif; text-shadow: 0 0 3px #000; padding: 4px 0; width: auto; }
#control_center_options { position: absolute; right: 8px; top: 2px; }
#control_center_options .lable { display: inline; font: 11px Georgia, serif; color: #000; margin-right: 6px; }
#control_center_options form { display: inline; }
#control_center_options select { font-size: 11px; width: 98px; }
.topbar-account { padding: 8px 0 0 12px; font-size: 11px; width: 330px; }
.topbar-account a { color: #22314e; font-weight: bold; }
.topbar-welcome { font: 13px Georgia, serif; margin-bottom: 4px; }
.topbar-links { margin-bottom: 6px; }
.topbar-logout { margin: 0; }

/* buttons (btn-slide.png sprite missing on most hosts) */
.row button.submitBtn, button.submitBtn, .btn-s4 {
    background: linear-gradient(#5a5a5a, #111) !important; border: 1px solid #000; border-radius: 12px; color: #fff; padding: 0;
    cursor: pointer; font: bold 11px Verdana, Arial, sans-serif; height: 22px; box-shadow: 0 0 0 1px #444 inset;
}
.row button.submitBtn span, button.submitBtn span { background: none !important; display: block; padding: 3px 16px; color: #fff; }
button.submitBtn:hover span { text-decoration: underline; }
.btn-s4 { display: inline-block; padding: 3px 14px; text-decoration: none; line-height: 14px; height: auto; }
.btn-s4:hover { color: var(--s4-nav); text-decoration: none; }
.btn-s4.orange { background: linear-gradient(#ffb04d, #d26b00) !important; border-color: #6a3500; }
.btn-s4.danger { background: linear-gradient(#b33, #500) !important; }

/* popups of the top bar */
.popup { display: none; position: fixed; top: 30px; left: 50%; margin-left: -500px; z-index: 10001; width: 630px; padding: 15px; color: #fff;
    background: rgba(0, 0, 0, .92); border: 2px solid var(--s4-cyan); border-top: 0; border-radius: 0 0 10px 10px; }
.popup.open { display: block; }
.popup .headline { font-size: 16pt; font-weight: bold; padding-left: 15px; }
.popup .list { list-style: none; margin: 0; padding: 20px 0 0; overflow: hidden; }
.popup .list li { float: left; width: 198px; margin: 0 5px 10px; text-align: center; }
.popup .list li span { display: block; color: #fff; }
.popup .btn-close { position: absolute; right: 12px; top: 10px; color: #fff; }
.popup2 .list li { width: 115px; }
.popup .wta-topup { clear: both; padding: 10px 15px 0; font-size: 12px; line-height: 16px; }

/* ---- header / navigation (bg-nav.png missing) ---- */
#wrapper { padding-top: 150px; }
#header { top: 45px; z-index: 100; }
.nav-bar .frame, #nav { background: none; }
#nav li a { color: #fff; }
#nav > li > a > span { color: #fff; text-shadow: 0 1px 2px #000; font-family: 'Century Gothic', Verdana, Arial, sans-serif; }
#nav li a:hover, #nav li:hover > a, #nav li.active > a { background: none; }
#nav li:hover > a > span, #nav li.active > a > span { color: var(--s4-nav); background: rgba(0, 0, 0, .65); border-radius: 3px; }
#nav .drop { width: auto; }
#nav .drop .top-left, #nav .drop .top, #nav .drop .top-right, #nav .drop .bottom-left, #nav .drop .bottom, #nav .drop .bottom-right,
#nav .drop .left, #nav .drop .right { display: none; }
#nav .drop .drop-holder { margin: 0; float: none; }
#nav .drop .content { background: rgba(0, 0, 0, .92); border: 1px solid var(--s4-cyan); border-radius: 0 0 6px 6px; padding: 6px 0 2px; min-width: 170px; }
#nav .drop .col { margin: 0; float: none; }
#nav .drop ul { margin: 0; }
#nav .drop ul li { padding: 0 0 3px; }
#nav .drop ul li a { background: none; font-size: 12px; }
#nav .drop ul li a span { white-space: nowrap; padding: 3px 12px; font-weight: bold; color: #fff; background: none; }
#nav .drop ul li a:hover span { color: var(--s4-nav); background: none; }
.table, .table .body, .table .content { background-color: transparent; }

/* ---- content frame (content-box corners from bg-bottom.png exist; flash notices) ---- */
.content-box .holder .frame { padding: 0 12px; min-height: 60px; }
.flash-notice { background: #0b2533; border: 2px solid var(--s4-cyan); color: #fff; padding: 8px 12px; margin: 0 0 10px; border-radius: 8px; font-size: 12px; }
.flash-error { background: #330b0b; border-color: #e05050; }

/* the module frame of the portal pages (rankings, registration): content_top_600 + middle + content_bottom_600 */
.module600 { width: 600px; margin: 0 0 14px; }
.module600 .head { height: 20px; background: url('/images/layout/s4/content_top_600.png') no-repeat; }
.module600 .middlecontent { background: #000; border-left: 2px solid var(--s4-cyan); border-right: 2px solid var(--s4-cyan); padding: 4px 14px 8px; color: #fff; overflow: hidden; }
.module600 .homebottom { height: 20px; background: url('/images/layout/s4/content_bottom_600.png') no-repeat; }

/* headings: the original site rendered them as images (/title/<base64>.png?color=&size=); recreated as styled text */
.title-big { font: bold 26px/31px 'Century Gothic', 'Arial Black', Arial, sans-serif; color: var(--s4-blue); text-transform: uppercase; letter-spacing: -.5px;
    text-shadow: 1px 1px 0 #001a2b, 0 0 6px rgba(3, 124, 201, .5); margin: 6px 0 10px; }
.title-small { font: bold 14px 'Century Gothic', Verdana, Arial, sans-serif; color: var(--s4-orange); margin: 10px 0 6px; }
.title-white { color: #fff; }
.micro_title { color: var(--s4-light); font-weight: bold; font-size: 11px; }
.placement { margin: 0 0 8px; overflow: hidden; }
.plain_text_100 { font-size: 11px; line-height: 15px; color: #fff; }
.plain_text_100 img, .guide-content img { max-width: 560px; height: auto; }
.guide-content { color: #fff; font-size: 11px; line-height: 15px; overflow: hidden; }
.guide-content #title_small { color: var(--s4-orange) !important; }
.guide-content table { max-width: 570px; }
.notice-box { color: var(--s4-light); padding: 12px 0; font-size: 12px; }

/* ---- sidebar / aside boxes (bg-sidebar-boxes.png missing) ---- */
#sidebar .box .head, .aside .box .head { background: none; height: 10px; border: 2px solid var(--s4-cyan); border-bottom: 0; border-radius: 10px 10px 0 0; background-color: rgba(0, 0, 0, .85); }
#sidebar .box .box-c, .aside .box .box-c { background: rgba(0, 0, 0, .85); border-left: 2px solid var(--s4-cyan); border-right: 2px solid var(--s4-cyan); padding: 0 8px; overflow: hidden; }
#sidebar .box .box-b, .aside .box .box-b { background: rgba(0, 0, 0, .85); height: 10px; border: 2px solid var(--s4-cyan); border-top: 0; border-radius: 0 0 10px 10px; margin-bottom: 10px; }
#sidebar .social { text-align: center; padding: 2px 0; }
#sidebar .social a img { width: 32px; height: 32px; }
#sidebar .btn { display: block; margin: 0 0 8px; }
.aside .login-form { background: none; padding: 2px 0 6px; border-bottom: 1px dotted #555; }
.aside .login-form .row { margin: 0 0 5px; }
.aside .login-form .text { background: #fff; border: 1px solid #777; border-radius: 3px; padding: 1px 4px; }
.aside .login-form .text input { border: 0; width: 140px; font-size: 11px; background: transparent; }
.aside .login-form .icon { display: none; }
.aside .login-form .pass { font-size: 10px; color: #fff; }
.aside .btn-area { padding: 6px 0 2px; }
.aside .btn-area a { display: block; background: linear-gradient(#3a3a3a, #0c0c0c); border: 1px solid #555; border-radius: 10px; margin: 0 0 5px; text-align: center; text-decoration: none; }
.aside .btn-area a span { background: none; display: block; padding: 3px 0; color: #fff; font-weight: bold; }
.aside .btn-area a:hover span { color: var(--s4-nav); }
.aside .game-list { list-style: none; margin: 0; padding: 4px 0; }
.aside .game-list li { background: none; overflow: hidden; padding: 4px 0; border-bottom: 1px dotted #444; }
.aside .game-list li:last-child { border-bottom: 0; }
.aside .game-list li .ico { float: left; width: 80px; }
.aside .game-list li .ico img { max-width: 78px; }
.aside .game-list li .ico img.grey { filter: grayscale(1) brightness(.8); }
.aside .game-list .holder { float: left; list-style: none; margin: 0; padding: 4px 0 0 6px; }
.aside .game-list .holder li { padding: 2px 0; border: 0; }
.aside .game-list .holder li a { color: #fff; font-weight: bold; text-decoration: underline; }
.aside .loggedin { padding: 4px 0 8px; color: #fff; overflow: hidden; }
.aside .loggedin .avatar { float: left; margin: 0 6px 4px 0; width: 48px; }
.aside .loggedin-name { font: bold 13px 'Century Gothic', Verdana, sans-serif; color: var(--s4-orange); padding-top: 6px; word-break: break-all; }
.aside .account-links { clear: both; list-style: none; margin: 0; padding: 4px 0 0; }
.aside .account-links li { padding: 3px 0; border-bottom: 1px dotted #444; }
.aside .account-links a { color: #fff; font-weight: bold; }

/* ---- footer ---- */
#footer ul li { background: none; }
#footer ul li + li:before { content: '·'; color: #fff; margin-right: 8px; }
#footer .online { float: none; text-align: center; }

/* ---- news boxes (teaser_news / slide-box) ---- */
.content-box .slide-box .block, .content-box .slide-box .block-holder, .content-box .slide-box .block-frame { background-image: url('/images/teaser/s4/bg-slide-box.png'); }
.slide-box { width: 570px; margin: 0 0 12px; }
.slide-box .head { overflow: hidden; padding: 8px 12px 6px 14px; }
.slide-box .head img { float: left; margin-right: 10px; }
.slide-box .head strong, .slide-box .head h1 { float: left; font: bold 20px/30px 'Century Gothic', Verdana, Arial, sans-serif !important; margin: 0; max-width: 400px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.slide-box .head strong a { color: #fff; text-decoration: none; }
.slide-box .head .date { float: right; font: bold 13px/30px Georgia, serif; color: #fff; }
.slide-box .text-box { padding: 4px 18px 6px; overflow: hidden; color: #fff; font-size: 12px; line-height: 15px; }
.slide-box .text-box .alignleft { float: left; margin: 0 8px 4px 0; }
.slide-box .text-box .alignleft img { width: 260px; max-height: 105px; object-fit: cover; }
.slide-box .text-box-holder img { max-width: 520px; height: auto; }
.slide-box .bar { overflow: hidden; padding: 6px 18px 12px; }
.slide-box .btn-list { float: right; list-style: none; margin: 0; padding: 0; }
.slide-box .btn-list li { float: left; margin-left: 10px; }
.slide-box .btn-list li a { background: none; text-decoration: none; }
.slide-box .btn-list li a span { background: linear-gradient(#3a3a3a, #0c0c0c); border: 1px solid #555; border-radius: 10px; padding: 3px 14px; display: block; color: #fff; font-weight: bold; }
.slide-box .btn-list li a:hover span { color: var(--s4-nav); }
.slide-box .admin-links { float: left; font-size: 10px; }
.slide-box.small .head { padding-bottom: 8px; }
.news-month-list { list-style: none; margin: 0; padding: 0; columns: 2; }
.news-month-list li { padding: 3px 0; }

/* ---- changelog (/changelog): news boxes per version, badges per change type ---- */
.changelog-head { color: var(--s4-light); font-size: 12px; margin: 0 0 12px; overflow: hidden; }
.changelog-head .changelog-current { color: var(--s4-orange); }
.changelog-lang { float: right; font-weight: bold; }
.changelog-lang a, .changelog-lang strong { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 8px; border: 1px solid #555; text-decoration: none; }
.changelog-lang a { background: linear-gradient(#3a3a3a, #0c0c0c); color: #fff; }
.changelog-lang a:hover { color: var(--s4-nav); }
.changelog-lang strong { background: var(--s4-orange); border-color: var(--s4-orange); color: #000; }
.changelog-version .text-box { padding-bottom: 12px; }
.changelog-title { font: bold 14px 'Century Gothic', Verdana, Arial, sans-serif; color: var(--s4-orange); margin: 0 0 6px; }
.changelog-list { list-style: none; margin: 0; padding: 0; }
.changelog-list li { padding: 3px 0 3px 0; border-bottom: 1px dotted #444; }
.changelog-list li:last-child { border-bottom: 0; }
.cl-badge { display: inline-block; min-width: 70px; margin-right: 6px; padding: 0 5px; border-radius: 3px; text-align: center; font: bold 10px/15px Verdana, Arial, sans-serif; text-transform: uppercase; color: #fff; }
.cl-added { background: #2e8b3a; }
.cl-changed { background: var(--s4-blue); }
.cl-fixed { background: #d9771a; }
.cl-removed { background: #6b6b6b; }
.cl-security { background: #b8302f; }
.cl-area { color: var(--s4-cyan); font-weight: bold; margin-right: 4px; }
.cl-area:after { content: ':'; }

/* ---- forms (registration, account) ---- */
.form-table { width: 100%; border-collapse: collapse; color: #fff; }
.form-table td { padding: 4px 4px; vertical-align: top; font-size: 11px; }
.form-table td.label { width: 170px; font-weight: bold; color: var(--s4-light); padding-top: 7px; }
.form-table input[type=text], .form-table input[type=password], .form-table input[type=email], .form-table input[type=date], .form-table select, .form-table textarea {
    width: 220px; font-size: 11px; border: 1px solid #777; padding: 3px; background: #fff; color: #000; }
.form-table textarea { width: 360px; }
.form-table .hint { color: #888; font-size: 10px; display: block; margin-top: 2px; }
.field-error { color: #ff6b6b; font-size: 10px; display: block; margin-top: 2px; font-weight: bold; }
.validation-summary { color: #ff6b6b; font-weight: bold; margin: 4px 0 8px; }
.register-banner { font: bold 14px 'Century Gothic', Verdana, sans-serif; color: #fff; background: linear-gradient(90deg, rgba(3, 124, 201, .5), transparent); padding: 6px 10px; margin: 0 0 10px; border-left: 4px solid var(--s4-orange); }
.reset-link { word-break: break-all; background: #111; border: 1px dashed var(--s4-orange); padding: 8px; margin: 8px 0; font-family: Consolas, monospace; }

/* ---- rankings (player cards) ---- */
.ranking-tabs { overflow: hidden; margin: 0 0 8px; padding: 0; list-style: none; }
.ranking-tabs li { float: left; margin: 0 3px 3px 0; }
.ranking-tabs a { display: block; padding: 4px 9px; border-radius: 8px 8px 0 0; background: linear-gradient(#bedaeb, #738dbe); color: #000; font-weight: bold; text-decoration: none; font-size: 10px; }
.ranking-tabs li.on a { background: linear-gradient(#ffb04d, #ff931f); color: #000; }
table.cool { width: 100%; border-collapse: collapse; color: #fff; }
table.cool td { padding: 4px 4px; vertical-align: middle; font-size: 11px; }
table.cool tr:nth-child(even) td { background: rgba(190, 218, 235, .08); }
table.cool th { color: #fff; padding: 4px; text-align: left; font-size: 11px; }
.player-card { position: relative; display: block; width: 178px; height: 51px; overflow: hidden; text-decoration: none; border-radius: 4px;
    background: linear-gradient(135deg, #10263d 0%, #06111c 55%, #1b3a5c 100%); border: 1px solid #4c7aa0; box-shadow: 0 0 0 1px #000 inset; color: #fff; }
.player-card:hover { border-color: var(--s4-orange); }
.player-card .pc-level { position: absolute; left: 4px; top: 5px; width: 40px; height: 40px; }
.player-card .pc-nick { position: absolute; left: 50px; top: 6px; right: 4px; font: bold 12px 'Century Gothic', Verdana, sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-card .pc-info { position: absolute; left: 50px; top: 23px; font-size: 9px; color: var(--s4-light); }
.player-card .pc-rank { position: absolute; right: 5px; bottom: 3px; font: bold 10px Verdana, sans-serif; color: var(--s4-orange); }
.player-card .pc-s4 { position: absolute; left: 50px; bottom: 3px; font: italic bold 9px Verdana, sans-serif; color: rgba(153, 239, 232, .55); }
.pagination { text-align: right; color: #fff; margin: 8px 0 0; font-size: 11px; }
.pagination a, .pagination .current { color: #fff; vertical-align: baseline; }
.pagination .current { color: var(--s4-orange); text-decoration: underline; font-weight: bold; }

/* ---- profile ---- */
.profile-head { overflow: hidden; margin: 0 0 10px; }
.profile-head .player-card { float: left; margin-right: 14px; }
.profile-facts { float: left; color: #fff; font-size: 11px; line-height: 16px; }
.stat-grid { width: 100%; border-collapse: collapse; margin: 0 0 8px; color: #fff; }
.stat-grid th { background: var(--s4-dark); text-align: left; padding: 3px 6px; color: var(--s4-cyan); font-size: 11px; }
.stat-grid td { padding: 2px 6px; border-bottom: 1px solid #1a2a3a; font-size: 11px; }
.stat-grid td.num { text-align: right; color: var(--s4-light); }
.two-col { overflow: hidden; }
.two-col > div { float: left; width: 280px; margin-right: 10px; }

/* ---- clans ---- */
.clan-logo { display: inline-block; vertical-align: middle; }
.clan-logo img { display: block; }
.clan-news { list-style: none; margin: 0; padding: 0; }
.clan-news li { padding: 3px 0; border-bottom: 1px dotted #333; color: #fff; }
.clan-news li .when { color: #888; font-size: 10px; margin-right: 6px; }
.logo-picker { overflow: hidden; margin: 4px 0; }
.logo-picker label { float: left; margin: 0 4px 4px 0; cursor: pointer; border: 2px solid transparent; border-radius: 4px; }
.logo-picker input { display: none; }
.logo-picker input:checked + img { outline: 2px solid var(--s4-orange); }
.logo-picker img { display: block; width: 40px; height: 40px; }
.clan-actions form { display: inline; }
.search-form input[type=text] { width: 160px; }

/* ---- mall ---- */
.package-list { overflow: hidden; margin: 0 0 10px; }
.package { float: left; width: 168px; margin: 0 10px 10px 0; background: linear-gradient(#10263d, #050b12); border: 2px solid #4c7aa0; border-radius: 8px; padding: 10px; text-align: center; color: #fff; }
.package .amount { font: bold 15px 'Century Gothic', Verdana, sans-serif; color: var(--s4-orange); margin: 4px 0; }
.package .tag { color: var(--s4-cyan); font-size: 10px; text-transform: uppercase; }
.balance { font-size: 13px; color: #fff; margin: 0 0 10px; }
.balance strong { color: var(--s4-orange); }

/* ---- download page ---- */
.sysreq { width: 100%; border-collapse: collapse; color: #fff; }
.sysreq th { background: var(--s4-dark); color: var(--s4-cyan); padding: 4px; text-align: left; }
.sysreq td { padding: 4px; border-bottom: 1px solid #1a2a3a; }
.dl-banner { position: relative; height: 150px; overflow: hidden; border: 2px solid var(--s4-cyan); border-radius: 10px; margin: 0 0 12px;
    background: #000 url('/images/layout/s4/prbar_s4_1.jpg') no-repeat center; background-size: cover; }
.dl-banner .dl-text { position: absolute; left: 16px; bottom: 14px; font: bold 22px 'Century Gothic', Verdana, sans-serif; color: #fff; text-shadow: 0 0 6px #000, 0 0 2px #000; }
.dl-banner .dl-shine { position: absolute; top: 0; left: -40%; width: 30%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: dlshine 3.5s infinite; }
.dl-meta { display: block; margin-top: 6px; font-size: 11px; color: #9ab; }
.dl-tr { margin-top: 10px; padding-top: 8px; border-top: 1px dotted #456; }
@keyframes dlshine { 0% { left: -40%; } 60%, 100% { left: 120%; } }
.faq dt { color: var(--s4-orange); font-weight: bold; margin-top: 8px; font-size: 12px; }
.faq dd { margin: 2px 0 6px 0; color: #fff; line-height: 15px; }
.iframe-frame { border: 2px solid var(--s4-cyan); border-radius: 8px; background: #000; padding: 10px; }

/* ---- clan pages inside the site layout (same markup as the in-client pages) ---- */
.clan-page { color: #fff; overflow: hidden; }
.clan-page .clan-head { overflow: hidden; margin: 0 0 8px; }
.clan-page .clan-head img { float: left; margin-right: 12px; }
.clan-page .clan-head .clan-name { font: bold 22px 'Century Gothic', Verdana, sans-serif; color: #fff; padding-top: 22px; }
.clan-page .cl-main { float: left; width: 400px; }
.clan-page .cl-side { float: right; width: 160px; }
.clan-page .button { margin: 0 0 6px; }
.clan-page .btn, .clan-page .cl-side .button a, .clan-page .cl-side .button button {
    display: block; width: 100%; box-sizing: border-box; padding: 4px 8px; text-align: center; text-decoration: none; cursor: pointer;
    background: linear-gradient(#ffb04d, #d26b00); border: 1px solid #6a3500; border-radius: 10px; color: #fff; font: bold 11px Verdana, sans-serif; }
.clan-page .btn.small { display: inline-block; width: auto; padding: 1px 7px; font-size: 10px; }
.clan-page .btn.grey { background: linear-gradient(#5a5a5a, #111); border-color: #000; }
.clan-page .btn.red { background: linear-gradient(#c33, #500); border-color: #300; }
.clan-page table.list { width: 100%; border-collapse: collapse; }
.clan-page table.list th { background: var(--s4-dark); color: var(--s4-cyan); text-align: left; padding: 3px 5px; font-size: 11px; }
.clan-page table.list td { padding: 3px 5px; border-bottom: 1px solid #1a2a3a; font-size: 11px; vertical-align: middle; }
.clan-page dl.form dt { color: var(--s4-light); font-weight: bold; margin: 8px 0 3px; }
.clan-page dl.form dd { margin: 0; }
.clan-page textarea { width: 380px; font-size: 11px; }
.clan-page .ticker { list-style: none; margin: 0; padding: 0; }
.clan-page .ticker li { padding: 2px 0; border-bottom: 1px dotted #333; }
.clan-page .ticker .when { color: #888; margin-right: 6px; }
.clan-page .notice, .clan-page .error { padding: 6px 10px; margin: 0 0 8px; border: 1px solid var(--s4-cyan); background: #0b2533; }
.clan-page .error { border-color: #e05050; background: #330b0b; }
.clan-page .inline { display: inline; }

/* ---- layout fixes found in the side-by-side comparison ---- */
.panel .panel-holder { position: relative; }
#login-topbar { position: absolute; right: 0; top: 0; float: none; }
#sidebar .box .head, #sidebar .box .box-c, #sidebar .box .box-b,
.aside .box .head, .aside .box .box-c, .aside .box .box-b { box-sizing: border-box; width: 180px; }
.aside .game-list li .ico { width: 72px; margin: 0; }
.aside .game-list .holder { width: 82px; padding: 4px 0 0 4px; }
.aside .login-form .text input { width: 130px; }

/* ---- module600: the grey portal frame of the archived rankings/registration pages (content_top_600 is grey;
   subsite_s4.css: .home .middlecontent #9fa1a1, dark text, .micro_title #22314E, black pagination) ---- */
.module600 .middlecontent { background: #9fa1a1; border-left: 0; border-right: 0; width: 600px; box-sizing: border-box; color: #000; }
.module600 .middlecontent a { color: #22314e; font-weight: bold; }
.module600 .middlecontent a.player-card, .module600 .middlecontent a.btn-s4 { color: #fff; font-weight: normal; }
.module600 .micro_title { color: #22314e; }
.module600 .title-small { color: #c45f00; text-shadow: none; }
.module600 .title-big { text-shadow: none; }
.module600 .form-table, .module600 table.cool, .module600 .stat-grid, .module600 .profile-facts, .module600 .balance, .module600 .package { color: #000; }
.module600 .form-table td.label { color: #22314e; }
.module600 .form-table .hint { color: #333; }
.module600 .field-error, .module600 .validation-summary { color: #a00000; }
.module600 table.cool tr:nth-child(even) td { background: rgba(255, 255, 255, .25); }
.module600 .stat-grid td { border-bottom-color: #8a8c8c; }
.module600 .stat-grid td.num { color: #22314e; }
.module600 .pagination, .module600 .pagination a { color: #000; }
.module600 .pagination .current { color: #000; }
.module600 .notice-box { color: #22314e; }
.module600 .register-banner { color: #fff; background: linear-gradient(90deg, #037cc9, rgba(3, 124, 201, .2)); }
.module600 .package { color: #fff; }
.module600 .balance strong { color: #c45f00; }
.module600 .reset-link { color: #fff; }
.module600 .flash-notice { color: #fff; }

/* ---- landing page (/; February 2011 homesite with the "Alice" banner). The original set these as inline styles;
   pr_bar_active.png, prbar_bg.png, char_s4.png and bg-facebook-box.png were not archived ---- */
body.landing #background { background: #000 url('/images/backgrounds/bg_s4_full.jpg') no-repeat center 30px; min-height: 0; height: 1200px; }
body.landing #wrapper { width: 1000px; }
body.landing #javascriptstuff { margin: 20px 0 10px; }
body.landing #container { overflow: hidden; background-color: #000; }
body.landing #mySlides .jflow-slide { position: relative; width: 1000px; height: 285px; }
body.landing #mySlides .jflow-slide img { display: block; }
body.landing #mySlides .jflow-slide.hidden-slide { display: none; }
body.landing #myController .jFlowControl { background: none; border: 2px solid #99efe8; border-radius: 50%; box-sizing: border-box; cursor: pointer; }
body.landing #myController .jFlowControl.jFlowSelected { background: #99efe8; }
body.landing #homesite_head { height: 135px; background-image: url('/images/layout/s4/bg_homesite.png'); }
body.landing #news-content a { color: #000; }
body.landing #news-content a:hover { color: #fff; }
body.landing .game-box-middle { background-image: url('/images/layout/s4/bg_homesite.png'); background-position: 0 40px; color: #fff; float: left;
    font-size: 14pt; height: 40px; line-height: 40px; text-align: center; width: 970px; }
body.landing .slide-box .landing-slide { background-image: url('/images/layout/s4/bg-slide-homesite.png'); }
body.landing .landing-what { color: #fff; font-size: 14pt; }
body.landing #alaplaya-description h1 { margin: 0 0 1em; }
body.landing #game-video-box a, body.landing #game-screenshots-box a { display: inline-block; }

/* lightbox of the landing page videos/screenshots (the original used the top_up "quicklook" layout) */
.lightbox { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 20000; background: rgba(0, 0, 0, .75); text-align: center; }
.lightbox .lb-frame { position: relative; display: inline-block; margin-top: 8vh; background: #111; border: 2px solid var(--s4-cyan); border-radius: 8px;
    padding: 12px; color: #fff; text-align: center; max-width: 95vw; }
.lightbox .lb-frame img { display: block; width: 440px; height: auto; max-width: 90vw; }
.lightbox .lb-frame iframe { display: block; width: 853px; height: 505px; max-width: 90vw; border: 0; }
.lightbox .lb-title { margin-top: 8px; font: bold 12px Verdana, Arial, sans-serif; }
.lightbox .lb-close { position: absolute; right: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; background: #000;
    border: 2px solid var(--s4-cyan); color: #fff; font: bold 14px/18px Arial, sans-serif; cursor: pointer; padding: 0; }
.lightbox .lb-prev, .lightbox .lb-next { position: absolute; top: 50%; margin-top: -20px; width: 32px; height: 40px; background: rgba(0, 0, 0, .6);
    color: #fff; border: 0; font: bold 22px Arial, sans-serif; cursor: pointer; }
.lightbox .lb-prev { left: 12px; }
.lightbox .lb-next { right: 12px; }