Mercurial > dottes

changeset 621:dfeb781e5196

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Attempt revamp of CSS and presentation. Ditch 960.
author Jim Hague <jim.hague@acm.org>
date Sun, 06 Nov 2016 13:40:32 +0000
parents 2fe68733ec17
children 5df2ceeb5726
files dottes.html dottes.html.learnertune dottes.html.tune web/css/960.css web/css/dottes.css web/css/reset.css web/css/text.css web/img/banner.png web/index.html
diffstat 9 files changed, 32 insertions(+), 991 deletions(-) [+]
line wrap: on
line diff
--- a/dottes.html	Sun Nov 06 08:24:22 2016 +0000
+++ b/dottes.html	Sun Nov 06 13:40:32 2016 +0000
@@ -3,23 +3,20 @@
 <head>
   <meta charset="utf-8" />
   <title>Cry Havoc tunes - @TITLE@</title>
-  <link rel="stylesheet" href="../css/reset.css" />
-  <link rel="stylesheet" href="../css/text.css" />
-  <link rel="stylesheet" href="../css/960.css" />
   <link rel="stylesheet" href="../css/dottes.css" />
 
   <link href='http://fonts.googleapis.com/css?family=Pirata+One|Open+Sans'
         rel='stylesheet' type='text/css'>
 </head>
 <body>
-  <div class="container_12">
+  <div class="container">
     <a href="/">
-      <div class="grid_12 header-strip banner">
-        <h1>Ye Crie Havock Booke of Dottes</h1>
+      <div class="banner">
+        <img src="../img/banner.png" alt="Ye Crie Havoc Booke Of Dottes">
       </div>
     </a>
 
-    <div class="grid_12 dottes-body">
+    <div class="dottes-body">
       <h1>@SUBTITLE@</h1>
       <!--#include file="intro.html" -->
       <p>See <a href="#printing">below</a> if you'd like to print a book
@@ -36,7 +33,7 @@
         This is issue @BUILD@.
     </div>
 
-    <div class="grid_12 dottes-body">
+    <div class="dottes-body">
       <h1>The tunes</h1>
       <div class="dottes-tune-list">
         <div class="dottes-tune-list-link-column"></div>
@@ -45,7 +42,7 @@
       </div>
     </div>
 
-    <div class="grid_12 dottes-body">
+    <div class="dottes-body">
       <a id="printing"><h1>Printing</h1></a>
       <p>You can download a PDF with a booklet of these tunes. There is an
         <a href="@BOOK@-A5.pdf">A5 landscape book</a> with one
--- a/dottes.html.learnertune	Sun Nov 06 08:24:22 2016 +0000
+++ b/dottes.html.learnertune	Sun Nov 06 13:40:32 2016 +0000
@@ -3,23 +3,20 @@
 <head>
   <meta charset="utf-8" />
   <title>Cry Havoc tunes - learning ${title}</title>
-  <link rel="stylesheet" href="../css/reset.css" />
-  <link rel="stylesheet" href="../css/text.css" />
-  <link rel="stylesheet" href="../css/960.css" />
   <link rel="stylesheet" href="../css/dottes.css" />
 
   <link href='http://fonts.googleapis.com/css?family=Pirata+One|Open+Sans'
         rel='stylesheet' type='text/css'>
 </head>
 <body>
-  <div class="container_12">
+  <div class="container">
     <a href="/">
-      <div class="grid_12 header-strip banner">
-        <h1>Ye Crie Havock Booke of Dottes</h1>
+      <div class="header-strip banner">
+        <img src="../img/banner.png">
       </div>
     </a>
 
-    <div class="grid_12 dottes-body">
+    <div class="dottes-body">
       <div class="dottes-tune-display">
         <img src="../img/learner.png">Work out the melody or play along
         with these audio players. They play the melody repeatedly. There's
@@ -28,7 +25,7 @@
       </div>
     </div>
 
-    <div class="grid_12 dottes-body">
+    <div class="dottes-body">
       <div class="dottes-tune-display">
         <div class="dottes-tune-header">
           <div class="dottes-tune-header-icons-column"></div>
--- a/dottes.html.tune	Sun Nov 06 08:24:22 2016 +0000
+++ b/dottes.html.tune	Sun Nov 06 13:40:32 2016 +0000
@@ -3,23 +3,20 @@
 <head>
   <meta charset="utf-8" />
   <title>Cry Havoc tunes - ${title}</title>
