@charset "utf-8";

/* =========== Fonts =========== */

@font-face {
	font-family: 'Spartan', sans-serif;
}

html {
    font-family: Spartan;
    color: #e5cd88;
    font-size: 14.5px;
    background: #0f0000;
    overflow-y: scroll;
}

body {
    background: #0f0000 url("../images/bg_top.jpg") repeat-x top;
    margin: 0;
    padding: 0;
}


a img {
    border: 0;
}

a {
    color: #e5cd88;
    text-decoration: none;
}

    a:hover {
        text-decoration: none;
        color: #FFF8DA;
    }

html a:active {
    outline: none;
}

:focus {
    -moz-outline-style: none;
}

.clear {
    clear: both;
}

.status-container {
    font-family: 'Franklin Gothic Medium Cond', Calibri, Arial;
    font-size: 12px;
    color: #a09f97;
}

.status-online {
    color: #b4d776;
    font-weight: bold;
}

.time-display {
    color: #b4d776;
    font-weight: bold;
}

.status-offline {
    color: #ff0000;
    font-weight: bold;
}

.status-maintenance {
    color: #FFFF00;
    font-weight: bold;
}

h1 {
    font-size: 14px;
    color: #d1d1d1;
    font-weight: 700;
    font-variant: line-height: 35px;
}

    h1 span {
        border-bottom: 1px solid #36271d;
        display: block;
        font-size: 18px;
        height: 37px;
        line-height: 37px;
        font-weight: 400;
        padding-left: 20px;
        font-variant: color: #fff;
        text-shadow: 1px 2px 2px #010b10;
    }

p {
    margin: 5px 0;
}

hr.sep {
    border: 0;
    border-top: 1px solid #011c27;
    border-bottom: 1px solid #01354c;
}

ul {
    padding: 10px 10px 10px 25px;
    margin: 0;
}

    ul li {
        list-style: disc;
        padding: 5px 0;
        line-height: 18px;
    }

.error, .notice {
    display: block;
    margin: 5px, 0, 0, 5px;
    font-size: 14px;
    float: left;
    padding: 6px 0;
    text-shadow: 1px 1px 1px #000;
}

.error {
    color: #d71208;
}

.notice {
    color: #66cc66;
}

form {
}

    form input, form select {
        background: #140d0b;
        border: 2px solid #282626;
        padding: 2px;
        float: none;
        margin: 7px 5px 4px 0;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        color: #fff;
    }

        form input:focus {
            background: #33241f;
        }

        form input.button {
            background: #32160f;
            border: 1px solid #6d5747;
            cursor: pointer;
            font-size: 14px;
            width: auto;
            padding: 2px 15px;
        }

            form input.button:hover {
                background: #58261a;
            }

            form input.button:active {
                background: #000000;
            }

    form label {
        float: left;
        width: 230px;
        margin: 7px 5px 4px 0;
        padding: 4px 0 0 0;
    }

    form .helpText {
        float: left;
        margin: 7px 5px 4px 0;
        padding: 4px 0 0 0;
    }

    form br {
        clear: both;
    }

#recruitLink {
    background: #071e2b;
    border: 2px solid #385d6d;
    width: 350px;
    padding: 3px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    color: #fff;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    text-shadow: 2px 2px 2px #000;
}

#topbar {
    width: 888px;
    height: 35px;
    margin: auto;
    padding-right: 2px;
}

    #topbar .tbleft {
        float: left;
    }

        #topbar .tbleft strong, #topbar .tbleft h1 {
            font-size: 14px;
            color: #d1d1d1;
            font-weight: 700;
            font-variant: line-height: 35px;
            margin: 0;
            padding: 0;
            border: 0;
        }

        #topbar .tbleft strong {
            font-size: 14px;
            color: #d1d1d1;
            font-weight: 700;
            font-variant: line-height: 35px;
        }

    #topbar .tbright {
        float: right;
    }

        #topbar .tbright form {
            padding: 5px 0 0 0;
        }

        #topbar .tbright input {
            width: 134px;
            height: 21px;
            background: #110b0b;
            border: 1px solid #424141;
            font-size: 12px;
            color: #FFF;
            float: left;
            margin: 1px 4px 0 0;
            line-height: 21px;
            padding: 0;
        }

        #topbar .tbright #hpassword {
            display: none;
        }

        #topbar .tbright .welcome {
            float: left;
            margin: 10px 4px 0 0;
            color: #73787a;
        }

            #topbar .tbright .welcome strong {
                color: #b5babc;
                font-weight: normal;
            }

        #topbar .tbright .but {
            width: 26px;
            height: 25px;
            background: url("../images/s.png") no-repeat;
            float: left;
            border: 0;
            cursor: pointer;
            padding: 0;
            margin: 0 3px 0 0;
        }

        #topbar .tbright .signin {
            background-position: 0 -62px;
        }

        #topbar .tbright .forgotpassword {
            background-position: -26px -62px;
            margin: 0;
        }

        #topbar .tbright .logout {
            background-position: -52px -62px;
            margin: 5px 4px 0 0;
        }

        #topbar .tbright .myaccount {
            background-position: -78px -62px;
            margin: 5px 0 0 0;
        }

