■ .menu a
background:-moz-linear-gradient(top, #333333, #000000);
Firefoxで上から下方向に、#333333から#000000でグラデーションを作ります。-o-はOpera。
background:-webkit-gradient(linear, left top, left bottom, from(#333333), to(#000000));
Chrome、Safari、スマートフォンで左上から左下へ（＝上から下へ）グラデーションを作ります。この記述は古いもので、現在はFirefoxと同じ記述ができますが、変更されたのが１年ほど前であることを踏まえて、今回は古い方を使っています。
IEではグラデーションが使えないので、普通に背景色を指定します。
■ .light
background:rgba(255, 255, 255, 0.2);
RGBで255,255,255（＝#ffffff）、透明度0.2で塗りつぶします。0が透明、1が不透明です。ちなみにrgbaはRed Green Blue Alphaのこと。
■ メニューボタンの高さを変えるときの注意点
.menu aのところのwidthとheight（最初は4em）を変えればボタンサイズも変わりますが、高さを変えると文字の位置がずれます。これは.wordのところのtop:1.1em;というところを随時調節してください。高さは小さくても2emくらいあると良いかなと思います。
■ メニューボタン群の位置
横幅によってはボタンが改行されるため、中央揃えに見えない場合もあります。
適当な位置で改行すると、きちんと中央揃えになります。
IE7は、親要素にfloatを指定していてwidthの指定がない場合、子要素のwidth指定が無視されるバグがあるようです。CSSの最後の方にIE7用というのがあり、26.2emはフォントサイズ中のときの4emのボタン+margin+border５個分のおおよその幅です。
ボタン１個あたり、4em+1em(margin)+4px(border)。borderがピクセルなのでちょうどの指定はできませんので、概算で指定すると良いと思います。
左に寄せたい場合は、
.menu
.menu aの position:relative; left:-50%;
<!--[if IE 7]>〜<![endif]-->
の全てを削除してください。
右寄せは、上記＋.menu { float:right; }です。
■ ボタンに背景画像を指定する場合
グラデーションと組み合わせない場合は、グラデーション部分を削除して指定して下さい。
グラデーションと組み合わせる場合は、必ず背景画像を先に書いて下さい。
IE6、IE7で背景画像と背景色を表示させるためには、グラデーション指定の後に背景色と背景画像を指定しなければなりませんが、他のブラウザでこれを読み込むと上書きされてグラデーションがなくなるので、CSSハックか条件付きコメントが必要です。
IE6と7は背景色だけでいい、という場合はハック等は必要ないです。
ハックを使う場合の指定の順番
1. IE8↑用の、background:url(IMG-URL) #color
2. 各ブラウザ用の背景画像＋グラデーション
3. IE6,7用のbackground:url(IMG-URL) #color（ハック）
1を飛ばして3を条件付きコメントでIEにのみ読み込ませる方法もあります。
8em*2em、ハックを使った場合の背景画像＋グラデーションのサンプル（.lightなし）
Firefoxの背景部分の指定はこんな風です。
background:url(IMG-URL),-moz-linear-gradient(top, #dd8888, #8888ff);
背景色と背景画像を同時に指定する時とは違い、カンマが入ることに注意して下さい。（どうでもいいけどこの背景画像だと字が見にくいですね…）
その他不明な点がありましたらトップのフォームからご連絡ください。
■ ボタンを作るのに参考にさせていただいたページ（英語）
http://girliemac.com/blog/2009/04/30/css3-gradients-no-image-aqua-button/