.foo {}


/*** Colors ***/
/*****************************************************************************

	Blue Baby: #E7EAED
	Blue Dark: #336494
	Blue Light: #ABD5FF
	Blue Medium: #5D7B9D
	Blue True: #0000FF
	
	Brown Dark: #434445
	Brown Fonts: #444444
	Brown Light: #D1C1A6
	Brown Medium: #855507
	
	Green Dark: #2C5C32
	Green Medium: #3D9431
	Green Light: #C3F8C8

	Grey Dark: #A2A2A2
	Grey Light: #E5E5E5
	Grey Medium: #D8D8D8
	
	Orange Header: #E3C18A
	
	Red Dark: #860000
	Red Pink: #FFD1D2
	Red True: #FF0000
	
	Yellow Pale: #FFFFEF
	
********************************************************************************/

/* This style sheet is intended to contain OFTEN CHANGED rules used 
	when the Menu control adapter is enabled. 
	When the Menu control's Orientation property is Vertical the 
	adapter wraps the menu with DIV 
	whose class is AspNet-Menu-Vertical. 
	Note that the example menu in this web site uses relative 
	positioning to force the menu to occupy 
	a specific place in the web page.  Your web site will likely 
	use a different technique to position your 
	menu.  So feel free to change all the properties found in this 
	CSS rule if you clone this style sheet. 
	There is nothing, per se, that is magical about these particular 
	property value choices.  They happen to work well for the 
	sample page used to demonstrate an adapted menu. */

/* The menu adapter renders an unordered list (ul) in 
	HTML for each tier in the menu.
	so, effectively says: style all tiers in the menu this way... */
.blueMenu ul
{
	background:url(Images/blueSlice.png) repeat-x;
	/**
    background:#336494 url(Images/blueMenu.jpg) repeat-x;
**/
    font-size:1.0em;
}

/* This rule effectively says: style all tiers EXCEPT THE TOP 
	TIER in the menu this way... 
	In other words, this rule can be used to style the 
	second and third tiers of the menu without impacting 
	the topmost tier's appearance. */
.blueMenu ul.AspNet-Menu ul
{
    left: 8.9em;
    top: -1em;
    width: 10.5em;
    z-index: 400;
}

.blueMenu ul.AspNet-Menu ul ul
{
    left: 10.4em;
    width: 11.5em;
}

/* The menu adapter generates a list item (li) in HTML for each menu item.
	Use this rule create the common appearance of each menu item. */
.blueMenu ul.AspNet-Menu li
{
    height:20px;
}

.blueMenu ul.AspNet-Menu li li
{
    background:#336494;
    height:25px;
}

/* Within each menu item is a link or a span, depending 
	on whether or not the MenuItem has defined it's 
	NavigateUrl property. By setting a transparent background 
	image here you can effectively layer two images 
	in each menu item.  One comes from the CSS rule (above) 
	governing the li tag that each menu item has. 
	The second image comes from this rule (below). */
.blueMenu ul.AspNet-Menu li a,
.blueMenu ul.AspNet-Menu li span
{
    color: #FFFFFF;
    padding: 0px 2px 4px 8px;
    border-bottom: 0;
}

/* When a menu item contains no submenu items it is marked as 
	a "leaf" and can be styled specially by this rule. */
.blueMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a,
.blueMenu ul.AspNet-Menu li.AspNet-Menu-Leaf span
{
    background-image: none;
}

/* Not used presently.  This is here if you modify the 
	menu adapter so it renders img tags, too. */
.blueMenu ul.AspNet-Menu li a img
{
    border-style: none;
    vertical-align: middle;
}

/* When you hover over a menu item, this rule comes into play. 
	Browsers that do not support the CSS hover pseudo-class, 
	use JavaScript to dynamically change the
	menu item's li tag so it has the AspNet-Menu-Hover 
	class when the cursor is over that li tag.
	See MenuAdapter.js (in the JavaScript folder). */
