From 67f3e594afe76b0c262fee54419f826db88e8dc0 Mon Sep 17 00:00:00 2001
From: Jim Hague <jim.hague@laicatc.com>
Date: Mon, 18 Feb 2013 21:50:58 +0000
Subject: [PATCH] Set margin on divs so that they leave gaps between
 themselves.

So 'clear' divs are unnecessary.
---
 dottes.html.header |  4 ----
 dottes.html.tune   |  2 --
 web/css/dottes.css | 25 ++++++++++++++++++++-----
 web/index.html     |  4 ----
 4 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/dottes.html.header b/dottes.html.header
index 123bd42..6385c67 100644
--- a/dottes.html.header
+++ b/dottes.html.header
@@ -19,8 +19,6 @@
       </div>
     </a>
 
-    <div class="clear"></div>
-
     <div class="grid_12 dottes-body">
       <h1>@SUBTITLE@</h1>
       <p>@INTRO@
@@ -37,8 +35,6 @@
         This is issue @BUILD@.
     </div>
 
-    <div class="clear"></div>
-
     <div class="grid_12 dottes-body">
       <h1>The tunes</h1>
       <table class="dottes-tune-table">
diff --git a/dottes.html.tune b/dottes.html.tune
index 1933426..5a564b5 100644
--- a/dottes.html.tune
+++ b/dottes.html.tune
@@ -19,8 +19,6 @@
       </div>
     </a>
 
-    <div class="clear"></div>
-
     <div class="grid_12 dottes-body">
       <h1>@TITLE@</h1>
       <img class="dottes-png" src="@TUNE@.png" alt="@TITLE@ dots">
diff --git a/web/css/dottes.css b/web/css/dottes.css
index 5b0e45a..7a4a4f5 100644
--- a/web/css/dottes.css
+++ b/web/css/dottes.css
@@ -23,11 +23,6 @@ p
     margin: 10px;
 }
 
-div.clear
-{
-    padding: 5px;
-}
-
 div.banner
 {
     height: 136px;
@@ -35,6 +30,23 @@ div.banner
     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;
+    -moz-border-radius-topleft: 5px;
+    -moz-border-radius-topright: 5px;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+
+    -webkit-border-bottom-left-radius: 5px;
+    -webkit-border-bottom-right-radius: 5px;
+    -moz-border-radius-bottomleft: 5px;
+    -moz-border-radius-bottomright: 5px;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+
+    margin-top: 5px;
+    margin-bottom: 5px;
 }
 
 div.banner h1
@@ -64,6 +76,9 @@ div.dottes-body
     -moz-border-radius-bottomright: 5px;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
+
+    margin-top: 5px;
+    margin-bottom: 5px;
 }
 
 div.dottes-body h1
diff --git a/web/index.html b/web/index.html
index 0527218..ddd7ff4 100644
--- a/web/index.html
+++ b/web/index.html
@@ -19,8 +19,6 @@
       </div>
     </a>
 
-    <div class="clear"></div>
-
     <div class="grid_12 dottes-body">
       <h1>The music of Cry Havoc, a reference.</h1>
       <p>After every practice or dance-out, the musicians of Cry Havoc
@@ -52,8 +50,6 @@
       </div>
     </div>
 
-    <div class="clear"></div>
-
     <div class="grid_12 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