[css-line-grid] fix bottom example

Author: astearns

css-line-grid/Overview.html

@@ -12,7 +12,7 @@
    rel=dcterms.rights>
   <meta content="CSS Line Grid Module Level 1" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2014-07-22 name=dcterms.date>
+  <meta content=2014-07-23 name=dcterms.date>
   <meta content="Elika Etemad" name=dcterms.creator>
   <meta content="Koji Ishii" name=dcterms.creator>
   <meta content="Alan Stearns" name=dcterms.creator>
@@ -51,13 +51,13 @@
 
    <h1>CSS Line Grid Module Level 1</h1>
 
-   <h2 class="no-num no-toc">Editor's Draft 22 July 2014</h2>
+   <h2 class="no-num no-toc">Editor's Draft 23 July 2014</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a href="http://dev.w3.org/csswg/css-line-grid-1/">
-     http://www.w3.org/TR/2014/ED-css-line-grid-1-20140722/</a>
+     http://www.w3.org/TR/2014/ED-css-line-grid-1-20140723/</a>
 
     <dt>Latest version:
 
@@ -606,11 +606,14 @@ <h3 id=line-snap><span class=secno>3.1. </span> Snapping Line Boxes: the
    </figcaption> </figure></div>
 
   <div class=example>
-   <p>An end-aligned block shifts snapped lines upward from the block-end
-    direction. The shifting distance between any two adjacent snapped lines
-    will be the same as in the other alignment cases. The main difference is
-    that the shifting between snapped and not-snapped lines (or the block
-    edge) occurs below the snapped lines.
+   <p> An end-aligned block also uses two steps, but is simpler than the
+    centered case.
+
+   <p> First, shift the snapping lines as if there were no centering (as in
+    figure 8 above), then end-align the block.
+
+   <p> Second, shift the entire block contents upwards until the last snapped
+    line aligns to a grid line. In this example, the shift is very minor.
    <figure style="float:left;"> <img alt="line positions before snapping"
    src="images/bottom-no-snap.png"> <figcaption> Before snapping
    </figcaption> </figure> <figure style="float:left;"> <img

css-line-grid/Overview.src.html

@@ -457,7 +457,14 @@ <h3 id=line-snap>
 
   <div class="example">
 
-    <p>An end-aligned block shifts snapped lines upward from the block-end direction. The shifting distance between any two adjacent snapped lines will be the same as in the other alignment cases. The main difference is that the shifting between snapped and not-snapped lines (or the block edge) occurs below the snapped lines. 
+    <p>
+      An end-aligned block also uses two steps, but is simpler than the centered case.
+    </p>
+    <p>
+      First, shift the snapping lines as if there were no centering (as in figure 8 above), then end-align the block.
+    </p>
+    <p>
+      Second, shift the entire block contents upwards until the last snapped line aligns to a grid line. In this example, the shift is very minor.
     </p>
     <figure style="float:left;">
       <img src="images/bottom-no-snap.png" 

css-line-grid/examples/positioned-blocks.html

@@ -41,28 +41,22 @@
         line-height: 20px;
     }
 
-    .top .snap .one {
+    .snap .one {
         margin-top: 15px;
     }
-    .top .snap .two {
+    .snap .two {
         margin-top: 10px;
     }
-    .top .snap .three {
+    .snap .three {
         margin-top: 10px;
     }
 
-    .bottom .snap .one {
-        margin-bottom: 10px;
-    }
-    .bottom .snap .two {
-        margin-bottom: 10px;
-    }
     .bottom .snap .three {
         margin-bottom: 3px;
     }
 
-    .center .snap .two {
-        margin-top: 10px;
+    .center .snap .one {
+        margin-top: 0px;
     }
     .center .snap .three {
         margin-top: 10px;