/* The menu styling */
/* Remove the padding, margins and bullets from the lists */
.menu, .menu ul, .menu ul ul {list-style-type:none; list-style:none; padding:0; margin:0; width:220px; float:left;}

.menu {margin:0px;}
/* for IE7 to position the tables correctly */
.menu {position:relative; float:left;}

/* for IE5.5 and IE6 to position the tables corectly */
* html .menu {position:static;}

/* Set up the size of the list items and float left to place inline */
.menu li {display:block; float:left; width:150px; margin:0px 0 0 0;}

/* Give the sub level list item a diffent background color to make it 'stand out'. */
.menu li.sub {display:block; float:left; width:150px; margin:0px 0 0 0;}

/* Style and position the table so it takes no part in the menu function. The font size is necessary for IE5.5 */
.menu table {border-collapse:collapse; width:0; height:24px; position:absolute; bottom: 0; top:auto; left:0; font-size:1em;}

/* Default link styling */
.menu li a {display:block; color:#f4c046; font-family:sans-serif, arial; font-size:14px; line-height:23px; height:24px; text-decoration:none;}

/* Style the list OR link hover. Depends on which browser is used */
.menu a:hover {color:#ffe7ae;}

/* For all browsers except IE5.5 and IE6 to keep the hover state through the menu cascade. */
.menu :hover > a {color:#ffe7ae;}

/* Give the link OR list a relative position. Depends on which browser is used */
.menu li.sub:hover,
.menu li.sub a:hover {position:relative;}

.menu a.m1 {
	background-image: url("../images/m1.jpg"); /* This is to preload the hover state */
	background-repeat: no-repeat; 
	height:45px;
	width:220px;
	}

.menu a.m1:hover, .menu a.m1_s {position:relative; background:url('../images/m1_h.jpg'); height:45px;
	width:220px;}

.menu a.m2 {
	background-image: url("../images/m2.jpg"); /* This is to preload the hover state */
	background-repeat: no-repeat; 
	height:45px;
	width:220px;
	}

.menu a.m2:hover, .menu a.m2_s {position:relative; background:url('../images/m2_h.jpg'); height:45px;
	width:220px;}

.menu a.m3 {
	background-image: url("../images/m3.jpg"); /* This is to preload the hover state */
	background-repeat: no-repeat; 
	height:45px;
	width:220px;
	}

.menu a.m3:hover, .menu a.m3_s {position:relative; background:url('../images/m3_h.jpg'); height:45px;
	width:220px;}

.menu a.m4 {
	background-image: url("../images/m4.jpg"); /* This is to preload the hover state */
	background-repeat: no-repeat; 
	height:45px;
	width:220px;
	}

.menu a.m4:hover, .menu a.m4_s {position:relative; background:url('../images/m4_h.jpg'); height:45px;
	width:220px;}

.menu a.m5 {
	background-image: url("../images/m5.jpg"); /* This is to preload the hover state */
	background-repeat: no-repeat; 
	height:38px;
	width:220px;
	}

.menu a.m5:hover, .menu a.m5_s {position:relative; background:url('../images/m5_h.jpg'); height:38px;
	width:220px;}

.menu a.m6 {
	background-image: url("../images/m6.jpg"); /* This is to preload the hover state */
	background-repeat: no-repeat; 
	height:38px;
	width:220px;
	}

.menu a.m6:hover, .menu a.m6_s {position:relative; background:url('../images/m6_h.jpg'); height:38px;
	width:220px;}

.menu a.m7 {
	background-image: url("../images/m7.jpg"); /* This is to preload the hover state */
	background-repeat: no-repeat; 
	height:38px;
	width:220px;
	}

.menu a.m7:hover, .menu a.m7_s {position:relative; background:url('../images/m7_h.jpg'); height:38px;
	width:220px;}


/* keep the 'next' level invisible by placing it off screen. */
.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute;left:-9999px; width:128px; top:0;  background:#578; text-indent:10px;}

/* Position the flyout sub levels to 'pull-up' or 'drop-down' when hovering over the sub level list OR link.  the transparent gif is for IE7 only and need not actually exist. File transparent.gif supplied with zip file */
/* pull up */
.menu :hover ul, 
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul {padding:20px 20px 20px 0; text-align:left; left:220px; bottom:0px; top:-20px; height:70px;  background:#660000; border: 3px solid #75675a} 
/* drop down */
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul {padding:20px 20px 20px 0; left:220px; top:-10px; bottom:auto;}