BODY {color: #000000; background: #FFFFFF; margin-left: 0px; margin-right: 0px; margin-top: 0px;}

/* Step 10 - Clearing the float */
#menu {display:block; width:650px; height:75px; }

/* Step 3 - get rid of the bullets and margin */
#menu ul {margin:0; padding:0; list-style-type:none;}

/* Step 4 and 7 - make the list horizontal and giving a 1px gap */
#menu li {float:left; margin-right:1px;}

/* Step 5 - Adding the initial images */

#menu li.list1 {background:transparent url(../b1.jpg);}
#menu li.list2 {background:transparent url(../b4.jpg);}
#menu li.list3 {background:transparent url(../b6.jpg);}

/* Step 6 - General link styling */

#menu a {display:block; width:200px; height:0; padding-top:55px; color:#000; overflow:hidden;}
/* Hack that will display only in non-IE Browsers */
html>body #menu a {display:block; width:200px; height:0; padding-top:75px; color:#000; overflow:hidden;}

/* hack for older versions of IE with incorrect box model */

* html #menu a:link, * html #menu a:visited {height:60px; height:0;}

/* Step 8 - Adding the background images to the link tags */

#menu a#item1 {background:transparent url(../b2.jpg) -130px -90px no-repeat;}
#menu a#item2 {background:transparent url(../b3.jpg) -130px -90px no-repeat;}
#menu a#item3 {background:transparent url(../b5.jpg) -130px -90px no-repeat;}

/* Step 9 - Adding the :hover style */

#menu a#item1:hover {background-position:0 0; z-index:50;}
#menu a#item2:hover {background-position:0 0; z-index:50;}
#menu a#item3:hover {background-position:0 0; z-index:50;}

* html #menu a:hover {height:50px; height:0;}