/* hiscores-19.css — layout mirrors 2009scape.org/services/m=hiscore/hiscores.html */

#hiscores_background {
    height: 1%;
    box-sizing: border-box;
}

#hiscores_background::after {
    content: "";
    display: block;
    clear: both;
}

/* zero padding on playerList only — its absolute arrow strip needs content edge = padding edge */
#playerList_back {
    padding: 0;
}

/* search panel keeps a 5px gap between the brown_box border and its inner cards */
#search_back {
    padding: 5px;
}

.no_margin {
    margin: 0;
}

/* ---- left tall column: skills list ---- */
#skillsList_back {
    float: left;
    width: 163px;
    height: 100%;
    margin-right: 5px;
    padding-bottom: 3px;
    background: #261c09;
    border: 1px solid #6C5937;
    box-sizing: border-box;
}

.subsectionHeader {
    width: 100%;
}

#skillsList ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#skillsList ul li {
    background-color: #413624;
    margin: 1px 0;
    font-weight: bold;
}

#skillsList ul li.current {
    background-color: #4c350a;
}

#skillsList ul li a {
    text-decoration: none;
    padding: 2px 2px 2px 24px;
    display: block;
    color: #f9deb3;
    font: bold 11px arial, sans-serif;
    background: transparent no-repeat 3px 51%;
    background-size: 16px 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#skillsList ul li a:hover {
    background-color: #59441d;
    color: #fff;
}

#skillsList ul li.current a {
    color: #fff;
}

#skillsList ul li a[data-skill="overall"] {
    background-image: url(/img/main/hiscores/skill_icon_overall1.webp);
}

#skillsList ul li a[data-skill="attack"] {
    background-image: url(/img/main/hiscores/skill_icon_attack1.webp);
}

#skillsList ul li a[data-skill="defence"] {
    background-image: url(/img/main/hiscores/skill_icon_defence1.webp);
}

#skillsList ul li a[data-skill="strength"] {
    background-image: url(/img/main/hiscores/skill_icon_strength1.webp);
}

#skillsList ul li a[data-skill="constitution"] {
    background-image: url(/img/main/hiscores/skill_icon_constitution1.webp);
}

#skillsList ul li a[data-skill="ranged"] {
    background-image: url(/img/main/hiscores/skill_icon_ranged1.webp);
}

#skillsList ul li a[data-skill="prayer"] {
    background-image: url(/img/main/hiscores/skill_icon_prayer1.webp);
}

#skillsList ul li a[data-skill="magic"] {
    background-image: url(/img/main/hiscores/skill_icon_magic1.webp);
}

#skillsList ul li a[data-skill="cooking"] {
    background-image: url(/img/main/hiscores/skill_icon_cooking1.webp);
}

#skillsList ul li a[data-skill="woodcutting"] {
    background-image: url(/img/main/hiscores/skill_icon_woodcutting1.webp);
}

#skillsList ul li a[data-skill="fletching"] {
    background-image: url(/img/main/hiscores/skill_icon_fletching1.webp);
}

#skillsList ul li a[data-skill="fishing"] {
    background-image: url(/img/main/hiscores/skill_icon_fishing1.webp);
}

#skillsList ul li a[data-skill="firemaking"] {
    background-image: url(/img/main/hiscores/skill_icon_firemaking1.webp);
}

#skillsList ul li a[data-skill="crafting"] {
    background-image: url(/img/main/hiscores/skill_icon_crafting1.webp);
}

#skillsList ul li a[data-skill="smithing"] {
    background-image: url(/img/main/hiscores/skill_icon_smithing1.webp);
}

#skillsList ul li a[data-skill="mining"] {
    background-image: url(/img/main/hiscores/skill_icon_mining1.webp);
}

#skillsList ul li a[data-skill="herblore"] {
    background-image: url(/img/main/hiscores/skill_icon_herblore1.webp);
}

#skillsList ul li a[data-skill="agility"] {
    background-image: url(/img/main/hiscores/skill_icon_agility1.webp);
}

#skillsList ul li a[data-skill="thieving"] {
    background-image: url(/img/main/hiscores/skill_icon_thieving1.webp);
}

