/* 


========================================


Date: 4th June 2009

Author: Katrin Kerber

Written for: www.awaretrust.org

Valid xHTML & CSS

---------------------

Swatch colours:

b7be27	=	text green

bfcd31	=	hover green

666		=	navigation

444		=	para


=======================================


CSS INDEX:



	1. Default/Reset
	
	2. Main Layout
	
	3. Typography
	
	4. Header
	
	5. Main Navigation
	
	6. Sub Navigation
	
	7. Home page
	
	8. 'What we do' and 'Help us' landing pages
	
	9. 'What we do' sub pages
	
	10. 'News' landing page
	
	11. 'Help us' sub pages
	
	12. 'About us' page
	
	13. 'Contact us' page
	
	14. Newsletters sign-up form
	
	15. Footer
	
======================================= */	

	






/* =============         1. DEFAULT/RESET          ===============  */

*
{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-family:Arial, Helvetica, sans-serif;
	line-height:18px;
}











/* =============         2. MAIN LAYOUT         ===============  */

body
{
	background-color:#bfcd31;
	background-image:url(../img/design/bg.jpg);
	background-repeat:repeat-x;
}

/* shadow borders - do not display in IE6 or below, but all other browsers */
html>body .borderLeft
{
	background: url(../img/design/border-left.png) repeat-y;
	width:1010px;
	margin:0 auto;
}

html>body .borderRight
{
	background: url(../img/design/border-right.png) repeat-y right;
	width:1010px;
	margin:0 auto;
}


#content		/* special width for IE6 and below */
{
	margin:0 auto;
	border-collapse:collapse;
	width:970px;
	min-height:1200px;
	background-color:#fff;
}

html>body #content
{
	margin:0 auto;
	border-collapse:collapse;
	width:960px;	
	min-height:1200px;
	background-color:#fff;
}



/* =============         3. TYPOGRAPHY          ===============  */

h1, h2, h3, h4
{
	font-weight:bold;
	color:#000;
}

h1
{
	font-size:40px;
	line-height:40px;
	margin-bottom:15px;
}

h2
{
	font-size:25px;
	margin-top:50px;
	padding-bottom:15px
}

h3
{
	font-size:18px;
	margin-bottom:10px;
}

h4
{
	font-size:14px;
	margin-bottom:10px;
}

p
{
	font-size:12px;
	color:#444;
	margin-bottom:10px;
}

a
{
	color:#b7be27;
}

a:hover
{
	color:#bfcd31;
}
	

#readMore h3
{
	padding:0;
}

#readMore ul  /* = "Find out more" links on right */
{
	margin-top:5px;
}

#readMore li
{
	background:url(../img/design/recent-news-arrow.gif) no-repeat left;
	list-style:none;
	margin:10px 0 10px 0;
}

#readMore li a
{
	font-size:14px;
	padding-left:20px;
}

.caption
{ 
	font-size:11px;
	padding:5px 0;
	color:#b7be27;
}











/* =============         4. HEADER          ===============  */

#logo
{
	height:200px;
	width:470px;
	float:left;
	padding:10px 0 30px 30px;
}

#search		/* only used by IE6 and below */
{	
	float:right;
	padding:20px 30px 0 0;
	width:280px;
}

html>body #search	/* used by all other browsers */
{	
	float:right;
	padding:20px 30px 0 0;
	width:265px;
}

#search a
{	
	clear:both;
	font-size: 8pt; 
	font-family: Arial, sans-serif;
	color:#b7be27;
	float:left;
	padding-right:5px;
}

#search input
{
	padding:4.5px;
	width:140px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	border: 1px solid #ccc;
	float:left;
	margin-right:10px;
}

#search textarea:focus, #search input:focus 
{
	border: 1px solid #666;
}

#search input.submitButton
{
	width: 100px;
	height:25px;
	float:right;
	margin:0;
	padding:0;
	background-color:#b7be27;
	border:none;
	color:#fff;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	letter-spacing:0.5px;
	cursor:pointer;
}

#search input.submitButton:active
{
	background-color:#bfcd31;
}










