diff --git a/tests/StandardElements.htm b/tests/StandardElements.htm
index 3d11275..b9c565b 100644
--- a/tests/StandardElements.htm
+++ b/tests/StandardElements.htm
@@ -6,33 +6,92 @@
 </head>
 <body>
 <div style="width: 900px; padding: 20px; border: 1px solid #ff0000;" class="center">
+    <h1>Boxes</h1>
+    <h2>Simple</h2>
     <section class="box center">This is some test text.</section>
+    <section class="box center"><div class="inner">This is some text in a inner box</div></section>
+    <section class="box center"><h1>Headline</h1><div class="inner">This is some text in a inner box</div></section>
+    <section class="box center"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
+
+    <h2>Colored</h2>
+    <section class="box center red"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
+    <section class="box center green"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
+    <section class="box center blue"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
+    <section class="box center purple"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
+    <section class="box center orange"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
+    <section class="box center darkblue"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
+
+    <h2>Article</h2>
     <section class="box center">
         <article>
-            <p><span class="tooltip">Lorem<i>My Tooltip asd a sd <br>asdfsdf adf asd</i></span> ipsum dolor sit amet,
+            <h1>Headline1</h1>
+            <h2>Headline2</h2>
+            <h3>Headline3</h3>
+            <h4>Headline4</h4>
+            <h5>Headline5</h5>
+            <h6>Headline6</h6>
+            <h7>Headline7</h7>
+            <p><span class="tooltip">Tooltip<i>My Tooltip asd a sd <br>asdfsdf adf asd</i></span> ipsum dolor sit amet,
                 consectetur adipiscing elit. Duis posuere, nulla eu condimentum eleifend, nulla magna viverra risus, ut
                 faucibus libero libero nec est. Nunc quis rhoncus est, ac sodales lorem. Suspendisse convallis, massa eu
                 <a href="#">volutpat</a> posuere, justo dolor porta dui, a ullamcorper ex ipsum eget arcu. Cras quis
-                ante placerat, tempus
-                orci vitae, semper nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
-                cubilia
-                Curae; Duis at sodales sapien. Morbi dolor risus, finibus ut ipsum non, pellentesque varius ex. Etiam
+                ante placerat, tempus orci vitae, semper nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+                cubilia Curae; Duis at sodales sapien. Morbi dolor risus, finibus ut ipsum non, pellentesque varius ex. Etiam
                 pretium tempus diam at eleifend. Quisque a tortor et nisi commodo pretium ac at erat. Nam non iaculis
-                ipsum,
-                ultrices tempus nisl. Pellentesque ornare tellus vehicula sapien fringilla cursus. Duis sed tellus
-                sagittis
-                elit accumsan placerat et nec ex. In sit amet blandit nunc, a pulvinar nunc. Phasellus vulputate
-                facilisis
-                lorem eget aliquet. Curabitur odio ante, lobortis vitae est at, consequat posuere elit.</p>
+                ipsum, ultrices tempus nisl. Pellentesque ornare tellus vehicula sapien fringilla cursus. Duis sed tellus
+                sagittis elit accumsan placerat et nec ex. In sit amet blandit nunc, a pulvinar nunc. Phasellus vulputate
+                facilisis lorem eget aliquet. Curabitur odio ante, lobortis vitae est at, consequat posuere elit.</p>
 
             <p><span class="tooltip">Lorem<i>My Tooltip asd a sd asdfsdf adf asd</i></span> sed nulla et ante
-                consectetur
-                dictum. Nunc molestie ligula eget felis tincidunt suscipit. Fusce scelerisque diam lectus, non faucibus
+                consectetur dictum. Nunc molestie ligula eget felis tincidunt suscipit. Fusce scelerisque diam lectus, non faucibus
                 ligula sagittis eu. Sed id porttitor purus. Donec in dolor scelerisque, suscipit metus in, molestie sem.
                 Nulla facilisi. Nunc eu lobortis tellus.</p>
             <blockquote>This is a blockquote</blockquote>
+
+            <table>
+                    <caption>Table Title</caption>
+                    <thead>
+                    <tr>
+                        <td>Col1 Title</td>
+                        <td>Col2 Title</td>
+                        <td>Col3 Title</td>
+                        <td>Col4 Title</td>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td>Col1</td>
+                        <td>Col2</td>
+                        <td>Col3</td>
+                        <td>Col4</td>
+                    </tr>
+                    <tr>
+                        <td>Col1</td>
+                        <td>Col2</td>
+                        <td>Col3</td>
+                        <td>Col4</td>
+                    </tr>
+                    <tr>
+                        <td>Col1</td>
+                        <td>Col2</td>
+                        <td>Col3</td>
+                        <td>Col4</td>
+                    </tr>
+                    <tr>
+                        <td>Col1</td>
+                        <td>Col2</td>
+                        <td>Col3</td>
+                        <td>Col4</td>
+                    </tr>
+                    </tbody>
+                </table>
+
+                <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="200">
         </article>
     </section>
