circles.css

/*
 * We have a 220x220px area with 50% rounded radius, effectively
 * creating a circle.  We'll color the circle with a modern mellow
 * cool blue with a bold white font smack in the middle.
 */
.lakepark-round
{
        font-size: 36px;
        font-weight: 800;
 
        height: 220px;
        width: 220px;
        
        /* I just learned how to do verticle alignment! */
        line-height: 220px; 
 
        border-radius: 50px;
        border-radius: 50%;
 
        display: block;
}
 
/*
 * Hoover will change the circle above into the cool orange color.  It will also
 * enlarge the font of the enclosed text.  It has a cool dramatic effect.
 */
.lakepark-round:hover
{
        font-size: 48px;
        font-weight: 800;
 
        height: 220px;
        width: 220px;
        line-height: 220px;
 
        border-radius: 50%;
 
        display: block;
}
 
/* 
 * Separate out the color to minimize code replication if you want multiple colors.
 */
.lakepark-round-blue
{
        background: #5DB9C2;
}
 
.lakepark-round-blue:hover
{
        background: #F16651;
}