/* CSS Document */

ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,blockquote,fieldset,input,textarea,select{ margin: 0; padding: 0; }

body{
	margin: 0;
	padding: 0;
	font: 11px arial;
	background: url(/gfx/bg.gif) repeat-x;
	color:#525555;	
}

#mainArea h1,
#mainArea h1.fullWidth,
#footer h1, 
#copyArea h1,
#resultSet .result h1,
#resultSet .firstResult h1 { 
	font: bold 14px arial;
	color: #FFF; 
	background: url(/gfx/bannerTitle.gif) top left no-repeat; 
	margin: 0; 
	padding: 6px 9px 12px 10px;
	text-decoration:none;
	}
  #mainArea h1.fullWidth{ 
  	background: url(/gfx/bannerMainTitle.gif) top left no-repeat !important; 
  	}
  #footer h1{
    font: bold 22px arial;
    background: none;   
    padding: 6px 9px 12px 0;
  }
  #copyArea h1{ 
  	background: url(/gfx/bannerSubTitle.gif) top left no-repeat !important; 
  	}  	
  #resultSet .result h1{
  	padding: 6px 9px 12px 0px !important;
    background: none !important;
    color: #00aaa6 !important;
  }
  #resultSet .firstResult h1,
  #whatWeDo h1{
   background: url(/gfx/bannerFeaturedTitle.gif) top left no-repeat !important;
   color: #FFF !important;
  }
  
#mainArea h1 a,
#mainArea h1 .fullWidth a,
#footer h1 a,
#copyArea h1 a{ 
  color: #FFF;   
  }
#resultSet .result h1 a{
  color: #00aaa6 !important;
}
#video h2{
  padding: 6px 0;
}
	
h1{	font: bold 14px arial; color: #00aaa6; }
h2{	font: bold 14px arial; color: #fb6f1c; }
h3{	font: bold 14px arial; color: #00aaa6; }
h4{	font: bold 14px arial; color: #00aaa6; }
h5{	font: bold 14px arial; color: #00aaa6; }
h6{	font: bold 12px arial; color: #00aaa6; }

#mainArea p,
#copyArea p{ 
  font: 11px arial; 
  line-height: 17pt; 
  }

.copyPadding{ 
	padding: 8px; 
	}

.copyPadding ul, .copyPadding ol, .copyPadding li{ 
margin:  4px 0 0 8px;
	}
	
/* MAKES ALL BROWSERS HANDLE HEADINGS AND PARAGRAPHS THE SAME, USE AT YOUR DISCRETION */
/*h1, h2, h3, h4, h5, h6, p{ margin: 0; padding: 6px 0; }*/

.clear{	clear: both; }
.left{ float: left; }
.right{ float: right; }
.red{ color: red; }
img{ border: none; }
.forty{ width: 40%; }

form, fieldset, legend{ margin: 0; padding: 0; }
fieldset{ border: none; }
legend{ display: none; }
.nobg{ border: none; background: none; }

.form_error{ 
  color: red;
  margin: 6px 0; 
}


a{
	color: #666666;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}

/* CSS TRANSPARENCY, THIS INVALIDATES THE STYLESHEET, USE AT YOUR DISCRETION */
/*a:hover img{ opacity: 0.8; filter: alpha(opacity=80); -moz-opacity:0.8; }*/

/* input[type=""] DOES NOT WORK IN IE6 */
input[type="checkbox"], input[type="radio"]{ border: none; width: auto; background: none; }

input, textarea{
	background: white;
	border: solid 1px #797979;	
}

input.submit{
	width: 100px;
	background: white;
	height: 24px;
}

/*main container*/
#box{ 
  width: 980px; margin: 0 auto; 
  }
  
/*header*/

#header{ 
	height: 225px; 
	width: 980px; 
	overflow:hidden;
	}

#logo{ 
	width: 290px; 
	height: 225px; 
	float: left; 
	overflow: hidden; 
	}

#headerImgs{ 
	width: 690px; 
	height: 225px; 
	background: url(/gfx/headerImgs.jpg) no-repeat; 
	float:left;
	overflow:hidden;
	}

#headFoot{ 
	width: 113px; 
	height: 13px; 
	background: #FFF url(/gfx/headFoot.jpg) right no-repeat; 
	margin:0 0 0 0;
	padding:0 868px 0 0;
	}
	
/*Main Styles*/

#mainArea{ 
	width: 696px; 
	padding: 2px; 
	margin: 0 0 9px 0; 
	border: 1px #dedede solid; 
	float:left;
	overflow:hidden;
	}

