/*
Author: Sean Eldridge, http://www.endeavourit.co.uk/index.html
Description:
This CSS document provides general layout
and tag elements for the Charita Website
*/


@import url("articles.css");
@import url("benefits.css");






/* LAYOUT ELEMENTS */

#Wrapper {
	width: 981px;
	margin: 0px;
	padding: 0px;
}

#HeaderNav {
	top: 0px;
	height: 52px;
	width: 798px;
	margin: 15px 0px 0px 62px;
	background-image: url(images/charita-logo.jpg);
	background-position: right top;
	background-repeat: no-repeat;
}

#Banner {
	top: 0px;
	width: 765px;
	margin: 0px;
	padding: 24px 24px 24px 72px;
	background-color:#9900cc;
}

#Content-Wrapper {
	left: 0px;
	width: 981px;
	margin: 0px 0px 0px 62px;
	padding: 0px;
	text-align: left;
}

/*USED FOR HOME PAGE*/
#Content {
	float:left;
	top: 0px;
	width: 801px;
	margin: 0px;
	padding: 0px;
}
/*USED FOR SUB-PAGES*/
#Content-Narrow {
	float:left;
	top: 0px;
	width: 532px;
	margin: 0px;
	padding: 0px;
}

#Projects {
	float: left;
	top: 0px;
	width: 266px;
	margin: 0px 10px 0px 0px;
}

/*TABLES*/
#Service-Table {
	float: left;
	top: 0px;
	width: 261px;
	margin: 0px 10px 0px 0px;
}

#Service-Table-Wide {
	float: left;
	top: 0px;
	width: 532px;
	margin: 0px 10px 0px 0px;
}

#About-Table {
	float: left;
	top: 0px;
	width: 261px;
	margin: 0px 10px 0px 0px;
}

#Project-Date {
	float:left;
	width:80px;
	margin: 0px 30px 0px 0px;
	padding: 0px 20px 0px 0px;
	border-bottom: #CCCCCC 1px solid;	
}

#Project-Detail {
	float:left;
	width: 392px;
	margin: 0px;
	padding: 0px;	
}

#Sidebar {
	float:left;
	top: 0px;
	width:100px;
	margin: 0px;
	padding: 0px;
}

#Column-End {
	float:right;
}

#Footer {
	clear:left;
	height: 90px;
	width:788px;
	margin: 0px 0px 0px 10px;
	padding: 0px;
	border-top: #9900cc 1px solid;
}

#hr {
	width: 798px;
	margin: 15px 0px 0px 0px;
	padding: 15px 0px 0px 0px;
	border-top: #9900cc 1px solid;
}

/*TAG ELEMENTS*/

* {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	text-decoration: none;
	color: #000000;
}

body {
	background-color:#FFFFFF;
	margin: 0px;
	padding: 0px;
}

h1 {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 10px;
	border-top: #CCCCCC 1px solid;
	border-bottom: #CCCCCC 1px solid;
	line-height: 62px;
	color:#000000;
	font-size:20pt;
	vertical-align:middle;
}

h2 {
	margin: 0px 0px 0px 0px;
	padding: 4px 10px 4px 10px;
	border-top: #CCCCCC 1px solid;
	border-bottom: #CCCCCC 1px solid;
	color:#000000;
	font-size: 8pt;
}

h3 {
	margin: 0px 0px 0px 10px;
	padding: 4px 0px 4px 10px;
	border-top: #CCCCCC 1px solid;
	color:#000000;
	font-size: 8pt;
	line-height: 13px;
	text-decoration: none;
}

h4 {
	margin: 0px 0px 0px 10px;
	padding: 3px 0px 3px 10px;
	border-top: #CCCCCC 1px solid;
	border-top: #CCCCCC 1px solid;
	color:#333333;
	font-size: 7pt;
	font-weight:normal;
	line-height: 13px;
}

p {
	margin: 10px 0px 4px 10px;
	padding-left: 0px;
	padding-right: 10px;
	font-size: 9pt;
	color:#000000;
 }

#HeaderNav a {
	margin: 0px 28px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 0px;
	color:#9900cc;
	text-decoration:none;
}

#HeaderNav .selected {
	background-color:#9900CC;
	color:#FFFFFF;
}

#HeaderNav img {
	margin: 0px;
	padding: 0px;
	border: 0px;
}	

#HeaderNav ul {
	margin: 3px 0px 0px 0px;
	padding: 20px 0px 10px 10px;
	list-style: none;
	text-align: left;
}

