/*
		Styles by gavjof
		www.gavjof.com
		
	\\ SCREEN.CSS (for Front End Styles) //
*/

body { 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	background-color: #fff;
	margin: 0;
	background: #fff url('bg.jpg') repeat;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Customise the standard HTML
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
a:link, a:visited, a:active {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
hr {
	margin: 5px 0px 5px 0px;
	color: #603;
	border: 0;
	height: 1px;
}
/* Page Headings */

form {margin: 0;}

img { border: 0; }

big, h1, h2, h3 { 
	font-size: 24px; 
	margin: 0; 
	font-weight:bold; 
	padding:5px 0;
	font-family: "Times New Roman", Times, serif;
}

h3 { font-size: 24px;}

p { 
	font-size: 12px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Layout Blocks
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#main { /* Holds the page items in place */
	width: 800px;
	margin: 0 auto;
	padding: 0;
	background: #fff;
	border: 3px solid #008752;
	border-top-width: 8px;
	border-bottom-width: 8px;
}
.clearboth{
	clear: both;
}
#banner, #smallBanner {
	background: url('home-header.jpg') no-repeat;
	width: 800px;
	height: 334px;
	padding: 0;
	text-align: left;
	font-size: 12px;
	color: #fff;
	text-align: right;
}
#smallBanner {
	background: transparent url('ccds-logo.jpg') top left no-repeat;
	height: 250px;
}
#smallBanner img{
	padding: 0;
	border: 0;
	margin: 0 0 0 0;
	float: right;
	height: 229px;
	width: 800px;
}

#sideColumn {
	float: left;
	width: 238px;
	margin: 0;
	padding: 0;
	border-top: 2px solid #fff;
}

#sideColumnContainer {
	overflow:hidden;
	float:left;
	background-color: #95bc63;
	width: 238px;
}

#sideColumn p, #sideColumn a, #sideColumn a:hover {
	padding: 5px 20px 5px 20px;
	font-size: 12px;
	color: #fff;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#sideColumn #title {
	padding: 12px 0 0 0;
}
#sideColumn a {
	padding: 0;
}
#sideColumn a:hover {
	text-indent: 0px;
	padding: 0;
}

#content { /* main content from the WYSIWYG goes in here */
	margin-left: 245px;
	padding: 25px 28px 10px 20px;
	text-align: left;
	clear: right;
	font-size: 11px;
	color: #021f44;
}
#contentContainer {
	background: transparent url('content-bg.jpg') top left repeat-y;
}
.Calendar #contentContainer, .Quick.Links #contentContainer {
	background: none;
}
.Calendar #content, .Quick.Links #content {
	margin-left: 0;
}
.Home #contentContainer {
	background: transparent url('content-bg-home.jpg') top left repeat-y;
}
.Home #sideColumnContainer, .Home #sideColumn {
	width: 317px;
}
.Home #sideColumn {
	margin-top: 0px;
	padding-top: 0px;
	border-top: 20px solid #fff;
	height: 190px;
	background-color: #8cb35a;
}
.Home #content {
	margin-left: 0px;
	padding-left: 340px;
	margin-top: -20px;
	width: 420px;
}
.Home #sideColumn a {
	color: #008752;
	font-weight: bold;
	text-align:right;
}


#footer { 
	color: #000;
	padding: 12px 0 0 0;
	clear: both;
	height: 38px;
	width: 800px;
	text-align: center;
	font-size: 11px;
	line-height: 15px;
	margin: 0 auto;
}
#footer a { color: #000; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* Search Box in banner */
#search_box {
	color: #fff;
	text-align: center;
}
#search_box {
	float: right;
	clear: right;
	width: 200px;
}
#search_box fieldset {border:0;}
#search_box legend, #search_box label {display:none;}

#search_string {
	width: 100px;
	height: 16px;
	vertical-align: middle;
}
#search_submit {
	width: 50px;
	height: 20px;
	vertical-align: middle;
	padding: 0 0 4px 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
	####	Header Menu #####
	#######################

	Horizontal Drop-Down Menu based off :
	http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp
	
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */


/* Remove List Formattings
~~~~~~~~~~~~~~~~~~~~  */
 ul.menu, li.menu {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#nav {
	height: 55px;
	padding:0;
}
#bannerNav {
	height: 20px;
	padding: 0;
}
#aboutSubNav, #programsSubNav, #peopleSubNav {
	height: 32px;
	padding: 0;
	border-top: solid 2px #fff;
	background-image: url(about-sub-nav-bg.jpg);
}
#programsSubNav {
	background-image: url(programs-sub-nav-bg.jpg);
}
#peopleSubNav {
	background-image: url(people-sub-nav-bg.jpg);
}


