/* There are some layout features included in this document.  Each line applying to each one
  is marked as follows (in case you need to remove them).  When changing the value of properties marked 
  with these tags you should leave the original value in a comment so changes can be easily scanned.
  
  	[xxx] feature name
*/




/*****************************************************************************************
 *			Imports
 ****************************************************************************************/

@import url("standard.css");

/* form styles */
@import url("forms/standard-forms.css");
@import url("forms/normal-forms.css");




/*****************************************************************************************
 *			Main document sections layout
 ****************************************************************************************/

body {
	text-align: center; /* center the #page element in IE5/win [cfw] */
}

#page {
	position: relative; zoom: 1;
	z-index: 1;
	width: 920px; /* max page width to not scroll at 800x600 [cfw] */
	text-align: left; /* reset the text alignment after IE5/win hack above [cfw] */
	margin: 0 auto; /* ceneter the #page element in all but IE5/win [cfw] */
}


/************************
 * header, primary navigation and breadcrumb
 ************************/
 
#page #header {
	position: relative; zoom: 1;
	z-index: 20;
}

#page #primary-navigation {
	position: absolute;
	top: 70px; /* just below header */
	right: 0;
	z-index: 99999;
}


/************************
 * secondary navigation & content columns
 ************************/
 
/* no secondary nav */
#page #content {
	margin-top: 27px; /* clear primary navigation and leave margin room */

}

/* breathe in at the left a little to make room for secondary nav */
body.has-secondary-navigation #page #content {
	float: right; display: inline;
	margin-left: -220px;
	width: 100%;
}

/* push content away from space where secondary nav will be */
body.has-secondary-navigation #page #content-inner {
	padding-left: 220px;
}

/* move into the space we created next to #content */
#page #secondary-navigation {
	float: left; display: inline;
	width: 180px;
	margin-top: 41px; /* clear primary navigation */
	margin-bottom: 10px;
	z-index: 1; /* make sure this isn't hidden underneath #content in FF */
	position: relative;
}


/************************
 * misc
 ************************/

#page #footer {

}




/*****************************************************************************************
 *			Page layout / styles
 ****************************************************************************************/

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 75%;
	background: url(../images/backgrounds/bg_lightblue2.gif) transparent left top repeat;
	color: #333;
}

/* background images for the body */
#page {
	background: url(../images/main/main_home.jpg) no-repeat 0 38px;
}
body.what-it-is-page #page		{ background-image: url(../images/main/main_what-it-is.jpg); }
body.benefits-page #page		{ background-image: url(../images/main/main_benefits.jpg); }
body.our-services-page #page 	{ background-image: url(../images/main/main_our-services.jpg); }
body.our-rates-page #page		{ background-image: url(../images/main/main_rates.jpg); }
body.faq-page #page				{ background-image: url(../images/main/main_faq.jpg); }
body.contact-page #page			{ background-image: url(../images/main/main_contact.jpg); }	



/*****************************************************************************************
 *		 	Header
 ****************************************************************************************/

#header {
	padding: 50px 0 8px 0;
	border-bottom: 1px solid #CBD2D6;
}

#header #logo {
	width: 275px;
}




/*****************************************************************************************
 *		 	Primary Navigation
 ****************************************************************************************/

#primary-navigation {
	
}

#primary-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#primary-navigation ul li {
	float: left; display: inline;
	margin: 0;
	padding: 0;
}

#primary-navigation ul li a {
	display: block;
	color: #006699;
	text-decoration: none;
	padding: 0 10px;
	border-left: 1px solid #006699;
}

#primary-navigation ul li a:hover,
#primary-navigation ul li a:focus {
	color: #006666;
	text-decoration: underline;
}


#primary-navigation ul li.first a {
	border: none;
}

/* active page states */
body.what-it-is-page #primary-navigation ul li#what-it-is-section-link a,
body.benefits-page #primary-navigation ul li#benefits-section-link a,
body.our-services-page #primary-navigation ul li#our-services-section-link a,
body.our-rates-page #primary-navigation ul li#our-rates-section-link a,
body.faq-page #primary-navigation ul li#faq-section-link a,
body.contact-page #primary-navigation ul li#contact-section-link a {
	color: #006666;
	text-decoration: underline;
}




