body { background: black; color: #ddd; margin: 20px; }
h1,h2 { color: #a00; text-align: center; }
h1 + h2 { margin-top: -1em; }

.meters { float: left; clear: left; }
.meters.evil { float: none; }

.meters ul { margin-left: 70px; }
.meters li.Evil {list-style: url(http://web.mit.edu/puzzle/www/07/images/Evil-text.png); }
.meters li.Envy {list-style: url(http://web.mit.edu/puzzle/www/07/images/Envy-text.png); }
.meters li.Greed {list-style: url(http://web.mit.edu/puzzle/www/07/images/Greed-text.png); }
.meters li.Gluttony { list-style: url(http://web.mit.edu/puzzle/www/07/images/Gluttony-text.png); }
.meters li.Lust {list-style: url(http://web.mit.edu/puzzle/www/07/images/Lust-text.png); }
.meters li.Pride {list-style: url(http://web.mit.edu/puzzle/www/07/images/Pride-text.png); }
.meters li.Sloth {list-style: url(http://web.mit.edu/puzzle/www/07/images/Sloth-text.png); }
.meters li.Wrath {list-style: url(http://web.mit.edu/puzzle/www/07/images/Wrath-text.png); }

.meters li > span { vertical-align: 30%; }

.meters img.emblem { vertical-align: -7px; }
.meters.evil img.emblem { vertical-align: -15px; } 

.meters .hellpuzzle img { padding-left: .5em; vertical-align: -2px; border: 0px; }

div.map {text-align: right; margin-bottom: 2em; }
.map img { border: 0px; }

.puzzle-links a { color: #faa; }

.puzzle-links ul li.solved { list-style: url(http://web.mit.edu/puzzle/www/07/images/solved-mark.png) disc; }
.puzzle-links ul li.unlocked { list-style: url(http://web.mit.edu/puzzle/www/07/images/unlocked-mark.png) disc; }
.puzzle-links ul li img { margin-left: 0.6em; height: 1.5em; margin-bottom: -.3em; }

.announce { 
  margin: 2em 20%; padding: 1em;
  border: 4px solid #300; background: #caa; color: #900; 
  font-size: 120%; 
  text-align: center;
}