/* clt.css */

@import url(undo.css);
@import url(snazzy.css);

h1 {
	margin: 24px 0 0; /* this assumes ONE h1 element per page */
	padding: 0;
	font-size: 1em;
	color: #1070b8;
	}

body { 
	text-align: center; /* [1] */
	background-color: #fff;
	}
	
#wrapper { 
	text-align: left; /* [1] */
	width: 780px;
	margin: 0 auto;
	position: relative;
	border: 1px solid #fff;
	overflow: hidden;
	}

	#col-leftPanel-page { 
	 	float: left;
		width: 600px;
		background: url(../images/clouds_600x150.gif) no-repeat 0 -1px #fff;
		position: relative;
	  }
		
		#cltlogo { 
			position: absolute;
			display: block;
			top: 57px;
			top: 17px;
			left: 40px;
			}
		
		#header { 
			background-color: #1070b8;
			padding-left: 34px;
			padding-right: 14px;
			}

				#menu2 {
					font-size: 80%;
					color: #fff; 
					font-weight: bold;
					line-height: 2em;
					}			
					#menu2 .close,
					#menu2 .navItem {
						padding-left: 6px; 
						padding-right: 6px;
					}
					#menu2 .close {
						text-align: right;
					}
					#menu2 .close a:link, #menu2 .close a:visited,
					#menu2 .navItem a:link, #menu2 .navItem a:visited {
						color: #fff; 
						text-decoration: none;
						border-bottom: 1px solid #1070b8;
						padding-bottom: 1px;
					}
					#menu2 .navItem a:link, #menu2 .navItem a:visited {
						line-height: 3em;
					}
					#menu2 .close a:hover, #menu2 .close a:visited:hover, 
					#menu2 .navItem a:hover, #menu2 .navItem a:visited:hover, 
					#menu2 .focus a:link, #menu2 .focus a:visited, #menu2 .focus a:hover,
					#menu2 .focus a:visited:hover {  
						background-color: #1070b8; /* knock-out */
						border-color: #fff;
					}
	
		#leftPanel {
			float: left; /* unchanged */
			width: 173px; /* altered */
			position: relative;
			}
	
						#leftPanel .xboxcontent {  
							padding-left: 6px;
							}

			.jackinthebox {
				margin-top: 160px;
				}
			.jackinthebox img {
				display: block;
				}
			.features { 
				padding: 0;
				}
				.features img { 
					display: inline;
					width: 173px;
				}
				.features .thumb { 
					display: none;
				}

				.sequence {  
					background-color: #1ab70c;
					text-align: center;
					margin: 0;
					padding: 1px 0 3px 0;
					line-height: 1.5em;
					color: #fff;
					}
				.sequence .navItem {  
					display: inline;
					}
				.sequence .navItem a {
					font-weight: bold;
					text-decoration: none;
					color: #fff;
					}
				.sequence .navItem a:link { color: #fff; }
				.sequence .navItem a:visited { color: #fff; }
				.sequence .navItem a:hover { color: #fff; text-decoration: underline }
				.sequence .navItem a:visited:hover { color: #fff; text-decoration: underline }
				.sequence .navItem a:active { color: #fff; }
				.sequence .next {  
					float: right;
					padding: 0 3px;
					}
				.sequence .previous {  
					float: left;
					padding: 0 3px;
					}
				.sequence .submenu {  
					display: inline; /* IE? */
					}

		/* width is 600px - 170px - 18px - 18px = 394px */		
		#page {
			padding: 0px 18px 3em; /* knockout */
			margin-left: 170px;
			position: relative;
			}
		
				div.switchmenu {  
					/*
					this class covers basic properties of the diverse menus at the top of .page
					these include the flags, the circle photos, and the 'other supports' menu
					ID instances cover each specific menu
					*/
					font-size: 1.3em;
					}
					#menu8 {
						width: 180px;  /* #page is 394px */
						text-align: center;

						/* 
						This is a dodgy solution to a problem caused
						by the basic float layout. 
						*/
						float: none;
						margin-left: 211px;
						position: relative;
						right: -18px;
						}
						#menu8 h3 {
							color: #fff; background: #27b24b;
							font-size: 1em;
							line-height: 1.5em;
							margin: 0;
							}		
						#menu8 .xboxcontent {
							background: #ddefd9;
							}		
						#menu8 .navItem a {
							text-decoration: none;
							padding-bottom: 1px;
							border-bottom: 1px solid #ddefd9;	
							font-weight: bold;
							}
						#menu8 .navItem a:link, #menu8 .navItem a:visited  {
							color: #27b24b;	
							}		
						#menu8 .navItem a:hover, #menu8 .navItem a:visited:hover  {
							color: #27b24b; border-color: #27b24b; 
							}		
					#flags {
						height: 20px;
						text-align: right;
						margin-top: 55px;
						margin-right: -6px;
						}
						#flags .navItem {
							width: 26px;
							height: 16px;
							margin-left: 6px;
							}
							#flags .navItem a img {
								display: inline;
								}

						/* 
							Note: both #stacked-agegroup and #flat-agegroup use the CSS sprites technique 
							see http://alistapart.com/articles/sprites
						*/
						.agegroup {  
							position: relative;	
							}
								#stacked-agegroup {  
									width: 390px;
									height: 220px;
									}	
								#flat-agegroup {  
									width: 336px; /* #page is 394px */
									height: 108px;
									margin: 0 25px 0;
									}								
							.agegroup span, .agegroup span a { 
								display: block;
								}					
									#stacked-agegroup span { 
										width: 50%;
										height: 50%;
										position: absolute;
										}		

							.agegroup span a { text-decoration: none; }
							.agegroup a:link, .agegroup a:visited { color: #2481c4; }		
							.agegroup a.focus:link, .agegroup a.focus:visited, 
							.agegroup a.focus:hover, .agegroup a.focus:visited:hover, 
							.agegroup a:hover, .agegroup a:visited:hover { color: #2fae4a; }										
										
									#flat-agegroup span a { 
										width: 25%; /* 84px */
										background-position: 50% 0;
										background-repeat: no-repeat;
										background-image: url(../images/flat_agegroup_336x260.jpg);
										padding-top: 84px;
										text-align: center;
										position: absolute;
										top: 0;
										}	
									#stacked-agegroup span a { 
										width: 75px;
										height: 100%;
										}		

							#flat-agegroup .children a { background-position: 0 0; left: 0; }
							#flat-agegroup .youth a { background-position: -84px 0; left: 26%; }
							#flat-agegroup .adults a { background-position: -168px 0; left: 51%; }
							#flat-agegroup .family a { background-position: -252px 0; left: 76%; }
	
							#flat-agegroup .children a:hover, #flat-agegroup .children a:visited:hover, #flat-agegroup .children .focus { background-position: 0 -128px; left: 0; }
							#flat-agegroup .youth a:hover, #flat-agegroup .youth a:visited:hover, #flat-agegroup .youth .focus { background-position: -84px -128px; left: 26%; }
							#flat-agegroup .adults a:hover, #flat-agegroup .adults a:visited:hover, #flat-agegroup .adults .focus { background-position: -168px -128px; left: 51%; }
							#flat-agegroup .family a:hover, #flat-agegroup .family a:visited:hover, #flat-agegroup .family .focus { background-position: -252px -128px; left: 76%; }
													
							#stacked-agegroup span a { 
								line-height: 110px;
								}
								#stacked-agegroup .children a, #stacked-agegroup .adults a { padding-right: 120px }
								#stacked-agegroup .youth a, #stacked-agegroup .family a { padding-left: 120px }
								
								#stacked-agegroup .children { top: 0; left: 0; text-align: right;}
								#stacked-agegroup .youth { top: 0; left: 50%;}
								#stacked-agegroup .adults { top: 50%; left: 0; text-align: right; }
								#stacked-agegroup .family { top: 50%; left: 50%;}

								#stacked-agegroup .children a:link, #stacked-agegroup .children a:visited { background: transparent url(../images/stacked_agegroup_220x880.jpg) no-repeat -25px 0; }
								#stacked-agegroup .youth a:link, #stacked-agegroup .youth a:visited { background: transparent url(../images/stacked_agegroup_220x880.jpg) no-repeat 0px -440px; }
								#stacked-agegroup .adults a:link, #stacked-agegroup .adults a:visited { background: transparent url(../images/stacked_agegroup_220x880.jpg) no-repeat -25px -110px; }
								#stacked-agegroup .family a:link, #stacked-agegroup .family a:visited { background: transparent url(../images/stacked_agegroup_220x880.jpg) no-repeat 0px -550px; }

								#stacked-agegroup .children a:hover, #stacked-agegroup .children a:visited:hover { background: transparent url(../images/stacked_agegroup_220x880.jpg) no-repeat -25px -220px; }
								#stacked-agegroup .youth a:hover, #stacked-agegroup .youth a:visited:hover { background: transparent url(../images/stacked_agegroup_220x880.jpg) no-repeat 0 -660px; }
								#stacked-agegroup .adults a:hover, #stacked-agegroup .adults a:visited:hover { background: transparent url(../images/stacked_agegroup_220x880.jpg) no-repeat -25px -330px; }
								#stacked-agegroup .family a:hover, #stacked-agegroup .family a:visited:hover { background: transparent url(../images/stacked_agegroup_220x880.jpg) no-repeat 0 -770px; }

								

	.displaytext {  
		font-size: 1.5em; /* 22px */
		color: #2481c4;
		text-align: center; /* [1] */
		width: 335px;
		margin: 20px auto;
		}
		.displaytext p {
			margin: 0;
		}			
		.displaytext .line1 {
			text-align: left;
			}				
		.displaytext .line2, .displaytext .line3 {
			text-align: right;
			}	

