/* *********************************************** */
/* Christian Distinctives (Aspire)                 */
/*                                                 */
/* CSS version 1.0 - July 2010                     */
/*                                                 */
/* Andy Merrett                                    */
/* *********************************************** */

/* Main body */
body {
	background-image: url('../images/main-bg.png');
	background-repeat: repeat-x;
	background-position: 0 0;
	background-color: #ffffff;
	padding-top: 0px;
	margin-top: 0px;
	font-size: 62.5%;
}

img {
	border: 0;
}

/* Overall wrapping */
/* The "min-height" is a bit of a fudge to get the main white-background column to stretch vertically */
/* on pages where the centre column is shorter than the menu bar */
#wrap {
	width: 1025px;
	margin: 0 auto;
	min-height: 800px;
	padding: 0px;
	background-color: #ffffff;
}

/* Aspire Header with logo */
#header {
	background-image: url('../images/aspire-header-bg.png');
	background-repeat: no-repeat;
	background-position: 0 0;
/*	background-color: #006BB0; */
	height: 69px;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
}

#header img {
	margin-left: 40px;
}

/* Horizontal menubar with gradient */
/* Note overall height should be 43px */
/* but padding is 16px, so height / max-height is set to 27px. */
#menubar {
	background-image: url('../images/aspire-menubar-bg.png');
	background-repeat: no-repeat;
	background-position: 0 0;
	background-color: #530464;
	height: 27px;
	max-height: 27px;
	padding: 0px;
	padding-top: 16px;
	padding-left: 20px;
	margin: 0px;
	overflow: hidden;
}

/* The menu itself */
#menubar ul {
	margin: 0px;
	padding: 0px;
	display: inline;
	}

#menubar ul li {
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #ffffff;
	margin-left: 15px;
	padding: 0px;
	list-style: none;
	display: block; 
	letter-spacing: 0px;
	float: left;
	padding-bottom: 14px;
	}

#menubar ul li a {
	text-decoration: none;
	color: #ffffff;
}

#menubar ul li a:hover {
	color: #FBF243;
}

/* #menubar ul li:after {
	padding-left: 10px;
	content: " // ";
} */

#menubar ul li.last:after {
	content: "";
}

/* the sub menus */
#menubar ul li ul {
	display: none;
	width: 20em;
	background-color: #530464; 
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 0px;
	padding: 0px;
}

#menubar ul li:hover ul {
	display: block;
	position: absolute;
	width: 20em;
	margin: 0px;
	margin-top: 12px;
	padding: 0px;
	padding-top: 10px;
	padding-bottom: 10px;
}

/* #menubar ul li:hover ul {
	left: 0px;
} */

#menubar ul li:hover ul li {
	float: none;
	padding: 0px;
	margin: 0px;
	padding-bottom: 10px;
	padding-left: 10px;
}

#menubar ul li:hover ul li:before {
	padding-left: 10px;
	content: "// ";
}

#menubar ul li:hover ul li:after {
	content: "";
}

#menubar ul li:hover ul li a {
	background-color: #530464;
	color: #FFFFFF;
}

#menubar ul li ul li a:hover {
	color: #FBF243;
}
}

#menubar ul li a:hover {
	color: #FBF243;
}

#menubar ul li:after {
	padding-left: 10px;
	content: " // ";
}

#menubar ul li.last:after {
	content: "";
}

/* Standard footer */
#footer {
	clear: both;
	margin-top: 10px;
	background-color: #ffffff;
	height: 20px;
}

#footer p {
	font-family: Verdana, Arial, sans-serif;
	font-size: 9px;
	color: #666666;
	margin-left: 185px;
	text-align: center;
}

#footer a {
	color: #666666;
	text-decoration: none;
}

#footer a:hover {
	color: #333333;
	text-decoration: none;
}

