Additional style changes to navigation; add three navigation images

mediagoblin/static/css/base.css

@@ -205,14 +205,14 @@ img.media_icon{
 /* navigation */
 
 .navigation_button{
-  width: 139px;
+  width:139px;
   display:block;
   float:left;
-  text-align: center;
-  background-color: #393939;
-  text-decoration: none;
-  padding: 6px 0pt;
-  font-family: 'Carter One', arial, serif;
+  text-align:center;
+  background-color:#393939;
+  text-decoration:none;
+  padding:12px 0pt;
+  font-family:'Carter One', arial, serif;
   font-size:2em;
   margin:0 0 20px
 }

mediagoblin/templates/mediagoblin/utils/prev_next.html

@@ -24,20 +24,23 @@
   {# There are no previous entries for the very first media entry #}
   {% if prev_entry_url %}
     <a class="navigation_button navigation_left" href="{{ prev_entry_url }}">
-      &lt;
+      <img src="/mgoblin_static/images/navigation_left.png" alt="Previous image" />
     </a>
   {% else %}
     {# This is the first entry. display greyed-out 'previous' image #}
-    <p class="navigation_button">X</p>
+    <p class="navigation_button navigation_left">
+      <img src="/mgoblin_static/images/navigation_end.png" alt="No previous images" />
+    </p>
   {% endif %}
-
   {# Likewise, this could be the very last media entry #}
   {% if next_entry_url %}
     <a class="navigation_button" href="{{ next_entry_url }}">
-       &gt;
+      <img src="/mgoblin_static/images/navigation_right.png" alt="Next image" />
     </a>
   {% else %}
     {# This is the last entry. display greyed-out 'next' image #}
-    <p class="navigation_button">X</p>
+    <p class="navigation_button">
+      <img src="/mgoblin_static/images/navigation_end.png" alt="No following images" />
+    </p>
   {% endif %}
 </div>