--- a/browser/metro/base/content/bindings/grid.xml
+++ b/browser/metro/base/content/bindings/grid.xml
@@ -359,21 +359,16 @@
       <field name="_rowCount">0</field>
       <property name="rowCount" readonly="true" onget="return this._rowCount;"/>
       <field name="_columnCount">0</field>
       <property name="columnCount" readonly="true" onget="return this._columnCount;"/>
       <property name="_containerSize">
         <getter><![CDATA[
             // return the rect that represents our bounding box
             let containerNode = this.hasAttribute("flex") ? this : this.parentNode;
-            // Autocomplete is a binding within a binding, so we have to step
-            // up an additional parentNode.
-            if (containerNode.id == "results-vbox" ||
-                containerNode.id == "searches-vbox")
-                containerNode = containerNode.parentNode;
             let rect = containerNode.getBoundingClientRect();
             // return falsy if the container has no height
             return rect.height ? {
               width: rect.width,
               height: rect.height
             } : null;
         ]]></getter>
       </property>

--- a/browser/metro/base/content/bindings/urlbar.xml
+++ b/browser/metro/base/content/bindings/urlbar.xml
@@ -484,27 +484,27 @@
           if (this.submitURL(event))
             return;
         ]]>
       </handler>
     </handlers>
   </binding>
 
   <binding id="urlbar-autocomplete">
-    <content>
-      <xul:vbox id="results-vbox" anonid="results-container" flex="1">
+    <content class="meta-section-container">
+      <xul:vbox class="meta-section" anonid="results-container" flex="1">
         <xul:label class="meta-section-title"
                    value="&autocompleteResultsHeader.label;"/>
-        <richgrid id="results-richgrid" anonid="results" rows="3" flex="1"
+        <richgrid anonid="results" rows="3" flex="1"
                   seltype="single" deferlayout="true"/>
       </xul:vbox>
 
-      <xul:vbox id="searches-vbox" flex="1">
+      <xul:vbox class="meta-section" flex="1">
         <xul:label anonid="searches-header" class="meta-section-title"/>
-        <richgrid id="searches-richgrid" anonid="searches" rows="3" flex="1"
+        <richgrid anonid="searches" rows="3" flex="1"
                   seltype="single" deferlayout="true"/>
       </xul:vbox>
     </content>
 
     <implementation implements="nsIAutoCompletePopup, nsIObserver">
       <constructor>
         <![CDATA[
           this.hidden = true;

--- a/browser/metro/base/content/browser.xul
+++ b/browser/metro/base/content/browser.xul
@@ -200,17 +200,17 @@
     </vbox>
 
     <html:div id="overlay-back" class="overlay-button"
               observes="cmd_back"></html:div>
     <html:div id="overlay-plus" class="overlay-button"
               observes="cmd_back"></html:div>
 
     <!-- Navigation bar -->
-    <appbar id="navbar" mousethrough="never" observes="bcast_windowState">
+    <appbar id="navbar" mousethrough="never">
       <hbox id="progress-container" layer="true">
         <hbox id="progress-control" />
       </hbox>
 
       <vbox id="toolbar-overlay" flex="1">
         <!-- Autocomplete -->
         <scrollbox flex="1">
           <hbox id="urlbar-autocomplete" observes="bcast_windowState"/>

--- a/browser/metro/base/content/startui/Start.xul
+++ b/browser/metro/base/content/startui/Start.xul
@@ -23,27 +23,30 @@
 %syncDTD;
 #endif
 ]>
 
 <!-- we're using html here so we get anonymous scrollbars on the browser element -->
 <html:html id="startui-page"
            xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
            xmlns:html="http://www.w3.org/1999/xhtml">
-  <html:body id="startui-body" onload="StartUI.init();" onunload="StartUI.uninit();">
+
+  <html:body id="startui-body" class="meta"
+             onload="StartUI.init();" onunload="StartUI.uninit();">
 
   <script type="application/javascript" src="chrome://browser/content/startui-scripts.js"/>
 
   <!-- mimic broadcasts in browser.xul. note browser.xul broadcasters do not propagate down here! -->
   <broadcasterset id="broadcasterset">
     <broadcaster id="bcast_preciseInput" input="precise"/>
     <broadcaster id="bcast_windowState" viewstate=""/>
   </broadcasterset>
 
-  <hbox id="start-container" observes="bcast_windowState">
+  <hbox id="start-container" class="meta-section-container"
+        observes="bcast_windowState">
   <!-- the start-container element has a max-height set in StartUI.js -->
       <vbox id="start-topsites" class="meta-section" expanded="true">
         <label class="meta-section-title wide-title" value="&topSitesHeader.label;"/>
         <html:div class="meta-section-title narrow-title" onclick="StartUI.onNarrowTitleClick('start-topsites')">
           &narrowTopSitesHeader.label;
         </html:div>
         <richgrid id="start-topsites-grid" observes="bcast_windowState" set-name="topSites" rows="3" columns="3" tiletype="thumbnail" seltype="multiple" flex="1"/>
       </vbox>

--- a/browser/metro/theme/browser.css
+++ b/browser/metro/theme/browser.css
@@ -182,81 +182,49 @@ documenttab[selected] .documenttab-selec
   list-style-image: url(chrome://browser/skin/images/newtab-default.png);
 
   /* Add some extra padding for a larger target */
   padding: 18px 25px 30px;
 }
 
 /* Start UI ----------------------------------------------------------------- */
 
+#content-viewport[startpage] browser {
+  padding-bottom: @toolbar_height@;
+}
+
 #startui-page {
   overflow-x: scroll;
   overflow-y: hidden;
   height: 100%;
 }
 
 #startui-body {
   height: 100%;
   margin: 0;
 }
 
 #start-container {
