body,td,th {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;}
	
body {
	background-color: #F0F0F0;
	background: url(bg_main.gif) repeat-y;
	margin: 0;}

/* ********************************
	global site styles
******************************** */
a:link, a:visited, a:active {
	color: #660033;
	text-decoration: none;}
	
a:hover {
	color: #993366;
	text-decoration: none;}
	
hr {
	margin: 5px 0px 5px 0px;
	color: #660033;
	border: 0;
	border-top: 1px solid #660033;
	height: 1px;}
	
form {
	margin: 0;}

/* ********************************
	content wrapper - positions whole content
******************************** */
#wrapper {
	background: url(top_edge_home.gif) no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	width: 750px;
	padding: 0;
	margin: 0;
	z-index: 1;}

/* ********************************
	top banner panel (includes main nav)
******************************** */
#banner {
	height: 97px;
	padding: 0;
	margin: 0;
	width: 750px;}

a#logo {
	display: block;
	background: url(../../images/logo_grunge.gif);
	width: 211px;
	height: 93px;
	position: relative;
	float: left;
	z-index: 7;}
#logo span {display: none;}

/***********************************
 suckerfish dropdowns 
************************************/
#mainnav {
	position: relative;
	float: right;
	left: -17px;
	margin-top: 67px;
	z-index: 5;}

#mainnav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;}

#mainnav li { /* all list items */
	float: left;
	position: relative;
	width: 10em;}

#mainnav ul li ul { /* second-level lists */
	display: none;
	position: absolute;
	top: 1em;
	left: 0;
	padding: 0 0 2px 10px;
	background: url(../../images/bg_mainnav.jpg);
	border-right: 1px solid #E0E0E0;
	border-bottom: 1px solid #E0E0E0;
	border-left: 1px solid #F7F7F7;}
	
#mainnav ul li.How ul { /* right-side dropdown list needs slightly differing bg image */
	background: url(../../images/bg_mainnav2.jpg);}
	
#mainnav ul li ul li ul#nav { /* hide third-level and beyond lists, which I can't work out how to do via Website Baker */
	display: none;}

#mainnav ul li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
	top: auto;
	left: auto;}

#mainnav ul li:hover ul, #mainnav ul li.over ul { /* lists nested under hovered list items */
	display: block;
	top: 28px;}

/*** needed to hide all but the selected main nav items within the CMS ***/
#mainnav ul li { 
	width: 0;
	height: 0;}
#mainnav ul li ul li { 
	width: auto;
	height: auto;}
	
#mainnav ul li span {
	display: none;}
#mainnav ul li ul li span {
	display: inline;}
	
/*** top level nav images and other styles ***/
#mainnav ul li {
	}
#mainnav ul li.Who {
	background: url(../../images/nav_whoweare.gif) no-repeat 11px 0;
	width: 106px;
	height: 30px;}
#mainnav ul li.What {
	background: url(../../images/nav_whatwedo.gif) no-repeat 11px 0;
	width: 107px;
	height: 30px;}
#mainnav ul li.Where {
	background: url(../../images/nav_wherewework.gif) no-repeat 11px 0;
	width: 133px;
	height: 30px;}
#mainnav ul li.How {
	background: url(../../images/nav_howyoucanhelp.gif) no-repeat 11px 0;
	width: 153px;
	height: 30px;}
/*** need to cancel out flow of top level styles to lower level list items ***/
#mainnav ul li ul li.Who, #mainnav ul li ul li.What, #mainnav ul li ul li.Where, #mainnav ul li ul li.How {
	background: none;
	width: auto;
	height: auto;}
	
#mainnav ul li ul li a {
	display: block;
	background: url(../../images/tobeadded.gif); /* for some bizarre reason, IE needs a bg image or color to display as a block */
	width: 10em; /* another bizarre style that's required ONLY for IE */
	text-decoration: none;
	color: #FF9900;
	font-family: arial;
	font-size: 11px;
	font-weight: bold;
	line-height: 100%;
	padding: 4px 10px 4px 0;}
#mainnav ul li ul li a:hover {
	color: #006699;}
	
/* ********************************
 homepage styles
******************************** */

ul#homefeatured {
	clear: both;
	padding-left: 50px;
    margin-left: 50px;
	margin: 0;
	list-style: none;}

ul#homefeatured li {
	display: inline;
	position: relative;
	float: left;
    margin-left:50px; 
	width: 200px;
	height: 175px;}

