.pager {
padding: 3px;
margin: 3px;
font-size:10px; /* Tamaño de los numeros y los "<" */
margin:20px 0px 5px 0px; /* Margen superior, lateral, inferior y derecho, yo lo he puesto así para dar una separación de los contenidos a paginar */
color:#555;
}
.pager a {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #A8A8A8;  /* Lo que hay después del # es el color de los cuadros */
text-decoration: none; /* no underline */
color: #555;
background:#000; /* El color de fondo de los cuadros */
/* Si queréis añadir una imagen de fondo a los cuadros, sería:
background:url(imagen.gif) repeat-x; */
}
.pager a:hover {
background:#BECA97; /* Color de fondo para los cuadros cuando pases el ratón por encima */
/* Os digo lo mismo que antes sobre la imagen
background:url(imagen.gif) repeat-x;*/
padding: 2px 5px 2px 5px;
border: 1px solid #ACACAC; /* Borde los cuadros cuando pases el ratón...*/
text-decoration: none;
color: #000; /* Color del texto cuando pases el ratón por encima... */
}
.big {
background:#BECA97; /* Colo de fondo para la página activa, lo mismo os digo de poner una imagen de fondo: background:url(imagen.gif) repeat-x; */
padding: 2px 5px 2px 5px;
border: 1px solid #555; /* Bordes y debajo el color del texto para el cuadro de la página activa */
color: #000;
}