-.volumeStack {
- width: 28px;
- height: 70px;
- background-color: rgba(156,156,255,0.74);
- /* use negative margin to place stack over the mute button to its left. */
- margin: -70px 3px 28px -31px;
- overflow: hidden; /* crop it when sliding down, don't grow the control bar */
- position: relative; /* Trick to work around negative margin interfering with dragging the thumb. */
- padding-top: 6px;
- border-radius: 3px 3px 0 0;
+.muteButton[noAudio] {
+ background-image: url("chrome://global/skin/media/noAudio.png");
+}
+
+.muteButton[noAudio] + .volumeStack {
+ display: none;
+}
+
+.fullscreenButton {
+ background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0);
+}
+
+.fullscreenButton:hover {
+ background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 16, 16, 32, 0);
+}
+
+.fullscreenButton[fullscreened] {
+ background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 32, 16, 16);
+}
+
+.fullscreenButton[fullscreened]:hover {
+ background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 16, 32, 32, 16);