/* =============         5. MAIN NAVIGATION          ===============  */

#mainNav
{
	padding:0 0 30px 30px;
	border-bottom:1px solid #ccc;
	clear:both;
}

#mainNav li
{
	margin-right:30px;
	float:left;
	list-style:none;
	font-weight:bold;
	font-size:15px;
}

#mainNav li a
{
	position: relative;		/* IE fix to display border-bottom */
	text-decoration:none;
	color:#666;
}

#mainNav li a:hover
{
	color:#333;
	position: relative;
	border-bottom:3px solid #bfcd31;
}

#mainNav #active
{
	color:#000;
	border-bottom:3px solid #b7be27;
}

#mainNav #active a
{
	color:#000;
	position: relative;
	text-decoration:none;
}

#mainNav #active a:hover
{
	color:#000;
	position: relative;
	border-bottom:3px solid #b7be27;
}


#mainNav #donate
{
	margin-left:140px;
	font-family:"Arial Black", Gadget, sans-serif;
	font-size:20px;
}

#mainNav #donate a
{
	color:#b7be27;
	position: relative;
}

#mainNav #donate a:hover
{
	color:#bfcd31;
	position: relative;
	border-bottom:3px solid #bfcd31;
}











/* =============         6. SUB NAVIGATION          ===============  */

#subNav
{
	margin:15px 0 0 30px;
}

#subNav li
{
	float:left;
	margin-right:25px;
	list-style:none;
	font-weight:bold;
	font-size:13px;
}

#subNav li a
{
	text-decoration:none;
	color:#666;
}

#subNav li a:hover
{
	color:#bfcd31;
}

#subNav .active
{
	color:#b7be27;
}











/* =============         7. HOME PAGE          ===============  */

#introPara
{
	width:280px;
	height:250px;
	padding:50px 30px 0 30px;
	float:left;
}

#introPara p
{
	font-size:18px;
	line-height:25px;
}


#introPara #moreLink
{
	margin-top:20px;
	height:25px;
}

#introPara #moreLink a
{
	padding:6px 10px 6px 15px;
	width:131px;
	display:block;
	background: #b7be27 url(../img/design/white-arrow.gif) no-repeat right;
	color:#fff;
	font-weight:bold;
	font-size:15px;
	text-decoration:none;
}

#slideShowContainer
{
	padding:50px 30px 0 0;
	margin-left:-10px;
}


#myGallery
{
	text-align: left;
}

/* for styling of slideshow elements, see jd.gallery.css */

#homeLeft
{
	clear:both;
	width:590px;
	float:left;
	padding:30px 30px;
}

#homeLeft h1
{
	font-size:30px;
	margin-bottom:0;
}

#homeLeft h3 a
{
	color:#000;
	text-decoration:none
}

#homeLeft h3 a:hover
{
	color:#bfcd31;
	text-decoration:underline;
}

#homeLeft .listItem
{
	padding-top:20px;
	clear:left;
}

#homeLeft .listItem .thumb
{
	width:120px;
	height:120px;
	float:left;
	padding:0 8px 4px 0;
}

#homeLeft .listItem .thumb img a
{
	border:0;
}

#homeRight
{
	width:280px;
	float:right;
	padding:40px 30px 0 0;
	margin-left:-10px; /* IE6 fix */
}

#homeRight .rightItem		
{
	width:280px;
	margin-bottom:30px;
	float:right;
}











/* =============         8. 'WHAT WE DO' AND 'HELP US' LANDING PAGES          ===============  */

#landingLeft
{
	clear:both;
	width:590px;
	float:left;
	padding:50px 30px 0 30px;
}

#landingLeft #introLanding p
{
	font-weight:bold;
	font-size:14px;
	line-height:20px;
	width:100%;
}
	
#landingLeft #landingLinks h3
{
	padding-top:30px;
}

#landingLeft #landingLinks h3 a
{
	color:#000;
	text-decoration:none;
	background:url(../img/design/bullet01.gif) no-repeat left;
	padding-left:20px;
}

#landingLeft #landingLinks h3 a:hover
{
	color:#bfcd31;
	text-decoration:underline;
	background:url(../img/design/bullet02.gif) no-repeat left;
}


