/**========================================================================
* Windows Whistler Relic Build 2248 — Login Theme (Full New Version)
*========================================================================**/

/* GLOBAL */
html, body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    background:#cddbf3 url('images/2248_bg.jpg') center/cover no-repeat fixed;
    font-family:Tahoma, "Segoe UI", sans-serif;
    color:#000;
}

/* TABLE FIX */
.btable { display:table; width:100%; height:100%; }
.bcell_mid { display:table-cell; vertical-align:middle; }

/* BACKGROUND WRAPPER */
.back_login {
    width:100%;
    height:100%;
    background:#cddbf3 url('images/2248_bg.jpg') center/cover no-repeat fixed;
}

/* MAIN LOGIN WRAPPER */
#login_wrap {
    width:100%;
    height:100%;
}

/* LOGIN BOX */
#login_all {
    width:760px;
    max-width:94%;
    background:#f4f7ff;
    border:1px solid #8fa3c5;
    border-radius:10px;
    padding:28px 22px;
    margin:0 auto;
    box-shadow:0 4px 12px rgba(0,0,0,0.35);
    background-image:url('images/2248_leftbar.png');
    background-repeat:repeat-y;
    background-position:left;
}

/* LOGO */
#login_logo {
    height:68px;
    display:block;
    margin:0 auto 18px auto;
}

/* TEXT */
.login_text {
    text-align:center;
    color:#003399;
}
.text_xlarge { font-size:26px; font-weight:bold; }
.text_med { font-size:15px; }
.text_small { font-size:13px; }
.bold { font-weight:bold; }

/* INPUTS */
.login_input {
    width:100%;
    padding:10px;
    margin-bottom:14px;
    border:1px solid #7f9db9;
    border-radius:4px;
    background:#ffffff;
    font-size:15px;
    color:#000;
    box-shadow:inset 0 1px 2px rgba(0,0,0,0.15);
}
.login_input:focus {
    outline:none;
    border-color:#3a6ea5;
    box-shadow:0 0 0 2px rgba(58,110,165,0.35);
}

/* BUTTONS */
.intro_login_btn,
.intro_guest_btn {
    width:100%;
    padding:12px;
    border-radius:6px;
    font-size:16px;
    cursor:pointer;
    margin-bottom:12px;
}

/* WHISTLER RELIC OK BUTTON */
.ok_btn {
    background:linear-gradient(to bottom, #4f7ec2, #3a6ea5);
    border:1px solid #2f5c8f;
    color:#fff;
    font-weight:bold;
    text-shadow:0 1px 1px rgba(0,0,0,0.4);
}
.ok_btn:hover {
    background:linear-gradient(to bottom, #5a8ad0, #3a6ea5);
}
.ok_btn:active {
    background:linear-gradient(to bottom, #3a6ea5, #2f5c8f);
}

/* GUEST BUTTON */
.default_btn {
    background:linear-gradient(to bottom, #e5e5e5, #d4d0c8);
    border:1px solid #7f9db9;
    color:#000;
}
.default_btn:hover {
    background:#ececec;
}
.default_btn:active {
    background:#d4d0c8;
}

/* REGISTER LINK */
.bclick { cursor:pointer; }
.login_not_member {
    text-align:center;
    padding-top:10px;
    font-size:14px;
    color:#003399;
}
.login_not_member .bold:hover {
    text-decoration:underline;
}

/* LANGUAGE BUTTON */
#intro_lang {
    position:absolute;
    top:10px;
    right:20px;
    width:40px;
    height:40px;
    background:#3a6ea5;
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 2px 4px rgba(0,0,0,0.3);
}

/* SPACING HELPERS */
.centered_element { text-align:center; }
.vpad15 { padding-top:15px; }
.vpad20 { padding-top:20px; }
.pad30 { padding:30px; }
.tpad20 { padding-top:20px; }
.tpad5 { padding-top:5px; }
.bpad10 { padding-bottom:10px; }

/* RESPONSIVE */
@media screen and (max-width:600px){
    #login_all {
        padding:20px 15px;
        border-radius:10px;
    }
    .text_xlarge { font-size:22px; }
    .text_med { font-size:14px; }
}