.halflings {
    opacity: 0.6;
    background-repeat: no-repeat;
    background-image: url("/images/icons/glyphicons/halflings/glyphicons-halflings.svg");
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.halflings-size-10 {
    /* Original background size: 665px
     *                           105px
     * Original icon size: 35px
     * New icon size: 10px
     * New background size: 665 / 35 * 10 = 190px
     *                      105 / 35 * 10 = 30px
     */
    background-size: 190px 30px;
    width: 10px;
    height: 10px;
}
.halflings-size-14 {
    /* Original background size: 665px
     *                           105px
     * Original icon size: 35px
     * New icon size: 14px
     * New background size: 665 / 35 * 14 = 266px
     *                      105 / 35 * 14 = 42px
     */
    background-size: 266px 42px;
    width: 14px;
    height: 14px;
}
.halflings-size-35 {
    /* Keep original background and icon size */
    background-size: 665px 105px;
    width: 35px;
    height: 35px;
}
.portlet-preview .halflings,
.portlet-helper .halflings {
    position: relative;
}
.ui-button .halflings {
    position: absolute;
    max-width: 100%;
}
.ui-button .halflings-size-14 {
    top: calc(50% - 7px);
}
.ui-button.ui-button-icon-only .halflings-size-14 {
    left: calc(50% - 7px);
}
.ui-button:not(.ui-button-icon-only) .halflings-size-14:not(.halflings-secondary) {
    left: 7px;
}
.ui-button .halflings-secondary {
    /* secondary button icon */
    left: 28px;
}
.menu .halflings {
    position: absolute;
    margin-left: -5px;
}
/* XXX change from px to % */
/* original halflings, 1. row */
.halflings-size-10.halflings-trash,
.halflings-size-10.halflings-stats,
.halflings-size-10.halflings-key,
.halflings-size-10.halflings-triangle-bottom,
.halflings-size-10.halflings-triangle-top,
.halflings-size-10.halflings-selectbox {
    background-position-y: -20px; /* -2 * 10px */
}
.halflings-size-14.halflings-trash,
.halflings-size-14.halflings-stats,
.halflings-size-14.halflings-key,
.halflings-size-14.halflings-triangle-bottom,
.halflings-size-14.halflings-triangle-top,
.halflings-size-14.halflings-selectbox {
    background-position-y: -28px; /* -2 * 14px */
}
.halflings-size-35.halflings-trash,
.halflings-size-35.halflings-stats,
.halflings-size-35.halflings-key,
.halflings-size-35.halflings-triangle-bottom,
.halflings-size-35.halflings-triangle-top,
.halflings-size-35.halflings-selectbox {
    background-position-y: -70px; /* -2 * 35px */
}
/* original halflings, 1. column */
.halflings-size-10.halflings-trash {
    background-position-x: -0px; /* -0 * 10px */
}
.halflings-size-14.halflings-trash {
    background-position-x: -0px; /* -0 * 14px */
}
.halflings-size-35.halflings-trash {
    background-position-x: -0px; /* -0 * 35px */
}
/* original halflings, 2. column */
.halflings-size-10.halflings-stats {
    background-position-x: -20px; /* -2 * 10px */
}
.halflings-size-14.halflings-stats {
    background-position-x: -28px; /* -2 * 14px */
}
.halflings-size-14.halflings-stats {
    background-position-x: -28px; /* -2 * 14px */
}
.halflings-size-35.halflings-stats {
    background-position-x: -70px; /* -2 * 35px */
}
/* original halflings, 3. column */
.halflings-size-10.halflings-key {
    background-position-x: -40px; /* -4 * 10px */
}
.halflings-size-14.halflings-key {
    background-position-x: -56px; /* -4 * 14px */
}
.halflings-size-35.halflings-key {
    background-position-x: -140px; /* -4 * 35px */
}
/* original halflings, 4. column */
.halflings-size-10.halflings-triangle-bottom {
    background-position-x: -60px; /* -6 * 10px */
}
.halflings-size-14.halflings-triangle-bottom {
    background-position-x: -84px; /* -6 * 14px */
}
.halflings-size-35.halflings-triangle-bottom {
    background-position-x: -210px; /* -6 * 35px */
}
/* original halflings, 5. column */
.halflings-size-10.halflings-triangle-top {
    background-position-x: -80px; /* -8 * 10px */
}
.halflings-size-14.halflings-triangle-top {
    background-position-x: -112px; /* -8 * 14px */
}
.halflings-size-35.halflings-triangle-top {
    background-position-x: -280px; /* -8 * 35px */
}
/* original halflings, 6. column */
.halflings-size-10.halflings-selectbox {
    background-position-x: -100px; /* -10 * 10px */
}
.halflings-size-14.halflings-selectbox {
    background-position-x: -140px; /* -10 * 14px */
}
.halflings-size-35.halflings-selectbox {
    background-position-x: -350px; /* -10 * 35px */
}