+
+    <h1>Buttons</h1>
+    <h2>Normal</h2>
     <section class="box-container center">
         <button>Test Button</button>
         <button><i class="fa fa-lightbulb-o"></i> Test Button</button>
@@ -43,6 +102,8 @@
         <button class="blue">Test Button</button>
         <button class="blue"><i class="fa fa-lightbulb-o"></i> Test Button</button>
     </section>
+
+    <h2>Connected</h2>
     <section class="box-container">
         <ul class="btns">
             <li><a href="">One</a>
@@ -51,6 +112,8 @@
             <li><a href="">Four</a>
         </ul>
     </section>
+
+    <h1>Tags</h1>
     <section class="box-container center">
         <span class="tag green">Test Tag</span>
         <span class="tag red">Test Tag</span>
@@ -65,58 +128,65 @@
         <span class="tag darkgreen">Test Tag</span>
         <span class="tag darkblue">Test Tag</span>
     </section>
-    <section class=" w-100 floatLeft">
+
+    <h1>Tooltips</h1>
+    <section class="box center wf-100"><span class="tooltip">Tooltip<i>My Tooltip asd a sd <br>asdfsdf adf asd</i></span></section>
+
+    <h1>Widths</h1>
+    <section class="box wf-100 floatLeft">
         <section class="inner center">&nbsp;</section>
     </section>
-    <section class=" w-50 floatLeft">
+    <section class="box wf-50 floatLeft">
         <section class="inner center">&nbsp;</section>
     </section>
-    <section class=" w-50 floatLeft">
+    <section class="box wf-50 floatLeft">
         <section class="inner center">&nbsp;</section>
     </section>
-    <section class=" w-33 floatLeft">
+    <section class="box wf-33 floatLeft">
         <section class="inner center">&nbsp;</section>
     </section>
-    <section class=" w-33 floatLeft">
+    <section class="box wf-33 floatLeft">
         <section class="inner center">&nbsp;</section>
     </section>
-    <section class=" w-33 floatLeft">
+    <section class="box wf-33 floatLeft">
         <section class="inner center">&nbsp;</section>
     </section>
-    <section class=" w-25 floatLeft">
+    <section class="box wf-25 floatLeft">
         <section class="inner center">&nbsp;</section>
     </section>
-    <section class=" w-25 floatLeft">
+    <section class="box wf-25 floatLeft">
         <section class="inner center">&nbsp;</section>
     </section>
-    <section class=" w-25 floatLeft">
+    <section class="box wf-25 floatLeft">
         <section class="inner center">&nbsp;</section>
     </section>
-    <section class=" w-25 floatLeft">
+    <section class="box wf-25 floatLeft">
         <section class="inner center">&nbsp;</section>
     </section>
-    <section class=" w-75 floatLeft">
+    <section class="box wf-75 floatLeft">
         <section class="inner center">&nbsp;</section>
     </section>
-    <section class=" w-25 floatLeft">
+    <section class="box wf-25 floatLeft">
         <section class="inner center">&nbsp;</section>
     </section>
-    <section class=" w-66 floatLeft">
+    <section class="box wf-66 floatLeft">
         <section class="inner center">&nbsp;</section>
     </section>
-    <section class=" w-33 floatLeft">
+    <section class="box wf-33 floatLeft">
         <section class="inner center">&nbsp;</section>
     </section>
-    <section class=" w-50 floatLeft">
+    <section class="box wf-50 floatLeft">
         <section class="inner center">&nbsp;</section>
     </section>
-    <section class=" w-25 floatLeft">
+    <section class="box wf-25 floatLeft">
         <section class="inner center">&nbsp;</section>
     </section>
-    <section class=" w-25 floatLeft">
+    <section class="box wf-25 floatLeft">
         <section class="inner center">&nbsp;</section>
     </section>
     <div class="clear"></div>
+    
+    <h1>Icons</h1>
     <section class="center">
         <i class="fa fa-lg infoIcon fa-envelope">
             <span class="badge">777</span>
@@ -134,12 +204,9 @@
             <span class="badge">33</span>
         </i>
     </section>
-    <section class="box">
-        <h1>This is H1</h1>
 
-        <h2>This is H2</h2>
-    </section>
-    <section class="box w-100">
+    <h1>Form</h1>
+    <section class="box wf-100">
         <section class="inner center">
             <form>
                 <table class="layout">
@@ -260,6 +327,9 @@
             </form>
         </section>
     </section>
+
+    <h1>Navigation</h1>
+    <h2>Content</h2>
     <section class="wf-100">
         <ul class="nav-top">
             <li><a>About</a></li>