-  <link rel="stylesheet" href="../css/reset.css" />
-  <link rel="stylesheet" href="../css/text.css" />
-  <link rel="stylesheet" href="../css/960.css" />
   <link rel="stylesheet" href="../css/dottes.css" />
 
   <link href='http://fonts.googleapis.com/css?family=Pirata+One|Open+Sans'
         rel='stylesheet' type='text/css'>
 </head>
 <body>
-  <div class="container_12">
+  <div class="container">
     <a href="/">
-      <div class="grid_12 header-strip banner">
+      <div class="header-strip banner">
         <h1>Ye Crie Havock Booke of Dottes</h1>
       </div>
     </a>
 
-    <div class="grid_12 dottes-body">
+    <div class="dottes-body">
       <div class="dottes-tune-display">
         <div class="dottes-tune-header">
           <div class="dottes-tune-header-icons-column"></div>
--- a/web/css/960.css	Sun Nov 06 08:24:22 2016 +0000
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,653 +0,0 @@
-/*
-  960 Grid System ~ Core CSS.
-  Learn more ~ http://960.gs/
-
-  Licensed under GPL and MIT.
-*/
-
-/*
-  Forces backgrounds to span full width,
-  even if there is horizontal scrolling.
-  Increase this if your layout is wider.
-
-  Note: IE6 works fine without this fix.
-*/
-
-body {
-  min-width: 960px;
-}
-
-/* `Container
-----------------------------------------------------------------------------------------------------*/
-
-.container_12,
-.container_16 {
-  margin-left: auto;
-  margin-right: auto;
-  width: 960px;
-}
-
-/* `Grid >> Global
-----------------------------------------------------------------------------------------------------*/
-
-.grid_1,
-.grid_2,
-.grid_3,
-.grid_4,
-.grid_5,
-.grid_6,
-.grid_7,
-.grid_8,
-.grid_9,
-.grid_10,
-.grid_11,
-.grid_12,
-.grid_13,
-.grid_14,
-.grid_15,
-.grid_16 {
-  display: inline;
-  float: left;
-  margin-left: 10px;
-  margin-right: 10px;
-}
-
-.push_1, .pull_1,
-.push_2, .pull_2,
-.push_3, .pull_3,
-.push_4, .pull_4,
-.push_5, .pull_5,
-.push_6, .pull_6,
-.push_7, .pull_7,
-.push_8, .pull_8,
-.push_9, .pull_9,
-.push_10, .pull_10,
-.push_11, .pull_11,
-.push_12, .pull_12,
-.push_13, .pull_13,
-.push_14, .pull_14,
-.push_15, .pull_15 {
-  position: relative;
-}
-
-.container_12 .grid_3,
-.container_16 .grid_4 {
-  width: 220px;
-}
-
-.container_12 .grid_6,
-.container_16 .grid_8 {
-  width: 460px;
-}
-
-.container_12 .grid_9,
-.container_16 .grid_12 {
-  width: 700px;
-}
-
-.container_12 .grid_12,
-.container_16 .grid_16 {
-  width: 940px;
-}
-
-/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
-----------------------------------------------------------------------------------------------------*/
-
-.alpha {
-  margin-left: 0;
-}
-
-.omega {
-  margin-right: 0;
-}
-
-/* `Grid >> 12 Columns
-----------------------------------------------------------------------------------------------------*/
-
-.container_12 .grid_1 {
-  width: 60px;
-}
-
-.container_12 .grid_2 {
-  width: 140px;
-}
-
-.container_12 .grid_4 {
-  width: 300px;
-}
-
-.container_12 .grid_5 {
-  width: 380px;
-}
-
-.container_12 .grid_7 {
-  width: 540px;
-}
-
-.container_12 .grid_8 {
-  width: 620px;
-}
-
-.container_12 .grid_10 {
-  width: 780px;
-}
-
-.container_12 .grid_11 {
-  width: 860px;
-}
-
-/* `Grid >> 16 Columns
-----------------------------------------------------------------------------------------------------*/
-
-.container_16 .grid_1 {
-  width: 40px;
-}
-
-.container_16 .grid_2 {
-  width: 100px;
-}
-
-.container_16 .grid_3 {
-  width: 160px;
-}
-
-.container_16 .grid_5 {
-  width: 280px;
-}
-
-.container_16 .grid_6 {
-  width: 340px;
-}
-
-.container_16 .grid_7 {
-  width: 400px;
-}
-
-.container_16 .grid_9 {
-  width: 520px;
-}
-
-.container_16 .grid_10 {
-  width: 580px;
-}
-
-.container_16 .grid_11 {
-  width: 640px;
-}
-
-.container_16 .grid_13 {
-  width: 760px;
-}
-
-.container_16 .grid_14 {
-  width: 820px;
-}
-
-.container_16 .grid_15 {
-  width: 880px;
-}
-
-/* `Prefix Extra Space >> Global
-----------------------------------------------------------------------------------------------------*/
-
-.container_12 .prefix_3,
-.container_16 .prefix_4 {
-  padding-left: 240px;
-}
-
-.container_12 .prefix_6,
-.container_16 .prefix_8 {
-  padding-left: 480px;
-}
-
-.container_12 .prefix_9,
-.container_16 .prefix_12 {
-  padding-left: 720px;
-}
-
-/* `Prefix Extra Space >> 12 Columns
-----------------------------------------------------------------------------------------------------*/
-
-.container_12 .prefix_1 {
-  padding-left: 80px;
-}
-
-.container_12 .prefix_2 {
-  padding-left: 160px;
-}
-
-.container_12 .prefix_4 {
-  padding-left: 320px;
-}
-
-.container_12 .prefix_5 {
-  padding-left: 400px;
-}
-
-.container_12 .prefix_7 {
-  padding-left: 560px;
-}
-
-.container_12 .prefix_8 {
-  padding-left: 640px;
-}
-
-.container_12 .prefix_10 {
-  padding-left: 800px;
-}
-
-.container_12 .prefix_11 {
-  padding-left: 880px;
-}
-
-/* `Prefix Extra Space >> 16 Columns
-----------------------------------------------------------------------------------------------------*/
-
-.container_16 .prefix_1 {
-  padding-left: 60px;
-}
-
-.container_16 .prefix_2 {
-  padding-left: 120px;
-}
-
-.container_16 .prefix_3 {
-  padding-left: 180px;
-}
-
-.container_16 .prefix_5 {
-  padding-left: 300px;
-}
-
-.container_16 .prefix_6 {
-  padding-left: 360px;
-}
-
-.container_16 .prefix_7 {
-  padding-left: 420px;
-}
-
-.container_16 .prefix_9 {
-  padding-left: 540px;
-}
-
-.container_16 .prefix_10 {
-  padding-left: 600px;
-}
-
-.container_16 .prefix_11 {
-  padding-left: 660px;
-}
-
-.container_16 .prefix_13 {
-  padding-left: 780px;
-}
-
-.container_16 .prefix_14 {
-  padding-left: 840px;
-}
-
-.container_16 .prefix_15 {
-  padding-left: 900px;
-}
-
-/* `Suffix Extra Space >> Global
-----------------------------------------------------------------------------------------------------*/
-
-.container_12 .suffix_3,
-.container_16 .suffix_4 {
-  padding-right: 240px;
-}
-
-.container_12 .suffix_6,
-.container_16 .suffix_8 {
-  padding-right: 480px;
-}
-
-.container_12 .suffix_9,
-.container_16 .suffix_12 {
-  padding-right: 720px;
-}
-
-/* `Suffix Extra Space >> 12 Columns
-----------------------------------------------------------------------------------------------------*/
-
-.container_12 .suffix_1 {
-  padding-right: 80px;
-}
-
-.container_12 .suffix_2 {
-  padding-right: 160px;
-}
-
-.container_12 .suffix_4 {
-  padding-right: 320px;
-}
-
-.container_12 .suffix_5 {
-  padding-right: 400px;
-}
-
-.container_12 .suffix_7 {
-  padding-right: 560px;
-}
-
-.container_12 .suffix_8 {
-  padding-right: 640px;
-}
-
-.container_12 .suffix_10 {
-  padding-right: 800px;
-}
-
-.container_12 .suffix_11 {
-  padding-right: 880px;
-}
-
-/* `Suffix Extra Space >> 16 Columns
-----------------------------------------------------------------------------------------------------*/
-
-.container_16 .suffix_1 {
-  padding-right: 60px;
-}
-
-.container_16 .suffix_2 {
-  padding-right: 120px;
-}
-
-.container_16 .suffix_3 {
-  padding-right: 180px;
-}
-
-.container_16 .suffix_5 {
-  padding-right: 300px;
-}
-
-.container_16 .suffix_6 {
-  padding-right: 360px;
-}
-
-.container_16 .suffix_7 {
-  padding-right: 420px;
-}
-
-.container_16 .suffix_9 {
-  padding-right: 540px;
-}
-
-.container_16 .suffix_10 {
-  padding-right: 600px;
-}
-
-.container_16 .suffix_11 {
-  padding-right: 660px;
-}
-
-.container_16 .suffix_13 {
-  padding-right: 780px;
-}
-
-.container_16 .suffix_14 {
-  padding-right: 840px;
-}
-
-.container_16 .suffix_15 {
-  padding-right: 900px;
-}
-
-/* `Push Space >> Global
-----------------------------------------------------------------------------------------------------*/
-
-.container_12 .push_3,
-.container_16 .push_4 {
-  left: 240px;
-}
-
-.container_12 .push_6,
-.container_16 .push_8 {
-  left: 480px;
-}
-
-.container_12 .push_9,
-.container_16 .push_12 {
-  left: 720px;
-}
-
-/* `Push Space >> 12 Columns
-----------------------------------------------------------------------------------------------------*/
-
-.container_12 .push_1 {
-  left: 80px;
-}
-
-.container_12 .push_2 {
-  left: 160px;
-}
-
-.container_12 .push_4 {
-  left: 320px;
-}
-
-.container_12 .push_5 {
-  left: 400px;
-}
-
-.container_12 .push_7 {
-  left: 560px;
-}
-
-.container_12 .push_8 {
-  left: 640px;
-}
-
-.container_12 .push_10 {
-  left: 800px;
-}
-
-.container_12 .push_11 {
-  left: 880px;
-}
-
-/* `Push Space >> 16 Columns
-----------------------------------------------------------------------------------------------------*/
-
-.container_16 .push_1 {
-  left: 60px;
-}
-
-.container_16 .push_2 {
-  left: 120px;
-}
-
-.container_16 .push_3 {
-  left: 180px;
-}
-
-.container_16 .push_5 {
-  left: 300px;
-}
-
-.container_16 .push_6 {
-  left: 360px;
-}
-
-.container_16 .push_7 {
-  left: 420px;
-}
-
-.container_16 .push_9 {
-  left: 540px;
-}
-
-.container_16 .push_10 {
-  left: 600px;
-}
-
-.container_16 .push_11 {
-  left: 660px;
-}
-
-.container_16 .push_13 {
-  left: 780px;
-}
-
-.container_16 .push_14 {
-  left: 840px;
-}
-
-.container_16 .push_15 {
-  left: 900px;
-}
-
-/* `Pull Space >> Global
-----------------------------------------------------------------------------------------------------*/
-
-.container_12 .pull_3,
-.container_16 .pull_4 {
-  left: -240px;
-}
-
-.container_12 .pull_6,
-.container_16 .pull_8 {
-  left: -480px;
-}
-
-.container_12 .pull_9,
-.container_16 .pull_12 {
-  left: -720px;
-}
-
-/* `Pull Space >> 12 Columns
-----------------------------------------------------------------------------------------------------*/
-
-.container_12 .pull_1 {
-  left: -80px;
-}
-
-.container_12 .pull_2 {
-  left: -160px;
-}
-
-.container_12 .pull_4 {
-  left: -320px;
-}
-
-.container_12 .pull_5 {
-  left: -400px;
-}
-
-.container_12 .pull_7 {
-  left: -560px;
-}
-
-.container_12 .pull_8 {
-  left: -640px;
-}
-
-.container_12 .pull_10 {
-  left: -800px;
-}
-
-.container_12 .pull_11 {
-  left: -880px;
-}
-
-/* `Pull Space >> 16 Columns
-----------------------------------------------------------------------------------------------------*/
-
-.container_16 .pull_1 {
-  left: -60px;
-}
-
-.container_16 .pull_2 {
-  left: -120px;
-}
-
-.container_16 .pull_3 {
-  left: -180px;
-}
-
-.container_16 .pull_5 {
-  left: -300px;
-}
-
-.container_16 .pull_6 {
-  left: -360px;
-}
-
-.container_16 .pull_7 {
-  left: -420px;
-}
-
-.container_16 .pull_9 {
-  left: -540px;
-}
-
-.container_16 .pull_10 {
-  left: -600px;
-}
-
-.container_16 .pull_11 {
-  left: -660px;
-}
-
-.container_16 .pull_13 {
-  left: -780px;
-}
-
-.container_16 .pull_14 {
-  left: -840px;
-}
-
-.container_16 .pull_15 {
-  left: -900px;
-}
-
-/* `Clear Floated Elements
-----------------------------------------------------------------------------------------------------*/
-
-/* http://sonspring.com/journal/clearing-floats */
-
-.clear {
-  clear: both;
-  display: block;
-  overflow: hidden;
-  visibility: hidden;
-  width: 0;
-  height: 0;
-}
-
-/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
-
-.clearfix:before,
-.clearfix:after,
-.container_12:before,
-.container_12:after,
-.container_16:before,
-.container_16:after {
-  content: '.';
-  display: block;
-  overflow: hidden;
-  visibility: hidden;
-  font-size: 0;
-  line-height: 0;
-  width: 0;
-  height: 0;
-}
-
-.clearfix:after,
-.container_12:after,
-.container_16:after {
-  clear: both;
-}
-
-/*
-  The following zoom:1 rule is specifically for IE6 + IE7.
-  Move to separate stylesheet if invalid CSS is a problem.
-*/
-
-.clearfix,
-.container_12,
-.container_16 {
-  zoom: 1;
-}
\ No newline at end of file
--- a/web/css/dottes.css	Sun Nov 06 08:24:22 2016 +0000
+++ b/web/css/dottes.css	Sun Nov 06 13:40:32 2016 +0000
@@ -1,5 +1,5 @@
 html {
-    font-size: 62.5%;
+    font-size: 100%;
 }
 
 body {
@@ -26,12 +26,7 @@
 
 div.banner
 {
-    height: 136px;
-
     background-color: black;
-    background-image: url('../img/banner.png');
-    background-repeat: no-repeat;
-    background-position: center center;
 
     -webkit-border-top-left-radius: 5px;
     -webkit-border-top-right-radius: 5px;
@@ -51,6 +46,16 @@
     margin-bottom: 5px;
 }
 
+div.banner img
+{
+    width: 100%;
+    max-width: 960;
+    max-height: 136px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
 div.banner h1
 {
     display: none;
--- a/web/css/reset.css	Sun Nov 06 08:24:22 2016 +0000
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,213 +0,0 @@
-/* `XHTML, HTML4, HTML5 Reset
-----------------------------------------------------------------------------------------------------*/
-
-a,
-abbr,
-acronym,
-address,
-applet,
-article,
-aside,
-audio,
-b,
-big,
-blockquote,
-body,
-canvas,
-caption,
-center,
-cite,
-code,
-dd,
-del,
-details,
-dfn,
-dialog,
-div,
-dl,
-dt,
-em,
-embed,
-fieldset,
-figcaption,
-figure,
-font,
-footer,
-form,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-header,
-hgroup,
-hr,
-html,
-i,
-iframe,
-img,
-ins,
-kbd,
-label,
-legend,
-li,
-main,
-mark,
-menu,
-meter,
-nav,
-object,
-ol,
-output,
-p,
-pre,
-progress,
-q,
-rp,
-rt,
-ruby,
-s,
-samp,
-section,
-small,
-span,
-strike,
-strong,
-sub,
-summary,
-sup,
-table,
-tbody,
-td,
-tfoot,
-th,
-thead,
-time,
-tr,
-tt,
-u,
-ul,
-var,
-video,
-xmp {
-  border: 0;
-  margin: 0;
-  padding: 0;
-  font-size: 100%;
-}
-
-html,
-body {
-  height: 100%;
-}
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section {
-/*
-  Override the default (display: inline) for
-  browsers that do not recognize HTML5 tags.
-
-  IE8 (and lower) requires a shiv:
-  http://ejohn.org/blog/html5-shiv
-*/
-  display: block;
-}
-
-b,
-strong {
-/*
-  Makes browsers agree.
-  IE + Opera = font-weight: bold.
-  Gecko + WebKit = font-weight: bolder.
-*/
-  font-weight: bold;
-}
-
-img {
-  color: transparent;
-  font-size: 0;
-  vertical-align: middle;
-/*
-  For IE.
-  http://css-tricks.com/ie-fix-bicubic-scaling-for-images
-*/
-  -ms-interpolation-mode: bicubic;
-}
-
-ol,
-ul {
-  list-style: none;
-}
-
-li {
-/*
-  For IE6 + IE7:
-
-  "display: list-item" keeps bullets from
-  disappearing if hasLayout is triggered.
-*/
-  display: list-item;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-th,
-td,
-caption {
-  font-weight: normal;
-  vertical-align: top;
-  text-align: left;
-}
-
-q {
-  quotes: none;
-}
-
-q:before,
-q:after {
-  content: "";
-  content: none;
-}
-
-sub,
-sup,
-small {
-  font-size: 75%;
-}
-
-sub,
-sup {
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-svg {
-/*
-  For IE9. Without, occasionally draws shapes
-  outside the boundaries of <svg> rectangle.
-*/
-  overflow: hidden;
-}
\ No newline at end of file
--- a/web/css/text.css	Sun Nov 06 08:24:22 2016 +0000
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,86 +0,0 @@
-/*
-  960 Grid System ~ Text CSS.
-  Learn more ~ http://960.gs/
-
-  Licensed under GPL and MIT.
-*/
-
-/* `Basic HTML
-----------------------------------------------------------------------------------------------------*/
-
-body {
-  font: 13px/1.5 "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
-}
-
-pre,
-code {
-  font-family: "DejaVu Sans Mono", Menlo, Consolas, monospace;
-}
-
-hr {
-  border: 0 solid #ccc;
-  border-top-width: 1px;
-  clear: both;
-  height: 0;
-}
-
-/* `Headings
-----------------------------------------------------------------------------------------------------*/
-
-h1 {
-  font-size: 25px;
-}
-
-h2 {
-  font-size: 23px;
-}
-
-h3 {
-  font-size: 21px;
-}
-
-h4 {
-  font-size: 19px;
-}
-
-h5 {
-  font-size: 17px;
-}
-
-h6 {
-  font-size: 15px;
-}
-
-/* `Spacing
-----------------------------------------------------------------------------------------------------*/
-
-ol {
-  list-style: decimal;
-}
-
-ul {
-  list-style: disc;
-}
-
-li {
-  margin-left: 30px;
-}
-
-p,
-dl,
-hr,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-ol,
-ul,
-pre,
-table,
-address,
-fieldset,
-figure {
-  margin-bottom: 20px;
-}
\ No newline at end of file
Binary file web/img/banner.png has changed
--- a/web/index.html	Sun Nov 06 08:24:22 2016 +0000
+++ b/web/index.html	Sun Nov 06 13:40:32 2016 +0000
@@ -3,23 +3,20 @@
 <head>
   <meta charset="utf-8" />
   <title>Ye Crie Havock Booke of Dottes</title>
-  <link rel="stylesheet" href="css/reset.css" />
-  <link rel="stylesheet" href="css/text.css" />
-  <link rel="stylesheet" href="css/960.css" />
   <link rel="stylesheet" href="css/dottes.css" />
 
   <link href='http://fonts.googleapis.com/css?family=Pirata+One|Open+Sans'
         rel='stylesheet' type='text/css'>
 </head>
 <body>
-  <div class="container_12">
+  <div class="container">
     <a href="/">
-      <div class="grid_12 header-strip banner">
+      <div class="header-strip banner">
         <h1>Ye Crie Havock Booke of Dottes</h1>
       </div>
     </a>
 
-    <div class="grid_12 dottes-body">
+    <div class="dottes-body">
       <h1>The music of Cry Havoc, a reference.</h1>
       <p>Music forms a core part of Cry Havoc Botley Morris. Of course, the
         musicians provide the music we dance to. And after every practice or
@@ -64,7 +61,7 @@
       </div>
     </div>
 
-    <div class="grid_12 dottes-body">
+    <div class="dottes-body">
       <h1>But my instrument isn't suited for treble clef concert pitch!</h1>
       <p>Of course, not all instruments are suited to playing music written
         in concert pitch in the treble clef.
@@ -117,14 +114,14 @@
       </div>
     </div>
 
-    <div class="grid_12 dottes-body">
+    <div class="dottes-body">
       <h1>Who is responsible for this?</h1>
       <p>Found a mistake, missing a tune or just want something changed?
         Email Jim at <a href="mailto:dottes@cryhavoc.org.uk">
           dottes@cryhavoc.org.uk</a>.</p>
     </div>
 
-    <div class="grid_12 dottes-body">
+    <div class="dottes-body">
       <h1>Acknowledgements</h1>
       <p>A few tunes here are from <a href="http://www.paulhardy.net/">
         Paul Hardy's Session Tunebook</a>. Many thanks to Paul for
@@ -140,7 +137,7 @@
         this project couldn't have happened.
     </div>
 
-    <div class="grid_12 dottes-body">
+    <div class="dottes-body">
       <a rel="license"
       href="http://creativecommons.org/licenses/by-sa/2.0/uk/deed.en_US">
         <img alt="Creative Commons License" style="border-width:0"