/* Warhammer Online - The Private Server: portal stylesheet (v1 rebuild).
   All layout images are the original site assets, dimensions verbatim. */

* { margin: 0; padding: 0; box-sizing: content-box; }

body {
    background: #000 url(/images/layout/bg.jpg) no-repeat top center;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #a8a8a8;
    min-width: 1110px;
}

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

/* ---- Top login bar (connecticut.png 1078x53) ---- */
#topbar {
    background: url(/images/layout/connecticut.png) no-repeat center;
    min-height: 53px;
    width: 100%;
}
#topbar-inner {
    width: 1078px;
    margin: 0 auto;
    height: 53px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
#topbar-login { display: flex; align-items: center; gap: 8px; }
#topbar-login label { color: #fff; font-size: 11px; }
.input-war {
    background: url(/images/form/input.png) no-repeat;
    width: 130px; height: 20px;
    border: 0; outline: none;
    color: #ddd;
    padding: 0 6px;
    font-size: 11px;
    background-color: transparent;
}
.btn-img { border: 0; display: inline-block; vertical-align: middle; cursor: pointer; }
.tb-item { color: #a8a8a8; font-size: 11px; }
.tb-link { color: #ffc000; font-size: 11px; }
.tb-red, a.tb-red { color: #b70000; font-size: 11px; }
.tb-red:hover { color: #e00000; }

/* ---- Logo (823x121) ---- */
#sitelogo { text-align: center; }
#sitelogo img { margin-bottom: -20px; }

/* ---- Menu (menu.png 1110x154) ---- */
#mainmenu {
    background: url(/images/layout/menu.png) no-repeat;
    width: 1110px; height: 154px;
    margin: 0 auto -78px auto;
    margin-top: -22px;
    position: relative;
    z-index: 10;
}
#mainmenu ul { list-style: none; margin: 0 0 0 90px; padding-top: 5px; display: flex; }
#mainmenu li { margin-right: 17px; }
#mainmenu img { border: 0; transition: transform .1s, filter .1s; }
#mainmenu img:hover { transform: translateY(2px) scale(.98); filter: brightness(.9); }

/* ---- Page frame (960px column) ---- */
#page-top {
    background: url(/images/layout/page_top.jpg);
    width: 960px; height: 36px;
    margin: 0 auto;
}
#page-body {
    background: url(/images/layout/page.jpg) repeat-y;
    width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
}
#page-bottom {
    background: url(/images/layout/page_bottom.jpg);
    width: 960px; height: 36px;
    margin: 0 auto;
}

/* Left content column (620px) */
#content-left { width: 620px; margin-left: 30px; padding-top: 15px; }
/* Full-width content (forum etc.) */
#content-full { width: 900px; margin: 0 auto; padding: 15px 0; min-height: 400px; }

/* ---- Sidebar (250px) ---- */
#sidebar { margin-left: auto; margin-right: 17px; padding-top: 15px; width: 250px; }
#playnow { display: block; font-size: 0; }
#playnow img { display: block; border: 0; }
#side-changelog { display: block; position: relative; font-size: 0; }
#side-changelog img.cl-bg { display: block; border: 0; }
#side-changelog img.cl-bar { position: absolute; bottom: 18px; left: 29px; border: 0; }
#realm-top {
    background: url(/images/layout/page_right_top.png);
    width: 250px; height: 58px;
    line-height: 58px;
    text-align: center;
    color: #ffc000; font-size: 14px;
}
#realm-center {
    background: url(/images/layout/page_right_center.png);
    width: 250px;
    text-align: center;
}
#realm-center .realm-online { width: 138px; margin: 0 auto 15px auto; }
#realm-center .realm-row { overflow: hidden; padding: 0 12px; font-size: 11px; color: #fff; font-family: Arial, Helvetica, sans-serif; white-space: nowrap; }
#realm-center .rl { float: left; }
#realm-center .rr { float: left; }
#realm-center .realm-bar { margin: 5px 0 0 21px; text-align: left; }
#realm-center .realm-bar2 { margin: 15px 0 0 21px; text-align: left; }
#realm-bottom {
    background: url(/images/layout/page_right_bottom.png);
    width: 250px; height: 47px;
}

