@charset "UTF-8";

/*List Attributes*/	

	ul#nav
		{
			margin:0px;
			padding:0px;
			
		}

	

	#nav li ul, #nav li ul {
		margin: 0;
		padding: 0;
	}

	#nav a {
		text-decoration: none;
		
	}
	
	#nav li { /*float the main list items*/
		margin: 0;
		float: left;
		display: block;
		
		}

	#nav li ul {
		display: none;
	}

	#nav li.off ul, #nav li.on ul   { /*put the subnav below*/
		position: absolute;
		top: 49px;
		left:-223px;
		padding-top: 20px;
		background: #8d241e;
		height:110px;
		width:628px;
		padding-left:30px;
		opacity: .90;
		filter: alpha(opacity=90);
		background-image:url(../images/eng/nav/barbottom.gif);
		background-repeat:no-repeat;
		background-position:bottom;
	
		
	}
	
	
	
	
	
	

#nav li.on ul {
		background: #8d241e;
		
	}

	#nav li.on:hover ul, #nav li.over ul { /*for ie*/
		background: #8d241e;
	}

	#nav li a {
		color: #224d6f;
		font-weight: bold;
		display: block;
		
		padding: 0;
	}

	#nav li.on a {
		color: #f90;
	}

	#nav li.on ul a, #nav li.off ul a {
		border: 0;
		
		color: #f90;
		width: 155px;
		margin-right: 0px;
	}
	
#nav li.on ul#centre a, #nav li.off ul#centre a, #nav li.on ul#newssub a, #nav li.off ul#newssub a {
		border: 0;
		
		color: #f90;
		width: 100px;
		margin-right: 0px;
	}

	#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
		background: #b9cce8;
	}

	#nav li.on ul {
		display: block;
	}

	#nav li.off:hover ul, #nav li.over ul {
		display: block;
		z-index: 6000;
	}

	#nav li.off a:hover, #nav li.on a:hover, #nav li.off ul#newssub a:hover, #nav li.on ul#newssub a:hover,  #nav li.off ul#centre a:hover, #nav li.on ul#centre a:hover { 
		color: #f7be0d;
	}

	

	#liprograms a, #linews a, #lithecentre a {
		display: block;
		position: relative;
		height:49px;
		background:url(../images/eng/nav/mainnav_map.jpg) no-repeat; /*contains all hover states*/
		
	}
	

/*first, put the initial states in place*/



#liprograms a {
	background-position: 0px 0px;
	width:134px;
	
}

#linews a {
	background-position: -136px 0;
	width:164px;
	
}

#lithecentre a {
	background-position: -300px 0;
	width:146px;
}


/*active area - for this demo - the code could be based on a body class, and probably work better.*/

 #liprograms.on a {
 	background-position: -0px -49px;
	
 } 
 
 #linews.on a {
 	background-position: -136px -49px;
	}
	
 #lithecentre.on a {
 	background-position: -300px -49px;
	}
	
	/*add selectors for the other li's and background-positions*/

/*hover states*/

#liprograms a:hover, #liprograms:hover a, #liprograms.over a {
	background-position: 0 -49px;
}

#linews a:hover, #linews:hover a, #linews.over a {
	background-position: -136px -49px;
}

#lithecentre a:hover, #lithecentre:hover a, #lithecentre.over a {
	background-position: -300px -49px;
}


/*subnav formatting*/

#nav li.off ul a, #nav li.on ul a {
	display: block;
	background: #8d241e;
	color: #ffffff;
	font-family: arial, verdana, sans-serif;
	font-size:11px;
	height:18px;
	font-weight:lighter;
	padding-right:50px;
	
}

#nav li.off ul#centre a, #nav li.on ul#centre a {
	display: block;
	background: #8d241e;
	color: #ffffff;
	font-family: arial, verdana, sans-serif;
	font-size:11px;
	height:18px;
	font-weight:lighter;
	padding-right:0px;
	margin-left:515px;
	padding-right:0px;
	
	
}



#nav li.off ul#newssub a, #nav li.on ul#newssub a {
	display: block;
	background: #8d241e;
	color: #ffffff;
	font-family: arial, verdana, sans-serif;
	font-size:11px;
	height:18px;
	font-weight:lighter;
	padding-top:0px;
	
	margin-left:350px;
	
}



#nav li.on ul a {
	background: #8d241e;
}




/*French Main Nav*/

#liprogramsfr a, #linewsfr a, #lithecentrefr a {
		display: block;
		position: relative;
		height:49px;
		background:url(../images/fr/nav/main_nav_fr.jpg) no-repeat; /*contains all hover states*/
		
	}
	

/*first, put the initial states in place*/



#liprogramsfr a {
	background-position: 0px 0px;
	width:165px;
	
}

#linewsfr a {
	background-position: -165px 0;
	width:154px;
	
}

#lithecentrefr a {
	background-position: -319px 0;
	width:126px;
}


