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.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;}

/***********************************
 columns & footer
************************************/
#rightcolumn {
	position: relative;
	float: right;
	clear: right;
	left: -30px;
	width: 480px;
	margin-top: 14px;
	line-height: 130%;}
	
#leftcolumn {
	position: relative;
	float: left;
	clear: left;
	width: 195px;
	margin-top: 17px;
	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;
}

/* *********** left column section title image ***********  */
#sectionimage {
	width: 232px;
	height: 58px;
	margin: 8px 0 0 -20px;}
#sectionimage span {
	display: none;}
	
.whoimage {
	background: url(../../images/section_who.jpg) no-repeat 0 0;}
.whatimage {
	background: url(../../images/section_what.jpg) no-repeat 0 0;}
.howimage {
	background: url(../../images/section_how.jpg) no-repeat 0 0;}

/***********************************
 rightcolumn styles 
************************************/
#contenttop {
	height: 73px;
	background: url(../../images/paper_top.gif) no-repeat 0 0;}
#contentbase {
	height: 45px;
	background: url(../../images/paper_base.gif) no-repeat 0 0;
	clear: both;}
#contentbg {
	padding: 0 20px 10px 20px;
	margin: 0;
	background: url(../../images/paper_body.jpg);
	min-height: 360px;
	height:auto;}
/* for Internet Explorer */
/*\*/
* html #contentbg {
	height: 360px;}
/**/
	
#contentbg #content {
	position: relative;
	top: -10px;} /* moving content up to overlap paper top image slightly */
	
#content h1.pagetitle {
	/* display: none; need to show since GD Freetype support not enabled for current web hot */
	font-family: century gothic;
	font-size: 22px;
	font-weight: normal;
	color: #FF9900;}
	
#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;}
	
/* need to cancel out style for image links*/
#content a.imagelink  {
	border-bottom: 0px;}
	
#content img {
	position: relative;
	float: right;
	clear: right;
	padding: 5px;
	margin: 3px 0 0 5px;
	border: 1px dashed #FF9A00;
	/* width: 170px; */}
#content img.nostyle {
	position: relative;
	float: none;
	display: inline;
	padding: 0;
	margin: 0;
	border: 0;}

/* need to cancel out or add styles for special image types  */
#content img.dynamictitles { 
	width: 440px; height: 42px; position: relative; float: none; padding: 0; margin: 0; border: 0;}
#content img.panelimage { 
	width: 440px; position: relative; float: none; padding: 0; margin: 0; border: 0;}
	
#content p { /* for some reason need to do this to avoid margin at top of content */
	margin-top: 0;}
	
#content p.parahighlight {
	padding-left: 16px;
	margin-left: 10px;
	background: url(../../images/para_highlight.gif) repeat-y;}
	
#content ul {
	position: relative;
	clear: left;
	margin: -5px 0 10px 34px;
	padding: 0;
	border: none;}
	
#content ul li {
	margin: 5px 0 0 0;}
	
#content form {
	clear: both;}
	
.footnote {
	font-size: 10px;
	line-height: 11px;
	border-top: 1px solid #c9c9c9;
	padding-top: 2px;}
	
/* *********** right column news styles ***********  */
#content .newscontent .newstitle {
	font-size: 16px;
	font-weight: bold;
	color: #00659C;}

#content .newscontent a {
	color: #FF9A00;
	text-decoration: none;
	border: 0px;}
#content .newscontent a:hover {
	text-decoration: underline;}
	
/* *********** sitemap styles ***********  */
#content #sitemap ul {
	margin: 0 0 0 30px;
	padding: 0;
	border: none;
	list-style-type: none;
	font-weight: bold;}
	
#content #sitemap ul ul {
	margin: 0 0 0 70px;
	padding: 0;
	border: none;
	list-style-image: url(../../images/sitemap_bullet.gif);
	font-weight: normal;}
	
#content #sitemap ul li {
	margin-top: 10px;}
#content #sitemap ul ul li {
	margin-top: 1px;}
	
#content #sitemap ul li a.Who, #content #sitemap ul li a.What, 
#content #sitemap ul li a.Where, #content #sitemap ul li a.How,
#content #sitemap ul ul li a.Kenya, #content #sitemap ul ul li a.Uganda, #content #sitemap ul ul li a.Tanzania,
#content #sitemap ul ul li a.Sierra, #content #sitemap ul ul li a.United {
	cursor: text;
	text-decoration: none;
	border-bottom: 0px;}
#content #sitemap ul li a.Who:hover, #content #sitemap ul li a.What:hover,
#content #sitemap ul li a.Where:hover, #content #sitemap ul li a.How:hover,
#content #sitemap ul ul li a.Kenya:hover, #content #sitemap ul ul li a.Uganda:hover, #content #sitemap ul ul li a.Tanzania:hover,
#content #sitemap ul ul li a.Sierra:hover, #content #sitemap ul ul li a.United:hover {
	text-decoration: none;
	border-bottom: 0px;
	color: #00659C;
	cursor: text;}
	
/*** need to cancel out flow of previous level styles to lower level list items ***/
#content #sitemap ul ul li a.Who, #content #sitemap ul ul li a.What,
#content #sitemap ul ul li a.Where, #content #sitemap ul ul li a.How {
	cursor: pointer;
	border-bottom: 1px;
	border-bottom: 1px dotted #006699;}
