diff --git a/docs/shape.html b/docs/shape.html
index 40b6d2174..8c85944a7 100755
--- a/docs/shape.html
+++ b/docs/shape.html
@@ -169,95 +169,102 @@
     <li>Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair. <code>$('.foo').shape('setting', 'moduleName', 'Godzilla');</code></li>
   </ol>
   <p>Settings can also be read programmatically: <code>$('.foo').shape('setting', 'moduleName');</code>
-  <table class="ui large grid table">
+  <table class="ui grid settings table">
     <thead>
-      <th>Setting Name</th>
-      <th>Default Value</th>
-      <th>Usage</th>
+      <th>Setting</th>
+      <th>Default</th>
+      <th>Description</th>
     </thead>
-    <tr>
-      <td>moduleName</td>
-      <td>Shape</td>
-      <td>Name used in debug logs</td>
-    </tr>
-    <tr>
-      <td>debug</td>
-      <td>True</td>
-      <td>Provides standard debug output to console</td>
-    </tr>
-    <tr>
-      <td>verbose</td>
-      <td>False</td>
-      <td>Provides ancillary debug output to console</td>
-    </tr>
-    <tr>
-      <td>namespace</td>
-      <td>shape</td>
-      <td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
-    </tr>
-    <tr>
-      <td>beforeChange</td>
-      <td>None</td>
-      <td>Callback before side is changed. This context is the new side.</td>
-    </tr>
-    <tr>
-      <td>onChange</td>
-      <td>None</td>
-      <td>Callback after side is changed. This context is new side.</td>
-    </tr>
-    <tr>
-      <td>useCSS</td>
-      <td>True</td>
-      <td>Not currently supported. Will allow for use of javascript requestAnimationFrame transitions instead of css3 transitions.</td>
-    </tr>
-    <tr>
-      <td>duration</td>
-      <td>1000ms</td>
-      <td>Duration of animation (javascript only). To modify animation duration for css simply modify the css property transition-duration.</td>
-    </tr>
-    <tr>
-      <td>easing</td>
-      <td>easeInOutQuad</td>
-      <td>Easing equation for animation (javascript only). To modify the easing for css simply modify the css property transition-easing</td>
-    </tr>
-    <tr>
-      <td>errors</td>
-      <td>
-        <pre><code>
-          {
-            side   : 'You tried to switch to a side that does not exist.',
-            method : 'The method you called is not defined'
-          }
-        </code></pre>
-      </td>
-      <td>Object containing localized error messages.</td>
-    </tr>
-    <tr>
-      <td>selector</td>
-      <td>
-        <pre><code>
-        {
-          shape : '.shape',
-          side  : '.side'
-        }
-        </code></pre>
-      </td>
-      <td>Object containing selectors used by module.</td>
-    </tr>
-    <tr>
-      <td>className</td>
-      <td>
-        <pre><code>
-        {
-          css       : 'css',
-          animating : 'animating',
-          hidden    : 'hidden',
-          active    : 'active'
-        }
-        </code></pre>
-      </td>
-      <td>Object containing class names used by module.</td>
-    </tr>
+    <tbody>
+      <tr>
+        <td>useCSS</td>
+        <td>True</td>
+        <td>Not currently supported. Will allow for use of javascript requestAnimationFrame transitions instead of css3 transitions.</td>
+      </tr>
+      <tr>
+        <td>duration</td>
+        <td>1000ms</td>
+        <td>Duration of animation (javascript only). To modify animation duration for css simply modify the css property transition-duration.</td>
+      </tr>
+      <tr>
+        <td>easing</td>
+        <td>easeInOutQuad</td>
+        <td>Easing equation for animation (javascript only). To modify the easing for css simply modify the css property transition-easing</td>
+      </tr>
+      <tr>
+        <td>selector</td>
+        <td>
+          <pre>{
+  shape : '.shape',
+  side  : '.side'
+}</pre>
+        </td>
+        <td>Object containing selectors used by module.</td>
+      </tr>
+      <tr>
+        <td>className</td>
+        <td>
+<pre>{
+  css       : 'css',
+  animating : 'animating',
+  hidden    : 'hidden',
+  active    : 'active'
+}</pre>
+        </td>
+        <td>Object containing class names used by module.</td>
+      </tr>
+      <tr class="emphasis">
+        <td colspan="3">Callbacks</td>
+      </tr>
+      <tr>
+        <td>beforeChange</td>
+        <td>None</td>
+        <td>Callback before side is changed. This context is the new side.</td>
+      </tr>
+      <tr>
+        <td>onChange</td>
+        <td>None</td>
+        <td>Callback after side is changed. This context is new side.</td>
+      </tr>
+      <tr class="emphasis">
+        <td colspan="3">Standard</td>
+      </tr>
+      <tr>
+        <td>moduleName</td>
+        <td>Shape</td>
+        <td>Name used in debug logs</td>
+      </tr>
+      <tr>
+        <td>debug</td>
+        <td>True</td>
+        <td>Provides standard debug output to console</td>
+      </tr>
+      <tr>
+        <td>performance</td>
+        <td>False</td>
+        <td>Provides standard debug output to console</td>
+      </tr>
+      <tr>
+        <td>verbose</td>
+        <td>False</td>
+        <td>Provides ancillary debug output to console</td>
+      </tr>
+      <tr>
+        <td>namespace</td>
+        <td>shape</td>
+        <td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
+      </tr>
+      <tr>
+        <td>errors</td>
+        <td>
+            {
+              side   : 'You tried to switch to a side that does not exist.',
+              method : 'The method you called is not defined'
+            }
+        </td>
+        <td>Object containing localized error messages.</td>
+      </tr>
+    </tbody>
   </table>
 
 </div>
