.glyph_holder {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;

    .glyph {
        position: absolute;
        color: black;
        vertical-align: middle;
        text-align: center;
        font-size: 15pt;
    }
    &.one_glyph {
        .glyph1 {
            left: 11px;
            top: 12px;
            width: 36px;
            height: 36px;
            line-height: 60px;
            background-size: 100% 100%;
        }
    }
    &.two_glyphs {
        .glyph1 {
            top: 20px;
            left: 10px;
            width: 20px;
            height: 20px;
            background-size: 100% 100%;

        }
        .glyph2 {
            top: 21px;
            left: 34px;
            width: 17px;
            height: 17px;
            background-size: 100% 100%;
        }
   }
    &.three_glyphs {
        .glyph1 {
            top: 14px;
            left: 12px;
            width: 20px;
            height: 20px;
            background-size: 100% 100%;

        }
        .glyph2 {
            top: 17px;
            left: 32px;
            width: 18px;
            height: 18px;
            background-size: 100% 100%;

        }
        .glyph3 {
            top: 36px;
            width: 15px;
            height: 15px;
            left: 22px;
            background-size: 100% 100%;
        }
    }

}


@font-face {
    font-family: magi;
    src: url(https://jamuspsi.github.io/fractory/less/../imagesfonts/alpmagi.ttf);
}

.magi {
    /*font-family: magi;*/


}

.icon-brilliance { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/barbed-sun.png'); }
.icon-radiance { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/beveled-star.png'); }
.magi_c { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/barbed-sun.png'); }
.icon-glow { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/divided-spiral.png'); }
.icon-mystery { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/abstract-002.png'); }
.icon-waxing { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/abstract-062.png'); }
.icon-conductivity { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/nodular.png'); }
.icon-infusing { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/concentric-crescents.png'); }
.icon-imbuing { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/doubled.png'); }
.icon-arcana { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/cursed-star.png'); }
.icon-vividity { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/maze-saw.png'); }
.icon-power { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/zigzag-cage.png'); }
.icon-shine { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/shiny-entrance.png'); }
.icon-lens { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/microscope-lens.png'); }
.icon-prism { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/crystal-eye.png'); }
.icon-shimmer { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/floating-crystal.png'); }
.icon-seal { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/abstract-118.png'); }
.icon-resonance { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/abstract-014.png'); }
.icon-flux { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/coiling-curl.png'); }
.icon-purity { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/holosphere.png'); }
.icon-reflection { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/over-infinity.png'); }
.icon-gleam { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/moebius-triangle.png'); }
.icon-core { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/nested-hexagons.png'); }

.icon-relay { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/abstract-065.png'); }
.icon-conduit { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/abstract-051.png'); }
.icon-capacitor { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/abstract-064.png'); }
.icon-hopper { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/abstract-027.png'); }

.magi_y { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/barbed-sun.png'); }
.magi_z { .magi; background: url('https://jamuspsi.github.io/fractory/less/../images/icons/barbed-sun.png'); }

/*
.magi_b {
    .magi; &:after {content: "b"}
}
.magi_c {
    .magi; &:after {content: "c"}
}
.magi_d {
    .magi; &:after {content: "d"}
}
.magi_e {
    .magi; &:after {content: "e"}
}
.magi_f {
    .magi; &:after {content: "f"}
}
.magi_g {
    .magi; &:after {content: "g"}
}
.magi_h { .magi; &:after { content: "h"; } }
.magi_i { .magi; &:after { content: "i"; } }
.magi_j { .magi; &:after { content: "j"; } }
.magi_k { .magi; &:after { content: "k"; } }
.magi_l { .magi; &:after { content: "l"; } }
.magi_m { .magi; &:after { content: "m"; } }
.magi_n { .magi; &:after { content: "n"; } }
.magi_o { .magi; &:after { content: "o"; } }
.magi_p { .magi; &:after { content: "p"; } }
.magi_q { .magi; &:after { content: "q"; } }
.magi_r { .magi; &:after { content: "r"; } }
.magi_s { .magi; &:after { content: "s"; } }
.magi_t { .magi; &:after { content: "t"; } }
.magi_u { .magi; &:after { content: "u"; } }
.magi_v { .magi; &:after { content: "v"; } }
.magi_w { .magi; &:after { content: "w"; } }
.magi_x { .magi; &:after { content: "x"; } }
.magi_y { .magi; &:after { content: "y"; } }
.magi_z { .magi; &:after { content: "z"; } }
*/