From c293ec7665fb6adec6fea72a0bef194e21f7adcf Mon Sep 17 00:00:00 2001
From: Samuel Clay <samuel@ofbrooklyn.com>
Date: Wed, 7 Jul 2010 17:20:37 -0400
Subject: [PATCH] Moved features page indicators to bottom of module.

---
 media/css/reader.css         | 22 ++++++++++++++++++++++
 templates/reader/feeds.xhtml | 20 ++++++++++++--------
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/media/css/reader.css b/media/css/reader.css
index 4395cfeec..5fd260c13 100644
--- a/media/css/reader.css
+++ b/media/css/reader.css
@@ -1954,6 +1954,14 @@ background: transparent;
     padding: 8px 12px 6px;
 }
 
+.NB-account .NB-module .NB-module-header-left {
+    float: left;
+}
+.NB-account .NB-module .NB-module-header-center {
+    text-align: center;
+    margin: 0 auto;
+    width: 132px;
+}
 .NB-account .NB-module .NB-module-header-right {
     font-size: 13px;
     line-height: 16px;
@@ -2047,6 +2055,18 @@ background: transparent;
 /* = How it Works Module = */
 /* ======================= */
 
+.NB-module-howitworks {
+    position: relative;
+}
+
+.NB-module-howitworks .NB-howitworks-page-indicators {
+    position: absolute;
+    width: 132px;
+    height: 20px;
+    right: 64px;
+    bottom: 0px;
+}
+
 .NB-module-howitworks .NB-howitworks-page {
     display: none;
     overflow: hidden;
@@ -2071,6 +2091,8 @@ background: transparent;
     float: left;
     line-height: 30px;
     font-size: 22px;
+    color: #303030;
+    text-shadow: 1px 1px 0px #F0F0F0;
 }
 
 .NB-module-howitworks .NB-howitworks-page .NB-howitworks-page-description td {
diff --git a/templates/reader/feeds.xhtml b/templates/reader/feeds.xhtml
index c11d8920d..00c20bc01 100644
--- a/templates/reader/feeds.xhtml
+++ b/templates/reader/feeds.xhtml
@@ -81,19 +81,23 @@
       
       <div class="NB-module NB-module-howitworks">
         <h5 class="NB-module-header">
-          How It Works
+          <div class="NB-module-header-left">
+            How It Works
+          </div>
           <div class="NB-module-header-right">
-            <a href="#" class="NB-module-page-indicator {% if howitworks_page == 0 %}NB-active{% endif %}"></a>
-            <a href="#" class="NB-module-page-indicator {% if howitworks_page == 1 %}NB-active{% endif %}"></a>
-            <a href="#" class="NB-module-page-indicator {% if howitworks_page == 2 %}NB-active{% endif %}"></a>
-            <a href="#" class="NB-module-page-indicator {% if howitworks_page == 3 %}NB-active{% endif %}"></a>
-            <a href="#" class="NB-module-page-indicator {% if howitworks_page == 4 %}NB-active{% endif %}"></a>
-            <a href="#" class="NB-module-page-indicator {% if howitworks_page == 5 %}NB-active{% endif %}"></a>
-          
             <a href="#" class="NB-module-direction NB-module-previous-page {% if howitworks_page == 0 %}NB-disabled{% endif %}"></a>
             <a href="#" class="NB-module-direction NB-module-next-page {% if howitworks_page == 5 %}NB-disabled{% endif %}"></a>
           </div>
         </h5>
+        
+        <div class="NB-howitworks-page-indicators">
+          <a href="#" class="NB-module-page-indicator {% if howitworks_page == 0 %}NB-active{% endif %}"></a>
+          <a href="#" class="NB-module-page-indicator {% if howitworks_page == 1 %}NB-active{% endif %}"></a>
+          <a href="#" class="NB-module-page-indicator {% if howitworks_page == 2 %}NB-active{% endif %}"></a>
+          <a href="#" class="NB-module-page-indicator {% if howitworks_page == 3 %}NB-active{% endif %}"></a>
+          <a href="#" class="NB-module-page-indicator {% if howitworks_page == 4 %}NB-active{% endif %}"></a>
+          <a href="#" class="NB-module-page-indicator {% if howitworks_page == 5 %}NB-active{% endif %}"></a>
+        </div>
       
         <div class="NB-howitworks-page {% if howitworks_page == 0 %}NB-active{% endif %}">
           <div class="NB-howitworks-page-image">