﻿/*
	John Howard Society of Alberta
	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: 190px;
	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#css3menu1,ul#css3menu1 ul{
	margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu1 ul{
	display:none;position:absolute;left:100%;top:0;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;padding:0 10px 10px;background-color:#245e9c;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;}
ul#css3menu1 li:hover>*{
	display:block;}
ul#css3menu1 li:hover{
	position:relative;}
ul#css3menu1 ul ul{
	position:absolute;left:100%;top:0;}
ul#css3menu1{
	display:block;font-size:0;float:left;}
ul#css3menu1 li{
	display:block;white-space:nowrap;font-size:0;}
ul#css3menu1>li,ul#css3menu1 li{
	margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
	outline-style:none;}
ul#css3menu1 a,ul#css3menu1 a.pressed{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 14px Palatino Linotype;color:#ffffff;text-shadow:#FFF 0 0 1px;cursor:pointer;}
ul#css3menu1 ul li{
	float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
	text-align:left;padding:4px;background-color:#245e9c;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:bold 14px Palatino Linotype;color:#ffffff;text-decoration:none;}
ul#css3menu1 li:hover>a{
	background-color:#878787;border-color:#C0C0C0;border-style:solid;font:bold 14px Palatino Linotype;color:#ffffff;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menu1 img{
	border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu1 img.over{
	display:none;}
ul#css3menu1 li:hover > a img.def{
	display:none;}
ul#css3menu1 li:hover > a img.over{
	display:inline;}
ul#css3menu1 li a.pressed img.over{
	display:inline;}
ul#css3menu1 li a.pressed img.def{
	display:none;}
ul#css3menu1 span{
	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 a{
	padding:10px;background-color:#245e9c;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:1px 0 0 0;border-style:solid;border-color:#C0C0C0;color:#ffffff;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
	background-color:#878787;background-image:url("mainbk.png");background-position:0 100px;border-style:solid;border-color:#C0C0C0;color:#ffffff;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li>a.pressed{
	background-color:#878787;background-image:none;font:bold 14px Palatino Linotype;color:#ffffff;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
	border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
ul#css3menu1 li.toplast>a{
	border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;}

/* END NAVIGATION */


/* CONTENT */

#content {
	width: 440px;
	padding: 0 20px 20px 20px;
	}
	
#content h1 {
	font-size: 2.1em;
	margin-bottom: 20px;
	margin-top: 30px;
	color: #245e9c;
	}
	
#content h2 {
	margin-top: 10px;
	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, #content ul.sections li a { 
		color: #000; 
		font-size: 12px; 
		line-height: 25px; 
		}
		
	#content ul.sections li.head { 
		font-size: 14px;  
		font-weight: bold;
		}
		
	#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;
	}

ul.links {
	padding-left: 20px;
	font-size: 1.3em;
	list-style: outside disc;
	line-height: 20px;
	color: #666;
	}

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 0px;
	}
	
#footer ul {
	margin: 0 0 10px; 0;
	}
	
#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 340px;
	}
	
#footer a:hover {
	color: #0CF;
	}

/* END FOOTER */