/*active area - for this demo - the code could be based on a body class, and probably work better.*/

 #liprogramsfr.on a {
 	background-position: -0px -50px;
	
 } 
 
 #linewsfr.on a {
 	background-position: -165px -50px;
	}
	
 #lithecentrefr.on a {
 	background-position: -319px -50px;
	}
	
	/*add selectors for the other li's and background-positions*/

/*hover states*/

#liprogramsfr a:hover, #liprogramsfr:hover a, #liprogramsfr.over a {
	background-position: 0 -50px;
}

#linewsfr a:hover, #linewsfr:hover a, #linewsfr.over a {
	background-position: -165px -50px;
}

#lithecentrefr a:hover, #lithecentrefr:hover a, #lithecentrefr.over a {
	background-position: -319px -50px;
}













/* jobs Nav*/

.volunteer a
	{
		background-image:url(../images/eng/programs/nav/programs_volunteer.jpg);
		width:179px;
		height:73px;
		float:left;
		display:block;
	}
	
.volunteer a:hover
	{
		background-position: 0 -73px;
	}
	
	
.volunteerfr a
	{
		background-image:url(../images/fr/programmes/benevolat.jpg);
		width:179px;
		height:88px;
		float:left;
		display:block;
	}
	
.volunteerfr a:hover
	{
		background-position: 0 -88px;
	}
	
/* Programs Nav*/	

.contentleft ul
	{
		width:305px;
		height:auto;
		margin-top:20px;
		margin-left:5px;
		padding:0px;
	}		

.contentleft a
	{
		font-family:Arial, Helvetica, sans-serif;
		font-size:12px;
		color:#000000;
		text-decoration:none;
	}
	
.contentleft a:hover
	{
		color:#b33b35;
	}
	
.contentleft li
	{
		list-style:none;
		padding-bottom:10px;
	}
	
	
	
/*The Centre Sub Nav*/





	




ul#navcentre
		{
			margin:0px;
			padding:0px;
			
		}

	

	#navcentre li ul, #navcentre li ul {
		margin: 0;
		padding: 0;
		
	}

	#navcentre a {
		text-decoration: none;
		
	}
	
	#navcentre li { /*float the main list items*/
		margin: 0;
		float: left;
		display: block;
		
		}

	#navcentre li ul {
		display: none;
	}

	
	

#navcentre li.on ul {
		background: #212e6e;
	}

	#navcentre li.on:hover ul, #navcentre li.over ul { /*for ie*/
		background: #b9cce8;
	}

	#navcentre li a {
		color: #224d6f;
		font-weight: bold;
		display: block;
		
		padding: 0;
	}

	#navcentre li.on a {
		color: #f90;
	}

	#navcentre li.on ul a, #navcentre li.off ul a {
		border: 0;
		float: left; /*ie doesn't inherit the float*/
		color: #f90;
		width: auto;
		margin-right: 15px;
	}

	#navcentre li.on:hover ul a, #navcentre li.over ul li a { /*for ie - the specificity is necessary*/
		background: #b9cce8;
	}

	#navcentre li.on ul {
		display: block;
	}

	#navcentre li.off:hover ul, #navcentre li.over ul {
		display: block;
		z-index: 6000;
	}

	#navcentre li.off a:hover, #navcentre li.on a:hover { 
		color: #ffffff;
	}
	
	
#liaboutus a, #liannuals a, #lidonations a, #livolunteer2 a, #lijobs a, #lilinks a, #licontact a {
		display: block;
		position: relative;
		height:73px;
		background:url(../images/eng/thecentre/thecentre_navmap2.jpg) no-repeat; /*contains all hover states*/
		
	}
	



#liaboutus a {
	background-position: 0px 0px;
	width:63px;
	
}

#livolunteer2 a {
	background-position: -63px 0;
	width:86px;
}

#lijobs a {
	background-position: -149px 0;
	width:41px;
}

#lilinks a {
	background-position: -190px 0;
	width:76px;
}

#licontact a {
	background-position: -266px 0;
	width:55px;
}


/*active area - for this demo - the code could be based on a body class, and probably work better.*/

 #liaboutus.on a {
 	background-position: -0px -73px;
	
 } 


#livolunteer2.on a {
 	background-position: -63px -73px;
	}
	
	

	
#lijobs.on a {
 	background-position: -149px -73px;
	}
	
	

	
#lilinks.on a {
 	background-position: -190px -73px;
	}
	

	
#licontact.on a {
 	background-position: -266px -73px;
	}
	
	
	/*add selectors for the other li's and background-positions*/

/*hover states*/

#liaboutus a:hover, #liaboutus:hover a, #liaboutus.over a  {
	background-position: 0 -73px;
}

#liannuals a:hover, #liannuals:hover a, #liannuals.over a {
	background-position: -63px -73px;
}

