Menu & Card for Go Ladder

A little animated nav & a player card for a go site.

by nate

HTML

<nav>
    <ul>
        <li><a href="#">About</a></li>
        <li class="current"><a href="#">Ladder</a></li>
        <li><a href="#">Rules</a></li>
        <li><a href="#">Photos</a></li>
    </ul>
</nav>

<div id="ladder">
    <ul class="card">
        <li><h1>Ladder record</h1></li>
        <li class="wins"><b>Wins:</b> 4</li>
        <li class="losses"><b>Losses:</b> 1</li>
        <li class="history"><a href="history.php?memberID=4">View Game History</a></li>
        <li class="aga"><a href="http://agagd.usgo.org/Player_Card.php?key=4566" target="blank">AGA Player Card</a></li>
    </ul>
</div>

CSS

body {
    background-image: url( http://xyzgoclub.com/images/goban.jpg );
    font-family: Lucida Grande;
}

nav {
    background-color: hsl( 180, 24%, 70% );
    border: 1px solid hsla( 180, 33%, 23%, 0.5 );
    font-size: 18px;
    overflow: hidden;
    width: 200px; 
 
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
   
    -moz-box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.2);
    -o-box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.2);
    -webkit-box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.2);
    box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.2);
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    background-color: hsl( 180, 33%, 33% );
    margin-left: -1.5em;
    
    -moz-transition: margin-left 0.2s;
    -o-transition: margin-left 0.2s;
    -webkit-transition: margin-left 0.2s;
    transition: margin-left 0.2s;
}

nav:hover ul li.current {
    margin-left: -1.5em;
}

nav ul li.current,
nav ul li:hover {
    margin: 0;
}

nav ul li:before {
    background-color: hsl( 180, 33%, 33% );
    background-image:
        -moz-linear-gradient( bottom,
            hsl( 180, 33%, 33% ) 0%,
            hsl( 180, 43%, 35% ) 100%
        );
    background-image:
        -webkit-gradient( linear, left bottom, left top,
            from( hsl( 180, 33%, 33% ) ),
            to( hsl( 180, 43%, 35% ) )
        );
    border-right: 1px solid hsla( 180, 33%, 100%, 0.8 );
    color: hsl( 0, 0%, 100% );
    content: '→';
    float: left;
    font-weight: bold;
    margin-right: 0.5em;
    padding: 0.5em;
    text-shadow: 1px 1px 0 hsla( 180, 33%, 23%, 0.5 );
}

nav ul li a {
    background-color: hsl( 180, 24%, 54% );
    background-image:
        -moz-linear-gradient( bottom,
            hsl( 180, 24%, 49% ) 0%,
            hsl( 180, 24%, 54% ) 100%
        );
    background-image:
        -webkit-gradient( linear, left bottom, left top,
            from( hsl( 180, 24%, 49% ) ),
            to( hsl(...