#loginbar {
    background: url("../application/shadow/bg.png") no-repeat top center;
}

#wrapper {
    width: 888px;
    margin: auto;
    position: relative;
}

#header {
    height: 299px;
}

    #header #logo {
        position: absolute;
        top: 10px;
        left: 90px;
    }

    #header UL {
        list-style: none;
    }

        #header UL LI {
            list-style: none;
        }
        /** menuuu **/


    #header #main-menu > LI > UL {
        width: 192px;
        margin: 30px 0 0 -20px;
        position: absolute;
    }

    #header UL LI.active UL {
        display: block;
    }

UL.menu-list > LI {
    position: relative;
    top: 0px;
    padding: 0px;
    border-top: 1px solid #4c0503;
    border-bottom: 1px solid #320301;
    background-color: #3d0402;
}

#header UL > LI > UL > LI UL > LI > A {
    width: 177px;
    padding-left: 15px;
}

#header UL.menu-list > li:first-child {
    border-top: 0 none;
}

#header UL.menu-list > li div.arrow-top {
    position: absolute;
    top: -19px;
    left: 29px;
    width: 218px;
    height: 19px;
    background: url("../images/drop-down-top.png") no-repeat;
}

UL LI.active UL LI A {
    color: #E1CA97;
    font-size: 12px;
}

UL LI UL LI .indicator {
    margin-right: 16px;
    display: block;
    float: right;
    color: #FFF;
    font-weight: bold;
}

#header UL LI UL LI UL LI {
    margin: 0;
    padding-left: 0px;
}

#header UL LI.active UL LI UL LI A {
    color: #FFF;
}

/* ========================================================
   CSS Menu - Pure Code & Exact Positions (No Image Needed)
   ======================================================== */

#header #main-menu {
    position: absolute;
    top: 252px;
    left: -30px;
    width: 900px;
    height: 54px;
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

#header #main-menu > LI {
    position: relative;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    margin: 0;
    padding: 0;
}

#header #main-menu > LI > A {
    height: 50px;
    display: block;
    text-decoration: none;
    text-align: center;
    background: transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-top: none;
    box-sizing: border-box;
}

#header #main-menu > LI > a > SPAN {
    display: block !important;
    line-height: 48px;
    color: #e1ca97;
    font-family: Arial, 'Spartan', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 2px #000;
    transition: color 0.2s;
}

/* الأزرار التي تحتوي على فروع يكون الماوس عليها سهماً عادياً */
#header #main-menu a[href*="javascript"],
#header #main-menu a[href*="javascript"] span {
    cursor: default !important;
}

#header #main-menu > LI > A:hover,
#header #main-menu > LI > A.active {
    background: linear-gradient(to top, rgba(235, 175, 50, 0.32) 0%, rgba(218, 165, 32, 0.10) 18%, transparent 32%) !important;
    border-left: 1px solid rgba(218, 165, 32, 0.35) !important;
    border-right: 1px solid rgba(218, 165, 32, 0.35) !important;
    border-bottom: 1px solid rgba(218, 165, 32, 0.45) !important;
    border-top: none !important;
    box-shadow: inset 0 -4px 6px rgba(218, 165, 32, 0.2) !important;
}

#header #main-menu > LI > a:hover > SPAN,
#header #main-menu > LI > a.active > SPAN {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px #000 !important;
}

/* العروض الثابتة لكل زر ليبقى كل عنصر والقائمة المنسدلة في مكانها الأصلي بالملي */
#header #main-menu > #home > A { width: 89px; }
#header #main-menu > #accountinf > A { width: 133px; }
#header #main-menu > #downloads > A { width: 133px; }
#header #main-menu > #features > A { width: 133px; }
#header #main-menu > #rules > A { width: 133px; }
#header #main-menu > #events > A { width: 105px; }
#header #main-menu > #guide > A { width: 105px; }

/* ضبط مكان القائمة المنسدلة لتبدأ من أقصى شمال الزر ومحاذاته تماماً */
#header #main-menu > LI > UL.menu-list {
    width: 192px;
    margin: 0;
    top: 50px;
    left: 0;                    /* تبدأ من شمال الزر تماماً */
    transform: none;            /* إلغاء الإزاحة التي كانت تدفعها لليسار */
    position: absolute;
    z-index: 200;
    text-align: left;           /* محاذاة النصوص بداخلها لليسار */
    display: none;              /* مخفية افتراضياً */
}

