/* --------------------------------------------------------------
Project INTERFACE menu stylesheet
-------------------------------------------------------------- */

/* Menu classes -- first, the wrapper
--------------------------------------------------------------*/
#menuDiv { /*the div containing the main menu*/
	padding:0; 
	margin: 0 auto ; /* originally 0 auto */
	height:36px; /* originally 41px */
	width:900px; 
	position:static; 
	left:0; 
	top:0px;
	color:#000000;
	/*overflow:visible; not necessary?*/
	/*background-color: #003366;*/ /*not necessary?*/
	/*background-color:#97B0DC;*/
	/*color: #000000; /* #FFFFFF; */
	/*width: 900px; /* origianlly 100%; */
	/* float: left; */
	/*margin: 0 5px;*/
	/*font-family: Arial, Helvetica, sans-serif;*/
	/*font-size:.9em;*/
	/*font-weight: bold;*/
	/*	height:30px;*/
}
/* overriding default rules for ULs, LIs and As
-------------------------------------------------- */
#menuDiv ul {
	padding: 0; /* originally 0, change to 5px top padding moves it up, but leaves white space between it and header div */
	list-style:none;
	/*	background: url(../images/back.gif); */
	background-color:#97B0DC;
	text-align:center;
	margin: 0 auto; /* originally 0 auto when changed to 5px top then white and gray stripe above ul */
	font-size:13px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	height:36px; /* 41px */
	width:900px;
	position:static;
	left:0px;
	top:0px;
	color:#000000;/*	list-style-type:none;
	margin:0; /*to override defaults 
	padding:0;/*to override defaults	*/
}

#menuDiv ul.mainMenu {
	padding-left:0; /* originally 30px */
/*	margin-top: 5px; did not work */
/*	padding-top:5px; did not work */
	height:36px; /* originally 30px then 41px make sure ul and div are same height; probably don't need to declare height for both... submenus are being placed relative to one of them though*/
	width:900px; /* originally 930px */
	color:#000000;
}
#menuDiv li {
/*	background-image: none; */
	background-image:url(../images/button-arrow.gif);
	background-position:right top;
	/*margin:0; to override defaults*/
	/*padding:5px 0;  to override defaults*/
	color:#000000;
	display:inline-block; /* when changed to BLOCK all menu items except HOME disappear */
	height:36px; /* originally 36px */
	margin:0; /* originally 5px 0 0 */
	padding:0 20px 0 15px; /* originally 0 20px 0 0 */
	line-height:30px;
	text-decoration:none;

}

#menuDiv li li {
	background-image: none; 
	margin:0; /*to override defaults*/
	padding:0 0;  /* originally 5px 0 to override defaults*/
	color:#000000;
	height:25px;
	border-bottom:#FFFFFF 1px solid;

}


#menuDiv a { /* overriding defaults for all <a> tags in menu -- takes priority over link classes */
	display: block;
	color:#000000;
	text-decoration:none; /* added to get rid of underlining */

}
#menuDiv a:hover {
	text-decoration: underline;
	text-decoration:none; /*don't want underlines on hover when there's another indicator (ie color, here). Have explicitly overriden, therefore*/
	color:#FFFFFF;
}
/* Main menu UL, LI, A
----------------------------------------------------- */
#mainMenu {  /*the ul containing the main menu*/
	/*background-color: #003366; */
	float: left; /* ? if removed then background image doesn't show up? */
/*	margin: 0; */
	padding: 0; /* was 0 */
/*	position: relative; */
/*	width:100%; */
	z-index: 999; /* originally 100 */
	
	list-style:none; 
	background: url(../images/back36h.gif); /* originally back.gif */
	text-align:center; 
	margin:0 auto; 
	font-size:13px; 
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
	height:36px; /* 41px */ 
	width:900px; 
	position:static; 
	left:0; 
	top:0px;
}
#mainMenu li.menuItem1 { /* top level <li>s */
/*	color: #FFFFFF; */
/*	background-image:url(../images/button-arrow.gif) right top;*/
	/*background-color: #003366; */
/*	float: left; */
/*	width:100px;*/ /*main menu area: 960 minus 220 sidebar minus 30 pad divided by 7*/
/*	text-align:center;  ? */
/* 	text-align:left; ? */
/*	padding-right:53px; */
/*	display:block; */
	
