#pad
{
  height: 20px;
}
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssmenus.co.uk
Copyright (c) 2009- Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#menu
{
  padding: 0;
  margin: 0;
  list-style: none;
  width: 700px;
  height : 100px;
  float: left;
}

#menu li
{
  position: relative;
  float: left;
  margin: 0 5px 0 0;
}
#menu li.last
{
  margin: 0;
}
#menu li a
{
  display: block;
  height : 100px;
  width: 95px;
  line-height: 20px;
  padding: 0;
  float: left;
  color: #fff;
  text-decoration: none;
  font-family: "trebuchet MS" , sans-serif;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
}
#menu li a b
{
  position: relative;
  top: 28px;
  font-weight: normal;
}

#menu li#jquery a
{
  background : url(../images/red-off.png);
}
#menu li#selectors a
{
  background : url(../images/orange-off.png);
}
#menu li#events a
{
  background : url(../images/yellow-off.png);
}
#menu li#traversing a
{
  background : url(../images/green-off.png);
}
#menu li#uieffects a
{
  background : url(../images/blue-off.png);
}
#menu li#manipulating a
{
  background : url(../images/indigo-off.png);
}
#menu li#ajax a
{
  background : url(../images/violet-off.png);
}


#menu li#jquery a:hover, #menu li#jquery a.active
{
  background : url(../images/red-on.png);
}

#menu li#selectors a:hover, #menu li#selectors a.active
{
  background : url(../images/orange-on.png);
}
#menu li#events a:hover, #menu li#events a.active
{
  background : url(../images/yellow-on.png);
}
#menu li#traversing a:hover, #menu li#traversing a.active
{
  background : url(../images/green-on.png);
}
#menu li#uieffects a:hover, #menu li#uieffects a.active
{
  background : url(../images/blue-on.png);
}
#menu li#manipulating a:hover, #menu li#manipulating a.active
{
  background : url(../images/indigo-on.png);
}
#menu li#ajax a:hover, #menu li#ajax a.active
{
  background : url(../images/violet-on.png);
}


/* this is for IE6 png transparency fix - note the image path is from the .html file not the .css file */

* html #menu li#jquery a
{
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/red-off.png', sizingMethod='scale');
}
* html #menu li#selectors a
{
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/orange-off.png', sizingMethod='scale');
}
* html #menu li#events a
{
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/yellow-off.png', sizingMethod='scale');
}
* html #menu li#traversing a
{
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/green-off.png', sizingMethod='scale');
}
* html #menu li#uieffects a
{
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/blue-off.png', sizingMethod='scale');
}
* html #menu li#manipulating a
{
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/indigo-off.png', sizingMethod='scale');
}
* html #menu li#ajaxt a
{
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/violet-off.png', sizingMethod='scale');
}

* html #menu li#jquery a:hover
{
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/red-on.png', sizingMethod='scale');
}
* html #menu li#selectors a:hover
{
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/orange-on.png', sizingMethod='scale');
}
* html #menu li#events a:hover
{
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/yellow-on.png', sizingMethod='scale');
}
* html #menu li#traversing a:hover
{
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/green-on.png', sizingMethod='scale');
}
* html #menu li#uieffects a:hover
{
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/blue-on.png', sizingMethod='scale');
}
* html #menu li#manipulating a:hover
{
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/indigo-on.png', sizingMethod='scale');
}
* html #menu li#ajax a:hover
{
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/violet-on.png', sizingMethod='scale');
}