@import url('extended.css');

/*
-------------------------------------------------------------
LAST EDITED BY:			Karl Olsen 7 Feb 2010
LEGACY COMMENTS:		
BROWSER SUPPORT:		IE7-8 (Primary), IE6 (Secondary), FF3 (Secondary)		
-------------------------------------------------------------

RESET
------------------------------------------------
*/

/* remove and alter to fit project */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
outline:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}

/* remember to define focus styles! */
:focus {outline:0;}

ol, ul {list-style:none;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse:separate; border-spacing:0;}

caption, th, td {text-align:left; font-weight:normal;}

/* not always needed and may not validate for e-govt work */
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}


/* GLOBAL ELEMENTS
------------------------------------------------
*/

/* font-size 62.5% sets base font to approx 10px - not sure about setting line-height to 1 as it can cause issues in IE6 */
body {line-height:1; color:#333; font-size:62.5%; background: #f8f8f8 url('img/bodyBG.png') center top repeat-y; font-family: Verdana, Arial, Helvetica, sans-serif;}
a, a:link, a:active, a:visited {color: #333; text-decoration: underline;}
	a.more, a.more:link, a.more:active, a.more:visited {background: url('img/arrowMore.png') right top no-repeat; color: #8a9d0b; padding-right: 20px; text-decoration: none;}
	a.donateNow {background: url('img/btnDonateNow.png') 0 -39px no-repeat; display: block; width: 205px; height: 39px; float: right; text-indent: -9999em;}
a:hover {color: #8a9d0b; text-decoration: none;/* light green */}
	a.more:hover {text-decoration: underline;}
	a.donateNow:hover {background-position: 0 0px;}

h1, h2	{
	font-family:"Trebuchet MS", Arial, Helvetica, Sans-serif; 
	font-weight: normal;
	padding-bottom: 8px; 
	background:transparent url('img/sectionHeadingUnderline.png') no-repeat scroll left bottom; 
	color: #00aedb; 
	margin-bottom: 16px;
	}
h1 {font-size: 2.6em; line-height: 1.2;} 
h2 {font-size: 2.4em; line-height: 1;}
	.home .contentPrimary h2 {color: #00aedb;}
	.contentFeatured h2 {font-size: 2.2em; color: #e1a510; background:transparent url('img/featuredHeadingUnderline.png') no-repeat scroll left bottom;/* orangey brown */}
	.contentPage h2		{font-size: 1.3em; color: #000; font-weight: bold; background: none; margin-bottom: 0;}
h3 {font-size:1.2em; font-weight: bold;} /* 1.2em=14px, 1.4em=16px */
h4 {font-size:1.2em;} /* 1.2em=14px */
h5 {font-size:1em; font-weight:bold;} /* 1em=12px + Bold */
h6 {font-size:.9em; font-weight:bold;} /* .9em=11px + Bold */


p {margin-bottom: 8px;}	/* font-size determined by container */
p.introText {color: #00AEDB; font-size: 1.2em; margin-bottom: 24px;}
p.bodyCopy {clear: both;}

em { }
small {}
strong {font-weight: bold;}



/* STRUCTURE
------------------------------------------------
*/
#wrapBodyOuter 	{background: transparent url('img/beadsBG.png') 35% 0 repeat-x;} /*  beads background */

#wrapBodyInner  {background: transparent url('img/beadsFG.png') 200% 0 repeat-x;} /*  beads foreground */

#wrapHeader 	{background: #fff; padding-top: 16px; }

#wrapSite 		{width: 974px; margin: 0 auto; background: transparent url('img/wrapSiteBG.png') center top repeat-y;}

#wrapSection	{float: left; background: #fff url('img/wrapSectionBG.png') repeat-x scroll left top; padding-bottom: 48px; }
	#wrapSection.home {background-image: none;}

#wrapContent	{padding: 0 32px; background: blue;} 

#wrapFooter 	{background: #14add4 url('img/blueBG.png') 0px 52px repeat-x; color: #fff; height: 205px; clear: both;} /* electric blue */

#wrapHeader, #headerDivider, #wrapSection, #wrapFooter			{margin: 0 7px;}


.clearfix			{clear: both; font-size: 1px; height: 1px;}


/* HEADER 
------------------------------------------------
*/
#header		    	{background: #fff url('img/tagline.png') 160px 32px no-repeat; padding: 0 16px 32px; position: relative;} 
.siteName a			{background: url('img/logoCCF.png') left top no-repeat; width: 137px; height: 97px; display: block; text-indent: -9999em;}
#headerDivider		{background: url('img/blueBG.png') 0px -222px repeat-x; color: #fff; padding: 4px 16px 4px 12px; clear: both; font-size: 1.2em;}

/* NAVIGATION
------------------------------------------------
*/

#navUtility  {position: absolute; right: 18px; top: 0px; font-size: 1.1em; line-height: 1.6;}
#navUtility li {display: inline; margin: 0 4px;}

#navGlobal   {background: #fff; font-size: 1.4em; float: left; width: 928px; padding: 0 16px;}	

	#navGlobal ul { 
	  margin:0;
	  padding: 0;
	  list-style:none;
	  float: left;
	  }
	#navGlobal li {
	  float:left;
	  background:url('img/navGlobalSprite.png') no-repeat 0 0;
	  margin: 5px 2px 0 0;
	  padding:0 0 0 7px;
	  }
	#navGlobal li a {
	  float:left;
	  display:block;
	  background:url('img/navGlobalSprite.png') no-repeat right top;
	  padding:10px 15px 10px 6px;
	  text-decoration:none;
	  color:#00AEDB;
	  }
	/*#navGlobal li:hover {background:url('img/navGlobalSprite.png') no-repeat 0 -100px;}*/
	/*#navGlobal li a {float:none;}*/
	/*#navGlobal li a:hover {
	  color:#fff;
	  background:url('img/navGlobalSprite.png') no-repeat right -100px;
	  }*/
	#navGlobal li.CMSListMenuHighlightedLI {
	  background-image:url('img/navGlobalSprite.png');
	  background-position: 0 -100px;
	  }
	#navGlobal li.CMSListMenuHighlightedLI a {
	  background-image:url('img/navGlobalSprite.png');
	  background-position: right -100px;
	  color:#fff;
	  /*padding-bottom:12px;*/
	  }




#breadcrumb {float: left; font-size: 1.1em; padding-bottom: 12px; line-height: 1.6;}
#breadcrumb li {display: inline;}
#breadcrumb li a, 
#breadcrumb li a:link, 
#breadcrumb li a:active, 
#breadcrumb li a:visited {padding: 0 16px 0 4px; background: url('img/navLocalBullet.png') right center no-repeat;}
#breadcrumb li span {padding-left: 4px;}

#navLocal {
	background:#fff;
	float:left;
	border:1px solid #f0eeee;
	padding:0 8px;
	margin-right: 16px;
	width:172px;
	font-size: 1.2em;
	}
#navLocal li {border-bottom:1px dotted #e8e8e8;}
#navLocal li a {
	text-decoration:none;
	padding: 6px 0; 
	display: block;
	line-height: 1.6;
	}
#navLocal li a:hover {text-decoration:underline;}
			
#navLocal li li {border-bottom:none;}
#navLocal li li a {
    background:transparent url('img/navLocalBullet.png') no-repeat 6px 12px;
    padding: 4px 0 4px 16px;
    /*font-size:.9em;*/
    }