#lidonations a:hover, #lidonations:hover a, #lidonations.over a {
	background-position: -159px -73px;
}



#livolunteer2 a:hover, #livolunteer2:hover a, #livolunteer2.over a {
	background-position: -63px -73px;
}


#lijobs a:hover, #lijobs:hover a, #lijobs.over a {
	background-position: -149px -73px;
}


#lilinks a:hover, #lilinks:hover a, #lilinksr.over a {
	background-position: -190px -73px;
}


#licontact a:hover, #licontact:hover a, #licontact.over a {
	background-position: -266px -73px;
}



/*The Centre French Sub Nav*/



#liaboutusfr a, #liannualsfr a, #lidonationsfr a, #livolunteer2fr a, #lijobsfr a, #lilinksfr a, #licontactfr a {
		display: block;
		position: relative;
		height:73px;
		background:url(../images/fr/lecentre/lecentre_subnav_map.jpg) no-repeat; /*contains all hover states*/
		
	}
	



#liaboutusfr a {
	background-position: 0px 0px;
	width:63px;
	
}

#livolunteer2fr a {
	background-position: -63px 0;
	width:76px;
}

#lijobsfr a {
	background-position: -137px 0;
	width:65px;
}

#lilinksfr a {
	background-position: -204px 0;
	width:61px;
}

#licontactfr a {
	background-position: -266px 0;
	width:56px;
}


/*active area - for this demo - the code could be based on a body class, and probably work better.*/

 #liaboutusfr.on a {
 	background-position: -0px -73px;
	
 } 


#livolunteer2fr.on a {
 	background-position: -63px -73px;
	}
	
	

	
#lijobsfr.on a {
 	background-position: -139px -73px;
	}
	
	

	
#lilinksfr.on a {
 	background-position: -202px -73px;
	}
	

	
#licontactfr.on a {
 	background-position: -266px -73px;
	}
	
	
	/*add selectors for the other li's and background-positions*/

/*hover states*/

#liaboutusfr a:hover, #liaboutusfr:hover a, #liaboutusfr.over a  {
	background-position: 0 -73px;
}

#liannualsfr a:hover, #liannualsfr:hover a, #liannualsfr.over a {
	background-position: -63px -73px;
}

#lidonationsfr a:hover, #lidonationsfr:hover a, #lidonationsfr.over a {
	background-position: -159px -73px;
}



#livolunteer2fr a:hover, #livolunteer2fr:hover a, #livolunteer2fr.over a {
	background-position: -63px -73px;
}


#lijobsfr a:hover, #lijobsfr:hover a, #lijobsfr.over a {
	background-position: -137px -73px;
}


#lilinksfr a:hover, #lilinksfr:hover a, #lilinksfr.over a {
	background-position: -202px -73px;
}


#licontactfr a:hover, #licontactfr:hover a, #licontactfr.over a {
	background-position: -266px -73px;
}








/*About Nav*/


ul#navabout
		{
			margin:0px;
			padding:0px;
			
		}

	

	#navabout li ul, #navabout li ul {
		margin: 0;
		padding: 0;
		
	}

	#navabout a {
		text-decoration: none;
		
	}
	
	#navabout li { /*float the main list items*/
		margin: 0;
		
		display: block;
		
		}

	#navabout li ul {
		display: none;
	}


	#navabout li.off ul, #navabout li.on ul   { /*put the subnav below*/
		position: absolute;
		top:30px;
		right:180px;
		padding-top: 20px;
		background: #ffffff;
		height:400px;
		width:300px;
		padding-left:30px;
		
		
		
		
		
		}
	
		
	
	

#navabout li.on ul {
		background: #ffffff;
	}

	#navabout li.on:hover ul, #navabout li.over ul { /*for ie*/
		background: #ffffff;
	}

	#navabout a {
		color: #224d6f;
		font-weight: bold;
		display: block;
		width:100px;
		padding: 0;
	}

	#navabout li.on a {
		color: #f90;
	}

	#navabout li.on ul a, #navabout li.off ul a {
		border: 0;
		float: left; /*ie doesn't inherit the float*/
		color: #f90;
		width: auto;
		margin-right: 15px;
	}

	#navabout li.on:hover ul a, #navabout li.over ul li a { /*for ie - the specificity is necessary*/
		background: #b9cce8;
	}

	#navabout li.on ul {
		display: block;
	}

	#navabout li.off:hover ul, #navabout li.over ul {
		display: block;
		z-index: 6000;
	}

	#navabout li.off a:hover, #navabout li.on a:hover { 
		color: #f90;
	}
	
	
	
	
#navabout a {
	display: block;
	
	color: #b33b35;
	font-family: arial, verdana, sans-serif;
	font-size:15px;
	height:18px;
	font-weight:lighter;
	padding-right:50px;
	margin-bottom:20px;
	margin-top:20px;
	
	
}


#navabout li.on ul a {
	background: #b33b35;
}