-  display: -moz-box;
-  min-width: @grid_double_column_width@;
   height: 100%;
-  width: 100%;
-}
-
-#start-topsites {
-  /* allot space for 3 tile columns for the topsites grid */
-  min-width: calc(3 * @grid_double_column_width@);
-}
-
-#content-viewport[startpage] browser {
-  padding-bottom: @toolbar_height@;
 }
 
 #urlbar-autocomplete[viewstate="snapped"],
-#urlbar-autocomplete[viewstate="portrait"],
-#start-container[viewstate="snapped"],
-#start-container[viewstate="portrait"] {
+#urlbar-autocomplete[viewstate="portrait"]{
   -moz-box-orient: vertical;
 }
 
-#start-container {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-#start-container[viewstate="snapped"] > .meta-section {
-  margin: 0 @metro_spacing_xnormal@;
-  min-width: @grid_double_column_width@;
-}
-
-#start-container[viewstate="snapped"] richgrid {
-  visibility: collapse;
+#start-container[viewstate="snapped"],
+#start-container[viewstate="portrait"] {
+  width: 100%;
+  max-width: 100%; /* ensure page doesn't expand, messing up @media rules */
+  height: auto;
 }
 
-#start-container[viewstate="snapped"] .meta-section[expanded] > richgrid {
-  visibility: visible;
-}
-
-#start-container[viewstate="snapped"] {
-  padding-top: 0;
-}
-
-#start-container[viewstate="snapped"] .meta-section-title,
-#start-container[viewstate="snapped"] richgrid {
-  margin-top: @metro_spacing_xnormal@;
-  padding: 0;
-}
-
-#start-container:not([viewstate="snapped"]) .meta-section-title.narrow-title,
-#start-container[viewstate="snapped"] .meta-section-title.wide-title {
-  display: none;
+#start-container[viewstate="snapped"] .meta-section:not([expanded]) > richgrid {
+  visibility: collapse;
 }
 
 /* Browser Content Areas ==================================================== */
 
 /* a 'margin-top' is applied dynamically in ContentAreaObserver */
 #browsers {
   background: white;
   transition-property: margin-top;
