/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/image_drop.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

#multi-level {height:30px; position:relative; z-index:500; 
text-align:center; width: 997px; margin: 0 auto; background: url(drop_0.gif) 
no-repeat center center;}
 
/* The menu styling */
/* Remove the padding, margins and bullets from the lists */

.menu, .menu ul {list-style-type:none; padding:0; margin:0; font-family:arial, sans-serif; font-size:11px; }
.menu {display:inline-block; text-align:left;} 
/* Set up the size of the list items and float left to place inline */
.menu li.top {display:block; float:left; position:relative;}

/* 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:0; position:absolute; top:0; left:0;}

/* Default link styling */
.menu li.top a.top_link {display:block; float:left; height:30px; line-height:30px; text-decoration:none; color:#fff; background: url(image_drop_1a.gif); padding:0;}
.menu li.top a.top_link span.span_top {display:block; float:left; height:30px; background: url(image_drop_1a.gif) right top; padding:0 15px 0 0;}
.menu li.top a.top_link b.b_top {display:block; float:left; height:30px; width:29px;}

.menu li.top a.top_link span.drop {background: url(image_drop_0a.gif) right top; padding:0 22px 0 0;}

.menu li a#home b.b_top {background:transparent url(home.gif) no-repeat center center;}
.menu li a#blue b.b_top {background:transparent url(blue.gif) no-repeat center center;}
.menu li a#pink b.b_top {background:transparent url(pink.gif) no-repeat center center;}
.menu li a#red-orange b.b_top {background:transparent url(red.gif) no-repeat center center;}
.menu li a#white b.b_top {background:transparent url(white.gif) no-repeat center center;}
.menu li a#yellow b.b_top {background:transparent url(yellow.gif) no-repeat center center;}
.menu li a#mushrooms b.b_top {background:transparent url(mushroom.gif) no-repeat center center;}
.menu li a#email b.b_top {background:transparent url(email.gif) no-repeat center center;}
.menu li a#map b.b_top {background:transparent url(map.gif) no-repeat center center;}
.menu li a#qmark b.b_top {background:transparent url(qmark.gif) no-repeat center center;}
.menu li a#bug b.b_top {background:transparent url(bug.gif) no-repeat center center;}


/* Style the list OR link hover. Depends on which browser is used */
.menu a:hover {visibility:visible; cursor:pointer; position:relative;}
.menu li:hover {position:relative; z-index:120;}

/* Style the top level links */
.menu li.top a.top_link:hover,
.menu li.top:hover a.top_link {background: url(image_drop_1b.gif);}
.menu li.top a.top_link:hover span.span_top,
.menu li.top:hover a.top_link span.span_top {background: url(image_drop_1b.gif) right top;}
.menu li.top a.top_link:hover span.drop,
.menu li.top:hover a.top_link span.drop {background: url(image_drop_0b.gif) right top;}

/* keep the 'next' level invisible by placing it off screen. */
.menu ul, 
.menu 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; top:-9999px; width:0; height:0;}

