table#circles
{
/*    width: 420px; */
/*    border: 1px solid #ccc; */
    background-color: #00F;/* maybe: #0190ea; */
    color: #000;
    margin-left: auto;                  /* Center the table.. */
    margin-right: auto;                 /* ..on the page      */
}


a.circle, div.circle
{
    display: block;

    width: 100px;
    margin-left: auto;
    margin-right: auto;

    text-align: center;


    font: bold 1em sans-serif;
    text-decoration: none;
    background-image: url('/images/circle_100.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-color: #00F; /* not this #1E90FF; */
    color: #000000;
}

div.circle
{
    height: 100px;
    padding: 0;
}

a.circle /* default settings are for one line of link text only */
{
    height: 60px;
    padding: 40px 10px 0px 10px;/*   t r b l */
}

a.fourline  /* four lines of link text */
{
    height: 80px;
    padding: 20px 10px 0px 10px;/*   t r b l */
}

a.threeline  /* three lines of link text */
{
    height: 75px;
    padding: 25px 10px 0px 10px;/*   t r b l */
}

a.twoline /* two lines of link text */
{
    height: 65px;
    padding: 35px 10px 0px 10px;
    
}

a.circle:hover
{
    text-decoration: underline;
}