#nav ul, #bannerNav ul, #aboutSubNav ul, #programsSubNav ul, #peopleSubNav ul {
	list-style-type: none; 
	margin: 0; 
	padding: 0; 
	width: auto;
}


#nav ul li, #aboutSubNav ul li, #programsSubNav ul li, #peopleSubNav ul li {float: left; color: #fff; text-align: center; font-weight: normal;}
#bannerNav ul li {float: right; color: #fff; text-align: center; font-weight: normal;}

#nav ul #aboutNav a{background-image:url(about-us.jpg);width: 158px;}
#nav ul #programsNav a{background-image:url(programs.jpg);width: 142px;}
#nav ul #peopleNav a{background-image:url(our-people.jpg);width: 146px;}
#nav ul #newsNav a{background-image:url(news-and-press.jpg);width: 202px;}
#nav ul #calendarNav a{background-image:url(calendar.jpg);width: 152px;}

#bannerNav ul #contactNav a{background-image:url(contact-us.jpg);width: 147px;}
#bannerNav ul #linksNav a{background-image:url(quick-links.jpg);width: 142px;}
#bannerNav ul #careerNav a{background-image:url(career-opportunities.jpg);width: 157px;}

#aboutSubNav ul #whoNav a{background-image:url(who-we-are.jpg);width: 113px;}
#aboutSubNav ul #missionNav a{background-image:url(mission-vision-and-values.jpg);width: 220px;}
#aboutSubNav ul #historyNav a{background-image:url(our-history.jpg);width: 109px;}
#aboutSubNav ul #accreditationsNav a{background-image:url(accreditations.jpg);width: 128px;}

#programsSubNav ul #dayNav a{background-image:url(day-habilitation.jpg);width: 141px;}
#programsSubNav ul #supportedNav a{background-image:url(supported-employment.jpg);width: 192px;}
#programsSubNav ul #caseNav a{background-image:url(case-management.jpg);width: 154px;}
#programsSubNav ul #healthNav a{background-image:url(health-services.jpg);width: 135px;}

#peopleSubNav ul #consumersNav a{background-image:url(consumers.jpg);width: 103px;}
#peopleSubNav ul #staffNav a{background-image:url(staff.jpg);width: 63px;}
#peopleSubNav ul #executiveNav a{background-image:url(executive-director.jpg);width: 156px;}
#peopleSubNav ul #boardNav a{background-image:url(board-of-directors.jpg);width: 156px;}


#nav ul li a {
	display: block; 
	background: #666; 
	color: #fff; 
	text-decoration: none;
	font-size: 15px;
	height: 55px;
}

#bannerNav ul li a {
	display: block; 
	color: #fff; 
	text-decoration: none;
	font-size: 15px;
	height: 20px;
}

#aboutSubNav ul li a, #programsSubNav ul li a, #peopleSubNav ul li a {
	display: block; 
	color: #fff; 
	text-decoration: none;
	font-size: 15px;
	height: 32px;
}

/* Roll over */
#nav #aboutNav a:hover, #nav #aboutNav a:focus {background-position: 0 110px;}
#nav #programsNav a:hover, #nav #programsNav a:focus {background-position: 0 110px;}
#nav #peopleNav a:hover, #nav #peopleNav a:focus {background-position: 0 110px;}
#nav #newsNav a:hover, #nav #newsNav a:focus {background-position: 0 110px;}
#nav #calendarNav a:hover, #nav #newsNav a:focus {background-position: 0 110px;}

#bannerNav #contactNav a:hover, #bannerNav #contactNav a:focus {background-position: 0 20px;}
#bannerNav #linksNav a:hover, #bannerNav #linksNav a:focus {background-position: 0 20px;}
#bannerNav #careerNav a:hover, #bannerNav #careerNav a:focus {background-position: 0 20px;}

#aboutSubNav #whoNav a:hover, #aboutSubNav #whoNav a:focus {background-position: 0 32px;}
#aboutSubNav #missionNav a:hover, #aboutSubNav #missionNav a:focus {background-position: 0 32px;}
#aboutSubNav #historyNav a:hover, #aboutSubNav #historyNav a:focus {background-position: 0 32px;}
#aboutSubNav #accreditationsNav a:hover, #aboutSubNav #accreditationsNav a:focus {background-position: 0 32px;}