/* إظهار القائمة المنسدلة تلقائياً عند توجيه الماوس على الزر */
#header #main-menu > LI:hover > UL.menu-list {
    display: block !important;
}
/*#header #main-menu > #community > A{width: 166px;background-position: -193px 0;}#header #main-menu > #community > A.active,#header #main-menu > #community > A:HOVER{background-position: -193px -54px;}#header #main-menu > #services > A{width: 178px;background-position: -361px 0;}#header #main-menu > #services > A.active,#header #main-menu > #services > A:HOVER{background-position: -361px -54px;}/**** DROPDOWN MENU ****/

.menu-list > li > ul {
    display: none;
    margin: 0 0 -1px 0;
    border-top: 1px solid #3A0706;
}

.menu-list .indicator-closed, .menu-list .indicator-opened {
    margin-right: 16px;
    display: inline-block;
    float: right;
    color: #FFF;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    user-select: none;
    z-index: 1;
}

.menu-list .indicator-opened {
    display: inline-block;
}
/*align - with + */

.menu-list .inactive-indicator {
    display: none;
}

.menu-list ul, .menu-list li {
    position: relative;
}

ul.menu-list {
    width: 218px;
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1;
    list-style-type: none;
}

    ul.menu-list LI {
        min-height: 20px;
        margin: 0;
        color: #e1ca97;
        list-style-type: none;
    }

        ul.menu-list LI A {
            height: 28px;
            width: 100%;
            display: inline-block;
            line-height: 28px;
            vertical-align: middle;
            color: #e1ca97;
            outline: 0;
        }

            ul.menu-list LI A:hover {
                color: #fff;
            }

    ul.menu-list > LI a:hover {
    }

    UL.menu-list > LI > UL > LI A {
        width: 203px;
        padding-left: 15px;
    }

    ul.menu-list a.current {
        color: #fff;
        font-weight: bold;
    }

.menu-list li a > span.link-text {
    padding-left: 5px;
    display: inline-block;
}

ul.menu-list > li > ul > li > a > span.link-text {
    padding-left: 15px;
    color: #fff;
}

#header UL LI UL.menu-list {
    top: 32px;
    left: 20px;
    z-index: 100;
    box-shadow: 0 0 3px #000000,0 0 3px #000000;
    -moz-box-shadow: 0 0 3px #000000,0 0 3px #000000;
    -webkit-box-shadow: 0 0 3px #000000,0 0 3px #000000;
    -o-box-shadow: 0 0 3px #000000,0 0 3px #000000;
}

ul.menu-list LI A {
    color: #e1ca97;
    outline: 0;
}

    ul.menu-list LI A:hover, UL.menu-list LI.current {
        background-color: #75100e;
    }

.menu-list li a > span.link-text {
    padding-left: 15px;
}

#header #mainmenu {
    position: absolute;
    top: 243px;
    height: 46px;
    width: 886px;
    text-align: center;
}

    #header #mainmenu a {
        height: 45px;
        float: left;
    }

        #header #mainmenu a span {
            display: block;
            margin: 20px 23px 0 23px;
            font-variant: font: Arial;
            color: #FFFFFF;
            font-size: 15px;
            height: 9px;
        }

        #header #mainmenu a:hover {
            background: url("../images/s.png") no-repeat -3px -12px;
            text-decoration: none;
        }

    #header #mainmenu i {
        width: 3px;
        float: left;
        height: 43px;
        margin-top: 3px;
        background: url("../images/s.png") 0 -18px;
    }

    #header #mainmenu br {
        clear: both;
    }

    #header #mainmenu a.home {
        margin-left: 106px;
    }

        #header #mainmenu a.home span {
            width: 40px;
        }

    #header #mainmenu a.forum span {
        width: 50px;
        background-position: -34px 0;
    }

    #header #mainmenu a.downloads span {
        width: 80px;
        background-position: -73px 0;
    }

    #header #mainmenu a.registration span {
        width: 80px;
        background-position: -178px 0;
    }

    #header #mainmenu a.my-account span {
        width: 90px;
        background-position: -307px 0;
    }

#leftContent {
    float: left;
    height: auto;
    width: 165px;
}

    #leftContent ul {
        margin: 1.5em 0 0 1.5em;
        padding: 0;
    }

    #leftContent li {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #leftContent a {
        display: block;
        height: 1.5em;
        padding: 0.5em 0.2em 0.2em 0.8em;
        margin-bottom: 1px;
        color: #FFFFFF;
        background-color: #32160f;
    }

        #leftContent a:hover {
            color: #FFFFFF;
            background-color: #36271d;
        }

#rightContent {
    margin-left: 5px;
    float: left;
    min-height: 400px;
    _height: 400px;
}

