/* ---------------------------------------------------------------------------------
Nielsen Answers Templates - main.css - Version 1.0:

Purpose: This file contains the main set of CSS properties that support
	the currently approved Nielsen Answers Standards.
							
Usage:	This file should be the first stylesheet referenced and should remain intact.
	Application specific stylesheets add to or override this one by being loaded 
	after. This facilitates changing the application skin if corporate styles change.
				
Created: Brett Merkey, January 2009
Modified: Korey Kloeckner, August 2009
------------------------------------------------------------------------------------*/

html, body {
	margin: 0;
	min-height: 100%;
	width: 100%;
	height: 100%; /*hack for IE*/
	}

html>body {height: auto;}

body {
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 12px; 
	color: #333; 
	background-color: white;
	padding: 0;
	overflow: auto;
	}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
										TOP BANNER 
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#chrome {/*display dots in header*/
	width: 100%;
	background: url(images/bg_dots.gif) repeat-x;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 50px;
	}

#nielsenLogo {
	background: url(images/bg_applic_banner_top.gif) no-repeat; 
	position: absolute; 
	left: 0px;
	width: 100%; 
	height: 50px;
	}

#applicationName {
	position: absolute; 
	left: 121px; 
	height: 50px; 
	background: transparent url(images/application-name.png) no-repeat 0px 19px; 
	width: 265px;
	}

#clientLogo { /*max image size is 200px wide by 45px high*/
	position: absolute;
	top: 0;
	right: 0px;
	height: 50px;
	width: 200px;
	overflow: hidden;
	background: #fff url(images/logo_client.gif) no-repeat right center;
	border-right: solid 10px #FFF;
	}

#primaryNav	{ /*contains the primaryNav menu*/
	 position: absolute; 
	 top: 50px; 
	 width: 100%;
	 height: 19px; 
	 background: white url(images/bg_nav.gif) repeat-x left bottom;
	 border-top: 1px solid #cdcdcd;
	}

.utilityBox { /*contains utility menu*/
	float: right; 
	height: 19px;
	}

#main-content-box { /*content below top banner*/
	padding: 0px 5px 5px 5px; 
	width:100%;
	position: absolute;
	top: 80px;
	z-index: -10;
	left: 0px;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
									PANED LAYOUTS
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#panesFrameset {
	  height: expression((document.body.clientHeight - 86) + "px");
	  width: 100%;
	  }

body.paneLeft {
	overflow-y:auto;
	width: 225px;
	max-height:98%;
	} 
	
body.1paneCV {overflow:hidden;} /* eliminate scrollbar on top level of paned windows  */

body.2paneCV {
	overflow: hidden; /* eliminate scrollbar on top level of paned windows  */
	margin-left: 9px; /*space between left and right pane, where openCloseWidget fits, total 10px with framespacing 1px in frameset  */
	}

/*****************************  
		OPEN/CLOSE WIDGET 
******************************/
/*styles referenced in toggleScreen.js do not change*/
#openCloseWidget {
	position: absolute;
	left: 1px; 
	height: 100%;
	width: 6px;
	}
	
#openClose {
	width: 6px;
	height: 100%;
	}

a.toggleopen {background:transparent url(images/toggle-open.gif) no-repeat center center;}
a.toggleclose {background:transparent url(images/toggle-close.gif) no-repeat center center;}

	

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
									 	PANEL STYLES  
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.panel {
	width: auto; /* width most likely determined by parent box */
	margin-bottom: 10px; /*space between panels*/
	}
	
/*****************************  
		PANEL HEADERS 
******************************/

.panelHead {
	background: url(images/panel-head-slider.png) no-repeat top right;
	padding: 0px 0px 0px 0px; 
	text-align: left; 
	color: #000; 
	font-size: 11px; 
	height: 24px; 
	}

.panelHead h2 { /*CONTENT EXPLORER PANEL HEAD*/
	background: url(images/panel-head-left.gif) no-repeat top left;
	margin: 0 0 0 0px;
	padding: 5px 1px 5px 11px; /*affect pane head height Margins on left top and right are extra 1px for border in img (eg. 10px per standard + 1px = 11px) */
	font-weight: bold; 
	font-size: 11px;  
	height: 14px; /* control pane head height in IE , padding and borders add to total height of 25px */
	}
	