#innerMainL{ 
	width: 403px; 
	height: 316px; 
	margin: 0; 
	float: left; 
	overflow: hidden; 
	}
	#innerMainL img.currentCampaign{
	  width: 403px;
	  height: 316px;
	}
	#innerMainL em.overlay{
	  position: absolute;
	  display: block;
	  width: 403px;
	  height: 316px;
	  background: url(/gfx/mainImageOverlay.png) top right no-repeat;
	  }

#innerMainR{ 
  float: right;
	width: 292px; 
	height: 316px; 
	margin: 0; 
	overflow: hidden; 
	}
	
#bannerText{
  padding:0 10px 0 10px;
  }

/* Copy Styles */

#copyArea{ 
	width: 505px; 
	padding: 2px; 
	margin: 0 0 9px 0; 
	border: 1px #dedede solid; 
	float:left;
	}

	
	
/*shop cta*/

#shopCta{ 
	width: 386px; 
	height: 314px; 
	margin: 0 12px 0 0; 
	float: left; 
	overflow: hidden; 
	}

/*video cta*/

#video{ 
	width: 298px; 
	height: 310px; 
	padding: 2px; 
	border: 1px #dedede solid; 
	margin:0 0 0 0;
	float: right;
	overflow:hidden;
	}


/*navigation*/

#navBg{ 
	width: 980px; 
	height: 8px; 
	background-color: #dedede; 
	margin: 0 0 11px 0; 
	padding: 0; 
	}	
	
#nav{ 
	width: 980px; 
	height: 22px; 
	background-color: #FFF; 
	margin: 0; 
	padding: 0; 
	}
	
#navHome,
#navHomeOn{
	width: 57px;
  height: 22px;
	float:left;
	}
#navHome a{
  display: block;
	width: 57px;
  height: 22px;
	background: url(/gfx/navHome.gif) no-repeat;
	background-position: 0 100%;
	}
#navHome a:hover,
#navHomeOn a{
	display: block;
	width: 57px;
  height: 22px;
	background: url(/gfx/navHome.gif) no-repeat;
	background-position: 0 0%;
  }
	
#navWhat,
#navWhatOn{
	width: 104px;
  height: 22px;
	float:left;
	}
#navWhat a{
  display: block;
	width: 104px;
  height: 22px;
	background: url(/gfx/navWhat.gif) no-repeat;
	background-position: 0 100%;
	}
#navWhat a:hover,
#navWhatOn a{
	display: block;
	width: 104px;
  height: 22px;
	background: url(/gfx/navWhat.gif) no-repeat;
	background-position: 0 0%;
  }
  
#navGet,
#navGetOn{
	width: 111px;
  height: 22px;
	float:left;
	}
#navGet a{
  display: block;
	width: 111px;
  height: 22px;
	background: url(/gfx/navGet.gif) no-repeat;
	background-position: 0 100%;
	}
#navGet a:hover,
#navGetOn a{
	display: block;
	width: 111px;
  height: 22px;
	background: url(/gfx/navGet.gif) no-repeat;
	background-position: 0 0%;
  }

#navCorp,
#navCorpOn{
	width: 185px;
  height: 22px;
	float:left;
	}
