turn #page > section into section.main so we can wrap things around it

media/css/mkt/browse.less

@@ -37,7 +37,7 @@
             padding-bottom: 5px;
         }
     }
-    #page > section.subheading {
+    #page section.main.subheading {
         padding-left: 10px;
         margin-top: -20px;
         position: relative;

media/css/mkt/desktop-account.less

@@ -4,7 +4,7 @@
     margin-bottom: 15px;
 }
 
-#page > section:only-child {
+#page section.main:only-child {
     padding: 50px 0;
 }
 

media/css/mkt/desktop-header.less

@@ -142,7 +142,7 @@ body[data-page-type='search'] #search {
     display: none !important;
 }
 
-.force-mobile #site-header > section,
+.force-mobile #site-header section.main,
 #site-header nav,
 #search {
     height: 100%;

media/css/mkt/desktop.less

@@ -130,10 +130,10 @@ body {
 }
 
 .force-mobile {
-    #site-header > section {
+    #site-header section.main {
         max-width: @desktop-hdr;
     }
-    #page > section {
+    #page section.main {
         max-width: @desktop-content;
     }
     #site-footer {

media/css/mkt/header.less

@@ -30,7 +30,7 @@
 }
 
 #site-header, .classic-header {
-    > section {
+    section.main {
         position: relative;
     }
     .gradient-two-color(#566773, #3e4e59);
@@ -55,7 +55,7 @@
         z-index: 10;
     }
     nav,
-    > section {
+    section.main {
         position: relative;
     }
 }
@@ -267,7 +267,7 @@ body.login[data-page-type=notice] #site-header.no-consumer h1 {
 
 @media (min-width: 614px) {
     #site-header {
-        > section {
+        section.main {
             max-width: 800px;
         }
     }

media/css/mkt/promo-grid.less

@@ -168,7 +168,7 @@
         }
     }
 
-    #page > section.popular {
+    #page section.main.popular {
         padding-left: 0;
         padding-right: 0;
     }

media/css/mkt/purchase.less

@@ -154,7 +154,7 @@
     }
 }
 
-.force-mobile #page > section#installed {
+.force-mobile #page section.main#installed {
     margin: 15px auto;
 }
 

media/css/mkt/site.less

