[WebUI] Fix rest of CSS style nits in misc. dirs so I can turn on CSS checker.

chrome/browser/resources/file_manager/css/gallery.css

-/*
- * Copyright (c) 2012 The Chromium Authors. All rights reserved.
+/* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
+ * found in the LICENSE file. */
 
 body {
-  margin: 0;
   -webkit-user-select: none;
   font-family: Open Sans,Droid Sans Fallback,sans-serif;
   font-size: 84%;
+  margin: 0;
 }
 
 .gallery {
   background: black;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
   position: absolute;
-  left: 0;
   right: 0;
   top: 0;
-  bottom: 0;
-  overflow: hidden;
 }
 
 /* Close button */
 .gallery > .close {
+  cursor: pointer;
   position: absolute;
   right: 5px;
   top: 5px;
-  cursor: pointer;
   z-index: 200;
 }
 
 /* The close icon is in a nested div so that its opacity can be manipulated
    independently from its parent (which can be dimmed when the crop frame
    overlaps it) */
 .gallery > .close div {
+  background-image: url(../images/gallery/close_x.png);
+  background-position: center center;
+  background-repeat: no-repeat;
+  height: 20px;
   opacity: 0;
   width: 20px;
-  height: 20px;
-  background-image: url(../images/gallery/close_x.png);
-  background-repeat: no-repeat;
-  background-position: center center;
 }
 
 .gallery[tools] > .close div {
   opacity: 0.5;
 }
 
 .gallery[tools] > .close div:hover {
+  background-color: rgba(81,81,81,1);
   opacity: 0.7;
-  background-color: rgba(81,81,81,1);
 }
 
 /* Image container and canvas elements */
 
 .gallery > .image-container {
-  position: absolute;
-  height: 100%;
-  width: 100%;
   background-color: rgba(0,0,0,1);
   cursor: none;   /* Only visible when the toolbar is active */
+  height: 100%;
+  position: absolute;
+  width: 100%;
 }
 
 .gallery[tools][locked] *,
 .gallery[tools][locked] .image-container[cursor] {
   cursor: wait;
 }
 
 .gallery[tools] .image-container[cursor='default'] {
   cursor: default;
 }
