# HG changeset patch
# User Jim Hague <jim.hague@laicatc.com>
# Date 1361291176 0
# Node ID 8e6105d2bf5905e258bbf4dafff30e8d0bddc4c2
# Parent  9502f48830061d1483c0f3cca85b7d79b0ae0ed4
Sort out the tunes and transposition displayed on the front page.

diff -r 9502f4883006 -r 8e6105d2bf59 web/css/dottes.css
--- a/web/css/dottes.css	Mon Feb 18 22:37:46 2013 +0000
+++ b/web/css/dottes.css	Tue Feb 19 16:26:16 2013 +0000
@@ -95,21 +95,31 @@
     margin: 10px;
 }
 
-div.dottes-container h1
-{
-    padding: 0px;
-}
-
 div.dottes-transpose-instrument
 {
+    display: table;
+    width: 100%;
+}
+
+div.dottes-transpose-instrument-item
+{
+    display: table-cell;
+    vertical-align: middle;
 }
 
-div.dottes-transpose-how
+div.dottes-transpose-instrument-name
 {
+    width: 15%;
 }
 
-div.dottes-transpose-tunes
+div.dottes-transpose-instrument-how
 {
+    width: 55%;
+}
+
+div.dottes-transpose-tune-types
+{
+    width: 30%;
 }
 
 a.dottes-tune-link
@@ -132,11 +142,12 @@
 ul.tune-type-list
 {
     list-style-type: none;
+    margin: 0;
 }
 
 ul.tune-type-list li
 {
-    display: inline;
+    display: inline-block;
 }
 
 img.dottes-png
diff -r 9502f4883006 -r 8e6105d2bf59 web/index.html
--- a/web/index.html	Mon Feb 18 22:37:46 2013 +0000
+++ b/web/index.html	Tue Feb 19 16:26:16 2013 +0000
@@ -34,18 +34,20 @@
       <p>The tunes we play tend to vary over time. So this collection is
         not static, but will change over time. I'll probably not delete tunes,
         but at some stage may get round to marking some as less used.</p>
-      <div class="grid_11 dottes-container">
-        <div class="grid_2 alpha">
-          <h1>Tunes</h1>
-        </div>
-        <div class="grid_5">
-          <p>The tunes are separated into tune collections.
-        </div>
-        <div class="grid_4 omega">
-          <ul class="tune-type-list">
-            <li><a href="Morris">Morris</a></li>
-            <li><a href="Session">Session</a></li>
-          </ul>
+      <div class="dottes-container">
+        <div class="dottes-transpose-instrument">
+          <div class="dottes-transpose-instrument-item dottes-transpose-instrument-name">
+            <h1>Tunes</h1>
+          </div>
+          <div class="dottes-transpose-instrument-item dottes-transpose-how">
+            <p>The tunes are separated into tune collections.
+          </div>
+          <div class="dottes-transpose-instrument-item dottes-transpose-tune-types">
+            <ul class="tune-type-list">
+              <li><a href="Morris">Morris</a></li>
+              <li><a href="Session">Session</a></li>
+            </ul>
+          </div>
         </div>
       </div>
     </div>
@@ -62,19 +64,21 @@
         simple method.
       <p>I hope you find them useful.
 
-        <div class="grid_11 dottes-container">
-          <div class="grid_2 alpha dottes-transpose-instrument">
-            <h1>Cello</h1>
-          </div>
-          <div class="grid_5 dottes-transpose-how">
-            <p>Transpose down one or two octaves depending on the range in the
-              tune, and use the bass clef.
-          </div>
-          <div class="grid_4 omega dottes-transpose-tunes">
-            <ul class="tune-type-list">
-              <li><a href="Morris-Cello">Morris</a></li>
-              <li><a href="Session-Cello">Session</a></li>
-            </ul>
+        <div class="dottes-container">
+          <div class="dottes-transpose-instrument">
+            <div class="dottes-transpose-instrument-item dottes-transpose-instrument-name">
+              <h1>Cello</h1>
+            </div>
+            <div class="dottes-transpose-instrument-item dottes-transpose-how">
+              <p>Transpose down one or two octaves depending on the range in the
+                tune, and use the bass clef.
+            </div>
+            <div class="dottes-transpose-instrument-item dottes-transpose-tune-types">
+              <ul class="tune-type-list">
+                <li><a href="Morris-Cello">Morris</a></li>
+                <li><a href="Session-Cello">Session</a></li>
+              </ul>
+            </div>
           </div>
         </div>
     </div>