/*
	John Howard Society of British Columbia
	By: Josh Solecky
	http://www.gocactus.com
*/

/* BASIC PAGE SETUP & RESET */

* { margin: 0; padding: 0; }
html { overflow-y: scroll; }
body { font: 62.5% "Palatino Linotype", "Book Antiqua", Palatino, serif; background: #878787; }

ul { list-style: none inside; }
p { font: 1.3em/1.4em "Palatino Linotype", "Book Antiqua", Palatino, serif; margin-bottom: 1.3em; }
a { outline: none; text-decoration: none; }
img, a img { border: none; }
/* END RESET */

/* TOOLBOX */
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }
/* END TOOLBOX */


/* STRUCTURE */
#page-wrap {
	margin: 0 auto;
	width: 918px;
	background: url(images/p_wrap-gradient.jpg) repeat-y;
	padding: 0 41px 0 41px;
}
/* END STRUCTURE */


/* HEADER */

#header {
	height: 137px;
	background: url(images/header.jpg) no-repeat;
	margin-bottom: 2px;
	}

/* END HEADER */


/* IMAGE AREA */

#img-area {
	height: 230px;
	margin-bottom: 2px;
	}
	
/* END IMAGE AREA */
	
	
/* NAVIGATION */
	
#nav {
	width: 216px;
	}
	
	ul#navigation li {
	text-indent: -9999px;
	}

		ul#navigation li#home a:link, ul#navigation li#home a:visited {
		background: url(images/nav.jpg) no-repeat 0px 0px;
		display: block;
		height: 38px;
		width: 216px;
		}
		
		ul#navigation li#home a:hover {
		background: url(images/nav.jpg) no-repeat -216px 0px;
		}
			
		ul#navigation li#legacy a:link, ul#navigation li#legacy a:visited {
		background: url(images/nav.jpg) no-repeat 0px -38px;
		display: block;
		height: 38px;
		width: 216px;
		}
		
		ul#navigation li#legacy a:hover {
		background: url(images/nav.jpg) no-repeat -216px -38px;
		}
		
		ul#navigation li#programs a:link, ul#navigation li#programs a:visited {
		background: url(images/nav.jpg) no-repeat 0px -76px;
		display: block;
		height: 38px;
		width: 216px;
		}
		
		ul#navigation li#programs a:hover {
		background: url(images/nav.jpg) no-repeat -216px -76px;
		}
		
		ul#navigation li#regional a:link, ul#navigation li#regional a:visited {
		background: url(images/nav.jpg) no-repeat 0px -114px;
		display: block;
		height: 38px;
		width: 216px;
		}
		
		ul#navigation li#regional a:hover {
		background: url(images/nav.jpg) no-repeat -216px -114px;
		}
		
		ul#navigation li#research a:link, ul#navigation li#research a:visited {
		background: url(images/nav.jpg) no-repeat 0px -152px;
		display: block;
		height: 38px;
		width: 216px;
		}
		
		ul#navigation li#research a:hover {
		background: url(images/nav.jpg) no-repeat -216px -152px;
		}
		
		ul#navigation li#faq a:link, ul#navigation li#faq a:visited {
		background: url(images/nav.jpg) no-repeat 0px -190px;
		display: block;
		height: 38px;
		width: 216px;
		}
		
		ul#navigation li#faq a:hover {
		background: url(images/nav.jpg) no-repeat -216px -190px;
		}
		
		ul#navigation li#media a:link, ul#navigation li#media a:visited {
		background: url(images/nav.jpg) no-repeat 0px -228px;
		display: block;
		height: 38px;
		width: 216px;
		}
		
		ul#navigation li#media a:hover {
		background: url(images/nav.jpg) no-repeat -216px -228px;
		}
		
		ul#navigation li#funding a:link, ul#navigation li#funding a:visited {
		background: url(images/nav.jpg) no-repeat 0px -266px;
		display: block;
		height: 38px;
		width: 216px;
		}
		
		ul#navigation li#funding a:hover {
		background: url(images/nav.jpg) no-repeat -216px -266px;
		}
		
		ul#navigation li#literacy a:link, ul#navigation li#literacy a:visited {
		background: url(images/nav.jpg) no-repeat 0px -304px;
		display: block;
		height: 38px;
		width: 216px;
		}
		
		ul#navigation li#literacy a:hover {
		background: url(images/nav.jpg) no-repeat -216px -304px;
		}
		
		ul#navigation li#documents a:link, ul#navigation li#documents a:visited {
		background: url(images/nav.jpg) no-repeat 0px -342px;
		display: block;
		height: 38px;
		width: 216px;
		}
		
		ul#navigation li#documents a:hover {
		background: url(images/nav.jpg) no-repeat -216px -342px;
		}
		
		ul#navigation li#newsletter a:link, ul#navigation li#newsletter a:visited {
		background: url(images/nav.jpg) no-repeat 0px -380px;
		display: block;
		height: 38px;
		width: 216px;
		}
		
		ul#navigation li#newsletter a:hover {
		background: url(images/nav.jpg) no-repeat -216px -380px;
		}
		
		ul#navigation li#canada a:link, ul#navigation li#canada a:visited {
		background: url(images/nav.jpg) no-repeat 0px -418px;
		display: block;
		height: 38px;
		width: 216px;
		}
		
		ul#navigation li#canada a:hover {
		background: url(images/nav.jpg) no-repeat -216px -418px;
		}
		
		ul#navigation li#griffin a:link, ul#navigation li#griffin a:visited {
		background: url(images/nav.jpg) no-repeat 0px -456px;
		display: block;
		height: 38px;
		width: 216px;
		}
		
		ul#navigation li#griffin a:hover {
		background: url(images/nav.jpg) no-repeat -216px -456px;
		}
		

