/* CSS file for BOM Investments and Retirement Planning Site
Live: June 2009

This file contains styles  only for the dropdown menu of the IRP site
Comments provided tell what each selector applies to and the purpose of
of each style.  Details for changing calculated values are given, 
however general instructions for changing values are not. For details
on what a line does and how to change it, check out the folloing sites:

1) http://htmldog.com/reference/cssproperties/

BACK UP BEFORE MAKING CHANGES: Changes to this file may affect the appearance
of the site in unexpected or negative ways. It's best to have a clean copy so
changes can easily be undone. */

#menuWrap {						/* Styles of div around menu */
	background-color: #518230; 	/* Menu background color */
	font-size: 100%;			/* Fixes IE text resizing bug */
								/* http://www.brunildo.org/test/IE-em-font-size-resizing.html */
}


#nav, #nav ul {					/* Styles of the navigation unordered lists */
	margin: 0;					/* Clears any default margins applied by browsers */
	padding: 0;					/* Clears any default padding applied by browsers */
	list-style: none;			/* Removes bulltes from menu items */
}

#nav {							/* Styles of menu bar */ 
	font-family: Arial, Helvetica, sans-serif; 	/* Menu font in order of preference */
	font-size: 1em; 			/* Menu font size relative to main body text */
	font-weight: bold;			/* Bold menu choices */
	line-height: 1.7em;			/* Menu bar height (x3) */
	width: 100%;				/* Menu spans across entire page */
}

#nav li	{						/* Styles of level 0 menu items (positioning) */
	display: block;
	float: left;				/* Places items next to each other at left */
	position: relative;
	margin: 0;					/* No padding */
	padding: 0;					/* No margins */
	height: 1.7em;				/* Menu bar height */
}

#nav a	{						/* Styles of level 0 items (links) */			
	display: block;
	padding: 0 1.2em;			/* Spacing on sides of items */
	padding-bottom: 1px;		/* Compensation for clearing div */
	color: #fff;				/* Color of menu bar text */
	text-decoration: none;		/* Remove underline from link  */
}

#nav a:hover, nav a:focus {		/* Styles of highlight on level 0 items */
	background: #70A54B; 		/* Highlight background color */
	color: #fff;				/* Highlight text color */
}

#nav ul	{						/* Styles of Level 1 menus */
	background: #dedede;		/* Submenu background color */
	padding-bottom: 1px;
	border: 1px solid #999;		/* Add border around submenu */
	left: 0em;					/* Horizontal offset of submenu */
	font-size: 1em;				/* submenu font size relative to top level items */
	font-weight: normal;		/* Unbold submenus */
	line-height: 1.4em;			/* Vertical Spaciing of menu items */
	position: absolute;
	top: 1.7em;					/* Menu bar height (places menu underneath) */
	width: 12em;				/* Level 1 menu width (x2) (horizontal offset) */
	z-index: 1;					/* Places menu on top of other items */
}

#nav ul li {					/* Styles of Level 1 items (positioning) */
	float: none;
	height: auto;
	width: 12em;				/*Level 1 menu width */
}
#nav ul a {						/* Styles of Level 1 items (links) */
	padding: 0.083em .5em 0.25em; /* Extra spacing around link text */
	width: 11em;				/* Width of link */
								/* CALCULATE: nav ul width - ( nav ul a padding-left + padding-right) */
	color: #000;				/* Submenu text color */
}
#nav ul ul {					/* Styles of level 2+ menus */
	font-size: 1em;				/* font size relative to level 1 menu */
}
#nav ul a:hover, #nav ul a:focus {	/* Styles of highlight on level 1 items */
	background: #B7BFC6;		/* Highlight background color (x2) */
	color: #000;				/* Highlight text color */
}
#nav ul .hover>a {				/* Styles of highlight on level 1 items */
	background: #B7BFC6;		/* Highlight  background color */
}
#nav ul ul {					/* Styles of level 2+ menus */
	left: 11.7em;				/* Place menu at right */
								/* CALCULATE: #nav ul width + #nav ul a padding */		
	top: .5em;
}

#nav ul, #nav :hover ul ul, #nav .hover ul ul { /* Styles of closed menu states */
	margin-left: -9999px;		/* Place menu off-screen */
}
#nav li:hover>ul, #nav li.hover>ul,
#nav a:focus+ul, #nav ul ul, #nav .hover a:focus { /*Styles of open menu states */
	margin-left: 0;				/* Bring menu back at default position */
}
#nav ul a:focus	{				/*Styles of open menu states */
	margin-left: 9999px;		/* Bring menu back at default position */
}