/* 16th April 2009 ver 4 */


html {margin: 0; padding: 0}

body {background: url(../img/body_bg4.jpg) top center; margin:0; padding:0; background-color: #FAF2EC}




.header {height: 155px; background:url(../img/header_bg2.png) top center no-repeat; margin:0; width: 960px}
* html .header {background-image:none; background-color: white; background-image:url(../img/header_bg_ie6.gif); margin-top:10px; height: 120px} /* ie6 */

#landingMenu { padding: 0 0 0 40px; width: 945px; background: url(../img/header_menu_bg.png) bottom center repeat-y;  z-index:10; height:350px}
#landingMenuBottom {background:url(../img/header_menu_bg_bottom_.png) top center no-repeat;padding: 28px 0 0px 0; /* z-index:10; */ height: 20px}
* html #landingMenuBottom{display:none} /* ie6 */

.container, .header, .home-container {
	margin-left: auto;
	margin-right: auto;
	width: 980px;
	padding: 0px;
}
.container {background: url(../img/container_bg2.png) }
.container {background: url(../img/container_bg.png) center repeat-y; }
* html .container {background-color: white; background-image: none} /* ie6 */


#homeLeft {float: left; width:480px}

#homeRight {float: right; width:470px; margin: 0px 10px 0 0 ; padding:  0 0 10px 5px;  border:1 px solid #a38566 }

#homeRight #countries {border: 1px solid #ccc}

#content {}

/*header grids */

.headerTab
{
	display: inline;
	margin-left: 5px;
	margin-right: 5px;
	width:960;
	padding: 0px 0 0 140px;
	clear: left;

}
* html .headerTab {height: 25px; padding: 20px 0 0 30px} /* ie 6 */


.headerLeft
{
	display: inline;
	margin-left: 5px;
	margin-right: 5px;
	width:575px;
	padding: 0;
	float: left;
	/*border: 1px solid green*/
}

.headerLeft img {
padding-left: 30px}

.headerRight {
	display: inline;
	margin-left: 5px;
	margin-right: 5px;
	width:375px;
	padding: 0;
	float:left
	/*border: 1px solid blue*/
}

.header .flags {margin: 0; padding: 0px 5px 0px 0px; float:right; width: 100px; height: 14px;}
.header .flags img {margin: 0; padding: 0px 5px 0px 0px}


/* landing navigation (ie top of page section links) 

NOT currently used
	
.landingNav a {display: block; width: 221px; float: left; border-bottom: 1px solid #ccc; margin-right: 10px; padding-top:5px; text-decoration: none; font-weight: bold; color: #66779C}	
.landingNav a:hover {color: #ff7c0d; }*/




	

.search {float: right}
#isearch_form {float: right; padding: 0 10px 0 0; margin:0}





/* header drop navigation tabs */

.dropNav {background: white; width: 350px; position:absolute; top:0; left:0; visibility: hidden; border: 4px solid #663300  /*#ff7c0d #663300*/; z-index:1000}
.dropNavNarrow {background: white; width: 225px; position:absolute; top:0; left:0; visibility: hidden; min-height: 15em;border: 4px solid #663300 /*#ff7c0d #663300*/; z-index: 1000}
.dropNavNarrow img {padding:0; margin: 0;}


/* Individual heights for each drop down menu */

#weHelpContent {height: 35em}		/* SPANA in action */
#youHelpContent {height: 27em}		/* You can help */
#bigPictureContent {height: 14em}	/* The Big Picture */
#countriesContent {height: 48em}	/* Countries */

#countriesContent .dropNavNarrow {height: 10em; overflow:scroll}

#aboutContent {height:27em}		/* About us */

#contactContent {height:18em}	/* Contact us */


.topNav {z-index: 1;}
.topNav a {text-decoration: none; width: 380px; color: #663300; font-weight: bold}
.topNav a:hover {color: #ff7c0d}

.topNavLink {width: 300px; border-bottom: 1px solid #ccc; margin:  0px 20px 0px 20px; line-height: 25px}
.topNavLink a {text-decoration: none; width: 380px; color: #663300; font-weight: bold; padding: 12px 5px 12px 15px}
.topNavLink a:hover {color: #ff7c0d}
.more a { text-decoration:underline;}

.dropNavNarrow .topNavLink a {width:190px}
.dropNavNarrow .topNavLink {width:190px}

.topNavPic {margin:0 20px; border-bottom: 1px solid #ccc; height: 97px; padding-top: 7px}
.topNavPic img {float: left; clear: left}

/* footer */

#footer {background:url(../img/footer.png) top right no-repeat; height: 335px; padding: 0; margin:0; }
* html #footer {background-color:#FFFFFF; background-image:none; border-top: 1px #ccc solid}}

#linkWrap {width: 940px; padding: 0}
#footerLeft {width: 440px; float:left}
#footerRight {display: block;  float: right}
#footerLinks{width: 920px;}
#footerDescription {display: block; width: 440px; padding: 0 0 0  36px}
#footerContact {display: block; float: right; width: 440px}
#footerDetails {padding: 20px 0px 20px 36px; font-size: 10px;}

/* noob */

#noob {padding: 23px 0 0 20px; background:url(../img/slider_bg.png) top left no-repeat; height: 395px; float: left; width: 640px}
* html #noob {padding: 23px 0 0 20px; background: white; height: 395px; float: left; width: 640px; border: 1px solid #ccc; z-index: -100}

#noobRight {width:320px; float: right; height: 405px; margin:0; padding:0 }
* html #noobRight {width: 300px; border: 1px solid #ccc; margin:0; padding:0; float: right}
#noobRightFeature { background:url(../img/home_noob_right_top.png); padding:0; margin:0; height: 135px}
* html #noobRightFeature { background-image: none; background-color: white; border: 1px solid #ccc; margin: 5px}

#noobRightIndex {background:url(../img/noob_right_bg.png) top left no-repeat; padding: 20px; height: 235px}
* html #noobRightIndex {background:  white}

/* Home page boxes and styles */

#homeEmail {width: 210px; height: 205px; background-color: white; padding: 15px 10px 10px 15px; float:  left; background:url(../img/home_email.png) no-repeat;}
* html #homeEmail {width: 195px; border:1px solid #ccc; background:  white; } /* ie 6 */

#homeDonate {width: 220px; height: 165px; float: left; padding-left: 5px}
* html #homeDonate {width: 190px; height: 165px; float: right;} /* ie 6*/

#homeCountries {background: url(../img/home_country_bg2.png) top left no-repeat; padding: 10px 10px 10px 10px; display: block}
* html #homeCountries {padding: 0; border: 1px solid #ccc; background:  white}
#endHomeCountries { background: url(../img/home_country_bg_end.png) top left no-repeat;}
* html #endHomeCountries { width: 10px; background: white} /* ie 6 */


#homeCountryBox {padding:  0 0 10px 20px;}
.homeCountry {display:block; width:127px; float:left; border-bottom: 1px solid #ccc; margin-left: 10px; background: none}
.homeCountry a { text-decoration: none; color: #663300; font-weight: bold}
.homeCountry a:hover {color: #ff7c0d}


/* generic grids */




#leftMenu {
	display: block;
	float: left;}
	
*html #leftMenu {margin-top: 8px} /* ie 6*/
	
#leftMenu p img {padding: 15px 0px 5px 17px}

#leftMenu .leftNav
{
	display: block;
	margin:0 0 0 4px;
	width:232px;
	min-height: 10px;
	padding: 20px 0 0 12px;
	float: left;
	clear: both;
	background-color:#CCCC33;
	background: url(../img/leftNav_bg.png) top left no-repeat;
}


* html #leftMenu .leftNav
{background-image: none; background-color:white; border:1px solid  #ccc} /* ie6 */

.leftNavEnd{width:245px; padding-left: 5px; height: 10px; background: url(../img/leftNav_end.png) top right no-repeat; clear:both;}
* html .leftNavEnd{background-image:none}/* ie6 */

/*
.right_3{float: right; background:url(../img/grid_3_sq_bg_right.png) top left no-repeat;}
.left_3 p {padding: 0 10px 0 15px}
.right_3 p {padding: 0 8px 0 0px}*/


#pageLinks { width:626px; border-bottom: 1px solid #ccc; margin-left: 25px; padding: 0 0 10px 55px}
#pageLinks p {font-weight: bold; padding:0 0 10px 0; margin:0}

/*#seeAlso { width:626px; margin-left: 8px; padding: 0 0 10px 125px; background:url(../img/seealso.jpg) no-repeat bottom left}
#seeAlso p {font-weight: bold; padding:0 0 35px 0; margin:0}*/



/* callout right */

#content .calloutRight
{
	display: block;
	float:right;
	width:278px;
	min-height: 180px;
	padding: 0px;
	float: right; 
	padding:0; 
	margin:0 8px 0 0;
}
* html #content .calloutRight {background-image: none; background-color: white} /* ie6 */

#content .calloutRight img {padding: 10px 5px 0 0; margin:0; float: right}
* html .calloutRight img {padding: 0; margin: 0 10px 0 0; border: 4px solid #ccc}/* ie6 */
.calloutRight .caption {padding: 20px 10px 0px 12px;}
* html .calloutRight .caption {padding: 20px 10px 0px 42px;} /* ie6 */


/* calloutright medium */


#content .calloutRightMedium
{
	display: block;
	float:right;
	margin:0;
	width:340px;
	min-height: 180px;
	padding: 0px;
	float: right; padding:0; margin:0; /
}
* html #content .calloutRightMedium {background-image: none; background-color: white} /* ie6 */
.calloutRightMedium img {padding: 10px 10px 0 8px; margin:0; float: right}
* html .calloutRightMedium img {padding: 0; margin:  0 10px 0 0; border: 4px solid #ccc}/* ie6 */
.calloutRightMedium .caption {padding: 20px 10px 0px 12px;}
* html .calloutRightMedium .caption {padding: 20px 10px 0px 40px; margin: 0 0 0 50px;} /* ie 6 */


/* callout right wide */

#content .calloutRightWide
{
	display: inline;
	margin-left: 5px;
	margin-right: 0px;
	width:480px;
	float: right; padding:0; margin:0 0px 0 0;
}
* html #content .calloutRightWide {background-image: none; background-color: white} /* ie6 */
.calloutRightWide img {padding: 10px 10px 0 8px; margin:0; float: right}
* html .calloutRightWide img {padding: 0; margin: 0 10px 0 0; border: 4px solid #ccc}/* ie6 */
.calloutRightWide .caption {margin-left: 0px;}
* html .calloutRightWide.caption {padding: 20px 10px 0px 42px;} /* ie 6 */



/* callOutLEft */

#content .calloutLeft {
float: left; 
padding:0px 0px 0px 0px; 
float: left; 
margin: 0px 5px 0 18px;
width:278px;
}
* html #content .calloutLeft {background-image: none; background-color: white} /* ie6 */

.calloutLeft img {padding:10px 0 0 8px ; margin:0}
* html .calloutLeft img {padding: 0; margin: 0; border: 4px solid #ccc}/* ie6 */

/* calloutLeftWide */

#content .calloutLeftWide {
display: block;
float: left; 
padding:0; 
float: left; 
margin: 0px 5px 0 16px;
width:480px;
}
* html #content .calloutLeftWide {background-image: none; background-color: white} /* ie6 */

.calloutLeftWide img {padding:10px 0 0 8px ; margin:0}
* html .calloutLeftWide img {padding: 0; margin: 0; border: 4px solid #ccc}

/*calloutLeftMedium */

#content .calloutLeftMedium {
display: block;
float: left; 
padding:10px 0px 0px 9px; 
float: left; 
margin: 0px 5px 0 9px;
width:340px;
}
* html #content .calloutLeftMedium {background-image: none; background-color: white;} /* ie6 */

.calloutLeftMedium img {padding:10px 0 0 8px ; margin:0}
* html .calloutLeftMedium img {padding: 0; margin: 0; border: 4px solid #ccc}

/* putting <p> into callouts is possible - controlled here */

#content .calloutRightWide p, #content .calloutRightMedium p, #content .calloutRight p, #content .calloutLeftWide p, #content .calloutLeftMedium p, #content .calloutLeft p {padding: 5px 0 0 10px}
#content .calloutRightWide h4, #content .calloutRightMedium h4, #content .calloutRight h4, #content .calloutLeftWide h4, #content .calloutLeftMedium h4, #content .calloutLeft h4 {padding: 5px 0 0 10px}



.quoteEnd {background: url(../img/grid_bg_end.png) bottom left no-repeat;height: 12px}
* html .quoteEnd{ background-image:none}/* ie6*/
.quoteEndLeft {background: url(../img/grid_bg_end.png) bottom right no-repeat;height: 12px}
* html .quoteEndLeft{ background-image:none}/* ie6*/



.end-right {width:100%; height: 15px; background: url(../img/grid_bg_end.png) bottom left no-repeat}
* html .end-right{ background-image:none}/* ie6*/


.contentMain{
display: block;
	width:723px; float: right; background: url(../img/grid_9_bg.png) top left; margin: 0 5px 10px 0px}
* html .contentMain {width: 700px; background-image: none; background-color:white; border: 1px solid #ccc; margin: 8px 4px 0 0;} /* ie6 */

.contentMainEnd{display: block; width:723px; height: 8px; background: url(../img/leftPage_end.png) top left no-repeat; clear:both; background-color:}
* html .contentMainEnd {display:none} /* ie6 */


/* main content and navitgation 

.quote { display: block; width: 300px; float: right; background-color:red; margin:0 8px 0 0; padding:10px 10px 10px 10px}
.quoteFooter {display: block; width: 300px; float: right; height: 15px; background: url(../img/grid_bg_end.png) bottom right no-repeat}
*/

.emailText {}
.emalText input {float:left}




/* generic grid bg images */

img {padding: 0 5px 5px 5px}

/* tables */

table {border-collapse: collapse; width: ; clear:both; border: 1px solid #ccc;margin: 0 20px 0 25px; border-bottom: 4px solid #ccc; padding-bottom:15px}

th, td {padding: 5px 10px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; font-size: 12px}

th {color: #66779C}

caption {font-weight: bold; text-align: left; padding: 0 0 5px 5px; font-size: 14px}

.left_3 table {border-collapse: collapse; width: ; clear:both; border: 1px solid #ccc;margin: 0 20px 0 25px; border-bottom: 4px solid #ccc; padding-bottom:15px}

#emailHome table {border-collapse: collapse; clear: both;margin: 2px; padding-left: 30px}

#emailHome th, #emailHome td {padding: 5px 0px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; font-size: 12px}
#emailHome td,#emailHome th {border: 1px solid white}

#signUpForm {width: 220px}
#signUpForm label {width: 120px; float: left; text-align: right}





/* homepage tabs */


/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {

}
.tabberlive {
 margin-top:0px;margin-left: 3px
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
.homeTab {float: right; padding:8px 0px 0px 8px; background: url(../img/home_country_bg.png) top left no-repeat  }
* html .homeTab {float: right; padding: 15px 0px 0px 8px; margin-top: 7px; background: white; border: 1px solid #ccc } /* ie6 */

ul.tabbernav
{
width: 465px; margin:0px 0px 0px 0px; background: url(../img/tabber_bg.png) no-repeat; height: 40px;
}


ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
}


ul.tabbernav li a
{
	margin-left:5px;
	padding: 10px 10px 10px 10px;
	height: 40px;
	background-color: #f6efdd;
	text-decoration: none;
	line-height: 40px;
	font-weight: bold;
}


ul.tabbernav li a:link { color: #663300; }
ul.tabbernav .tabbertabdefault a {border-left: none}

ul.tabbernav li a:hover{ color: #663300; }

ul.tabbernav li.tabberactive a
{
 background-color: #fff;
 color: #663300;
 border-bottom: 3px solid white;
 border-top:2px solid #663300;
 border-right:2px solid #663300;
 border-left:2px solid #663300;
}

ul.tabbernav li.tabberactive a:hover
{
 color: #663300;
 background: white;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px;

 

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

height:625px;

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;

}
.tabberlive .tabbertab h4 {font-size: 14px; font-weight: bold; padding: 5px 15px 0px 10px; color:#ff7c0d}
.tabberlive .tabbertab p {font-size: 12px; padding: 5px 15px 0px 10px}
.tabberlive .tabbertab a {color:#663300}

/* Example of using an ID to set different styles for the tabs on the page */2

.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
width: 455px; margin-right: 5px;

 overflow:auto;
}


/* flash Content wrapper */

.flashContent {padding: 10px; margin-left: 130px; width: 450px; background:url(../flash/flash_placeholder.gif) no-repeat; background-position:center; height:450px; height:350px; }


.clear {clear:both;}




/* IE <6 warning */

#IEwarning {
width:960px;
border:3px #ff7c0d solid;
color:#663300;
font-weight:bold;
padding:10px;
margin-top:20px;
}

#IEwarning img {
margin:0;
margin:0;
border:0;
}

#IEwarning a {
color:#ff7c0d;
text-decoration:underline;
}

/* created to replace inline presentation styling */

.format1 {
clear:both;
height:1px;
}

.format2 {
clear:both;
height:1px;
width:500px;
}