/* Career tab background */
.body-top { background-image:url(../../images/layout/bgs/profile-hero.jpg); }
.profile-body { background:url(../../images/profile/career-bg.jpg) 0 0 no-repeat; }

/* Bigger header on career page */
.profile-head .header-2{ font-size: 46px; }

.career-left { float: left; width: 600px; }
.career-right {  float: right; width: 300px; background: #161412; }
.career-right-top { padding-top: 30px; background: url("../../images/profile/career-right.jpg") 0 0 no-repeat; }
.career-right-bot { padding: 0 20px 0 20px; background: url("../../images/profile/career-right.jpg") -302px 100% no-repeat; }
.career-right-bot .last-updated { margin-top: 75px; margin-bottom: 0; width:300px; white-space:nowrap; margin-left:-20px; }
.career-full { float: left; width: 900px; }

/* Heroes */
.top-heroes .hero-portrait-wrapper { margin-bottom:25px; position:relative; margin-right:15px; display:block; float:left; width:168px; height:195px; padding:10px 11px 0; background:url(../../images/profile/career-portraits.jpg) -336px 0 no-repeat; box-shadow:0 0 7px #000; text-align: center; }
.top-heroes .hero-portrait-wrapper:hover { background-position:-526px 0; }
.top-heroes .hero-portrait-wrapper.hardcore { background-position:-336px -205px; }
.top-heroes .hero-portrait-wrapper.hardcore:hover { background-position:-526px -205px; }
.top-heroes .hero-portrait-wrapper.empty,
.top-heroes .hero-portrait-wrapper.empty:hover { background-position: -336px -410px; }

.top-heroes .hero-portrait-wrapper .hero-portrait { display:block; width:168px; height:130px; background:url(../../images/profile/career-portraits.jpg) no-repeat; }
.top-heroes .hero-portrait-wrapper .hero-portrait.barbarian-male { background-position:0 0; }
.top-heroes .hero-portrait-wrapper .hero-portrait.barbarian-female { background-position:-168px 0; }
.top-heroes .hero-portrait-wrapper .hero-portrait.crusader-male { background-position:0 -650px; }
.top-heroes .hero-portrait-wrapper .hero-portrait.crusader-female { background-position:-168px -650px; }
.top-heroes .hero-portrait-wrapper .hero-portrait.demon-hunter-male { background-position:0 -130px; }
.top-heroes .hero-portrait-wrapper .hero-portrait.demon-hunter-female { background-position:-168px -130px; }
.top-heroes .hero-portrait-wrapper .hero-portrait.monk-male { background-position:0 -260px; }
.top-heroes .hero-portrait-wrapper .hero-portrait.monk-female { background-position:-168px -260px; }
.top-heroes .hero-portrait-wrapper .hero-portrait.witch-doctor-male { background-position:0 -390px; }
.top-heroes .hero-portrait-wrapper .hero-portrait.witch-doctor-female { background-position:-168px -390px; }
.top-heroes .hero-portrait-wrapper .hero-portrait.wizard-male { background-position:0 -520px; }
.top-heroes .hero-portrait-wrapper .hero-portrait.wizard-female { background-position:-168px -520px; }

.top-heroes .hero-portrait-wrapper .name { position: relative; display: inline-block; text-align:center; height:32px; font-size:20px; line-height:32px; max-width: 125px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top-heroes .hero-portrait-wrapper .name:after { content: ""; display: block; clear: both; }
.top-heroes .hero-portrait-wrapper .large-seasonal-leaf { position: absolute; right: 14px; top: 143px; }
.zh-tw .top-heroes .hero-portrait-wrapper .name { font-size:18px; }
.ko-kr .top-heroes .hero-portrait-wrapper .name { font-size:16px; }
.top-heroes .hero-portrait-wrapper .level { display:block; text-align:center; position:absolute; right:8px; bottom:9px; color:#a99877; font-family:"Arial Black", Arial; font-weight:900; font-size:14px; width:26px; height:26px; line-height:26px; }
.top-heroes .hero-portrait-wrapper .skill-measure { display:block; text-align:center; color:#7b6d55; font-size:12px; height:22px; line-height:22px; width: 143px; }
.ko-kr .top-heroes .hero-portrait-wrapper .skill-measure { font-size: 11px; line-height: 25px; word-spacing: -0.1em; }

.top-heroes .hero-portrait-wrapper:hover .name,
.top-heroes .hero-portrait-wrapper:hover .level,
.top-heroes .hero-portrait-wrapper:hover .skill-measure { color:#FFF; }

/* Hero tables */
.list-table.hero-table ul { border-top:1px solid #28241d; font-size:12px; margin-bottom:45px; }
.list-table.hero-table li a { width:600px; height:34px; display:block; }
.list-table.hero-table li .cell { padding:5px; display:block; float:left; line-height:23px; vertical-align:middle;  }
.list-table.hero-table li .col-measure { float:right; padding-right:15px; color:#A99877; }
.list-table.hero-table li .col-hero { width:200px; }
.list-table.hero-table li .col-hero.seasonal { width:185px; }
.list-table.hero-table li .small-seasonal-leaf { float: left; margin-top: 7px; }
.list-table.hero-table li .col-class { color:#A99877; }
.list-table.hero-table li a:hover { background-color: #171717; }
.list-table.hero-table li .icon-frame { padding:0; border-radius:1px; }
.list-table.hero-table li .col-hero .icon-portrait { display: block; float:left; margin-right:8px; }

/* Fallen Heroes */
.fallen-heroes .fallen-hero { display:block; float:left; margin-right:8px; width:113px; height:154px; background-repeat: no-repeat; box-shadow:0 0 7px #000; cursor:help; }
.fallen-heroes .fallen-hero:hover { background-position:0 100%; }
.fallen-heroes .fallen-hero .name { color:#cfb991; font-size:12px; line-height:21px; font-family:Arial; text-shadow:1px 1px 3px #000; display:block; width:113px; text-align:center; position:relative; top:87px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fallen-heroes .fallen-hero .time-played { color:#7b6d55; font-size:11px; line-height:16px; font-family:Arial; text-shadow:1px 1px 3px #000; display:block; width:113px; text-align:center; position:relative; top:84px; }
.fallen-heroes .fallen-hero .level { display:block; width:113px; height:40px; line-height:40px; color:#b00000; font-family:"Arial Black", Arial; font-weight:900; font-size:14px; text-align:center; position:relative; top:84px;
	background:url(../../images/profile/fallen-hero-level.png) no-repeat 50% 0; }
.ff .fallen-heroes .fallen-hero .level {padding-left:1px; width:112px;}
.ie6 .fallen-heroes .fallen-hero .level { background-image:url(../../images/profile/fallen-hero-level.gif); }
.fallen-heroes .fallen-hero.last-hero { margin-right:0; }
.fallen-heroes .fallen-hero.row-1 { margin-bottom:18px; }

.fallen-heroes .fallen-hero.barbarian-male { background-image:url(../../images/profile/fallen-heroes/barbarian-male.jpg); }
.fallen-heroes .fallen-hero.barbarian-female { background-image:url(../../images/profile/fallen-heroes/barbarian-female.jpg); }
.fallen-heroes .fallen-hero.crusader-male { background-image:url(../../images/profile/fallen-heroes/crusader-male.jpg); }
.fallen-heroes .fallen-hero.crusader-female { background-image:url(../../images/profile/fallen-heroes/crusader-female.jpg); }
.fallen-heroes .fallen-hero.demon-hunter-male { background-image:url(../../images/profile/fallen-heroes/demon-hunter-male.jpg); }
.fallen-heroes .fallen-hero.demon-hunter-female { background-image:url(../../images/profile/fallen-heroes/demon-hunter-female.jpg); }
.fallen-heroes .fallen-hero.monk-male { background-image:url(../../images/profile/fallen-heroes/monk-male.jpg); }
.fallen-heroes .fallen-hero.monk-female { background-image:url(../../images/profile/fallen-heroes/monk-female.jpg); }
.fallen-heroes .fallen-hero.witch-doctor-male { background-image:url(../../images/profile/fallen-heroes/witch-doctor-male.jpg); }
.fallen-heroes .fallen-hero.witch-doctor-female { background-image:url(../../images/profile/fallen-heroes/witch-doctor-female.jpg); }
.fallen-heroes .fallen-hero.wizard-male { background-image:url(../../images/profile/fallen-heroes/wizard-male.jpg); }
.fallen-heroes .fallen-hero.wizard-female { background-image:url(../../images/profile/fallen-heroes/wizard-female.jpg); }

/* artisans */
.artisans .artisan { display:block; float:left; padding:8px 0 0 65px; width:229px; height:90px; background:url(../../images/profile/career-artisans.jpg) no-repeat; }
.artisans .artisan.jeweler-locked,
.artisans .artisan.mystic-locked,
.artisans .artisan.blacksmith-locked { background-position:-882px 0; }
.artisans .artisan.blacksmith,
.artisans .artisan.jeweler,
.artisans .artisan.blacksmith-locked,
.artisans .artisan.jeweler-locked { margin-right: 9px; }
.artisans .artisan.jeweler { background-position:-294px 0; }
.artisans .artisan.mystic { background-position:-588px 0; }
.artisans .artisan .title { display:block; color:#ad835a; font-size:18px; line-height:1.5em; margin-top:7px; margin-bottom:1px; }
.artisans .artisan .level { display:block; color:#a99877; font-size:12px;  }
.artisans .artisan .level.hardcore { color:#b10000; }
.artisans .artisan .level .value { font-weight: bold; }

/* Class Breakdown */
.class-breakdown .subheader-3 { border-bottom:0; }
.class-breakdown .bars { height: 73px; position:relative; }
.class-breakdown .column { width: 42px; height: 73px; display: block; position:absolute; background:url(../../images/profile/time-played-by-class.jpg) no-repeat; box-shadow:0 0 4px #1d1813; cursor: help; box-shadow:0 0 5px rgba(0, 0, 0, 0.5); }
.class-breakdown .column .bar { width: 42px; display: block; position:absolute; bottom:0; background:url(../../images/profile/time-played-by-class.jpg) no-repeat; border-top:1px solid #000; }
.class-breakdown .column .bar.full-bar { border-top:0; }
.class-breakdown .column-name { position: absolute; left: 0; top: 80px; width: 42px; text-align: center; font-size: 11px; color: #7B6D55; }

/* Class Breakdown - Vanilla */
.class-breakdown .column.barbarian { background-position:0 0; left:0; }
.class-breakdown .column.barbarian .bar { background-position:-210px 100%; border-color:#aa563d; }
.class-breakdown .column.barbarian:hover .bar { background-position:-420px 100%; }

.class-breakdown .column.demon-hunter { background-position:-42px 0; left:54px; }
.class-breakdown .column.demon-hunter .bar { background-position:-252px 100%; border-color:#905966; }
.class-breakdown .column.demon-hunter:hover .bar { background-position:-462px 100%; }

.class-breakdown .column.monk { background-position:-84px 0; left:108px; }
.class-breakdown .column.monk .bar { background-position:-294px 100%; border-color:#b16b36; }
.class-breakdown .column.monk:hover .bar { background-position:-504px 100%; }

.class-breakdown .column.witch-doctor { background-position:-126px 0; left:162px; }
.class-breakdown .column.witch-doctor .bar { background-position:-336px 100%; border-color:#5e6253; }
.class-breakdown .column.witch-doctor:hover .bar { background-position:-546px 100%; }

.class-breakdown .column.wizard { background-position:-168px 0; left:216px; }
.class-breakdown .column.wizard .bar { background-position:-378px 100%; border-color:#3b5578; }
.class-breakdown .column.wizard:hover .bar { background-position:-588px 100%; }

/* Class Breakdown - RoS (x1) */
.class-breakdown.x1 .column,
.class-breakdown.x1 .column .bar { width: 35px; background:url(../../images/profile/time-played-by-class-x1.jpg) no-repeat; }

.class-breakdown.x1 .column.barbarian { background-position:0 0; left:0; }
.class-breakdown.x1 .column.barbarian .bar { background-position:-210px 100%; }
.class-breakdown.x1 .column.barbarian:hover .bar { background-position:-420px 100%; }

.class-breakdown.x1 .column.demon-hunter { background-position:-35px 0; left:90px; }
.class-breakdown.x1 .column.demon-hunter .bar { background-position:-245px 100%; }
.class-breakdown.x1 .column.demon-hunter:hover .bar { background-position:-455px 100%; }

.class-breakdown.x1 .column.monk { background-position:-70px 0; left:135px; }
.class-breakdown.x1 .column.monk .bar { background-position:-280px 100%;  }
.class-breakdown.x1 .column.monk:hover .bar { background-position:-490px 100%; }

.class-breakdown.x1 .column.witch-doctor { background-position:-105px 0; left:180px; }
.class-breakdown.x1 .column.witch-doctor .bar { background-position:-315px 100%; }
.class-breakdown.x1 .column.witch-doctor:hover .bar { background-position:-525px 100%; }

.class-breakdown.x1 .column.wizard { background-position:-140px 0; left:225px; }
.class-breakdown.x1 .column.wizard .bar { background-position:-350px 100%; }
.class-breakdown.x1 .column.wizard:hover .bar { background-position:-560px 100%; }

.class-breakdown.x1 .column.crusader { background-position:-175px 0; left:45px; }
.class-breakdown.x1 .column.crusader .bar { background-position:-385px 100%; }
.class-breakdown.x1 .column.crusader:hover .bar { background-position:-595px 100%; }

/* Achievements */
.career-achievements { }
.career-achievements .total-achievements { height:32px; line-height:32px; font-family:"Arial Black", Arial; font-weight:900; font-size:24px; }
.career-achievements .total-achievements .achievement-shield { background:url(../../images/profile/career.png) -104px -20px; display:block; float:left; width:30px; height:32px; margin-top:4px; margin-left:-4px; }
.career-achievements .total-achievements .percent { text-align:right; float:right; display:block; width:50px; font-family:Arial; font-size:11px; color:#7b6d55; margin-top:4px; }
.career-achievements .progress-bar { background:url(../../images/profile/career.png) -98px 0; width:261px; height:8px; margin-top:8px; }
.career-achievements .progress-bar-fill { background:url(../../images/profile/career.png) -98px -8px; width:60%; height:8px; overflow:hidden; }

.ie6 .career-achievements .total-achievements .achievement-shield,
.ie6 .career-achievements .progress-bar,
.ie6 .career-achievements .progress-bar-fill { background-image:url(../../images/profile/career.gif); }

/* Kills */
.career-kills { border-bottom:1px solid #38291d; margin:0 0 29px; }
/*.career-kills { border-top:1px solid #38291d; border-bottom:1px solid #38291d; padding:29px 0 15px; margin:25px 0 29px }*/
.career-kills .kill-section { padding-bottom: 10px; }
.career-kills .kill-section .num-kills { font-family:"Arial Black", Arial; font-weight:900; font-size:18px; display:block; float:left; width:180px; margin-top:5px; }
.career-kills .kill-section .label { color:#7b6d55; font-size:11px; text-transform:uppercase; display:block; width:180px; float:left; margin-top:-2px; }
.career-kills .kill-section .icon { display:block; float:left; background:url(../../images/profile/career.png) no-repeat; height:64px; }
.career-kills .kill-section.lifetime .icon { background-position: 0 0; width:44px; margin-left:6px; margin-right:22px; }
.career-kills .kill-section.elite .icon { background-position: -43px 0; width:54px; margin-right:18px; }
.career-kills .kill-section.paragon .icon { background-position: -360px 0; width:54px; margin-left:0; margin-right:18px; }
.ie6 .career-kills .kill-section .icon { background-image:url(../../images/profile/career.gif); }

/* Progress Bar */
.progression .progression-bar .bar-label { width:90px; float:left; height:28px; line-height:28px; }
.progression .progression-bar .bar-wrapper { width:510px; height:28px; background:url(../../images/profile/progression.png) no-repeat; position:relative; left:90px; }
.progression .progression-bar .bar-wrapper .bar-fill { position:absolute; height:17px; top:5px; background:url(../../images/profile/progression.png) no-repeat; }
.progression .progression-bar .bar-wrapper .marker { display:block; position:absolute; top:3px; width:24px; height:24px; background:url(../../images/profile/progression.png) no-repeat -544px -3px; }
.progression .progression-bar .bar-wrapper .marker.normal { left:0px; }
.progression .progression-bar .bar-wrapper .marker.nightmare { left:124px; }
.progression .progression-bar .bar-wrapper .marker.hell { left:248px; }
.progression .progression-bar .bar-wrapper .marker.inferno { left:372px; }
.progression .progression-bar .bar-wrapper .marker:hover { background-position: -520px -3px; }
.progression .progression-bar .bar-wrapper .marker.complete { background-position:-536px -55px; }
.progression .progression-bar .bar-wrapper .marker.complete:hover { background-position:-513px -55px; }
.progression .progression-bar.hardcore-progression .bar-wrapper .marker.complete { background-position:-536px -29px; }
.progression .progression-bar.hardcore-progression .bar-wrapper .marker.complete:hover { background-position:-513px -29px; }

.progression .progression-bar.normal-progression .bar-wrapper .bar-fill { background-position:0 -57px; }
.progression .progression-bar.hardcore-progression .bar-wrapper .bar-fill { background-position:0 -31px; }

.progression .difficulty-labels { padding-left:98px; position:relative; top:-2px; }
.progression .difficulty-labels .difficulty-label { width:124px; }
.progression .difficulty-labels .difficulty-label .label-marker { width:123px; margin:0 0 0 1px; }

.progression .progress-arrow-hitbox { margin-left:-2px; }
.progression .progress-arrow-hitbox .progress-arrow { background:url(../../images/profile/progression.png) no-repeat -560px -59px; }
.progression .progress-arrow-hitbox:hover .progress-arrow { background-position: -576px -59px; }

.progression .progression-bar.hardcore-progression .progress-arrow-hitbox .progress-arrow { background-position:-560px -33px; }
.progression .progression-bar.hardcore-progression .progress-arrow-hitbox:hover .progress-arrow { background-position:-576px -33px; }

.ie6 .progression .progression-bar .bar-wrapper { background-image:url(../../images/profile/progression.gif); }
.ie6 .progression .progression-bar .bar-wrapper .bar-fill { background-image:url(../../images/profile/progression.gif); }
.ie6 .progression .progression-bar .bar-wrapper .marker { background-image:url(../../images/profile/progression.gif); }

/* Boss Progression for RoS */
.progression .bosses { overflow: auto; }
.progression .bosses .boss { text-align: center; width: 120px; background:url(../../images/profile/bosses.png) no-repeat; float: left; padding-top: 135px;}
.progression .bosses .boss0 { background-position:  0     0;}
.progression .bosses .boss1 { background-position: -120px 0;}
.progression .bosses .boss2 { background-position: -240px 0;}
.progression .bosses .boss3 { background-position: -360px 0;}
.progression .bosses .boss4 { background-position: -480px 0;}
.progression .bosses .boss0killed { background-position:  0     -130px;}
.progression .bosses .boss1killed { background-position: -120px -130px;}
.progression .bosses .boss2killed { background-position: -240px -130px;}
.progression .bosses .boss3killed { background-position: -360px -130px;}
.progression .bosses .boss4killed { background-position: -480px -130px;}