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

chrome/browser/resources/file_manager/css/file_manager.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.
  */
 
 /* Outer frame of the dialog. */
 body {
    -webkit-box-flex: 1;
    -webkit-box-orient: vertical;
    -webkit-transition: opacity 70ms linear;
    -webkit-user-select: none;
@@ skipping 44 matching lines @@
 button[disabled]:hover,
 input[type='button'][disabled]:hover,
 input[type='submit'][disabled]:hover {
   -webkit-box-shadow: none;
   background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
   border-color: #aaa;
   color: #888;
 }
 
 /* Drop opacity of selected rows to give a visual feedback on copy/cut
- * operation.*/
-.blink{
+ * operation. */
+.blink {
   opacity: 0.8;
 }
 
 .butter-bar {
   -webkit-box-align: end;
   -webkit-box-orient: horizontal;
   -webkit-transform: translate3d(0, 1px, 0);
+  -webkit-transition-duration: 300ms;
   -webkit-transition-property: opacity, -webkit-transform;
-  -webkit-transition-duration: 300ms;
   background-color: rgba(95, 95, 95, 0.17);
   color: #222;
   display: -webkit-box;
   padding-left: 1em;
   padding-right: 1em;
   padding-top: 2px;
   position: absolute;
   top: 0;
 }
 
@@ skipping 39 matching lines @@
 }
 
 .progress-bar {
   border: 1px solid #999;
   margin-top: 3px;
   padding: 1px;
   width: 320px;
 }
 
 .progress-track {
+  -webkit-animation-duration: 800ms;
+  -webkit-animation-iteration-count: infinite;
   -webkit-animation-name: bg;
-  -webkit-animation-duration: 0.8s;
-  -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
-  background-color:#ccc;
+  background-color: #ccc;
   background-image: -webkit-linear-gradient(315deg, transparent,
       transparent 33%, rgba(0,0,0,0.12) 33%, rgba(0,0,0,0.12) 66%,
       transparent 66%, transparent);
   background-position: 0 0;
   background-repeat: repeat-x;
   background-size: 16px 8px;
   height: 5px;
 }
 
 @-webkit-keyframes bg {
-  0% { background-position:0 0; }
-  100% { background-position:-16px 0; }
+  0% { background-position: 0 0; }
+  100% { background-position: -16px 0; }
 }
 
 /* The top title of the dialog. */
 .dialog-title {
   -webkit-box-sizing: border-box;
   -webkit-padding-start: 15px;
   background-image: -webkit-linear-gradient(top, #fff,#f6f6f6);

[SeRya, 2012/04/02 09:50:22]

space after comma

[Dan Beam, 2012/04/02 16:47:10]

Done.

-  border-bottom: 1px #d6d9e3 solid;
-  color: #42506c;
+  border-bottom: 1px rgb(214, 217, 227) solid;
+  color: rgb(66, 80, 108);
   font-size: 15px;
   font-weight: bold;
   height: 32px;
+  padding-bottom: 8px;
   padding-top: 8px;
-  padding-bottom: 8px;
 }
 
 /* Main part of the dialog between header and footer. */
 .dialog-container {
+  -webkit-box-align: stretch;
+  -webkit-box-flex: 1;
+  -webkit-box-orient: horizontal;
+  display: -webkit-box;
+  overflow: hidden;
   position: relative;
-  display: -webkit-box;
-  -webkit-box-orient: horizontal;
-  -webkit-box-align: stretch;
-  overflow: hidden;
-  -webkit-box-flex: 1;
 }
 
 /* List/grid and preview are inside this container. */
 .dialog-main {
+  -webkit-box-align: stretch;
   -webkit-box-flex: 1;
-  display:-webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-box-align: stretch;
+  display: -webkit-box;
 }
 
 /* Roots list at the left. */
 .dialog-sidebar {
+  -webkit-box-flex: 0;
+  -webkit-transition: margin-left 180ms ease;
+  background-color: #e6e6e6;
+  margin-left: -168px;
+  overflow: hidden;
   position: relative;
-  -webkit-box-flex: 0;
   width: 168px;
-  margin-left: -168px;
-  background-color: #e6e6e6;
-  -webkit-transition: margin-left 180ms ease;
-  overflow: hidden;
 }
 
 .dialog-container[sidebar] .dialog-sidebar {
   margin-left: 0;
 }
 
 /* Roots list at the left. */
 list.roots-list {
   border-right: 1px solid #d2d2d2;
 }
 
 list.roots-list > * {
+  background-color: #e6e6e6;
   border: none;
   border-radius: 0;
   height: 39px;
   margin: 0;
   padding: 0 5px;
-  background-color: #e6e6e6;
 }
 
 list.roots-list > [lead][selected],
 list.roots-list > [lead],
 list.roots-list > [selected],
 list.roots-list > [anchor] {
-  background-color: #ccdbf3;
+  background-color: rgb(204, 219, 243);
   background-image: none;
+  border-bottom: 1px solid rgb(195, 210, 233);
+  border-top: 1px solid rgb(195, 210, 233);
   height: 37px;
-  border-top: 1px solid #c3d2e9;
-  border-bottom: 1px solid #c3d2e9;
 }
 
 list.roots-list > [lead]:hover,
 list.roots-list > [lead][selected]:hover,
 list.roots-list > [selected]:hover,
 list.roots-list > [anchor]:hover {
+  background-color: rgb(193, 211, 236) !important;
+  border-bottom: 1px solid transparent !important;
+  border-top: 1px solid transparent !important;
   height: 37px !important;
-  background-color: #c1d3ec !important;
-  border-top: 1px solid transparent !important;
-  border-bottom: 1px solid transparent !important;
 }
 
-
-
 list.roots-list li.root-item {
+  -webkit-box-align: center;
   display: -webkit-box;
-  -webkit-box-align: center;
   padding-left: 11px;
 }
 
 li.root-item > * {
   display: block;
   margin-right: 5px;
 }
 
 li.root-item > .root-label {
   max-width: 90px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 li.root-item > .spacer {
   -webkit-box-flex: 1;
 }
 
 .root-label {
   -webkit-padding-start: 38px;
+  background-position: left center;
   background-repeat: no-repeat;
+}
+
+.breadcrumbs .root-label {
+  -webkit-padding-start: 34px;
   background-position: left center;
 }
 
-.breadcrumbs .root-label {
-  background-position: left center;
-  -webkit-padding-start: 34px;
-}
-
 .root-label[icon=downloads] {
   background-image: url('../images/downloads_28x28.png');
 }
 
 .breadcrumbs .root-label[icon=downloads] {
   background-image: url('../images/downloads_24x24.png');
 }
 
 .root-label[icon=gdata] {
   background-image: url('../images/gdata_28x28.png');
@@ skipping 20 matching lines @@
 .breadcrumbs .root-label[icon=removable] {
   background-image: url('../images/usb_source_24x24.png');
 }
 
 .dialog-container[sidebar] .breadcrumbs .root-label {
   -webkit-padding-start: 0;
   background-image: none;
 }
 
 div.root-eject {
-  opacity: 0.5;
-  cursor: pointer;
-  width: 20px;
-  height: 20px;
-  margin-right: 3px;
-  margin-bottom: 2px;
+  -webkit-transition: opacity 70ms linear;
   background-image: url('../images/eject.png');
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 10px 8px;
-  -webkit-transition: opacity 70ms linear;
+  cursor: pointer;
+  height: 20px;
+  margin-bottom: 2px;
+  margin-right: 3px;
+  opacity: 0.5;
+  width: 20px;
 }
 
 div.root-eject:hover {
   opacity: 1;
 }
 
 /* Breadcrumbs and things under the title but above the list view. */
 .dialog-header {
+  -webkit-box-align: center;
   -webkit-box-orient: horizontal;
-  -webkit-box-align: center;
+  -webkit-transition: all 180ms ease;
   display: -webkit-box;
+  margin-bottom: 7px;
   margin-right: 10px;
-  margin-bottom: 7px;
   margin-top: 5px;
-  -webkit-transition: all 180ms ease;
  }
 
 /* Container for the detail and thumbnail (not implemented yet) list views. */
 .dialog-container[sidebar] .dialog-header {
   margin-left: 0;
 }
 
 /* Close sidebar button. */
 div.close-sidebar {
+  background-color: white;
+  background-image: url('../images/close_sidebar.png');
+  background-position: center center;
+  background-repeat: no-repeat;
+  border: 1px solid #d2d2d2;
+  border-right: none;
   cursor: pointer;
+  display: none;
+  height: 26px;
   position: absolute;
   right: 0;
   top: 6px;
-  display: none;
+  width: 14px;
   z-index: 10;
-  background-color: white;
-  border: 1px solid #d2d2d2;
-  border-right: none;
-  width: 14px;
-  height: 26px;
-  background-image: url('../images/close_sidebar.png');
-  background-position: center center;
-  background-repeat: no-repeat;
 }
 
 div.close-sidebar:hover {
   background-color: rgba(240,240,240,1);
 }
 
 /* Open sidebar button. */
 div.open-sidebar {
-  cursor: pointer;
-  margin-right: 10px;
   background-color: white;
-  margin-top: 1px;
-  width: 15px;
-  height: 28px;
   background-image: url('../images/open_sidebar.png');
   background-position: center center;
   background-repeat: no-repeat;
+  cursor: pointer;
+  height: 28px;
+  margin-right: 10px;
+  margin-top: 1px;
+  width: 15px;
 }
 
 div.open-sidebar:hover {
   background-color: rgba(240,240,240,1);
 }
 
 .dialog-container[sidebar] div.open-sidebar {
   display: none;
 }
 
 .dialog-container[sidebar] div.close-sidebar {
   display: block;
 }
 
 /* Container for the detail and thumbnail list views. */
 .dialog-body {
+  -webkit-box-flex: 1;
   -webkit-box-orient: vertical;
-  -webkit-box-flex: 1;
+  -webkit-transition: all 180ms ease;
   border-top: 1px solid #d4d4d4;
   display: -webkit-box;
   overflow: hidden;
-  -webkit-transition: all 180ms ease;
 }
 
 .dialog-container[sidebar] .dialog-body {
+  -webkit-border-bottom-left-radius: 0;
   -webkit-border-top-left-radius: 0;
-  -webkit-border-bottom-left-radius: 0;
 }
 
 /* Container for the ok/cancel buttons. */
 .dialog-footer {
+  -webkit-box-align: center;
   -webkit-box-orient: horizontal;
-  -webkit-box-align: center;
   display: -webkit-box;
-  margin: 15px;
-  margin-top: 0;
+  margin: 0 15px 15px;

[SeRya, 2012/04/02 09:50:22]

"0 15px 15px 15px;" (one more 15px)?

[Dan Beam, 2012/04/02 16:47:10]

I can add a 4th value if you'd like, but 3 values are valid as well and
correspond to:

  margin: <top> <left & right> <bottom>;

 }
 
 .dialog-footer:not([progress]) .progress-bar,
 .dialog-footer:not([progress]) .preparing-label {
   display: none;
 }
 
 .dialog-footer[progress] .ok,
 .dialog-footer[progress] .filename-label,
 .dialog-footer[progress] .filename-input {
   display: none;
 }
 
 .dialog-footer .progress-bar {
+  -webkit-margin-end: 20px;
   -webkit-margin-start: 20px;
-  -webkit-margin-end: 20px;
 }
 
 /* The container for breadcrumb elements. */
 .breadcrumbs {
+  -webkit-box-align: center;
+  -webkit-box-flex: 1;
   -webkit-box-orient: horizontal;
-  -webkit-box-flex: 1;
   -webkit-margin-end: 5px;
   display: -webkit-box;
-  -webkit-box-align: center;
   line-height: 20px;
+  overflow: hidden;
   padding-top: 1px;
-  overflow: hidden;
 }
 
 .breadcrumbs > [collapsed]:before {
   content: '...';
 }
 
 .breadcrumbs > [collapsed] {
   width: 1em;
 }
 
 .dialog-container[sidebar] .breadcrumbs {
   margin-left: 10px;
 }
 
 /* A single directory name in the list of path breadcrumbs. */
 .breadcrumb-path {
-  color: #265692;
+  color: rgb(38, 86, 146);
   cursor: pointer;
+  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  overflow: hidden;
 }
 
 /* The final breadcrumb, representing the current directory. */
 .breadcrumb-last {
   color: black;
   cursor: default;
 }
 
 /* The > arrow between breadcrumbs. */
 
 .breadcrumbs .separator {
-  overflow: hidden;
-  width: 25px;
   background-image: url('../images/breadcrumb-separator.png');
   background-position: center center;
   background-repeat: no-repeat;
   height: 10px;
+  overflow: hidden;
+  width: 25px;
 }
 
 .dialog-header button {
   -webkit-border-radius: 0;
+  background-position: left top;
+  background-repeat: no-repeat;
   border: none;
   height: 28px;
   min-width: 0;
   padding: 0;
-  background-position: left top;
-  background-repeat: no-repeat;
 }
 
 /* button:hover and button[disabled]:hover rules must be override by placing
  * the following four rules after them.
  */
 button.detail-view {
   background-image: url('../images/icon_list_view_off.png');
+  border-right: 1px solid #9d9d9d;
   width: 29px;
-  border-right: 1px solid #9d9d9d;
 }
 
 button.thumbnail-view {
   background-image: url('../images/icon_thumb_view_off.png');
   width: 28px;
 }
 
 button.detail-view[disabled] {
   background-image: url('../images/icon_list_view_on.png');
 }
 
 button.thumbnail-view[disabled] {
   background-image: url('../images/icon_thumb_view_on.png');
 }
 
 .filelist-panel {
+  -webkit-box-flex: 1;
+  -webkit-box-orient: vertical;
   display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-box-flex: 1;
 }
 
 .list-container {
+  -webkit-box-flex: 1;
   display: -webkit-box;
-  -webkit-box-flex: 1;
   position: relative;
 }
 
 .spinner {
-  width: 22px;
+  background-image: url(../images/spinner.svg);
+  background-size: 100%;
   height: 22px;
-  position: absolute;
   left: 50%;
-  top: 50%;
   margin-left: -11px;
   margin-top: -11px;
-  background-image: url(../images/spinner.svg);
-  background-size: 100%;
   opacity: 0.5;
+  position: absolute;
+  top: 50%;
+  width: 22px;
 }
 
 .downloads-warning {
+  -webkit-box-align: center;
+  -webkit-box-orient: horizontal;
+  -webkit-transition: height 70ms linear;
+  background-color: #f0f0f0;
+  color: #666;
   display: -webkit-box;
-  -webkit-box-orient: horizontal;
+  font-size: 13px;
   height: 57px;
-  background-color: #f0f0f0;
-  font-size: 13px;
-  color: #666;
-  -webkit-box-align: center;
   overflow: hidden;
-  -webkit-transition: height 70ms linear;
 }
 
 .downloads-warning[hidden] {
   height: 0;
 }
 
 .downloads-warning img {
   display: -webkit-box;
   padding: 15px;
 }
 
 .downloads-warning div {
+  -webkit-box-flex: 1;
   display: -webkit-box;
-  -webkit-box-flex: 1;
 }
 
 /* The cr.ui.Grid representing the detailed file list. */
 .thumbnail-grid {
+  overflow-y: auto;
   width: 100%;
-  overflow-y: auto;
 }
 
 /* An item in the thumbnail view. */
 .thumbnail-item {
-  margin-top: 10px;
+  height: 145px;
   margin-left: 5px;
   margin-right: 5px;  
+  margin-top: 10px;
+  text-align: center;
   width: 120px;
-  height: 145px;
-  text-align: center;
 }
 
-.thumbnail-item > input[type="checkbox"] {
+.thumbnail-item > input[type='checkbox'] {
+  left: 0;
   position: absolute;
   top: 0;
-  left: 0;
 }
 
 /* When changing these properties please preserve these conditions:
    1. width == height (so that the rotated thumbnail does not look off-center)
    2. width % 8 == 0 (to minimize rounding errors in the centering code) */
 div.img-container {
+  height: 112px;
+  margin: 4px;
+  overflow: hidden;
   position: relative;
-  overflow: hidden;
-  margin: 4px;
   width: 112px;
-  height: 112px;
 }
 
 div.img-container > img {
+  -webkit-user-drag: none;
   position: absolute;
-  -webkit-user-drag: none;
 }
 
 .list-container list > *,
 .list-container grid > * {
   background-image: none;
   border-radius: 0;
   line-height: 30px;
 }
 
 .list-container list > [selected],
 .list-container grid > [selected] {
-  background-color: #cbdbf1;
-  border-color: #e0e9f7;
+  background-color: rgb(203, 219, 241);
+  border-color: rgb(224, 233, 247);
 }
 
 .list-container list > [selected]:hover,
 .list-container grid > [selected]:hover {
-  background-color: #c1d3ec;
+  background-color: rgb(193, 211, 236);
 }
 
 .list-container list > :hover,
 .list-container grid > :hover {
-  background-color: #f2f6fa;
-  border-color: #f2f6fa;
+  background-color: rgb(242, 246, 250);
+  border-color: rgb(242, 246, 250);
 }
 
 .table-row-cell .filename-label,
 .thumbnail-item .filename-label,
 /* Show ellipsis in cells. The name column has different structure and overrides
    this rule. */
 .table-row-cell > div {
+  display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  display: block;
 }
 
 /* Text box used for renaming in the detail list. */
 .table-row-cell input.rename {
+  -webkit-margin-start: -3px;
   line-height: 20px;
-  -webkit-margin-start: -3px;
 }
 
 /* Elements that need to be LTR even in an RTL context, but should align
  * left. Display size in Hebrew is such a case.
  */
 html[dir='rtl'] .align-end-weakrtl {
   direction: ltr;
   text-align: left;
 }
 
 input.rename {
   font: inherit;
+  line-height: 1;
   text-align: inherit;
-  line-height: 1;
 }
 
 .table-row-cell .filename-label,
 .table-row-cell input.rename {
   -webkit-box-flex: 1;
 }
 
 [renaming] > .filename-label {
   display: none;
 }
 
 /* Text box used for renaming in the thumbnail list. */
 .thumbnail-grid input.rename {
+  -webkit-box-sizing: border-box;
   -webkit-margin-start: -1px;
+  height: 20px;
   width: 114px;
-  height: 20px;
-  -webkit-box-sizing: border-box;
 }
 
 .thumbnail-grid li,
 .detail-table list li {
   -webkit-user-drag: element;
 }
 
 /* The cr.ui.Table representing the detailed file list. */
 .detail-table {
+  border: 0;
   width: 100%;
-  border: 0;
 }
 
 /* Bottom pane describing current selection. */
 .preview-panel {
+  -webkit-box-align: center;
   -webkit-box-orient: horizontal;
+  -webkit-transform: translate(0, 0);
+  background-color: #F0F0F0;
   display: -webkit-box;
-  -webkit-box-align: center;
   height: 61px;
-  background-color: #F0F0F0;
+  opacity: 1;
   padding: 0 14px;
   position: relative;
   z-index: 3;
-
-  opacity: 1;
-  -webkit-transform: translate(0, 0);
 }
 
 .preview-panel[visibility=hiding] {
   /* Using all seems to cause preview panel and checkbox flicking issue. */
+  -webkit-transform: translate(0, 5px);
   -webkit-transition: opacity 220ms ease;
-  -webkit-transform: translate(0, 5px);
    opacity: 0;
 }
 
 .preview-panel[visibility=hidden] {
   display: none;
   opacity: 0;
 }
 
 .preview-thumbnails {
+  -webkit-box-orient: horizontal;
   display: -webkit-box;
-  -webkit-box-orient: horizontal;
   padding-left: 39px;
 }
 
 .preview-thumbnails > div {
+  height: 45px;
+  margin: 0 0 0 -39px;  /* Show 7 pixels of the overlapped image */
+  position: relative;
   width: 45px;
-  height: 45px;
-  position: relative;
-  margin: 0 0 0 -39px;  /* Show 7 pixels of the overlapped image */
 }
 
 .preview-thumbnails > div > div.img-container {
+  height: 45px;
   margin: 0;
   width: 45px;
-  height: 45px;
 }
 
 .preview-thumbnails > div {
-  border: 1px solid #fff;
   -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
   background-color: #F2F2F2;
+  border: 1px solid #fff;
 }
 
 .preview-thumbnails > div > div.popup {
+  -webkit-transform: translate(0, 3px) scale(0.95);
+  -webkit-transition: all 180ms ease-in;
+  -webkit-transition-delay: 300ms;
+  background-color: #F2F2F2;
   border: 2px solid #fff;
   box-shadow: 0 0 0 1px #F0F0F0,
               0 0 0 2px #D0D0D0,
               2px 2px 6px rgba(0, 0, 0, 0.2);
-  background-color: #F2F2F2;
   margin: 0;
-  z-index: 1;
+  opacity: 0;
   pointer-events: none;
   position: absolute;
-
-  -webkit-transition: all 180ms ease-in;
-  -webkit-transition-delay: 300ms;
-
-  -webkit-transform: translate(0, 3px) scale(0.95);
-  opacity: 0;
+  z-index: 1;
 }
 
 .preview-thumbnails > div:hover > div.popup {
   -webkit-transform: translate(0, 0) scale(1.0);
   opacity: 1;
   pointer-events: auto;
 }
 
 /* cr.ui.Table has a black focus border by default, which we don't want. */
 .detail-table:focus {
   border: 0;
 }
 
 /* Table splitter element */
 .table-header-splitter {
   -webkit-border-start: 1px #aaa solid;
   background-color: inherit;
   height: 27px;
 }
 
 /* Container for a table header. */
 .table-header {
   -webkit-box-sizing: border-box;
+  background-image: -webkit-linear-gradient(top, #f9f9f9, #e8e8e8);
   border-bottom: 1px #d2d2d2 solid;
-  background-image: -webkit-linear-gradient(top, #f9f9f9, #e8e8e8);
   height: 27px;
 }
 
 .table-header-sort-image-desc::after {
   -webkit-padding-start: 13px;
-  color: #888;
   background-image: url(../images/sort_desc.png);
   background-position: center center;
   background-repeat: no-repeat;
+  color: #888;
   content: '\00a0';
   position: relative;
-  top: 0px;
+  top: 0;
 }
 
 .table-header-sort-image-asc::after {
   -webkit-padding-start: 13px;
-  color: #888;
   background-image: url(../images/sort_asc.png);
   background-position: center center;
   background-repeat: no-repeat;
+  color: #888;
   content: '\00a0';
   position: relative;
-  top: 0px;
+  top: 0;
 }
 
 
 .preview-container .table-header {
   border-radius: 0 4px 0 0;
 }
 
 /* Text label in a table header. */
 .table-header-label {
   margin: 5px 10px 0 10px;
@@ skipping 17 matching lines @@
   position: relative;
   z-index: 2;
 }
 
 .file-checkbox,
 .pin {
   opacity: 0.3;
 }
 
 #select-all-checkbox {
+  -webkit-margin-end: 6px;
   -webkit-margin-start: 0;
-  -webkit-margin-end: 6px;
+  margin-bottom: 0;
   margin-top: 0;
-  margin-bottom: 0;
-
   /* 1px below text */
   position: relative;
   top: 1px;
 }
 
 li.thumbnail-item .file-checkbox {
   -webkit-margin-start: 7px;
   margin-top: 6px;
   opacity: 0;
 }
 
 li.table-row:hover .file-checkbox,
 li.table-row:hover .pin,
 li.thumbnail-item:hover .file-checkbox {
   opacity: 0.5;
 }
 
 .file-checkbox:hover,
 .pin:hover,
 li.table-row[selected] .file-checkbox,
 li.table-row[selected] .pin,
 li.table-row .pin:checked,
 li.thumbnail-item[selected] .file-checkbox {
   opacity: 1 !important;
 }
 
 li.table-row {
   line-height: 38px;
+  padding-bottom: 1px;
   padding-top: 1px;
-  padding-bottom: 1px;
 }
 
 /* The icon in the name column. */
 .detail-icon {
   background-image: url(../images/filetype_generic.png);
   background-position: center;
   background-repeat: no-repeat;
   height: 24px;
   width: 24px;
 }
 
 /* Icon for files in the detail list. */
-.detail-icon[iconType="archive"] {
+.detail-icon[iconType='archive'] {
   background-image: url(../images/filetype_archive.png);
 }
 
-.detail-icon[iconType="audio"] {
+.detail-icon[iconType='audio'] {
   background-image: url(../images/filetype_audio.png);
 }
 
-.detail-icon[iconType="device"] {
+.detail-icon[iconType='device'] {
   background-image: url(../images/filetype_device.png);
 }
 
-.detail-icon[iconType="doc"] {
+.detail-icon[iconType='doc'] {
   background-image: url(../images/filetype_doc.png);
 }
 
-.detail-icon[iconType="excel"] {
+.detail-icon[iconType='excel'] {
   background-image: url(../images/filetype_excel.png);
 }
 
-.detail-icon[iconType="folder"] {
+.detail-icon[iconType='folder'] {
   background-image: url(../images/filetype_folder.png);
 }
 
-.detail-icon[iconType="html"] {
+.detail-icon[iconType='html'] {
   background-image: url(../images/filetype_html.png);
 }
 
-.detail-icon[iconType="image"] {
+.detail-icon[iconType='image'] {
   background-image: url(../images/filetype_image.png);
 }
 
-.detail-icon[iconType="pdf"] {
+.detail-icon[iconType='pdf'] {
   background-image: url(../images/filetype_pdf.png);
 }
 
-.detail-icon[iconType="ppt"] {
+.detail-icon[iconType='ppt'] {
   background-image: url(../images/filetype_ppt.png);
 }
 
-.detail-icon[iconType="presentation"] {
+.detail-icon[iconType='presentation'] {
   background-image: url(../images/filetype_presentation.png);
 }
 
-.detail-icon[iconType="spreadsheet"] {
+.detail-icon[iconType='spreadsheet'] {
   background-image: url(../images/filetype_spreadsheet.png);
 }
 
-.detail-icon[iconType="text"] {
+.detail-icon[iconType='text'] {
   background-image: url(../images/filetype_text.png);
 }
 
-.detail-icon[iconType="unreadable"] {
+.detail-icon[iconType='unreadable'] {
   background-image: url(../images/filetype_unreadable_device.png);
 }
 
-.detail-icon[iconType="video"] {
+.detail-icon[iconType='video'] {
   background-image: url(../images/filetype_video.png);
 }
 
-.detail-icon[iconType="word"] {
+.detail-icon[iconType='word'] {
   background-image: url(../images/filetype_word.png);
 }
 
-.detail-icon[iconType="gdoc"] {
+.detail-icon[iconType='gdoc'] {
   background-image: url(../images/filetype_doc.png);
 }
 
-.detail-icon[iconType="gsheet"] {
+.detail-icon[iconType='gsheet'] {
   background-image: url(../images/filetype_spreadsheet.png);
 }
 
-.detail-icon[iconType="gslides"] {
+.detail-icon[iconType='gslides'] {
   background-image: url(../images/filetype_presentation.png);
 }
 
-.detail-icon[iconType="gdraw"] {
+.detail-icon[iconType='gdraw'] {
   background-image: url(../images/filetype_drawing.png);
 }
 
-.detail-icon[iconType="gtable"] {
+.detail-icon[iconType='gtable'] {
   background-image: url(../images/filetype_table.png);
 }
 
 /* The filename text in the preview pane. */
 .preview-filename {
   -webkit-margin-start: 8px;
   color: #666;
   font-weight: bold;
   margin-top: 10px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 /* The preview image. */
 .preview-img {
   margin-top: 10px;
   max-height: 300px;
   max-width: 190px;
 }
 
 .preview-img.thumbnail {
-  padding: 1px;
-  border: 1px #666 solid;
   -webkit-background-clip: content-box;
-
   /* Checkboard background to distinguish images with alpha channels, from
    * ../images/preview-background.png
    */
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOTQAADiYBwNzaZQAAAAd0SU1FB9sDExUSAaQ/5TMAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAQ0lEQVRYw+3VsQkAMQwDQOfJRt7r9/FQ3ilDuAiBUy84UKFVVX8M0t2TenxxOQAAAAAAAAB7+ueZaQIAAAAAAIC3AQceAAfi8EmRSgAAAABJRU5ErkJggg==);
+  border: 1px #666 solid;
+  padding: 1px;
 }
 
 .preview-img[src=''] {
   visibility: hidden;
 }
 
 /* Decoration when multiple images are selected. */
 .preview-img.multiple-selected {
   -webkit-box-shadow: 5px 5px 0 #aaa;
 }
 
 .metadata-item {
+  -webkit-box-flex: 1;
   -webkit-box-orient: horizontal;
-  -webkit-box-flex: 1;
+  -webkit-padding-start: 8px;
   display: -webkit-box;
-  -webkit-padding-start: 8px;
 }
 
 .metadata-label {
   -webkit-margin-end: 6px;
 }
 
 .preview-panel .spacer {
   -webkit-box-flex: 1;
 }
 
 .delete-button {
+  -webkit-margin-end: 8px;
   -webkit-margin-start: 8px;
-  -webkit-margin-end: 8px;
 }
 
 .task-item {
+  -webkit-box-align: center;
+  -webkit-box-orient: horizontal;
   display: -webkit-box;
-  -webkit-box-orient: horizontal;
-  -webkit-box-align: center;
+  padding: 5px 10px;
   text-align: left;
-  padding: 5px;
-  -webkit-padding-end: 10px;
-  -webkit-padding-start: 10px;
 }
 
 .task-item > div {
   overflow: hidden;
+  padding-right: 5px;
   text-overflow: ellipsis;
   white-space: nowrap;
-  padding-right: 5px;
 }
 
 .task-item > img {
   -webkit-margin-end: 5px;
 }
 
 /* The selection summary text at the bottom of the preview pane. */
 .preview-summary {
   -webkit-box-flex: 1;
-  color: #666666;
+  color: #666;
   overflow: hidden;
   padding: 5px;
   text-overflow: ellipsis;
+  vertical-align: middle;
   white-space: nowrap;
-  vertical-align: middle;
 }
 
 .dialog-footer .filename-label {
   -webkit-box-orient: horizontal;
   background-color: white;
   color: #666;
   display: -webkit-box;
   font-weight: bold;
+  padding-right: 4px;
   padding-top: 4px;
-  padding-right: 4px;
 }
 
 .detail-name > * {
+  -webkit-box-align: center;
   display: -webkit-box;
-  -webkit-box-align: center;
 }
 
 .filename-input {
+  -webkit-box-flex: 1;
   -webkit-box-orient: horizontal;
-  -webkit-box-flex: 1;
   display: -webkit-box;
 }
 
 /* A horizontal spring. */
 .horizontal-spacer {
+  -webkit-box-flex: 1;
   -webkit-box-orient: horizontal;
-  -webkit-box-flex: 1;
   display: -webkit-box;
 }
 
 /* A vertical spring. */
 .vertical-spacer {
+  -webkit-box-flex: 1;
   -webkit-box-orient: vertical;
-  -webkit-box-flex: 1;
   display: -webkit-box;
 }
 
 /* GData-specfic styles */
 
 [gdata][offline] .table-row-cell > :not(.gdata-present),
 [gdata][offline] .thumbnail-item > :not(.gdata-present) {
   color: #808080;
 }
 
 /* Overlay pane covering the entire file manager window (e.g. image editor)*/
 .overlay-pane {
+  border: none;
+  height: 100%;
+  left: 0;
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
-  height: 100%;
-  border: none;
   z-index: 100;
 }
 
 /* Invisible container for elements representing files while dragging. */
 #drag-image-container {
+  -webkit-box-orient: horizontal;
+  display: -webkit-box;
+  /* Only nodes in visible viewport will be rendered. */
+  left: 0;
+  padding-left: 100px;
   position: fixed;
-  /* Only nodes in visible viewport will be rendered. */
   top: 0;
-  left: 0;
-  display: -webkit-box;
-  -webkit-box-orient: horizontal;
-  padding-left: 100px;
   z-index: -1;  /* below .dialog-container */
 }
 
 #drag-image-container > * {
-  display: inline-block;
-  background-color: #CBDBF1;
-  border-color: #E0E9F7;
+  background-color: rgb(203, 219, 241);
   border: 1px solid white; /* transparent white */
   cursor: default;
+  display: inline-block;
   line-height: 20px;
   margin: 0 0 0 -100px;
   overflow: hidden;
   padding: 0 3px;
   position: relative; /* to allow overlap */
   text-overflow: ellipsis;
   white-space: pre;
 }
 
 #drag-image-container > li input[type=checkbox] {
   display: none;
 }
 
 menu.file-context-menu {
   z-index: 4;
 }
 
-input.common.pin[type="checkbox"]:checked::after {
-  position: relative;
+input.common.pin[type='checkbox']:checked::after {
   content: url('../images/pin.png');
   left: 3px;
+  position: relative;
   top: -4px;
 }
 
 div.offline {
   -webkit-box-pack: center;
   display: -webkit-box;
 }
 
 div.offline > * {
   -webkit-box-align: center;
   display: -webkit-box;
 }
 
 div.shade {
+  /* -webkit-transition: opacity 1000ms linear; */
+  background-color: rgba(255, 255, 255, 0.8);
+  bottom: 0;
+  left: 0;
+  opacity: 0;
   position: absolute;
-  left: 0;
   right: 0;
   top: 0;
-  bottom: 0;
-  background-color: rgba(255, 255, 255, 0.8);
-  opacity: 0;
-  webkit-transition: opacity 1000ms linear;
 }
 
 div.shade[fadein] {
   opacity: 1;
 }
 
 /* Message panel for unmounted GData */
 .dialog-container:not([unmounted]) .dialog-body > div.unmounted-panel,
 .dialog-container[unmounted] .dialog-body > div:not(.unmounted-panel) {
   display: none;
 }
 
 div.unmounted-panel {
+  padding-left: 50px;
   padding-top: 20px;
-  padding-left: 50px;
 }
 
 div.unmounted-panel > * {
   height: 22px;
   margin-bottom: 10px;
 }
 
 div.unmounted-panel > div {
-  display: -webkit-box;
+  -webkit-box-align: center;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: start;
-  -webkit-box-align: center;
+  display: -webkit-box;
 }
 
 .unmounted-panel > .gdata.loading,
 .unmounted-panel > .gdata.error {
   margin-left: -30px;  /* Room for the spinner.*/
   padding-left: 30px;
 }
 
 .unmounted-panel > .gdata.loading {
   background-image: url(../images/spinner.svg);
+  background-position: 0 center;
   background-repeat: no-repeat;
-  background-position: 0 center;
 }
 
 .unmounted-panel:not([loading]) > .gdata.loading,
 .unmounted-panel:not([error]) > .gdata.error,
 .unmounted-panel:not([retry]) > .gdata.retry,
 .unmounted-panel:not([retry]) > .gdata.learn-more {
   display: none;
 }