ul#homefeatured li a {
	display: block;
	width: 200px;
    padding-top: 154px;
	padding-bottom: 5px;
	color: #006699;
	font-size: 11px;
	font-weight: bold;
	font-variant: small-caps;
	text-decoration: none;
	text-indent: 16px}

ul#homefeatured li a:hover {
	color: #FF9900;}

ul#homefeatured li a span {
	display: none;}

ul#homefeatured li.homepanel1 {
    background: url(../../images/home_prevention_programmes.jpg) no-repeat 0 0;
    margin-left: 5px;}
ul#homefeatured li.homepanel2 {
    background: url(../../images/home_rehabilitation_programmes.jpg) no-repeat 0 0;
    margin-left: 5px;}
ul#homefeatured li.homepanel3 {
    background: url(../../images/home_child_sponsorship.jpg) no-repeat 0 0;
    margin-left: 5px;}
    
ul#homefeatured li.xmasappeal {
    background: url(../../images/home_xmasappeal.gif) no-repeat 0 0;
    margin-left: 5px;}

ul#homefeatured li.giftshop {
    background: url(../../images/home_giftshop.gif) no-repeat 0 0;
    margin-left: 5px;}
       
ul#homefeatured li.homekenya {
	background: url(../../images/home_kenya.jpg) no-repeat 0 0;
	margin-left: 5px;}
ul#homefeatured li.homekenya2 {
	background: url(../../images/home_kenya2.jpg) no-repeat 0 0;
	margin-left: 5px;}
ul#homefeatured li.homekenya3 {
	background: url(../../images/home_kenya3.jpg) no-repeat 0 0;
	margin-left: 5px;}
	
ul#homefeatured li.homeuganda {
	background: url(../../images/home_uganda.jpg) no-repeat 0 0;
	margin-left: 5px;}
ul#homefeatured li.homeuganda2 {
	background: url(../../images/home_uganda2.jpg) no-repeat 0 0;
	margin-left: 5px;}
	
ul#homefeatured li.hometanzania {
	background: url(../../images/home_tanzania.jpg) no-repeat 0 0;
	margin-left: 5px;}
ul#homefeatured li.hometanzania2 {
	background: url(../../images/home_tanzania2.jpg) no-repeat 0 0;
	margin-left: 5px;}
ul#homefeatured li.hometanzania3 {
	background: url(../../images/home_tanzania3.jpg) no-repeat 0 0;
	margin-left: 5px;}

/***********************************
 columns & footer
************************************/
#rightcolumn {
	position: relative;
	float: right;
	clear: right;
	left: -30px;
	width: 480px;
	margin-top: 34px;
	line-height: 130%;}
	
#leftcolumn {
	position: relative;
	float: left;
	clear: left;
	width: 195px;
	margin-top: 32px;
	left: 20px; /* have to use 'left' rather than 'margin-left' due to some IE bug that adds space to margins */
	z-index: 2;}

#footer {
	clear: both;
	margin: 0 0 0 0;
	padding: 20px 0 20px 0;
	text-align: center;}

#footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;}

#footer ul li {
	display: inline;
	position: relative;
	float: left;
	left: 110px;}

#footer ul li a {
	display: block;
	margin: 0 15px 0 15px;
	height: 26px;}

#footer ul li a span {
	display: none;}

#footer ul li a.contact {
	background: url(../../images/footer_contact.gif) no-repeat 0 0;
	width: 55px;}	
#footer ul li a.contact:hover {
	background: url(../../images/footer_contact.gif) no-repeat 0 -26px;}
	
#footer ul li a.privacy {
	background: url(../../images/footer_privacy.gif) no-repeat 0 0;
	width: 137px;}
#footer ul li a.privacy:hover {
	background: url(../../images/footer_privacy.gif) no-repeat 0 -26px;}
	
#footer ul li a.map {
	background: url(../../images/footer_map.gif) no-repeat 0 0;
	width: 66px;}
#footer ul li a.map:hover {
	background: url(../../images/footer_map.gif) no-repeat 0 -26px;}
	
#footer ul li a.terms {
	background: url(../../images/footer_terms.gif) no-repeat 0 0;
	width: 143px;}
#footer ul li a.terms:hover {
	background: url(../../images/footer_terms.gif) no-repeat 0 -26px;}

#footer #copyright {
	clear: both;
	margin-top: 40px;
	font-size: 10px;}

/***********************************
 leftcolumn styles 
************************************/
#leftcolumn ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
}

/* ********************************
	homepage right column content
******************************** */

#contenttop {
	display: none;}
