Update templates and examples to use new style buttons

diff --git a/templates/base/basic.html b/templates/base/basic.html
index c133d096fd513edbbd0c46e16f3b3466c9665ce1..be67a562a914c9b9ddfdbf505c829932138ca44c 100644 (file)
--- a/templates/base/basic.html
+++ b/templates/base/basic.html
@@ -8,30 +8,30 @@
   </style>
   <style>
                
-    .facebook table td {
+    table.facebook td {
       background: #3b5998;
       border-color: #2d4473;
     }
 
-    .facebook:hover table td {
+    table.facebook:hover td {
       background: #2d4473 !important;
     }
 
-    .twitter table td {
+    table.twitter td {
       background: #00acee;
       border-color: #0087bb;
     }
 
-    .twitter:hover table td {
+    table.twitter:hover td {
       background: #0087bb !important;
     }
 
-    .google-plus table td {
+    table.google-plus td {
       background-color: #DB4A39;
       border-color: #CC0000;
     }
 
-    .google-plus:hover table td {
+    table.google-plus:hover td {
       background: #CC0000 !important;
     }
 
@@ -174,39 +174,33 @@
 
                             <h5>Connect With Us:</h5>
 
-                            <a class="tiny-button facebook" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    Facebook
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
+                            <table class="tiny-button facebook">
+                              <tr>
+                                <td>
+                                  <a href="#">Facebook</a>
+                                </td>
+                              </tr>
+                            </table>
 
                             <br>
 
-                            <a class="tiny-button twitter" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    Twitter
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
+                            <table class="tiny-button twitter">
+                              <tr>
+                                <td>
+                                  <a href="#">Twitter</a>
+                                </td>
+                              </tr>
+                            </table>
 
                             <br>
 
-                            <a class="tiny-button google-plus" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    Google +
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
+                            <table class="tiny-button google-plus">
+                              <tr>
+                                <td>
+                                  <a href="#">Google +</a>
+                                </td>
+                              </tr>
+                            </table>
 
                           </td>
                           <td class="expander"></td>

diff --git a/templates/base/hero.html b/templates/base/hero.html
index 6c59e6905abc470d1f608871892cc63612662b97..bd20ca316a75c67fa7cf4812ce24fa6e93ae8db2 100644 (file)
--- a/templates/base/hero.html
+++ b/templates/base/hero.html
@@ -8,30 +8,30 @@
   </style>
   <style>
     
-    .facebook table td {
+    table.facebook td {
       background: #3b5998;
       border-color: #2d4473;
     }
 
-    .facebook:hover table td {
+    table.facebook:hover td {
       background: #2d4473 !important;
     }
 
-    .twitter table td {
+    table.twitter td {
       background: #00acee;
       border-color: #0087bb;
     }
 
-    .twitter:hover table td {
+    table.twitter:hover td {
       background: #0087bb !important;
     }
 
-    .google-plus table td {
+    table.google-plus td {
       background-color: #DB4A39;
       border-color: #CC0000;
     }
 
-    .google-plus:hover table td {
+    table.google-plus:hover td {
       background: #CC0000 !important;
     }
 
@@ -228,39 +228,33 @@
 
                             <h5>Connect With Us:</h5>
 
-                            <a class="tiny-button facebook" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    Facebook
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
+                            <table class="tiny-button facebook">
+                              <tr>
+                                <td>
+                                  <a href="#">Facebook</a>
+                                </td>
+                              </tr>
+                            </table>
 
                             <br>
 
-                            <a class="tiny-button twitter" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    Twitter
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
+                            <table class="tiny-button twitter">
+                              <tr>
+                                <td>
+                                  <a href="#">Twitter</a>
+                                </td>
+                              </tr>
+                            </table>
 
                             <br>
 
-                            <a class="tiny-button google-plus" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    Google +
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
+                            <table class="tiny-button google-plus">
+                              <tr>
+                                <td>
+                                  <a href="#">Google +</a>
+                                </td>
+                              </tr>
+                            </table>
 
                           </td>
                           <td class="expander"></td>

diff --git a/templates/base/sidebar-hero.html b/templates/base/sidebar-hero.html
index 5e58264bd118949ae843f92564309d19acb2b1b8..521852e9405820c1c7d5e9c3ab6c455c1898bdc5 100644 (file)
--- a/templates/base/sidebar-hero.html
+++ b/templates/base/sidebar-hero.html
@@ -8,30 +8,30 @@
   </style>
   <style>
     
-    .facebook table td {
+    table.facebook td {
       background: #3b5998;
       border-color: #2d4473;
     }
 
-    .facebook:hover table td {
+    table.facebook:hover td {
       background: #2d4473 !important;
     }
 
-    .twitter table td {
+    table.twitter td {
       background: #00acee;
       border-color: #0087bb;
     }
 
-    .twitter:hover table td {
+    table.twitter:hover td {
       background: #0087bb !important;
     }
 
-    .google-plus table td {
+    table.google-plus td {
       background-color: #DB4A39;
       border-color: #CC0000;
     }
 
-    .google-plus:hover table td {
+    table.google-plus:hover td {
       background: #CC0000 !important;
     }
 
@@ -256,35 +256,33 @@
                       <tr>
                         <td class="panel">
                           <h6 style="margin-bottom:5px;">Connect With Us:</h6>
-                          <a class="tiny-button full facebook" href="#">
-                            <table>
+                          <table class="tiny-button facebook">
                               <tr>
                                 <td>
-                                  Facebook
+                                  <a href="#">Facebook</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
-                          <hr>
-                          <a class="tiny-button full twitter" href="#">
-                            <table>
+
+                            <hr>
+
+                            <table class="tiny-button twitter">
                               <tr>
                                 <td>
-                                  Twitter
+                                  <a href="#">Twitter</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
-                          <hr>
-                          <a class="tiny-button full google-plus" href="#">
-                            <table>
+
+                            <hr>
+
+                            <table class="tiny-button google-plus">
                               <tr>
                                 <td>
-                                  Google +
+                                  <a href="#">Google +</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
                           <br>
                           <h6 style="margin-bottom:5px;">Contact Info:</h6>
                           <p>Phone: <b>408.341.0600</b></p>

diff --git a/templates/base/sidebar.html b/templates/base/sidebar.html
index b59f484593a965a2070faf678a8424b064d3a53a..2f78acba1092ef62126d755d1ae1ef0f3cc5c182 100644 (file)
--- a/templates/base/sidebar.html
+++ b/templates/base/sidebar.html
@@ -8,30 +8,30 @@
   </style>
   <style>
     
-    .facebook table td {
+    table.facebook td {
       background: #3b5998;
       border-color: #2d4473;
     }
 
-    .facebook:hover table td {
+    table.facebook:hover td {
       background: #2d4473 !important;
     }
 
-    .twitter table td {
+    table.twitter td {
       background: #00acee;
       border-color: #0087bb;
     }
 
-    .twitter:hover table td {
+    table.twitter:hover td {
       background: #0087bb !important;
     }
 
-    .google-plus table td {
+    table.google-plus td {
       background-color: #DB4A39;
       border-color: #CC0000;
     }
 
-    .google-plus:hover table td {
+    table.google-plus:hover td {
       background: #CC0000 !important;
     }
 
@@ -248,35 +248,33 @@
                         <tr>
                           <td class="panel">
                             <h6 style="margin-bottom:5px;">Connect With Us:</h6>
-                            <a class="tiny-button facebook" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    Facebook
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
+                            <table class="tiny-button facebook">
+                              <tr>
+                                <td>
+                                  <a href="#">Facebook</a>
+                                </td>
+                              </tr>
+                            </table>
+
                             <hr>
-                            <a class="tiny-button twitter" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    Twitter
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
+
+                            <table class="tiny-button twitter">
+                              <tr>
+                                <td>
+                                  <a href="#">Twitter</a>
+                                </td>
+                              </tr>
+                            </table>
+
                             <hr>
-                            <a class="tiny-button google-plus" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    Google +
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
+
+                            <table class="tiny-button google-plus">
+                              <tr>
+                                <td>
+                                  <a href="#">Google +</a>
+                                </td>
+                              </tr>
+                            </table>
                             <br>
                             <h6 style="margin-bottom:5px;">Contact Info:</h6>
                             <p>Phone: <b>408.341.0600</b></p>

diff --git a/templates/examples/basic.html b/templates/examples/basic.html
index c133d096fd513edbbd0c46e16f3b3466c9665ce1..e123744fb295eb038a2fbb9d0a9bbdbef13142a1 100644 (file)
--- a/templates/examples/basic.html
+++ b/templates/examples/basic.html
@@ -1,37 +1,37 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-       <meta name="viewport" content="width=device-width"/>
-       <style>
-               /* Include ink.css */
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width"/>
+  <style>
+    /* Include ink.css */
   </style>
   <style>
-               
-    .facebook table td {
+    
+    table.facebook td {
       background: #3b5998;
       border-color: #2d4473;
     }
 
-    .facebook:hover table td {
+    table.facebook:hover td {
       background: #2d4473 !important;
     }
 
-    .twitter table td {
+    table.twitter td {
       background: #00acee;
       border-color: #0087bb;
     }
 
-    .twitter:hover table td {
+    table.twitter:hover td {
       background: #0087bb !important;
     }
 
-    .google-plus table td {
+    table.google-plus td {
       background-color: #DB4A39;
       border-color: #CC0000;
     }
 
-    .google-plus:hover table td {
+    table.google-plus:hover td {
       background: #CC0000 !important;
     }
 
@@ -86,12 +86,12 @@
       }
     }
 
-       </style>
+  </style>
 </head>
 <body>
-       <table class="body">
-               <tr>
-                       <td class="center" align="center" valign="top">
+  <table class="body">
+    <tr>
+      <td class="center" align="center" valign="top">
         <center>
          
           <table class="row header">
@@ -136,8 +136,8 @@
                         <tr>
                           <td>
                             <h3>Hi, Susan Calvin</h3>
-                                                               <p class="lead">Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.</p>
-                                                               <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. consequat vel lacus. Sed iaculis pulvinar ligula, ornare fringilla ante viverra et. In hac habitasse platea dictumst. Donec vel orci mi, eu congue justo. Integer eget odio est, eget malesuada lorem. Aenean sed tellus dui, vitae viverra risus. Nullam massa sapien, pulvinar eleifend fringilla id, convallis eget nisi. Mauris a sagittis dui. Pellentesque non lacinia mi. Fusce sit amet libero sit amet erat venenatis sollicitudin vitae vel eros. Cras nunc sapien, interdum sit amet porttitor ut, congue quis urna.</p>
+                            <p class="lead">Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.</p>
+                            <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. consequat vel lacus. Sed iaculis pulvinar ligula, ornare fringilla ante viverra et. In hac habitasse platea dictumst. Donec vel orci mi, eu congue justo. Integer eget odio est, eget malesuada lorem. Aenean sed tellus dui, vitae viverra risus. Nullam massa sapien, pulvinar eleifend fringilla id, convallis eget nisi. Mauris a sagittis dui. Pellentesque non lacinia mi. Fusce sit amet libero sit amet erat venenatis sollicitudin vitae vel eros. Cras nunc sapien, interdum sit amet porttitor ut, congue quis urna.</p>
                           </td>
                           <td class="expander"></td>
                         </tr>
@@ -174,39 +174,33 @@
 
                             <h5>Connect With Us:</h5>
 
-                            <a class="tiny-button facebook" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    Facebook
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
+                            <table class="tiny-button facebook">
+                              <tr>
+                                <td>
+                                  <a href="#">Facebook</a>
+                                </td>
+                              </tr>
+                            </table>
 
                             <br>
 
-                            <a class="tiny-button twitter" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    Twitter
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
+                            <table class="tiny-button twitter">
+                              <tr>
+                                <td>
+                                  <a href="#">Twitter</a>
+                                </td>
+                              </tr>
+                            </table>
 
                             <br>
 
-                            <a class="tiny-button google-plus" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    Google +
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
+                            <table class="tiny-button google-plus">
+                              <tr>
+                                <td>
+                                  <a href="#">Google +</a>
+                                </td>
+                              </tr>
+                            </table>
 
                           </td>
                           <td class="expander"></td>
@@ -257,8 +251,8 @@
           </table> 
 
         </center>
-                       </td>
-               </tr>
-       </table>
+      </td>
+    </tr>
+  </table>
 </body>
 </html>
\ No newline at end of file

diff --git a/templates/examples/sidebar-hero.html b/templates/examples/sidebar-hero.html
index 5806e0a3ab9b2f3734ca7ce186ae7d8cce940e4f..4c36c46f68d88b07f98c2ae986db3e8fa1fe1296 100644 (file)
--- a/templates/examples/sidebar-hero.html
+++ b/templates/examples/sidebar-hero.html
@@ -8,30 +8,30 @@
   </style>
   <style>
     
-    .facebook table td {
+    table.facebook td {
       background: #3b5998;
       border-color: #2d4473;
     }
 
-    .facebook:hover table td {
+    table.facebook:hover td {
       background: #2d4473 !important;
     }
 
-    .twitter table td {
+    table.twitter td {
       background: #00acee;
       border-color: #0087bb;
     }
 
-    .twitter:hover table td {
+    table.twitter:hover td {
       background: #0087bb !important;
     }
 
-    .google-plus table td {
+    table.google-plus td {
       background-color: #DB4A39;
       border-color: #CC0000;
     }
 
-    .google-plus:hover table td {
+    table.google-plus:hover td {
       background: #CC0000 !important;
     }
 
@@ -192,95 +192,61 @@
                         <td class="panel">
                           <h6>Header Thing &raquo;</h6>
                           <p>Sub-head or something</p>
-                          <a class="link" href="#">
-                            <table>
-                              <tr>
-                                <td>
-                                  Just a Plain Link &raquo;
-                                </td>
-                              </tr>
-                            </table>
-                          </a>
-                          <hr>
-                          <a class="link" href="#">
-                            <table>
+                          <table>
                               <tr>
                                 <td>
-                                  Just a Plain Link &raquo;
+                                  <a href="#">Just a Plain Link &raquo;</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
-                          <hr>
-                          <a class="link" href="#">
-                            <table>
-                              <tr>
-                                <td>
-                                  Just a Plain Link &raquo;
-                                </td>
-                              </tr>
-                            </table>
-                          </a>
-                          <hr>
-                          <a class="link" href="#">
+                            <hr>
                             <table>
                               <tr>
                                 <td>
-                                  Just a Plain Link &raquo;
+                                  <a href="#">Just a Plain Link &raquo;</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
-                          <hr>
-                          <a class="link" href="#">
+                            <hr>
                             <table>
                               <tr>
                                 <td>
-                                  Just a Plain Link &raquo;
+                                  <a href="#">Just a Plain Link &raquo;</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
-                          <hr>
-                          <a class="link" href="#">
+                            <hr>
                             <table>
                               <tr>
                                 <td>
-                                  Just a Plain Link &raquo;
+                                  <a href="#">Just a Plain Link &raquo;</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
-                          <hr>
-                          <a class="link" href="#">
+                            <hr>
                             <table>
                               <tr>
                                 <td>
-                                  Just a Plain Link &raquo;
+                                  <a href="#">Just a Plain Link &raquo;</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
-                          <hr>
-                          <a class="link" href="#">
+                            <hr>
                             <table>
                               <tr>
                                 <td>
-                                  Just a Plain Link &raquo;
+                                  <a href="#">Just a Plain Link &raquo;</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
-                          <hr>
-                          <a class="link" href="#">
+                            <hr>
                             <table>
                               <tr>
                                 <td>
-                                  Just a Plain Link &raquo;
+                                  <a href="#">Just a Plain Link &raquo;</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
                         </td>
                         <td class="expander"></td>
                       </tr>
@@ -290,35 +256,33 @@
                       <tr>
                         <td class="panel">
                           <h6 style="margin-bottom:5px;">Connect With Us:</h6>
-                          <a class="tiny-button full facebook" href="#">
-                            <table>
+                          <table class="tiny-button facebook">
                               <tr>
                                 <td>
-                                  Facebook
+                                  <a href="#">Facebook</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
-                          <hr>
-                          <a class="tiny-button full twitter" href="#">
-                            <table>
+
+                            <hr>
+
+                            <table class="tiny-button twitter">
                               <tr>
                                 <td>
-                                  Twitter
+                                  <a href="#">Twitter</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
-                          <hr>
-                          <a class="tiny-button full google-plus" href="#">
-                            <table>
+
+                            <hr>
+
+                            <table class="tiny-button google-plus">
                               <tr>
                                 <td>
-                                  Google +
+                                  <a href="#">Google +</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
                           <br>
                           <h6 style="margin-bottom:5px;">Contact Info:</h6>
                           <p>Phone: <b>408.341.0600</b></p>