/* *** FRONT PAGE ITEMS *** */
/* Top Large Banner - single graphic */
#fp-banner {
	background-image: url('../images/fp-banner.png');
	background-repeat: no-repeat;
	background-position: 0 0;
	background-color: #FFFFFF;
	height: 284px;
	padding: 0px;
	margin: 0px;
}

/* Wrapping for the two 'intro' boxes */
/* Height and padding-top/bottom must add up to 120px */
/* Similarly, width and padding-left/right must add up to 1023px (when including a 1px border) */
/* Note the margin bottom is now removed to 'join up' coloured boxes underneath */
#fp-intro {
	background-image: url('../images/fp-box-grad.png');
	background-repeat: x-repeat;
	background-position: 0 0;
	background-color: #FFFFFF;
	width: 963px;
	height: 140px;
	padding: 0px;
	margin: 0px;
	border: 1px solid #530464;
/*	margin-bottom: 5px; */
	padding-top: 20px;
	padding-left: 30px;
	padding-right: 30px;
}

/* Wrapping for the aspire/distinctives boxes */
#fp-text {
	background-color: #ffffff;
	height: 160px;
	padding: 0px;
	margin: 0px;
}

/* Aspire text purple background and logo */
#fp-quote {
	float: left;
	background-color: #530464;
	background-repeat: no-repeat;
	background-position: 40px 28px;
	height: 160px;
	width: 512px;
	padding: 0px;
	margin: 0px;
	border: 0px;
}

/* Distinctives text blue background and logo */
#fp-distinctives {
	float: right;
	background-color: #006FBA;
	height: 160px;
	width: 513px;
	padding: 0px;
	margin: 0px;
	border: 0px;
}

#fp-distinctives-logo {
        float: left;
        padding: 0px;
        margin: 0px;
        margin-top: 30px;
        margin-left: 28px;
        width: 155px;
        height: 104px;
}

/* Styled paragraphs for front page elements */
#fp-intro p {
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
	color: #333333;
	padding: 5px;
	padding-left: 25px;
	padding-bottom: 0px;
	text-align: left;
}

#fp-intro p strong {
	color: #571167;
	font-weight: bold;
}

#fp-quote p {
	font-family: Verdana, Arial, sans-serif;
	font-weight: 450;
	font-size: 12px;
	color: #ffffff;
	padding: 0px;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 25px;
	line-height: 15px;
	font-style: italic;
}

#fp-distinctives p {
	font-family: Verdana, Arial, sans-serif;
	font-weight: 450;
	font-size: 12px;
	color: #ffffff;
	padding: 0px;
	padding-left: 220px;
	padding-right: 40px;
	padding-top: 30px;
	line-height: 14px;
}

/* Sidebar */
/* ignore commented out lines regarding position and margin */
#sidebar {
	float: left;
	width: 185px;
	height: 100%;
	padding: 0px;
	margin: 0px;
/*	position: absolute; */
/*	margin-top: -10px; */
}

/* top padding and height for this must total 170px to accommodate gradient */
#sidebar-menu {
	background-image: url('../images/aspire-sidebar-menu.png');
	background-repeat: repeat-x;
	background-position: 0px 0px;
	background-color: #530464;
	width: 185px;
	height: 150px;
	padding-top: 20px;
}

#sidebar ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
	padding-left: 10px;
}

#sidebar ul li {
	list-style: none;
	padding: 0px;
	margin: 0px;
}

#sidebar ul li:before {
        padding-left: 0px;
        content: "// ";
}
 

#sidebar ul li {
	font-family: Verdana, Arial, sans-serif;
	font-size: 10px;
	font-weight: 600;
	padding: 0;
	padding-bottom: 10px;
	color: #ffffff;
}

#sidebar ul li a {
	color: #ffffff;
	text-decoration: none;
}

#sidebar ul li a:hover {
	color: #FBF243;
}

/* Sidebar image sizes : note these are individually set within each page but these are the fixed dimensions */
#sidebar-photo1 {
	border: 15px solid #4A247B;
	width: 155px;
	height: 155px;
	padding: 0px;
	margin: 0px;
	background-color: #ffffff;
}