@@ -520,16 +488,32 @@ documenttab[selected] .documenttab-selec
 }
 
 /* Toolbar ----------------------------------------------------------------- */
 
 #toolbar-overlay {
   background-color: @panel_light_color@;
 }
 
+#urlbar-autocomplete {
+  padding-top: 0;
+}
+
+#toolbar {
+  padding: 0 @toolbar_horizontal_padding@;
+}
+
+#toolbar[viewstate="snapped"] {
+  padding: 0 @toolbar_snapped_horizontal_padding@;
+}
+
+#toolbar[viewstate="snapped"] > toolbarbutton {
+  margin: 0 @toolbar_snapped_horizontal_spacing@;
+}
+
 /* Combined back/forward buttons */
 
 #back-button {
   list-style-image: url(chrome://browser/skin/images/navbar-back.png);
   position: relative;
   z-index: 1;
   transition: opacity @forward_transition_length@ ease-out;
 }
@@ -542,17 +526,17 @@ documenttab[selected] .documenttab-selec
 #forward-button {
   list-style-image: url(chrome://browser/skin/images/navbar-forward.png);
   transition: margin @forward_transition_length@ ease-out,
               visibility @forward_transition_length@ ease-out,
               opacity @forward_transition_length@ ease-out;
 }
 
 #forward-button[disabled] {
-  -moz-margin-start: -@forward_spacing@;
+  -moz-margin-start: -@forward_spacing@ !important;
   visibility: hidden;
   opacity: 0;
   pointer-events: none;
 }
 
 @media (min-resolution: @min_res_140pc@) {
   #back-button {
     list-style-image: url(chrome://browser/skin/images/navbar-back@1.4x.png);
@@ -715,20 +699,16 @@ documenttab[selected] .documenttab-selec
 }
 
 #urlbar[editing] > #go-button,
 #urlbar:not([editing])[loading] > #stop-button,
 #urlbar:not([editing]):not([loading]) > #reload-button {
   visibility: visible;
 }
 
-#toolbar[viewstate="snapped"] > #urlbar ~ toolbarbutton {
-  visibility: collapse;
-}
-
 /* Contextual toolbar controls */
 
 #toolbar-context-autocomplete,
 #toolbar-context-page {
   transition-property: opacity, visibility;
   transition-duration: @forward_transition_length@;
   transition-timing-function: @metro_animation_easing@;
 }
@@ -831,30 +811,16 @@ documenttab[selected] .documenttab-selec
 }
 
 @media (min-resolution: @min_res_180pc@) {
   #panel-close-button {
     list-style-image: url(chrome://browser/skin/images/navbar-back@1.8x.png);
   }
 }
 
-#panel-view-switcher {
-  border: 0 none !important;
-  color: #000 !important;
-  background: transparent;
-  padding: 0;
-  font-size: @metro_font_xlarge@;
-  font-weight: 100;
-  margin: 0;
-}
-
-#panel-container[viewstate="snapped"] #panel-view-switcher {
-  font-size: @metro_font_large@;
-}
-
 #panel-items {
   padding-top: 20px;
   -moz-padding-start: 88px;
 }
 
 #panel-container[viewstate="snapped"] #panel-items {
   padding-left: 0px;
 }

--- a/browser/metro/theme/defines.inc
+++ b/browser/metro/theme/defines.inc
@@ -12,17 +12,19 @@
 
 %define border_color #BFC6CE
 %define selected_color #FF8000
 
 %define urlbar_border_color #BFC6CC
 %define urlbar_edit_height 36px
 
 %define toolbar_vertical_spacing 5px
-%define toolbar_horizontal_spacing 20px
+%define toolbar_horizontal_spacing 17px
+%define toolbar_horizontal_padding 21px
+%define toolbar_snapped_horizontal_padding 10px
 %define toolbar_snapped_horizontal_spacing 10px
 
 % XXX Per UX mockups, this should be 68px, but we need to make this
 % one pixel higher to reduce button clipping until bug 905453 is resolved
 %define toolbar_height 69px
 %define labelled_toolbar_height 90px
 %define tabs_height 178px
 %define findbar_height 54px
