.top-heroes .hero-portrait-wrapper {
    background: rgba(0, 0, 0, 0) url("http://eu.battle.net/d3/static/images/profile/career-portraits.jpg") no-repeat scroll -336px 0;
    box-shadow: 0 0 7px #000;
    display: block;
    float: left;
    height: 195px;
    margin-bottom: 25px;
    margin-right: 15px;
    padding: 10px 11px 0;
    position: relative;
    text-align: center;
    width: 168px;
}
.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 {
    background: rgba(0, 0, 0, 0) url("http://eu.battle.net/d3/static/images/profile/career-portraits.jpg") no-repeat scroll 0 0;
    display: block;
    height: 130px;
    width: 168px;
}
.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 .hero-portrait.necromancer-male {
    background-position: 0 -780px;
}
.top-heroes .hero-portrait-wrapper .hero-portrait.necromancer-female {
    background-position: -168px -780px;
}

.top-heroes .hero-portrait-wrapper .name {
    display: inline-block;
    font-size: 20px;
    height: 32px;
    line-height: 32px;
    max-width: 125px;
    overflow: hidden;
    position: relative;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.top-heroes .hero-portrait-wrapper .name::after {
    clear: both;
    content: "";
    display: block;
}
.large-seasonal-leaf {
    background: rgba(0, 0, 0, 0) url("http://eu.battle.net/d3/static/images/profile/seasonal-leaf.png") no-repeat scroll -2px -2px;
    display: inline-block;
    height: 27px;
    width: 20px;
}
.top-heroes .hero-portrait-wrapper .large-seasonal-leaf {
    position: absolute;
    right: 14px;
    top: 143px;
}
.top-heroes .hero-portrait-wrapper .level {
    bottom: 9px;
    color: #a99877;
    display: block;
    font-family: "Arial Black",Arial;
    font-size: 14px;
    font-weight: 900;
    height: 26px;
    line-height: 26px;
    position: absolute;
    right: 8px;
    text-align: center;
    width: 26px;
}
.top-heroes .hero-portrait-wrapper .skill-measure {
    color: #7b6d55;
    display: block;
    font-size: 12px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    width: 143px;
}
.top-heroes .hero-portrait-wrapper:hover .name, .top-heroes .hero-portrait-wrapper:hover .level, .top-heroes .hero-portrait-wrapper:hover .skill-measure {
    color: #fff;
}

.runes {
	margin: 5px;
	background-image: url("http://eu.battle.net/d3/static/images/icons/runes/large.png");
	background-repeat: no-repeat;
	width: 50px;
	height: 50px;
	display: inline-block;
}
.runes.rune-a {
	background-position: 0px 0px;	
}
.runes.rune-b {
	background-position: -50px 0px;	
}
.runes.rune-c {
	background-position: -100px 0px;	
}
.runes.rune-d {
	background-position: -150px 0px;	
}
.runes.rune-e {
	background-position: -200px 0px;	
}
.runes.rune-f {
	background-position: -250px 0px;	
}

.portrait {
	position: relative;
	width: 202px;
	height: 596px;
}
.head {
	position: absolute;
	top: 0px;
	left: 73px;
	width: 64px;
	height: 128px;
}
.torso {
	position: absolute;
	top: 120px;
	left: 64px;
	width: 82px;
	height: 164px;
}
.feet {
	position: absolute;
	top: 448px;
	left: 73px;
	width: 64px;
	height: 128px;
}
.hands {
	position: absolute;
	top: 128px;
	left: 0px;
	width: 68px;
	height: 128px;
}
.shoulders {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 64px;
	height: 128px;
}
.legs {
	position: absolute;
	top: 320px;
	left: 73px;
	width: 64px;
	height: 128px;
}
.bracers {
	position: absolute;
	top: 128px;
	left: 146px;
	width: 64px;
	height: 128px;
}
.mainHand {
	position: absolute;
	top: 320px;
	left: 0px;
	width: 64px;
	height: 128px;
}
.offHand {
        position: absolute;
        top: 320px;
        left: 146px;
        width: 64px;
        height: 128px;
}
.waist {
	position: absolute;
	top: 256px;
	left: 73px;
	width: 64px;
	height: 64px;
}
.rightFinger {
	position: absolute;
	top: 256px;
	left: 0px;
	width: 64px;
	height: 64px;
}
.leftFinger {
	position: absolute;
	top: 256px;
	left: 146px;
	width: 64px;
	height: 64px;
}
.neck {
	position: absolute;
	top: 64px;
	left: 146px;
	width: 64px;
	height: 64px;
}