.panelHead h3 {  /*CONTENT VIEWER PANEL HEAD*/
	background: url(images/panel-head-left.gif) no-repeat top left;
	margin: 0 0 0 0px;
	padding: 0px 6px 0px 6px; /*affect pane head height. Margins on left top and right are extra 1px for border in background img (eg. 10px per standard + 1px = 11px) */
	font-size: 11px;
	height: 41px;  /*control pane head height in IE */
	text-align:right;
	}

.divider { /* major separation line divider*/
	height: 120%;
	/*margin: -10px 10px -31px 10px;*/
	margin: -5px 6px -10px 5px;
	padding: 0px 0 0px 0;
	/*position:absolute;
	top: 0px;
	border-left: solid 1px #00A2ED;*/
	background-color: #00A2ED;
	width: 1px;
	display: inline;
	}

.subdivider { /*minor separation line subdivider*/
	height:50%;
	width: 1px;
	background-color: #00A2ED;
	margin: 0px 6px 6px 5px;
	display: inline;
	}
	
.left {
	float: left;
	height: 100%;
	}

.panelHead a{margin: 11px 6px 10px 6px;	display: inline-block;} /*controls in panelHead*/
.panelFooter a{margin: 6px 6px 6px 6px;	display: inline-block;} /*controls in panelFooter*/

/*****************************  
	COLLAPSIBLE PANEL STYLES 
******************************/

.Collapsible {
	margin-bottom: 10px; /*space between panels*/
	}
 
.Collapsible .panelHead h2 {
	background: url(images/panel-head-left.png) no-repeat top left;
	padding: 5px 0px 5px 16px; /* affect panel head height */
	cursor: pointer;
	}

.CollapsiblePanelOpen .panelHead h2 {  
	background: url(images/panel-head-left-active.png) no-repeat top left;
	}
.CollapsiblePanelClosed .panelHead h2 { 
	border-bottom: solid 1px #43Baf1;/*border on bottom of header when panel is closed*/
	}



/*****************************  
		PANEL BODY 
******************************/
	
.panelBody {
	background-color: #F7F7F7; 
	padding: 10px 5px 0px 5px; 
	font-size: 12px; 
	border: solid 1px #00AEEF; 
	height: auto;
	overflow-y: auto;
	overflow-x: hidden;
	}

.panelBodyCV{ /*different styles when in Content Viewer */
	padding: 0px 0px 0px 11px;
	border: solid 1px #00AEEF;
	height: expression(document.body.clientHeight - 45); 
	width: 100%;
	overflow-y:auto;
	overflow-x:auto;
	background-color: #FFFFFF;
	}

.withFooter { /*use with panelBodyCV when there is a footer - different height */
	height: expression(document.body.clientHeight - 207);
                            	}

.Tabs { /*use with panelBody when there are tabs */
	padding: 0px 0px 0px 0px; 
	overflow-x: auto;
	overflow-y: hidden;
	}

	/*BASIC TEXT DEFAULTS*/
H1 {
	font-weight: bold;
	font-size: 16px;
	color: #000;
	}

.heading, th { /*use when want less space above and below heading*/
	font-weight: bold;
	font-size: 14px;
	color: #000;
	margin: 5px 0px;
	}

.pageTitle {
	font-size: 20px;
	color: #000000;
	margin: 10px 0px 0px 0px; /*space between CV top bar and pageTitle*/
	}

.subTitle {
	font-size:14px;
	color: #666666;
	margin-top: 5px;
	line-height: 120%;
	}

.bodyContent{
	color: #333; 
	font-size:12px;
	margin-top: 10px; /*space between page title or sub title and content*/
	padding-bottom: 10px; /*space after end of content */
	}

