CSS unordered list calendar

I a currently (finally) working on a new version of my ajax availability calendar.  I created this calender about a year and half ago and, whilst it has been very successful and is being used in many websites around the world, for a long time now I have been promising to create a new version.
see demo

This new version is going to have two primary differences, it will use mootools for the javascript requirements and it will use mostly css for the dates (the current version relies on images which was always going to be a problem)

So, I am only just starting out on this but I thought that I should share my first steps at creating the new calendar – the css unordered list calendar.

I know that there are loads of these out there, but no harm in adding mine 😉

The CSS

.clear{    clear:both;}<br />
.cal_month{<br />
 /* month div*/<br />
 width:180px;<br />
 border:1px solid #006699;<br />
 background:#33ccff;<br />
 color:#FFF;<br />
 line-height:21px;<br />
 -moz-border-radius: 3px;<br />
 -webkit-border-radius: 3px;<br />
 padding-bottom:6px;<br />
 }<br />
.cal_month .cal_title{<br />
 border-bottom: 1px solid #CCC;<br />
 background:#006699;<br />
 padding:2px;<br />
 text-align:center;<br />
 }</p>
<p>.cal_month ul{<br />
 clear:both;<br />
 list-style:none;<br />
 margin:0px;<br />
 padding:4px;<br />
 margin:auto;<br />
 width:168px;<br />
 }<br />
.cal_month ul li{<br />
 float:left;<br />
 width:21px;<br />
 height:21px;<br />
 border:1px solid #6c6c6c;<br />
 margin-right:1px;<br />
 margin-bottom:1px;<br />
 text-align:center;<br />
 background:#FFF;<br />
 color:#333;<br />
 font-size:90%;<br />
 -moz-border-radius: 3px;<br />
 -webkit-border-radius: 3px;<br />
 }<br />
.cal_month ul li.cal_weekday{<br />
 color:#111;<br />
 background:#DDD;<br />
 }<br />
.cal_month ul li.cal_empty{<br />
 border:1px solid #33ccff;<br />
 background:none;<br />
 }<br />
.cal_month ul li.today{<br />
 border:1px solid #000;<br />
 background:#DDD;<br />
 }

the html

<div><br />
 <div>July 2009</div><br />
 <ul><br />
 <li> S</li><br />
 <li> M</li><br />
 <li> T</li><br />
 <li> W</li><br />
 <li> T</li><br />
 <li> F</li><br />
 <li> S</li><br />
 <li>&amp;nbsp;</li><br />
 <li>&amp;nbsp;</li><br />
 <li>&amp;nbsp;</li><br />
 <li title=&quot;2009-07-01&quot;>1</li><br />
 <li title=&quot;2009-07-02&quot;>2</li><br />
 <li title=&quot;2009-07-03&quot;>3</li><br />
 <li title=&quot;2009-07-04&quot;>4</li><br />
 <li title=&quot;2009-07-05&quot;>5</li><br />
 <li title=&quot;2009-07-06&quot;>6</li><br />
 <li title=&quot;2009-07-07&quot;>7</li><br />
 <li title=&quot;2009-07-08&quot;>8</li><br />
 <li title=&quot;2009-07-09&quot;>9</li><br />
 <li title=&quot;2009-07-10&quot;>10</li><br />
 <li title=&quot;2009-07-11&quot;>11</li><br />
 <li title=&quot;2009-07-12&quot;>12</li><br />
 <li title=&quot;2009-07-13&quot;>13</li><br />
 <li title=&quot;2009-07-14&quot;>14</li><br />
 <li title=&quot;2009-07-15&quot;>15</li><br />
 <li title=&quot;2009-07-16&quot;>16</li><br />
 <li title=&quot;2009-07-17&quot;>17</li><br />
 <li title=&quot;2009-07-18&quot;>18</li><br />
 <li title=&quot;2009-07-19&quot;>19</li><br />
 <li title=&quot;2009-07-20&quot;>20</li><br />
 <li title=&quot;2009-07-21&quot;>21</li><br />
 <li title=&quot;2009-07-22&quot;>22</li><br />
 <li title=&quot;2009-07-23&quot;>23</li><br />
 <li title=&quot;2009-07-24&quot;>24</li><br />
 <li title=&quot;2009-07-25&quot;>25</li><br />
 <li title=&quot;2009-07-26&quot;>26</li><br />
 <li title=&quot;2009-07-27&quot;>27</li><br />
 <li title=&quot;2009-07-28&quot;>28</li><br />
 <li title=&quot;2009-07-29&quot;>29</li><br />
 <li title=&quot;2009-07-30&quot;>30</li><br />
 <li title=&quot;2009-07-31&quot;>31</li><br />
 <li>&amp;nbsp;</li><br />
 </ul><br />
 <div></div><br />
 </div>

I have tested it on many browsers but please let me know if it fails on yours 😉