#content {
    min-height: 500px;
    padding-bottom: 10px;
    position: relative;
}

    #content .pageContent {
        border: 1px solid #2a2626;
        margin: 15px;
        background: rgba(20, 17, 17, 0.47);
        padding: 15px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -moz-box-shadow: 0 0 1em #000;
        -webkit-box-shadow: 0 0 1em #000;
        box-shadow: 0 0 1em #000;
    }

.navbut {
    background-color: #140d0b;
    border: 2px solid #302d2d;
    width: 303px;
    height: 22px;
    padding: 4px 10px;
    line-height: 22px;
    display: block;
    float: none;
    margin: 0;
}

#footer {
    width: 860px;
    min-height: 120px;
    background: url("../images/footer.png") no-repeat;
    position: relative;
}

    #footer .rights {
        padding: 130px 0 10px 0;
        text-align: center;
        color: #585858;
        font-size: 12px;
    }

    #footer .rights {
        padding: 5px 0 10px 0;
        text-align: center;
        color: #585858;
        font-size: 12px;
    }

    #footer .links {
        padding: 20px 0 10px 0;
        text-align: center;
    }

        #footer .links em {
            color: #272424;
            padding: 0 2px 0 2px;
        }

        #footer .links a {
            margin: 0;
            padding: 14px 0 0 0;
            color: #c9c9c9;
            font-size: 14px;
            font-variant: text-shadow: 0 1px 1px #000;
            font-weight: 700;
        }

/* home */

.homeleft {
    width: 620px;
    float: left;
    margin: 9px 0 0 -44px;
}

    .homeleft .latestnewstitle {
        background: url("../images/rsdownimg.png") no-repeat -8px;
		background-size: 400px 37px;
		width: 665px;
		height: 40px;
		font-family: 'Beaufort Regular';
		font-size: 17px;
		color: #c9c9c9;
		font-weight: 200;
		padding-top: 7px;
		margin: 0px 0 0px -43px;
		padding: 0;
    }

        .homeleft .latestnewstitle span {
            padding: 10px 0 0 15px;
            display: block;
	    font-weight: 700;
        }

.bonusbb {
    width: 290px;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left: 5px;
}

    .bonusbb a {
        outline: none;
    }

.homeright {
    float: right;
    margin: 9px 2px 0 0;
    width: 221px;
}

.realmstatus {
    width: 303px;
    margin-top: 10px;
}

.rsbcont {
    padding-left: 1px;
    padding-top: 5px;
    font-family: Spartan;
    font-size: 14px;
    color: #adadad;
    padding-bottom: 5px;
}

.realmstatustitle20 {
    font-family: Spartan;
	width: 294px;
    font-size: 13px;
    color: #c9c9c9;
    font-weight: 200;
    padding-top: 7px;
    padding-left: 10px;
}

.realmstatustitle {
    background: url(../images/rsbtabstp.png) no-repeat -3px;
    width: 290px;
    height: 26px;
    font-family: Spartan;
    font-size: 14px;
    color: #c9c9c9;
    font-weight: 700;
    padding-top: 7px;
    padding-left: 10px;
}

.realmstatustitle11 {
    font-family: Spartan;
    font-size: 13px;
    color: #c9c9c9;
    font-weight: 200;
    padding-top: 7px;
    padding-left: 0px;
}

.realmstatustitle16 {
    font-family: Segoe UI;
    font-size: 13px;
    color: #c9c9c9;
    font-weight: 700;
    padding-top: 7px;
    padding-left: 10px;
}

.rsbcont a {
    font-family: Spartan;
    font-size: 14px;
    color: #c9c9c9;
    text-decoration: none;
    outline: none;
    line-height: 145%;
}

    .rsbcont a:hover {
        color: #e5cd88;
    }

.homebox {
    width: 255px;
}

    .homebox .hbt {
        height: 39px;
        background: url("../images/s.png") no-repeat 0 -87px;
        padding: 0 16px;
    }

        .homebox .hbt h3 {
            margin: 0;
            padding: 14px 0 0 0;
            color: #c9c9c9;
            font-size: 14px;
            font-variant: text-shadow: 0 1px 1px #000;
            font-weight: 700;
        }

    .homebox .hbc {
        background: url("../images/s.png") no-repeat 0 -126px;
        min-height: 60px;
        padding: 4px 16px 0 16px;
    }

.hbcnopadd .hbc {
    padding: 0;
    position: relative;
    z-index: 2;
}

.homebox .hbb {
    height: 10px;
    background: url("../images/s.png") no-repeat 0 -383px;
}

.realminfo {
    line-height: 20px;
    color: #e9d3b1;
}

    .realminfo strong {
        color: #66cc66;
        font-weight: normal;
    }

    .realminfo i {
        font-style: normal;
        color: #e9d3b1;
    }

    .realminfo em {
        color: #ccff33;
        font-style: normal;
    }

    .realminfo span {
        color: #304852;
    }