diff --git a/docs/stylesheets/example.css b/docs/stylesheets/example.css
index fcb864bd1..4daa2c10e 100755
--- a/docs/stylesheets/example.css
+++ b/docs/stylesheets/example.css
@@ -110,6 +110,12 @@ a:hover {
   border: none;
   padding: 0px;
 }
+#example table pre,
+#example table code {
+  margin: 0px;
+  padding: 0px;
+  background-color: transparent;
+}
 #example p {
   margin: 10px 0px;
 }
diff --git a/src/ui/flat/table.css b/src/ui/flat/table.css
index 6853f7fa2..cd89fd767 100755
--- a/src/ui/flat/table.css
+++ b/src/ui/flat/table.css
@@ -1,12 +1,7 @@
 .ui.table {
   width: 100%;
-  border: 1px solid #F0F0F0;
-  border: 1px solid rgba(0, 0, 0, 0.1);
   border-collapse: collapse;
-
-  font-size: 12px;
-  color: #555555;
-  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.9);
+  color: #333333;
 }
 
 /* Standard Table Icons */
@@ -29,9 +24,6 @@
   -ms-box-sizing: border-box;
   box-sizing: border-box;
 }
-.ui.table thead {
-  border-bottom: 1px solid #DADADA;
-}
 .ui.table thead tr {
 /*
   -webkit-box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.53);
@@ -48,28 +40,17 @@
 .ui.table th,
 .ui.sortable.table th.disabled:hover {
   cursor: auto;
-  background-color: #FAFAFA;
+  background-color: rgba(0, 0, 0, 0.8);
 
+  text-align: left;
   font-weight: bold;
-  color: #333333;
-
-  background: -webkit-linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%);
-  background: -moz-linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%);
-  background: -o-linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%);
-  background: -ms-linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%);
-  background: linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%);
-}
-
-/* Header & Footer Formatting */
-.ui.table thead,
-.ui.table tfoot {
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  font-size: 13px;
+  color: #FFFFFF;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
 }
 
 /* Table Striping */
 .ui.table tbody tr:nth-child(2n) {
-  background-color: rgba(0, 0, 0, 0.02);
+  background-color: rgba(0, 0, 0, 0.04);
 }
 
 
@@ -85,22 +66,13 @@
 
 }
 .ui.grid.table th {
-  border: 1px solid #DADADA;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-
-  border-bottom-color: #CCCCCC;
-  border-bottom-color: rgba(0, 0, 0, 0.2);
-
-  -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset;
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset;
-  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset;
+  border: 1px solid rgba(0, 0, 0, 0.15);
 }
 .ui.grid.table tbody td {
-  border: 1px solid #E0E0E0;
-  border-color: rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.15);
 }
 
-/* Special Row Types */
+/* Row with a button */
 .ui.table tr.button td {
   padding: 0px;
 }
@@ -110,19 +82,15 @@
   -moz-border-radius: 0px;
   border-radius: 0px;
 }
-.ui.table tfoot tr td,
+
+/* Emphasize a row */
 .ui.table tr.emphasis td,
 .ui.table tr td.emphasis {
-  background-color: #F0F0F0;
-
-  border: 1px solid #DADADA;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-
-  -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset;
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset;
-  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset;
+  background-color: rgba(40, 40, 40, 0.7);
+  text-align: left;
   font-weight: bold;
-  color: #333333;
+  color: #FFFFFF;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
 }
 
 /* Sortable Table */
@@ -195,16 +163,20 @@
 }
 
 
-
-
 /*--------------
    Resizes
 ---------------*/
 
+.ui.table {
+  font-size: 16px;
+  padding: 10px 12px;
+}
+
+/* Large */
 .ui.large.table {
-  font-size: 13px;
+  font-size: 18px;
 }
 .ui.large.table td, 
 .ui.large.table th {
-  padding: 10px 12px;
+  padding: 12px 15px;
 }
\ No newline at end of file