#skillsList ul li a[data-skill="slayer"] {
    background-image: url(/img/main/hiscores/skill_icon_slayer1.webp);
}

#skillsList ul li a[data-skill="farming"] {
    background-image: url(/img/main/hiscores/skill_icon_farming1.webp);
}

#skillsList ul li a[data-skill="runecrafting"] {
    background-image: url(/img/main/hiscores/skill_icon_runecrafting1.webp);
}

#skillsList ul li a[data-skill="hunter"] {
    background-image: url(/img/main/hiscores/skill_icon_hunter1.webp);
}

#skillsList ul li a[data-skill="construction"] {
    background-image: url(/img/main/hiscores/skill_icon_construction1.webp);
}

#skillsList ul li a[data-skill="summoning"] {
    background-image: url(/img/main/hiscores/skill_icon_summoning1.webp);
}

#skillsList ul li a[data-skill="dungeoneering"] {
    background-image: url(/img/main/hiscores/skill_icon_dungeoneering1.webp);
}

/* Activity sidebar icons (used when category_type=1). */
#skillsList ul li a[data-activity="duel_tournament"] {
    background-image: url(/img/main/hiscores/game_icon_dueltournament1.webp);
}

#skillsList ul li a[data-activity="bounty_hunters"] {
    background-image: url(/img/main/hiscores/game_icon_bountyhunters1.webp);
}

#skillsList ul li a[data-activity="bounty_hunter_rogues"] {
    background-image: url(/img/main/hiscores/game_icon_bountyhunterrogues1.webp);
}

#skillsList ul li a[data-activity="fist_of_guthix"] {
    background-image: url(/img/main/hiscores/game_icon_fistofguthix1.webp);
}

#skillsList ul li a[data-activity="mobilising_armies"] {
    background-image: url(/img/main/hiscores/game_icon_mobilisingarmies1.webp);
}

#skillsList ul li a[data-activity="ba_attackers"] {
    background-image: url(/img/main/hiscores/game_icon_baattackers1.webp);
}

#skillsList ul li a[data-activity="ba_defenders"] {
    background-image: url(/img/main/hiscores/game_icon_badefenders1.webp);
}

#skillsList ul li a[data-activity="ba_collectors"] {
    background-image: url(/img/main/hiscores/game_icon_bacollectors1.webp);
}

#skillsList ul li a[data-activity="ba_healers"] {
    background-image: url(/img/main/hiscores/game_icon_bahealers1.webp);
}

#skillsList ul li a[data-activity="castle_wars_games"] {
    background-image: url(/img/main/hiscores/game_icon_castlewarsgames1.webp);
}

#skillsList ul li a[data-activity="conquest"] {
    background-image: url(/img/main/hiscores/game_icon_conquest1.webp);
}

/* ---- mode toggle row (top of right area) ---- */
#modeSelect_back {
    float: left;
    width: auto;
    height: auto;
    margin-bottom: 5px;
    box-sizing: border-box;
}

#modeSelect_back .buttons {
    width: 542px;
    height: 65px;
    margin: 0;
    position: relative;
}

#modeSelect_back .buttons a {
    display: block;
    width: 250px;
    height: 45px;
    float: left;
    background: #3B2B0F;
    border: 1px solid #6C5937;
    position: relative;
    font-weight: bold;
    color: transparent;
    text-align: center;
    text-decoration: none;
    line-height: 45px;
    box-sizing: border-box;
}

#modeSelect_back .buttons a.current {
    background: #4c350a;
    color: #fff;
}

#modeSelect_back .buttons a span.lev1,
#modeSelect_back .buttons a span.lev1a {
    display: block;
    cursor: pointer;
    position: absolute;
    top: -10px;
    left: -10px;
    width: 270px;
    height: 65px;
    background-repeat: no-repeat;
}

#modeSelect_back #button-left {
    left: 10px;
    top: 10px;
}

#modeSelect_back #button-right {
    left: 32px;
    top: 10px;
}

#modeSelect_back #button-left span.lev1 {
    background-image: url(/img/main/hiscores/skills.webp);
}

#modeSelect_back #button-left span.lev1a {
    background-image: url(/img/main/hiscores/skillsa.webp);
}

#modeSelect_back #button-right span.lev1 {
    background-image: url(/img/main/hiscores/minigames.webp);
}