a {color: #06F; text-decoration: underline;} 
a:hover, a:active {color: #00aeef; text-decoration: underline;}
li {list-style-image: url(images/bullet_normal.gif);font-size: 12px;color: #333}
p {color: #333; font-size:12px;} 

.error {
	padding: 9px 9px 9px; 
	margin-right: 9px; 
	background: white;
	border: 2px solid red;
	color: #c00;
	}

/*****************************  
		PANEL FOOTER 
******************************/

.panelFooter {
	position: relative;
	bottom: 0px;
	background: azure url(images/bg-footer.gif) repeat-x;
	width: 100%;
	height: 32px;
	font-size:11px;
	border: 1px solid #00AEEF;
	border-top: 0px;
	padding: 0px 5px 0px 5px; 
	text-align: right;
	}
	

.CE {  /*use with panelfooters - different styles when in Content Explorer*/
	border-bottom: 0px;
	background: transparent;
	margin: 0 -6px 0 -6px;
	}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
									 	TABS
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#tabsContainer{
	background-color: #EAEAEB;
	width: 100%; 
	height:30px;
	background-image:url(images/explorer_tabs/bg_tabs.gif);
	padding-left: 5px;
	}

.tab_leftOFF{background: url(images/explorer_tabs/tabOFF_left.gif) no-repeat left bottom;position: fixed; z-index: -10;}
.tab_rightOFF{background:url(images/explorer_tabs/tabOFF_right.gif) no-repeat right bottom; padding-right:14px; }
.tab_leftON{background: url(images/explorer_tabs/tabON_left.gif) no-repeat left bottom; position: relative;}
.tab_rightON{background:url(images/explorer_tabs/tabON_right.gif) no-repeat right bottom;font-weight: bold; padding-right: 7px}

#tabsContainer span {
	height: 30px;
	padding-top: 10px;
	position: relative;
	}

#tabsContainer a{
	cursor: pointer;
	height: 30px;
	text-decoration: none;
	padding-left: 26px;
	font: normal 8pt Arial;
	color: #000;
	text-align: center;
	margin-left: -10px;
	}

.tabcontent{
	width: 100%; 
	display:none;
	overflow-y: auto;
	padding: 10px 5px 5px 5px; 
	background-color: #F7F7F7; 
	height: 100%;
	}
			
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *  
							NAVIGATION LISTS IN PANELS 
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


/*****************************  
	SIMPLE NAVIGATION LISTS 
******************************/
ul.simpleNavList {
	margin: 0px 0px 10px 10px;
	padding-left: 10px;
	font-size: 11px;
	margin-top: 0px; 
	list-style-image: url(images/bullet_normal.gif);
	}

ul.simpleNavList li {
	font-size: 11px;
	line-height: 11px;
	margin: 0px 0px 8px 0px;
	}
	
ul.simpleNavList a, ul.simpleNavList a:hover {
	font-weight:normal;
	color: #4A4D55;
	text-decoration:none;
	margin: 0px 0px 0px -7px;
	}
	
ul.simpleNavList a:active{
	color: #00A2ED;
	list-style-image: url(images/bullet_on.gif);
	text-decoration:none;
}


/*****************************  
	COMPLEX NAVIGATION LISTS 
******************************/
ul.complexNavList {                          
	font-size: 11px;
	margin: 0px 0px 10px 17px;
	}
	
	/*folders*/
li#foldheader {  
	cursor:pointer ;
	line-height: 11px;
	margin: 0px 0px 8px 0px;
	}
#foldheader a{
	font-size: 11px;
	font-weight:bold;
	color:#333333;
	text-decoration:none;
	margin: 0px 0px 0px -4px;
	}
.foldheaderClosed {list-style-image:url(images/nav_arrow_right.gif);}
.foldheaderOpen {list-style-image:url(images/nav_arrow_down.gif);}

 	/*submenu under folder*/
#foldinglist{  
	list-style-image:url(images/bullet_normal.gif);
	cursor:default;
	display: none;
	margin: 5px 0px 0px 16px; 
	}
#foldinglist li {
	font-size: 11px;
	line-height: 11px;
	margin: 0px 0px 8px 0px;
	}
#foldinglist a{
	font-weight:normal;
	font-size: 11px;
	color:#4A4D55;
	text-decoration:none;
	margin: 0px 0px 0px -7px;
	}