#contentbase {
	display: none;}
#contentbg {
	padding:  0 20px 0 20px;
	margin: 0;}

p.homeintro span {
	display: none;}

p.homeintro {
	text-indent: 228px;
	background: url(../../images/homeintro_afcic.gif) no-repeat 0 0;
	padding-top: 2px;}
	
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
	font-size: 14px;
	font-weight: bold;
	color: #FF9900;
	margin-top: 0;}
	
#content a {
	color: #006699;
	text-decoration: none;
	border-bottom: 1px dotted #006699;}	
#content a:hover {
	color: #FF9900;
	border-bottom: 1px dotted #FF9900;}
	
#content img.dynamictitles { /* need to cancel out or add styles for special image types */
	display: none;}
	
#content h1.pagetitle { /* hide h1 text and just display dynamic image title */
	display: none;}
	
#content p { 
	margin-top: 0; /* for some reason need to do this to avoid margin at top of content */
	margin-bottom: 10px;} /* IE needs this to minimise gap between paragraph elements */
	
#content ul {
	position: relative;
	clear: both;
	margin: -10px 0 10px 34px;
	padding: 0;
	border: none;}
	
/* need to cancel out style for image links*/
#content a.imagelink, #content a.imagelink:hover {
	border-bottom: 0px;}
	
#content img {
	position: relative;
	float: right;
	clear: right;
	padding: 5px;
	margin: 3px 0 0 5px;
	border: 1px dashed #FF9A00;
	/* width: 170px; */}

/* need to cancel out or add styles for special image types  */
#content img.panelimage { 
	width: 440px; position: relative; float: none; padding: 0; margin: 0; border: 0;}
	
/* ********************************
	homepage news panel
******************************** */

#newstop {
	height: 66px;
	background: url(../../images/paper_top.gif) no-repeat 0 -7px;
	margin: -5px 0 0 0;}
#newsbase {
	height: 45px;
	background: url(../../images/paper_base.gif) no-repeat 0 0;
	clear: right;
	margin: 0;}

#newsbody {
	padding: 10px 20px 0 20px;
	margin: 0;
	background: url(../../images/paper_body.jpg);
	color: #000000;
	font-size: 11px;}

#newsbody a {
	color: #FF9900;
	text-decoration: none;}

#newsbody a:hover {
	text-decoration: underline;}
	
#newstop h3.newstitle {
	margin-top: 0px;
	position: relative;
	float: left;
	top: 50px;
	left: 20px;
	background: url(../../images/title_latestnews.gif) no-repeat;
	width: 95px;
	height: 17px;}
#newstop h3.newstitle span {
	display: none;}
	
#newstop .signup {
	position: relative;
	float: left;
	top: 50px;
	left: 50px;}
#newstop .signup img {
	border: 0px;}

#newsbody #pagination {
	display: none;}

#newsbody #morenews {
	position: relative;
	float: right;
	top: -12px;
	margin: 0 0 -20px 0;}
	
/***********************************
 leftcolumn second-level menu 
************************************/
#leftcolumn ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;}

#leftcolumn ul li {
	border-bottom: 1px solid #FF9A00;
	padding: 1px 0 2px 0;}
	
#leftcolumn ul a {
	display: block;
	text-decoration: none;
	text-transform: lowercase;
	color: #FF9A00;}
	
#leftcolumn ul a:hover {
	color: #00659C;}
	
#leftcolumn ul li#menu_current {
	font-weight: bold;}
	
#leftcolumn ul li ul#nav { /* hide third-level and beyond lists, which I can't work out how to do via Website Baker */
	display: none;}
	
/* ********************************
	left column featured panels
******************************** */

ul#leftlinks1 li, #leftlinks1 ul li, ul#leftlinks2 li, #leftlinks2 ul li {
	margin: 0;
	padding: 0;
	border: 0;}

ul#leftlinks1, #leftlinks1 ul, ul#leftlinks2, #leftlinks2 ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;}

ul#leftlinks1 li a, ul#leftlinks2 li a {
	display: block;
	padding: 0;
	border: 0;
	text-decoration: none;
	width: 100%;
	height: 15px;}

ul#leftlinks1 li span, ul#leftlinks2 li span {
	display: none;}

ul#leftlinks1 li.dosome {
	background: url(../../images/left_dosomething.gif) no-repeat 3px 0;
	padding-top: 26px;
	width: 100%;}

ul#leftlinks2 li.readsome {
	background: url(../../images/left_readsomething.gif) no-repeat 3px 0;
	padding-top: 26px;
	margin-top: 20px;
	width: 100%;}

