make the demo just a bit prettier.

examples/index.html

@@ -9,15 +9,17 @@
   <script src="highlight/highlight.pack.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8"> hljs.initHighlightingOnLoad(); </script>
   <link rel="stylesheet" href="highlight/github.css" type="text/css" media="screen" />
+  <link href='http://fonts.googleapis.com/css?family=Roboto:300,700' rel='stylesheet' type='text/css'>
   <style type="text/css" media="screen">
     html { background: #ddd; }
-    body { font: normal 14px/21px "Helvetica Neue", Arial, sans-serif; color: #777; padding: 30px 60px; width: 740px; margin: 0 auto; background: #fff; }
+    body { font: normal 18px/1.6 'Open Sans', "Helvetica Neue", Arial, sans-serif; font-weight: 300; color: #777; padding: 2em 5%; width: 80%; max-width: 900px; margin: 0 auto; background: #fff; }
     small { color: #aaa; }
-    h1,h2,h3,h4 { color: #444; }
-    a { color: #0086B3; font-weight: bold; }
+    h1,h2,h3,h4 { color: #444; font-weight: 700; font-size: 1.6em; letter-spacing: -1px; }
+    a { color: #0086B3; font-weight: 700; }
     a:hover { color: #000; }
-    p code, li code {background:#ffffcc; color: #444;}
+    p code, li code {background:#ffffcc; color: #444; }
     pre { font-size: 12px; line-height: 18px; }
+    pre code { overflow: scroll; padding: 1em; border-radius: 10px; }
     hr { height: 10px; background: #eee; border: none; }
     table {width:100%;border-collapse:collapse;}
     td { border: 1px solid #eee; padding: 15px; }
@@ -81,7 +83,7 @@ <h1>jQuery Modal</h1>
 
 <hr />
 
-<h2>Example 1 (simplest): Open &amp; Close with links</h2>
+<h2>Example 1: Open &amp; Close with links</h2>
 <ol>
   <li>Embed modal HTML in document <small>(and hide it)</small></li>
   <li>Create a link with <code>rel="modal:open"</code> and set the <code>href</code> attribute to the modal's DOM id.</li> 
@@ -108,7 +110,7 @@ <h2>Example 1 (simplest): Open &amp; Close with links</h2>
 </code></pre>
 
 <!-- Link to open the modal -->
-<h3>Demo: <a href="#ex1" rel="modal:open">Open Modal</a></h3>
+<p>Demo: <a href="#ex1" rel="modal:open">Open Modal</a></p>
 
 <!-- Modal HTML embedded directly into document -->
 <div class="modal" id="ex1" style="display:none;">
@@ -120,8 +122,7 @@ <h3>Demo: <a href="#ex1" rel="modal:open">Open Modal</a></h3>
 
 <h2>Example 2: styled login form &amp; events</h2>
 
-<!-- Link to open the modal -->
-<h3>Demo: <a href="#ex2" rel="modal:open">Login!</a></h3>
+<p>This <a href="#ex2" rel="modal:open">example</a> demonstrates how visually customizable the modal is.</p>
 
 <!-- Modal HTML embedded directly into document -->
 <form action="" class="login_form modal" id="ex2" style="display:none;">
@@ -186,9 +187,7 @@ <h2>Example 5: the un-closable window</h2>
 
 <h2>Example 6: Multiple Modals</h2>
 
-<p>There can only be one modal open at a time. If you open a new modal while an existing modal is open, the existing modal is closed first. If you need to manage state (ie: for step by step wizards) you'll need to do that yourself.</p>
-
-<h3><a href="#ex6-1" rel="modal:open">Open First Modal</a></h3>
+<p>This <a href="#ex6-1" rel="modal:open">example</a> shows how only one modal can be open at a time. If you open a new modal while an existing modal is open, the existing modal is closed first. If you need to manage state (ie: for step by step wizards) you'll need to do that yourself.</p>
 
 <div class="modal" id="ex6-1" style="display:none;">
   <p>I'm the first modal. <a href="#ex6-2" rel="modal:open">Open second modal...</a></p>