#HeaderNav li {
	display:inline;
	list-style: none;
	color:#9900cc;
	font-size: 10px;
	text-align: left;
}

#HeaderNav strong {
	margin-right: 0px;
	padding: 0px;
	color:#9900cc;
}

#Banner strong {
	color:#FFFFFF;
	font-size: 24pt;
	line-height: 40px;
}

#Content * {
	color: #333333;
	text-decoration: none;
}

#Content p, #Content-Narrow p{
	font-size:12px;
	text-align: left;
	margin-left: 0px;
	padding-left: 10px;
	line-height: 16px;
}

#Content a, #Content-Narrow a  {
	color:#9900CC;
	text-decoration: none;
}
	
#Content img {
	text-decoration: none;
	color: #FFFFFF;
	border-width: 0px;
}
	

#Content .main-text {
	font-size:12pt;
	letter-spacing: 0.5px;
	line-height: 24pt;
}

/*Add space to allow floating elements
to wrap correctly*/
#Projects p {
	margin-bottom: 30px;
}

#Project-Date p {
	margin: 0px 0px 0px 10px;
	padding: 10px 0px 0px 0px;
	color:#333333;
	font-size: 8pt;
	line-height: 16pt;
}

#Project-Detail p {
	margin: 0px 0px 0px 10px;
	padding: 9px 0px 0px 0px;
	font-size: 7pt;
	line-height: 11pt;
}

#Project-Detail strong {
	font-size: 12pt;
	line-height: 20pt;
}

#Project-Detail img {
	margin: 10px 0px 10px 10px;
}

#Service-Table h2, #Service-Table-Wide h2 {
	margin: 0px 0px 0px 0px;
	padding-left: 10px;
	padding-right: 10px;
	border-top: #CCCCCC 1px solid;
	border-bottom: #CCCCCC 1px solid;
	color:#000000;
	font-size: 12px;
}

#Service-Table p, #Service-Table-Wide p {
	margin: 0px;
	padding: 0px 10px 0px 10px;
	color:#333333;
	font-size: 7pt;
	line-height: 8px;
}

#Service-Table ul, #Service-Table-Wide ul {
	margin: 0px;
	padding: 0px;
}

#Service-Table li, #Service-Table-Wide li {
	margin: 0px;
	padding: 5px 10px 5px 10px;
	background-color: #FFFFFF;
	color:#333333;
	font-size: 7pt;
	list-style-type: none;
}

#About-Table h2 {
	margin: 0px 0px 5px 0px;
	padding-left: 10px;
	padding-right: 10px;
	border-top: #CCCCCC 1px solid;
	border-bottom: #CCCCCC 1px solid;
	color:#000000;
	font-size: 12px;
}

#About-Table p {
	margin: 0px;
	padding: 5px 10px 5px 10px;
	color:#333333;
	font-size: 7pt;
	line-height: 11pt;
}

#Footer p {
	float:left;
	top: 0px;
	width: 261px;
	margin: 12px 0px 0px 0px;
	padding-top: 0px;
	color: #000000;
	font-size: 9px;
	text-align: left;
	line-height: 12pt;
}

#Footer a {
	float:left;
	width: 261px;
	margin: 0px;
	padding: 0px;
	color:#9900cc;
	line-height: 14pt;
	font-size: 9px;
	text-align: left;
	text-decoration: none;
}

#Footer strong {
	color:#9900cc;
}

/*Miscellaneous Classes*/
#Content-Narrow .grey-indent {
	margin: 3px 0px 0px 25px;
	color:#333333;
}

#Content-Narrow .enlarge-bullet {
	font-size:18px;
}

#Content .purple-text, #Content-Narrow .purple-text {
	color:#9900CC;
}

#Content-Narrow .purple-link {
	color:#9900CC;
	font-size: 12px;
	font-weight:bold;
}

#Projects .no-link {
	color:#999999;
}

#Service-Table-Wide .leading {
	margin-top: -6px;
}

#About-Table .purple-link{
	color:#9900CC;
	font-size: 7pt;
	font-weight:bold;
}

#About-Table .quals {
	font-size: 10px;
}

#Project-Detail .hr {
	margin: 0px 0px 0px 20px;
	padding: 0px;
	border-bottom: #CCCCCC 1px solid;
	line-height: 10pt;
}

.clear {
	clear: both;
}