Normalise caticons

* Use smaller badges where appropriate
* Redice padding for cats_col
* Use larger caticon for the details pages
* Centre cat icon div within cats_col
* Keep the column as tight as possible by setting a low width

static/styles/sugoi/style.css

@@ -5,18 +5,38 @@
 }
 
 /* We're going to opt for the category icon method for now, tags_* is also available */
-.cats_album { width: 48px; height: 48px; background: url('/static/common/caticons/album.png') no-repeat center center/contain; }
-.cats_single { width: 48px; height: 48px; background: url('/static/common/caticons/single.png') no-repeat center center/contain; }
-.cats_ep { width: 48px; height: 48px; background: url('/static/common/caticons/ep.png') no-repeat center center/contain; }
-.cats_bluray { width: 48px; height: 48px; background: url('/static/common/caticons/bluray.png') no-repeat center center/contain; }
-.cats_dvd { width: 48px; height: 48px; background: url('/static/common/caticons/dvd.png') no-repeat center center/contain; }
-.cats_tvmusic { width: 48px; height: 48px; background: url('/static/common/caticons/tvmusic.png') no-repeat center center/contain; }
-.cats_tvvariety { width: 48px; height: 48px; background: url('/static/common/caticons/tvvariety.png') no-repeat center center/contain; }
-.cats_tvdrama { width: 48px; height: 48px; background: url('/static/common/caticons/tvdrama.png') no-repeat center center/contain; }
-.cats_musicperformance { width: 48px; height: 48px; background: url('/static/common/caticons/musicperformance.png') no-repeat center center/contain; }
-.cats_pv { width: 48px; height: 48px; background: url('/static/common/caticons/pv.png') no-repeat center center/contain; }
-.cats_pictures { width: 48px; height: 48px; background: url('/static/common/caticons/pictures.png') no-repeat center center/contain; }
-.cats_misc { width: 48px; height: 48px; background: url('/static/common/caticons/misc.png') no-repeat center center/contain; }
+
+/* margin: 0 auto ensures the caticons are always centered so the layout looks more ordered */
+.cats_album { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/album.png') no-repeat center center/contain; }
+.cats_single { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/single.png') no-repeat center center/contain; }
+.cats_ep { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/ep.png') no-repeat center center/contain; }
+.cats_bluray { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/bluray.png') no-repeat center center/contain; }
+.cats_dvd { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/dvd.png') no-repeat center center/contain; }
+.cats_tvmusic { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/tvmusic.png') no-repeat center center/contain; }
+.cats_tvvariety { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/tvvariety.png') no-repeat center center/contain; }
+.cats_tvdrama { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/tvdrama.png') no-repeat center center/contain; }
+.cats_musicperformance { margin: 0 auto; width: 48px; height: 48pxx; background: url('/static/common/caticons/musicperformance.png') no-repeat center center/contain; }
+.cats_pv { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/pv.png') no-repeat center center/contain; }
+.cats_pictures { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/pictures.png') no-repeat center center/contain; }
+.cats_misc { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/misc.png') no-repeat center center/contain; }
+
+.cats_col .cats_album { width: 42px; height: 42px; }
+.cats_col .cats_single { width: 42px; height: 42px; }
+.cats_col .cats_ep { width: 42px; height: 42px; }
+.cats_col .cats_bluray { width: 38px; height: 38px; }
+.cats_col .cats_dvd { width: 38px; height: 38px; }
+.cats_col .cats_tvmusic { width: 32px; height: 32px; }
+.cats_col .cats_tvvariety { width: 32px; height: 32px; }
+.cats_col .cats_tvdrama { width: 32px; height: 32px; }
+.cats_col .cats_musicperformance { width: 32px; height: 32px; }
+.cats_col .cats_pv { width: 32px; height: 32px; }
+.cats_col .cats_pictures { width: 32px; height: 32px; }
+.cats_col .cats_misc { width: 38px; height: 38px; }
+
+.cats_col {
+  padding: 3px;
+  width: 32px;  /* Ensures that the column is always as tight as possible */
+}
 
 /* Global */
 * {