.blueMenu ul.AspNet-Menu li:hover, 
.blueMenu ul.AspNet-Menu li.AspNet-Menu-Hover
{
	background:#336494;
}

.blueMenu ul.AspNet-Menu li:hover a, 
.blueMenu ul.AspNet-Menu li:hover span, 
.blueMenu ul.AspNet-Menu li.AspNet-Menu-Hover a,
.blueMenu ul.AspNet-Menu li.AspNet-Menu-Hover span,
.blueMenu ul.AspNet-Menu li:hover li:hover a, 
.blueMenu ul.AspNet-Menu li:hover li:hover span, 
.blueMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.blueMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
.blueMenu ul.AspNet-Menu li:hover li:hover ul a:hover, 
.blueMenu ul.AspNet-Menu li:hover li:hover ul span.Asp-Menu-Hover, 
.blueMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a:hover,
.blueMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span.Asp-Menu-Hover
{
    color: #FFFFFF;
}

.blueMenu ul.AspNet-Menu li:hover ul a, 
.blueMenu ul.AspNet-Menu li:hover ul span, 
.blueMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul a,
.blueMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul span,
.blueMenu ul.AspNet-Menu li:hover li:hover ul a, 
.blueMenu ul.AspNet-Menu li:hover li:hover ul span, 
.blueMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a,
.blueMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span
{
    color: #FFFFFF;
}

/* While you hover over a list item (li) you are also hovering 
	over a link or span because 
	the link or span covers the interior of the li.  
	So you can set some hover-related styles 
	in the rule (above) for the li but set other 
	hover-related styles in this (below) rule. */
.blueMenu ul.AspNet-Menu li a:hover,
.blueMenu ul.AspNet-Menu li span.Asp-Menu-Hover
{
    color: #FFFFFF;
}

.blueMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a:hover
{
    background-image: none;
}

/* -------------------------------------------------------------------------- */
/* When the Menu control's Orientation property is 
	Horizontal the adapter wraps the menu with DIV 
	whose class is AspNet-Menu-Horizontal. 
	Note that the example menu in this web site uses 
	absolute positioning to force the menu to occupy 
	a specific place in the web page.  Your web site 
	will likely use a different technique to position your 
	menu.  So feel free to change all the properties 
	found in this CSS rule if you clone this style sheet. 
	There is nothing, per se, that is magical about these 
	particular property value choices.  They happen to 
	work well for the sample page used to demonstrate an adapted menu. */

.blueMenu .AspNet-Menu-Horizontal
{
    position:relative;
    top: 0;
    z-index: 300;
}

/* This rule controls the width of the top tier of the horizontal menu. 
	BE SURE TO MAKE THIS WIDE ENOUGH to accommodate all of the 
	top tier menu items that are lined 
	up from left to right. In other words, this width needs to 
	be the width of the individual 
	top tier menu items multiplied by the number of items. */
.blueMenu .AspNet-Menu-Horizontal ul.AspNet-Menu
{
    width: 60em;
}

/* This rule effectively says: style all tiers EXCEPT THE 
	TOP TIER in the menu this way... 
	In other words, this rule can be used to style 
	the second and third tiers of the menu without impacting 
	the topmost tier's appearance. 
	Remember that only the topmost tier of the menu 
	is horizontal.  The second and third tiers are vertical. 
	So, they need a much smaller width than the top tier.  
	Effectively, the width specified here is simply 
	the width of a single menu item in the second and their tiers. */
.blueMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul
{
    width: 10.5em;
    left: 0;
    top: 100%;
}

.blueMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul
{
    top: -0.3em;
}

.blueMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul
{
    width: 11.5em;
}

/* Generally, you use this rule to set style properties that 
	pertain to all menu items. 
	One exception is the width set here.  We will override 
	this width with a more specific rule (below) 
	That sets the width for all menu items from the second 
	tier downward in the menu. */
.blueMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li
{
    font-size:1.0em;
    font-weight:bold;
    text-align:center;
    padding-top:4px;
    width: 10em;
}

