/*  
	How to use this stylesheet:
	--- Most elements will inherit their style automatically via the base values.
	--- Use the extra styles as exceptions to the base styles when needed.
	--- Specific classes get a proper name (such as OWA classes for Outlook Web Access).

	HTML examples of correct usage:
    Apply classes to the parent element only whenever possible.
	<td class="header">My Header</td>
	Instead of:
	<td><span class="header">My Header</span></td>
	
	Please keep this file neat n' tidy. If you need a style added, please ask Bree.
*/


/* BASE VALUES */
body						{font-size: 9pt; color: #000000; font-family: Arial, Verdana, Helvetica, Sans-Serif; background-color: #94b7db; border-left: 0px; border-right: 0px; border-top: 0px;}
table						{font-size: 9pt; color: #000000; font-family: Arial, Verdana, Helvetica, Sans-Serif}
A							{color: #003399; text-decoration: underline;}
A:hover						{color: #000099; text-decoration: none;}
select, textarea			{border: 1px solid #000099; background: #EFEFEF; font-size: 8pt; color: #000099;}	
.input						{border: 1px solid #000099; background: #EFEFEF; font-size: 8pt; color: #000099;}
hr							{color: #333366; height: 1px; background-color: transparent;}

/* USE FOR ABBREVIATIONS & ACRONYMS */
/* to use, set title attribute of element. <acronym title="Internal Revenue Service">IRS</acronym> */
abbr, acronym, .help	{border-bottom: 1px dotted #333333; cursor: help;}


/* 	EXTRA STYLES ... Use these as exceptions to the base values */
.lighttext      {color: #3399CC;}
.heavytext		{color: #006699;}
.heavy			{background: #336699; color: #FFFFFF;}
.heavy a		{color: #FFFFFF; text-decoration: underline;}
.heavy a:hover	{color: #FFFFDD; text-decoration: none;}
.heavy a:active	{color: #FFFFFF; text-decoration: none;}
.light			{background: #3399CC; color: #FFFFFF;}
.light a		{color: #FFFFFF; text-decoration: underline;}
.light a:hover	{color: #FFFFEE; text-decoration: none;}
.light a:active	{color: #FFFFFF; text-decoration: none;}

/* This is the basic class to handle body text and body links */
body			{font-size: 10pt; color: #000000; font-family: Arial, Verdana, Helvetica, Sans-Serif; background-color: #94b7db; border-left: 0px; border-right: 0px; border-top: 0px;}
body a:hover	{color: #000000; font-family: Arial, Verdana, Helvetica, Sans-Serif; text-decoration: underline;}
body a:active	{color: #000000; font-family: Arial, Verdana, Helvetica, Sans-Serif; text-decoration: underline;}
.texthead		{font-size: 12pt; color: #003399; font-family: Arial, Verdana, Helvetica, Sans-Serif;}

/* Created by Rich, The miniwhite is used for a smal href instance */
.white			{color: #FFFFFF;}
.miniwhite		{font-size: 8pt;  color: #FFFFFF;}

/* Use the mini class for footers, captions, disclaimers and other tiny text */
.mini			{font-size: 8pt; color: #000000;}

/* You'll need to make an exception for checkboxes and apply this style to them, because of how IE handles them in relation to CSS styles */
.check {border: 0px; background: transparent}

/* Use this class for HTML text subheads */
.header	{font-size: 12pt; font-weight: bold;}

/* Use this class for grid headers */
.gridheader {color: #FFFFFF; font-size: 10pt; font-family: Arial, Verdana, Helvetica, Sans-Serif; background-color: #333366}
.gridheader a {color: #FFFFFF; font-size: 10pt; font-family: Arial, Verdana, Helvetica, Sans-Serif;}
.gridheader a:visited {color: #FFFFFF; font-size: 10pt; font-family: Arial, Verdana, Helvetica, Sans-Serif;}
.gridheader a:hover {color: #CCCCCC; font-size: 10pt; font-family: Arial, Verdana, Helvetica, Sans-Serif;}

.inverted {color: #FFFFFF; font-size: 10pt; font-family: Arial, Verdana, Helvetica, Sans-Serif; background-color: #333366}
.inverted a {color: #FFFFFF; font-size: 10pt; font-family: Arial, Verdana, Helvetica, Sans-Serif;}
.inverted a:visited {color: #FFFFFF; font-size: 10pt; font-family: Arial, Verdana, Helvetica, Sans-Serif;}
.inverted a:hover {color: #CCCCCC; font-size: 10pt; font-family: Arial, Verdana, Helvetica, Sans-Serif;}
.inverted body	{font-size: 10pt; color: #FFFFFF; font-family: Arial, Verdana, Helvetica, Sans-Serif;}
.inverted table {font-size: 10pt; color: #FFFFFF; font-family: Arial, Verdana, Helvetica, Sans-Serif}

.blueheader {font-weight: bold; font-size: 11pt; color: #333366; font-family: Arial, Verdana, Helvetica, Sans-Serif;}
.highlight	{font-weight: bold; font-size: 10pt; color: orange; font-family: Arial, Verdana, Helvetica, sans-serif;}

/* Use this class for footer content */
.cbktfooter {color: #FFFFFF; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; padding: 3px 0px;}
.cbktfooter a {color: #FFFFFF; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;}
.cbktfooter a:visited {color: #FFFFFF; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;}
.cbktfooter a:hover {color: #CCCCCC; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;}

.cbwsfooter {color: #FFFFFF; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; padding: 3px 0px;}
.cbwsfooter a {color: #FFFFFF; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;}
.cbwsfooter a:visited {color: #FFFFFF; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; }
.cbwsfooter a:hover {color: #CCCCCC; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; }

/* Used for the quick search in the banner */
.qsinputcbkt {width: 75px; color: #333366; background-color: #FFFFFF; border: solid 1px; }
.qsinputcbwshome {width: 75px; color: #333366; background-color: #FFFFFF; border: solid 1px; }
.qsinputcbws {width: 125px; color: #333366; background-color: #FFFFFF; border: solid 1px thin; }


/* END EXTRA STYLES */


/* DATA ENTRY TABLES */
/* mike j - for data entry tables where you have a 2 column label/field setup */
/* example:
<table border="0" class="etable" cellpadding="0" cellspacing="0">
	<tr>
		<td class="label">First Name:</td>
		<td class="entrylg"><input type="text" name="txtFName"/></td>
	</tr>
</table>
*/
.etable			{}
.etable td		{padding: 2px;}
.etable .label	{text-align: right; padding-left: 5px; padding-right: 5px; white-space: nowrap;}
.etable	.entrylg input	{width: 300px;}
.etable	.entrylg select	{width: 300px;}
.etable	.entrymd input	{width: 200px;}
.etable	.entrymd select	{width: 200px;}
.etable	.entrysm input	{width: 100px;}
.etable	.entrysm select	{width: 100px;}
/* END DATA ENTRY TABLES */

/* 
Use the repeated classes below to handle tables with repeating data. It's set up so you won't have to worry about 
the alternating the presentation of the data. Here is an example of correct usage:
   
<table border="0" class="reptable" cellpadding="0" cellspacing="0">
	<tr class="head">
		<td>Test</td><td>Test</td>
	</tr>
	<tr>
		<td>Test</td><td>Test</td>
	</tr>
	<tr>
		<td>Test</td><td>Test</td>
	</tr>
</table>
   
*/
.reptable			{border: 1px solid #336699;}
.reptable .head td	{color: #FFFFFF; background-color: #336699; padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; font-weight: bold; border-right: 1px solid #6699CC;}
.reptable td		{padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; border-bottom: 1px solid #CCCCCC;}
.reptable .none td	{border-bottom:none;}

/* The following class is similar to reptable, but lacks the bottom grey underline. You should use reptable for data, and repcopy for other stuff ... such as news headlines on the front page, etc ... non data elements that need to have a class applied. */

.repcopy			{border: 1px solid #336699;}
.repcopy .head td	{color: #FFFFFF; background-color: #336699; padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; font-weight: bold; border-right: 1px solid #6699CC;}
.repcopy td		{padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; border-bottom: 1px solid #FFFFFF;}
.repcopy .none td	{border-bottom:none;}

/* END REPEATER classes */


/* Outlook Web Access classes */
.owatable 					{color: #000000; text-decoration: none;}
.owatable td				{color: #000000; text-decoration: none; padding-left: 5px; padding-right: 5px;}
.owatable .head				{font-weight: bold; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; background-color: #EAEAEA;}
.owatable a 				{color: #003399; text-decoration: underline;}
.owatable a:hover 			{color: #000099; text-decoration: none;}
.owatable a:active 			{color: #990000; text-decoration: none;}
.owahead 					{color: #000000; font-size: 10pt; text-decoration: none; padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; background-color: #CCCCCC; font-weight: bold;}
.owatable .pastevent, .owatable .pastevent a	
							{color: #999999; text-decoration: none;}
							
/* splash page promo box classes */
.promohead 			{color: #003366; text-decoration: none; font-weight: bold;}
.promotext 			{color: #000000; text-decoration: none;}
.promolink a		{color: #003366; text-decoration: underline;}
.promolink a:hover 	{color: #006666; text-decoration: underline;font-size: 7pt;}
.promolink a:active {color: #000099; text-decoration: underline;font-size: 7pt;}

.blue			{font-size: 9pt; color: #003399; font-family: Arial, Verdana, Helvetica, Sans-Serif;}
.white			{font-size: 9pt; color: #FFFFFF; font-family: Arial, Verdana, Helvetica, Sans-Serif;}
.disclaimer		{font-size: 8pt; color: #000000; font-style: italic; font-family: Arial, Verdana, Helvetica, Sans-Serif;}
.tiny			{font-size: 8pt; color: #000000; font-family: Arial, Verdana, Helvetica, Sans-Serif;}	
.error			{font-size: 9pt; color: red; font-family: Arial, Verdana, Helvetica, Sans-Serif;}

/* MapPoint Specific */
.BGColorMapBorder {background-color:#134B8E;}
.BGColorWin  {background-color:white;} 
.whitecopy {font-family: Arial, Verdana, sans-serif; color: #FFFFFF; font-size: 11px; font-weight: normal; text-decoration: none; letter-spacing: 1px; line-height: 16px;}
.whitecopylarge {font-family: Arial, Verdana, sans-serif; color: black; font-size: 14px; font-weight: bold; text-decoration: none;}
.redcopy {font-family: Arial, Verdana, sans-serif; color: #FF0000; font-size: 11px; font-weight: normal; text-decoration: none; letter-spacing: 1px; line-height: 16px;}
.landingTitle {font-family: Verdana, Arial, sans-serif; font-size:27; color: #333366;} /*//////// Product Consumer Framework ///////////*/

/* Tag Styles */

body
{
	margin: 0 0 0 0;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #94B7DB;
	float: left;
}

ul li
{
	list-style-type: disc;
}

.paddingTop15
{
	margin-top: 32px;
	margin-left: 5px;
	margin-bottom: 32px;
}

.MeLinks_3
{
	color: #629ACB;
	background-color: #CADBED;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: Solid;
	border-right-style: Solid;
	border-bottom-style: Solid;
	border-left-style: Solid;
	border-top-color: #629ACB;
	border-right-color: #629ACB;
	border-bottom-color: #CADBED;
	border-left-color: #629ACB;
}
/* Framework CSS */

#headerInt
{
	margin: 0px;
	float: left; /*width: 100%;*/
	height: 101px;
	background-color: #003366;
}

#headerExt
{
	margin: 0px;
	float: left;
	width: 750px;
	height: 220px;
}

.headerLink
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 770px;
	height: 101px;
	z-index: 99;
}

#content
{
	background-color: #FFFFFF;
	padding: 10px 0px 30px 0px;
}

#pageTitle
{
	font-family: "Times New Roman", Times, serif;
	font-size: 24px;
	color: #003366;
}

#loginBar
{
	width: 750px;
	padding-left: 15px;
	padding-top: 15px;
}

#footer
{
	background-color: #94b7db;
	width: 100%;
	height: 125px;
	padding: 20px 0px 0px 0px;
}

/* Fix for Virtual Earth map .  */
#footer1
{
	background-color: #94b7db;
	width: 100%;
	padding: 20px 0px 0px 0px;
}

/* Advertising Spaces */

#AdOneInt
{
	height: 80px;
	width: 220px;
	margin-top: 10px;
}

#AdOneExt
{
	height: 80px;
	width: 220px;
	margin-top: 70px;
}

#AdTwoExt
{
	height: 210px;
	width: 220px;
	margin-top: 20px;
}

#AdTwoInt
{
	height: 210px;
	width: 220px;
	margin-top: 9px;
}

#AdThreeInt
{
	height: 210px;
	width: 220px;
	margin-top: 10px;
}

#AdThreeExt
{
	height: 210px;
	width: 220px;
	margin-top: 10px;
}

.FloatLeft
{
	float: left;
	margin: 5px 5px 5px 0px;
}

.FloatRight
{
	float: right;
	margin: 5px 0px 5px 5px;
}

/*13pt type*/
.typebold
{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 13px;
	color: #000000;
}
.typeboldcenter
{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 13px;
	color: #000000;
	text-align: center;
}
.typegrey
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #999999;
}

/* Executive Profile */
.executiveImage
{
	float: right;
	margin-left: 10px;
	margin-bottom: 0px;
}
.executiveBio
{
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: justify;
	text-decoration: none;
}

/* Relocation Staff */
.staffPhoto
{
	float: left;
}
.staffGroup
{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 14px;
}
.staffArea
{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 13px;
	font-style: italic;
}
.staffName
{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
}
.staffTitle
{
	font-family: Arial, Helvetica, sans-serif;
	font-style: italic;
	font-size: 12px;
}
.staffBio
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	float: left;
	margin-left: 10px;
	clear: right;
}
.staffSpacer
{
	clear: both;
	height: 30px;
}
/* Vendor Profile */
.vendorImage
{
	float: left;
	margin-right: 20px;
	margin-bottom: 10px;
}
.vendorDetails
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
/* Forms Submit Button */
.btnAlignSubmit
{
	float: right;
}

/* Agent/Team Profiles */
.smallwhite
{
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 11px;
}
.smallwhitebold
{
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: bold;
}
.typebold
{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 13px;
	color: #000000;
}
.typeboldcenter
{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 13px;
	color: #000000;
	text-align: center;
}

/* Concierge Styles/Buy Your Home Styles */
.largerlink, .largerlink :link, .largerlink :visited, .largerlink :link:hover, .largerlink :visited:hover, .largerlink :link:active, .largerlink :visited:actve, .largerlink :link:focus, .largerlink :visited:focus
{
	color: #69c;
	font-weight: bold;
	text-decoration: underline;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
.titleheadingblack
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #000000;
	font-style: italic;
}
.profileheadingblack
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #000000;
}

/* Missing Property Search Styles */
.tableBorder
{
	border: 1px solid #666666;
	padding-left: 4px;
	padding-bottom: 4px;
	padding-right: 4px;
}

/* Home Modules */
.right_textb
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	font-weight: bold;
	padding-bottom: 1px;
	padding-top: 1px;
	padding-left: 10px;
	text-align: right;
}

/* Right Side Branding Links */
.largelink, .largelink :link, .largelink :visited, .largelink :link:hover, .largelink :visited:hover, .largelink :link:active, .largelink :visited:actve, .largelink :link:focus, .largelink :visited:focus
{
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: underline;
}
/* Right Shadow place holder to offset content with no shadow. */
.shadow_rightside_offset{width: 5px; height: 100%;}
﻿.foo
{
}
/* W3C CSS validator likes CSS files to start with a class rather than a comment. Soooooo.... */

/* 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. */
.ConsumerMenu .AspNet-Menu-Vertical
{
	position: relative;
	top: 3em;
	left: 0;
	z-index: 300;
}

/* 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... */
.ConsumerMenu ul
{
	background: #E4EBF2;
}

/* Top tier */
.ConsumerMenu .AspNet-Menu-Vertical ul.AspNet-Menu
{
	width: 9em;
}

/* 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. */
.ConsumerMenu ul.AspNet-Menu ul
{
	width: 10.5em;
	left: 8.9em;
	top: -1em;
	z-index: 400;
}

.ConsumerMenu ul.AspNet-Menu ul ul
{
	width: 11.5em;
	left: 10.4em;
}

/* 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. */
.ConsumerMenu ul.AspNet-Menu li
{
	background: #E4EBF2;
}

/* 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). */
.ConsumerMenu ul.AspNet-Menu li a, .ConsumerMenu ul.AspNet-Menu li span
{
	color: #808080; /*padding: 4px 2px 4px 8px;     border:1px solid #648ABD;*/
	border-bottom: 0;
	background: transparent;
}

/* When a menu item contains no submenu items it is marked as a "leaf" and can be styled specially by this rule. */
.ConsumerMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a, .ConsumerMenu 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. */
.ConsumerMenu 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). */
.ConsumerMenu ul.AspNet-Menu li:hover, .ConsumerMenu ul.AspNet-Menu li.AspNet-Menu-Hover
{
	background: #BFD3E7;
}

.ConsumerMenu ul.AspNet-Menu li:hover a, .ConsumerMenu ul.AspNet-Menu li:hover span, .ConsumerMenu ul.AspNet-Menu li.AspNet-Menu-Hover a, .ConsumerMenu ul.AspNet-Menu li.AspNet-Menu-Hover span, .ConsumerMenu ul.AspNet-Menu li:hover li:hover a, .ConsumerMenu ul.AspNet-Menu li:hover li:hover span, .ConsumerMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a, .ConsumerMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span, .ConsumerMenu ul.AspNet-Menu li:hover li:hover ul a:hover, .ConsumerMenu ul.AspNet-Menu li:hover li:hover ul span.Asp-Menu-Hover, .ConsumerMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a:hover, .ConsumerMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span.Asp-Menu-Hover
{
	color: #FFFFFF;
}

.ConsumerMenu ul.AspNet-Menu li:hover ul a, .ConsumerMenu ul.AspNet-Menu li:hover ul span, .ConsumerMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul a, .ConsumerMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul span, .ConsumerMenu ul.AspNet-Menu li:hover li:hover ul a, .ConsumerMenu ul.AspNet-Menu li:hover li:hover ul span, .ConsumerMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a, .ConsumerMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span
{
	color: #808080;
}

/* 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. */
.ConsumerMenu ul.AspNet-Menu li a:hover, .ConsumerMenu ul.AspNet-Menu li span.Asp-Menu-Hover
{
	color: #FFFFFF;
	background: transparent;
}

.ConsumerMenu 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. */

.ConsumerMenu .AspNet-Menu-Horizontal
{
	position: absolute;
	left: 0;
	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. */
#navExt .ConsumerMenu .AspNet-Menu-Horizontal ul.AspNet-Menu
{
	left: 20px;
}

#navInt .ConsumerMenu .AspNet-Menu-Horizontal ul.AspNet-Menu
{
	left: 27px;
}

/* 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. */
.ConsumerMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul
{
	width: 10.5em;
	left: 0;
	top: 100%;
}

.ConsumerMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul
{
	top: -0.3em;
}

.ConsumerMenu .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. */
.ConsumerMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li
{
	text-align: center;
}

/* 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. */
.ConsumerMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li
{
	text-align: left;
	width: 11.5em;
	border-bottom: solid 1px #FFFFFF;
	padding: 4px 2px 4px 12px;
}

.ConsumerMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li.AspNet-Menu-WithChildren li.AspNet-Menu-WithChildren a
{
  	text-align: left;
	width: 11.5em;
	background: transparent url(/Images/icon_arrow_right.gif) right no-repeat;
}
.ConsumerMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li.AspNet-Menu-WithChildren li.AspNet-Menu-WithChildren ul li a
{
  	text-align: left;
	background-image: none;
}

.ConsumerMenu .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. */
.ConsumerMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li ul li ul
{
	margin: 0.3em 0 0 12.35em;

}

/* ------------------------------------------------------------------- */
/* Specific to this web site. */
#navInt
{
	position: relative;
	background-color: #cccccc;
	width: 770px;
	height: 40px;
	left: 0;
	background: transparent url(/Images/navSpacer.gif) left center repeat-x;
	z-index: 999;
}

#navExt
{
	position: relative;
	left: 0;
	background-color: #cccccc;
	width: 750px;
	height: 40px;
	background: transparent url(/Images/navSpacer.gif) left center repeat-x;
	z-index: 999;
}