/* Style the drop down sub level links */
.menu :hover ul.sub {left:0; top:30px; background: transparent url(transparent.gif); padding:3px 0 0 0; white-space:nowrap; width:120px; height:auto;}
.menu :hover ul.sub li {display:block; float:left;}
.menu :hover ul.sub li a {display:block; float:left; height:25px; width:400px; line-height:25px; color:#000; text-decoration:none; padding:0; background: url(dropa_0.gif) no-repeat;}

/* All this lot is for IE6, believe it or not, to style the fly outs */
.menu :hover ul.sub li a span,
.menu :hover ul.sub li a.fly:hover ul li a span,
.menu :hover ul.sub li a.fly:hover ul li a.fly:hover ul li a span,
.menu :hover ul.sub li a.fly:hover ul li a.fly:hover ul li a.fly:hover ul li a span, 
.menu :hover ul.sub li a.fly:hover ul li a.fly:hover ul li a.fly:hover ul li a.fly:hover ul li a span
{display:block; float:left; background: url(drop_0.gif) right top; height:25px; width:125px; padding:0 10px 0 5px; font-weight:normal; color:#000;}

.menu :hover ul.sub li a.fly span,
.menu :hover ul.sub li a.fly:hover ul li a.fly span,
.menu :hover ul.sub li a.fly:hover ul li a.fly:hover ul li a.fly span,
.menu :hover ul.sub li a.fly:hover ul li a.fly:hover ul li a.fly:hover ul li a.fly span,
.menu :hover ul.sub li a.fly:hover ul li a.fly:hover ul li a.fly:hover ul li a.fly:hover ul li a.fly span
{background: url(dropb_0.gif) right top; color:#000;}

.menu :hover ul.sub li a:hover,
.menu :hover ul.sub li a:hover ul li a:hover,
.menu :hover ul.sub li a:hover ul li a:hover ul li a:hover,
.menu :hover ul.sub li a:hover ul li a:hover ul li a:hover ul li a:hover,
.menu :hover ul.sub li a:hover ul li a:hover ul li a:hover ul li a:hover ul li a:hover
{background: url(dropba_1.gif) no-repeat; color:#fff;}

.menu :hover ul.sub li a:hover span,
.menu :hover ul.sub li a.fly:hover ul li a:hover span,
.menu :hover ul.sub li a.fly:hover ul li a.fly:hover ul li a:hover span,
.menu :hover ul.sub li a.fly:hover ul li a.fly:hover ul li a.fly:hover ul li a:hover span,
.menu :hover ul.sub li a.fly:hover ul li a.fly:hover ul li a.fly:hover ul li a.fly:hover ul li a:hover span
{background: url(drop_1.gif) right top; color:#fff;}

.menu :hover ul.sub li a.fly:hover span,
.menu :hover ul.sub li a.fly:hover ul li a.fly:hover span,
.menu :hover ul.sub li a.fly:hover ul li a.fly:hover ul li a.fly:hover span,
.menu :hover ul.sub li a.fly:hover ul li a.fly:hover ul li a.fly:hover ul li a.fly:hover span,
.menu :hover ul.sub li a.fly:hover ul li a.fly:hover ul li a.fly:hover ul li a.fly:hover ul li a.fly:hover span
{background:url(dropb_1.gif) right top; color:#fff;}

/* the next two lines keep the menu trail :hover state for IE7 and non-IE browsers */
.menu :hover ul li:hover > a.fly {background:url(dropba_1.gif) no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly span {background:url(dropb_1.gif) right top; color:#fff;}

/* Style the images to the left of each link */
.menu ul.sub b {display:block; float:left; background:transparent url(book.gif) no-repeat center center; height:25px; width:25px;}
.menu ul.sub b.house {background:transparent url(house.gif) no-repeat center center;}
.menu ul.sub b.info {background:transparent url(info.gif) no-repeat center center;}
.menu ul.sub b.email {background:transparent url(email.gif) no-repeat center center;}
.menu ul.sub b.qmark {background:transparent url(qmark.gif) no-repeat center center;}
.menu ul.sub b.whitek {background:transparent url(whitek.gif) no-repeat center center;}
.menu ul.sub b.whiteb {background:transparent url(whiteb.gif) no-repeat center center;}
.menu ul.sub b.whitec {background:transparent url(whitec.gif) no-repeat center center;}
.menu ul.sub b.whited {background:transparent url(whited.gif) no-repeat center center;}
.menu ul.sub b.whitee {background:transparent url(whitee.gif) no-repeat center center;}
.menu ul.sub b.whitef {background:transparent url(whitef.gif) no-repeat center center;}
.menu ul.sub b.whiteg {background:transparent url(whiteg.gif) no-repeat center center;}
.menu ul.sub b.whiteh {background:transparent url(whiteh.gif) no-repeat center center;}
.menu ul.sub b.whitei {background:transparent url(whitei.gif) no-repeat center center;}
.menu ul.sub b.whitej {background:transparent url(whitej.gif) no-repeat center center;}
.menu ul.sub b.blue {background:transparent url(blue.gif) no-repeat center center;}
.menu ul.sub b.bluea {background:transparent url(bluea.gif) no-repeat center center;}
.menu ul.sub b.blueb {background:transparent url(blueb.gif) no-repeat center center;}
.menu ul.sub b.bluec {background:transparent url(bluec.gif) no-repeat center center;}
.menu ul.sub b.blued{background:transparent url(blued.gif) no-repeat center center;}
.menu ul.sub b.bluee {background:transparent url(bluee.gif) no-repeat center center;}
.menu ul.sub b.bluef {background:transparent url(bluef.gif) no-repeat center center;}
.menu ul.sub b.blueg {background:transparent url(blueg.gif) no-repeat center center;}
.menu ul.sub b.yellowa {background:transparent url(yellowa.gif) no-repeat center center;}
.menu ul.sub b.yellowb {background:transparent url(yellowb.gif) no-repeat center center;}
.menu ul.sub b.yellowc {background:transparent url(yellowc.gif) no-repeat center center;}
.menu ul.sub b.yellowd {background:transparent url(yellowd.gif) no-repeat center center;}
.menu ul.sub b.yellowe {background:transparent url(yellowe.gif) no-repeat center center;}
.menu ul.sub b.yellowf {background:transparent url(yellowf.gif) no-repeat center center;}
.menu ul.sub b.yellowg {background:transparent url(yellowg.gif) no-repeat center center;}
.menu ul.sub b.red {background:transparent url(red.gif) no-repeat center center;}
.menu ul.sub b.reda {background:transparent url(reda.gif) no-repeat center center;}
.menu ul.sub b.redb {background:transparent url(redb.gif) no-repeat center center;}
.menu ul.sub b.redc {background:transparent url(redc.gif) no-repeat center center;}
.menu ul.sub b.whitea {background:transparent url(white-a.gif) no-repeat center center;}
.menu ul.sub b.map {background:transparent url(map.gif) no-repeat center center;}
.menu ul.sub b.mushroom {background:transparent url(mushroom.gif) no-repeat center center;}
.menu ul.sub b.mushrooma {background:transparent url(mushrooma.gif) no-repeat center center;}
.menu ul.sub b.mushroomb {background:transparent url(mushroomb.gif) no-repeat center center;}
.menu ul.sub b.mushroomc {background:transparent url(mushroomc.gif) no-repeat center center;}
.menu ul.sub b.mushroomd {background:transparent url(mushroomd.gif) no-repeat center center;}
.menu ul.sub b.mushroome {background:transparent url(mushroome.gif) no-repeat center center;}
.menu ul.sub b.bug {background:transparent url(bug.gif) no-repeat center center;}
.menu ul.sub b.mushroomf {background:transparent url(mushroomf.gif) no-repeat center center;}
.menu ul.sub b.pinka {background:transparent url(pinka.gif) no-repeat center center;}
.menu ul.sub b.pinkb {background:transparent url(pinkb.gif) no-repeat center center;}
.menu ul.sub b.pinkc {background:transparent url(pinkc.gif) no-repeat center center;}
.menu ul.sub b.pinkd {background:transparent url(pinkd.gif) no-repeat center center;}
.menu ul.sub b.moth {background:transparent url(moth.gif) no-repeat center center;}
.menu ul.sub b.elk {background:transparent url(elk.gif) no-repeat center center;}
.menu ul.sub b.movie {background:transparent url(movie.gif) no-repeat center center;}
.menu ul.sub b.popcorn {background:transparent url(popcorn.gif) no-repeat center center;}
.menu ul.sub b.latin {background:transparent url(latin.png) no-repeat center center;}

/* Position the flyouts */
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:141px; top:-5px; background:transparent url(transparent.gif); padding:5px 5px 5px 0; white-space:nowrap; width:120px; z-index:120; height:auto;}