#breadcrumbs {
	padding: 1em 0 0;
	font-size: 80%;
	color: #2481c4;
}	
	#breadcrumbs a { text-decoration: none; font-weight: bold; }
	#breadcrumbs a:link, #breadcrumbs a:visited { border-bottom: 1px solid #fff; }
	#breadcrumbs a:link, #breadcrumbs a:visited, #breadcrumbs a:hover, #breadcrumbs a:visited:hover { color: #2481c4; }	
	#breadcrumbs a:hover, #breadcrumbs a:visited:hover { border-color: #2481c4; }		

.tagline {
	color: #2481c4;
	font-size: 80%;
	margin-top: 3em;
	text-align: center;
	clear: both;
	padding-left: 200px;
	padding-right: 200px;
	
	top: -1.5em;
	position: relative;
	}
	.tagline strong {
		font-style: italic;
		}

.unitedWayWrapper {
	text-align: center;
	padding-top: 18px;
	}
	.unitedWayWrapper img {
		}

/* accessibility menu */

#accessibilityBorder {
	border: 1px solid white;
	margin-bottom: 14px;
}
#accessibilityMenu {
	padding: 0 2px 6px 2px;
	display: none;
}

#accessibilityToggle {
	color: white;
	background-color:#2170B3;
	height: 2em;
}
#accessibilityToggle .tab {
	float: left;
	width: 152px;
	text-align: center;
	padding-top: 0.3em;
	text-decoration: none;
}
#accessibilityToggle .tab a {
	color: white;
	text-decoration: none;
	border: 0;
}
#accessibilityToggle .tab a:hover {
	text-decoration: underline;
}
#accessibilityToggle .angleLeft {
	float: left;
	border-top: 2em solid #2170B3;
	border-left: 10px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	height: 0pt;
	overflow: hidden;
	position: relative;
	top: 0pt;
	width: 0pt;
}
#accessibilityToggle .angleRight {
	float: left;
	border-top: 2em solid #2170B3;
	border-right: 10px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	height: 0pt;
	overflow: hidden;
	position: relative;
	top: 0pt;
	width: 0pt;
}