#foldinglist a:active{
	color: #00A2ED;
	list-style-image:url(images/bullet_on.gif);
	text-decoration: none;
	}


			
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
										BUTTONS				   
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/*hold page level and popup buttons in a centered box*/
.centerControls {
	text-align: center;
	margin: 10px auto 6px auto;
	}

/*****************************  
	ICON BUTTONS 
******************************/
	
.full-view, .normal-view, 
.refresh, .cancel,
.move-right, .move-left, 
.move-up, .move-down, 
.move-all-right, .move-all-left, 
.move-top, .move-bottom { 
	width: 30px;
	height: 20px;
	background-position: left top;
	background-repeat: no-repeat;
	text-decoration:none;
	}

.full-view:hover, .normal-view:hover, 
.cancel:hover, .refresh:hover, 
.move-right:hover, .move-left:hover, 
.move-up:hover, .move-down:hover, 
.move-all-right:hover, .move-all-left:hover, 
.move-top:hover, .move-bottom:hover { 
	background-position: 0 -25px;
	}


.full-view:active, .normal-view:active, 
.cancel:active, .refresh:active,
.move-right:active, .move-left:active, 
.move-up:active, .move-down:active, 
.move-all-right:active, .move-all-left:active, 
.move-top:active, .move-bottom:active { 
	background-position: 0 -75px;
	}

.full-view {background-image: url("images/full-view.gif");} /* styles for viewer button - names referenced in toggleScreen.js do not change names *****/
.normal-view {background-image: url("images/normal-view.gif");} /* styles for viewer button - names referenced in toggleScreen.js do not change names *****/
.cancel {background-image: url("images/cancel.png"); width: 60px;}
.refresh{background-image: url("images/refresh.gif");}
.move-right {background-image: url("images/move-right.gif");}
.move-left {background-image: url("images/move-left.gif");}
.move-up {background-image: url("images/move-up.gif");}
.move-down {background-image: url("images/move-down.gif");}
.move-all-right {background-image: url("images/move-all-right.gif");}
.move-all-left {background-image: url("images/move-all-left.gif");}


/*****************************  
	TEXT BUTTONS 
******************************/

.btn, .commit {
	cursor: pointer;
	margin: 0px 5px 0px 5px; /* margin on left to ensure spacing between controls*/
	behavior: expression(this.hideFocus="true");
	line-height: 20px;
	text-decoration: none!important;
	white-space: nowrap;
}
.btn {background: transparent url("images/btn-slider.gif") no-repeat right top;}
.btn span{background: transparent url("images/btn-left.gif") no-repeat left top;}

.commit {background: transparent url("images/btn-commit_slider.gif") no-repeat right top;}
.commit span {background: transparent url("images/btn-commit_left.gif") no-repeat left top;}

.btn span, .commit span{
	text-decoration: none!important;
	text-align: left;
	font-size: 11px;
	font-family: Arial, sans-serif;
	font-weight: bold;
	color: white;
	line-height: 20px;
	padding: 3px 7px 6px 10px;
	position: relative;
	left: -2px;  /*offset to keep slider from showing through on left edge*/
	}

.btn:hover, .commit:hover { background-position: 100% -25px; }
.btn:hover span, .commit:hover span { background-position: 0 -25px; }
.btn:active, .commit:active { background-position: 100% -75px; }
.btn:active span, .commit:active span { background-position: 0 -75px; }


	/* DISABLED buttons; overrule default browser behaviors  */
.disabled, 
.disabled:hover,
.disabled:active { 
	background-position: right -50px;
	cursor: not-allowed; 
	}

a.disabled span,
a.disabled:hover span, 
a.disabled:active span { 
	background-position: left -50px; 
	cursor: not-allowed;
	}

/*****************************  
	ICONS WITH TEXT BUTTONS 
******************************/
span.btn-reset {
	padding: 3px 8px 3px 30px;
	background: transparent url("images/reset.gif") no-repeat left top;
	}

span.btn-next {
	padding: 3px 8px 3px 36px;
	background: transparent url("images/next.gif") no-repeat left top;
	}

span.btn-previous {
	padding: 3px 8px 3px 36px;
	background: transparent url("images/previous.gif") no-repeat left top;
	}