#content #sitemap ul ul li a.Who:hover, #content #sitemap ul ul li a.What:hover,
#content #sitemap ul ul li a.Where:hover, #content #sitemap ul ul li a.How:hover {
	color: #FF9900;
	cursor: pointer;
	border-bottom: 1px dotted #FF9900;}
	
/* ************************** contact page ************************** */

p.contactleft {
	position: relative;
	float: left;
	padding: 0;
	margin: -10px 0 0 30px;}
p.contactright {
	position: relative;
	float: right;
	width: 230px;
	margin: -10px 0 0 0;}
.contactclear {
	clear: both;
	height: 10px;}

/***********************************
 leftcolumn second-level menu 
************************************/
#leftcolumn ul {
	list-style: none;
	margin: 0 0 0 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;}
	
/***** country - gallery and news link panels *****/
	
#leftcolumn ul li.News, #leftcolumn ul li.Gallery {
	border-bottom: 0px;}
/* #leftcolumn ul li.News a span, #leftcolumn ul li.Gallery a span {
	display: none;} */
	
#leftcolumn ul li.News a {
	padding: 43px 0 1px 0;
	color: white; /* need to hide link text and show image, but hiding span stuffs up in IE */
	margin: 17px 0 0 0;
	background: url(../../images/left_news.png) no-repeat 0 0;}
#leftcolumn ul li.News a:hover {
	color: white; /* need to hide link text and show image, but hiding span stuffs up in IE */
	background: url(../../images/left_news.png) no-repeat 0 -58px;}
	
#leftcolumn ul li.Gallery a {
	padding: 40px 0 1px 0;
	color: white; /* need to hide link text and show image, but hiding span stuffs up in IE */
	margin: 3px 0 0 0;
	background: url(../../images/left_gallery.png) no-repeat 0 0;}
#leftcolumn ul li.Gallery a:hover {
	color: white; /* need to hide link text and show image, but hiding span stuffs up in IE */
	background: url(../../images/left_gallery.png) no-repeat 0 -55px;}

/***********************************
 left column country images 
************************************/
#countryimage {
	width: 243px;
	height: 171px;
	margin: 7px 0 0 0;
	position: relative;
	left: -14px;}
#countryimage span {
	display: none;}
	
.kenyaimage {
	background: url(../../images/country_kenya.jpg) no-repeat 0 0;}
.ugandaimage {
	background: url(../../images/country_uganda.jpg) no-repeat 0 0;}
.tanzaniaimage {
	background: url(../../images/country_tanzania.jpg) no-repeat 0 0;}
.sierraleoneimage {
	background: url(../../images/country_sierraleone.jpg) no-repeat 0 0;}
.ukimage {
	background: url(../../images/country_uk.jpg) no-repeat 0 0;}
	
/* ********************************
	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;
	margin: 20px 0 0 0;
	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;}

/* ********************************
 photogallery styles
******************************** */

#photogallery {
	text-align: center;}
	
#photogallery h3 {
	text-align: left;}
	
#photogallery ul.list h2 {
	display: block;
	font-size: 10px;
	color: #00659C;
	font-weight: normal;
	line-height: 24px;
	width: 138px;
	margin-top: 0;
	margin-bottom: 0;}

#photogallery ul.list {
	list-style: none;
	display: inline;
	margin: 0px;
	padding: 0px;}
	
#photogallery img {
	border: 0; /* remove general CMS images style from gallery image */
	float: none;}

#photogallery ul.list li a, #photogallery ul.list li a:hover {
	border: 0px;} /* remove general CMS images style from gallery image */
	
#photogallery ul.list li {
	position: relative;
	float: left;
	left: 5px;}

#photogallery ul.list li span {
	height: 138px;
	width: 138px;
	display: block;
	background: white;
	margin-right: 5px;}
	
#photogallery ul.list li span {
	display: table;
	_position: relative;
	overflow: hidden;
	border-width: 1px;
	border-color: #EBEBEB #CECFCE #CECFCE #EBEBEB;
	border-style: solid;}
	
#photogallery ul.list li span a {
	_position: absolute;
	_top: 50%;
	_left: 50%;
	display: table-cell;
	vertical-align: middle;
	margin: 0px auto;
	text-align: center;
	border: 0;}
	
#photogallery ul.list li span a img {
	_position: relative;
	_top: -50%;
	_left: -50%;}
	
ul.list>li span {
	overflow: none;}

#photogallery ul.list li span:hover, #photogallery ul.list li span.hover {
	background: #f7f7f7;}
	
#photogallery #image {
	display: block;
	width: 400px;
	height: 280px;
	background-color: white;
	margin: 0 10px 0 15px;
	padding: 14px 4px 20px 0;
	_position: relative;
	_top: 0;
	_left: 0;
	border-width: 1px;
	border-color: #EBEBEB #CECFCE #CECFCE #EBEBEB;
	border-style: solid;}
	
#photogallery .nav {
	margin-top: 5px;}
	
#photogallery #galleryend {
	clear: both;} /* hack, for some reason Firefox won't extend container DIV full length of gallery */