.alli-options {
	list-style: none;
	text-align: left;
	line-height: 2em;
	margin: 0.2em;
	overflow: hidden;
	padding-top: 0.2em;
}
.menubox .alli-options ul,
.alli-options ul, .alli-options li, .alli-options h3 { 
	display: inline; 
	margin: 0; 
	padding: 0; 
}
.alli-options h3 { 
	padding-right: 0.3em;
}
.alli-options a {
	text-decoration: none;
	border: 1px solid #444; 
	padding: 2px 2px;
	margin: 0 0px;
	background-color: #fff;
}
.alli-options a:hover, .alli-options a:focus, .alli-options a:active {
	background-color: #004080;
	color: #fff;
}
	
#rightPanel { 
float: right;
width: 180px;
}	
#rightPanel .innerwrap {
	padding-left: 6px;
	}

#leftPanel h3 {  
color: #fff;
font-size: 1em;
padding: 0.5em 0;
}

h3 { 
font-size: 1.75em;
line-height: 1em;
margin: 0;
padding: 0;
}	
.h3-section h3 {
	color: #1070b8;
	}
.h3-subsection h3 {
	color: #27b24b;
	}
#rightPanel h3 {  
	font-size: 1.25em;
	}
	
#rightPanel .xtop {
margin-top: 6px;
}
#rightPanel .xboxpadding {
padding-bottom: 6px;
}	
#rightPanel .xbottom {
margin-bottom: 6px;
}		