@@ -275,7 +345,10 @@
             <li><a>Contact</a></li>
         </ul>
     </section>
-    <section class="box-container w-100">
+
+    <h1>Tables</h1>
+    <h2>Neutral</h2>
+    <section class="box-container wf-100">
         <table class="table">
             <caption>Table Title</caption>
             <thead>
@@ -335,7 +408,10 @@
             </tfoot>
         </table>
     </section>
-    <section class="box-container w-100">
+
+    <h1>Tabs</h1>
+    <h2>With Container</h2>
+    <section class="box-container wf-100">
         <div class="tabular">
             <ul class="tab-links">
                 <li><label for="c-tab-1">TAAAB</label></li>
@@ -354,6 +430,7 @@
         </div>
     </section>
 
+    <h2>Without Container</h2>
     <section class="box-container wf-100">
         <div class="tabular-2">
             <ul class="tab-links">
@@ -373,52 +450,54 @@
         </div>
     </section>
 
-        <section class="box-container ac-container">
-            <input type="checkbox" name="About us" id="ac-1">
-            <label for="ac-1">About us</label>
-            <section>
-                <p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show
-                    that show to the people who make shows, and on the strength of that one show they decide if
-                    they're going to make more shows.</p>
-            </section>
-            <input type="checkbox" name="About us" id="ac-2">
-            <label for="ac-2">How we work</label>
-            <section>
-                <p>Like you, I used to think the world was this great place where everybody lived by the same
-                    standards I did, then some kid with a nail showed me I was living in his world, a world where
-                    chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if
-                    you're not willing to play by his rules, then you're gonna have to pay the price. </p>
-            </section>
-            <input type="checkbox" name="About us" id="ac-3" checked>
-            <label for="ac-3">References</label>
-            <section>
-                <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it
-                    killed the world once and got a taste for murder. After the avalanche, it took us a week to
-                    climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us
-                    survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We
-                    said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it
-                    doesn't hold a candle to man. </p>
-
-                <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it
-                    killed the world once and got a taste for murder. After the avalanche, it took us a week to
-                    climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us
-                    survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We
-                    said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it
-                    doesn't hold a candle to man. </p>
-            </section>
-            <input type="checkbox" name="About us" id="ac-4">
-            <label for="ac-4">Contact us</label>
-            <section>
-                <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell
-                    everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in
-                    the future when the spacecraft encounters a black hole does the computer call it an 'unknown
-                    entry event'? Why don't they know? If they don't know, that means we never told anyone. And if
-                    we never told anyone it means we never made it back. Hence we die down here. Just as a matter of
-                    deductive logic. </p>
-            </section>
+    <h2>Accordion</h2>
+    <section class="box-container ac-container">
+        <input type="checkbox" name="About us" id="ac-1">
+        <label for="ac-1">About us</label>
+        <section>
+            <p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show
+                that show to the people who make shows, and on the strength of that one show they decide if
+                they're going to make more shows.</p>
         </section>
+        <input type="checkbox" name="About us" id="ac-2">
+        <label for="ac-2">How we work</label>
+        <section>
+            <p>Like you, I used to think the world was this great place where everybody lived by the same
+                standards I did, then some kid with a nail showed me I was living in his world, a world where
+                chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if
+                you're not willing to play by his rules, then you're gonna have to pay the price. </p>
+        </section>
+        <input type="checkbox" name="About us" id="ac-3" checked>
+        <label for="ac-3">References</label>
+        <section>
+            <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it
+                killed the world once and got a taste for murder. After the avalanche, it took us a week to
+                climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us
+                survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We
+                said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it
+                doesn't hold a candle to man. </p>
 
-    <section class="box-container w-50 floatLeft">
+            <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it
+                killed the world once and got a taste for murder. After the avalanche, it took us a week to
+                climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us
+                survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We
+                said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it
+                doesn't hold a candle to man. </p>
+        </section>
+        <input type="checkbox" name="About us" id="ac-4">
+        <label for="ac-4">Contact us</label>
+        <section>
+            <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell
+                everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in
+                the future when the spacecraft encounters a black hole does the computer call it an 'unknown
+                entry event'? Why don't they know? If they don't know, that means we never told anyone. And if
+                we never told anyone it means we never made it back. Hence we die down here. Just as a matter of
+                deductive logic. </p>
+        </section>
+    </section>
+
+    <h1>Breadcrumbs</h1>
+    <section class="box-container wf-50 floatLeft">
         <ul class="crumbs-1">
             <li><a>One</a></li>
             <li><a>Two</a></li>
@@ -426,7 +505,8 @@
             <li><a>Four</a></li>
         </ul>
     </section>
-    <section class="box-container w-50 floatLeft">
+    
+    <section class="box-container wf-50 floatLeft">
         <ul class="crumbs-1">
             <li><a>One</a></li>
             <li><a>Two</a></li>