.homeTable {
    color: #4d6169;
    width: 100%;
    padding: 0 4px;
    margin-bottom: -4px;
}

    .homeTable td {
        border-bottom: 1px solid #00212f;
        border-right: 1px solid #00212f;
        border-top: 1px solid #002d41;
        border-left: 1px solid #002d41;
        padding: 4px 10px;
    }

        .homeTable td.f {
            padding: 4px 4px;
            text-align: center;
        }

    .homeTable tr.last td {
        border-bottom: 0;
    }

#accordion {
    background-color: #a9d06a repeat-y -3px;
    width: 759px;
    margin-left: -51px;
}

    #accordion h3 {
        margin: 0;
        padding: 0;
        height: 31px;
        line-height: 31px;
        position: relative;
    }

        #accordion h3.ui-state-hover {
            cursor: pointer;
        }

        #accordion h3 a {
            color: #fefefe;
            text-decoration: none;
            font-size: 12px;
            font-weight: normal;
            padding-left: 40px;
        }

    #accordion .ui-accordion-header {
        background: url("../images/acc_bottom.png") no-repeat -2 bottom;
        width: 560px;
        overflow: hidden;
    }

    #accordion .ui-accordion-content {
        background: url("../images/acc_bottom.png") no-repeat -2 bottom;
        width: 560px;
        overflow: hidden;
    }

    #accordion h3.ui-state-active {
        background: none;
    }

    #accordion h3:focus {
        outline: none;
    }

    #accordion .ncont {
        padding: 0 15px 10px 22px;
        overflow: hidden;
    }

    #accordion .right {
        float: center;
        font: 10px Spartan;
        padding-right: 10px;
        color: #cc6633;
        text-decoration: none;
    }

.accordion h3 a .head {
    height: 31px;
    font: bold 11px/20px Spartan;
    padding-left: 50px;
    display: block;
    cursor: pointer;
    color: white;
    line-height: 27px;
}

#accordion a.readmore {
    color: white;
    font: bold 10px/35px Spartan;
    float: center;
    text-align: center;
}

#accordion .ui-icon-circle-arrow-s {
    width: 16px;
    height: 12px;
    position: absolute;
    top: 11px;
    left: 20px;
    background: url("../images/arrow_t.png");
}

#accordion .ui-icon-circle-arrow-e {
    width: 12px;
    height: 16px;
    position: absolute;
    top: 8px;
    left: 23px;
    background: url("../images/arrow_l.png");
}

/* my account */

.myaccount {
    padding: 15px 0;
}

    .myaccount .characterServices .col {
        width: 281px;
        padding: 0 15px;
    }

    .myaccount .characterServices .service-header {
        background-color: #33241f;
        font-size: 15px;
        font-weight: normal;
        margin: 0 0 5px;
        padding: 3px 8px;
    }

    .myaccount .characterServices .col a {
        display: block;
        font-size: 14px;
        margin-bottom: 5px;
        padding: 3px;
        cursor: pointer;
        text-decoration: none;
    }

        .myaccount .characterServices .col a:hover {
            background-color: #1c1717;
            color: #FFFFFF;
            cursor: pointer;
        }

        .myaccount .characterServices .col a div.iconGlow {
            background: url("../images/service-glow.png") no-repeat scroll 100% 0 transparent;
            float: left;
            height: 49px;
            margin: 0 5px 0 0;
            width: 54px;
        }

        .myaccount .characterServices .col a div.icon {
            background: url("../images/services-sprite.jpg") no-repeat scroll 0 0 transparent;
            height: 31px;
            margin: 9px 0 0 14px;
            width: 31px;
        }

        .myaccount .characterServices .col a div.service-title {
            float: left;
            margin: 6px 0 0;
            width: 195px;
        }

        .myaccount .characterServices .col a p {
            color: #9a9187;
            float: left;
            font-size: 11px;
            width: 195px;
        }

        .myaccount .characterServices .col a br {
            clear: both;
        }

        .myaccount .characterServices .col a.unstuck div.icon {
            background-position: 0 -155px;
        }

        .myaccount .characterServices .col a.download div.icon {
            background-position: 0 -310px;
        }

        .myaccount .characterServices .col a.items-buy-log div.icon {
            background-position: 0 -31px;
        }

        .myaccount .characterServices .col a.pandora-shop div.icon {
            background-position: 0 -340px;
        }

        .myaccount .characterServices .col a.donate div.icon {
            background-position: 0 -372px;
        }

        .myaccount .characterServices .col a.vote-panel div.icon {
            background-position: 0 -62px;
        }

        .myaccount .characterServices .col a.recruit div.icon {
            background-position: 0 -217px;
        }

        .myaccount .characterServices .col a.change-password div.icon {
            background-position: 0 -248px;
        }