#modeSelect_back #button-right span.lev1a {
    background-image: url(/img/main/hiscores/minigamesa.webp);
}

#modeSelect_back .buttons a:hover span.lev1,
#modeSelect_back .buttons a:hover span.lev1a {
    background-position: left bottom;
}

/* ---- player list (under mode toggle, left of search) ---- */
#playerList_back {
    float: left;
    width: 390px;
    height: auto;
    margin-right: 5px;
    background: #261c09;
    border: 1px solid #6C5937;
    box-sizing: border-box;
    position: relative;
}

#scores_head {
    height: 24px;
    padding: 0;
}

#scores_head .miniimg_list {
    height: 17px;
    vertical-align: text-bottom;
    margin: 3px 4px 0 6px;
}

.table_back {
    border-collapse: collapse;
    float: left;
    line-height: 19px;
    font-size: 12px;
    table-layout: fixed;
    font-weight: bold;
    width: 344px;
}

.table_header,
.arrow_header {
    background: transparent url(/img/main/layout/subsection_subheader_bg.png) repeat-x;
}

.table_header {
    height: 23px;
    line-height: 0;
    color: #fff;
    font-weight: bold;
}

.arrow_header {
    position: absolute;
    top: 24px;
    right: 0;
    width: 25px;
    height: 23px;
    box-sizing: border-box;
}

.row {
    height: 19px;
}

.row#lastRow {
    height: 20px;
}

.row td {
    padding: 0 6px;
    color: #E2CCA3;
}

.row td a {
    text-decoration: none;
    color: #e2cca3;
}

.row td a:hover {
    text-decoration: underline;
    color: #fff;
}

.row1 {
    background-color: #6e5931;
}

.row2 {
    background-color: #5e4c2b;
}

.row3 {
    background-color: #6d5730;
}

.row4 {
    background-color: #5c4a29;
}

.row5 {
    background-color: #6a552f;
}

.row6 {
    background-color: #594828;
}

.row7 {
    background-color: #67532d;
}

.row8 {
    background-color: #564526;
}

.row9 {
    background-color: #64502b;
}

.row10 {
    background-color: #534224;
}

.row11 {
    background-color: #614d29;
}

.row12 {
    background-color: #503f21;
}

.row13 {
    background-color: #5d4a27;
}

.row14 {
    background-color: #4c3d20;
}

.row15 {
    background-color: #5a4725;
}

.row16 {
    background-color: #4a3b1e;
}

.row17 {
    background-color: #584524;
}

.row18 {
    background-color: #47381d;
}

.row19 {
    background-color: #554322;
}

.row20 {
    background-color: #45361b;
}

.row21 {
    background-color: #534221;
}

.row22 {
    background-color: #423419;
}

.row23 {
    background-color: #534221;
}

.row24 {
    background-color: #423419;
}

.table_back .rankCol {
    color: #f3c334;
    text-align: center;
}

.rankHead {
    width: 60px;
    text-align: center;
}

.nameHead,
.levelHead,
.xpHead,
.scoreHead {
    text-align: left;
    padding-left: 6px;
}

.nameHead {
    width: 136px;
}

.levelHead {
    width: 65px;
}

.xpHead {
    width: 83px;
}

.scoreHead {
    width: 83px;
}

.table_back.is-activities .nameHead {
    width: 201px;
}

/* arrow strip absolutely placed inside playerList_back (which is position:relative) */
.arrow_back {
    position: absolute;
    top: 47px;
    right: 0;
    width: 25px;
    height: 457px;
    background-color: #3B2B0F;
    box-sizing: border-box;
}

.buttons_arrows {
    width: 25px;
    height: 130px;
    position: relative;
}

.buttons_arrows a {
    display: block;
    width: 25px;
    height: 27px;
    position: relative;
    overflow: hidden;
    text-indent: -9999px;
    background-repeat: no-repeat;
    background-position: 0 0;
}

.buttons_arrows a:hover {
    background-position: 0 -27px;
}

.buttons_arrows .lev1_arrow {
    display: none;
}

#button-up {
    background-image: url(/img/main/hiscores/arrow_up.webp);
    top: 180px;
}