#navCorp a{
  display: block;
	width: 185px;
  height: 22px;
	background: url(/gfx/navCorp.gif) no-repeat;
	background-position: 0 100%;
	}
#navCorp a:hover,
#navCorpOn a{
	display: block;
	width: 185px;
  height: 22px;
	background: url(/gfx/navCorp.gif) no-repeat;
	background-position: 0 0%;
  }

#navNews,
#navNewsOn{
	width: 56px;
  height: 22px;
	float:left;
	}
#navNews a{
  display: block;
	width: 56px;
  height: 22px;
	background: url(/gfx/navNews.gif) no-repeat;
	background-position: 0 100%;
	}
#navNews a:hover,
#navNewsOn a{
	display: block;
	width: 56px;
  height: 22px;
	background: url(/gfx/navNews.gif) no-repeat;
	background-position: 0 0%;
  }

#navResources,
#navResourcesOn{
	width: 91px;
  height: 22px;
	float:left;
	}
#navResources a{
  display: block;
	width: 91px;
  height: 22px;
	background: url(/gfx/navResources.gif) no-repeat;
	background-position: 0 100%;
	}
#navResources a:hover,
#navResourcesOn a{
	display: block;
	width: 91px;
  height: 22px;
	background: url(/gfx/navResources.gif) no-repeat;
	background-position: 0 0%;
  }
	
#navDonate,
#navDonateOn{
	width: 71px;
  height: 22px;
	float:left;
	}
#navDonate a{
  display: block;
	width: 71px;
  height: 22px;
	background: url(/gfx/navDonate.gif) no-repeat;
	background-position: 0 100%;
	}
#navDonate a:hover,
#navDonateOn a{
	display: block;
	width: 71px;
  height: 22px;
	background: url(/gfx/navDonate.gif) no-repeat;
	background-position: 0 0%;
  }
	
#navShop,
#navShopOn{
	width: 54px;
  height: 22px;
	float:left;
	}

#navShop a{
	display: block;
	width: 54px;
  height: 22px;
	background: url(/gfx/navShop.gif) no-repeat;
	background-position: 0 100%;
	}

#navShop a:hover,
#navShopOn a{
	display: block;
	width: 54px;
  height: 22px;
	background: url(/gfx/navShop.gif) no-repeat;
	background-position: 0 0%;
  	}	
	
#navContact,
#navContactOn{
	width: 81px;
  height: 22px;
	float:left;
	}

#navContact a{
	display: block;
	width: 81px;
  height: 22px;
	background: url(/gfx/navContact.gif) no-repeat;
	background-position: 0 100%;
	}

#navContact a:hover,
#navContactOn a{
	display: block;
	width: 81px;
  height: 22px;
	background: url(/gfx/navContact.gif) no-repeat;
	background-position: 0 0%;
  	}
  	
/*
#######################
#   SIDE NAVIGATION   #
#######################
*/
#leftNav{
  width: 179px;
  float: left;
  clear: left;
  border-right: 1px solid white;
  margin: 0 15px 0 0;
}
#leftNav ul{
  border: none;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #FFFFFF;
}
#leftNav li{
  margin: 0 0 1px 0;
  padding: 0;
  cursor: pointer;
}
#leftNav li a,
#leftNav li .topLevel{
  width: 173px;
  color: #FFF;
  font-weight: bold;
  display: block;
  padding: 6px 0 6px 6px;
  text-decoration: none;
  text-transform: capitalize;
  background: url(/gfx/navSubBg.gif) no-repeat #00aaa6;
  background-position: bottom left;
}
#leftNav li:hover,
#leftNav li a.on,
#leftNav li ul li a,
#leftNav li .current{
  background: url(/gfx/navSubBg.gif) no-repeat #fb6f1c;
  background-position: bottom right;
  color: #FFFFFF;
}
#leftNav li li .current{
  background: url(/gfx/navSubBg.gif) no-repeat #00aaa6;
  background-position: bottom left;
  color: #FFFFFF;
}
  #leftNav li ul li a{
    width: 153px;
    padding: 6px 0 6px 26px;
  }
  #leftNav li ul li a:hover{
    background: url(/gfx/navSubBg.gif) no-repeat #00aaa6;
    background-position: bottom left;
  }