ul#leftlinks1 li ul li a, ul#leftlinks2 li ul li a {
	padding: 40px 0 2px 0;
	margin-top: 5px;
	font-size: 11px;
	color: #006699;
	font-weight: bold;
	font-variant: small-caps;
	text-indent: 10px;
	text-align: left;}

ul#leftlinks1 a:hover, ul#leftlinks2 a:hover {
	color: #FF9900;}
	
ul#leftlinks1 a.leftkili {
	background: url(../../images/left_kili.gif) no-repeat 0 0;}

ul#leftlinks1 a.leftjump {
	background: url(../../images/left_jump.gif) no-repeat 0 0;}
ul#leftlinks1 a.leftraft {
	background: url(../../images/left_raft.gif) no-repeat 0 0;}
ul#leftlinks1 a.leftclimb{
	background: url(../../images/left_climb.gif) no-repeat 0 0;}
ul#leftlinks1 a.leftshop {
	background: url(../../images/left_shop_affinitymall.gif) no-repeat 0 0;}
ul#leftlinks1 a.leftshop2 {
	background: url(../../images/left_shop_woodentoys.gif) no-repeat 0 0;}
ul#leftlinks1 a.leftdonate {
	background: url(../../images/left_donate.gif) no-repeat 0 0;}
ul#leftlinks1 a.leftvolunteer {
	background: url(../../images/left_volunteer.gif) no-repeat 0 0;}
ul#leftlinks1 a.leftsponsor {
    background: url(../../images/left_sponsor.gif) no-repeat 0 0;}
    
ul#leftlinks1 a.leftenews {
	background: url(../../images/left_enews.gif) no-repeat 0 0;}

ul#leftlinks2 a.lefthuman {
	background: url(../../images/left_human.gif) no-repeat 0 0;}
ul#leftlinks2 a.leftchild {
	background: url(../../images/left_child.gif) no-repeat 0 0;}
ul#leftlinks2 a.leftwomen {
	background: url(../../images/left_women.gif) no-repeat 0 0;}

ul#leftlinks2 a.leftnewsletters {
    background: url(../../images/left_newsletters.gif) no-repeat 0 0;}
ul#leftlinks2 a.leftreports {
    background: url(../../images/left_reports.gif) no-repeat 0 0;}
    	
ul#leftlinks2 a.leftplay4hope, ul#countrypanel a.leftplay4hope {
	background: url(../../images/left_play4hope.gif) no-repeat 0 0;}
	
/***********************************
 search function styles
************************************/
.search_box {
	float: left;
	clear: left;
	width: 195px;
	margin: 10px 0 0 0;
	padding: 5px 0 5px 0;
	border-top: 1px dotted #006699;
	border-bottom: 1px dotted #006699;}
.search_string {
	float: left;
	width: 136px;
	height: 16px;
	font-size: 10px;
	vertical-align: middle;
	margin: 0;}
.search_submit {
	width: 50px;
	height: 22px;
	font-size: 10px;
	vertical-align: middle;
	margin: 0;}

/***********************************
 login table
************************************/
.login_table {
	border: 1px solid #D0D0D0;
	margin-top: 20px;
	margin-bottom: 5px;
	text-align: center;
	padding-bottom: 3px;}
.login_table h1 {
	color: #660033;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	margin: 5px 0px 5px 0px;}
.login_table input {
	text-transform: uppercase;
	font-size: 10px;
	margin: 5px 0px 1px 0px;
	width: 100px;}

/* ********************************
	extra absolutely positioned elements
******************************** */

#stamp {
	position: absolute;
	top: -25px;
	left: 600px;
	width: 90px;
	z-index: 5;}
#stamp a {
	display: block;
	background: url(../../images/stamp_donate.gif) no-repeat 0 0;
	width: 90px;
	height: 91px;}
#stamp a span {
	display: none;}
.PHPCOUTPUT { /* hide php counter text */
	display: none;}
    
#tweet { 
    
    width: 494px; 
    height: 436px; 
    background:url(twitter-back.gif) no-repeat;
    padding:70px 20px 0px 140px;
     
}

#tweet img {
    position: absolute;
    left: 250px;
    border: 0px none;
    display: block;
    margin-left: auto;
    margin-right: auto; 
}

#tweet ul { 
    list-style: none; 
    font-size: 14px;    width:300px
}

#tweet li { 
    margin-bottom: 10px;
    padding: 10px;
    color:#000000
    
}