/* CSS Document */

/* HORIZONTAL DROP DOWN MENU  */

/* 
The above sets the width onto the individual lists, <ul>'s, this time as the need to float side by side to make them fit into whatever horizontal space is available to them. This horizontal width is determined by setting the width of the #menu div itself. The #menu div is also floated in order to "contain" it's floated descendants. */

#menu {
position: absolute;
width: 397px; /* set width of entire menu here */
background: #ffffff;
float: left;
top: 0px;
left: 0px;
width: 397px;
height: 112px;
margin: 0;
padding: 0;

}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
display: block;
}

 /* set width of each menu item here */
#menu .item1 { width: 70px; }
#menu .item2 { width: 90px; }
#menu .item3 { width: 129px; }
#menu .item4 { width: 104px; }


/*  COLOURING ETC */

#menu a, #menu h2 {
font-family: arial, helvetica, sans-serif;
display: block;
margin: 0;
color: #594D45;
border-right: 4px solid #ffffff;
text-decoration: none;
text-align: center;
}

#menu h2 {
cursor: hand;
padding-top: 92px;
background: #E3ECD8;
}

#menu a {
background: #D4DEC7;
padding: 2px 3px;
}

#menu a:hover {
text-decoration: none;
color: #A6A09C;
}

#menu .submenu li {
border-top: 3px solid #ffffff;
}

/*   -------- positioning the SUBMENUS --------------

The position: relative; on the <li> elements establish containing blocks for the descendant <ul> elements.

All secondary levels and deeper are given position: absolute; and a high z-index in order to make them appear, drop down above following content. the third level and deeper lists are the ones we want to move so "offset" positioning co-ordinates only required to be input onto them.
*/

#menu li {
position: relative; }

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
top: 20px;
left: 0;
}

/*   -------- HIDING AND REVEALING --------------*/

div#menu ul ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}


/* FIX FOR IE  */
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;} 

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}