#leftNav li.foot ul li a{
  width: 173px;
  padding: 6px 0 6px 6px;
  background: url(/gfx/navSubBg.gif) no-repeat #00aaa6;
  background-position: bottom left;  
}
  #leftNav li.foot ul li a:hover{
    background: url(/gfx/navSubBg.gif) no-repeat #fb6f1c;
    background-position: bottom right;
  }

/* Full Width Left Column*/

#fullLeftCol{ 
	width: 702px; 
	padding: 0; 
	margin: 0 10px 9px 0; 
	float:left;
	overflow:hidden;
	}	
	
#mainLeftCol{  
  background: url(/gfx/bannerSubTitle.gif.gif) no-repeat #00aaa6;
}
	
/*right column*/

#rightCol{ 
	width: 265px; 
	height: auto; 
	overflow: hidden; 
	margin:0; 
	padding:0; 
	float: right;
	}	
	
/*cta*/

#donate{ margin-bottom: 11px; }

#discover{ margin-bottom: 10px; }

#newsletter{ 
	width: 264px; 
	height: 115px; 
	background: url(/gfx/newsletterBg.gif) no-repeat; 
	padding:52px 14px 0 14px; 
	margin:5px 0;
	color:#FFF;
	font: bold 14px arial;
	}
#newsletter li{
  list-style-type: none; 	
	}	
#newsletter label{
  float: left;
	width: 50px;
	margin: 8px 0 0 0;
	}
#newsletter input{
	width:184px; 
	height:22px; 
	background-color:#FFF; 
	border: 1px #fb6f1c solid; 
	margin:4px 0 16px 0;
	}
		
.custombutton{
	padding:0;
	margin-left:162px;
	margin-top:-10px;
	border:none;
	background:none;
	cursor:pointer;
	position:relative;
	}
	
.merchantbutton{
	padding:0;
	margin-left:400px;
	border:none;
	background:none;
	cursor:pointer;
	position:relative;
	}
	
#globally{
	width:265px; 
	height:231px;
	} 

/*footer*/

#footerBg{ 
	width: 100%; 
	background: #00aaa6 url(/gfx/footerBg.gif) repeat-x; 
	margin: 53px 0 0 0; 
	padding: 0 0 20px; 
	float:left;
	}

#footer{ 
	width: 970px; 
	height:auto; 
	margin: 0 auto; 
	padding: 40px 0 20px 20px;
	color: #FFF;
	}
#footer .browse,
#footer .topPosts,
#footer .links{
  float: left;
	width: 240px; 
	padding: 0 20px;
	border-left: 1px solid #FFF;
	}
	
#footer .topPosts li, #footer .links li { width: 90%; float: left;}
	
	#footer .browse{
	  border-left: none;
	  width: 380px;
	  padding: 0 20px 0 0;
	}	
#footer .disclaimer{
  float: left;
  width: 950px;
  padding: 20px 0 0;
}
  #footer .disclaimer .copyright{
    float: left;
    width: 40%;
  }
  #footer .disclaimer .bluhalo{
    float: right;
    width: 40%;
    text-align: right;    
  }
    #footer .disclaimer .bluhalo a{
      margin: 0;
      padding: 0;
      border: none;
    }
  #footer li{
    list-style-type: none;
    margin: 0;
    padding: 0;
  	}  
  #footer a,
  #footer a:link{
    float: left;
    width: 90%;
  	padding: 6px 3px;
  	color: #FFF;
  	border-bottom: 1px dotted #b8b8b8;
  	margin: 0 6px 0 0;
  	}  
    #footer .browse li{
      float: left;
      width: 40%;
    	margin: 0 6px 0 0;
    	}
	