@@ skipping 20 matching lines @@
 .gallery[tools] .image-container[cursor='se-resize'] {
   cursor: url(../images/gallery/cursor_nwse.png) 18 18;
 }
 
 .gallery[tools] .image-container[cursor='ne-resize'],
 .gallery[tools] .image-container[cursor='sw-resize'] {
   cursor: url(../images/gallery/cursor_swne.png) 18 18;
 }
 
 .gallery > .image-container > .image {
-  position: absolute;
-  pointer-events: none;
-
+  /* Keep in sync with ImageView.ANIMATION_DURATION in image_view.js*/
+  -webkit-transition-duration: 180ms;
   -webkit-transition-property: -webkit-transform, opacity;
   -webkit-transition-timing-function: ease-in-out;
-
-  /* Keep in sync with ImageView.ANIMATION_DURATION in image_view.js*/
-  -webkit-transition-duration: 180ms;
+  pointer-events: none;
+  position: absolute;
 }
 
 .gallery > .image-container > .image[fade] {
   opacity: 0;
 }
 
 .gallery > .image-container > .image[fade='left'] {
   -webkit-transform: translate(-40px,0);
 }
 
 .gallery > .image-container > .image[fade='right'] {
   -webkit-transform: translate(40px,0);
 }
 
 /* Toolbar */
 
 .gallery > .toolbar {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: 55px;
-  display: -webkit-box;
+  -webkit-box-align: stretch;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: start;
-  -webkit-box-align: stretch;
+  -webkit-transform: translate(0, 0);
+  -webkit-transition-duration: 300ms;
+  -webkit-transition-property: webkit-transform, opacity;
+  -webkit-transition-timing-function: ease;
   background-color: rgba(18,18,18,0.75);
   border-top: 1px solid rgba(31,31,31,0.75);
-
+  bottom: 0;
+  display: -webkit-box;
+  height: 55px;
+  opacity: 0;
   pointer-events: none;
-  opacity: 0;
-  -webkit-transform: translate(0, 0);
-
-  -webkit-transition-property: webkit-transform, opacity;
-  -webkit-transition-duration: 300ms;
-  -webkit-transition-timing-function: ease;
+  position: absolute;
+  width: 100%;
 }
 
 .gallery[tools] > .toolbar {
+  -webkit-transform: translate(0, 0);
+  opacity: 1;
   pointer-events: auto;
-  opacity: 1;
-  -webkit-transform: translate(0, 0);
 }
 
 .gallery[tools][locked] > .toolbar {
   pointer-events: none;
 }
 
 .gallery .arrow-box {
-  position: absolute;
-  z-index: 100;
-  width: 100%;
+  -webkit-box-align: center;
+  -webkit-box-orient: horizontal;
+  -webkit-box-pack: center;
+  display: -webkit-box;
   height: 100%;
   pointer-events: none;
-  display: -webkit-box;
-  -webkit-box-orient: horizontal;
-  -webkit-box-align: center;
-  -webkit-box-pack: center;
+  position: absolute;
+  width: 100%;
+  z-index: 100;
 }
 
 .gallery .arrow-box .arrow {
   pointer-events: none;
 }
 
 .gallery .arrow-box .arrow-spacer {
   -webkit-box-flex: 1;
   pointer-events: none;
 }
 
 .gallery[tools] .arrow[active] {
+  cursor: pointer;
   pointer-events: auto;
-  cursor: pointer;
 }
 
 /* The arrow icons are in nested divs so that their opacity can be manipulated
-   independently from their parent (which can be dimmed when the crop frame
-   overlaps it) */
-.gallery .arrow div{
+ * independently from their parent (which can be dimmed when the crop frame
+ * overlaps it) */
+.gallery .arrow div {
+  background-position: center center;
+  background-repeat: no-repeat;
+  height: 193px;
+  opacity: 0;
   width: 105px;
-  height: 193px;
-  background-repeat: no-repeat;
-  background-position: center center;
-  opacity: 0;
 }
 
-.gallery[tools] .arrow[active] div{
+.gallery[tools] .arrow[active] div {
   opacity: 0.25;
 }
 
-.gallery[tools] .arrow[active] div:hover{
+.gallery[tools] .arrow[active] div:hover {
   opacity: 1;
 }
 
-.gallery .arrow.left div{
+.gallery .arrow.left div {
   background-image: url(../images/gallery/arrow_left.png);
 }
 
-.gallery .arrow.right div{
+.gallery .arrow.right div {
   background-image: url(../images/gallery/arrow_right.png);
 }
 
 /* Special behavior on mouse drag.
   Redundant .gallery attributes included to make the rules more specific */
 
 /* Everything but the image container should become mouse-transparent */
 .gallery[tools][editing][mousedrag] * {
   pointer-events: none;
 }
@@ skipping 26 matching lines @@
   z-index: 0;
 }
 
 .gallery .filename-spacer > .name,
 .gallery[renaming] .filename-spacer > input {
   opacity: 1;
   z-index: 1;
 }
 
 .gallery .filename-spacer > * {
+  background-color: transparent;
+  color: white;
   font-family: Open Sans,Droid Sans Fallback,sans-serif;
+  height: 21px;
   position: absolute;
-  background-color: transparent;
-  height: 21px;
   width: 260px;
-  color: white;
 }
 
 .gallery .filename-spacer > input,
 .gallery .filename-spacer > .name {
   border: none;
+  font-size: 120%;
+  left: 10px;
   outline: none;
-  font-size: 120%;
   overflow: hidden;
   text-overflow: ellipsis;
+  top: 5px;
   white-space: nowrap;
-  left: 10px;
-  top: 5px;
 }
 
 .gallery .filename-spacer > .name:hover {
   background-color: rgba(48, 48, 48, 1.0);
   cursor: pointer;
 }
 
 .gallery .filename-spacer > input:focus,
 .gallery .filename-spacer > input:focus:hover {
   background-color: white;
+  border-bottom: 1px solid white;
+  border-right: 1px solid white;
   color: black;
-  border-right: 1px solid white;
-  border-bottom: 1px solid white;
 }
 
 .gallery .filename-spacer > .options {
   left: 10px;
   top: 26px;
 }
 
 .gallery .filename-spacer .saved,
 .gallery .filename-spacer .keep-original {
+  -webkit-transition: all linear 120ms;
+  color: gray;
+  cursor: inherit;
   display: none;
-  color: gray;
   font-size: 90%;
-  -webkit-transition: all linear 120ms;
+  margin-right: 10px;
   pointer-events: none;
-  cursor: inherit;
-  margin-right: 10px;
 }
 
 .gallery .filename-spacer .saved[highlighted] {
+  -webkit-transform: scaleX(1.1) scaleY(1.1) rotate(0);
   color: white;
-  -webkit-transform: scaleX(1.1) scaleY(1.1) rotate(0deg);
 }
 
 .gallery .filename-spacer .keep-original[visible] {
+  color: white;
+  cursor: pointer;
   display: inline-block;
-  cursor: pointer;
-  color: white;
   pointer-events: auto;
 }
 
 .gallery .button-spacer {
+  -webkit-box-flex: 1;
   display: -webkit-box;
-  -webkit-box-flex: 1;
 }
 
 /* Thumbnails */
 
 .gallery .ribbon-spacer {
-  position: absolute;
-  left: 280px;
-  right: 280px;
-  height: 100%;
-  display: -webkit-box;
+  -webkit-box-align: center;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
-  -webkit-box-align: center;
+  display: -webkit-box;
+  height: 100%;
+  left: 280px;
+  position: absolute;
+  right: 280px;
 }
 
 .gallery .toolbar .ribbon {
-  overflow: hidden;
-  height: 100%;
   -webkit-box-flex: 0;
-  display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: start;
-
   -webkit-transition: opacity 180ms linear;
+  display: -webkit-box;
+  height: 100%;
+  overflow: hidden;
   z-index: 0;
 }
 
 .gallery[editing] .toolbar .ribbon {
   opacity: 0;
 }
 
 .gallery .ribbon-image {
-  display: -webkit-box;
+  -webkit-box-align: center;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
-  -webkit-box-align: center;
-  overflow: hidden;
+  -webkit-transition: margin-left 180ms linear;
+  border: 2px solid rgba(255,255,255,0); /* transparent white */
   cursor: pointer;
-  width: 47px;
+  display: -webkit-box;
   height: 47px;
   margin: 2px;
-  border: 2px solid rgba(255,255,255,0); /* transparent white */
-  -webkit-transition: margin-left 180ms linear;
+  overflow: hidden;
+  width: 47px;
 }
 
 .gallery .ribbon-image[selected] {
   border: 2px solid rgba(255,233,168,1);
 }
 
 .gallery .toolbar .ribbon.fade-left {
-  -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0, rgba(0,0,0,1) 40px);
+  -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0,
+                                                    rgba(0, 0, 0, 1) 40px);
 }
 
 .gallery .toolbar .ribbon.fade-right {
-  -webkit-mask-image: -webkit-linear-gradient(right, rgba(0,0,0,0) 0, rgba(0,0,0,1) 40px);
+  -webkit-mask-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0) 0,
+                                                     rgba(0, 0, 0, 1) 40px);
 }
 
 .gallery .toolbar .ribbon.fade-left.fade-right {
-  -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0, rgba(0,0,0,1) 40px, rgba(0,0,0,1) 230px, rgba(0,0,0,0) 100%);
+  -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0,
+                                                    rgba(0, 0, 0, 1) 40px,
+                                                    rgba(0, 0, 0, 1) 230px,
+                                                    rgba(0, 0, 0, 0) 100%);
 }
 
 .gallery .image-wrapper {
+  border: 1px solid rgba(0, 0, 0, 0);  /* transparent black */
+  height: 45px;
+  overflow: hidden;
   position: relative;
-  overflow: hidden;
   width: 45px;
-  height: 45px;
-  border: 1px solid rgba(0,0,0,0); /* transparent black */
 }
 
 /* Editor buttons */
 
 .gallery .toolbar .edit-bar {
-  position: absolute;
-  overflow: hidden;
-  pointer-events: none;
-  right: 0;
-  width: 100%;
-  opacity: 0;
-  height: 55px;
-  color: white;
-  display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
   -webkit-transition: opacity 180ms linear;
+  color: white;
+  display: -webkit-box;
+  height: 55px;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  width: 100%;
 }
 
 .gallery[editing] .toolbar .edit-bar {
   opacity: 1;
 }
 
 .gallery .edit-main {
+  -webkit-box-orient: horizontal;
+  -webkit-transition: opacity 250ms ease-in-out;
   display: -webkit-box;
-  -webkit-box-orient: horizontal;
   opacity: 0;
-  -webkit-transition: opacity 250ms ease-in-out;
 }
 
 .gallery[editing] .edit-main {
+  opacity: 1.0;
   pointer-events: auto;
-  opacity: 1.0;
 }
 
 .gallery > .toolbar .button {
+  -webkit-box-align: center;
   -webkit-box-flex: 0;
+  -webkit-box-orient: horizontal;
+  -webkit-box-pack: end;
+  background-position: 5px center;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  display: -webkit-box;
+  height: 40px;
+  margin: 8px 0 7px 3px;
+  opacity: 0.99;  /* Workaround for http://crosbug.com/21065 */
   padding: 0 10px 0 35px;
-  cursor: pointer;
-  margin: 8px 0 7px 3px;
-  height: 40px;
-
-  display: -webkit-box;
-  -webkit-box-orient: horizontal;
-  -webkit-box-align: center;
-  -webkit-box-pack: end;
-
-  background-repeat: no-repeat;
-  background-position: 5px center;
-
-  opacity: 0.99;  /* Workaround for http://crosbug.com/21065 */
 }
 
 .gallery > .toolbar .button {
   background-color: rgba(0,0,0,0);
   color: white;
 }
 
 .gallery > .toolbar .button:hover {
   background-color: rgba(31,31,31,1);
   color: white;
@@ skipping 47 matching lines @@
 
 .gallery > .toolbar .button.rotate_left[pressed] {
   background-image: url(../images/gallery/icon_rotate_left_selected.png);
 }
 
 .gallery > .toolbar .button.undo {
   background-image: url(../images/gallery/icon_undo.png);
 }
 
 .gallery > .toolbar .button.redo {
+  background-image: url(../images/gallery/icon_redo.png);
   position: absolute; /* Exclude from center-packing*/
-  background-image: url(../images/gallery/icon_redo.png);
 }
 
 .gallery > .toolbar .button[disabled] {
+  opacity: 0.5;
   pointer-events: none;
-  opacity: 0.5;
 }
 
 .gallery > .toolbar .button[hidden] {
   display: none;
 }
 
 .gallery > .toolbar > .button.edit {
+  background-image: url(../images/gallery/icon_edit.png);
   position: relative;
   z-index: 10;
-  background-image: url(../images/gallery/icon_edit.png);
 }
 
 .gallery > .toolbar > .button.edit[pressed] {
   background-image: url(../images/gallery/icon_edit_selected.png);
 }
 
 .gallery > .toolbar > .button.share {
+  background-image: url(../images/gallery/icon_share.png);
   position: relative;
   z-index: 10;
-  background-image: url(../images/gallery/icon_share.png);
 }
 
 .gallery > .toolbar > .button.share[pressed] {
   background-image: url(../images/gallery/icon_share_selected.png);
 }
 
 .gallery[error] > .toolbar .button.edit,
 .gallery[error] > .toolbar .button.share {
+  opacity: 0.7;
   pointer-events: none;
-  opacity: 0.7;
 }
 
 .gallery > .toolbar > .button:last-child {
   margin-right: 8px;
 }
 
 /* Secondary toolbar (mode-specific tools) */
 
 .gallery .edit-modal {
+  -webkit-box-orient: horizontal;
+  -webkit-box-pack: center;
+  bottom: 80px;
+  display: -webkit-box;
+  height: 40px;
+  pointer-events: none;
   position: absolute;
   width: 100%;
-  bottom: 80px;
-  height: 40px;
-  display: -webkit-box;
-  -webkit-box-orient: horizontal;
-  -webkit-box-pack: center;
-  pointer-events: none;
 }
 
 .gallery .edit-modal-wrapper[hidden] {
   display: none;
 }
 
 .gallery .edit-modal-wrapper {
-  color: white;
-  padding-right: 5px;
-  background-color: rgba(0, 0, 0, 0.75);
-  display: -webkit-box;
+  -webkit-box-align: center;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
-  -webkit-box-align: center;
+  background-color: rgba(0, 0, 0, 0.75);
+  color: white;
+  display: -webkit-box;
+  padding-right: 5px;
   pointer-events: auto;
 }
 
 .gallery .edit-modal .label {
+  -webkit-box-align: center;
+  -webkit-box-orient: horizontal;
+  background-position: 20px center;
+  background-repeat: no-repeat;
+  display: -webkit-box;
   height: 20px;
   padding-left: 50px;
   padding-right: 10px;
-
-  display: -webkit-box;
-  -webkit-box-orient: horizontal;
-  -webkit-box-align: center;
-
-  background-repeat: no-repeat;
-  background-position: 20px center;
 }
 
 .gallery .edit-modal .label.brightness {
   background-image: url(../images/gallery/icon_brightness.png);
 }
 
 .gallery .edit-modal .label.contrast {
+  background-image: url(../images/gallery/icon_contrast.png);
   margin-left: 15px;
-  background-image: url(../images/gallery/icon_contrast.png);
 }
 
 .gallery .edit-modal .range {
   -webkit-appearance: none !important;
   height: 3px;
+  margin-right: 10px;
   margin-top: 1px;
-  margin-right: 10px;
 }
 
 .gallery .edit-modal .range::-webkit-slider-thumb {
   -webkit-appearance: none;
+  background-image: url(../images/gallery/slider_thumb.png);
+  height: 29px;
   width: 16px;
-  height: 29px;
-  background-image: url(../images/gallery/slider_thumb.png);
 }
 
 /* Crop frame */
 
 .gallery .crop-overlay {
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  pointer-events: none;
   position: absolute;
-  pointer-events: none;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
 }
 
 .gallery .crop-overlay .shadow {
   background-color: rgba(0,0,0,0.65);
 }
 
 .gallery .crop-overlay .middle-box {
+  -webkit-box-flex: 1;
+  -webkit-box-orient: horizontal;
   display: -webkit-box;
-  -webkit-box-orient: horizontal;
-  -webkit-box-flex: 1;
 }
 
 .gallery .crop-frame {
+  -webkit-box-flex: 1;
+  display: -webkit-box;
   position: relative;
-  display: -webkit-box;
-  -webkit-box-flex: 1;
 }
 
-.gallery .crop-frame div{
+.gallery .crop-frame div {
+  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
+  background-color: rgba(255, 255, 255, 1);
   position: absolute;
-  background-color: rgba(255, 255, 255, 1);
-  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
 }
 
 .gallery .crop-frame .horizontal {
+  height: 1px;
   left: 7px;
   right: 7px;
-  height: 1px;
 }
 
 .gallery .crop-frame .horizontal.top {
   top: 0;
 }
 
 .gallery .crop-frame .horizontal.bottom {
   bottom: 0;
 }
 
 .gallery .crop-frame .vertical {
+  bottom: 7px;
   top: 7px;
-  bottom: 7px;
   width: 1px;
 }
 
 .gallery .crop-frame .vertical.left {
   left: 0;
 }
 
 .gallery .crop-frame .vertical.right {
   right: 0;
 }
 
 .gallery .crop-frame .corner {
   border-radius: 6px;
+  height: 13px;
   width: 13px;
-  height: 13px;
 }
 
 .gallery .crop-frame .corner.left {
   left: -6px;
 }
 
 .gallery .crop-frame .corner.right {
   right: -6px;
 }
 
 .gallery .crop-frame .corner.top {
   top: -6px;
 }
 
 .gallery .crop-frame .corner.bottom {
   bottom: -6px;
 }
 
 /* Prompt/notification panel */
 
 .gallery .prompt-wrapper {
-  position: absolute;
-  pointer-events: none;
-
-  width: 100%;
-  height: 100%;
-
-  display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
+  display: -webkit-box;
+  height: 100%;
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
 }
 
 .gallery .prompt-wrapper[pos=top] {
   -webkit-box-align: start;
 }
 
 .gallery .prompt-wrapper[pos=center] {
   -webkit-box-align: center;
 }
 
 .gallery .prompt-wrapper[pos=center] .close {
   display: none;
 }
 
 .gallery .prompt-wrapper > div.dimmable {
+  -webkit-transition: opacity 220ms ease;
   opacity: 1;
-  -webkit-transition: opacity 220ms ease;
 }
 
 .gallery .prompt {
+  -webkit-box-align: center;
+  -webkit-box-orient: horizontal;
+  -webkit-transition: all 180ms ease;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  display: -webkit-box;
   font-size: 120%;
   height: 40px;
+  opacity: 0;
   padding: 0 20px;
-  color: white;
-  background-color: rgba(0, 0, 0, 0.8);
-
-  display: -webkit-box;
-  -webkit-box-orient: horizontal;
-  -webkit-box-align: center;
-
   position: relative;
   top: 5px;
-  opacity: 0;
-  -webkit-transition: all 180ms ease;
 }
 
-.gallery .prompt[state='fadein'] {
+.gallery .prompt[state='fadein'],
+.gallery .prompt[state='fadeout'] {
+  opacity: 0;

[Tyler Breisacher (Chromium), 2012/04/03 18:09:36]

Doesn't this change the behavior? The rule

.gallery .prompt[state='fadein'] {
  opacity: 1
}

seems to be gone now.

[Dan Beam, 2012/04/03 19:42:01]

yes, good catch, I'll just undo as having a second rule is more chars than just
have 2 separate rules

   top: 0;
-  opacity: 1;
-}
-
-.gallery .prompt[state='fadeout'] {
-  top: 0;
-  opacity: 0;
 }
 
 .gallery .prompt-wrapper[pos=top] .prompt {
   padding-right: 10px;
 }
 
 .gallery .prompt .close {
-  pointer-events: auto;
-  width: 16px;
+  background-image: url(../images/gallery/butterbar_close_x.png);
+  background-position: center center;
+  background-repeat: no-repeat;
   height: 16px;
   margin-left: 16px;
   opacity: 0.65;
-  background-image: url(../images/gallery/butterbar_close_x.png);
-  background-repeat: no-repeat;
-  background-position: center center;
+  pointer-events: auto;
+  width: 16px;
 }
 
 .gallery .prompt .close:hover {
+  background-color: rgba(81,81,81,1);
   opacity: 1.0;
-  background-color: rgba(81,81,81,1);
 }
 
-
 .gallery .share-menu {
+  -webkit-border-radius: 1px;
+  -webkit-box-align: stretch;
+  -webkit-box-orient: vertical;
+  -webkit-box-pack: start;
+  -webkit-transition: opacity 500ms ease-in-out;
+  background-color: white;
+  border: 1px solid #7f7f7f;
+  bottom: 60px;
+  display: -webkit-box;
+  opacity: 1.0;
+  padding: 8px;
   position: absolute;
   right: 10px;
-  bottom: 60px;
-  background-color: white;
-  opacity: 1.0;
-  -webkit-transition: opacity 500ms ease-in-out;
-  padding: 8px;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-box-align: stretch;
-  -webkit-box-pack: start;
-  border: 1px solid #7f7f7f;
-  -webkit-border-radius: 1px;
 }
 
 .gallery .share-menu .bubble-point {
   background-image: url(../images/gallery/bubble_point.png);
   background-position: center top;
   background-repeat: no-repeat;
+  bottom: -8px;
+  height: 8px;
+  padding: 0;
   position: absolute;
+  right: 20px;
   width: 20px;
-  height: 8px;
-  bottom: -8px;
-  right: 20px;
-  padding: 0;
 }
 
 .gallery .share-menu[hidden] {
+  bottom: -100%;  /* offscreen so that 'dimmed' attribute does not show it*/
   opacity: 0.0;

[Tyler Breisacher (Chromium), 2012/04/03 18:09:36]

If we're going to get rid of "0px" and "0%" and "0em" and so on, should we also
get rid of 0.0? Don't change it now since it's not in the style guide, but we
could consider adding that.

[Dan Beam, 2012/04/03 19:42:01]

This was a bug in the checker - fixed and tests added.

-  bottom: -100%;  /* offscreen so that 'dimmed' attribute does not show it*/
   pointer-events: none;
 }
 
 .gallery .share-menu > div {
-  cursor: pointer;
-  background-color: rgba(0,0,0,0);
-  padding: 5px;
-  display: -webkit-box;
   -webkit-box-align: center;
   -webkit-box-pack: start;
+  background-color: rgba(0,0,0,0);
+  cursor: pointer;
+  display: -webkit-box;
+  padding: 5px;
 }
 
 .gallery .share-menu > div:hover {
   background-color: rgba(240,240,240,1);
 }
 
 .gallery .share-menu > div > img {
+  display: block;
   margin-right: 5px;
-  display: block;
 }
 
 /* Load spinner and error banner */
 
 .gallery .spinner {
-  width: 32px;
+  background-image: url(../images/gallery/spinner_white.svg);
+  background-size: 100%;
   height: 32px;
-  position: absolute;
   left: 50%;
-  top: 50%;
   margin-left: -16px;
   margin-top: -16px;
   opacity: 0.5;
-  background-size: 100%;
-  background-image: url(../images/gallery/spinner_white.svg);
+  position: absolute;
+  top: 50%;
+  width: 32px;
 }
 
 .gallery:not([spinner]) .spinner {
   display: none;
 }
 
 .gallery .error-banner {
+  -webkit-box-align: center;
+  -webkit-box-orient: horizontal;
+  -webkit-box-pack: center;
+  background-color: rgba(24, 24, 24, 1);
+  background-image: url(../images/media/error.png);
+  background-position: 25px center;
+  background-repeat: no-repeat;
   color: white;
-  background-color: rgba(24, 24, 24, 1);
+  display: -webkit-box;
   height: 54px;
   padding-left: 70px;
   padding-right: 35px;
-
-  display: -webkit-box;
-  -webkit-box-orient: horizontal;
-  -webkit-box-align: center;
-  -webkit-box-pack: center;
-
-  background-image: url(../images/media/error.png);
-  background-repeat: no-repeat;
-  background-position: 25px center;
 }
 
 .gallery:not([error]) .error-banner {
   display: none;
 }
 
 /* Video playback support. */
 
 .gallery video {
+  height: 100%;
   position: absolute;
   width: 100%;
-  height: 100%;
 }
 
 .gallery .video-controls-spacer {
-  position: absolute;
-  left: 0;
-  right: 0;
-  height: 30px;
+  -webkit-box-align: center;
+  -webkit-box-orient: horizontal;
+  -webkit-box-pack: center;
   bottom: 60px; /* Just above the toolbar */
   display: -webkit-box;
-  -webkit-box-orient: horizontal;
-  -webkit-box-align: center;
-  -webkit-box-pack: center;
+  height: 30px;
+  left: 0;
+  opacity: 0;
   pointer-events: none;
-  opacity: 0;
+  position: absolute;
+  right: 0;
 }
 
 .gallery[video] .video-controls-spacer {
   /* Animate opacity on 'tools' attribute toggle. */
   /* Change opacity immediately on 'video' attribute change. */
-  -webkit-transition: opacity 0.28s ease;
+  -webkit-transition: opacity 280ms ease;
 }
 
 .gallery[video][tools] .video-controls-spacer {
   opacity: 1;
 }
 
 .gallery .video-controls {
+  display: none;
   max-width: 800px;
-  display: none;
 }
 
 .gallery[video] .video-controls {
+  -webkit-box-flex: 1;
   display: -webkit-box;
-  -webkit-box-flex: 1;
 }
 
 .gallery[video] > .toolbar .button.edit,
 .gallery[video] > .toolbar .edit-bar {
   display: none;
 }