#button-down {
    background-image: url(/img/main/hiscores/arrow_down.webp);
    top: 185px;
}

/* ---- search panel (right of player list) ---- */
#search_back {
    float: left;
    width: 156px;
    height: 100%;
    background: #261c09;
    border: 1px solid #6C5937;
    box-sizing: border-box;
    color: #fff;
}

#search_back,
#search_back .subsectionHeader {
    color: white;
}

.search_title {
    height: 25px;
}

.search_small,
.search_large,
.search_tiny_bit_more_large,
.search_custom_large {
    margin-bottom: 2px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.search_small {
    height: 82px;
    background: transparent url(/img/main/hiscores/search_small.webp) repeat-x;
}

.search_large {
    height: 98px;
    background: transparent url(/img/main/hiscores/search_large.webp) repeat-x;
}

.search_tiny_bit_more_large {
    height: auto;
    background: transparent url(/img/main/hiscores/search_tiny_bit_more_large.webp) repeat-x;
}

.search_custom_large {
    height: 102px;
    background: transparent url(/img/main/hiscores/search_custom_large.webp) repeat-x;
}

#search_back form {
    margin: 0;
    padding: 0;
}

#search_back .text {
    width: 134px;
}

#search_name,
#search_rank {
    margin: 16px 0 5px 0;
    padding: 3px 4px;
    background: #f9deb3;
    border: 1px solid #6C5937;
    color: #261c09;
    font: 11px arial, sans-serif;
    box-sizing: border-box;
}

#search_compare1 {
    margin-top: 7px;
}

#search_compare2 {
    margin: 5px 0 5px 0;
}

#search_compare1,
#search_compare2 {
    padding: 3px 4px;
    background: #f9deb3;
    border: 1px solid #6C5937;
    color: #261c09;
    font: 11px arial, sans-serif;
    box-sizing: border-box;
}

#friends_search {
    margin-bottom: 0;
    padding: 0;
}

.friendsContent {
    margin: auto;
    padding-top: 8px;
    color: #fff;
    font: 11px arial, sans-serif;
    line-height: 14px;
}

#search_friends {
    margin-top: 5px;
}

/* ============================================================
   Personal hiscores view (m=hiscore/hiscorepersonal.ws)
   Two stacked tables (Skills + Activities) inside PlayerSkill_back,
   sit beside the search sidebar. Layout mirrors the legacy 2011 page.
   ============================================================ */

.center_container {
    width: 524px;
    margin: 0 auto;
}

.center_container::after {
    content: "";
    display: block;
    clear: both;
}

#player_header {
    float: left;
    width: 100%;
    margin-bottom: 5px;
    background: #261c09;
    border: 1px solid #6C5937;
    box-sizing: border-box;
}

#player_header .subsectionHeader {
    padding: 0;
    color: #f9deb3;
    text-align: center;
    height: 28px;
    line-height: 28px;
    font-size: 13px;
    font-weight: bold;
    background: transparent url(/img/main/layout/subsection_subheader_bg.png) repeat-x;
}

#player_sub {
    color: #f9deb3;
}

.player_name {
    display: inline;
    margin-left: 4px;
    font-weight: bold;
    color: #f3c334;
}

.player_name a {
    color: #f3c334;
    text-decoration: none;
}

.player_name a:hover {
    color: #fff;
    text-decoration: underline;
}

.player_notfound {
    display: block;
    margin-top: 0;
    font-style: italic;
    font-size: 11px;
    color: #d4cec3;
    line-height: 16px;
}

#PlayerSkill_back {
    float: left;
    width: 363px;
    margin-right: 5px;
    box-sizing: border-box;
}

.hiscores_section {
    background: #261c09;
    border: 1px solid #6C5937;
    box-sizing: border-box;
    padding: 4px;
    margin-bottom: 5px;
}

.hiscores_section .subsectionHeader {
    height: 28px;
    line-height: 28px;
    text-align: center;
    color: #f9deb3;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: transparent url(/img/main/layout/subsection_header_bg.png) repeat-x;
    margin-bottom: 2px;
}

#mini_player,
#skill_player {
    width: 100%;
    margin: 0;
    float: none;
    table-layout: fixed;
    border-collapse: collapse;
}