/*****************************************************************************************
 *		 	Page Title internal layout / styles
 ****************************************************************************************/

#page-title {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 30;
}

#page-title h1 {
	font-size: 0.833em; /* 10px */
 	margin: 0;
	padding: 0;
	color: #C2DFED;
}




/*****************************************************************************************
 *		 	Blockquote
 ****************************************************************************************/

#page blockquote#main-quote {
	margin: 0;
	padding: 70px 10px 40px 510px;
	color: #00759E;
	background: url(../images/backgrounds/bg_leaf.gif) no-repeat 100% 135%;
}

#page blockquote#main-quote h3 {
	margin: 0 0 3px 0;
	padding: 0;
	font-weight: normal;
	font-size: 1.3333em; /* 16px */
}

#page blockquote#main-quote h4 {
	margin: 0;
	padding: 0;
	font-size: 0.8333em; /* 10px */
}




/*****************************************************************************************
 *		 	Content area internal layout
 ****************************************************************************************/

#content {
	border-top: 1px solid #CBD2D6;
	padding: 10px 0 0 0;
}

#main-inner {
	padding: 0 10px;
	min-height: 300px;
	_height: 300px;
}



/*****************************************************************************************
 *			Footer internal layout / styles
 ****************************************************************************************/

#footer {
	border-top: 1px solid #CBD2D6;
	
}

#footer-inner {
	padding: 12px 10px;
}

#footer a {
	text-decoration: none;
}

#footer a:hover,
#footer a:focus {
	text-decoration: underline;
}


/************************
 * Copyright statement
 ************************/
 
#footer #copyright {
	float: right; display: inline;
	text-align: right;
	width: 50%;
	margin: 0;
	padding: 0;
}

#footer #copyright p {
	margin: 0;
	padding: 0;
}

#footer #copyright p strong {
	font-weight: normal;
}


/************************
 * Footer contact
 ************************/

#footer #footer-contact {
	float: left; display: inline;
	width: 40%;
}

#footer #footer-contact p {
	margin: 0;
	padding: 0;
}

/************************
 * Site by Areeba Link
 ************************/
 
#footer #site-by-areeba-link {
	padding: 0;
	margin: 5px 0 0 0;
	clear: both;
	float: right;
	text-align: right;
}

#footer #site-by-areeba-link span,
#footer #site-by-areeba-link img {
	vertical-align: middle;
}




/*****************************************************************************************
 *			Content styles for each page
 ****************************************************************************************/


/************************
 * Home
 ************************/

body.home-page #content-left {
	float: left; display: inline;
	width: 390px;
	margin-right: 110px;
}

body.home-page #content-right {
	float: left; display: inline;
	width: 390px;
	margin-right: 10px;
}


/************************
 * What it is
 ************************/

body.what-it-is-page {


}


/************************
 * Benefits
 ************************/

body.benefits-page blockquote {

}

body.benefits-page blockquote p {
	padding: 0;
	margin: 0.5em 0;
}

body.benefits-page blockquote h3 {
	margin: 0;
	padding: 0;
	font-size: 1em;
	font-weight: bold;
}


/************************
 * Out Services
 ************************/

body.our-services-page {

}


/************************
 * Our Rates
 ************************/

body.our-rates-page {

}


/************************
 * FAQs
 ************************/

body.faq-page dl dt {
	font-size: 1.0833em; /* 13px */
}


/************************
 * Contact
 ************************/

body.contact-page h3 {
	margin: 0 0 2px 0;
	padding: 0;
}

body.contact-page h4 {
	margin: 0 0 10px 0;
	padding: 0;
}

body.contact-page .vcard dl {
	margin: 0 0 10px 0;
	padding: 0;
}

body.contact-page .vcard dl.tel dt {
	float: left; display: inline;
	width: 30px;
	margin: 0;
	padding: 0;
}

body.contact-page .vcard dl.tel dd {
	margin: 0;
	padding: 0;
}



/*****************************************************************************************
 *			Utility styles
 ****************************************************************************************/


/************************
 * USER NOTES (message box type stuff)
 ************************/
 
.important, .success, .error, .cancelled {
	padding: 20px 20px 20px 88px;
	min-height: 32px;
	_height: 32px;
	margin: 1em auto;
	width: 80%;
	background-position: 20px 20px;
	background-repeat: no-repeat;
}

