First set of changes for M7 NTP.

chrome/browser/resources/new_new_tab.css

 html {
   /* This is needed because of chrome://theme/css/new_tab.css */
   height: 100%;
 }
 
 body {
   margin: 0;
   height: 100%;
   overflow: auto;
   -webkit-user-select: none;
   cursor: default;
 }
 
 html[mode=app-launcher] {
   height: auto;
 }
 
 #main {
   -webkit-box-sizing: border-box;
   -webkit-transition: width .15s;
-  background: url(chrome://theme/IDR_PRODUCT_LOGO) no-repeat 0 6px;
   margin: 0 auto;
   min-height: 100%;
-  padding-bottom: 25px; /* Make room for the bottom positioned footer. */
+  padding:10px 0 20px;

[arv (Not doing code reviews), 2010/08/31 20:33:57]

whitespace

   position: relative;
   width: 920px;
 }
 
 html[dir=rtl] #main {
   background-position-x: 100%;
 }
 
 html[mode=app-launcher] #main {
   min-height: 50px;
@@ skipping 173 matching lines @@
   text-overflow: ellipsis;
   font-size: 100%;
   margin: 0 10px;
 }
 
 #recently-closed > span,
 #recently-closed .nav {
   max-width: none !important;
 }
 
+#most-visited {
+  margin-bottom: 20px;
+}
+
 .nav > a {
   /* no icon */
   padding: 0;
 }
 
 .nav > a:after {
   content: '\00bb'; /* raque gets flipped automatically in rtl */
   font-size: 115%;
   -webkit-padding-start: 2px;
 }
@@ skipping 10 matching lines @@
 #sync-status > * {
   display: inline-block;
   max-width: none;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 100%;
   margin: 0 10px;
 }
 
-#top-bar {
-  display: -webkit-box;
-  -webkit-box-align: center;
-  min-height: 56px;
-}
-
 .notification.hidden {
   opacity: 0;
   pointer-events: none;
 }
 
 #option-button {
   -webkit-appearance: none;
   background-color: transparent;
   width: 19px;
   height: 17px;
@@ skipping 69 matching lines @@
   padding: 0;
   margin: 0;
   -webkit-appearance: none;
   border: 0;
   background: none;
   cursor: pointer;
   text-decoration: underline;
   font-family: inherit;
 }
 
-#apps-section {
-  padding: 10px 0px;
-  border-top: 0;
-}
-
 #apps-launch-control {
   margin-top: 10px;
 }
 
 #apps-launch-control input {
   position: relative;
   top: 1px;
   margin-right: 0.2em;
   margin-left: 1em;
 }
 
 #debug > h2 {
   color: red;
 }
 
 #debug > div {
   margin: 0;
 }
 
 .section.disabled {
   display: none !important;
 }
 
-.section + :not(.hidden) {
-  border-top: 0;
-}
-
 .section > div {
   margin-bottom: 10px;
 }
 
 .section > h2 {
-  display: inline-block;
-  margin: 0;
-  font-size: 100%;
+  background-position: 0 center;
+  background-repeat: no-repeat;
+  -webkit-background-size: 100% 26px;
   cursor: pointer;
-  margin-top: 10px;
-  margin-bottom: 10px;
+  display: block;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  font-weight: normal;
+  margin:10px 0;
+  -webkit-margin-collapse: separate;
 }
 
-.section > h2:hover {
-  text-decoration: underline;
+.section > h2 > img {

[arv (Not doing code reviews), 2010/08/31 20:33:57]

RTL?

-webkit-margin-start: -13px;
-webkit-padding-end: 4px;

+  margin-left:-13px;
+  padding-right:4px;
+}
+
+.section:not(.hidden) > h2 > img {
+  -webkit-transform:rotate(90deg);

[arv (Not doing code reviews), 2010/08/31 20:33:57]

ws after :

Can you add a transition for this transform?

+}
+
+.section > h2 > span {
+  padding-right: 4px;

[arv (Not doing code reviews), 2010/08/31 20:33:57]

rtl

 }
 
 .section.hidden {
-  display: inline;
   border: 0;
 }
 
 .section.hidden > :not(h2) {
   display: none !important;
 }
 
-.section > h2 {
-  margin-right: 5px;
-}
-
 .section.hidden > h2 {
   margin-right: 0px;
 }
 
 .section.hidden:last-child {
   border-right: 0;
 }
 
-.section.hidden + .hidden > h2 {
-  padding-left: 5px;
-}
-
 .section:last-child {
   border-bottom: 0;
 }
 
 .section .nav {
   display: inline-block;
 }
 
-#apps {
-  margin-top: 10px;
-}
-
 .section > * {
   font-size: 12px;
 }
 
 /* small */
 
 @media (max-width: 940px) {
 
   #main {
     width: 692px;
   }
 
   #notification > * {
     max-width: 300px;
   }
 
   #notification > span > .blacklist-title {
     max-width: 15ex;
   }
 }
 
 /* Ensure we have at least 10px horizontal marging. */
 @media (max-width: 712px) {
   #main {
     margin-left: 10px;
     margin-right: 10px;
   }
 }
-
-#footer {
-  bottom: 0;
-  padding-bottom: 5px;
-  position: absolute;
-  text-align: end;
-  width: 100%;
-}
-
-#footer hr {
-  border: 0;
-  display: inline;
-  margin: 0;
-  padding: 0;
-}
-
-#footer hr:after {
-  content: "|";
-}