/* END NAVIGATION */


/* CONTENT */

#content {
	width: 440px;
	padding: 0 20px 20px 20px;
	}
	
#content h1 {
	font-size: 2.4em;
	margin-bottom: 20px;
	margin-top: 30px;
	color: #245e9c;
	}
	
#content h2 {
	margin-top: 30px;
	margin-bottom: 10px;
	}
	
#content p {
	margin-bottom: 10px;
	color: #666;
	}
	
#content a {
	color: #018bb2;
	}
	
#content a:hover {
	border-bottom: 1px dotted #018bb2;
	}
	
#content ul.sections	{ 
	background: #b7d6e6; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border-radius: 10px; 
	width: 410px; 
	padding: 10px 10px 10px 25px; 
	margin-bottom: 20px; 
	float: left; 
	}
	
	#content ul.sections li a { 
		color: #000; 
		font-size: 12px; 
		line-height: 25px; 
		}
	#content ul.sections li a:hover { 
		border-bottom: 1px dotted #000; 
		}

#content ul.sub	{  
	padding: 0 0 0 25px;
	list-style: inside disc;
	}

.list {
	padding-left: 20px;
	font-size: 1.3em;
	list-style: outside disc;
	line-height: 20px;
	color: #666;
	}
	
.list li {
	margin-bottom: 10px;
	}

table.programs {
	margin-bottom: 5px;
	}

table.programs td {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 15px;
	font-size: 1.3em;
	color: #666;
	}

/* END CONTENT */


/* SIDEBAR */

#sidebar {
	width: 216px;
	background-color: #245e9c;
	}
	
.side_content {
	padding: 15px;
	}
	
.side_content h1 {
	font-size: 1.5em;
	color: #FFF;
	margin: 15px 0 10px 0;
	}

.side_content p {
	color: #FFF;
	}

.side_content a {
	color: #FFF;
	border-bottom: 1px dotted #FFF;
	}

.side_content a:hover {
	color: #0CF;
	border-bottom: 1px dotted #0CF;
	}

.side_gradient {
	border-top: 2px solid #FFF;
	height: 140px;
	background: url(images/BG_sidebar-gradient.jpg) ;
	}

/* END SIDEBAR */


/* MAILING LIST AREA */

#mailinglist {
	border-top: 2px solid #FFF;
	Padding: 10px 10px 10px 20px;
	background-color: #d1d3d4;
	color: #666666;
	font-size: 12px;
	line-height: 1.25em;
}

#mailinglist h1 {
	color: #008bb1;
	font-size: 20px;
	margin-top: 0;
	font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

#mailinglist h2 {
	color: #000000;
	font-size: 14px;
	margin: 0 0 0 0;
	font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

#mailinglist p {
	color: #666666;
	font-size: 12px;
	margin-top: 10px;
	line-height: 1.25em;
	font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

/* END MAILING LIST AREA */


/* FOOTER */

#footer {
	height: 100px;
	background-color: #245e9c;
	margin-top: 2px;
	padding: 15px 0 0 0;
	text-align: center;
	}
	
#footer ul {
	margin: 0 0 10px 0;
	text-align: center;
	}
	
#footer li {
	display: inline;
	font-size: 1em;
	padding: 0 13px 0 10px;
	color: #FFF;
	border-right: 1px solid #FFF;
	}
	
#footer li.last {
	border-right: none;
	}
	
#footer a {
	color: #FFF;
	}
	
#footer p {
	color: #FFF;
	font-size: 1.2em;
	padding: 10px 0 0 0;
	text-align: center;
	}
	
#footer a:hover {
	color: #0CF;
	}

/* END FOOTER */