/* This rule establishes the width of menu items below the top tier.  
	This allows the top tier menu items 
	to be narrower, for example, than the sub-menu items. 
	This value you set here should be slightly larger than the 
	left margin value in the next rule. See 
	its comment for more details. */
.blueMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li
{
	font-weight:normal;
	padding-top:0px;
    text-align:left;
    width: 10.5em;
}

.blueMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul li
{
    width: 11.5em;
}

/* Third tier menus have to be positioned differently than second 
	(or top) tier menu items because 
	they drop to the side, not below, their parent menu item. 
	This is done by setting the last margin 
	value (which is equal to margin-left) to a value that is 
	slightly smaller than the WIDTH of the 
	menu item. So, if you modify the rule above, then you 
	should modify this (below) rule, too. */
.blueMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li ul li ul
{
    margin: -1.4em 0 0 10.35em;
}

/* This is the menu for the Blogs pages 
-----------------------------------------------------------------------------*/

.blogMenu ul
{
	background:url(Images/brownSlice.jpg) repeat-x;
    font-size:1.0em;
}

/* This rule effectively says: style all tiers EXCEPT THE TOP 
	TIER in the menu this way... 
	In other words, this rule can be used to style the 
	second and third tiers of the menu without impacting 
	the topmost tier's appearance. */
.blogMenu ul.AspNet-Menu ul
{
    left: 8.9em;
    top: -1em;
    width: 10.5em;
    z-index: 400;
}

.blogMenu ul.AspNet-Menu ul ul
{
    left: 10.4em;
    width: 11.5em;
}

/* The menu adapter generates a list item (li) in HTML for each menu item.
	Use this rule create the common appearance of each menu item. */
.blogMenu ul.AspNet-Menu li
{
    height:20px;
}

.blogMenu ul.AspNet-Menu li li
{
    background:#FFFFFF;
    height:25px;
}

/* Within each menu item is a link or a span, depending 
	on whether or not the MenuItem has defined it's 
	NavigateUrl property. By setting a transparent background 
	image here you can effectively layer two images 
	in each menu item.  One comes from the CSS rule (above) 
	governing the li tag that each menu item has. 
	The second image comes from this rule (below). */
.blogMenu ul.AspNet-Menu li a,
.blogMenu ul.AspNet-Menu li span
{
    color: #FFFFFF;
    padding: 0px 2px 4px 8px;
    border-bottom: 0;
}

/* When a menu item contains no submenu items it is marked as 
	a "leaf" and can be styled specially by this rule. */
.blogMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a,
.blogMenu ul.AspNet-Menu li.AspNet-Menu-Leaf span
{
    background-image: none;
}

/* Not used presently.  This is here if you modify the 
	menu adapter so it renders img tags, too. */
.blogMenu ul.AspNet-Menu li a img
{
    border-style: none;
    vertical-align: middle;
}

/* When you hover over a menu item, this rule comes into play. 
	Browsers that do not support the CSS hover pseudo-class, 
	use JavaScript to dynamically change the
	menu item's li tag so it has the AspNet-Menu-Hover 
	class when the cursor is over that li tag.
	See MenuAdapter.js (in the JavaScript folder). */
.blogMenu ul.AspNet-Menu li:hover, 
.blogMenu ul.AspNet-Menu li.AspNet-Menu-Hover
{
	background:#434445;
}

.blogMenu ul.AspNet-Menu li:hover a, 
.blogMenu ul.AspNet-Menu li:hover span, 
.blogMenu ul.AspNet-Menu li.AspNet-Menu-Hover a,
.blogMenu ul.AspNet-Menu li.AspNet-Menu-Hover span,
.blogMenu ul.AspNet-Menu li:hover li:hover a, 
.blogMenu ul.AspNet-Menu li:hover li:hover span, 
.blogMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.blogMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
.blogMenu ul.AspNet-Menu li:hover li:hover ul a:hover, 
.blogMenu ul.AspNet-Menu li:hover li:hover ul span.Asp-Menu-Hover, 
.blogMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a:hover,
.blogMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span.Asp-Menu-Hover
{
    color: #FFFFFF;
}

