diff --git a/css/pear.css b/css/pear.css
index d49b19d1..475a0757 100644
--- a/css/pear.css
+++ b/css/pear.css
@@ -116,3 +116,30 @@ a, .g-menu a, #g-dialog a, .g-button, .g-button:hover, .g-button:active, a.ui-st
     padding: 1em 20px;
     position: relative;
 }
+
+.g-paginator {
+ margin-bottom: 5px;
+ margin-left: 15px;
+ margin-right: 15px;
+ padding-top: 6px;
+}
+
+a.buttonFirst { background-position: 0px 0px !important; }
+a.buttonFirst:hover { background-position: -15px 0px !important; }
+a.buttonPrev { background-position:  0px -15px !important; }
+a.buttonPrev:hover { background-position:  -15px -15px !important; }
+a.buttonNext { background-position: 0px -30px !important;}
+a.buttonNext:hover { background-position: -15px -30px !important;}
+a.buttonLast { background-position: 0px -45px !important; }
+a.buttonLast:hover { background-position: -15px -45px !important; }
+
+a.buttonNext, a.buttonLast { float: right; }
+a.buttonFirst, a.buttonPrev { float: left; }
+
+.g-paginator .buttonAction {
+	background: url("../icons/paginator.gif") no-repeat 0 0;
+	height: 15px;
+	width: 15px;
+	margin-left: 0;
+	display: block;
+}
diff --git a/css/screen.css b/css/screen.css
index a49b8c28..6bac8319 100644
--- a/css/screen.css
+++ b/css/screen.css
@@ -988,10 +988,6 @@ div#g-action-status {
 
 /* Pagination ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
-.g-paginator {
-  padding: .2em 0;
-  width: 100%;
-}
 
 .g-paginator li {
   float: left;
diff --git a/icons/first.gif b/icons/first.gif
deleted file mode 100644
index 8379f70d..00000000
Binary files a/icons/first.gif and /dev/null differ
diff --git a/icons/last.gif b/icons/last.gif
deleted file mode 100644
index 2b526aac..00000000
Binary files a/icons/last.gif and /dev/null differ
diff --git a/icons/next.gif b/icons/next.gif
deleted file mode 100644
index 38becb6a..00000000
Binary files a/icons/next.gif and /dev/null differ
diff --git a/icons/paginator.gif b/icons/paginator.gif
new file mode 100644
index 00000000..fb884748
Binary files /dev/null and b/icons/paginator.gif differ
diff --git a/icons/prev.gif b/icons/prev.gif
deleted file mode 100644
index 149864e4..00000000
Binary files a/icons/prev.gif and /dev/null differ
diff --git a/js/pear.js b/js/pear.js
index c342e33b..1f78bba7 100644
--- a/js/pear.js
+++ b/js/pear.js
@@ -195,7 +195,7 @@ function mosaicResize()
 		$('#img_detail').css({'height': iHeight+"px", 'width':iWidth+"px"});
 
 	myWidth=myWidth-7;
-	try{var myNav=document.getElementById('gbNavigator');if(myNav.innerHTML != ""){myHeight=myHeight-170;}}catch(e){myHeight=myHeight-142;}
+	($('#paginator').length != 0) ? myHeight-=165: myHeight-=138;
 
 	if ( !mosaicView )
 	{
diff --git a/views/paginator.html.php b/views/paginator.html.php
index 4fbe4ae6..a0595f4f 100644
--- a/views/paginator.html.php
+++ b/views/paginator.html.php
@@ -25,27 +25,20 @@
 //   $position                - the position number of this photo
 //
 ?>
-
-<ul class="g-paginator ui-helper-clearfix" style="display: none;">
+<? if(isset($first_page_url) || isset($last_page_url)): ?>
+<ul id="paginator" class="g-paginator ui-helper-clearfix">
   <li class="g-first">
   <? if ($page_type == "collection"): ?>
     <? if (isset($first_page_url)): ?>
-      <a href="<?= $first_page_url ?>" class="g-button ui-icon-left ui-state-default ui-corner-all">
-        <span class="ui-icon ui-icon-seek-first"></span><?= t("First") ?></a>
-    <? else: ?>
-      <a class="g-button ui-icon-left ui-state-disabled ui-corner-all">
-        <span class="ui-icon ui-icon-seek-first"></span><?= t("First") ?></a>
+      <a href="<?= $first_page_url ?>" class="buttonAction buttonFirst" title="<?= t("First") ?>"> </a>
     <? endif ?>
   <? endif ?>
 
   <? if (isset($previous_page_url)): ?>
-    <a href="<?= $previous_page_url ?>" class="g-button ui-icon-left ui-state-default ui-corner-all">
-      <span class="ui-icon ui-icon-seek-prev"></span><?= t("Previous") ?></a>
-  <? else: ?>
-    <a class="g-button ui-icon-left ui-state-disabled ui-corner-all">
-      <span class="ui-icon ui-icon-seek-prev"></span><?= t("Previous") ?></a>
+    <a href="<?= $previous_page_url ?>" class="buttonAction buttonPrev" title="<?= t("Previous") ?>"> </a>
   <? endif ?>
-  </li>
+  &nbsp;
+	</li>
 
   <li class="g-info">
     <? if ($total): ?>
@@ -66,22 +59,16 @@
   </li>
 
   <li class="g-text-right">
-  <? if (isset($next_page_url)): ?>
-    <a href="<?= $next_page_url ?>" class="g-button ui-icon-right ui-state-default ui-corner-all">
-      <span class="ui-icon ui-icon-seek-next"></span><?= t("Next") ?></a>
-  <? else: ?>
-    <a class="g-button ui-state-disabled ui-icon-right ui-corner-all">
-      <span class="ui-icon ui-icon-seek-next"></span><?= t("Next") ?></a>
-  <? endif ?>
-
   <? if ($page_type == "collection"): ?>
     <? if (isset($last_page_url)): ?>
-      <a href="<?= $last_page_url ?>" class="g-button ui-icon-right ui-state-default ui-corner-all">
-        <span class="ui-icon ui-icon-seek-end"></span><?= t("Last") ?></a>
-    <? else: ?>
-      <a class="g-button ui-state-disabled ui-icon-right ui-corner-all">
-        <span class="ui-icon ui-icon-seek-end"></span><?= t("Last") ?></a>
+      <a href="<?= $last_page_url ?>" class="buttonAction buttonLast" title="<?= t("Last") ?>"> </a>
     <? endif ?>
   <? endif ?>
+  <? if (isset($next_page_url)): ?>
+    <a href="<?= $next_page_url ?>" class="buttonAction buttonNext" title="<?= t("Next") ?>"> </a>
+  <? endif ?>
+
+  &nbsp;
   </li>
 </ul>
+<? endif ?>