/*
# $Id$
#
# UlMenu
# James Gauld (james@thundermonkey.net)
#
# This is the core set of style rules that govern the basic positioning and
# visibility of the various menu elements.
# Do not change these for purposes of customizing the visual style, instead override
# some rules in the "ulmenu.custom.css" stylesheet.
#
# All menu types use the "ul.ulmenu" class, but are also given a class specific to
# their particular type:
#	vertical menus have an additional "ul.ulmenu_v" class
#	horizontal menus have an additional "ul.ulmenu_v" class
*/

/*
#--------------------------------
# Core structural styles

#--------------------------------
*/
/* Main menu */
ul.ulmenu {
	position: relative;
	display: block;
	overflow: visible;
	white-space: nowrap !important;		/* Works for IE5.5+, Opera 8.5+ - ie. the containing UL expands width.*/
	margin: 0px;
	padding: 0px;
}

/* First-level menu buttons */
ul.ulmenu li {
	position: relative;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
ul.ulmenu[class] li {
	width: auto;				/* FF only works if given an explicit width. Shame. */
}

ul.ulmenu * li {
	display: block;
}

/* This bit forces the containing UL block to extend it's height to accomodate all child nodes. FF/OP only. Not required by IE. */
ul.ulmenu:after, ul.ulmenu * ul:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* Sub menus */
/* The width of these menus is inherited from the LI node that contains it. */
ul.ulmenu * ul {
	display: block;
	position: absolute;
	visibility: hidden;
	margin: 0px;
	padding: 0px;
	font-size: 1em;
	top: 0px;
	left: 0px;
	z-index: 101;
}

/* Anchor for first-level menus buttons */
ul.ulmenu li a {
	display: block;
}
ul.ulmenu[class] li a {
	width: auto;
}

/* Anchor for all levels except first-level */
ul.ulmenu * li a {
	display: block;
	width: 100%;
}
ul.ulmenu[class] * li a {
	width: auto;
}

/* Separator */
ul.ulmenu * hr {
	padding: 0px;
	margin: 0px 5px 0px 5px;
}
ul.ulmenu[class] hr {
	margin: 5px;
}

/*
#--------------------------------
# Required style rules for horizontal and vertical types
#--------------------------------
*/
/* Vertical */
ul.ulmenu_v {
	width: 200px;					/* Vertical menu NEEDS an explicit width (OVERRIDE IN CUSTOM CSS). */
}

ul.ulmenu_v li {
	width: 100%;
	float: left;					/* We only want these menu buttons to float in IE, so it's overriden for other browsers. */
}
ul.ulmenu_v[class] li {
	float: none;
}

ul.ulmenu_v li a {
	width: 100%;					/* We want to set this width on the first-level buttons in the vertical menu only. */
}

/* Horizontal */
ul.ulmenu_h {
	width: 400px;					/* This can be an explicit, auto or % width (OVERRIDE IN CUSTOM CSS). */
							/* If you want to fill the width, use "auto" for non-IE, and "100%" for IE. */
}

ul.ulmenu_h li {
	float: left;					/* We only want the fist-level of menu buttons floated so they appear next to each other. */
}
ul.ulmenu_h[class] * li {
	float: none;					/* Again, we only want IE to float ALL LI nodes. */
}

ul.ulmenu_h * li {
	width: 100% !important;				/* Must be "important" to override any subsequent "width" in the "ul.ulmenu_h" style. */
}
ul.ulmenu_h[class] * li {
	width: auto !important;
}






/*
#--------------------------------
# Attempts to get it working in FF - remove all of these if it all goes haywire!
# An unfortunate side-effect of these rules is that Opera must also obey them, but
# without them Opera works great! Now it just works "ok" :(
#--------------------------------
*/
ul.ulmenu[class] {
	xwhite-space: normal !important;			/* Prevents titles from running outside of their containing element. */
}

ul.ulmenu[class] * ul {
	display: block;
	float: left;
	xwidth: 100%;
	xmin-width: 150px;				/* This limit is here to prevent stupidly narrow sub-menus :) */
}

ul.ulmenu[class] * li {
	float: left;
	clear: both;
	xwidth: 100% !important;
}