#programsSubNav #dayNav a:hover, #programsSubNav #dayNav a:focus {background-position: 0 32px;}
#programsSubNav #supportedNav a:hover, #programsSubNav #supportedNav a:focus {background-position: 0 32px;}
#programsSubNav #caseNav a:hover, #programsSubNav #caseNav a:focus {background-position: 0 32px;}
#programsSubNav #healthNav a:hover, #programsSubNav #healthNav a:focus {background-position: 0 32px;}

#peopleSubNav #consumersNav a:hover, #peopleSubNav #consumersNav a:focus {background-position: 0 32px;}
#peopleSubNav #staffNav a:hover, #peopleSubNav #staffNav a:focus {background-position: 0 32px;}
#peopleSubNav #executiveNav a:hover, #peopleSubNav #executiveNav a:focus {background-position: 0 32px;}
#peopleSubNav #boardNav a:hover, #peopleSubNav #boardNav a:focus {background-position: 0 32px;}

/* Current page Customisations*/
.About #nav #aboutNav a{background-position: 0 110px;}
.Programs #nav #programsNav a{background-position: 0 110px;}
.People #nav #peopleNav a{background-position: 0 110px;}
.News #nav #newsNav a{background-position: 0 110px;}
.Calendar #nav #calendarNav a{background-position: 0 110px;}

.Contact #bannerNav #contactNav a{background-position: 0 20px;}
.Links #bannerNav #linksNav a{background-position: 0 20px;}
.Career #bannerNav #careerNav a{background-position: 0 20px;}

/* About Us sub links */
.Who #aboutSubNav #whoNav a{background-position: 0 32px;}
.Who #nav #aboutNav a{background-position: 0 110px;}

.Values #aboutSubNav #missionNav a{background-position: 0 32px;}
.Values #nav #aboutNav a{background-position: 0 110px;}

.History #aboutSubNav #historyNav a{background-position: 0 32px;}
.History #nav #aboutNav a{background-position: 0 110px;}

.Accreditations #aboutSubNav #accreditationsNav a{background-position: 0 32px;}
.Accreditations #nav #aboutNav a{background-position: 0 110px;}

/* Programs Sub Links*/
.Day #programsSubNav #dayNav a{background-position: 0 32px;}
.Day #nav #programsNav a{background-position: 0 110px;}

.Supported #programsSubNav #supportedNav a{background-position: 0 32px;}
.Supported #nav #programsNav a{background-position: 0 110px;}

.Case #programsSubNav #caseNav a{background-position: 0 32px;}
.Case #nav #programsNav a{background-position: 0 110px;}

.Health #programsSubNav #healthNav a{background-position: 0 32px;}
.Health #nav #programsNav a{background-position: 0 110px;}

/*Our People Links*/
.Consumers #peopleSubNav #consumersNav a{background-position: 0 32px;}
.Consumers #nav #peopleNav a{background-position: 0 110px;}

.Staff #peopleSubNav #staffNav a{background-position: 0 32px;}
.Staff #nav #peopleNav a{background-position: 0 110px;}

.Executive #peopleSubNav #executiveNav a{background-position: 0 32px;}
.Executive #nav #peopleNav a{background-position: 0 110px;}

.Board #peopleSubNav #boardNav a{background-position: 0 32px;}
.Board #nav #peopleNav a{background-position: 0 110px;}



/* end menu */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


/* Customise the Login Box */
#login-box { background: #eee; text-align: center;	line-height: 140%; margin: 1em 0 0.3em 0;}
#login-box fieldset {text-align:center;}
#login-box legend		{
	font-size: 90%;
	text-transform: uppercase;
	font-family:"Times New Roman", Times, serif;
	color: #333;
	font-weight: normal;
	letter-spacing: 0.15em;
}
.username {color: #009;} /* Color of name when logged in*/
.topboxbody {font-size:0.8em;padding:2px;}

#login-box input {
	text-transform: uppercase;
	font-size: 10px;
	margin: 5px 0px 1px 0px;
	width: 100px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
	Custom Classes (Re-useables)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	
/*  Float containers fix: */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/*  \*/
* html #clearfix {
	height: 1%;
}
/*  */

.stealth {visibility:hidden; display:none;} /* hides from normal css enabled browsers */



/* Inline font Styles */
/* Pretty styles for changing text in the WYSIWYG editor */

.important	{font-weight:bold;color:#f00;}
.code				{font-family: "Courier New", Courier, mono; color:#093;letter-spacing: 1px;}

.info-box		{background-color:#F9F8E2;padding:4px;}