span.btn-save {
	padding: 3px 8px 3px 44px;
	background: transparent url("images/save.gif") no-repeat left top;
	}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
										FORM ELEMENTS
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
formmmm	{
	margin: 0 ;
	padding: 0;
	padding-left: 2px;
	display: inline;  /*for frameworks that use separate form for each widget*/
	}
	
form .subheading {
	font-size: 14px;
	}

.form-line  {
	width: 100%; /*width depends on application needs*/
	/*height: auto;*/
	margin-bottom: 5px; 
	padding: 1px 0 2px 0;
	font-family: Arial,sans-serif;
	font-weight: normal; 
	font-size: 11px; 
	color: #333; 
	}

form td.Nielsen, form td input.Nielsen, form td select  {
	/*width: 100%; width depends on application needs*/
	height: auto;
	margin-bottom: 2px;
	padding: 1px 0 2px 0;
	font-family: Arial,sans-serif;
	font-weight: normal; 
	font-size: 11px; 
	color: #333; 
	vertical-align: top;
	}

label {
  	width: 100px;
  	padding: 3px 5px 0 0; 
  	text-align: right;
	font-weight: normal; 
	}
	
label.CEPanel {
	width: 55px;
	}
	
	/*make checkbox and radio option labels clickable for IE6*/
	/*surround both label text and form element with label.clickable*/
label.clickable {
	float: none;
	background-color: transparent;
	width: auto;
	padding-right: 10px;
	behavior: expression(this.onclick = function() {if(!window.XMLHttpRequest) this.children[0].click() });
	/*last rule to apply only to IE6 and earlier*/
	}
	
label.clickable input {
	width: auto;
	background-color: transparent; /*overwrite input settings for radio and checkboxes*/
	border: none;
	height: 17px;
	}
	
	/*force label to height of form-line contents*/
label.variableHeight {
	height: expression(this.parentElement.children(1).currentStyle.height);
	}

input.Nielsen, select {
	font-size: 11px;
	margin-top: 1px;
  	border: 1px solid #BDBEC1;
  	background-color: #fff; 
  	padding: 3px 3px;
	width: 150px; /*regular inputs and dropdowns will line up*/ 
	}
	
textarea {
	width: 350px; 
	height: 60px; 
	overflow: auto;
  	border: 1px solid #BDBEC1; 
  	background-color: #fff; 
	}

.wide {width: 400px;} /*for wider form elements*/

option {color: black;}

optgroup {
	color: #00a2ed; /*optgroup supported by IE6*/
	background-color: white;
	}

.readonly	{ /* to emphasize readonly element */
	background-color: #eeeeee;
	color: #666;
	}
	
fieldset	{}
legend {}
	
small	{font-size: 10px;}
	



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
										TABLES					   
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
table.Nielsen {	
	background-color: transparent;
	width: 99.8%; /*many IE display bugs with 100% or auto value*/
	border: none;
	}
	
.tableContainer, .tableContainerAdjustable {
	margin: 0px 10px 12px 0px; 
	overflow: auto;
	border: 1px solid #000; 
	}	
	
	/*safe to use in show/hide situations	*/
.tableContainer {
	width: auto;
	height: 200px;
	}

	/*self-adjusting height possible if not used in show/hide situations */	
.tableContainerAdjustable {
	width: auto; 
	height: expression(document.body.clientHeight < 700 ? "280px" : (document.body.clientHeight-130) );
	/*values for dynamic height must be adjusted for different screens*/
	overflow-y: scroll;
	}
	
	/*alternate row colors */
.tableContainer tr, .tableContainerAdjustable tr {
	background-color: expression((this.rowIndex%2) ? "white" : "#EEEEEE"); 
}
	
	/*makes the non-scroll table header*/
div.tableContainer thead tr, div.tableContainerAdjustable thead tr {
	position: relative;
	top: expression(offsetParent.scrollTop); /*IE5+ only*/
	background: #EAEAEB; 
	z-index: 100; /*keep in front of data when scrolling*/
	}
	
	/*jsf tables use th in thead*/
