Starting adding CSS to make the quad zones collapse.

--HG--
branch : dev

src/Orchard.Web/Themes/TheThemeMachine/Styles/Site.css

@@ -474,3 +474,27 @@ ul.comments li div.text {
 .clearfix {
 	clear:both;
 }
+
+#footer div {
+    /*border:1px solid #ff0000;*/
+}
+
+/* If zones 1 and 2 are empty in the quad */
+
+.split-left #footer-quad-third div.zone {
+    width:600px;
+}
+
+.split-left #footer-quad-fourth div.zone {
+    width:360px;
+}
+
+/* If zones 3 and 4 are empty in the quad */
+
+.split-right #footer-quad-first div.zone {
+    width:600px;
+}
+
+.split-right #footer-quad-second div.zone {
+    width:360px;
+}

src/Orchard.Web/Themes/TheThemeMachine/Views/Layout.cshtml

@@ -22,6 +22,17 @@
 
     }
 
+    //Add classes to the wrapper div to toggle quad widget zones on and off
+        if (Model.FooterQuadFirst == null && Model.FooterQuadSecond == null) {
+        Model.Classes.Add("split-left");
+    }
+    else if (Model.FooterQuadThird == null && Model.FooterQuadFourth == null) {
+        Model.Classes.Add("split-right");
+    }
+        else {
+
+    }
+
     Model.Id = "layout-wrapper";
     var tag = Tag (Model, "div");
 
@@ -133,12 +144,12 @@
             </div>
             }
             @if (Model.FooterQuadThird != null) {
-            <div id="footer-quad-second">
+            <div id="footer-quad-third">
                 @Zone(Model.FooterQuadThird)
             </div>
             }
             @if (Model.FooterQuadFourth != null) {
-            <div id="footer-quad-second">
+            <div id="footer-quad-fourth">
                 @Zone(Model.FooterQuadFourth)
             </div>
             }