<ul id="pageNav">
	<li><a href="#" class="arrow">< <</a></a></li>
    <li><a href="#" class="currPage">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li><a href="#">12</a></li>
    <li><a href="#">13</a></li>
    <li><a href="#">14</a></li>
    <li><a href="#">15</a></li>
    <li><a href="#" class="arrow">>></a></li>
</ul>

* { margin:0; padding:0;}
body { font:11px Verdana, Geneva, sans-serif; color:#000; padding:10px;}
ul { list-style:none;}
a { text-decoration:none;}
 
#pageNav li { float:left;}
	#pageNav li a { display:block; float:left; padding:2px 5px; border:1px solid #666; margin-left:-1px; color:#fff; background:url(pageNav-bg.gif) repeat-x;}
	#pageNav li a.currPage { background-position:left bottom; color:#000;}
	#pageNav li a:hover { background-position:left bottom; position:relative; padding:4px 10px; margin:-2px -10px 0; opacity:.9; filter:Alpha(opacity=90);}
	#pageNav li a.arrow:hover { position:static; padding:2px 5px; margin:0 -1px 0 0;}