mana/css/mana.css

/**
 * Global */
@font-face {
  font-family: 'Mana';
  src: url('../fonts/mana.eot?v=0.1');
  src: url('../fonts/mana.eot?#iefix&v=0.1') format('embedded-opentype'), url('../fonts/mana.woff?v=0.1') format('woff'), url('../fonts/mana.ttf?v=0.1') format('truetype'), url('../fonts/mana.svg?v=0.1#mana') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'MPlantin';
  src: url('../fonts/mplantin.eot?v=0.1');
  src: url('../fonts/mplantin.eot?#iefix&v=0.1') format('embedded-opentype'), url('../fonts/mplantin.woff?v=0.1') format('woff'), url('../fonts/mplantin.ttf?v=0.1') format('truetype'), url('../fonts/mplantin.svg?v=0.1#mplantin') format('svg');
  font-weight: normal;
  font-style: normal;
}
.ms {
  display: inline-block;
  font: normal normal normal 14px/1 Mana;
  font-size: inherit;
  line-height: 1em;
  text-rendering: auto;
  transform: translate(0, 0);
  speak: none;
  text-transform: none;
  vertical-align: middle;
  /* Better font rendering  */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/**
 * Mana cost styles */
.ms-cost {
  /**
     * Base styles */
  background-color: #BEB9B2;
  border-radius: 1em;
  color: #111;
  font-size: 0.95em;
  width: 1.3em;
  height: 1.3em;
  line-height: 1.35em;
  text-align: center;
  /**
     * Single symbols */
  /**
     * Split symbols */
  /**
     * Phyrexian mana and size increases */
  /**
     * Alternate tap */
  /**
     * Snow mana */
  /**
     * Tap symbols */
  /**
     * Shadow */
}
.ms-cost.ms-w,
.ms-cost.ms-pw {
  background-color: #F0F2C0;
}
.ms-cost.ms-u,
.ms-cost.ms-pu {
  background-color: #B5CDE3;
}
.ms-cost.ms-b,
.ms-cost.ms-pb {
  background-color: #ACA29A;
}
.ms-cost.ms-r,
.ms-cost.ms-pr {
  background-color: #DB8664;
}
.ms-cost.ms-g,
.ms-cost.ms-pg {
  background-color: #93B483;
}
.ms-cost.ms-wu {
  background: #edf2b0;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #a6c1dd 50%, #a6c1dd 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #edf2b0), color-stop(50%, #edf2b0), color-stop(50%, #a6c1dd), color-stop(100%, #a6c1dd));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #a6c1dd 50%, #a6c1dd 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #a6c1dd 50%, #a6c1dd 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #a6c1dd 50%, #a6c1dd 100%);
  /* IE10+ */
  background: linear-gradient(135deg, #edf2b0 0%, #edf2b0 50%, #a6c1dd 50%, #a6c1dd 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#edf2b0', endColorstr='#a6c1dd', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.ms-cost.ms-wb {
  background: #edf2b0;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #9c9188 50%, #9c9188 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #edf2b0), color-stop(50%, #edf2b0), color-stop(50%, #9c9188), color-stop(100%, #9c9188));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #9c9188 50%, #9c9188 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #9c9188 50%, #9c9188 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #9c9188 50%, #9c9188 100%);
  /* IE10+ */
  background: linear-gradient(135deg, #edf2b0 0%, #edf2b0 50%, #9c9188 50%, #9c9188 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#edf2b0', endColorstr='#9c9188', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.ms-cost.ms-ub {
  background: #a6c1dd;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #a6c1dd 0%, #a6c1dd 50%, #9c9188 50%, #9c9188 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #a6c1dd), color-stop(50%, #a6c1dd), color-stop(50%, #9c9188), color-stop(100%, #9c9188));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #a6c1dd 0%, #a6c1dd 50%, #9c9188 50%, #9c9188 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #a6c1dd 0%, #a6c1dd 50%, #9c9188 50%, #9c9188 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #a6c1dd 0%, #a6c1dd 50%, #9c9188 50%, #9c9188 100%);
  /* IE10+ */
  background: linear-gradient(135deg, #a6c1dd 0%, #a6c1dd 50%, #9c9188 50%, #9c9188 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6c1dd', endColorstr='#9c9188', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.ms-cost.ms-ur {
  background: #a6c1dd;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #a6c1dd 0%, #a6c1dd 50%, #db8664 50%, #db8664 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #a6c1dd), color-stop(50%, #a6c1dd), color-stop(50%, #db8664), color-stop(100%, #db8664));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #a6c1dd 0%, #a6c1dd 50%, #db8664 50%, #db8664 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #a6c1dd 0%, #a6c1dd 50%, #db8664 50%, #db8664 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #a6c1dd 0%, #a6c1dd 50%, #db8664 50%, #db8664 100%);
  /* IE10+ */
  background: linear-gradient(135deg, #a6c1dd 0%, #a6c1dd 50%, #db8664 50%, #db8664 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6c1dd', endColorstr='#db8664', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.ms-cost.ms-br {
  background: #aca29a;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #aca29a 0%, #aca29a 50%, #db8664 50%, #db8664 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #aca29a), color-stop(50%, #aca29a), color-stop(50%, #db8664), color-stop(100%, #db8664));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #aca29a 0%, #aca29a 50%, #db8664 50%, #db8664 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #aca29a 0%, #aca29a 50%, #db8664 50%, #db8664 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #aca29a 0%, #aca29a 50%, #db8664 50%, #db8664 100%);
  /* IE10+ */
  background: linear-gradient(135deg, #aca29a 0%, #aca29a 50%, #db8664 50%, #db8664 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aca29a', endColorstr='#db8664', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.ms-cost.ms-bg {
  background: #aca29a;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #aca29a 0%, #aca29a 50%, #93b483 50%, #93b483 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #aca29a), color-stop(50%, #aca29a), color-stop(50%, #93b483), color-stop(100%, #93b483));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #aca29a 0%, #aca29a 50%, #93b483 50%, #93b483 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #aca29a 0%, #aca29a 50%, #93b483 50%, #93b483 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #aca29a 0%, #aca29a 50%, #93b483 50%, #93b483 100%);
  /* IE10+ */
  background: linear-gradient(135deg, #aca29a 0%, #aca29a 50%, #93b483 50%, #93b483 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aca29a', endColorstr='#93b483', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.ms-cost.ms-rw {
  background: #db8664;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #db8664 0%, #db8664 50%, #edf2b0 50%, #edf2b0 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #db8664), color-stop(50%, #db8664), color-stop(50%, #edf2b0), color-stop(100%, #edf2b0));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #db8664 0%, #db8664 50%, #edf2b0 50%, #edf2b0 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #db8664 0%, #db8664 50%, #edf2b0 50%, #edf2b0 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #db8664 0%, #db8664 50%, #edf2b0 50%, #edf2b0 100%);
  /* IE10+ */
  background: linear-gradient(135deg, #db8664 0%, #db8664 50%, #edf2b0 50%, #edf2b0 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#db8664', endColorstr='#edf2b0', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.ms-cost.ms-rg {
  background: #db8664;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #db8664 0%, #db8664 50%, #93b483 50%, #93b483 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #db8664), color-stop(50%, #db8664), color-stop(50%, #93b483), color-stop(100%, #93b483));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #db8664 0%, #db8664 50%, #93b483 50%, #93b483 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #db8664 0%, #db8664 50%, #93b483 50%, #93b483 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #db8664 0%, #db8664 50%, #93b483 50%, #93b483 100%);
  /* IE10+ */
  background: linear-gradient(135deg, #db8664 0%, #db8664 50%, #93b483 50%, #93b483 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#db8664', endColorstr='#93b483', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.ms-cost.ms-gw {
  background: #93b483;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #93b483 0%, #93b483 50%, #edf2b0 50%, #edf2b0 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #93b483), color-stop(50%, #93b483), color-stop(50%, #edf2b0), color-stop(100%, #edf2b0));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #93b483 0%, #93b483 50%, #edf2b0 50%, #edf2b0 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #93b483 0%, #93b483 50%, #edf2b0 50%, #edf2b0 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #93b483 0%, #93b483 50%, #edf2b0 50%, #edf2b0 100%);
  /* IE10+ */
  background: linear-gradient(135deg, #93b483 0%, #93b483 50%, #edf2b0 50%, #edf2b0 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#93b483', endColorstr='#edf2b0', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.ms-cost.ms-gu {
  background: #93b483;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #93b483 0%, #93b483 50%, #b5cde3 50%, #b5cde3 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #93b483), color-stop(50%, #93b483), color-stop(50%, #b5cde3), color-stop(100%, #b5cde3));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #93b483 0%, #93b483 50%, #b5cde3 50%, #b5cde3 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #93b483 0%, #93b483 50%, #b5cde3 50%, #b5cde3 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #93b483 0%, #93b483 50%, #b5cde3 50%, #b5cde3 100%);
  /* IE10+ */
  background: linear-gradient(135deg, #93b483 0%, #93b483 50%, #b5cde3 50%, #b5cde3 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#93b483', endColorstr='#b5cde3', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.ms-cost.ms-2w {
  background: #beb9b2;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #edf2b0 50%, #edf2b0 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #beb9b2), color-stop(50%, #beb9b2), color-stop(50%, #edf2b0), color-stop(100%, #edf2b0));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #edf2b0 50%, #edf2b0 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #edf2b0 50%, #edf2b0 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #edf2b0 50%, #edf2b0 100%);
  /* IE10+ */
  background: linear-gradient(135deg, #beb9b2 0%, #beb9b2 50%, #edf2b0 50%, #edf2b0 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#beb9b2', endColorstr='#edf2b0', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.ms-cost.ms-2u {
  background: #beb9b2;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #b5cde3 50%, #b5cde3 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #beb9b2), color-stop(50%, #beb9b2), color-stop(50%, #b5cde3), color-stop(100%, #b5cde3));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #b5cde3 50%, #b5cde3 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #b5cde3 50%, #b5cde3 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #b5cde3 50%, #b5cde3 100%);
  /* IE10+ */
  background: linear-gradient(135deg, #beb9b2 0%, #beb9b2 50%, #b5cde3 50%, #b5cde3 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#beb9b2', endColorstr='#b5cde3', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.ms-cost.ms-2b {
  background: #beb9b2;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #9c9188 50%, #9c9188 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #beb9b2), color-stop(50%, #beb9b2), color-stop(50%, #9c9188), color-stop(100%, #9c9188));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #9c9188 50%, #9c9188 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #9c9188 50%, #9c9188 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #9c9188 50%, #9c9188 100%);
  /* IE10+ */
  background: linear-gradient(135deg, #beb9b2 0%, #beb9b2 50%, #9c9188 50%, #9c9188 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#beb9b2', endColorstr='#9c9188', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.ms-cost.ms-2r {
  background: #beb9b2;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #db8664 50%, #db8664 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #beb9b2), color-stop(50%, #beb9b2), color-stop(50%, #db8664), color-stop(100%, #db8664));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #db8664 50%, #db8664 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #db8664 50%, #db8664 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #db8664 50%, #db8664 100%);
  /* IE10+ */
  background: linear-gradient(135deg, #beb9b2 0%, #beb9b2 50%, #db8664 50%, #db8664 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#beb9b2', endColorstr='#db8664', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.ms-cost.ms-2g {
  background: #beb9b2;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #93b483 50%, #93b483 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #beb9b2), color-stop(50%, #beb9b2), color-stop(50%, #93b483), color-stop(100%, #93b483));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #93b483 50%, #93b483 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #93b483 50%, #93b483 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #93b483 50%, #93b483 100%);
  /* IE10+ */
  background: linear-gradient(135deg, #beb9b2 0%, #beb9b2 50%, #93b483 50%, #93b483 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#beb9b2', endColorstr='#93b483', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.ms-cost.ms-p:before,
.ms-cost.ms-pw:before,
.ms-cost.ms-pu:before,
.ms-cost.ms-pb:before,
.ms-cost.ms-pr:before,
.ms-cost.ms-pg:before {
  display: inline-block;
  -moz-transform: scale(1.2, 1.2);
  -webkit-transform: scale(1.2, 1.2);
  transform: scale(1.2, 1.2);
}
.ms-cost.ms-tap-alt:before {
  display: inline-block;
  -moz-transform: scale(1.2, 1.2);
  -webkit-transform: scale(1.2, 1.2);
  transform: scale(1.2, 1.2);
  padding-left: .06em;
  padding-bottom: 0.10em;
}
.ms-cost.ms-s:before {
  color: #fff;
  -webkit-text-stroke: 2px #fff;
  font-size: 0.85em;
  top: -0.05em;
  position: relative;
  display: inline-block;
}
.ms-cost.ms-s:after {
  content: "\e619";
  position: absolute;
  color: #333;
  margin-left: -0.9em;
  font-size: 1.1em;
}
.ms-cost.ms-untap {
  background-color: #111;
  color: #fff;
}
.ms-cost.ms-shadow {
  box-shadow: -0.06em 0.07em 0 #111111, 0 0.06em 0 #111111;
}
.ms-cost.ms-shadow.ms-untap {
  box-shadow: -0.06em 0.07em 0 #ffffff, 0 0.06em 0 #ffffff;
}
/**
 * Split costs */
.ms-split {
  position: relative;
  width: 1.3em;
  height: 1.3em;
}
.ms-split:before,
.ms-split:after {
  font-size: 0.55em !important;
  position: absolute;
}
.ms-split:before {
  top: -0.38em;
  left: 0.28em;
}
.ms-split:after {
  top: 0.5em;
  left: 1.0em;
}
/**
 * Planesalker symbols */
.ms-loyalty-up,
.ms-loyalty-down,
.ms-loyalty-zero,
.ms-loyalty-start {
  color: #111;
  font-size: 1.5em;
  position: relative;
  text-align: center;
}
.ms-loyalty-start {
  font-size: 2.0em;
}
.ms-loyalty-0:after,
.ms-loyalty-1:after,
.ms-loyalty-2:after,
.ms-loyalty-3:after,
.ms-loyalty-4:after,
.ms-loyalty-5:after,
.ms-loyalty-6:after,
.ms-loyalty-7:after,
.ms-loyalty-8:after,
.ms-loyalty-9:after,
.ms-loyalty-10:after,
.ms-loyalty-x:after {
  color: #fff;
  display: inline-block;
  font-size: 0.5em;
  font-family: 'MPlantin, Garamond, Palatino, ' Times New Roman ', Times, serif';
  position: absolute;
  left: 0;
  line-height: 1.75em;
  width: 100%;
  text-align: center;
  -webkit-padding-before: 0.15em;
}
.ms-loyalty-0:after {
  content: "0";
}
.ms-loyalty-up.ms-loyalty-1:after {
  content: "+1";
}
.ms-loyalty-up.ms-loyalty-2:after {
  content: "+2";
}
.ms-loyalty-up.ms-loyalty-3:after {
  content: "+3";
}
.ms-loyalty-up.ms-loyalty-4:after {
  content: "+4";
}
.ms-loyalty-up.ms-loyalty-5:after {
  content: "+5";
}
.ms-loyalty-up.ms-loyalty-6:after {
  content: "+6";
}
.ms-loyalty-up.ms-loyalty-7:after {
  content: "+7";
}
.ms-loyalty-up.ms-loyalty-8:after {
  content: "+8";
}
.ms-loyalty-up.ms-loyalty-9:after {
  content: "+9";
}
.ms-loyalty-up.ms-loyalty-10:after {
  content: "+10";
}
.ms-loyalty-up.ms-loyalty-x:after {
  content: "+X";
}
.ms-loyalty-start.ms-loyalty-1:after {
  content: "1";
}
.ms-loyalty-start.ms-loyalty-2:after {
  content: "2";
}
.ms-loyalty-start.ms-loyalty-3:after {
  content: "3";
}
.ms-loyalty-start.ms-loyalty-4:after {
  content: "4";
}
.ms-loyalty-start.ms-loyalty-5:after {
  content: "5";
}
.ms-loyalty-start.ms-loyalty-6:after {
  content: "6";
}
.ms-loyalty-start.ms-loyalty-7:after {
  content: "7";
}
.ms-loyalty-start.ms-loyalty-8:after {
  content: "8";
}
.ms-loyalty-start.ms-loyalty-9:after {
  content: "9";
}
.ms-loyalty-start.ms-loyalty-10:after {
  content: "10";
}
.ms-loyalty-start.ms-loyalty-x:after {
  content: "X";
}
.ms-loyalty-down:after {
  line-height: 1.6em;
}
.ms-loyalty-down.ms-loyalty-1:after {
  content: "-1";
}
.ms-loyalty-down.ms-loyalty-2:after {
  content: "-2";
}
.ms-loyalty-down.ms-loyalty-3:after {
  content: "-3";
}
.ms-loyalty-down.ms-loyalty-4:after {
  content: "-4";
}
.ms-loyalty-down.ms-loyalty-5:after {
  content: "-5";
}
.ms-loyalty-down.ms-loyalty-6:after {
  content: "-6";
}
.ms-loyalty-down.ms-loyalty-7:after {
  content: "-7";
}
.ms-loyalty-down.ms-loyalty-8:after {
  content: "-8";
}
.ms-loyalty-down.ms-loyalty-9:after {
  content: "-9";
}
.ms-loyalty-down.ms-loyalty-10:after {
  content: "-10";
}
.ms-loyalty-down.ms-loyalty-x:after {
  content: "-X";
}
/**
 * Larger sizes */
.ms-2x {
  font-size: 1.75em;
}
.ms-3x {
  font-size: 2.25em;
}
.ms-4x {
  font-size: 3.0em;
}
.ms-5x {
  font-size: 3.75em;
}
.ms-6x {
  font-size: 4.5em;
}
/**
 * Mana */
.ms-w:before {
  content: "\e600";
}
.ms-u:before {
  content: "\e601";
}
.ms-b:before {
  content: "\e602";
}
.ms-r:before {
  content: "\e603";
}
.ms-g:before {
  content: "\e604";
}
.ms-0:before {
  content: "\e605";
}
.ms-1:before {
  content: "\e606";
}
.ms-2:before {
  content: "\e607";
}
.ms-3:before {
  content: "\e608";
}
.ms-4:before {
  content: "\e609";
}
.ms-5:before {
  content: "\e60a";
}
.ms-6:before {
  content: "\e60b";
}
.ms-7:before {
  content: "\e60c";
}
.ms-8:before {
  content: "\e60d";
}
.ms-9:before {
  content: "\e60e";
}
.ms-10:before {
  content: "\e60f";
}
.ms-11:before {
  content: "\e610";
}
.ms-12:before {
  content: "\e611";
}
.ms-13:before {
  content: "\e612";
}
.ms-14:before {
  content: "\e613";
}
.ms-15:before {
  content: "\e614";
}
.ms-x:before {
  content: "\e615";
}
.ms-y:before {
  content: "\e616";
}
.ms-z:before {
  content: "\e617";
}
.ms-p:before,
.ms-pw:before,
.ms-pu:before,
.ms-pb:before,
.ms-pr:before,
.ms-pg:before {
  content: "\e618";
}
.ms-s:before {
  content: "\e619";
}
/**
 * Tap/roll symbols */
.ms-tap:before {
  content: "\e61a";
}
.ms-untap:before {
  content: "\e61b";
}
.ms-tap-alt:before {
  content: "\e61c";
}
.ms-chaos:before {
  content: "\e61d";
}
/**
 * Card types */
.ms-artifact:before {
  content: "\e61e";
}
.ms-creature:before {
  content: "\e61f";
}
.ms-enchantment:before {
  content: "\e620";
}
.ms-instant:before {
  content: "\e621";
}
.ms-land:before {
  content: "\e622";
}
.ms-planeswalker:before {
  content: "\e623";
}
.ms-sorcery:before {
  content: "\e624";
}
/**
 * Split symbols */
.ms-wu:before,
.ms-wb:before,
.ms-rw:after,
.ms-gw:after,
.ms-2w:after {
  content: "\e600";
}
.ms-ub:before,
.ms-ur:before,
.ms-wu:after,
.ms-gu:after,
.ms-2u:after {
  content: "\e601";
}
.ms-br:before,
.ms-bg:before,
.ms-wb:after,
.ms-ub:after,
.ms-2b:after {
  content: "\e602";
}
.ms-rw:before,
.ms-rg:before,
.ms-ur:after,
.ms-br:after,
.ms-2r:after {
  content: "\e603";
}
.ms-gw:before,
.ms-gu:before,
.ms-bg:after,
.ms-rg:after,
.ms-2g:after {
  content: "\e604";
}
.ms-2w:before,
.ms-2u:before,
.ms-2b:before,
.ms-2r:before,
.ms-2g:before {
  content: "\e607";
}
/**
 * Planeswalker symbols */
.ms-loyalty-up:before {
  content: "\e627";
}
.ms-loyalty-down:before {
  content: "\e625";
}
.ms-loyalty-zero:before {
  content: "\e626";
}
.ms-loyalty-start:before {
  content: "\e628";
}