#sidebar-photo1 img {
	padding: 0px;
	margin: 0px;
	width: 155px;
	height: 155px;
	border: 0px;
}

#sidebar-photo2 {
	border: 11px solid #4A247B;
	width: 115px;
	height: 115px;
	padding: 0px;
	margin: 0px;
	margin-left: 75px;
	background-color: #ffffff;
}

#sidebar-photo2 img {
	padding: 0px;
	margin: 0px;
	width: 115px;
	height: 115px;
	border: 0px;
}

#sidebar-photo3 {
	border: 9px solid #4A247B;
	width: 60px;
	height: 60px;
	padding: 0px;
	margin: 0px;
	margin-left: 45px;
	background-color: #ffffff;
}

#sidebar-photo3 img {
	padding: 0px;
	margin: 0px;
	width: 60px;
	height: 60px;
	border: 0px;
}

/* Main on all but front page */
#dropshadow {
	background-image: url('../images/menu-drop-shadow.png');
	background-repeat: repeat-x;
	background-position: 0px 0px;
	background-color: #FFFFFF;
	height: 20px;
	padding: 0px;
	margin: 0px;
	margin-left: -115px;
	margin-right: -100px;
}

#main {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	color: #000000;
	text-align: left;
	padding-left: 135px;
	background-color: #FFFFFF;
	padding: 0px;
	margin: 0px;
	margin-left: 300px;
	margin-right: 100px;
}

/* #main table {
	padding-left: 135px;
}
*/

#main h1 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 24px;
	color: #530464;
	text-align: left;
/*	padding-left: 115px; */
	padding-right: 50px;
}

#main h2 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	color: #530464;
	text-align: left;
/*	padding-left: 115px; */
	padding-right: 50px;
}

#main h3, #dataprotection h2 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #000000;
	text-align: left;
/*	padding-left: 115px; */
	padding-right: 50px;
}

#main p {
	font-family: Verdana, Arial, sans-serif;
	font-weight: 450;
	font-size: 12px;
	color: #000000;
	line-height: 18px;
	margin-bottom: 24px;
/*	padding-left: 115px; */
/*	padding-right: 100px; */
}

#main p em {
	font-weight: 600;
}

#main ul {
/*	padding-left: 115px; */
/*	padding-right: 100px; */
	margin-bottom: 24px;
}

#main ol {
/*	padding-left: 115px; */
/*	padding-right: 100px; */
	list-style-type: decimal;
	margin-bottom: 24px;
}

#main li {
	font-family: Verdana, Arial, sans-serif;
	font-weight: 450;
	font-size: 12px;
	color: #000000;
	line-height: 18px;
}

/* Alert and changes displayed as red */
/* Replaces a lot of the deprecated font tags used in php coding */
.alert {
	color: red;
	font-weight: 600;
}

/* Various styles for single page elements and so on */

/* This 'sample-letter' id is used on aspire_coord_guide.php for the sample letter, it's a simple bordered div */

div#sample-letter {
	border: 1px #000000 solid;
	padding: 5px;
	width: 60%;
	margin: 0 auto;
}

div#sample-letter p {
	padding-left: 20px;
	padding-right: 20px;
}

/* reg-guidance-sectors-sublist (et al) used on aspire_coord_guide.php to force a, b, c... lettered ordered sub list on bullets that need it */
ol#reg-guidance-sectors-sublist, ol#reg-guidance-faith-sublist {
	list-style-type: lower-alpha;
}

/* participant table on aspire_coord_guide.php */
table {
/* width: 60%; */
margin: 0 auto;
padding: 0px;
/* border: 1px solid #000000; */
/* margin-left: 135px; */
table-collapse: collapse;
}

td {
/* border: 1px solid #000000; */
margin: 0px;
padding: 2px;
}