.menubox .navItem {
display: block;
line-height: 1.25em;
padding: 0.1em 6px;
}

	.menubox ul {
		padding: 0.1em 6px;
		margin: 0 0 0 15px;
		}
	.menubox li {
		margin-bottom: 1px;
		}
	.menubox li .navItem {
		padding: 0;
		}
		
	.menubox a {
		font-weight: bold;
		} 
	.menubox a:link, .menubox a:visited, .menubox a:hover, .menubox a:hover:link {
		text-decoration: none;
		padding-bottom: 1px;
		border-bottom: 1px solid #000;
		} 
		.menubox .submenu a {
			font-size: 80%;
			} 

#menu3 li a {
		font-weight: normal;
		} 
#menu3 .menubox {  
	background-color:#2170B3;
	padding: 6px 3px;
	margin-top: -4px;
	}
#menu3 .menubox a:link,
#menu3 .menubox a:visited {  
	border-color: #2170B3;
	color: #fff;
	}
#menu3 .menubox a:hover,
#menu3 .menubox a:visited:hover {  
	border-color: #fff;
	color: #fff;
	}
		
#menu4 {
font-size: 80%;
color: #32b04f;
font-weight: bold;
margin-bottom: 12px;
}	
#menu4 form {
	margin-left: 6px;
	margin-top: 6px;
}
#menu4 input.searchbox {
	width: 124px;
	border: 1px solid #8ddb86;
	}
#menu4 input.gobutton {
	width: 30px;
	}
#menu4 .navItem {
	margin: 0.5em 0;
	}

#menu5 ul {
	padding-top: 3px;
}	
#menu5 ul a {
	font-weight: normal;
}	
#menu5 .focus a {
	font-weight: bold;
}
#menu6 li {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	font-size: 80%;
}
#menu7 {
	font-size: 1em;
	font-weight: bold;
	margin-bottom: 6px;
	}
	#menu7 ul {
		padding-left: 0;
		}
	
#menu9 {
	font-size: 80%;
	color: #1070b8; 
	margin-top: 18px;
	margin-left: -6px;
	}			
	#menu9 .navItem {
		padding-left: 6px;
		padding-right: 6px;
		display: inline;
		}
	#menu9 a:link, #menu9 a:visited {
		line-height: 1.5em;
		}


/* Menu colours */
 

#menu3 a:link, #menu3 a:visited {
	color: #116db0; border-color: #dae3f4;
	}	
#menu3 a:hover, #menu3 a:visited:hover {
	color: #116db0; border-color: #116db0;
	}		
#menu3 .submenu a:link, #menu3 .submenu a:visited {
	color: #000; border-color: #dae3f4;
	}	
#menu3 .submenu a:hover, #menu3 .submenu a:visited:hover {
	color: #116db0; border-color: #116db0;
	}	
	
#menu4 .navItem a:link, #menu4 .navItem a:visited {
	color: #1070b8; border-color: #fff;
	}	
#menu4 .navItem a:hover, #menu4 .navItem a:visited:hover {
	color: #1070b8; border-color: #1070b8;
	}	
	
#menu5 .navItem {
	background: #27b24b;
	}
#menu5 .submenu .navItem {
	background: #ddefd9;
	}
#menu5 a:link, #menu5 a:visited { 
	color: #fff; border-color: #27b24b; 
	}
#menu5 a:hover, #menu5 a:visited:hover { 
	color: #fff; border-color: #fff; 
	}
#menu5 .focus a:link, #menu5 .focus a:visited, #menu5 .focus a:hover, #menu5 .focus a:visited:hover {
	border-color: #27b24b;
	}
#menu5 .submenu a:link, #menu5 .submenu a:visited { 
	color: #000; border-color: #ddefd9; 
	}	
#menu5 .submenu a:hover, #menu5 .submenu a:visited:hover, 
#menu5 .focus a:link, #menu5 .focus a:visited, #menu5 .focus a:hover, #menu5 .focus a:visited:hover { 
	color: #0b70b8; border-color: #0b70b8; 
	}	
#menu5 .submenu .focus a:link, #menu5 .submenu .focus a:visited {
	border-color: #ddefd9;
	}
	
#menu6 .navItem a:link, #menu6 .navItem a:visited { 
	color: #0b70b8; border-color: #dae3f4; 
	}
#menu6 .navItem a:hover, #menu6 .navItem a:visited:hover { 
	color: #0b70b8; border-color: #0b70b8; 
	}
	
#menu7 .navItem a:link, #menu7 .navItem a:visited {
	color: #1070b8; border-color: #fff;
	}	