#mini_player td,
#skill_player td {
    padding: 0 3px;
}

#mini_player .table_header th,
#skill_player .table_header th {
    height: 23px;
    padding: 0 3px;
}

.imageHead_P {
    width: 24px;
    padding: 0 !important;
}

.skillsHead_P {
    width: 110px;
    text-align: left;
}

.gameHead_P {
    width: 150px;
    text-align: left;
}

#skill_player td:nth-child(2) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rankHead_P {
    width: 65px;
    text-align: left;
}

.levelHead_P {
    width: 45px;
    text-align: left;
}

.xpHead_P,
.scoreHead_P {
    width: 85px;
    text-align: left;
}

.miniimg {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

.alL {
    text-align: left;
    padding-left: 6px;
}

.not_ranked {
    text-align: center;
    font-style: italic;
    color: #a8916a;
}

/* Personal-row alternating background — reuse the same scheme as ranking rows */
.rowp1, .rowp3, .rowp5, .rowp7, .rowp9, .rowp11, .rowp13,
.rowp15, .rowp17, .rowp19, .rowp21, .rowp23, .rowp25 {
    background-color: #6e5931;
}

.rowp2, .rowp4, .rowp6, .rowp8, .rowp10, .rowp12, .rowp14,
.rowp16, .rowp18, .rowp20, .rowp22, .rowp24, .rowp26 {
    background-color: #5e4c2b;
}

.rowp td {
    padding: 0 6px;
    color: #E2CCA3;
}

/* ============================================================
   Compare players view (m=hiscore/compare.ws)
   Two side-by-side mini-tables per row, separated by 3px spacer.
   ============================================================ */

.compare_page .center_container {
    width: 720px;
}

.compare_page .hiscores_section {
    clear: both;
}

.compare_top_row {
    display: flex;
    gap: 5px;
    margin-bottom: 5px;
    height: 38px;
}

.compare_top_row .brown_box {
    background: #261c09;
    border: 1px solid #6C5937;
    box-sizing: border-box;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    color: #f9deb3;
    font-weight: bold;
    height: 100%;
}

.compare_desc {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.compare_desc .player_name {
    display: inline;
    margin: 0 6px;
    color: #f3c334;
}

.compare_desc .player_name a {
    color: #f3c334;
    text-decoration: none;
}

.compare_desc .player_name a:hover {
    color: #fff;
    text-decoration: underline;
}

#compare_entry {
    flex: 0 0 auto;
    gap: 6px;
    margin: 0;
}

#compare_entry .textinput {
    width: 110px;
    padding: 2px 4px;
    background: #f9deb3;
    border: 1px solid #6C5937;
    color: #261c09;
    font: 11px arial, sans-serif;
}

#compare_entry .compare_to {
    color: #f9deb3;
    font-weight: normal;
    margin: 0 2px;
}

#compare_entry #compareButton {
    margin-left: 4px;
}

#compare_skills,
#compare_activities {
    width: 100%;
    margin: 0;
    table-layout: fixed;
    border-collapse: collapse;
    float: none;
}

#compare_skills td,
#compare_skills th,
#compare_activities td,
#compare_activities th {
    padding: 0 3px;
    height: 19px;
}

.imageHead_C {
    width: 22px;
}

.skillsHead_C {
    width: 88px;
    text-align: left;
    padding-left: 6px;
}

.gameHead_C {
    width: 130px;
    text-align: left;
    padding-left: 6px;
}

.rankHead_C {
    width: 56px;
    text-align: left;
    padding-left: 6px;
}

.levelHead_C {
    width: 38px;
    text-align: left;
    padding-left: 6px;
}

.xpHead_C {
    width: 78px;
    text-align: left;
    padding-left: 6px;
}

.arrows_C {
    width: 20px;
    padding: 0 !important;
    text-align: center;
}

.spacer_C {
    width: 3px;
    padding: 0 !important;
    background-color: #2c210d;
}

.alC {
    text-align: center;
}

.compare_no_data {
    background-color: #2c210d;
    text-align: center;
    vertical-align: middle;
    font-style: italic;
    color: #f9deb3;
}

.miniimg.arrow {
    width: 14px;
    height: 14px;
    vertical-align: middle;
}