table.list {
    border-right: 1px solid #5b4a38;
    border-top: 1px solid #5b4a38;
    background: #141111;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 0 4px black;
    -webkit-box-shadow: 0 0 4px black;
    box-shadow: 0 0 4px black;
}

    table.list tr {
    }

    table.list th, table.list td {
        padding: 6px 12px;
        border-left: 1px solid #2a2626;
        border-bottom: 1px solid #2a2626;
        text-align: left;
    }

    table.list th {
        background: url("../images/services-bg.png");
        text-align: left;
    }

    table.list .voted a {
        opacity: 0.2;
        filter: alpha(opacity=20);
        display: block;
    }

#content .register {
    width: 405px;
    margin: 19px auto;
    padding: 0;
}

.register form {
    padding-left: 40px;
}

    .register form input {
        background-color: #140d0b;
        border: 2px solid #302d2d;
        width: 303px;
        height: 22px;
        padding: 4px 10px;
        line-height: 22px;
        display: block;
        float: none;
        margin: 0;
    }

    .register form label {
        display: block;
        padding: 16px 0 4px 0;
        float: none;
        margin: 0;
    }

.register .regbutton {
    width: 155px;
    height: 38px;
    background: url("../images/register_button.png");
    margin: 13px 0 20px 84px;
    cursor: pointer;
}

.register hr.sep {
    margin: 0 3px 0 -37px;
}

.register .error {
    color: #d0260f;
    padding: 15px 0 0 0;
    display: block;
}

.register .info {
    color: #2a681e;
    padding: 15px 0 0 0;
    display: block;
}

.carregando {
    color: #666;
    display: none;
}
.alert {
        padding: 07px;
        margin-bottom: 10px;
        border: 1px solid transparent;
        border-radius: 2px;
    }

        .alert h4 {
            margin-top: 0;
            color: inherit;
        }

        .alert .alert-link {
            font-weight: 700;
        }

        .alert > p, .alert > ul {
            margin-bottom: 0;
        }

            .alert > p + p {
                margin-top: 5px;
            }

    .alert-dismissable {
        padding-right: 35px;
    }

        .alert-dismissable .close {
            position: relative;
            top: -2px;
            right: -21px;
            color: inherit;
        }

    .alert-success {
        background-color: #dff0d8;
        border-color: #d6e9c6;
        color: #3c763d;
    }

        .alert-success hr {
            border-top-color: #c9e2b3;
        }

        .alert-success .alert-link {
            color: #2b542c;
        }

    .alert-info {
        background-color: #d9edf7;
        width: 80%;
        border-color: #bce8f1;
        color: #31708f;
    } 
    .Wicon {
    padding:95px 16px 0 0;
    background: url("../images/icons/Windows.png") no-repeat top center;
    }
    .Micon {
    padding:95px 16px 0 0;
    background: url("../images/icons/Mac.png") no-repeat top center;
    }
        .alert-info hr {
            border-top-color: #a6e1ec;
        }

        .alert-info .alert-link {
            color: #245269;
        }

    .alert-warning {
        background-color: #fcf8e3;
        border-color: #faebcc;
        color: #8a6d3b;
		width:90%;
    }

        .alert-warning hr {
            border-top-color: #f7e1b5;
        }

        .alert-warning .alert-link {
            color: #66512c;
        }

    .alert-danger {
        background-color: #f2dede;
        border-color: #ebccd1;
        color: #a94442;
    }

        .alert-danger hr {
            border-top-color: #e4b9c0;
        }

        .alert-danger .alert-link {
            color: #843534;
        }
		.menu-list {
    display: none; /* هذا هو الأسلوب الذي كان موجودًا في HTML */
}
.form-hint {
    color: #DAB449;
    font-size: 10px;
}


.custom-alert {
    position: fixed;
    top: 60px; /* هنا نتحكم في المسافة من أعلى الصفحة */
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 10px 20px;
    border-radius: 6px;
    font-family: 'Spartan', sans-serif;
    font-size: 14px; /* حجم أصغر */
    color: #fff;
    background-color: #2ecc71; /* اللون الأخضر */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    animation: fadeInDown 0.5s ease, fadeOut 0.5s ease 6s forwards;
    max-width: 90%;
    text-align: center;
}

@keyframes fadeInDown {
    from {
        transform: translate(-50%, -20px);
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translate(-50%, -20px);
    }
}



/* أنماط الجدول الرئيسي للجدول الزمني (كان يستخدم donate) */
.schedule-table {
    font-family: Tahoma, sans-serif; /* من <font face="Tahoma"> */
    font-size: 11px; /* من <font style="font-size: 8pt"> - تم تحويل pt إلى px */
    color: #FFFFFF; /* من <font color="#FFFFFF"> */
    border-collapse: collapse; /* من style="border-collapse: collapse" */
    border-spacing: 0; /* استبدال cellspacing="5" (border-collapse يتجاهل border-spacing غالبًا) */
    width: 99%; /* من width="99%" */
    border: none; /* من border="0" */
    margin-bottom: 20px; /* استبدال <br> المتعددة في النهاية */
}

