/*---------------------------------------------------------------------------------
Yahoo YUI 2 RESET
---------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin: 0;
	padding: 0; }
 
table {
	border-collapse: collapse;
	border-spacing: 0; }
 
fieldset,img { border: 0; }
 
address,caption,cite,code,dfn,em,strong,th,var {
	font-style: normal;
	font-weight: normal; }
 
ol,ul { list-style: none; }
 
caption,th { text-align: left; }
 
h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal; }
 
q:before,q:after { content: ''; }
 
abbr,acronym { border: 0; }

/*---------------------------------------------------------------------------------
Rebuild Edit of Yahoo Base
---------------------------------------------------------------------------------*/
h1,h2,h3 {
	/* top & bottom margin based on font size */
	margin:1em 0;
}
h1,h2,h3,h4,h5,h6,strong {
	/*bringing boldness back to headers and the strong element*/
	font-weight:bold; 
}
abbr,acronym {
	/*indicating to users that more info is available */
	border-bottom:1px dotted #000;
	cursor:help;
} 
em {
	/*bringing italics back to the em element*/
	font-style:italic;
}
blockquote,ul,ol,dl {
	/*giving blockquotes and lists room to breath*/
	margin:1em;
}
ol,ul,dl {
	/*bringing lists on to the page with breathing room */
	margin-left:2em;
}
ol li {
	/*giving OL's LIs generated numbers*/
	list-style: decimal outside;	
}
ul li {
	/*giving UL's LIs generated disc markers*/
	list-style: disc outside;
}
dl dd {
	/*giving UL's LIs generated numbers*/
	margin-left:1em;
}
th,td {
	/*borders and padding to make the table readable*/
	border:1px solid #000;
	padding:.5em;
}
th {
	/*distinguishing table headers from data cells*/
	font-weight:bold;
	text-align:center;
}
caption {
	/*coordinated marking to match cell's padding*/
	margin-bottom:.5em;
	/*centered so it doesn't blend in to other content*/
	text-align:center;
}
p,fieldset,table {
	/*so things don't run into each other*/
	margin-bottom:1em;
}

/*---------------------------------------------------------------------------------
Base Font Size
---------------------------------------------------------------------------------*/
html { font-size: 16px; /* Set default to 16px */ }
 
body {
	  font-size: 62.5%; /* 62.5% of 16px = 10px (1em) */
	  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
 
/*---------------------------------------------------------------------------------
Define All Type Stlyes & Sizes
---------------------------------------------------------------------------------*/
h1 {	font-size: 2.8em; } /* 28px */
 
h2 {	font-size: 2.4em; } /* 24px */
 
h3 {	font-size: 2.0em; } /* 20px */
 
h4 { font-size: 2.0em; } /* 20px */
 
h5 { font-size: 2.0em; } /* 20px */

h6 { font-size: 1.8em; } /* 18px */
 
p, li { font-size: 1.6em; }  /* 16px */

/*----------------
Define All Colours
------------------

White - #FFF
Black - #000
Off Black (Body Text) - #111
Blue - #09F
D. Grey - #333
L.Grey - #999
Light Blue Rollover - #9CF
Pink - #09F
Grey Border - #DDD
Image - L.Grey Border - #EEE
Image - Rollover Border - #999
----------------*/


/*---------------------------------------------------------------------------------
Basic Layout
---------------------------------------------------------------------------------*/

html { height: 101%;} /*Forces Scroll Bar to Avoid Stuttering when using Accordion */

body {
	background: #EEE url('../images/bg.jpg') top left repeat-x;
}

#container {
	margin: 0 auto 0 auto;
	width: 960px;
}

#header {
	width: 960px;
	height: 125px;
	margin: 6px 0 0 0;
	padding: 0;
}

	#header h1, #header h2 {
		font-size: 1.6em;
		margin: 0;
		padding: 0;
	}

#logo {
	float: left;
	display: inline-block;
	width: 238px;
	height: 125px;
	position: relative;
}

#logo span { /*Image Replacement*/
	position: absolute;
	width: 100%;
	height: 100%;
	background: url('../images/thezone_logo.gif') left no-repeat;
}

