Jquery cycle plugin with number and text paging

Question

I have the basic functionality of the jquery cycle plugin working. I have set up a test page at here but was wondering what would I need to change in order for the paging to resemble this page

This is how I am calling the paging function, but I do not see anything in the plugin itself that would allow me to enclose the pager links in a

$(document).ready(function()
{
    $('.promogallery').before('<div id="promonav">').cycle({
        fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        timeout: 3000,
        pager: '#promonav',
        before: function()
        {
        }
    });
});

Here is the relevant CSS:

/* promonav styling */
#promonav
{
    margin: 5px 0;
    text-align: left;
    position: absolute;
    top: -21px;
}
#promonav a, #promonavcyle strong
{
    margin: 0 5px;
    padding: 3px 5px;
    border: 1px solid #ccc;
    background: transparent;
    text-decoration: none;
    color: #a60000;
}
#promonav a.activeSlide
{
    background: #ddd;
}
#promonav a:focus
{
    outline: none;
}
/* #output { text-align: left; } */

Answer 1

Try the following in your CSS for #promonav a, #promonavcyle strong

 border-style:dotted;