Finalized the layout color applying part, at least in terms of a POC. Now we have a solid base to work on auto-applying kickass color schemes that we build from the picture.

css/example.css

@@ -181,7 +181,7 @@ a:hover { text-decoration: underline; }
     top: 20px;
     right: 20px;
     width: 200px;
-    height: 200px;
+    height: 226px;
     padding: 5px;
     opacity: .7;
     background-color: #292929;
@@ -191,15 +191,18 @@ a:hover { text-decoration: underline; }
     -webkit-box-shadow: 1px 1px 7px #333;
 }
 
-#testBanner, #testContent {
+#testBanner, #testContent, #testSidebar, #testFooter {
     padding: 5px;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     background-color: #000;
 }
 
+#testFooter { clear: both; }
 #testBanner { height: 20px; margin: 0 0 5px 0; }
-#testContent { height: 155px; }
+#testContent, #testSidebar { height: 155px; margin-bottom: 5px; }
+#testContent { float: left; width: 125px; }
+#testSidebar { float: right; width: 50px; }
 #testContent p { margin: 0 0 5px 0; }
 
 #layoutMods {
@@ -207,24 +210,26 @@ a:hover { text-decoration: underline; }
     position: absolute;
     top: 10px;
     left: 10px;
-    width: 330px;
+    width: 140px;
     background-color: #000;
-    opacity: .8;
-    padding: 10px 4px;
+    opacity: .9;
+    padding: 4px 4px 0;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
+    -moz-box-shadow: 1px 1px 7px #333;
+    -webkit-box-shadow: 1px 1px 7px #333;
 }
 
 #layoutMods a {
+    display: block;
     background-color: #498FB2;
     border: 1px solid #55A2C9;
-    padding: 5px 10px 4px;
+    padding: 5px 5px 4px;
     color: #fff;
     text-decoration: none;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
-    opacity: .8;
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
     margin: 0 0 4px 0;
 }
 
-#layoutMods a:hover { text-decoration: none; opacity: 1; }
+#layoutMods a:hover { text-decoration: none; opacity: .8; }