.tableContainerAdjustable thead td, .tableContainerAdjustable thead th {
	text-align: left;
	font-size: 12px; 
	font-family: Arial, Sans-serif;
	color: #000; 
	font-weight: bold;
	vertical-align: middle; 
	border-bottom: solid 1px #000000; 
	border-right: solid 1px #C7C7C7;
	padding: 0 1px 0 5px; 
	height: 20px; /*optional value, use as necessary*/
	}	
	
.tableContainerAdjustable thead a, .tableContainerAdjustable thead a:active {color: black; text-decoration: underline;} 
.tableContainerAdjustable thead a:hover {color: #00aeef; text-decoration: underline;}

.tableContainer td, .tableContainerAdjustable td {  
	border-right: solid 1px #C7C7C7;
	border-bottom: solid 1px #C7C7C7;
	padding: 4px 3px 4px 5px;
	font-size: 11px;
	margin-bottom: 0px;
	}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
									Global print styles
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media print {

#chrome {display: none;}
#main-content-box {margin-top: 10pt;}
	
.tableContainer,.tableContainerAdjustable {overflow: visible;}

fieldset {border: none;}

	/*repeat table header on print*/
.tableContainer table thead {
	display: table-header-group;
	}
	
.tableContainer table thead td {
	font-size: 10pt;
	position: static;
	border-bottom: solid 2pt silver;
	}
	
	/* prevent printing table head in wrong position */
div.tableContainer thead tr, div.tableContainerAdjustable thead tr {
	position: static;
	}
	
} /*end print styles*/




/*******************************************************************************
 Copied from SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 
 Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. 

 Modified by Korey Kloeckner May 2009
 *******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: auto;
	}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive {
	z-index: 1000;
	color: #FFF;
	background: url(images/highlight.gif) top right;
	text-decoration: none;
	}



/*******************************************************************************

 		PRIMARY NAV MENU 

 *******************************************************************************/

/********************************************
 MAIN MENU ITEMS
*********************************************/

/* Menu item containers, position children relative to this container */
ul.MenuBarHorizontal li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	/*text-align: left;*/
	cursor: pointer;
	width: auto;
	float: left;
	}

ul.MenuBarHorizontal a {
	/*display: block;*/
	cursor: pointer;
	text-decoration: none;
	font-weight: bold;
	font-size: 11px; 
	color: #666666;  
	padding: 1px 12px 0 13px; /* right margin offset by 1 to show 13 on screen*/
	border-left: 1px solid #cdcdcd;
	height: 19px;
	/*text-align: center;*/
	background: url(images/bg_nav.gif) bottom right;
	}

/* hover/selected highlight*/ 
ul.MenuBarHorizontal a.MenuItemHover, ul.MenuBarHorizontal a.MenuItemMainHighlight, ul.MenuBarHorizontal a.MenuInFocus {
	color: #FFF;
	background: url(images/highlight.gif) top right;
	text-decoration: none;
	}

/********************************************
 MAIN MENU ITEMS WITH SUBMENU
*********************************************/

ul.MenuBarHorizontal a.MenuItemSubmenu {
	background: #F7F7F7 url(images/bg_nav_submenu.gif);
	background-repeat: no-repeat;
	background-position: bottom right;
	padding-right: 20px;
	}

/* hover/selected highlight */
ul.MenuBarHorizontal a.MenuItemSubmenuHover, ul.MenuBarHorizontal a.MenuItemSubmenuHighlight,
ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
	color: #FFF;
	background: #F7F7F7 url(images/highlight_submenu.gif)!important;
	background-repeat: no-repeat;
	background-position: top right;
	padding-right: 20px;
	text-decoration: none;
	}



/********************************************
 SUBMENUS - 1ST LEVEL
*********************************************/

/* Submenus containers  appear below their parent with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul {
	margin: 0 5px 0 9px;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	width: 120px;/*8.2em;*/
	position: absolute;
	left: -1000em;
	background-color: #F7F7F7; 
	border: 1px solid #CDCDCD;
	}

/* Submenu container that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {
	left: auto; 
	top: 17px; /*submenu displays below parent menu, this is 1px less than height of menu bar*/
	margin-left: -102%; /*temp fix offset of submenu - need to revisit */
	}