.important h2, .success h2, .error h2, .cancelled h2 {
	color: inherit;
	margin-top: 0;
}

.important {
	color:#725A00;
	background-image: url(../images/icons/ico_note.gif);
	background-color: #FFFAE6;
	border: 1px solid #FAC71E;
}

.success {
	color:#2d8228; 
	background-image: url(../images/icons/ico_success.gif);
	background-color: #f4fcf4;
	border: 1px solid #51cd49;
}

.error {
	color: #FF0000;
	background-image: url(../images/icons/ico_error.gif);
	background-color: #fff1f1;
	border: 1px solid #f9221d;
}

.cancelled {
	color: #FF0000;
	background-image: url(../images/icons/ico_cancelled.gif);
	background-color: #fff1f1;
	border: 1px solid #f9221d;
}

/************************
 * PIPELIST: a list which is displayed inline with ' | ' as a seperator
 ************************/

.pipe-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.pipe-list li {
	float:  left; display: inline;
	background-image: none;
	border-left: 1px solid black;
	padding: 0 5px 0 5px;
	margin: 0 5px 0 -5px;
}

.pipe-list li:first-child { 
	border-left: 0;
	border-right: 0;
}


/************************
 * links list
 ************************/

ul.links-list {
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: left;
}

ul.links-list li {
	background: url(../images/bullets/bul_links-list.gif) transparent 0 4px no-repeat;
	padding-left: 10px;
	margin-bottom: 3px;
}

ul.links-list li a {
	color: #000;
	text-decoration: none;
}

ul.links-list li a:hover {
	text-decoration: underline;
}


/************************
 *  IMAGE-REPLACED: accessible text image replacement
 ************************/
/*
  Usage: <tag class="image-replaced">the text to replace<span></span></tag>
*/

.image-replaced {
	position: relative;
	overflow: hidden;
}


.image-replaced span{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: transparent;
	background-position: left top;
	background-repeat: no-repeat;
}


/************************
 * accessibility styles
 ************************/

/* hide items in a way still accessibly to screen readers (and unstyled browsers of course) */
.accessibility, hr {
	position: absolute !important;
	top: -1000em !important;
	left: -1000em !important;
}


/************************
 * collapsible regions
 ************************/
 
html.js #content .collapsible-body {
	overflow: hidden;
	margin-left: 10px;
}

html.js #content .collapsed .collapsible-body * {
	display: none;
}

html.js #content .collapsible-heading a {
  padding-left: 10px;
  background: url(../images/bullets/bul_collapsible-open.png) transparent 0 50% no-repeat;
  color: inherit;
}

html.js #content .collapsible-heading a:hover {
	cursor: pointer;
	cursor: hand;
	text-decoration: underline;
}

html.js #content .collapsed .collapsible-heading a {
	background: url(../images/bullets/bul_collapsible-closed.png) transparent 0 50% no-repeat;
}


/************************
 * clearfix, a class to clear floated elements
 ************************/
 
/* clearfix for good browsers */
html > body .clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* clearfix for IE/mac */
.clearfix {
	display: inline-block;
}

/* Hides from IE-mac, clearfix for IE/win and reset for not IE/mac */
@media all {
	* html .clearfix {
		_height: 0;
	}
	
	.clearfix {
		display: block;
	}
}


/************************
 * flash inclusion
 ************************/

/* These are standard flash inclusion styles... do not modify */
@media screen {
	.flash-text-replaced embed,
	.flash-text-replaced object {
		visibility: visible !important;
		margin: 0;
		clear: none;
		_margin-right: -3px; /* account for IE 6 putting 3px of margin on the left when next to a floated element */
	}
	
	html.flash-text-has-flash span.alt {
		display: block;
	}
	.flash-text-replaced span.alt {
		position: absolute;
		left: -10000px;
		top: -10000px;
	}
}

.flash-replaced .alt {
		position: absolute;
		left: -10000px;
		top: -10000px;
}


/* custom font tweaks go here */

html.flash-text-has-flash .box h2 {
	line-height: 1.45;
	letter-spacing: -1px;
	zoom: 1; /* stop ie 6 putting 3px of internal margin on our text (and pushing the embed element down when it's inserted */
}