/* =========================================
   INLINE MANA SYMBOL BASE
   ========================================= */

.mana-w,
.mana-u,
.mana-b,
.mana-r,
.mana-g,
.mana-c,
.mana-s,
.mana-wp,
.mana-up,
.mana-bp,
.mana-rp,
.mana-gp,
.mana-gup,
.mana-p,
.mana-2w,
.mana-2u,
.mana-2b,
.mana-2r,
.mana-2g,
.mana-wu,
.mana-ub,
.mana-br,
.mana-rg,
.mana-gw,
.mana-wb,
.mana-bg,
.mana-gu,
.mana-ur,
.mana-rw,
.mana-0,
.mana-1,
.mana-2,
.mana-3,
.mana-4,
.mana-5,
.mana-6,
.mana-7,
.mana-8,
.mana-9,
.mana-10,
.mana-11,
.mana-12,
.mana-13,
.mana-14,
.mana-15,
.mana-16,
.mana-17,
.mana-18,
.mana-19,
.mana-20,
.mana-x,
.mana-y,
.mana-z,
.mana-t,
.mana-q,
.mana-100,
.mana-1000000,
.mana-infinity,
.mana-half {
  position: relative;
  top: 2px;
  display: inline-block;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 15px;
  height: 15px;
  background: url(../images/mana-symbols.png) no-repeat 0 0;
  vertical-align: baseline;
  font-size: 0;
  line-height: 0;
  background-size: 150px;
}


/* =========================================
   BASIC COLORS
   ========================================= */

.mana-w { background-position: -60px -30px; }
.mana-u { background-position: -75px -30px; }
.mana-b { background-position: -90px -30px; }
.mana-r { background-position: -105px -30px; }
.mana-g { background-position: -120px -30px; }
.mana-c { background-position: -105px -75px; }
.mana-s { background-position: -135px -30px; }


/* =========================================
   HYBRID MANA
   ========================================= */

.mana-wu { background-position: 0 -45px; }
.mana-wb { background-position: -15px -45px; }
.mana-ub { background-position: -30px -45px; }
.mana-ur { background-position: -45px -45px; }
.mana-br { background-position: -60px -45px; }
.mana-bg { background-position: -75px -45px; }
.mana-rw { background-position: -90px -45px; }
.mana-rg { background-position: -105px -45px; }
.mana-gw { background-position: -120px -45px; }
.mana-gu { background-position: -135px -45px; }

.mana-2w { background-position: 0 -60px; }
.mana-2u { background-position: -15px -60px; }
.mana-2b { background-position: -30px -60px; }
.mana-2r { background-position: -45px -60px; }
.mana-2g { background-position: -60px -60px; }


/* =========================================
   PHYREXIAN
   ========================================= */

.mana-wp { background-position: -75px -60px; }
.mana-up { background-position: -90px -60px; }
.mana-bp { background-position: -105px -60px; }
.mana-rp { background-position: -120px -60px; }
.mana-gp { background-position: -135px -60px; }
.mana-gup { background-position: -135px -75px; }
.mana-p { background-position: -120px -75px; }


/* =========================================
   GENERIC NUMERIC MANA
   ========================================= */

.mana-0 { background-position: 0 0; }
.mana-1 { background-position: -15px 0; }
.mana-2 { background-position: -30px 0; }
.mana-3 { background-position: -45px 0; }
.mana-4 { background-position: -60px 0; }
.mana-5 { background-position: -75px 0; }
.mana-6 { background-position: -90px 0; }
.mana-7 { background-position: -105px 0; }
.mana-8 { background-position: -120px 0; }
.mana-9 { background-position: -135px 0; }

.mana-10 { background-position: 0 -15px; }
.mana-11 { background-position: -15px -15px; }
.mana-12 { background-position: -30px -15px; }
.mana-13 { background-position: -45px -15px; }
.mana-14 { background-position: -60px -15px; }
.mana-15 { background-position: -75px -15px; }
.mana-16 { background-position: -90px -15px; }
.mana-17 { background-position: -105px -15px; }
.mana-18 { background-position: -120px -15px; }
.mana-19 { background-position: -135px -15px; }

.mana-20 { background-position: 0 -30px; }


/* =========================================
   VARIABLE / SPECIAL
   ========================================= */

.mana-x { background-position: -15px -30px; }
.mana-y { background-position: -30px -30px; }
.mana-z { background-position: -45px -30px; }

.mana-t { background-position: 0 -75px; }
.mana-q { background-position: -15px -75px; }


/* =========================================
   UNSET / EXTREME VALUES
   ========================================= */

.mana-100 {
  background-position: -73px -90px;
  width: 30px;
}

.mana-1000000 {
  background-position: 0 -90px;
  width: 73px;
}

.mana-infinity { background-position: -30px -75px; }
.mana-half { background-position: -45px -75px; }