#tagline {
	float: left;
	display: inline-block;
	width: 722px;
	height: 125px;
	position: relative;
}

#tagline span { /*Image Replacement*/
	position: absolute;
	width: 100%;
	height: 100%;
	background: url('../images/tagline.gif') left no-repeat;
}

#main {
	width: 960px; /*960px*/
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#nav {
	width: 218px; /*240px*/
	min-height: 350px;
	margin: 0;
	padding: 10px 20px 20px 0;
	float: left;
	display: block;
	background: #FFF;
	border: 1px solid #DDD;
	overflow: hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

	#nav ul {
	
	}
	
		#nav ul li {
			margin: 0;
			padding: 10px 0;
			list-style: none;
			color: #000;
			font-weight: bold;
		}
		
			#home #container #main #nav ul li a.home,
			#out-of-school #container #main #nav ul li a.out-of-school,
			#go-play #container #main #nav ul li a.go-play,
			#youth-project #container #main #nav ul li a.youth-project,
			#youth-on-the-move #container #main #nav ul li a.youth-on-the-move,
			#the-training-group #container #main #nav ul li a.the-training-group,
			#future-jobs-fund #container #main #nav ul li a.future-jobs-fund,
			#whats-new #container #main #nav ul li a.whats-new,
			#gallery #container #main #nav ul li a.gallery,
			#links #container #main #nav ul li a.links,
			#contact #container #main #nav ul li a.contact{
				padding-left: 35px;
				background-image: url('../images/bullet.gif');
				background-position: 0;
				background-repeat: no-repeat;

			}
				
				#nav ul li a {
					padding: 6px 0 6px 35px; 
					color: #999;
					text-decoration: none;
				}
					
					#nav ul li a:hover{
						color: #000;
					}
					
#fb {
	width: 236px;
	height: 94px;
	margin: 10px 0;
	padding: 0;
	float: left;
	display: block;
	border: 1px solid #DDD;
	overflow: hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

