.item { display: inline-block; background: url('imgs/all_items.png') no-repeat top left; vertical-align: middle; width: 50px; height: 50px; margin: 5px; border-radius: 3px; }

#filters { margin-bottom: 30px; }
#filters h2 { margin-bottom: 0; }
.filter-line { margin-bottom: 10px; }
.filter { cursor: pointer; filter: grayscale(33%); border: 2px solid white; }
.filter.active { filter: none; border: 2px solid limegreen; }
.clear { cursor: pointer; text-decoration: underline; color: #B66; }


#rewards h2 { text-align: center; margin: 0.5em; }

.lesson_normal, .lesson_hard { margin-bottom: 20px; }
.lesson_normal { background-color: #33B; color: white; }
.lesson_hard { background-color: #669; color: white; }
.level { display: inline-block; width: 4em; vertical-align: middle; text-align: center; }
.mode { font-size: 0.8em; }

.reward { display: inline-block; margin-right: 15px; }
.lesson_normal.hidden, .lesson_hard.hidden, .reward.hidden { display: none; }

.pr { background-position-x: -0px; }
.gr { background-position-x: -50px; }
.en { background-position-x: -100px; }
.wr { background-position-x: -150px; }
.lu { background-position-x: -200px; }
.gl { background-position-x: -250px; }
.sl { background-position-x: -300px; }

.pr:not([data-value*="SR"])::after { content: "Pride"; color: black; font-size: 10px; position: relative; top: 32px; left: 12px; }
.gr:not([data-value*="SR"])::after { content: "Greed"; color: black; font-size: 10px; position: relative; top: 32px; left: 9px; }
.en:not([data-value*="SR"])::after { content: "Envy"; color: black; font-size: 10px; position: relative; top: 32px; left: 13px; }
.wr:not([data-value*="SR"])::after { content: "Wrath"; color: black; font-size: 10px; position: relative; top: 32px; left: 10px; }
.lu:not([data-value*="SR"])::after { content: "Lust"; color: black; font-size: 10px; position: relative; top: 32px; left: 14px; }
.gl:not([data-value*="SR"])::after { content: "Gluttony"; color: black; font-size: 10px; position: relative; top: 32px; left: 4px; }
.sl:not([data-value*="SR"])::after { content: "Sloth"; color: black; font-size: 10px; position: relative; top: 32px; left: 12px; }

.gem { background-position-y: -0px; }
.watch { background-position-y: -50px; }
.mug { background-position-y: -100px; }
.drink { background-position-y: -150px; }
.sunglasses { background-position-y: -200px; }
.skull { background-position-y: -250px; }
.handkerchief { background-position-y: -300px; }
.smartphone { background-position-y: -350px; }
.witchpot { background-position-y: -400px; }
.scissors { background-position-y: -450px; }
.notebook { background-position-y: -500px; }
.dumbbell { background-position-y: -550px; }
.clock { background-position-y: -600px; }
.megaphone { background-position-y: -650px; }
.lipstick { background-position-y: -700px; }
.headphones { background-position-y: -750px; }
.gamepad { background-position-y: -800px; }
.hat { background-position-y: -850px; }
.bear { background-position-y: -900px; }
.duck { background-position-y: -950px; }
.mask { background-position-y: -1000px; }
.brotherSR { background-position-y: -1050px; }
.brotherSSR { background-position-y: -1100px; }
.otherSR { background-position-y: -1150px; }
.otherSSR { background-position-y: -1200px; }