/*		display:inline-block;
	height:36px;
	margin:5px 0 0;
	padding:0 20px 0 0;
	line-height:30px;
	text-decoration:none;
	color:#000;*/
	font-weight:bold;
	display:inline-block; /* amy added back to test - inline-block seems OK, but block makes everything hidden except HOME */
	
}

#mainMenu li.menuItem1:hover {
	background-image:url(../images/button-arrow.gif);
	background-position:right bottom;
	margin:0px 4px 0 -4px; /* originally 5px 0 0 , then was 5px 4px 0 -4px */
	padding:0 20px 0 15px;
}

#mainMenu li.menuItem1.firstItem {
	background-image:url(../images/button.gif);
	background-position:right top;
	/*margin-left:63px;  positions HOME menu item; need both classes (menuItem1 and firstItem) to avoid firstItems of submenus*/
}

#mainMenu li.menuItem1.firstItem:hover {
	background-image:url(../images/button.gif);
	background-position:left bottom;
}

#mainMenu li#mainMenu-contact {
	padding-right:0;	
}

#mainMenu li#mainMenu-contactus {
	background-image:url(../images/button.gif);
	background-position:right top;
}

#mainMenu li#mainMenu-contactus:hover {
	background-image:url(../images/button.gif);
	background-position:left bottom;
	margin:0px 4px 0 -4px; /* originally 5px 4px 0 -4px */

}

#mainMenu li#mainMenu-translate {
/*	color: #B5C5D5; */
	float: right;
	width: 220px;
	padding-left:0;
	padding-right:0;
	text-align:center;
}
.menuLink1, .menuLink1:visited { /*first level links*/
/*	color: #FFFFFF; */
/*		background-color: #003366; */


}
/*on hover over first level li or a; .hovering is there specifically for javascript - don't remove (solves an IE issue - that there's no hover on an li*/
.menuItem1:hover, .menuItem1.hovering, .menuLink1:hover, .menuItem1:hover .menuLink1, .menuItem1.hovering .menuLink1 {
	color: #B5C5D5;
}
/* submenu containers -- divs
------------------------------------------------------------------------ */
.menu2 { /*submenu wrapper -- divs only*/
	display:none; /* none - when changed to BLOCK then translation menu is open by default without hovering */
	position: absolute; top: 126px; /* orginally 27px, then 151px,  align at bottom of nav bar -- same as height of nav bar, which is 30px, worked at 162px then we shrank the top so 131 is better */
/*	position:relative; top: 5px; left:0px;  TEST makes top bar items get wider, but submenu is positioned correctly below top bar */
	width:195px;  /*default width for submenus; overridden specifically below for individual submenus*/
	background-color: #F4C942; /* F4C942; */
	overflow: visible; /* hidden; - when hidden then not all menu items are visible, but when visible items appear inline horizontally instead of vertically block */
/*	border-bottom: 1px solid #FFFFFF; /* originally border: thin solid #003366 Removed border, because ul already has border if div has border too then too thick at bottom of menu */
	border-top:none;
	text-align:left;
	clear: both; /*fixes Safari 2 bug*/
}

#topicsMenu {
	width:600px; /* originally 48% then 820px */
}

#translateMenu {
	width: 270px; /* originally 42% */
/*	left: 57%;  originally 57% */
	position:relative; right:46px; top:5px; /* right:32px; top:5px; */
}

.subMenu { /* ul contained within a menu2 div */
	text-align: left; /*stop inheritance from parent li*/
	padding: 0;
	width: 100%; /* originally 96% */
	margin: auto;
}

#menuDiv ul.subMenu {
	margin-left:-14px;
}

/* submenu lis and as
------------------------------------------------------------------------ */

.menuItem2 { /*submenu li */
	display:block; /* block - did not make a difference when changed to inline or list-item */
/*	float:none; */
/*	padding: 2px 0 2px 2px;*/
/*	color: #003366; */

	float:left; 
	margin:0; 
	height:25px; /* 25px */
	line-height:20px; /* originally 25px */
	width:195px;
	background-color:#F4C942;
	color: #000; /* did not affect anything when color changed */
	padding: 0 10px; /* amy added */
	font-weight:normal; /* amy added */
	text-align:left; /* amy added */

}