#menu7 .navItem a:hover, #menu7 .navItem a:visited:hover {
	color: #1070b8; border-color: #1070b8;
	}
	
#menu9 a:link, #menu9 a:visited {
	color: #1070b8; 
	border-color: #fff;
	}
#menu9 a:hover, #menu9 a:visited:hover {
	border-color: #1070b8;
	}
	
 /* 
 colours for elements with rounded corners -- see snazzy.css for positioning 
 the default is green (#1ab70c)
 */
 
.xb2, .xb3, .xb4 {background:#1ab70c; border-color:#1ab70c;}
.xb1 { background:#1ab70c;}
.xboxcontent {background:#1ab70c; border-color: #1ab70c;}
 
#menu3 .xb2, #menu3 .xb3, #menu3 .xb4 {background:#dae3f4; border-color:#dae3f4;}
#menu3 .xb1 {background:#dae3f4;}
#menu3 .xboxcontent {background:#dae3f4; border-color: #dae3f4;}

#menu5 .xb2, #menu5 .xb3, #menu5 .xb4 {background:#ddefd9; border-color:#ddefd9;}
#menu5 .xb1 { background:#ddefd9;}
#menu5 .xboxcontent {background:#ddefd9; border-color: #ddefd9;}

#menu6 .xb2, #menu6 .xb3, #menu6 .xb4 { background:#dae3f4; border-color:#dae3f4;}
#menu6 .xb1 { background:#dae3f4;}
#menu6 .xboxcontent {background:#dae3f4; border-color: #dae3f4;}

#menu8 .xb2, #menu8 .xb3, #menu8 .xb4 {background:#ddefd9; border-color:#ddefd9;}
#menu8 .xb1 { background:#ddefd9;}
#menu8 .xboxcontent {background:#ddefd9; border-color: #ddefd9;}
 /*
 [1] ie5 hack, see http://bluerobot.com/web/css/center1.html
 
 */
 
/* when showing a sinlge image in a popup */
div.popupImage {
	margin-top: 15px;
	text-align: center;
}


/* ---( hidden text )-------------------------------- */

.hidden {
	position: absolute;
	top: -999em;
	left: -999em;
	overflow: hidden;
	}

	/* ---( Skip links )-------------------------------- 
	
	The method: http://www.communis.co.uk/skipbetter.html 
	The (x)HTML hack explained: http://www.ilwig.net/test/skipnav.html
	Background to the problem: http://www.jimthatcher.com/skipnav.htm
	
	The method does not work in IE7 for the time being. 
	- If the first rule (targetting Opera) is removed, the links become visible but positioning is off.
*/
	
.skip {position: absolute; top: -4em; display: none} /*Opera*/
* html .skip {display: block; position: absolute; top: -4em; left: 0; z-index: 100} /*Seen by IE*/
html:not([dummy]) .skip {display: block; position: absolute; top: -4em; left: 0; z-index: 100} /*Seen by Moz and Firefox*/
.skip a {padding: 0 0.5em; left: 0; width: 13.2em; z-index: 100}
.skip a:focus, .skip a:active {
	display: inline;
	/*z-index: 2;*/
	border: solid black 1px;
	color: #fff;
	background: #000;
	text-decoration: none;
	position: absolute;
	top: 5.25em;
	left: 0;
	
	margin-top: 12px;
	padding: 0;
}
.skip a#skiptocontent, .skip a#skiptochoice, .skip a#skiptonavigation {
	position: absolute;
	top: -9em;
	width: 13.2em;
}
.skip a#skiptocontent:focus, .skip a#skiptocontent:active, 
.skip a#skiptochoice:focus, .skip a#skiptochoice:active, 
.skip a#skiptonavigation:focus, .skip a#skiptonavigation:active {
	position: absolute;
	top: 5.25em;
	left: 0em;
	/*z-index: 2;*/
	
	border:none;
	width: 141px;
	width: 400px;
	padding-left:12px;
}
.skip a:hover {cursor: default}
	
a#skiplanguages, a#skiplanguages:hover, a#skiplanguages:visited {  
	position:absolute; 
	left:-999em; 
	top:-500px; 
	width:1px; 
	height:1px; 
	overflow:hidden;
	}
a#skiplanguages:active, a#skiplanguages:focus { 
	height:auto; 
	overflow: visible;
	border: solid black 1px;
	color: #fff;
	padding: 2px 0 2px 20px;
	background: #000;
	width: 240px;
	left: 40px;
	top: 1px;
	}