#landingRight
{
	width:280px;
	float:right;
	padding:50px 30px 0 0;
	margin-left:-10px; /* IE6 fix */
}

#landingRight .rightItem		
{
	width:280px;
	margin-bottom:30px;
	float:right;
}
	
	
	
	
	
	
	
	



/* =============         9. 'WHAT WE DO' SUB PAGES          ===============  */

#objectiveLeft
{
	clear:both;
	width:590px;
	float:left;
	padding:50px 30px 0 30px;
}

#introObjective
{
	float:left;
	width:100%;
	padding:0 0 10px 0;
}

#ojectiveBanner
{
	width:590px;
	height:250px;
	clear:both;
	padding:0 0 15px 0;
}

#introObjective p
{
	font-weight:bold;
	font-size:14px;
	line-height:22px;
}


.objectiveUpdate
{
	clear:both;
	padding-top:30px;
}

.updateImg
{
	float:left;
	padding:0 8px 1px 0;
	width:200px;
	height:140px;
}


#objectiveRight
{
	width:280px;
	float:right;
	padding:50px 30px 0 0;
	margin-left:-10px; /* IE6 fix */
}

#objectiveRight .rightItem		
{
	width:280px;
	float:right;
	margin-bottom:30px;
}











/* =============         10. NEWS          ===============  */

#newsLeft
{
	clear:both;
	width:590px;
	float:left;
	padding:80px 30px 0 30px;
}

#newsLeft .newsItem
{
	padding-top:30px;
	clear:left;
}

#newsLeft .newsItem h3
{
	padding-bottom:7px;
}

#newsLeft .newsItem .newsThumb
{
	width:200px;
	height:140px;
	float:left;
	padding:0 8px 4px 0;
}


#newsRight
{
	width:280px;
	padding:95px 30px 0 0;
	float:right;
	margin-left:-10px;	/* IE6 fix */
}

#newsRight .rightItem		
{
	width:280px;
	float:right;
	margin-bottom:30px;
}

#newsRight #recentNews li
{
	background:url(../img/design/recent-news-arrow.gif) no-repeat;
	list-style:none;
	margin:10px 0 10px 0;
}

#newsRight #recentNews li a
{
	padding-left:20px;
	font-size:14px;
}











/* =============         11. 'HELP US' SUB PAGES          ===============  */

#helpLeft
{
	clear:both;
	width:590px;
	float:left;
	padding:50px 30px 0 30px;
}

#introHelp
{
	float:left;
	width:100%;
	padding:0 0 30px 0;
}

#helpBanner	/*used on volunteer page */
{
	width:590px;
	height:250px;
	clear:both;
	padding:0 0 15px 0;
}

#introHelp p
{
	font-weight:bold;
	font-size:14px;
	line-height:22px;
}

#helpLeft h3
{
	padding-top:30px;
}

#helpLeft li
{
	color:#b7be27;
	margin-left:30px;
}

#helpLeft li span
{
	color:#444;
	font-size:12px;
}

#helpImg
{
	float:left;
	padding:0 8px 1px 0;
	width:200px;
	height:140px;
}

/* Donation area */

#donationForm
{
	width:550px;
	padding:30px 0;
	margin:0;
	font-family: Arial, Helvetica, sans-serif;
}

#donationForm span
{
	font-weight: bold;
	font-size:14px;
	margin-right:20px;
}

#donationForm select
{
	 border:2px solid #b7be27;
	 color: #000;
	 font-size:13px;
}

#donationForm  input 
{
	margin-top:20px;
}


#helpRight
{
	width:280px;
	float:right;
	padding:65px 30px 0 0;
	margin-left:-10px; /* IE6 fix */
}

#helpRight .rightItem		
{
	width:280px;
	float:right;
	padding-bottom:30px;
}

#helpRight #shoppingList li
{
	list-style:none;
	margin:10px 0 10px 0;
	font-weight:bold;
	font-size:12px;
	color:#444;
}

#helpRight #shoppingList span
{
	color:#b7be27;
	font-size:15px;
}











