Tables that kick azz

3 files changed, 217 insertions, 86 deletions

diff --git a/template.html b/template.html
index d6a03ae..a86bf46 100644
--- a/template.html
+++ b/template.html
@@ -178,6 +178,91 @@ function helloWorld(world) {
     </article>
   </slide>
 
+  <slide>
+    <hgroup>
+      <h2>Table Option A</h2>
+      <h3>Subtitle Placeholder</h3>
+    </hgroup>
+    <article>
+      <table>
+        <tr>
+          <th></th><th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th>
+        </tr>
+        <tr>
+          <td>Row 1</td><td>placeholder</td><td class="highlight">placeholder</td><td>placeholder</td><td>placeholder</td>
+        </tr>
+        <tr>
+          <td>Row 2</td><td>placeholder</td><td>placeholder</td><td>placeholder</td><td>placeholder</td>
+        </tr>
+        <tr>
+          <td>Row 3</td><td>placeholder</td><td>placeholder</td><td>placeholder</td><td>placeholder</td>
+        </tr>
+        <tr>
+          <td>Row 4</td><td>placeholder</td><td>placeholder</td><td>placeholder</td><td>placeholder</td>
+        </tr>
+        <tr>
+          <td>Row 5</td><td>placeholder</td><td>placeholder</td><td>placeholder</td><td>placeholder</td>
+        </tr>
+      </table>
+    </article>
+  </slide>
+
+  <slide>
+    <hgroup>
+      <h2>Table Option A (small text)</h2>
+      <h3>Subtitle Placeholder</h3>
+    </hgroup>
+    <article class="smaller">
+      <table>
+        <tr>
+          <th></th><th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th>
+        </tr>
+        <tr>
+          <td>Row 1</td><td>placeholder</td><td class="highlight">placeholder</td><td>placeholder</td><td>placeholder</td>
+        </tr>
+        <tr>
+          <td>Row 2</td><td>placeholder</td><td>placeholder</td><td>placeholder</td><td>placeholder</td>
+        </tr>
+        <tr>
+          <td>Row 3</td><td>placeholder</td><td>placeholder</td><td>placeholder</td><td>placeholder</td>
+        </tr>
+        <tr>
+          <td>Row 4</td><td>placeholder</td><td>placeholder</td><td>placeholder</td><td>placeholder</td>
+        </tr>
+        <tr>
+          <td>Row 5</td><td>placeholder</td><td>placeholder</td><td>placeholder</td><td>placeholder</td>
+        </tr>
+      </table>
+    </article>
+  </slide>
+
+  <slide>
+    <hgroup>
+      <h2>Table Option B</h2>
+      <h3>Subtitle Placeholder</h3>
+    </hgroup>
+    <article>
+      <table class="rows">
+        <tr>
+          <th>Header 1</th><td>placeholder</td><td class="highlight">placeholder</td><td>placeholder</td>
+        </tr>
+        <tr>
+          <th>Header 2</th><td>placeholder</td><td>placeholder</td><td>placeholder</td>
+        </tr>
+        <tr>
+          <th>Header 3</th><td>placeholder</td><td>placeholder</td><td>placeholder</td>
+        </tr>
+        <tr>
+          <th>Header 4</th><td>placeholder</td><td>placeholder</td><td>placeholder</td>
+        </tr>
+        <tr>
+          <th>Header 5</th><td>placeholder</td><td>placeholder</td><td>placeholder</td>
+        </tr>
+      </table>
+    </article>
+  </slide>
+
+
   <slide class="segue dark nobackground">
     <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside>
     <hgroup class="auto-fadein">
diff --git a/theme/css/default.css b/theme/css/default.css
index 75984cd..63c72a8 100644
--- a/theme/css/default.css
+++ b/theme/css/default.css
@@ -771,43 +771,71 @@ img.centered {
 /* line 442, ../sass/default.scss */
 table {
   width: 100%;
-  border-collapse: collapse;
-  margin-top: 40px;
+  border-collapse: -moz-initial;
+  border-collapse: initial;
+  border-spacing: 2px;
+  border-bottom: 1px solid #797979;
 }
-
-/* line 448, ../sass/default.scss */
-th {
+/* line 449, ../sass/default.scss */
+table tr > td:first-child, table th {
   font-weight: 600;
-  text-align: left;
+  color: #515151;
 }
-
 /* line 454, ../sass/default.scss */
-td,
-th {
-  border: 1px solid #e0e0e0;
-  padding: 5px 10px;
-  vertical-align: top;
+table tr:nth-child(odd) {
+  background-color: #e6e6e6;
+}
+/* line 458, ../sass/default.scss */
+table th {
+  color: white;
+  font-size: 18px;
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #4387fd), color-stop(80%, #2a7cdf)) no-repeat;
+  background: -webkit-linear-gradient(top, #4387fd 40%, #2a7cdf 80%) no-repeat;
+  background: -moz-linear-gradient(top, #4387fd 40%, #2a7cdf 80%) no-repeat;
+  background: -o-linear-gradient(top, #4387fd 40%, #2a7cdf 80%) no-repeat;
+  background: -ms-linear-gradient(top, #4387fd 40%, #2a7cdf 80%) no-repeat;
+  background: linear-gradient(top, #4387fd 40%, #2a7cdf 80%) no-repeat;
+}
+/* line 464, ../sass/default.scss */
+table td, table th {
+  font-size: 18px;
+  padding: 1em 0.5em;
+}
+/* line 469, ../sass/default.scss */
+table td.highlight {
+  color: #515151;
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #ffd14d), color-stop(80%, #f6c000)) no-repeat;
+  background: -webkit-linear-gradient(top, #ffd14d 40%, #f6c000 80%) no-repeat;
+  background: -moz-linear-gradient(top, #ffd14d 40%, #f6c000 80%) no-repeat;
+  background: -o-linear-gradient(top, #ffd14d 40%, #f6c000 80%) no-repeat;
+  background: -ms-linear-gradient(top, #ffd14d 40%, #f6c000 80%) no-repeat;
+  background: linear-gradient(top, #ffd14d 40%, #f6c000 80%) no-repeat;
+}
+/* line 474, ../sass/default.scss */
+table.rows {
+  border-bottom: none;
+  border-right: 1px solid #797979;
 }
 
-/* line 460, ../sass/default.scss */
+/* line 480, ../sass/default.scss */
 q {
   font-size: 45px;
   line-height: 72px;
 }
-/* line 464, ../sass/default.scss */
+/* line 484, ../sass/default.scss */
 q:before {
   content: '“';
   position: absolute;
   margin-left: -0.5em;
 }
-/* line 469, ../sass/default.scss */
+/* line 489, ../sass/default.scss */
 q:after {
   content: '”';
   position: absolute;
   margin-left: 0.1em;
 }
 
-/* line 476, ../sass/default.scss */
+/* line 496, ../sass/default.scss */
 slide.fill {
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
@@ -816,7 +844,7 @@ slide.fill {
   -khtml-border-radius: 5px;
   border-radius: 5px;
 }
-/* line 479, ../sass/default.scss */
+/* line 499, ../sass/default.scss */
 slide.fill h3 {
   background: rgba(255, 255, 255, 0.75);
   padding-top: .2em;
@@ -827,7 +855,7 @@ slide.fill h3 {
   margin-right: -60px;
   padding-right: 60px;
 }
-/* line 490, ../sass/default.scss */
+/* line 510, ../sass/default.scss */
 slide.fill h4 {
   display: inline;
   position: absolute;
@@ -836,91 +864,89 @@ slide.fill h4 {
 }
 
 /* Size variants */
-/* line 501, ../sass/default.scss */
+/* line 521, ../sass/default.scss */
 article.smaller p, article.smaller ul {
   font-size: 20px;
   line-height: 24px;
   letter-spacing: 0;
 }
-/* line 506, ../sass/default.scss */
+/* line 527, ../sass/default.scss */