# HG changeset patch
# User Jim Hague <jim.hague@acm.org>
# Date 1478420662 0
# Node ID 2fe68733ec1719d42ad82f12d1e8a8384666465b
# Parent  11e5862beaa851399786921cf62021f2ffb17ec0
Fix learner tune CSS. Broken during tune page CSS revision.

Give the main display its own CSS.

diff -r 11e5862beaa8 -r 2fe68733ec17 dottes.html.learnertune
--- a/dottes.html.learnertune	Sat Nov 05 15:57:32 2016 +0000
+++ b/dottes.html.learnertune	Sun Nov 06 08:24:22 2016 +0000
@@ -31,8 +31,11 @@
     <div class="grid_12 dottes-body">
       <div class="dottes-tune-display">
         <div class="dottes-tune-header">
+          <div class="dottes-tune-header-icons-column"></div>
+          <div class="dottes-tune-header-title-column"></div>
+          <div class="dottes-tune-header-composer-column"></div>
           <div class="dottes-tune-header-row">
-            <div class="dottes-tune-header-left">
+            <div class="dottes-tune-header-icons">
               <a class="dottes-tune-icon-link" href="${name}.html">
                 <img class="dottes-tune-table-image" src="../img/music.png"
                      alt="Dottes">
@@ -42,22 +45,25 @@
                      alt="Tune index">
               </a>
             </div>
-            <div class="dottes-tune-header-middle">
+            <div class="dottes-tune-header-title">
               <h1>${title}</h1>
               <h2>${subtitle}</h2>
             </div>
-            <div class="dottes-tune-header-right">
+            <div class="dottes-tune-header-composer">
               <em>${composer}</em>
             </div>
           </div>
         </div>
         <p>${title} is in the key of ${key}.
-        <div class="dottes-tune-footer">
-          <div class="dottes-tune-footer-row">
-            <div class="dottes-tune-footer-left">
+        <div class="dottes-tune-learner">
+          <div class="dottes-tune-learner-speed-column"></div>
+          <div class="dottes-tune-learner-play-column"></div>
+          <div class="dottes-tune-learner-download-column"></div>
+          <div class="dottes-tune-learner-row">
+            <div class="dottes-tune-learner-speed">
               <p>Normal speed
             </div>
-            <div class="dottes-tune-footer-centre">
+            <div class="dottes-tune-learner-play">
               <audio controls loop>
                 <source src="../${masterbooke}/normal-${name}.mp3" type="audio/mpeg" />
                 <source src="../${masterbooke}/normal-${name}.ogg" type="audio/ogg" />
@@ -74,7 +80,7 @@
                 </object>
               </audio>
             </div>
-            <div class="dottes-tune-footer-right">
+            <div class="dottes-tune-learner-download">
               <ul class="tune-data-list">
                 <li><a class="dottes-link-tune dottes-mp3" download
                        href="../${masterbooke}/${name}.mp3">MP3</a></li>
@@ -83,11 +89,11 @@
               </ul>
             </div>
           </div>
-          <div class="dottes-tune-footer-row">
-            <div class="dottes-tune-footer-left">
+          <div class="dottes-tune-learner-row">
+            <div class="dottes-tune-learner-speed">
               <p>Slightly slower
             </div>
-            <div class="dottes-tune-footer-centre">
+            <div class="dottes-tune-learner-play">
               <audio controls loop>
                 <source src="../${masterbooke}/littleslow-${name}.mp3" type="audio/mpeg" />
                 <source src="../${masterbooke}/littleslow-${name}.ogg" type="audio/ogg" />
@@ -104,7 +110,7 @@
                 </object>
               </audio>
             </div>
-            <div class="dottes-tune-footer-right">
+            <div class="dottes-tune-learner-download">
               <ul class="tune-data-list">
                 <li><a class="dottes-link-tune dottes-mp3" download
                        href="../${masterbooke}/littleslow-${name}.mp3">MP3</a></li>
@@ -113,11 +119,11 @@
               </ul>
             </div>
           </div>
-          <div class="dottes-tune-footer-row">
-            <div class="dottes-tune-footer-left">
+          <div class="dottes-tune-learner-row">
+            <div class="dottes-tune-learner-speed">
               <p>Slow
             </div>
-            <div class="dottes-tune-footer-centre">
+            <div class="dottes-tune-learner-play">
               <audio controls loop>
                 <source src="../${masterbooke}/slow-${name}.mp3" type="audio/mpeg" />
                 <source src="../${masterbooke}/slow-${name}.ogg" type="audio/ogg" />
@@ -134,7 +140,7 @@
                 </object>
               </audio>
             </div>
-            <div class="dottes-tune-footer-right">
+            <div class="dottes-tune-learner-download">
               <ul class="tune-data-list">
                 <li><a class="dottes-link-tune dottes-mp3" download
                        href="../${masterbooke}/slow-${name}.mp3">MP3</a></li>
@@ -143,11 +149,11 @@
               </ul>
             </div>
           </div>
-          <div class="dottes-tune-footer-row">
-            <div class="dottes-tune-footer-left">
+          <div class="dottes-tune-learner-row">
+            <div class="dottes-tune-learner-speed">
               <p>Very slow
             </div>
-            <div class="dottes-tune-footer-centre">
+            <div class="dottes-tune-learner-play">
               <audio controls loop>
                 <source src="../${masterbooke}/veryslow-${name}.mp3" type="audio/mpeg" />
                 <source src="../${masterbooke}/veryslow-${name}.ogg" type="audio/ogg" />
@@ -164,7 +170,7 @@
                 </object>
               </audio>
             </div>
-            <div class="dottes-tune-footer-right">
+            <div class="dottes-tune-learner-download">
               <ul class="tune-data-list">
                 <li><a class="dottes-link-tune dottes-mp3" download
                        href="../${masterbooke}/veryslow-${name}.mp3">MP3</a></li>
diff -r 11e5862beaa8 -r 2fe68733ec17 web/css/dottes.css
--- a/web/css/dottes.css	Sat Nov 05 15:57:32 2016 +0000
+++ b/web/css/dottes.css	Sun Nov 06 08:24:22 2016 +0000
@@ -231,6 +231,52 @@
     text-align: right;
 }
 
+div.dottes-tune-learner
+{
+    display: table;
+    width: 100%;
+}
+
+div.dottes-tune-learner-speed-column
+{
+    display: table-column;
+    width: 25%;
+}
+
+div.dottes-tune-learner-play-column
+{
+    display: table-column;
+    width: 50%;
+}
+
+div.dottes-tune-learner-download-column
+{
+    display: table-column;
+    width: 25%;
+}
+
+div.dottes-tune-learner-row
+{
+    display: table-row;
+}
+
+div.dottes-tune-learner-speed
+{
+    display: table-cell;
+}
+
+div.dottes-tune-learner-play
+{
+    display: table-cell;
+    text-align: center;
+}
+
+div.dottes-tune-learner-download
+{
+    display: table-cell;
+    text-align: right;
+}
+
 a.dottes-tune-link
 {
     position: relative;