/* أنماط خلايا الجدول (td و th) */
.schedule-table th,
.schedule-table td {
    width: 14%; /* توزيع المساحة بالتساوي تقريبًا (كان 10% ولكن هناك 7 أعمدة فقط) */
    text-align: center; /* من align="center" */
    padding: 5px; /* من cellpadding="5" */
    border: 1px solid #444; /* إضافة حدود بسيطة للوضوح - يمكنك تعديلها */
    vertical-align: top; /* محاذاة رأسية علوية */
}

/* أنماط رؤوس الجدول (الصف الأول) */
.schedule-table th {
    font-weight: bold; /* بدلاً من <b> */
    color: #c29e51; /* من <font color="#c29e51"> */
    background-color: #2a2a2a; /* لون خلفية مميز للرأس */
}

/* أنماط الروابط داخل خلايا البيانات */
.schedule-table td a {
    text-decoration: none; /* إزالة الخط تحت الرابط */
    color: #FFFFFF; /* لون الرابط الافتراضي */
    position: relative; /* أساس لتحديد موضع التلميح */
    display: inline-block; /* للسماح بتحديد الموضع */
    cursor: pointer; /* تغيير شكل المؤشر */
}

/* أنماط التلميح (العنصر span المخفي) */
.schedule-table td a span {
    display: none; /* إخفاء التلميح افتراضيًا */
    position: absolute;
    bottom: 110%; /* وضعه فوق الرابط */
    left: 50%;
    transform: translateX(-50%); /* توسيط التلميح */
    background-color: #333; /* لون خلفية التلميح */
    color: #fff; /* لون نص التلميح */
    border: 1px solid #555;
    padding: 8px 10px;
    border-radius: 4px;
    white-space: nowrap; /* منع التفاف النص */
    font-size: 12px; /* حجم خط مناسب للتلميح */
    z-index: 10; /* التأكد من ظهوره فوق العناصر الأخرى */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* ظل بسيط */
}

/* إظهار التلميح عند مرور الماوس فوق الرابط */
.schedule-table td a:hover span {
    display: block;
}

/* أنماط الجدول الصغير داخل التلميح (إذا أردت الإبقاء عليه) */
/* قد يكون من الأفضل عرض الوقت مباشرة في الـ span */
.schedule-table td a span table.VIP {
   /* يمكن تبسيط هذا، انظر HTML المعدل */
   /* إذا كنت تستخدمه، أضف أنماط هنا */
   margin: 0;
   padding: 0;
   border: none;
   width: auto;
}

.schedule-table td a span table.VIP td.title {
    /* أنماط لنص الوقت داخل الجدول الصغير */
    font-weight: bold;
    text-align: center;
    padding: 0;
}