.blogMenu ul.AspNet-Menu li:hover ul a, 
.blogMenu ul.AspNet-Menu li:hover ul span, 
.blogMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul a,
.blogMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul span,
.blogMenu ul.AspNet-Menu li:hover li:hover ul a, 
.blogMenu ul.AspNet-Menu li:hover li:hover ul span, 
.blogMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a,
.blogMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span
{
    color: #FFFFFF;
}

/* While you hover over a list item (li) you are also hovering 
	over a link or span because 
	the link or span covers the interior of the li.  
	So you can set some hover-related styles 
	in the rule (above) for the li but set other 
	hover-related styles in this (below) rule. */
.blogMenu ul.AspNet-Menu li a:hover,
.blogMenu ul.AspNet-Menu li span.Asp-Menu-Hover
{
    color: #FFFFFF;
}

.blogMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a:hover
{
    background-image: none;
}

/* -------------------------------------------------------------------------- */
/* When the Menu control's Orientation property is 
	Horizontal the adapter wraps the menu with DIV 
	whose class is AspNet-Menu-Horizontal. 
	Note that the example menu in this web site uses 
	absolute positioning to force the menu to occupy 
	a specific place in the web page.  Your web site 
	will likely use a different technique to position your 
	menu.  So feel free to change all the properties 
	found in this CSS rule if you clone this style sheet. 
	There is nothing, per se, that is magical about these 
	particular property value choices.  They happen to 
	work well for the sample page used to demonstrate an adapted menu. */

.blogMenu .AspNet-Menu-Horizontal
{
    position:relative;
    top: 0;
    z-index: 300;
}

/* This rule controls the width of the top tier of the horizontal menu. 
	BE SURE TO MAKE THIS WIDE ENOUGH to accommodate all of the 
	top tier menu items that are lined 
	up from left to right. In other words, this width needs to 
	be the width of the individual 
	top tier menu items multiplied by the number of items. */
.blogMenu .AspNet-Menu-Horizontal ul.AspNet-Menu
{
    width: 60em;
}

/* This rule effectively says: style all tiers EXCEPT THE 
	TOP TIER in the menu this way... 
	In other words, this rule can be used to style 
	the second and third tiers of the menu without impacting 
	the topmost tier's appearance. 
	Remember that only the topmost tier of the menu 
	is horizontal.  The second and third tiers are vertical. 
	So, they need a much smaller width than the top tier.  
	Effectively, the width specified here is simply 
	the width of a single menu item in the second and their tiers. */
.blogMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul
{
    width: 10.5em;
    left: 0;
    top: 100%;
}

.blogMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul
{
    top: -0.3em;
}

.blogMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul
{
    width: 11.5em;
}

/* Generally, you use this rule to set style properties that 
	pertain to all menu items. 
	One exception is the width set here.  We will override 
	this width with a more specific rule (below) 
	That sets the width for all menu items from the second 
	tier downward in the menu. */
.blogMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li
{
    font-size:1.0em;
    font-weight:bold;
    text-align:center;
    padding-top:4px;
    width: 10em;
}

/* This rule establishes the width of menu items below the top tier.  
	This allows the top tier menu items 
	to be narrower, for example, than the sub-menu items. 
	This value you set here should be slightly larger than the 
	left margin value in the next rule. See 
	its comment for more details. */
.blueMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li
{
	font-weight:normal;
	padding-top:0px;
    text-align:left;
    width: 10.5em;
}

.blueMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul li
{
    width: 11.5em;
}

/* Third tier menus have to be positioned differently than second 
	(or top) tier menu items because 
	they drop to the side, not below, their parent menu item. 
	This is done by setting the last margin 
	value (which is equal to margin-left) to a value that is 
	slightly smaller than the WIDTH of the 
	menu item. So, if you modify the rule above, then you 
	should modify this (below) rule, too. */
.blueMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li ul li ul
{
    margin: -1.4em 0 0 10.35em;
}