/* ---- Slider (643x273, thumbs 115x89) ---- */
#slider {
    position: relative; overflow: hidden;
    width: 643px; height: 273px;
    margin-left: -12px;
}
#slider .strip { display: flex; transition: transform .5s ease-in-out; }
#slider .strip img { width: 643px; height: 273px; flex-shrink: 0; }
#slider-thumbs { width: 530px; height: 89px; margin: 0 auto 30px auto; }
#slider-thumbs .row { display: flex; justify-content: center; gap: 15px; margin-left: 20px; }
#slider-thumbs a { width: 115px; height: 89px; display: block; cursor: pointer; }

/* ---- News boxes (page_left_* images) ---- */
.news-top { background: url(/images/layout/page_left_top.png); width: 620px; height: 6px; margin-top: 15px; }
.news-body {
    background: url(/images/layout/page_left_center.jpg) repeat-y;
    width: 580px;
    padding: 3px 20px 10px 20px;
    color: #a8a8a8;
    display: table;
}
.news-body h2 {
    clear: both; float: left;
    color: #fff; font-size: 16px;
    text-transform: uppercase; font-weight: normal;
    margin: 10px 0 15px 0;
    width: 510px;
}
.news-date { float: right; margin: 10px 0 15px 0; color: #a8a8a8; }
.news-sub { clear: both; color: #ffc000; text-decoration: underline; margin-bottom: 10px; }
.news-body ul { list-style: disc inside; clear: both; }
.news-more { float: right; margin-top: 5px; }
.news-bottom { background: url(/images/layout/page_left_bottom.jpg); width: 620px; height: 13px; }

/* ---- Pagination ---- */
.pagination-war { margin: 15px 0; text-align: center; }
.pagination-war .pagi {
    display: inline-block;
    background: url(/images/icones/pagi_off.jpg) no-repeat center;
    width: 23px; height: 23px; line-height: 23px;
    text-align: center;
    color: #a8a8a8; margin: 0 2px;
}
.pagination-war .pagi.on { background: url(/images/icones/pagi_on.jpg) no-repeat center; color: #fff; }
.pagination-war .pagi:hover { background: url(/images/icones/pagi_hover.jpg) no-repeat center; text-decoration: none; }

/* ---- Section titles / cadre frames ---- */
.titre-img { margin-bottom: 20px; }
/* cadre2 frame at ORIGINAL dimensions (628 wide, 89px ornate header, 50px footer) */
.cadre2-top { background: url(/images/layout/cadre2_top.png) no-repeat; width: 628px; height: 89px; position: relative; }
.cadre2-top h3 {
    color: #ffffff; font-size: 18px; font-weight: normal;
    text-transform: uppercase; text-align: center;
    width: 500px; margin: 0 auto; padding-top: 17px;
}
.cadre2-center { background: url(/images/layout/cadre2_center.png) repeat-y; width: 598px; padding: 0 15px; }
.cadre2-center table { width: 100%; border-collapse: collapse; }
.cadre2-center tr.alt { background: rgba(30,30,30,.5); }
.cadre2-center td { color: #a8a8a8; font-size: 11px; padding: 5px 10px; }
.cadre2-bottom { background: url(/images/layout/cadre2_bottom.png) no-repeat; width: 628px; height: 50px; }
.cadre2-bottom .total { display: flex; align-items: center; justify-content: flex-end; padding: 20px 20px 0 0; gap: 10px; color: #888; font-size: 11px; }

.cadre-top { background: url(/images/layout/cadre_top.jpg) no-repeat; width: 618px; height: 15px; }
.cadre-center { background: url(/images/layout/cadre_center.jpg) repeat-y; width: 578px; padding: 5px 20px; display: table; }
.cadre-bottom { background: url(/images/layout/cadre_bottom.jpg) no-repeat; width: 618px; height: 11px; }

/* ---- Forms ---- */
.form-war { margin: 10px 0; }
.form-war .frow { margin-bottom: 12px; overflow: hidden; }
.form-war label { display: block; float: left; width: 160px; color: #cbbb88; padding-top: 3px; }
.form-war input[type=text], .form-war input[type=password], .form-war input[type=email] {
    background: url(/images/form/input.png) no-repeat;
    width: 130px; height: 20px;
    border: 0; outline: none;
    color: #ddd; padding: 0 6px; font-size: 11px;
    background-color: transparent;
}
.form-war textarea, .form-war select {
    background: #14100a; border: 1px solid #3a2c14;
    color: #ccc; font-size: 12px; padding: 4px;
}
.form-error { color: #ff4040; margin: 10px 0; }
.form-ok { color: #40c040; margin: 10px 0; }

/* ---- Bug tracker / armory / account navigation panels ----
   Rendered as real <img> elements (never clipped, whatever the browser/zoom);
   hover swaps the img src to the *_hover.png variant. */
.panel-row { overflow: hidden; margin-bottom: 15px; }
.panel-row a { float: left; display: block; font-size: 0; }
.panel-row a + a { margin-left: 4px; }
.panel-row a img { display: block; border: 0; }

/* Bug tracker overview banner: real <img> with the stats overlaid on its lower half */
#bt-overview { position: relative; margin-left: -6px; width: 632px; }
#bt-overview > img { display: block; border: 0; }
#bt-overview .bt-stats {
    position: absolute; left: 0; right: 0; top: 50%;
    text-align: center;
    color: #a8a8a8; font-size: 12px;
}
#bt-overview .bt-stats img { vertical-align: middle; }

/* Armory intro + player research band: real <img> with the form overlaid */
#arm-title { margin-left: -12px; }
#arm-title img { display: block; border: 0; }
#arm-search { position: relative; margin-left: -7px; width: 634px; }
#arm-search > img { display: block; border: 0; }
#arm-search form { position: absolute; left: 45px; top: 50%; }
#arm-search .input-war { vertical-align: middle; }
#arm-search input.search-btn {
    background: url(/images/layout/buttons/search.png);
    width: 144px; height: 40px;
    border: 0; cursor: pointer;
    vertical-align: middle; margin-left: 15px;
}

/* tables (tablo header images) */
.war-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.war-table th {
    background: url(/images/layout/tablo.jpg);
    height: 35px; color: #ffc000; font-weight: normal; text-transform: uppercase;
}
.war-table td { padding: 6px 10px; border-bottom: 1px solid #221805; color: #a8a8a8; }
.war-table tr:nth-child(even) td { background: rgba(30,30,30,.5); }
.war-table a { color: #ffc000; }
.status-open { color: #ff8000; }
.status-closed { color: #40c040; }

/* ---- Join Us parchment ---- */
#join_us {
    background: url(/images/layout/parchemin/join_us.png);
    width: 621px; height: 1293px;
    color: #30220f; font-size: 14px;
    font-family: Georgia, serif;
    margin-left: 30px;
}
#join_us .ju-title { width: 524px; height: 251px; margin: 45px 0 0 45px; }
#join_us .ju-battle { width: 341px; height: 41px; margin: 14px 0 0 138px; display: block; }
#join_us .sepa { width: 234px; height: 13px; margin: 20px 0 0 191px; display: block; }
#join_us .ju-text { display: block; text-align: center; margin: 25px auto 0 auto; width: 525px; }
#join_us .ju-register { cursor: pointer; margin: 0 0 0 158px; border: 0; }
#join_us #launcher-container { width: 550px; height: 265px; margin: 20px auto 0 auto; overflow: hidden; }
#join_us #launcher { float: left; }
#join_us #right {
    background: url(/images/layout/parchemin/small.png);
    width: 251px; height: 110px;
    float: right; margin-top: 80px; text-align: center;
}
#join_us #right h2 { margin: 18px 0 8px 0; color: #30220f; font-size: 16px; }
#join_us #right a { color: #30220f; }
#join_us #right img { float: left; margin-left: 76px; border: 0; }
#join_us #right span { margin: 7px 0 0 7px; float: left; width: 80px; text-align: left; }
#join_us .ju-enjoy { margin: 50px 0 0 128px; display: block; }

/* ---- Footer (footer.jpg 946x218) ---- */
#sitefooter {
    background: url(/images/layout/footer.jpg) no-repeat top center;
    min-height: 218px;
    margin-top: 0;
}
#sitefooter-inner {
    width: 946px; margin: 0 auto;
    padding-top: 45px;
    overflow: hidden;
}
#sitefooter .fcol { list-style: none; float: left; width: 190px; margin-left: 30px; }
#sitefooter .fcol li { margin-bottom: 8px; }
#sitefooter .fcol a, #sitefooter .fcol span { color: #ffc000; font-size: 11px; }
#sitefooter .flogo { float: right; margin-right: 20px; }
#sitefooter .fbottom {
    clear: both; text-align: center;
    color: #e7e7e7; font-size: 11px;
    padding: 25px 40px 10px 40px;
}
#sitefooter .fbottom .fbrand { color: #ffc000; }

/* ---- original tablo table rows (bug tracker top 10 etc.) ---- */
.tablo { background: url(/images/layout/tablo.jpg) repeat-x; height: 35px; line-height: 35px; }
.tablo td { color: #ffffff; font-size: 12px; padding: 0; }
.tablo2 { background: url(/images/layout/tablo2.jpg) repeat-x; height: 35px; line-height: 35px; }
.tablo2 td { color: #ffffff; font-size: 12px; padding: 0; }
.tablo:hover, .tablo2:hover { background: url(/images/layout/tablo_hover.jpg) repeat-x; }
.tablo-titre { background: url(/images/layout/tablo_hover.jpg) repeat-x; height: 35px; line-height: 35px; }
.tablo-titre td { color: #ffffff; font-weight: bold; font-size: 12px; padding: 0; }
.cadre2-top h3.big {
    color: #ffffff; font-size: 18px; font-weight: normal;
    text-transform: uppercase; text-align: center;
    width: 100%; padding: 15px 0 0 0;
}

/* original pagination (pagi 31x15) + helpers */
.pagination { margin: 15px auto 0 auto; font-size: 11px; text-align: center; overflow: hidden; width: 345px; }
.pagination a {
    background: url(/images/icones/pagi_off.jpg);
    width: 31px; height: 15px; line-height: 15px;
    color: #ffc000; margin: 2px; text-decoration: none;
    display: block; float: left; text-align: center;
}
.pagination a:hover { background: url(/images/icones/pagi_hover.jpg); }
.pagination span.inactive {
    background: url(/images/icones/pagi_off.jpg);
    width: 31px; height: 15px; line-height: 15px;
    color: #909090; margin: 2px; display: block; float: left; text-align: center;
}
.pagination span.active {
    background: url(/images/icones/pagi_on.jpg);
    width: 31px; height: 15px; line-height: 15px;
    color: #909090; margin: 2px; display: block; float: left; text-align: center;
}
.pagination span.hellip { color: #ffc000; margin: 2px; display: block; float: left; }
.clear { clear: both; }
.pointer { cursor: pointer; }
.size11 { font-size: 11px; }
/* underscore aliases so list markup matches the original exactly */
.tablo_titre { background: url(/images/layout/tablo_hover.jpg) repeat-x; height: 35px; line-height: 35px; }
.tablo_titre td { color: #ffffff; font-weight: bold; font-size: 12px; padding: 0; }

/* jqTransform select: readable text (was inheriting dull body colour) */
.jqTransformSelectWrapper div span { color: #d0d0d0 !important; }
input.input {
    background: url(/images/form/input.png) no-repeat;
    width: 162px; height: 20px;
    border: none; outline: none;
    color: #878787; padding: 0 3px;
}
select.input { background-color: #100f0f; border: 1px solid #2a2a2a; outline: none; color: #878787; }
table#register { font-size: 11px; color: #bfbfbf; width: 100%; }
table#register b { font-size: 12px; color: #ffffff; }

/* task detail: original two-column layout inside the cadre2 frame */
#bugcolleft { float: left; margin-left: 5px; margin-right: 10px; width: 219px; }
#bugcolleft .tablename { color: #b3b3b3; }
#bugcolleft td { font-size: 11px; }
.cadre2-top h3.big { white-space: nowrap; overflow: hidden; width: 560px; }

/* list rows in Arial like the original, titles never wrap */
.tablo td, .tablo2 td, .tablo_titre td { font-family: Arial, Helvetica, sans-serif; }

/* register: validation icon layout + centered submit buttons, like the original */
table#register td span { display: table; }
table#register td span div img { margin-top: 3px; }
#disabled, #enable { width: 130px; margin: 0 auto; }