/* Breadcrumb */
#breadcrumb{
  float: left;
	width: 702px;	 
	margin: 8px 0;
}

#breadcrumb ul{
  display: block;
}

#breadcrumb li{
  float: left;
  height: 16px;
  padding: 3px 12px 3px 15px;
  margin: 0 0 0 -10px;
  list-style-type: none;  
  background: url(/gfx/breadcrumbBg.gif) no-repeat right top;
  color: #00aaa6;
  color: #fb6f1c;
}

#breadcrumb li.first{
  padding: 3px 12px 3px 6px;
  border-left: 1px solid #dedede;
  margin: 0;
}

#breadcrumb li a{
  color: #00aaa6;
}

/* Shop Products */

.product{
 	width: 666px; 
	padding: 2px; 
	margin: 0 12px 12px 12px; 
	border: 1px #dedede solid; 
	float:left;
	overflow:hidden; 
}

.product h3{
 	text-transform: uppercase;
}
.product h4{
 	margin: 6px 0 6px 0;
}
.product p{
 	margin: 6px 0 6px 0;
}
  .product .product_image{
    float: left;
    width: 160px;
    padding: 6px;
  }
  .product .product_details{
    float: left;
    width: 485px;
    margin: 20px 0 0 0;
  }
  
/* Form Fields */

ul.formFields{
	border-top: 1px solid #e0e0e0;
	color: #525555;
	margin: 20px 0 0;
}
.formFields li{
	list-style-type: none;
	padding: 10px 10px 10px 70px;
	border-bottom: 1px solid #e0e0e0;
	background: #f7f7f7;
	border-right: 1px solid #e0e0e0;
	border-left: 1px solid #e0e0e0;
}
.formFields label{
	float: left;
	width: 170px;
	font-size: 1em;
}
.formFields input,
.formFields textarea{
	padding: 1px;
	color: #525555;
	border: 1px solid #CCCCCC;
	width: 300px;
}

/* Contact Details */
#contact{
  width: 680px;
  float: left;
  margin: 20px 0;
}
#contact .details{
  width: 300px;
  float: left;
}

/* Article Styles */
.getInvolved{
 	width: 220px; 
	padding: 2px; 
	margin: 0 0 12px 12px; 
	border: 1px #dedede solid; 
	float:left;
	overflow:hidden;
	border-right: 1px solid #e0e0e0;
	border-left: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
  }
  .getInvolved img{
    float: left;
    width: 60px;
    padding: 0 6px 6px;
    }    
  .getInvolved ul{
    float: left;
    width: 120px;
   	list-style: none;
    }
    .getInvolved li{
     	float: left;
     	width: 120px;
     	padding: 3px 0 0 12px;
     	background: url(/gfx/orangeBullet.gif) top left no-repeat;
      }