.auto-style2 {
    font-family: "Neo Tech Alt Medium";
}
.auto-style4 {
    color: #94FF00;
}
.auto-style5 {
    color:#8D0910;
    font-size:12px;
    line-height:31px; /* تم تصحيح x إلى px */
}
.auto-style12 {
    font-family: Spartan;
	font-size: medium;
}
.colorButton1 {
    background: #32160f;
    border: 1px solid #6d5747;
    cursor: pointer;
    font-size: 14px;
    width: auto;
    padding: 2px 15px;
}
.colorButton1:hover {
    background: #58261a;
}
.colorButton1:active {
    background: #000000;
}
.picsub img {
    border: 1px solid #ffffc2;
    padding: 2px;
    background: #361F0D;
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(72, 14, 14, 0.8);
}
.picsub a img {
    border: 1px solid #ffffc2;
    padding: 2px;
    background: #361F0D;
}
.picsub a:hover img {
    border: 1px solid #F4C963;
}
.t_center, .table_c {
    text-align: center;
}
.tab_style11 {
    border: 1px solid #c3cdba;
    border-collapse: collapse;
    background: #919599;
    line-height: 200%;
    margin: 10px auto;
    max-width: 99%;
}
.tab_style21 {
    /* _color: #000; */ /* تعليق الخصائص غير القياسية */
    background: transparent url(/uploads/co/horse_091204.gif) no-repeat scroll right bottom;
    border: 3px double #594933;
    border-collapse: collapse;
    line-height: 200%;
    margin: 10px auto;
    max-width: 99%;
    text-align: left;
}
.tab_style31 {
    /* _color: #000; */
    background: transparent url(/uploads/co/logo_091204.gif) no-repeat scroll right bottom;
    border: 3px double #594933;
    border-collapse: collapse;
    line-height: 200%;
    margin: 10px auto;
    max-width: 99%;
}
.tab_style21 td, .tab_style3 td { /* تأكد من أن .tab_style3 هو المقصود */
    /* _background: #b9a685 none repeat scroll 0 0; */
    /* _filter: alpha(opacity=60); */
    /* _opacity: 0.6; */
    background: transparent url(/uploads/co/back_091204.png) repeat scroll 0 0;
    border: 1px solid #594933;
    border-collapse: collapse;
    padding: 5px;
}
.tab_style21 tbody td:hover, .tab_style3 tbody td:hover { /* تأكد من أن .tab_style3 هو المقصود */
    background: transparent none repeat scroll 0 0;
    border-collapse: collapse;
}
.page_version21 {
    clear: both;
    font-size: 12px;
    height: 26px;
    margin: 20px auto 0;
    padding: 3px;
    text-align: center;
    width: 660px;
}
.page_version21 span.no_link {
    background-color: #977b55;
    color: #feffc5;
    margin: 2px;
    padding: 2px 5px;
}
.page_version21 a {
    background-color: #594933;
    color: #feffc5;
    font-weight: 700;
    margin: 2px;
    padding: 2px 5px;
    text-decoration: none;
}
.page_version21 a:hover {
    background-color: #fff;
    color: #666;
}
.page_version21 span.current {
    background-color: #977b55;
    color: #fff;
    font-weight: 700;
    margin: 2px;
    padding: 2px 5px;
}
.tab_style11 caption, .tab_style2 caption, .tab_style3 caption { /* تأكد من أن .tab_style2 و .tab_style3 هما المقصودان */
    font: bold 12px/350% Georgia, "Times New Roman", Times, serif;
}
.tab_style11 tr:nth-child(odd) {
    background: #3d3a39;
}
.tab_style11 td, .tab_style2 th, .tab_style3 th { /* تأكد من أن .tab_style2 و .tab_style3 هما المقصودان */
    border-collapse: collapse;
    padding: 5px;
}
.tab_style11 th {
    background: #2d4662;
    color: #ffffff;
    text-align: center;
}
.picborder, #picborder img {
    border: 1px solid #634a2c;
}


.faq-trigger {
    cursor: pointer;
    display: block; /* لجعل الـ div يأخذ السطر كاملاً ويسهل النقر عليه */
    margin-bottom: 5px; /* مسافة بين الأسئلة */
    color: #ffffff; /* لون الخط الافتراضي للأسئلة */
}
 .faq-trigger:hover {
    color: #FFB400; /* تغيير اللون عند المرور */
 }
.faq-content {
    display: none; /* مخفي بشكل افتراضي */
    padding-left: 15px; /* مسافة بادئة للمحتوى */
    margin-top: 5px; /* مسافة فوق المحتوى */
    border-left: 2px solid #594933; /* خط جانبي لتمييز المحتوى */
}


/* latin-ext */
@font-face {
  font-family: 'Spartan';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/spartan/l7gAbjR61M69yt8Z8w6FZf9WoBxdBrHbuV6HABTdfw.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, 
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Spartan';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/spartan/l7gAbjR61M69yt8Z8w6FZf9WoBxdBrHbuV6JABQ.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, 
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, 
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* ========================================================
   تنسيق صناديق السايدبار - بدون روابط وبنفس شكل الموقع الآخر
   ======================================================== */
.sidebar-event-panel {
    width: 290px;
    margin-top: 10px;
    margin-bottom: 12px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(218, 165, 32, 0.28);
    overflow: hidden;
    box-sizing: border-box;
}

.sidebar-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(218, 165, 32, 0.2);
    color: #daa520;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(218, 165, 32, 0.05);
}

.sidebar-panel-header svg {
    color: #daa520;
    flex-shrink: 0;
}

.sidebar-panel-body {
    padding: 10px 12px;
}

/* بطاقات المسابقات (ليست أزرار ولا تقبل الضغط) */
.live-event-card {
    display: block;
    padding: 8px 12px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(139, 105, 20, 0.3);
    margin-bottom: 6px;
    cursor: default !important; /* شكل الماوس سهم عادي */
    user-select: none;
}

.live-event-card:last-child {
    margin-bottom: 0;
}

.live-event-card .status-ongoing {
    color: #ff9900;
    font-size: 11px;
    font-weight: 700;
    margin-right: 4px;
}

.live-event-card .status-upcoming {
    color: #daa520;
    font-size: 11px;
    font-weight: 700;
    margin-right: 4px;
}

.live-event-card .event-title {
    color: #e5e0d8;
    font-size: 11px;
    font-weight: 600;
}

/* عداد السيزون */
.reset-countdown-list p {
    color: #a5a09a;
    font-size: 11px;
    margin: 0 0 6px 0;
    line-height: 1.4;
}

.reset-countdown-list p:last-child {
    margin-bottom: 0;
}

.reset-num {
    color: #e85a3c !important;
    font-weight: 700;
}