Merge 21480 - Adds the first run banner....

chrome/browser/resources/new_new_tab.css

 html {
   /* This is needed because of chrome://theme/css/new_tab.css */
   height: 100%;
 }
 
 body {
   margin: 0;
 }
 
 #main {
@@ skipping 63 matching lines @@
 
 .filler * {
   visibility: hidden;
 }
 
 .filler {
   pointer-events: none;
 }
 
 .filler .thumbnail-wrapper {
-  visibility: inherit;
-  border: 1px solid hsl(0, 0%, 90%);
-  background-color: hsl(0, 0%, 95%);
-  -webkit-border-radius: 2px;
-  display: block;
+  visibility: visible;
+  border: 3px solid hsl(213, 60%, 92%);
 }
 
 .filler .thumbnail {
-  visibility: visible;
-  border-color: hsl(0, 0%, 90%);
-  background-color: hsl(0, 0%, 95%);
+  visibility: inherit;
+  border: 1px solid white;
+  padding: 0;
+  background-color: hsl(213, 60%, 92%);
 }
 
 .edit-bar {
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: stretch;
   padding: 3px;
   padding-bottom: 0;
   height: 17px; /* 23 - 2 * 3 */
   cursor: move;
@@ skipping 190 matching lines @@
 
 .fade-in {
   -webkit-animation: 'fade-in' .15s;
 }
 
 /* Notification */
 
 #notification {
   position: relative;
   background-color: hsl(52, 100%, 80%);
-  -webkit-border-radius: 4px;
-  padding: 8px 16px;
+  -webkit-border-radius: 6px;
+  padding: 7px 15px;
   white-space: nowrap;
   display: table;
   margin: 10px auto;
   font-weight: bold;
   opacity: 0;
-  visibility: hidden;
-  -webkit-transition: opacity 1s;
+  -webkit-transition: opacity .15s;
+  pointer-events: none;
   z-index: 1;
 }
 
+#notification.first-run {
+  padding: 5px 13px; /* subtract the border witdh */
+  border: 2px solid hsl(213, 55%, 75%);
+  background-color: hsl(213, 63%, 93%);
+  -webkit-box-shadow: 2px 2px 3px hsla(0, 0%, 0%, .3);
+  font-weight: normal;
+}
+
 #notification > * {
   display: table-cell;
   max-width: 500px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-#notification:hover,
 #notification.show {
   opacity: 1;
-  visibility: inherit;
+  pointer-events: all;
+  -webkit-transition: opacity 1s;
 }
 
 #notification .link {
   -webkit-margin-start: 20px;
 }
 
 /* List mode */
 
 .list .thumbnail,
 .list .edit-bar {
@@ skipping 14 matching lines @@
 
 .list .title > div {
   color: rgb(6, 45, 117);
 }
 
 .section {
   background: white;
   -webkit-border-radius: 4px;
   white-space: nowrap;
   text-overflow: ellipsis;
-  border: 1px solid hsl(213, 65%, 92%);
+  border: 1px solid hsl(213, 63%, 93%);
   overflow: hidden;
   min-height: 151px; /* height of 5 items plus the header */
   vertical-align: top;
   margin: 0;
   margin-bottom: 10px;
 }
 
 .section > h2 {
   background-image: -webkit-gradient(linear, left top, left bottom,
       from(hsl(213, 87%, 67%)),
@@ skipping 332 matching lines @@
   }
 
   #t3, #t7 {
     left: 534px;
   }
 
   #t4, #t5, #t6, #t7 {
     top: 147px;
   }
 }