/* =============         12. 'ABOUT US' PAGE         ===============  */

#aboutLeft
{
	clear:both;
	width:590px;
	float:left;
	padding:80px 30px 0 30px;
}

#aboutLeft h3
{
	padding-top:30px;
}

#aboutLeft #introAbout
{
	float:left;
	width:100%;
	padding:0 0 10px 0;
}

#aboutLeft #introAbout p
{
	font-weight:bold;
	font-size:14px;
	line-height:22px;
}

.aboutImg
{
	float:left;
	padding:3px 8px 1px 0;
}


#aboutRight
{
	width:280px;
	float:right;
	padding:95px 30px 0 0;
	margin-left:-10px; /* IE6 fix */
}

#aboutRight .rightItem		
{
	width:280px;
	float:right;
	padding-bottom:30px;
}
	










/* =============         13. 'CONTACT US' PAGE          ===============  */

#contactLeft
{
	clear:both;
	width:590px;
	float:left;
	padding:80px 30px 0 30px;
}

#contactLeft h3
{
	padding-top:30px;
}


/* Email contact form */
#contactArea
{
	width:590px;
	padding-top:10px;
}

label 
{
	float: left;
	padding-right: 15px;
	width: 160px;
	padding-top: 10px;
	font-size: 12px;
	color:#444;
}

#contactArea input, #contactArea textarea 
{
	padding: 5px;
	width: 450px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	border: 1px solid #ccc;
}

#contactArea textarea 
{
	height: 90px;
}

#contactArea textarea:focus, #contactArea input:focus 
{
	border: 1px solid #666;
}

#contactArea input.submit-button 
{
	clear:both;
	width: 100px;
	margin-top:10px;
	background-color:#b7be27;
	border:none;
	color:#fff;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	cursor:pointer;
}

#contactArea input.submit-button:active
{
	background-color:#bfcd31;
}

/* contact thanks page */

#contactLeft h2
{
	margin-top:0;
}

#contactRight
{
	width:280px;
	padding:138px 30px 0 0;
	float:right;
	margin-left:-10px;	/* IE6 fix */
}









/* =============         14. NEWSLETTER SIGNUP FORM          ===============  */

#signupForm
{
	width:280px;
	padding:10px 0;
	margin:0;

}

#signupForm #formTitle
{
	color:#b7be27;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:20px;
	padding-bottom:10px;
	padding-left:0;
	margin-left:0;
}

#signupForm .mc-field-group
{
	clear:both;
	width:280px;
}

#signupForm label 
{
	float: left;
	padding-right: 5px;
	width: 40%;
	padding-top: 10px;
	font-size: 12px;
	color:#444;
}

#signupForm  input, #signupForm  textarea 
{
	margin-top:10px;
	height:17px;
	padding:2px;
	width: 50%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	border: 1px solid #ccc;
}


#signupForm textarea:focus, #signupForm input:focus 
{
	border: 1px solid #666;
}


#signupForm input.subscribe-btn
{
	clear:both;
	width: 100px;
	height:30px;
	margin-top:10px;
	background-color:#b7be27;
	border:none;
	color:#fff;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	cursor:pointer;
}

#signupForm input.subscribe-btn:active
{
	background-color:#bfcd31;
}

#signupForm a
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	margin-left:30px;
	vertical-align:bottom;
}











/* =============         15. FOOTER         ===============  */
	
.clear
{
	clear:both;
	padding-bottom:50px;
	background:#fff;
	
}

#footer
{
	clear:both;
	margin:0 auto;
	width:960px;
	background-color:#fff;
}

#footer ul
{
	border-top:1px solid #ccc;
	padding-left:10px;
}

#footer li
{	
	padding-top:20px;
	float:left;
	list-style:none;
	font-weight:bold;
	font-size:12px;
}

#footer li a
{
	color:#666;
	padding-right:20px;
	padding-left:20px;
	border-right:2px solid #666;
}

#footer li a:hover
{
	color:#333;
}

#footer #legal
{
	margin-left:30px;
	padding: 30px 0;
	clear:both;
	font-size:11px;
	color:#666;
}