habitica/css/index.css

.herobox {
  position: relative;
}
.herobox:after {
  content: attr(data-name);
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  line-height: 2;
  color: #000;
  text-align: center;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  transition: opacity 0.2s ease-out;
}
.character-sprites span,
position: absolute,
#profileStable,
.active,
border 1pxsolid black,
,
.herobox[data-checkpet="hasPet"] {
  padding-top: 2em;
}
.herobox:not([data-checkpet="hasPet"]) {
  padding-top: 1.75em;
}
.herobox[data-checkpet="hasPet"][data-checkuser="isUser"] {
  padding-top: 3.25em;
}
.herobox:not([data-checkuser="isUser"]) {
  outline: 0;
}
.herobox .character-sprites {
  width: 6.428571429em;
  height: 6.428571429em;
  margin: 0 auto;
}
.herobox .character-sprites span,
.herobox .pet {
  position: absolute;
}
.f_weapon_6,
.f_weapon_5,
.f_weapon_4,
.f_weapon_3,
.f_weapon_2,
.f_weapon_1,
.f_weapon_0,
.f_shield_5,
.f_shield_4,
.f_shield_3,
.f_shield_2,
.f_shield_1,
.f_head_5_v2,
.f_head_5_v1,
.f_head_4_v2,
.f_head_4_v1,
.f_head_3_v2,
.f_head_3_v1,
.f_head_2_v2,
.f_head_2_v1,
.f_head_1,
.f_head_0,
.f_hair_white,
.f_hair_brown,
.f_hair_black,
.f_hair_blond,
.f_armor_5,
.f_armor_4,
.f_armor_3,
.f_armor_2,
.f_armor_1,
.f_armor_0_v2,
.f_armor_0_v1,
.f_skin_dead,
.f_skin_orc,
.f_skin_asian,
.f_skin_black,
.f_skin_white {
  background: url("../img/sprites/female_sprites.png") no-repeat;
}
.f_weapon_6 {
  background-position: 0 0;
  width: 90px;
  height: 90px;
}
.f_weapon_5 {
  background-position: -90px 0;
  width: 90px;
  height: 90px;
}
.f_weapon_4 {
  background-position: -180px 0;
  width: 90px;
  height: 90px;
}
.f_weapon_3 {
  background-position: -270px 0;
  width: 90px;
  height: 90px;
}
.f_weapon_2 {
  background-position: -360px 0;
  width: 90px;
  height: 90px;
}
.f_weapon_1 {
  background-position: -450px 0;
  width: 90px;
  height: 90px;
}
.f_weapon_0 {
  background-position: -540px 0;
  width: 90px;
  height: 90px;
}
.f_shield_5 {
  background-position: -630px 0;
  width: 90px;
  height: 90px;
}
.f_shield_4 {
  background-position: -720px 0;
  width: 90px;
  height: 90px;
}
.f_shield_3 {
  background-position: -810px 0;
  width: 90px;
  height: 90px;
}
.f_shield_2 {
  background-position: -900px 0;
  width: 90px;
  height: 90px;
}
.f_shield_1 {
  background-position: -990px 0;
  width: 90px;
  height: 90px;
}
.f_head_5_v2 {
  background-position: -1080px 0;
  width: 90px;
  height: 90px;
}
.f_head_5_v1 {
  background-position: -1170px 0;
  width: 90px;
  height: 90px;
}
.f_head_4_v2 {
  background-position: -1260px 0;
  width: 90px;
  height: 90px;
}
.f_head_4_v1 {
  background-position: -1350px 0;
  width: 90px;
  height: 90px;
}
.f_head_3_v2 {
  background-position: -1440px 0;
  width: 90px;
  height: 90px;
}
.f_head_3_v1 {
  background-position: -1530px 0;
  width: 90px;
  height: 90px;
}
.f_head_2_v2 {
  background-position: -1620px 0;
  width: 90px;
  height: 90px;
}
.f_head_2_v1 {
  background-position: -1710px 0;
  width: 90px;
  height: 90px;
}
.f_head_1 {
  background-position: -1800px 0;
  width: 90px;
  height: 90px;
}
.f_head_0 {
  background-position: -1890px 0;
  width: 90px;
  height: 90px;
}
.f_hair_white {
  background-position: -1980px 0;
  width: 90px;
  height: 90px;
}
.f_hair_brown {
  background-position: -2070px 0;
  width: 90px;
  height: 90px;
}
.f_hair_black {
  background-position: -2160px 0;
  width: 90px;
  height: 90px;
}
.f_hair_blond {
  background-position: -2250px 0;
  width: 90px;
  height: 90px;
}
.f_armor_5 {
  background-position: -2340px 0;
  width: 90px;
  height: 90px;
}
.f_armor_4 {
  background-position: -2430px 0;
  width: 90px;
  height: 90px;
}
.f_armor_3 {
  background-position: -2520px 0;
  width: 90px;
  height: 90px;
}
.f_armor_2 {
  background-position: -2610px 0;
  width: 90px;
  height: 90px;
}
.f_armor_1 {
  background-position: -2700px 0;
  width: 90px;
  height: 90px;
}
.f_armor_0_v2 {
  background-position: -2790px 0;
  width: 90px;
  height: 90px;
}
.f_armor_0_v1 {
  background-position: -2880px 0;
  width: 90px;
  height: 90px;
}
.f_skin_dead {
  background-position: -2970px 0;
  width: 90px;
  height: 90px;
}
.f_skin_orc {
  background-position: -3060px 0;
  width: 90px;
  height: 90px;
}
.f_skin_asian {
  background-position: -3150px 0;
  width: 90px;
  height: 90px;
}
.f_skin_black {
  background-position: -3240px 0;
  width: 90px;
  height: 90px;
}
.f_skin_white {
  background-position: -3330px 0;
  width: 90px;
  height: 90px;
}
.customize-menu [class^="f_hair"],
.customize-menu [class^="f_skin"],
.customize-menu [class^="f_armor"],
.customize-menu .f_head_0 {
  width: 60px;
  height: 60px;
}
.customize-menu .f_head_0 {
  background-position: -1917px -9px;
}
.customize-menu .f_hair_white {
  background-position: -2009px -8px;
}
.customize-menu .f_hair_brown {
  background-position: -2099px -8px;
}
.customize-menu .f_hair_black {
  background-position: -2189px -8px;
}
.customize-menu .f_hair_blond {
  background-position: -2279px -8px;
}
.customize-menu .f_skin_dead {
  background-position: -2997px -20px;
}
.customize-menu .f_skin_orc {
  background-position: -3087px -20px;
}
.customize-menu .f_skin_asian {
  background-position: -3177px -20px;
}
.customize-menu .f_skin_black {
  background-position: -3267px -20px;
}
.customize-menu .f_skin_white {
  background-position: -3357px -20px;
}
.customize-menu .f_armor_0_v2 {
  background-position: -2819px -38px;
}
.customize-menu .f_armor_0_v1 {
  background-position: -2909px -38px;
}
.m_weapon_6,
.m_weapon_5,
.m_weapon_4,
.m_weapon_3,
.m_weapon_2,
.m_weapon_1,
.m_weapon_0,
.m_shield_5,
.m_shield_4,
.m_shield_3,
.m_shield_2,
.m_shield_1,
.m_head_5,
.m_head_4,
.m_head_3,
.m_head_2,
.m_head_1,
.m_head_0,
.m_hair_blond,
.m_hair_black,
.m_hair_brown,
.m_hair_white,
.m_armor_5,
.m_armor_4,
.m_armor_3,
.m_armor_2,
.m_armor_1,
.m_armor_0,
.m_skin_dead,
.m_skin_orc,
.m_skin_asian,
.m_skin_black,
.m_skin_white {
  background: url("../img/sprites/male_sprites.png") no-repeat;
}
.m_weapon_6 {
  background-position: 0 0;
  width: 90px;
  height: 90px;
}
.m_weapon_5 {
  background-position: -90px 0;
  width: 90px;
  height: 90px;
}
.m_weapon_4 {
  background-position: -180px 0;
  width: 90px;
  height: 90px;
}
.m_weapon_3 {
  background-position: -270px 0;
  width: 90px;
  height: 90px;
}
.m_weapon_2 {
  background-position: -360px 0;
  width: 90px;
  height: 90px;
}
.m_weapon_1 {
  background-position: -450px 0;
  width: 90px;
  height: 90px;
}
.m_weapon_0 {
  background-position: -540px 0;
  width: 90px;
  height: 90px;
}
.m_shield_5 {
  background-position: -630px 0;
  width: 90px;
  height: 90px;
}
.m_shield_4 {
  background-position: -720px 0;
  width: 90px;
  height: 90px;
}
.m_shield_3 {
  background-position: -810px 0;
  width: 90px;
  height: 90px;
}
.m_shield_2 {
  background-position: -900px 0;
  width: 90px;
  height: 90px;
}
.m_shield_1 {
  background-position: -990px 0;
  width: 90px;
  height: 90px;
}
.m_head_5 {
  background-position: -1080px 0;
  width: 90px;
  height: 90px;
}
.m_head_4 {
  background-position: -1170px 0;
  width: 90px;
  height: 90px;
}
.m_head_3 {
  background-position: -1260px 0;
  width: 90px;
  height: 90px;
}
.m_head_2 {
  background-position: -1350px 0;
  width: 90px;
  height: 90px;
}
.m_head_1 {
  background-position: -1440px 0;
  width: 90px;
  height: 90px;
}
.m_head_0 {
  background-position: -1530px 0;
  width: 90px;
  height: 90px;
}
.m_hair_blond {
  background-position: -1620px 0;
  width: 90px;
  height: 90px;
}
.m_hair_black {
  background-position: -1710px 0;
  width: 90px;
  height: 90px;
}
.m_hair_brown {
  background-position: -1800px 0;
  width: 90px;
  height: 90px;
}
.m_hair_white {
  background-position: -1890px 0;
  width: 90px;
  height: 90px;
}
.m_armor_5 {
  background-position: -1980px 0;
  width: 90px;
  height: 90px;
}
.m_armor_4 {
  background-position: -2070px 0;
  width: 90px;
  height: 90px;
}
.m_armor_3 {
  background-position: -2160px 0;
  width: 90px;
  height: 90px;
}
.m_armor_2 {
  background-position: -2250px 0;
  width: 90px;
  height: 90px;
}
.m_armor_1 {
  background-position: -2340px 0;
  width: 90px;
  height: 90px;
}
.m_armor_0 {
  background-position: -2430px 0;
  width: 90px;
  height: 90px;
}
.m_skin_dead {
  background-position: -2520px 0;
  width: 90px;
  height: 90px;
}
.m_skin_orc {
  background-position: -2610px 0;
  width: 90px;
  height: 90px;
}
.m_skin_asian {
  background-position: -2700px 0;
  width: 90px;
  height: 90px;
}
.m_skin_black {
  background-position: -2790px 0;
  width: 90px;
  height: 90px;
}
.m_skin_white {
  background-position: -2880px 0;
  width: 90px;
  height: 90px;
}
.customize-menu [class^="m_hair"],
.customize-menu [class^="m_skin"],
.customize-menu .m_head_0 {
  width: 60px;
  height: 60px;
}
.customize-menu .m_head_0 {
  background-position: -1557px -9px;
}
.customize-menu .m_hair_blond {
  background-position: -1647px -4px;
}
.customize-menu .m_hair_black {
  background-position: -1737px -4px;
}
.customize-menu .m_hair_brown {
  background-position: -1827px -4px;
}
.customize-menu .m_hair_white {
  background-position: -1917px -4px;
}
.customize-menu .m_skin_dead {
  background-position: -2547px -20px;
}
.customize-menu .m_skin_orc {
  background-position: -2637px -20px;
}
.customize-menu .m_skin_asian {
  background-position: -2727px -20px;
}
.customize-menu .m_skin_black {
  background-position: -2817px -20px;
}
.customize-menu .m_skin_white {
  background-position: -2907px -20px;
}