.menuLink2 { /* submenu links */
	color: #000;
	background-color:#F4C942;
	float: left; /* originally none */
	/*padding-left:0px;  originally 10px */
	line-height:20px;
	padding: 0 10px;
	height:25px; 
	width:195px;

}
/*hover over second level li or a*/
.menuLink2:hover, .menuItem2:hover .menuLink2 { 
	/*color: #B5C5D5; */ /*omit color; then default lighter blue as in main text, which is also used for visited*/
	background-color: #0048B2; /*repeated here for IE6 */
	color:#FFFFFF;
	text-decoration:none;  /*don't use underline when have other things indication the link, ie color changes*/
	display:block; /*amy added to test */
}

#menuDiv ul.subMenu {
height:auto; /* makes the height change from 41px, but still inline-block */
display:block; /*amy added to test */
/* width:195px;  fixed about menu, but messed up topics menu */
/* white-space:normal; amy added to test, no change */
/* overflow:visible; amy added to test, no change */
/* vertical-align:baseline; amy added to test, no change */
/* float:none; amy added to test, no change */

}

#menuDiv ul#aboutMenuList {
width:295px;
}

#menuDiv ul#aboutMenuList li {
width:295px;
}

#menuDiv ul#aboutMenuList li a {
width:275px; /* must be wider than other menus to accomodate "MSPP Interface Referral Service in the News" */
}

#menuDiv ul#locationsMenuList, #menuDiv ul#guidesMenuList, #menuDiv ul#publicationsMenuList, #menuDiv ul#teensMenuList {
width:215px;
}

#menuDiv ul#locationsMenuList li, #menuDiv ul#guidesMenuList li, #menuDiv ul#publicationsMenuList li, #menuDiv ul#teensMenuList li {
width:215px;
}

#menuDiv ul#locationsMenuList li a, #menuDiv ul#guidesMenuList li a, #menuDiv ul#publicationsMenuList li a, #menuDiv ul#teensMenuList li a {
width:195px;
}

#menuDiv ul#topicsMenuList {
width:620px; /* must be wider than other menus to accomodate two columns */
}

#menuDiv ul#topicsMenuList li {
width:310px;
}

#menuDiv ul#topicsMenuList li a {
width:290px; /* must be wider than other menus to accomodate "Autism Spectrum Disorders/Asperger's Syndrome" */
}

#menuDiv ul#aboutMenuList li.menuItem2 {
display:block; /*amy added to test */
/* white-space:normal; amy added to test, no change */
/* overflow:visible; amy added to test, no change */
/* vertical-align:baseline; /*amy added to test, no change */
float:none; /*amy added to test, important, fixed it! */
}

#menuDiv ul#locationsMenuList li.menuItem2, #menuDiv ul#guidesMenuList li.menuItem2, #menuDiv ul#publicationsMenuList li.menuItem2, #menuDiv ul#teensMenuList li.menuItem2 {
display:block; /*amy added to test */
float:none; /*amy added to test, important, fixed it! */
}

div#menuDiv ul#mainMenu li#mainMenu-events {
display:none;
visibility:hidden;
width:0px; /* hides Events menu, which is no longer used */
}

#menuDiv ul#translateMenuList {
width:270px; /* must be wider than other menus to accomodate three columns */
height:312px;
margin-left:0px; /* ul.subMenu usually has a 14px margin-left need to change to 0px for translatemenulist so it doesn't go off side of page */
background-color:#F4C942; /* needs yellow background, otherwise the light blue shows through at bottom in extra spaces without languages in them */
}

#menuDiv ul#translateMenuList li {
width:90px;

}

#menuDiv ul#translateMenuList li a {
width:70px; /* can be skinner since names of languages are shorter than other menu items */
}


/*These column lis are used elsewhere, not just in menu -- edit with care */

li.col_2 {
	width: 47%;  /*must leave at 47 to make topic page stay in two columns*/
	float: left;
}
li.col_3 {
	width: 32%;
	float: left;
}
li.col_3.linkItem {
	width: 30%;
}
li.col_4 {
	width: 24%;
	float: left;
}
li.left {
	clear:left;
}
.menuItem1:hover .menu2, .menuItem1.hovering .menu2 { /* display submenu when hovering over parent */
	display: block;
	z-index: 6000;
}
.subMenuHead {
	width: 100%; /* originally 96% */
	color:#003366;
	background-color:#fff;
	text-transform:uppercase;
	border-bottom: 2px solid #003366;
	margin-bottom: .2em;
	margin-top:0; /* originally -5px */
	padding:5px 0 2px; /* originally 3px 0 0 */
	text-align:center;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}