/* selected/current tab */
#navLocal li a.CMSListMenuLinkHighlighted,
#navLocal li a.CMSListMenuLinkHighlighted:link, 
#navLocal li a.CMSListMenuLinkHighlightedLI:active, 
#navLocal li a.CMSListMenuLinkHighlighted:visited {color:#16a0d2;}

#navLocal li.last {border-bottom:none;}



/* MAIN CONTENT
------------------------------------------------
*/

#contentPrimary {
	padding: 12px;
	float: left;
	/*margin-right: 16px;*/
	background:#fff;
	border:1px solid #f0eeee;
	font-size: 1.2em;
	line-height: 1.6;
	}

#contentPrimary.contentPage {width: 471px;}
#contentPrimary.sectionPage {width:683px;}

#contentPrimary ul, #contentPrimary ol {margin: 0 0 8px 20px;}

#contentPrimary li {margin-bottom: 4px;}

#contentPrimary ul li {list-style: disc outside;}

#contentPrimary ol li {list-style: decimal outside;}

#contentSecondary {}

#sectionPrimary		{padding: 16px 16px 0 16px; width: 707px; float: left;}
#sectionSecondary	{width: 205px; float: right; padding: 16px 16px 0 0;}
 

/* HOMEPAGE 
------------------------------------------------
*/
.home h1 {text-indent: -9999em; position: absolute;}

