scrap.tf avatar hat system

	This is a raster hat template. It is the same size as the avatar, but shifted up and to the left by 25% of the height/width of the avatar.
	This is the raster hat template again, just to show what it looks like on its own. I made a vector template in Illustrator, too, but it's just a circle where the avatar would go, so it doesn't look as fancy.
		2016 Love Hat It's a love hat.
		2016 Hate Hat Best hat name.
		2015 Santa hat, level 1 Notice the subtle drop-shadow on the hat to make it pop out against even white backgrounds.
		2015 Santa hat, level 2
		2015 Santa hat, level 3 Is it Australium? Is it just soaked in Jarate? The world may never know.
		Simple dunce hat used for testing :v

Some notes:

• In the future, perhaps avatar hats can be more of a thing, allowing users to unlock avatar hats and choose which one to wear, kind of like Transmogs in Diablo III.
• Making vector art is hard for programmers.
• Illustrator is a pain in the ass.
• The reason why there's two of each hat is because I can't decide which version looks better.
  • In the left column, the hats have a drop shadow 6px to the left and 6px below the hat itself. This gives it a nice physicality, it makes it "pop" out from the page.
  • In the right column, the hats have a drop shadow 8px to the left and 8px above the hat itself. The shadow is also much less pronounced. This means the shadow is "cast" in the same direction that the hat is "away from the avatar", and, as such, it lines up better. This makes it look less like a shadow and more like a subtle glow. It still pops out from the page, but it's far more subtle and lacks the sense of depth of the other column, favoring a more "flat" look.
• After I toned both effects down significantly, it's harder to discern which is better (and, therefore, it's not a huge deal), but I think the left column looks better than the right column.
• That didn't look good when the hats were scaled down significantly, so I strengthened the shadow effect, and tightened the distances from 8px to 6px, which is what you now see above in the left column.
• Because CSS doesn't allow for percentages for the drop-shadow effect, the drop-shadow amounts are calculated server-side in PHP. The avatars here are 100px × 100px, so the values I get here can be easily turned into percentages.