@@ -116,7 +116,7 @@ body .loading-fragment {
 
 #site-header, #page {
     min-width: 320px;
-    > section {
+    section.main {
         margin-left: auto;
         margin-right: auto;
         &:after {
@@ -136,7 +136,7 @@ body .loading-fragment {
 
 #page {
     position: relative;
-    > section {
+    section.main {
         &:only-child {
             padding-top: 24px;
             padding-bottom: 12px;
@@ -186,8 +186,8 @@ body .loading-fragment {
 }
 
 .force-mobile {
-    #site-header > section,
+    #site-header section.main,
-    #page > section,
+    #page section.main,
     #site-footer {
         margin: 0 auto;
     }

mkt/account/templates/account/feedback.html

@@ -4,7 +4,7 @@
 {% set page_parent = '/' %}
 
 {% block content %}
-    <section class="account">
+    <section class="main account">
 
       {% if request.user.is_authenticated() %}
         {% include 'account/includes/nav.html' %}

mkt/account/templates/account/purchases.html

@@ -5,7 +5,7 @@
 {% set page_parent = '/' %}
 
 {% block content %}
-  <section class="account full">
+  <section class="main account full">
     {% include 'account/includes/nav.html' %}
     {% if not request.MOBILE %}
       <h2>{{ pagetitle }}</h2>

mkt/account/templates/account/settings.html

@@ -6,7 +6,7 @@
 {% set page_parent = '/' %}
 
 {% block content %}
-  <section id="account-settings" class="account">
+  <section class="main account" id="account-settings">
     {% include 'account/includes/nav.html' %}
     {% if not request.MOBILE %}
       <h2>{{ pagetitle }}</h2>

mkt/browse/templates/browse/helpers/category_slider.html

@@ -1,4 +1,4 @@
-<section class="categories">
+<section class="main categories">
   <h2>{{ _('Categories') }}</h2>
   <ul class="grid">
     {% for category in categories %}

mkt/browse/templates/browse/landing.html

@@ -19,7 +19,7 @@
 
 {% block content %}
   {{ mkt_breadcrumbs(product, crumbs, cls='dark') }}
-  <section id="browse-featured" class="featured full">
+  <section id="browse-featured" class="main featured full">
     <div>
       {% if not category %}
         <h1 class="hidden">{{ _('Apps') }}</h1>
@@ -27,11 +27,11 @@
       <h2 class="sticky">{{ title if category else _('Featured') }}</h2>
     </div>
   </section>
-  <section class="featured full slider">
+  <section class="main featured full slider">
     {{ featured|promo_slider(feature=True, src='mkt-category-featured') }}
   </section>
   {% if popular %}
-    <section class="popular subheading full">
+    <section class="main popular subheading full">
       <div>
         <h2 class="see-all c">
           <a href="{{ request.path|urlparams(category=category.slug or None,
@@ -40,7 +40,7 @@
         </h2>
       </div>
     </section>
-    <section class="popular grid full">
+    <section class="main popular grid full">
       {{ popular|promo_grid(src='mkt-category') }}
     </section>
   {% else %}

mkt/detail/templates/detail/app.html

@@ -44,13 +44,13 @@
     {{ notification(product, amo, mkt, is_dev, unrated_brazil_game) }}
   {% else %}
 
-    <section class="product-details listing expanded c">
+    <section class="main product-details listing expanded c">
       {{ market_tile(product, link=False, src=request.GET.get('src', 'mkt-detail')) }}
     </section>
 
     {{ notification(product, amo, mkt, is_dev, unrated_brazil_game) }}
 
-    <section id="installed">
+    <section class="main" id="installed">
       <div>
         <p>
           {{ _('Installed!') }}
@@ -80,7 +80,7 @@
     {% set descr_len = product.description.__unicode__()|length if product.description else 0 %}
     {% set comments_len = product.developer_comments.__unicode__()|length if product.developer_comments else 0 %}
     {% set super_long = (summary_len + descr_len + comments_len) > 700 %}
-    <section class="blurbs infobox">
+    <section class="main blurbs infobox">
       <div>
         <p class="summary">
           {{ product.summary|nl2br }}
@@ -116,7 +116,7 @@
       {% include "detail/includes/ratings.html" %}
     {% endwith %}
 
-    <section id="support" class="infobox support c">
+    <section id="support" class="main infobox support c">
       <div>
         <ul class="c">
           {% if product.support_email %}
@@ -170,7 +170,7 @@
     </section>
 
     {% if content_ratings %}
-      <div class="content-ratings infobox c">
+      <div class="main content-ratings infobox c">
         <div>
           <h3>
             {% trans DEJUS=mkt.ratingsbodies.DJCTQ.full_name,
@@ -190,7 +190,7 @@
     {% endif %}
 
     {% if is_dev or is_reviewer %}
-      <section class="actions infobox">
+      <section class="main actions infobox">
         <div>
           {% if is_dev %}
             <p><a href="{{ product.get_dev_url() }}" class="button manage" rel="external">{{ _('Manage') }}</a></p>

mkt/detail/templates/detail/includes/ratings.html

@@ -2,7 +2,7 @@
   {% if not can_review %}
     {% set can_review = product.is_persona() and product.is_public() %}
   {% endif %}
-  <section class="reviews c">
+  <section class="main reviews c">
     <div id="{% if reviews %}reviews-detail{% else %}reviews{% endif %}">
       {% if reviews %}
         <ul data-edit-url="{{ product.get_ratings_url('add') }}">

mkt/search/templates/search/results.html

@@ -39,7 +39,7 @@
 
 {% block content %}
   {{ mkt_breadcrumbs(product, crumbs) }}
-  <section id="filters" class="{{ 'overlay' if mobile }}{{ ' alt' if show_paid }}">
+  <section id="filters" class="main{{ ' overlay' if mobile }}{{ ' alt' if show_paid }}">
     {% if mobile %}
       <header class="classic-header">
         <a href="#" class="header-button icon back left dismiss"><b></b></a>
@@ -103,7 +103,7 @@
       </form>
     </div>
   </section>
-  <section id="featured" class="creatured full c">
+  <section id="featured" class="main creatured full c">
     {% if featured %}
       <ol class="grid c">
         {% for app in featured %}
@@ -114,7 +114,7 @@
       </ol>
     {% endif %}
   </section>
-  <section id="search-results" class="full c">
+  <section id="search-results" class="main full c">
     {% if not mobile and not browse and query.q %}
       <h1>{{ _('Search:') }} {{ query.q }}</h1>
     {% endif %}

mkt/site/templates/site/messages/display.html

@@ -1,5 +1,5 @@
 {% if messages %}
-  <section class="notification-box full">
+  <section class="main notification-box full">
     {% for message in messages %}
       <div class="{{ message.tags }}">
         {# The message is actually formatted inside of `message_content.html`. #}

mkt/templates/mkt/header.html

@@ -1,5 +1,5 @@
 <header id="site-header" class="c{{ ' no-consumer' if not request.can_view_consumer }}">
-  <section>
+  <section class="main">
     {% if not request.MOBILE %}
       <h1 class="site"><a href="{{ url('home') }}">Firefox Marketplace</a></h1>
     {% endif %}