#wrapMessageDeck {background: #0086A9 url('img/blueBG.png') repeat-x 0 -222px; float: left; width: 928px; padding: 0px 16px 16px;}

#messageDeck {color: #fff; float: left; width: 707px; line-height: 1.6; font-size: 1.2em; margin-right: 16px;}
#messageDeck img, 
#messageDeck object, #messageDeck embed  {border: 4px solid #128ba9; float: left; margin: 0 16px 0px 0px; width: 320px; height: 240px;}
#messageDeck h2 {color: #fff; margin-bottom: 0;}
#messageDeck h3 {color:#fff; font-family:Verdana, Arial; margin-bottom:16px;}

.contentPromotional h2 {text-indent: -9999em; float: left;}
.contentPromotional {
	float: right;
	/*margin-bottom:18px;*/
	width: 205px;
    }

.contentPromotional li {
	float:left;
	margin-bottom:2px;
    }
.contentPromotional li a {
	display:block;
	text-indent:-9999em;
	width:204px;
	height:61px;
	background: url('img/callToActionSprite.png') no-repeat left top;
	}
	.contentPromotional li.last {padding-bottom:0;}

	/* content/section page */
	.contentPromotional li.donate a				{background-position : left -568px ;}
	.contentPromotional li.purchase a 			{background-position : left -852px ;}
	.contentPromotional li.volunteer a 			{background-position : left -994px ;}
	.contentPromotional li.fundraise a			{background-position : left -710px ;}
	
	.contentPromotional li.donate a:hover		{background-position : left -639px ;}
	.contentPromotional li.purchase a:hover		{background-position : left -923px ;}
	.contentPromotional li.volunteer a:hover	{background-position : left bottom ;}
	.contentPromotional li.fundraise a:hover	{background-position : left -781px ;}
	
	/* homepage */
	#wrapMessageDeck .contentPromotional li.donate a			{background-position : left top; }
	#wrapMessageDeck .contentPromotional li.purchase a 			{background-position : left -284px;}
	#wrapMessageDeck .contentPromotional li.volunteer a 		{background-position : left -426px;}
	#wrapMessageDeck .contentPromotional li.fundraise a			{background-position : left -142px ;}
	
	#wrapMessageDeck .contentPromotional li.donate a:hover		{background-position : left -71px;}
	#wrapMessageDeck .contentPromotional li.purchase a:hover	{background-position : left -355px;}
	#wrapMessageDeck .contentPromotional li.volunteer a:hover	{background-position : left -497px;}
	#wrapMessageDeck .contentPromotional li.fundraise a:hover	{background-position : left -213px;}
				

.contentPromotional .advertBlock {
	background-image: url('img/advertBlockSprite.png'); 
	background-repeat: no-repeat; 
	margin: 16px 0; 
	display: block; 
	width: 200px; 
	height: 140px; 
	position: relative;
	}
