made toolbar controls use a css sprite instead of multiple background images

css/styles.css

@@ -1,5 +1,5 @@
 
-.cb-control * {
+.cb-control {
 	font-family: helvetica, arial, sans-serif;
 	font-size: 12px;
 }
@@ -77,81 +77,65 @@
 	border-radius: 4px;
 }
 
+#cb-toolbar #cb-comic-info {
+	float: right;
+	line-height: 24px;
+}
+
 #cb-toolbar {
 	top: 0;
 	border-bottom: 2px solid #444;
 }
 
 #cb-toolbar button {
-	height: 32px;
-	width: 32px;
+	height: 24px;
+	width: 24px;
 	color: transparent;
 	border: none;
+	background-image: url("../img/iconic/sprite.png");
 	background-color: transparent;
 	background-repeat: no-repeat;
-	background-position: center;
 	margin: 0 16px;
 	cursor: pointer;
 }
 
-#cb-toolbar button.cb-close {
-	background-image: url(../img/iconic/white/x_28x28.png);
+#cb-toolbar button:hover,
+#cb-toolbar button:active,
+#cb-toolbar button.active {
+	background-position-x: -24px;
 }
 
-#cb-toolbar button.cb-close:hover,
-#cb-toolbar button.cb-close:active {
-	background-image: url(../img/iconic/green/x_28x28.png);
+#cb-toolbar button.disabled {
+	background-position-x: -48px;
+}
+
+#cb-toolbar button.cb-close {
+	background-position-y: -120px;
 }
 
 #cb-toolbar button.cb-color {
-	background-image: url(../img/iconic/white/cog_alt_32x32.png);
-}
-
-#cb-toolbar button.cb-color:hover,
-#cb-toolbar button.cb-color:active,
-#cb-toolbar button.cb-color.active {
-	background-image: url(../img/iconic/green/cog_alt_32x32.png);
+	background-position-y: 0;
 }
 
 #cb-toolbar button.cb-layout {
-	background-image: url(../img/iconic/white/document_fill_32x32.png);
-}
-
-#cb-toolbar button.cb-layout:hover,
-#cb-toolbar button.cb-layout:active {
-	background-image: url(../img/iconic/green/document_fill_32x32.png);
+	background-position-y: -24px;
 }
 
 #cb-toolbar button.cb-zoom-out {
-	background-image: url(../img/iconic/white/minus_32x8.png);
-}
-
-#cb-toolbar button.cb-zoom-out:hover,
-#cb-toolbar button.cb-zoom-out:active {
-	background-image: url(../img/iconic/green/minus_32x8.png);
+	background-position-y: -72px;
 }
 
 #cb-toolbar button.cb-zoom-in {
-	background-image: url(../img/iconic/white/plus_32x32.png);
-}
-
-#cb-toolbar button.cb-zoom-in:hover,
-#cb-toolbar button.cb-zoom-in:active {
-	background-image: url(../img/iconic/green/plus_32x32.png);
+	background-position-y: -96px;
 }
 
 #cb-toolbar button.cb-fit-width {
-	background-image: url(../img/iconic/white/fullscreen_32x32.png);
-}
-
-#cb-toolbar button.cb-fit-width:hover,
-#cb-toolbar button.cb-fit-width:active {
-	background-image: url(../img/iconic/green/fullscreen_32x32.png);
+	background-position-y: -48px;
 }
 
 #cb-color {
 	width: 246px;
-	top: 52px;
+	top: 44px;
 	left: 136px;
 	z-index: 1;
 	border: 2px solid #444;

lib/ComicBook.js

@@ -5,7 +5,6 @@
 
 	Fo sho:
 		- fix last page loading bug
-		- make control images sprites
 		- disable the strech button if in an auto zoom mode
 		- improve prev/next buttons, only show them when they can possibly work (not at beginning/end)
 		- check for html5 feature support where used: diveintohtml5.org/everything.html or www.modernizr.com