Paginierung - Pagination

dabblet.css

/* Paginierung - Pagination */

/* Die Navigation horizontal machen */
.pagination, .pagination li { list-style-type: none; margin: 0; padding: 0; float: left;}

.pagination {padding: 20px; background:#f2f2f2; }
/* Grundformatierungen für Links und aktive */
.pagination a, .pagination .active { display:inline-block; padding:0px 9px; margin-right:4px;}
.pagination a { border-radius:3px; border:solid 1px #c0c0c0; text-decoration:none; color:#717171; box-shadow:inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);}
.pagination a:hover, .pagination a:focus {
  background:#fefefe;
  background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0));
  background:-moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0)
}
.pagination .active { border:1px solid #616161; background:#616161; color:#f0f0f0;}

/* styling basics */
html {padding: 20px 0; background-color: #efefef;}
body {width: 80%; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 14px;}

/* clearfix */
body:after { clear:both; content:"."; display:block; font-size:0; height:0; visibility:hidden; }
body { display:block; } /* extra for Safari */
body { *height:1%; }  /* trigger hasLayout for IE6 + 7 */

dabblet.html

<!-- Paginierung -->
<ul class="pagination">
    <li><a href="#">first</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><span class="active">4</span></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">last</a></li>
</ul>

settings.json

{"view":"split","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}