#menu {
	display: inline;
	float: left;
	width: 136px;
	height: auto;
	margin: -3px 0 0 10px;
}

#menu div, #menu div a {
	width: 136px;
	height: 23px;
}

#menu div a {
	float: left;
}

/* IE 6 forced me to do the .cat-here as opposed to just adding the .here class
to the category once it was selected. Doing the latter made my rule .cat.here
and IE 6 fell apart trying to render that. What else it new? */
#menu .cat, #menu .cat-here, #menu .subcat {
	width: 136px;
	height: auto;
	margin-top: 2px;
}

#menu .cat, #menu .cat-here {
	height: 23px;
}

#menu .subcat {
	display: none;
	margin: 0;
}

#menu .subcat div, #menu .subcat div a {
	height: 22px;
	margin: 0;
}

#menu .subcat #signed-in {
	height: auto;
}

#menu .here {
	display: block; 
}

#menu #weather {
	float: left;
	height: 75px;
	margin-top: 10px;
}

/*--- set menu item backgrounds ---*/
#menu #m-home a { background-image: url(/images/menu/home.gif) }
#menu #m-docks a { background-image: url(/images/menu/docks_maps.gif) }
#menu #m-madison a { background-image: url(/images/menu/madison_street.gif) }
#menu #m-lasalle a { background-image: url(/images/menu/lasalle_clark.gif) }
#menu #m-michigan a { background-image: url(/images/menu/michigan_avenue.gif) }
#menu #m-river-east a { background-image: url(/images/menu/river_east_plaza.gif) }
#menu #m-chinatown a { background-image: url(/images/menu/chinatown.gif) }
#menu #m-schedules a { background-image: url(/images/menu/schedules.gif) }
#menu #m-fares a { background-image: url(/images/menu/fares.gif) }
#menu #m-tickets a { background-image: url(/images/menu/tickets_fares.gif) }
#menu #m-monthly-pass a { background-image: url(/images/menu/monthly_pass.gif) }
#menu #m-frequent-riders a { background-image: url(/images/menu/frequent_riders.gif) }
#menu #m-water-taxi-club a { background-image: url(/images/menu/water_taxi_club.gif) }
#menu #m-information a { background-image: url(/images/menu/information.gif) }
#menu #m-about-us a { background-image: url(/images/menu/about_us.gif) }
#menu #m-crew a { background-image: url(/images/menu/crew.gif) }
#menu #m-news-events a { background-image: url(/images/menu/news_events.gif) }
#menu #m-connections a { background-image: url(/images/menu/connections.gif) }
#menu #m-tourism a { background-image: url(/images/menu/tourism.gif) }
#menu #m-environment a { background-image: url(/images/menu/environment.gif) }
#menu #m-faq a { background-image: url(/images/menu/faq.gif) }
#menu #m-store a { background-image: url(/images/menu/water_taxi_store.gif) }
#menu #m-charter a { background-image: url(/images/menu/charter.gif) }
#menu #m-charter-cwt a { background-image: url(/images/menu/charter_cwt.gif) }
#menu #m-group-transport a { background-image: url(/images/menu/group.gif) }
#menu #m-contact a { background-image: url(/images/menu/contact_us.gif) }
#menu #m-wendella a { background-image: url(/images/menu/wendella_tours.gif) }
#menu #m-login a { background-image: url(/images/menu/login.gif) }

/*--- default menu items ---*/
/*--- background image position is set at 0,0 with no repeat ---*/
#menu .cat a,
#menu .cat-here a,
#menu .subcat a {
	background-position: 0 0;
	background-repeat: no-repeat;
}

/*--- selected menu items ---*/
/*--- shift background image negative the width of one menu item ---*/
#menu .cat-here a,
#menu .subcat .here a {
	background-position: -136px 0;
}

/*--- hover menu items ---*/
/*--- shift background image negative the width of two menu items ---*/
#menu .cat a:hover,
#menu .cat-here a:hover,
#menu .subcat a:hover {
	background-position: -272px 0;
}