@@ -436,28 +516,34 @@
         </ul>
     </section>
     <div class="clear"></div>
-    <section class="box-container w-100">
-        <div class="alert ok"><i class="fa fa-check"></i>This is ok</div>
+
+    <h1>Alerts</h1>
+    <section class="box-container wf-100">
+        <div class="log-msg log-msg-status-ok"><i class="fa fa-check"></i>This is ok</div>
     </section>
-    <section class="box-container w-100">
-        <div class="alert info"><i class="fa fa-bell"></i>This is a info</div>
+    <section class="box-container wf-100">
+        <div class="log-msg log-msg-status-info"><i class="fa fa-bell"></i>This is a info</div>
     </section>
-    <section class="box-container w-100">
-        <div class="alert warning"><i class="fa fa-exclamation-triangle"></i>This is a warning</div>
+    <section class="box-container wf-100">
+        <div class="log-msg log-msg-status-warning"><i class="fa fa-exclamation-triangle"></i>This is a warning</div>
     </section>
-    <section class="box-container w-100">
-        <div class="alert error"><i class="fa fa-times"></i>This is an error</div>
+    <section class="box-container wf-100">
+        <div class="log-msg log-msg-status-error"><i class="fa fa-times"></i>This is an error</div>
     </section>
-    <section class="box-container w-25 floatLeft">
-        <img class="frame-1" width="100" height="100">
+
+    <h1>Images</h1>
+    <section class="box-container wf-25 floatLeft">
+        <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" class="frame-1" width="200">
     </section>
-    <section class="box-container w-25 floatLeft">
-        <img class="frame-2" width="100" height="100">
+    <section class="box-container wf-25 floatLeft">
+        <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" class="frame-2" width="200">
     </section>
-    <section class="box-container w-25 floatLeft">
-        <img class="frame-3" width="100" height="100">
+    <section class="box-container wf-25 floatLeft">
+        <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" class="frame-3" width="200">
     </section>
     <div class="clear"></div>
+
+    <h1>Ranges</h1>
     <section class="box">
         <section class="inner center">
             <input type="range">
@@ -468,40 +554,43 @@
             <progress value="33" max="100"></progress>
         </section>
     </section>
-    <section class="box w-25 floatLeft">
+    <section class="box wf-25 floatLeft">
         <section class="inner center">
             <div class="meter">
                 <span style="width: 25%"></span>
             </div>
         </section>
     </section>
-    <section class="box w-25 floatLeft">
+    <section class="box wf-25 floatLeft">
         <section class="inner center">
             <div class="meter blue">
                 <span style="width: 50%"></span>
             </div>
         </section>
     </section>
-    <section class="box w-25 floatLeft">
+    <section class="box wf-25 floatLeft">
         <section class="inner center">
             <div class="meter orange">
                 <span style="width: 75%"></span>
             </div>
         </section>
     </section>
-    <section class="box w-25 floatLeft">
+    <section class="box wf-25 floatLeft">
         <section class="inner center">
             <div class="meter red">
                 <span style="width: 100%"></span>
             </div>
         </section>
     </section>
-    <section class="box w-25 floatLeft">
+    <div class="clear"></div>
+
+    <h1>Spinner</h1>
+    <section class="box wf-25 floatLeft">
         <section class="inner center">
             <div class="spinner-1"></div>
         </section>
     </section>
-    <section class="box w-25 floatLeft">
+    <section class="box wf-25 floatLeft">
         <section class="inner center">
             <div class="meter blue">
                 <div class="spinner-2">
@@ -512,7 +601,8 @@
             </div>
         </section>
     </section>
-    <section class="box w-25 floatLeft">
+    
+    <section class="box wf-25 floatLeft">
         <section class="inner center">
             <div class="spinner-3">
                 <div class="sk-circle1 sk-circle"></div>
@@ -530,12 +620,15 @@
             </div>
         </section>
     </section>
-    <section class="box w-25 floatLeft">
+    <section class="box wf-25 floatLeft">
         <section class="inner center">
             <div class="spinner-4"></div>
         </section>
     </section>
     <div class="clear"></div>
+
+    <h1>Slider</h1>
+    <h2>Automatic</h2>
     <section class="box">
         <div class="slider-1">
             <figure>
@@ -547,7 +640,9 @@
             </figure>
         </div>
     </section>
-    <section class="">
+
+    <h2>Clickable</h2>
+    <section>
         <div class="slider-2">
             <input type="radio" name="slide_switch" id="id1"/>
             <label for="id1">

Col1 Title	Col2 Title	Col3 Title	Col4 Title
Col1	Col2	Col3	Col4
Col1	Col2	Col3	Col4
Col1	Col2	Col3	Col4
Col1	Col2	Col3	Col4