/* aspire_demo_reports div surrounding three sample buttons */
#aspire-sample {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 1px solid #000000;
	margin-bottom: 1px solid #000000;
	margin-left: 60px;
	margin-right: 60px;
}

#aspire-sample form {
	margin: 0px;
	padding: 0px;
	margin-bottom: 5px;
}

/* find-out-more ordered list - needed more vertical space between list elements - used on aspire_particular.php */
ol#find-out-more li {
	margin-bottom: 1em;
}

hr {
	width: 50%;
	margin: 0 auto;
}

blockquote {
	margin-bottom: 0px;;
}

.quotee {
	font-style: italic;
	text-align: right;
	padding-right: 50px;
	padding-top: 0px;
	margin-top: -14px;
}

.aspire-normal {
	color: #000000;
	font-size: 14px;
	font-weight: 300;
	padding: 5px;
	margin-bottom: 5px;
}

.aspire-important {
	color: #530464;
	font-size: 14px;
	font-weight: 700;
	padding: 5px;
	margin-bottom: 5px;
}

#contactus ul {
	list-style-type: none;
}

#contactus ul li {
	list-style-type: none;
	line-height: 18px;
	font-size: 12px;
	margin-bottom: 10px;
}

td {
	font-size: 12px;
}

#sitemap li {
        list-style-type: none;
        margin-bottom: 14px;
        font-weight: 600;
}

#sitemap li ul li {
        margin: 0px;
        font-weight: 300;
}

/* For the graphs */

#graph-holder {
	position: relative;
	padding: 0px;
	margin: 0px;
}

#graph-header {
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 0px;
	margin: 0px;
	border: 0px;
}

.graph-header-values {
	position: absolute;
	vertical-align: bottom;
	padding: 0px;
	margin: 0px;
	border: 0px;
}

#graph-main {
	position: absolute;
	padding: 0px;
	border: 0px;
	margin: 0px;
}

.graph-y-axis {
	position: absolute;
	padding: 0px;
	border: 0px;
	margin: 0px;
	text-align: right;
	border-bottom: 1px solid #000000;
}

#graph-break {
	position: absolute;
	padding: 0px;
	margin: 0px;
}

.graph-values {
	position: absolute;
	padding: 0px;
	border: 0px;
	margin: 0px;
	z-index: 2;
}

.graph-values img {
	border: 1px #000000 solid;
}

#graph-footer {
	position: absolute;
	padding: 0px;
	border: 0px;
	margin: 0px;
}

.graph-colour-label {
	position: absolute;
	padding: 0px;
	margin: 0px;
	border: 0px;
	text-align: center;
}

#graph-lines {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	border: 0px;
}

.graph-line-block {
	position: absolute;
	top: 0px;
	border-left: 1px #000000 solid;
	padding: 0px;
	margin: 0px;
	z-index: 1;
}

#graph-left-label-areas, #graph-left-label-values {
	position: absolute;
	left: 0px;
	width: 25px;
	z-index: 3;
	background-color: #ffffff;
}

.graph-left-text {
	position: absolute;
	left: -30px;
	width: 40px;
	background-color: #ffffff;
	padding: 0px;
	margin: 0px;
	border: 0px;
}

#customareatable, #customquestiontable {
	margin: 0;
	margin-top: -10px;
	margin-bottom: 40px;
	text-align: left;
	border-collapse: collapse;
//	border: 1px solid #000000;
}

#customareatable tr, #customquestiontable tr, #customareatable tr td, #customquestiontable tr td {
	border-collapse: collapse;
//	border: 1px solid #000000;
	padding: 0px;
	margin; 0px;
}

#customareatable tr td, #customquestiontable tr td {
	padding: 0px;
	margin: 0px;
	padding-left: 10px;
	padding-right: 10px;
}

#customareatable p, #customquestiontable p {
	padding: 0px;
	margin: 0px;
	padding-top: 4px;
	padding-bottom: 4px;
}