* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body { padding: 0; margin: 0; font-family: "Arial", sans-serif; font-size: 12px; color: #333; background: url('../img/bg.png') center top no-repeat, url('../img/bgFooter.jpg') center bottom no-repeat; }

a, a:hover, .action a, .action span.anchor, #pagemenu a:hover, #pagemenu a, .block-link, .toggler a, .sortable:hover, .sortable, .shop-item-action a { color: #414141; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; outline: 0; border: 0; } 
table { font-family: "Arial", sans-serif; border-collapse: collapse;  border-spacing: 0; }
h1, h2, h3, h4, h5 { font-family: "Open Sans", sans-serif; font-weight: 800; color: #4d4d4d; text-transform: uppercase; font-size: 18px; line-height: 1; letter-spacing: 0; border: 0; }
input[type=text], input[type=password], input[type=file], textarea { font-family: "Arial", sans-serif; outline: 0; border: 0; }
input:focus, button:focus { outline: 0; }

#wrapper { padding-bottom: 20px; }
.container { width: 980px; margin: 0 auto; }
.content { margin-top: 20px; min-height: 869px; }

.statusBar {
    width: 100%;
    height: 39px;
    background: url('../img/statusBgRepeat.jpg') center top repeat-x;
}

.statusBar .container {
    width: 980px;
    height: 39px;
    background: url('../img/statusBg.png') center top no-repeat;
    position: relative;
}

/* Shared styles */
.serverStatus,
.playerOnline,
.peakOnline,
.serverTime {
    position: absolute;
    top: 2px;
    font-size: 14px;
    font-weight: 700;
    height: 39px;
    line-height: 39px;
}


/* -------------------------------------------------
   SERVER STATUS — MOVE FREELY
   Example:
       left: 20px;  (move right)
       right: 20px; (move left)
   ------------------------------------------------- */
.serverStatus {
    width: 388px;
    left: 20px;   /* ← move this freely */
    /* right: auto;  you can use right instead if you want */
}

.serverStatus img {
    position: absolute;
    top: 9px;
    left: 375px;
}

.serverStatus img:nth-child(2) { left: 450px; }
.serverStatus img:nth-child(3) { left: 523px; }


/* -------------------------------------------------
   SERVER TIME — MOVE FREELY
   ------------------------------------------------- */
.serverTime {
    left: 685px;   /* ← change this to move left or right */
    color: #45aa28;
}


/* Player Online (unchanged) */
.playerOnline {
    left: 515px;
    font-size: 16px;
    color: #dd2e23;
}

/* Peak Online (unchanged) */
.peakOnline {
    left: 693px;
    color: #1c7fd0;
}

.header { height: 375px; }


.navigation::after, .content::after, .indexPage::after, .kafraShop::after, .indexBottom::after, .footerNavigation::after, .credits::after, .searchDB form::after { clear: both; content: ''; display: block; }
.navigation { height: 75px; background: url('../img/navBg.png') center top repeat-x; border-radius: 0 0 15px 15px; box-shadow: 0px 3px 0px 0px rgba( 0, 0, 0, 0.15 ); }
.navigation ul, .navigation li { padding: 0; margin: 0; list-style: none; }
.navigation li { width: 168px; height: 75px; float: left; background: url('../img/navDivider.png') center right no-repeat; }
.navigation li:first-child { width: 140px; }
.navigation li a { display: block; color: #5b5b5b; font-weight: 800; text-align: center; text-transform: uppercase; font-size: 18px; line-height: 1; padding: 28px 0 15px 0px; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; }
.navigation li a span { display: block; font-size: 10px; color: #1b78ce; font-weight: 400; padding-top: 4px; }
.navigation li a:hover { color: #1b78ce; }

.spacer { height: 300px; text-align: center; position: relative; }
.spacer a { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; }
.spacer a:hover { top: 49%; }

.container.main { background: #f1f1f1; min-height: 1360px; border-radius: 15px; padding: 17px 13px; }

.sliderNAccount { width: 946px; height: 328px; position: relative; }
.sliderBlock { width: 726px; height: 328px; background: #fff; position: relative; overflow: hidden; }
.sliderBlock div p { font-size: 18px; color: #f1f1f1; position: absolute; left: 0; bottom: 0; z-index: 201; }
.accountPanel { width: 252px; height: 340px; position: absolute; top: -11px; right: -32px; background: url('../img/loginBg.png') center top no-repeat; padding: 80px 45px 16px 16px; font-family: "Open Sans", sans-serif;  }
input.textClass { width: 123px; height: 24px; background: url('../img/userBg.png') center top no-repeat; border: 0; outline: 0; padding: 0 5px 0 25px; font-size: 11px; }
input.textClass.password { background: url('../img/passBg.png'); border-top: 1px solid #8a8a8a; }
input.loginBtn { width: 59px; height: 51px; outline: 0; border: 0; background: url('../img/loginBtn.png') center left no-repeat; margin-left: 7px; cursor: pointer; }
input.loginBtn:hover { background-position: right center; }
.accountPanel a { color: #FFF; padding: 2px 0; display: block; font-family: "Open Sans", sans-serif;  }
.accountPanel a.register { color: #ffcd2f; text-transform: uppercase; font-size: 18px; text-align: center; font-weight: 800; text-shadow: 1.5px 2.598px 0px rgba( 0, 0, 0, 0.2 ); letter-spacing: -0.5px; padding-top: 10px; white-space: nowrap; }
.logged { padding-top: 15px; color: #FFF; }
.accountPanel .logged>a { display: block; width: 48%; float: left; background: #96c004; text-align: center; padding: 5px; border-radius: 2px; margin-left: 1%; font-weight: 400; text-transform: uppercase; font-size: 12px; line-height: 1; font-weight: 400; }
.logged>p>a { display: inline; }
.logged p { height: 55px; }
.accountPanel .logged p a { display: inline; }

.sliderBlock div p { width: 726px; height: 45px; background: rgba(0, 0, 0, 0.8); position: absolute; left: 0; bottom: 3px; z-index: 200; margin: 0; text-shadow: 1px 1.732px 0px rgb( 0, 0, 0 ); padding: 13px 20px 0 50px; }
.sliderBlock .cycle-slideshow { height: 328px; }

#sprev, #snext { width: 29px; height: 45px; background: url('../img/slideNav.png') center left no-repeat; position: absolute; left: 0; bottom: 0; z-index: 300; cursor: pointer; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; opacity: 0.7; }
#snext { background-position: right top; right: 0; left: auto; }
#sprev:hover, #snext:hover { opacity: 1; }

.loginBox { height: 120px; }
.rateMyServer { height: 123px; padding: 34px 15px; }
.rateMyServer a { width: 122px; height: 61px; overflow: hidden; display: block; }
.rateMyServer a:hover img { position: relative; top: -69px; }

.indexLeft { width: 714px; float: left; }
.indexRight { width: 220px; float: left; margin-left: 13px; }

.newsHeading { height: 60px; background: url('../img/newsRender.png') center right no-repeat, url('../img/newsHeadBorder.png') center bottom repeat-x; }
.newsHeading h2 { padding-top: 27px; margin: 0; }

.newsList { padding: 9px 0 0 0; min-height: 374px; }
.newsList img { border: 1px solid #FFF; }
.newsList table tr td { padding: 9px 0; }
.newsList .title { font-size: 13px; font-weight: bold; padding: 0 0 3px 0; }
.newsList .title .events { color: #0d5dff; font-weight: bold; text-transform: uppercase; }
.title a { line-height: 1; color: #656667; display: inline-block; }
.posted_by { color: #5f5f5f; font-size: 11px; padding-bottom: 5px; }
.description { line-height: 14px; color: #8a8a8a; font-size: 11px; letter-spacing: 1px; }
.newsList .view_more { background: #288cdd; display: block; width: 100%; height: 38px; border-bottom: 2px solid #0c58b2; color: #FFF; font-weight: 700; text-align: center; line-height: 38px; letter-spacing: 0; font-size: 14px; text-shadow: 1px 1.732px 0px rgba( 0, 0, 0, 0.3 ); }

.blue { color: #064a81; }
.updates { color: #64b100; }
.news, .color-red { color: #dd2e23; }

.kafraShop { width: 714px; height: 151px; background: url('../img/kafraShopBg.png') center top no-repeat; margin-top: 10px; padding: 16px 15px 32px 15px; }
.kafraShop .item { width: 171px; height: 102px; line-height: 1; }
.kafraShop .item h4 { margin: 0; font-size: 13px; text-transform: none; }
.kafraShop .item .item-cost { color: #dd2e23; font-size: 20px; font-weight: 800; padding: 5px 0; }
.kafraShop .item-image { width: 77px; height: 102px; float: left; border: 1px solid #e4e4e4; }
.kafraShop .item a { font-size: 11px; }
.kafraShop .item-description { width: 94px; float: left; text-align: center; padding: 15px 6px 0 6px; white-space: normal; }

.indexBLeft { width: 480px; float: left; margin-top: 5px; }
.searchDB { width: 480px; height: 81px; background: url('../img/searchBg.png') center top no-repeat; font-family: "Open Sans", sans-serif; padding: 15px 30px; }
.searchDB input[name="name"] { width: 173px; height: 28px; padding: 0 10px; background: url('../img/inputSearch.png') center top no-repeat; border: 0; outline: 0; float: left; }
.searchDB input[type="submit"] { width: 61px; height: 28px; background: url('../img/searchBtn.png') center top no-repeat; border: 0; outline: 0; font-size: 0; float: left; }
.searchDB form { width: 234px; text-align: center;  }
.searchDB div { text-transform: uppercase; font-size: 12px; font-weight: 600; }
.searchDB a.active { color: #ff2837; }

.woeBlock { width: 480px; height: 221px; background: url('../img/woeBg.png') center top no-repeat; margin-top: 2px; font-family: "Open Sans", sans-serif;  }
.woeEpisode { width: 480px; height: 91px; text-align: right; padding-right: 33px; padding-top: 28px; }
.woeEpisode h2 { margin: 0; font-size: 20px; }
.woeEpisode .text { letter-spacing: 8px; font-size: 18px; }
.woeSchd { height: 130px; text-align: center; }
.woeSchd .woeInner { width: 220px; height: 110px; float: right; padding-top: 30px; }
.woeSchd .woe-day { font-size: 14px; color: #6e4809; }
.woeSchd .woe-time { font-size: 24px; color: #ff241d; font-weight: 800; }

.indexBRight { width: 220px; float: left; margin-left: 13px; }
.media { width: 220px; height: 297px; background: url('../img/mediaBg.png') center top no-repeat;  margin-top: 12px; }
.media .cycle-slideshow, .media .cycle-slideshow a, .media .cycle-slideshow a img { width: 200px; height: 226px; top: 62px; left: 11px; }
.media .cycle-slideshow a { display: block; }

.downloadBtn { height: 200px; padding: 10px; }
.downloadBtn a { width: 198px; height: 185px; overflow: hidden; display: block; margin: 0 auto; }
.facebook, .empty-block { height: 272px; border: 1px solid #cdcdcd; background: #FFF; margin: 12px 0; padding: 10px; }
.downloadBtn a:hover img { position: relative; top: -218px; }
.empty-block { height: 407px; margin-bottom: 0; }

.footer { border-top: 1px solid #dadada; margin-top: 10px; padding-top: 10px; }
.footerNavigation ul, .footerNavigation li { padding: 0; margin: 0; list-style: none; }
.footerNavigation li { float: left; border-right: 1px solid #464646; }
.footerNavigation li:last-child { border-right: 0; }
.footerNavigation li a { display: block; line-height: 1; text-transform: uppercase; font-weight: 700; padding: 0 5px; font-size: 10px; }

.copyrights { width: 670px; float: left; color: #9d9d9d; font-size: 13px; padding: 13px; }
.developers	 { width: 270px; float: left; }
.developers a { float: left; }
.credits { padding-top: 13px; }

#adminmenu, #submenu, #pagemenu { background: #0580bb; padding: 4px; border-radius: 2px; margin-bottom: 2px; color: #FFF; border: 1px solid #3f88cc; margin-top: 0; }
#adminmenu a, #submenu a, #pagemenu a { color: #FFF; }
.vertical-table, .horizontal-table { width: 100%; border-collapse: collapse; }
.search-form, .vertical-table tr th, .horizontal-table tr th { background: #d7d7d7; border: 1px solid #cdcdcd; padding: 8px 0; }
.vertical-table tr td, .horizontal-table tr td { background: #e6e6e6; border: 1px solid #cdcdcd; }
.generic-form, .info-text, .generic-form-div { background: #e6e6e6; color: #000; border: 1px solid #cdcdcd; }
.search-form label, .search-form2 label { color: #000; }
.search-form p, .search-form2 p { border-bottom: 1px solid #b8b8b8; }
.pages .current-page, .generic-form-table td p, .toggler a, .sortable, .sortable:hover, .pages .page-prev, .pages .page-next, .action a, .action span.anchor { color: #000; }
.adjust { width: 954px; overflow: auto; }


.generic-form input[type="submit"], .generic-form button[type="submit"] { background: #9de208; padding: 6px 15px; border-radius: 2px; border: 1px solid #a6f20a; color: #FFF; font-family: "Open Sans", sans-serif; font-weight: normal; text-transform: uppercase; font-size: 12px; cursor: pointer; -webkit-transition: all 200ms ease-in; -moz-transition: all 200ms ease-in; -ms-transition: all 200ms ease-in; -o-transition: all 200ms ease-in; transition: all 200ms ease-in; }
.generic-form input[type="submit"]:hover, .generic-form button[type="submit"]:hover { background: #93b101; }


/* ================================
   RESET PASSWORD SUCCESS (BOTTOM)
   ================================ */
.reset-success {
    position: fixed;
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%);
    z-index: 9999;

    width: 420px;
    padding: 28px 32px;
    text-align: center;

    background: rgba(18, 18, 18, 0.92);
    border-radius: 14px;

    /* SILVER AURA */
    box-shadow:
        0 0 8px  rgba(255, 255, 255, 0.6),
        0 0 18px rgba(220, 220, 220, 0.45),
        0 0 40px rgba(200, 200, 200, 0.3);

    animation: floatAura 3s ease-in-out infinite;
}

.reset-success h2 {
    color: #f0f0f0;
    text-shadow:
        0 0 4px rgba(255, 255, 255, 0.8),
        0 0 10px rgba(200, 200, 200, 0.6);
}


/* ==========================================
   GLOBAL FLOATING NOTICE (SCREEN CENTER)
   ========================================== */
.floating-notice {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;

    animation: fadeOutNotice 8s forwards;
}

/* FLOATING BOX */
.floating-box {
    width: 460px;
    padding: 28px 32px;
    text-align: center;

    background: rgba(18, 18, 18, 0.92);
    border-radius: 14px;

    /* SILVER AURA */
    box-shadow:
        0 0 8px  rgba(255, 255, 255, 0.6),
        0 0 18px rgba(220, 220, 220, 0.45),
        0 0 40px rgba(200, 200, 200, 0.3);

    animation: floatAura 3s ease-in-out infinite;
}

/* Title glow */
.floating-box h3 {
    color: #f0f0f0;
    margin-bottom: 10px;
    text-shadow:
        0 0 4px rgba(255, 255, 255, 0.8),
        0 0 10px rgba(200, 200, 200, 0.6);
}

/* Message text */
.floating-box p {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.6;
}

/* Close button */
.close-notice {
    position: absolute;
    top: 10px;
    right: 14px;
    cursor: pointer;
    color: #ccc;
    font-size: 16px;
}

.close-notice:hover {
    color: #fff;
}


/* =====================
   ANIMATIONS
   ===================== */
@keyframes floatAura {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}

@keyframes fadeOutNotice {
    0%   { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; pointer-events: none; }
}


.notice-text {
    color: #e6e6e6;
    font-size: 14px;
    line-height: 1.6;
    margin-top: 10px;
}

.notice-actions {
    margin-top: 18px;
}

.btn-primary {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 6px;
    background: linear-gradient(180deg, #f5f5f5, #cfcfcf);
    color: #111;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s ease;
}

.btn-primary:hover {
    background: linear-gradient(180deg, #ffffff, #dcdcdc);
    box-shadow:
        0 0 6px rgba(255,255,255,0.5),
        0 0 14px rgba(220,220,220,0.35);
}