.contentPromotional .advertBlock span {text-indent: -9999em; display: block;}
.contentPromotional .advertBlock a	{position: absolute; bottom: 8px; right: 31px; line-height: 1.6;}
	.contentPromotional .advertBlock.cafe			{background-position: left bottom;}		/* $10 */
	.contentPromotional .advertBlock.thermometer	{background-position: left -300px;}		/* $15 */ 
	.contentPromotional .advertBlock.phoneTopUp		{background-position: left -150px;}		/* $20 */ 
	.contentPromotional .advertBlock.petrol			{background-position: left bottom;}		/* $30 */ 
	.contentPromotional .advertBlock.ambulance		{background-position: left -1050px;}	/* $50 */ 
	.contentPromotional .advertBlock.groceryTopUp	{background-position: left -1050px;}	/* $100 */ 
	.contentPromotional .advertBlock.education		{background-position: left -600px;}		/* $160 */ 
	.contentPromotional .advertBlock.counselling	{background-position: left -1050px;}	/* $200 */ 	
	.contentPromotional .advertBlock.beads			{background-position: left -450px;}		/* $300 */ 	
	

.wrapSectionContent {border: 1px solid #ddd; margin: 0 0 16px 0px;}
	#sectionSecondary .wrapSectionContent {clear: both;}
	.section100 {
		font-size: 1.1em;
		line-height: 1.4;
	}
	.section50 {
		/*width: 334px; */ width: 338px;
		margin-right: 8px; 
		float: left;
		font-size: 1.1em;
		line-height: 1.4;
		}
		.section50.last {margin-right: 0; float: right;}
		
		
		

	.wrapItem {float: left; padding-top: 24px; width: 100%;}	
		.item {padding-bottom: 16px; float: left; font-size: 0.9em;}
			.home .item {width: 313px; font-size: 1em;}
			    .home .item small {font-size: 0.9em;}
		.item img {width: 148px; height: 98px; border: 1px solid #e5e5e5; float: left; margin: 0 8px 8px 0;}
		.item small, .contentPage small {display: block; padding-bottom: 8px;}
		
		.contentPage .item {width:457px;}
		
		
		
		
		

.home .sectionContent, .contentFeatured {border: 2px solid #fff;padding: 12px;}
.home .sectionContent 	{background: #fff url('img/contentPrimaryBG.png') left top repeat-x;}

.home .section100 p.introText {font-size: 1.1em;}

.home .section100 li {
	/*width: 155px; */ width: 159px;
	float: left; 
	background: url('img/homeSprite.png') no-repeat; 
	padding-top: 129px; 
	margin-right: 10px; 
	/*height: 141px;*/ height:132px; 
	position: relative;
	}
	.home .section100 li.who 	{background-position: -486px 0;}
	.home .section100 li.what	{background-position: 0px 0px;}
	.home .section100 li.where	{background-position: -324px 0; }
	.home .section100 li.how 	{background-position: -164px 0; }
	.home .section100 li.last   {margin-right: 0;}
	    .home .section100 li.who h3,
	    .home .section100 li.what h3,
	    .home .section100 li.where h3,
	    .home .section100 li.how h3     {text-indent:-9999em; position:absolute; overflow:hidden;}
	    .home .section100 li.who p,
	    .home .section100 li.what p,
	    .home .section100 li.where p,
	    .home .section100 li.how p     {padding-top:32px;}

/*.home .section100 h3 	{background-color: #00aedb; color: #fff; text-align: center; margin-bottom: 8px; height: 40px;}*/
.home .section100 a 	{position: absolute; bottom: 0;}
	
.contentFeatured 	{background: #fff url('img/contentFeaturedBG.png') left top repeat-x; font-size: 1.1em; line-height: 1.4;}
.contentFeatured img {width:173px; padding-bottom: 8px;}
.contentFeatured small {display: block; padding: 8px 0;}
.contentFeatured li {line-height: 2.1;}


/* SECTION PAGE
------------------------------------------------
*/
.sectionPage img.introImage {float: right; border: 2px solid #e5e5e5; width:205px; height:145px; margin: 0 0 8px 8px;}

.sectionPage .item {float: left; width: 47%; margin-right: 2%;}
.sectionPage .item img {border: 1px solid #dcf5fb; float: left; width: 100px; height: 80px; margin: 0 8px 8px 0;}


/* CONTENT PAGE
------------------------------------------------
*/
.contentPage img.introImage {float:left; height:145px; width:205px; margin:0 8px 8px 0;}

.helpChild {color:#889b09; padding-top: 16px; float: left; width: 250px; position: relative;}
    a.donateNowSmall {
        background:transparent url('img/btnDonateNowSmall.png') no-repeat scroll 0 0;
        text-indent:-9999em;
        width:88px;
        height:26px;
        margin-top: -6px;
        margin-left: 4px;
        position: absolute;
        }
    a.donateNowSmall:hover {background:transparent url('img/btnDonateNowSmall.png') no-repeat 0 -26px;}

/* NEWS PAGE
------------------------------------------------
*/
.item p {padding-top:5px;}

/* EVENTS PAGE
------------------------------------------------
*/



/* SIDEBAR
------------------------------------------------
*/


	/* ---------- LISTS -----------------------*/
	
		/* ---------- FORMS -----------------------*/


fieldset {border: none; border-top: 1px solid #ccc; margin-bottom: 16px; padding-left: 4px;}
	fieldset.hide {border: none;}

legend {
	color: #00aedb; 
	font-size: 1.2em; 
	font-weight: bold;
	/*margin-left: 16px;*/
	}
	fieldset.hide legend {display: none;}

fieldset em {color: #990000;}

#contentPrimary fieldset ol {margin: 0; padding: 0; margin-top: 8px;}
#contentPrimary fieldset li {list-style: none; display: block; padding: 4px 0; position: relative;}
#contentPrimary fieldset li.msgError {padding: 8px;}
#contentPrimary fieldset.likeToGive div.msgError li{padding-left: 8px;}
#contentPrimary fieldset label {display: block;}
#contentPrimary fieldset label.checkright {position: absolute; left: 32px; width: 440px;}
	#contentPrimary fieldset label span {font-size: 0.8em;}

/*#contentPrimary fieldset.likeToGive ol {float: left; width: 55%;}*/
#contentPrimary fieldset.likeToGive label {display: inline; margin-right: 8px;}
#contentPrimary fieldset.likeToGive label, 
#contentPrimary fieldset.likeToGive input  {font-size: 1.4em; font-weight: bold;}
#contentPrimary fieldset.likeToGive .donationType li  {float:left;}
#contentPrimary fieldset.likeToGive .donationType li.errorinfo  {float:none;}
#contentPrimary fieldset.likeToGive .donationType li label,
#contentPrimary fieldset.likeToGive .donationType li input {font-size: 1em; font-weight: normal;}
#contentPrimary fieldset.likeToGive div {overflow:auto;}


#contentPrimary fieldset.prizeDraw li.viewTerms {margin: 16px 0 0 32px;}


fieldset input.xshort, input.xshort					{width: 60px;}
fieldset input.short, fieldset textarea.short, 
fieldset li.short input								{width: 150px;}
fieldset input.medium, fieldset textarea.medium, fieldset select.medium {width: 300px;}
fieldset input.long, fieldset textarea.long, 
fieldset li.long textarea							{width: 420px; font-family:"MS Shell Dlg", Arial, Verdana; font-size:1.1em;} /* needed specfic font size so its not courier */

fieldset small	{font-size: 0.9em; color: #666;}
	.sideNote {float: right; width: 44%}

#contentPrimary fieldset dt, #contentPrimary fieldset dd {padding: 0px 8px; }

dl.price {line-height:1.2;}
.price dd {font-size:1.8em;}

.radio input {float: left;}



.actionArea {padding: 16px 8px;}
	.actionArea input {margin-right: 8px; font-size: 1.2em; padding: 4px 8px;}
.actionRight {float: right;}

.msgBox {padding: 8px; padding: 8px 16px; margin-bottom: 8px; display: block;}
.msgBox h3 {background-image: url('img/iconMsg.png'); background-repeat: no-repeat; padding-left: 40px;}

.msgError								{background-color: #FFBABA; border-color: #D8000C;}
.msgError h3							{background-position: 0 -100px;}
.ErrorLabel								{background: #FFBABA url('img/iconMsg.png') 16px -92px no-repeat;  padding: 8px 16px; padding-left: 56px; color: #333 !important; margin-bottom: 16px;}
.EditingFormErrorLabel					{background: #FFBABA; padding: 4px; color: #990000 !important;}

.msgSuccess		{background-color: #DFF2BF; border-color:#4F8A10;}
.msgSuccess h3	{background-position: 0 0px;}

.msgInfo	{background-color: #BDE5F8; border-color:#00529B;}
.msgInfo h3	{background-position: 0 -200px;}

.msgError em, .msgSuccess em, .msgInfo em {display: block;}


    
/* ---------- SHOPPING BASKET -----------------------*/
#contentPrimary .checkoutSteps {font-size: 0.9em; padding: 8px 4px; margin-bottom: 16px; background-color: #f1fafd;}
#contentPrimary .checkoutSteps ol {margin: 0; padding: 0;}
#contentPrimary .checkoutSteps li {
	display: inline; 
	margin-right: 8px; 
	background-image: url('img/shoppingCartSprite.png'); 
	background-repeat: no-repeat;
	padding: 2px 0 0 18px;
	color: #00AEDB;
	font-family: Arial, Helvetica, Sans-Serif;
	}
	#contentPrimary .checkoutSteps li.basket		{background-position : left top;}
	#contentPrimary .checkoutSteps li.details		{background-position : left -36px;}
	#contentPrimary .checkoutSteps li.payment		{background-position : left -72px ;}
	#contentPrimary .checkoutSteps li.confirmation	{background-position : left bottom ; margin-right: 0;}
	
	#contentPrimary .checkoutSteps li#selected {font-weight: bold; font-size: 1.1em;}

table.shoppingBasket, table.subtotal {width: 100%; border-collapse: collapse;}
table.shoppingBasket th, table.subtotal th {font-weight: bold; padding-right: 5%;}
table.shoppingBasket td, table.subtotal td {border-bottom: 1px solid #dedede; padding: 8px 0px; padding-right: 5%;}

	th.productName, td.productName {width: 25%;}
	th.productCost, td.productCost {width: 15%}
	th.productQuantity, td.productQuantity {width: 15%;}
	th.productTotal, td.productTotal {width: 15%; text-align: right;}
	th.productRemove, td.productRemove {width: 10%; padding-right: 0; text-align: center;}

table.subtotal td {background: #ededed;}
table.subtotal td.productQuantity {font-weight: bold;}
table.subtotal input {font-size: 0.9em; width: 45px;}
	
/* FOOTER 
------------------------------------------------
*/
#footer	{
	background: transparent url('img/footerFlourish.png') left top no-repeat; 
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.2;
	padding-top: 52px;
	    /*addded by Karl to get child (footerTertiary) to float correctly in both IE & FF*/ 
	    float:left;
	    width:100%;
	    /* end */
	}
#footer a {color: #fff;}

#footerPrimary, #footerSecondary {padding-top: 16px;}

#footerPrimary 		{float: left; padding-left: 16px;}

#footerPrimary li {display: inline; margin-right: 8px;}

#footerSecondary 	{float: right; padding-right: 16px; text-align: right;}
	#registrationNo {display: block;}
	a#member {
		background: url('img/logoMember.png') right top no-repeat; 
		padding: 4px 48px 8px 0;
		display: block;
		width: 224px;
		text-decoration: none;
		}

#footerPrimary ul, span#registrationNo {font-size: 1.2em; padding-bottom: 8px;}
#copyright, #member {font-size: 1.1em;}

#footerTertiary {font-size:1.1em; line-height:1; float: left; padding: 16px 0 0 10px;}
#footerTertiary p {float:left;}
ul#sponsorship {float:left;}
    #sponsorship span {padding: 0 0 5px; display:block; text-align: center;}
    #sponsorship li {float:left; padding:0 5px;}
    #sponsorship .last {border-right:none; padding-right:0;}

/* ACCESSIBILITY
------------------------------------------------
*/

#accessibility {text-indent:-9999em; float: left;}

#print {display: none;}