/** * 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"; }