/* Submenu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li {
	width: 120px; /*8.2em;   MAKE SURE ALLOWS FOR LONGEST ITEM*/
	white-space: nowrap;
	background-color: #F7F7F7;
	}

/*submenu items */
ul.MenuBarHorizontal ul a {
	padding: 3px 10px 3px 9px;
	text-align: left;
	background: #F7F7F7;
	height: 18px;
	font-weight: normal;
	font-size: 11px;
	border-left: none;
	width: 130px; /* pre-set width so all li are the same*/
	}

/* hover/selected highlight */
ul.MenuBarHorizontal ul a.MenuItemHover, ul.MenuBarHorizontal a.MenuItemSubmenuLeafHighlight, ul.MenuBarHorizontal ul a.MenuItemSubmenuTwigLeafHighlight {
	background: #43BAF1; 
	color: #FFF;
	text-decoration: none;
	}

ul.MenuBarHorizontal ul li.separator {
	border-top: solid 1px #CCCCCC;  /*Divider line to group menu items when needed*/
	}

/********************************************
 	SUBMENUS - 2ND LEVEL
*********************************************/

/* Submenus 2nd level container appears slightly overlapping to the right (95%) */
ul.MenuBarHorizontal ul ul {
	position: absolute;
	margin: 0 0 0 95%; 
	}

/* Submenu 2nd Level container that is showing with class designation MenuBarSubmenuVisible, we set left so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
	left: auto;
	top: 0;
	margin-left: -3px; /*position 2nd Level Submenu*/
}

/* 2nd Level submenus have arrow pointing to the right */
ul.MenuBarHorizontal ul a.MenuItemSubmenu{
	background-image: url(images/submenu_right.gif);
	background-repeat: no-repeat;
	background-position: center right;
	}
/* 2nd Level submenus that are open */
ul.MenuBarHorizontal ul a.MenuItemSubmenuHover, ul.MenuBarHorizontal ul a.MenuItemSubmenuHighlight, ul.MenuBarHorizontal ul a.MenuItemSubmenuTwigHighlight  {
	background:  #43BAF1 url(images/submenu_right_hover.gif)!important;
	background-repeat: no-repeat!important;
	background-position: center right!important;
	color: #FFF;
	}





/*******************************************************************************

 		UTILITIES MENU 

 *******************************************************************************/


/*Utilities Menu items*/
.utilityBox ul.MenuBarHorizontal a {  
	padding: 2px 10px 0 9px; /*left margin offset by 1 to show 10 on screen*/
	font-size: 10px;
	font-weight: normal;
	color: #666666;  
	text-decoration: none;
	height: 19px;
	margin-left: 0px;
	}
	
.utilityBox ul.MenuBarHorizontal a.MenuItemHover, .utilityBox ul.MenuBarHorizontal a.MenuItemMainHighlight { 
	color: #FFF;
	background: transparent url(images/highlight_utils.gif) repeat-x top right; /*position must match hover state below*/
	Left: 0px;
	text-decoration: none;
	}

/* Utilities Menu items that have a submenu  */
.utilityBox ul.MenuBarHorizontal a.MenuItemSubmenu {
	background: #F7F7F7 url(images/bg_nav_submenu.gif);
	background-repeat: no-repeat;
	background-position: bottom right;
	padding-right: 20px;
	}
.utilityBox ul.MenuBarHorizontal a.MenuItemSubmenuHover, .utilityBox ul.MenuBarHorizontal a.MenuItemSubmenuHighlight {
	color: #FFF;
	background-image: url(images/highlight_utils_submenu.gif)!important;
	background-repeat: no-repeat;
	background-position: top right;
	padding-right: 20px;
	}
	
/* Utilities Submenu Items*/
.utilityBox ul.MenuBarHorizontal ul a.MenuItemHover, .utilityBox ul.MenuBarHorizontal a.MenuItemSubmenuLeafHighlight {
	background: #CECECE;
	text-decoration: none;
	color: #333333;
	}
	

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe {
	position: absolute;
	z-index: 1010;
	filter:alpha(opacity:0.1);
	}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul.MenuBarHorizontal li.MenuItemIE 	{
		display: inline;
		float: left;
		background: #FFF;
	}
}