#whatWeDo{
  float: left;
  width: 483px;
  height: 297px;
  border: 1px #dedede solid; 
  background: url(/gfx/map.gif) top left no-repeat;
}
  #whatWeDo div{
    border: 1px #dedede solid;
    width: 180px;
    background: #FFF;
    padding: 3px 3px 3px 0;
  }
  #whatWeDo p{
    padding: 0 3px;
    margin: 0;
  }  
  #whatWeDo img.arrow{
    float: left;
    position: relative;
    top: -5px;
    left: -25px;
    z-index: 100;
    height: 26px;
    width: 15px;
    margin: 0 -15px 0 0;
  }    
    #whatWeDo img.bra{ position: relative; top: 226px; left: 156px; }
    #whatWeDo div.bra{ position: relative; top: 199px; left: 179px; }
		
    #whatWeDo img.recife{ position: relative; top: 208px; left: 153px; }
    #whatWeDo div.recife{ position: relative; top: 180px; left: 190px; }
	
    #whatWeDo img.burm{ position: relative; top: 154px; left: 332px; }
    #whatWeDo div.burm{ position: relative; top: 126px; left: 384px; }

    #whatWeDo img.burm1{ position: relative; top: 164px; left: 315px; }
    #whatWeDo div.burm1{ position: relative; top: 138px; left: 382px; }
   
    #whatWeDo img.chi{ position: relative; top: 151px; left: 325px; }
    #whatWeDo div.chi{ position: relative; top: 125px; left: 404px; }

    #whatWeDo img.haiti{ position: relative; top: 164px; left: 47px; }
    #whatWeDo div.haiti{ position: relative; top: 137px; left: 141px; }
    
    #whatWeDo img.ken{ position: relative; top: 204px; left: 193px; }
    #whatWeDo div.ken{ position: relative; top: 177px; left: 300px; }
    
    #whatWeDo img.ken1{ position: relative; top: 196px; left: 179px; }
    #whatWeDo div.ken1{ position: relative; top: 168px; left: 302px; }

    #whatWeDo img.rwa{ position: relative; top: 206px; left: 152px; }
    #whatWeDo div.rwa{ position: relative; top: 179px; left: 287px; }
 
    #whatWeDo img.rwa1{ position: relative; top: 214px; left: 135px; }
    #whatWeDo div.rwa1{ position: relative; top: 187px; left: 285px; }
    
    #whatWeDo img.ugd{ position: relative; top: 198px; left: 128px; }
    #whatWeDo div.ugd{ position: relative; top: 171px; left: 292px; } 
    


/* News List */

#resultSet {
}

#resultSet .result{
  float: left;
  width: 665px;
  padding: 3px 3px 12px 3px;
  border-bottom: 1px solid #e3e3e3;
}

#resultSet .firstResult{
  float: left;
  width: 665px;
  border: 1px solid #e0e0e0;
  padding: 3px 3px 12px 3px;
}
  #resultSet .result p,  
  #resultSet .firstResult p,
  img.more{
    padding: 6px;
}

/* Pagination */

#resultBar {
  float: left;
  width: 665px;
  padding: 9px 3px; 
}

#resultBar .showing {
  float: left;
  width: 30%;
}
#resultBar .pagination {
  float: right;
  width: 40%;
  text-align: right;
  padding: 2px 6px;
}

#resultBar.paginationTop  {
  float: left;
  width: 665px;
  padding: 0 3px 12px;
  border-bottom: 1px solid #e3e3e3;
}

#resultBar .pagination a,
#resultBar .pagination a:link,
#resultBar .pagination a:visited{
  border: 1px solid #e0e0e0;
  padding: 2px 6px;
  color: #FFF;
  background: #00aaa6;
}
#resultBar .pagination a:hover,
#resultBar .pagination .nonLink {
  border: 1px solid #e0e0e0;
  padding: 2px 6px;
  color: #FFF;
  background: #fb6f1c;
  text-decoration: none;
}

#archive{
	color:#FFFFFF;
	width:auto;
	height:auto;
	padding:15px 20px 0px 18px;
	margin:0px 0px 0px 0px;
	background-color:#00aaa6;
	font-weight:bold;
	}
	
#archiveTitle h1{
	color:#FFFFFF;
	}
	
#archiveTitle{
	width:265px;
	height:27px;
	background:url(/gfx/newsarchive.gif) no-repeat;
	margin-top:39px;}
	
#archiveFooter{
	width:265px;
	height:19px;
	margin:0px 0px 10px 0px;
	background:url(/gfx/newsArchiveFooter.gif) no-repeat;
	}
	
#archive li{
	list-style:none;
	padding:0px 0px 10px 0px; 
	}
	
#archive a{
	color:#FFFFFF;
	text-decoration:none;
	}
	
#archive a:hover{
	color:#FFFFFF;
	text-decoration:underline;
	}