#content {
	float: right;
	width: 658px; /*700px*/
	min-height: 505px;
	margin: 0;
	padding: 20px 20px 40px 20px;
	color: #111;
	background: #FFF;
	border: 1px solid #DDD;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

	#content h3,
	#content h4	{
		float:left;
		display: block;
		position: relative;
		width: 128px; /*168px*/
		margin: 20px 0 0 0px;
		padding: 0 20px 0 0;
		color: #09F;
		text-align: right;
		text-transform: uppercase;
	}
	

	#content h5,
	#content h6 {
		margin: 1em 0 0 168px;
		color: #000;
	}	
	

	
	#content p {
		display: block;
		width: 480px;
		margin: 20px 0 0 148px;
		padding: 0 0 0 20px;
		line-height: 1.4em;
	}
	
		#content p b {
			color: #000;
		}		
	
	#content a {
		color: #09F;
		font-weight: bold;
		text-decoration: none;
	}
	
		#content a:hover {
			color: #000;
			text-decoration: underline;
		}
				
		#content ul {
			margin: 20px 0 0 162px;
		}	
		
		#content ul li {
			margin: 1.0em 0 0 0;
			padding: 0 0 0 5px;
		}
		
			#home #main #content ul{
				margin: 20px 0 0 141px;
				padding: 0 0 0 20px;
				line-height: 1.4em;
			}
			
				#home #main #content ul li {
					margin: 0.5em 0 0.5em 0;
					padding: 0 0 0 5px;
					font-weight: bold;
					color: #333;
				}
			
			#home #main #content ul + p {
				margin-top: 20px;
			}
			
			#content ul.times {
			
			}
			
				#content ul.times li {
					font-weight: bold;
					list-style: none;
					font-size: 1.4em;
					line-height: 2em;
					color: #999;
				}				
				
				#content ul.times li:first-child {
					color: #09F;
				}
				
				
				
				#content ul.times li span{
					color: #000;
				}
				
		#content ul.imagelisting,
		#content ul#albumdisplay {
			width: 495px; 
			margin-left: 152px;
			margin: 10px 0 0 -10px;
			display: block;
			overflow: hidden;
		}		
		#gallery #content ul.imagelisting {
			margin-left: 152px;
		}	
		#content ul.photos {
			width: 495px; 
			margin-left: 152px;
			overflow: hidden;
		}
	
		
			#content ul.imagelisting li,
			#content ul#albumdisplay li{
				width:	233px;
				height:	auto;
				float:	left;
				display: inline-block;
				margin:	0 0 6px 6px;
				list-style: none;
			}	

			#content ul.photos li{		
				float:	left;
				margin:	0 0 6px 6px;
				list-style: none;
			}
			
				#content ul.imagelisting li a,
				#content ul#albumdisplay li a{
					border: none;
				}					
				
					#content ul.imagelisting li img,
					#content ul#albumdisplay li img{
						width: auto;
						max-width:	224px;
						height:	160px;
						height:	auto;
						border: 1px solid #EEE;
						padding: 4px;
					}
					
						#content ul.imagelisting li a:hover img,
						#content ul#albumdisplay li a:hover img {
							border: 1px solid #999;
						}
						
		#content div.links {
			
			
		}		
		
			#content ul.links li,
			#content .links ul li{
				list-style: none;
				margin: 0.5em 0;
			}
			
				
	#content dl {
		margin: 1em 0 0 168px;
		font-size: 1.4em;
		line-height: 2em;
	}
	
		#content dl dt {
			font-weight: bold;
		}

	#content dl.staff {
		font-weight: bold;
	}	
		#content dl.staff dt {
			color: #999;		
		}
		
		#content dl.staff dd{	
			color: #000;
		}
		
	#content dl.trustees {
		margin-top: 20px;
		font-size: 1.2em;
	}
		
	#content dl.benefits dt{
		color: #09F;
		text-transform: uppercase;
	}
	
	#content img {
		margin: 0 0 0 0;
		border: 1px solid #CCC;
		border-bottom: 1px solid #666;
	}
	
	#content img.news-pic {
		padding: 4px;
		border: 1px solid #CCC;
	}
	
	#content p a img.facebook {
	vertical-align: middle;
	border: 0;
}
	
	#content table {
		table-layout:fixed;
		display: block;
		position: relative;
		margin: 1em 0 0 168px;
		padding: 0;
		font-size: 1.3em;
	}	
		#content table caption {
			text-align: left;
			font-weight: bold;
		}
			#content table tr th{
				padding: 0.5em 1em 0.5em 0;
				border: none;
				text-align: left;
				color: #CCC;
			}		
			
			#content table tr td {
				border: none;
			}
			
				#content table#staffcontacts tr th,
				#content table#staffcontacts tr td {

				}				
				#content table#trustee tr th,
				#content table#trustee tr td {
					width: 120px;
				}
		
			#content table tr:nth-child(even) {
				background: #EEE;
			}
		
	#content hr {
		margin: 20px 20px 0 168px;
		display:  block;
		position: relative;
		clear: both;
		border: none;
		border-top: 1px solid #DDD;
		border-bottom: 1px solid #EEE;
		font-size: 1px;
		line-height: 0;
		overflow: visible;
	}	
	
	#out-of-school #content div.accordion h5,
	#links #content div.accordion h5 {
		margin-top: 10px;
	}
	
	#go-play #content h5.aims {
		margin-top: 5px;
	}
		
	#go-play #content .staff {
		margin-top: -15px;
	}	
	
	#content div.accordion h5:hover {
		cursor: pointer;
	}
	
		#content div.accordion h5 span{
			color: #CCC;
		}
		
		#content div.accordion h5:hover span {
			color: #09F;
		}

#associates  {
	display: block;
	float: right;
	clear: both;
	width: 678px; /*700px*/
	height: 119px;
	margin: 20px 0 0 0;
	padding: 20px 10px 10px 10px;
	color: #999;
	background: #FFF;
	border: 1px solid #DDD;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
	#associates h3 {
		margin: 0;
		padding: 0;
		color: #999;
		font-size: 1.2em;
	}
	
	#associates a {
		width: 66px;
		height: 47px;
		overflow: hidden;
		float: left;
		margin: 0 0 15px 17px; /*If need to fit more*/
		margin: 0 0 15px 28px;
	}
	
	#associates img {
		display: inline-block;
		margin: 0;
		padding: 0;
	}

	#associates a:hover img {
		margin-top: -47px;
	}
	

