[Frontend] WIP

Fixes #1677
Refactor and re-organize alert and status colors;
Rename _limits.scss to _status.scss;
Style Guide additions in progress;
VERY WIP, NEEDS UNIT TESTING FOR REGRESSION.

example/styleguide/res/templates/status.html

@@ -21,6 +21,7 @@
 -->
 <style>
     .w-mct-example div[class*="s-limit"],
+    .w-mct-example div[class*="s-status"],
     .w-mct-example div[class*="s-unsynced"],
     .w-mct-example span[class*="s-limit"] {
         border-radius: 4px;
@@ -73,6 +74,28 @@
         </div>
     </div>
 
+    <div class="l-section">
+        <h2>Status</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Classes here can be applied to elements as needed.</p>
+                <ul>
+                    <li><code>s-status-warning-hi</code>: Nuke the entire site from orbit - it's the only way to be sure.</li>
+                    <li><code>s-status-warning-lo</code>: Pay attention to this.</li>
+                    <li><code>s-status-diagnostic</code>: Something in the code wants to talk to you.</li>
+                    <li><code>s-status-info</code>: What?! What?! Oh, ok.</li>
+                    <li><code>s-status-ok</code>: Whew! Hand me a beer would'ya?</li>
+                </ul>
+            </div>
+<mct-example><div class="s-status-warning-hi-icon">WARNING HI</div>
+<div class="s-status-warning-lo-icon">WARNING LOW</div>
+<div class="s-status-diagnostic-icon">DIAGNOSTIC</div>
+<div class="s-status-info-icon">INFO</div>
+<div class="s-status-ok-icon">OK</div>
+</mct-example>
+        </div>
+    </div>
+
     <div class="l-section">
         <h2>Synchronization</h2>
         <div class="cols cols1-1">