@@ -60,17 +62,18 @@
 
 %define metro_border_thin 1px
 %define metro_border_thick 2px
 %define metro_border_xthick 4px
 
 %define metro_font_snormal 14px
 %define metro_font_normal 15px
 %define metro_font_large 25px
-%define metro_font_xlarge 45px
+%define metro_font_xlarge 35px
+%define metro_font_xxlarge 45px
 
 %define font_normal 16px
 %define font_snormal 15px
 %define font_small 12px
 %define font_xsmall 11px
 
 %define touch_row 47px
 %define touch_button_small 37px

--- a/browser/metro/theme/platform.css
+++ b/browser/metro/theme/platform.css
@@ -627,41 +627,73 @@ arrowbox {
   list-style-image: url("chrome://browser/skin/images/arrowbox-horiz.png");
   margin-left: -@margin_normal@;
 }
 
 /*.meta -------------------------------------------------------------------- */
 
 .meta {
   background-color: @panel_light_color@;
-  padding: @metro_spacing_normal@ @metro_spacing_xxnormal@;
-  overflow: auto;
-  max-width: 100%;
-  width: 100%;
+}
+
+/* needs to observe the viewstate */
+.meta-section-container {
+  padding: 45px 75px 0;
+  -moz-box-orient: horizontal;
+}
+
+.meta-section-container[viewstate="snapped"],
+.meta-section-container[viewstate="portrait"] {
+  -moz-box-orient: vertical;
+  -moz-box-flex: 1;
+}
+
+.meta-section-container[viewstate="snapped"] {
+  padding: 0;
 }
 
 .meta-section {
   margin: 0 @metro_spacing_large@;
 }
 
+.meta-section-container[viewstate="snapped"] > .meta-section {
+  margin: 0 @metro_spacing_xnormal@;
+}
+
 .meta-section-title {
   margin: @metro_spacing_normal@ @tile_side_margin@;
   font-size: @metro_font_large@;
   font-weight: 100;
   cursor: default;
 }
 
+.meta-section-title.wide-title {
+  font-size: @metro_font_xlarge@;
+  margin-bottom: calc(40px - @tile_side_margin@);
+}
+
 .meta-section:not([expanded]) > .meta-section-title.narrow-title:-moz-locale-dir(ltr):after {
   content: ">";
 }
 
 .meta-section:not([expanded]) > .meta-section-title.narrow-title:-moz-locale-dir(rtl):before {
   content: "<";
 }
 
+.meta-section-container:not([viewstate="snapped"]) .meta-section-title.narrow-title,
+.meta-section-container[viewstate="snapped"] .meta-section-title.wide-title {
+  display: none;
+}
+
+.meta-section-container[viewstate="snapped"] .meta-section-title,
+.meta-section-container[viewstate="snapped"] richgrid {
+  margin-top: @metro_spacing_xnormal@;
+  padding: 0;
+}
+
 /* App bars ----------------------------------------------------------------- */
 
 appbar {
   display: block;
   position: fixed;
   bottom: 0;
   width: 100%;
   transform: translateY(100%);
@@ -699,20 +731,16 @@ appbar toolbar {
 appbar toolbar toolbarbutton {
   border: 0;
   margin: 0 @toolbar_horizontal_spacing@;
   padding: 0;
   /* Don't inherit background-color from toolbarbutton[checked="true"] */
   background-color: transparent;
 }
 
-appbar[viewstate="snapped"] toolbar toolbarbutton {
-  margin: 0 @toolbar_snapped_horizontal_spacing@;
-}
-
 appbar toolbar toolbarbutton[disabled] {
   visibility: collapse;
 }
 
 appbar toolbar[labelled] {
   min-height: @labelled_toolbar_height@;
 }