#footer {
	float: right;
	clear: both;
	width: 658px; /*700px*/
	margin: 20px 0 0 0;
	padding: 15px 20px;
	color: #999;
	background: #FFF;
	border: 1px solid #DDD;
	overflow: hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

	#footer p {
		margin: 0;
		padding: 0;
		font-size: 1.2em;
		text-align: right;
	}
	
	#footer p.left {
		float: left;
	}	
	
	#footer p.right {
		float: right;
	}
	
	#footer a {
		color: #000;
		font-weight: bold;
		text-transform: lowercase;
		text-decoration: none;
	}
	
	#footer a:hover {
		color: #000;
		text-decoration: underline;
	}
	
	
#subfooter {
	float: right;
	clear: both;
	width: 660px; /*700px*/
	margin: 10px 0 20px 0;
	padding: 0 20px;
	color: #999;
}

	#subfooter p {
		text-align: right;
		font-size: 1.2em;
	}
	
	#subfooter p a {
		color: #CCC;
		text-decoration: none;
		text-transform: lowercase;
	}
	
	#subfooter p a:hover {
		color: #000;
		text-decoration: underline;
	}	

.caps {
	text-transform: uppercase;
}
/*-------------------------------*\
	Blog / What's New? Section
\*-------------------------------*/
#content ul.hfeed,
#content div.hentry {
	width: 475px; 
	margin-left: 0;
	margin-top: 0;
	padding-left: 20px;
	overflow: hidden;
}
		
	#content li.hentry {
		display: block;
		width: 475px;
		overflow: hidden;
		margin: 0;
		padding: 0;
		font-size: 1em;
	}

		
	#content li.hentry h4,
	#content div.hentry h4 {
		display: block;
		width: 495px;
		margin: 20px 0 0 0;
		padding: 0;
		color: #999;
		text-align: left;
		text-transform: none;
	}
	
	#content li.hentry img {
		float: left;
		display: inline-block;
		overflow: hidden;
		width: 50px;
		margin: 10px 20px 0 0;
		padding: 0;
		border: none;
	}	
	
	#content div.hentry img {
		display: block;
		overflow: hidden;
		margin: 10px 0;
		padding: 0;
	}	
	
	#content li.hentry p {
		margin: 0;
		padding: 0;
	}		

	#content div.hentry p {
		width: 475px;
		margin: 10px 0 0 0;
		padding: 0;
	}	
	#content li.hentry p.entry-published.date,
	#content div.hentry p.entry-published.date {
		margin: 0;
		font-size: 1.2em;
		font-style: italic;
		color: #999;
	}	
	.description.entry-summary {
		margin: 10px 0 0 0;
		padding: 0;
	}
	
	#content .paging {
		width: 475px; 
		margin: 20px 0 0 148px;
		padding-left: 20px;
		overflow: hidden;
		font-size: 1.4em;
		color: #999;
	}
	
	
	#content ul.archive {
		font-size: 1em!important;
		padding-left: 20px;
		line-height: 1;
	}
	
	#content ul.archive ul {
		margin: 0 0 0 20px;
		font-size: 0.65em!important;
		line-height: 1;
	}
	
	#content p.previous-page {

	}
	
#home .news-home h5 {
	line-height: 1;
	margin-top: 5px;
	margin-bottom: 5px;
}
	#home .news-home p.entry-published.date {
		font-size: 1.2em;
		font-style: italic;
		color: #999;
		margin-top: 0;
	}	
/*-------------------------------*\
	Gallery
\*-------------------------------*/

#gallery h4 {
	display: block;
	width: 475px;
	margin: 20px 0 10px 0;
	padding: 0 0 0 20px;
	color: #000;
	text-align: left;
	text-transform: none;
}