/* -------------------------------------------------------------- */
/* http://meyerweb.com/eric/tools/css/reset/ *//* v1.0 | 20080212 */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
/* remember to define focus styles! */
:focus {outline:0;}
/* remember to highlight inserts somehow! */
ins{text-decoration:none;}
del{text-decoration:line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:collapse;border-spacing:0;}
/* --------------------- */
/* Generic HTML Elements */
html { font-family: arial,helvetica,verdana,tahoma,sans-serif; }
ul, li { display: inline; list-style: none none; }
li a { text-decoration: none; }
/*
h1 { text-indent: -10000px; background: transparent url(../images/world_cocoa_foundation_logo.png) top left no-repeat; position: absolute; top: 92px; left: 30px; display: block; width: 163px; height: 174px; z-index: 6; }
h2 { text-indent: -10000px; background: transparent url(../images/encouraging_text.png) top left no-repeat; position: absolute; top: 128px; left: 223px; display: block; width: 438px; height: 102px; z-index: 6; }
*/
h3 { color: #368357; text-transform: uppercase; font: bold 10.5pt arial,sans-serif; }
q { color: #368357; font-size: 9pt; }
dl dt { font-size: 9pt; font-weight: bold; margin-top: 10px; }
dl dd { margin-left: 5px; }
/* ---------------------- */
/* SET THE PAGE CONTAINER */
#pagecontainer { width: 1024px; margin: 0 auto; border: 0; padding: 0; position: relative; background: #fff url(../images/pagecontentgradientbg.jpg) top left repeat-x; }

object.banner.flash { z-index: 100; }
/* ----------------------------------- */
/* SECONDARY MENU IN HEADER AND FOOTER */
.secondarymenu a { text-transform: uppercase; color: #8e543e; border-left: 1px solid #8e543e; padding: 0 5px 0 9px; font-size: 8pt; letter-spacing: .05em; }
.secondarymenu.right { float: right; }
.secondarymenu.header { padding-top: 25px; padding-bottom: 8px;  border-bottom: 3px solid #368357; width: 100%; display: block; margin-bottom: 3px; }
.secondarymenu.right a { text-transform: lowercase; }
.secondarymenu .home.button { border-left: 0px; padding-left: 5px; }
.secondarymenu.header,.secondarymenu.right{padding-top:25px;padding-bottom:8px;border-bottom:3px solid #368357;width:824px;display:block;margin-bottom:3px;clear:none;height:15px;}
.secondarymenu.right{width:108px;padding-left:92px;float:right;margin-top:-54px;text-align:right;}
.footer .secondarymenu.right{margin-top:0;border-bottom:0;padding:0;margin:0;}
.secondarymenu.right a{border:0;display:block;float:left;height:24px;width:24px;margin-right:12px;margin-top:-5px;padding:0;text-indent:-10000px;font-size:0;line-height:0;color:#dbc0ab;background-color:transparent;background-position:top left;background-repeat:no-repeat;}
.secondarymenu.right a:hover{background-position:0 -24px;}
.secondarymenu.right a.facebook{background-image:url(http://www.worldcocoafoundation.org/images/facebook.png);}
.secondarymenu.right a.twitter{background-image:url(http://www.worldcocoafoundation.org/images/twitter.png);}
.secondarymenu.right a.youtube{background-image:url(http://www.worldcocoafoundation.org/images/youtube.png);}

/* -------------- */
/* HEADER STYLING */
@-moz-document url-prefix() {
    .banner.flash { height: 0; }
}
.banner.flash embed { margin-left: -1px; margin-top: 0; }
.banner.image { margin-left: -2px; width: 1028px; height: 257px; padding-bottom: 5px; z-index: 5; position: relative; }
/* ----------- */
/* SEARCH FORM */
form { border: 0; margin-top: 10px; }
form input { border: 1px solid #8e543e; background: transparent; width: 150px; margin-left: 25px; margin-bottom: -2px; font-size: 10pt; color: #8e543e; }
form input.searchbutton { text-indent: -10000px; background: transparent url(../images/search_btn.png) top left no-repeat; display: inline-block; height: 32px; width: 31px; margin-left: -18px; margin-top: -10px; border: 0; }
form input.hideme { display: none; }
/* ----------------- */
/* MAIN MENU STYLING */

#mainmenu { line-height: 120%; background: transparent url(../images/menu_green_background.png) bottom left no-repeat; color: #fff; position: absolute; right: 0; top: 311px; }
#mainmenu a { color: #fff; font: 10.5pt arial,sans-serif; }
#mainmenu li { display: block; vertical-align: bottom; }
#mainmenu li a { width: 85px; height: 60px; display: table-cell; border-left: 1px solid green; padding: 5px; vertical-align: bottom; margin-top: 0; }
#mainmenu li a span { display: inline; vertical-align: middle; }
#mainmenu a.home { border-left: 0px; } 
#mainmenu li li a { display: block; width: 90%; padding: 4px 5%; height: auto; border: 0; vertical-align: auto; margin: 0; }

#mainmenu.sf-menu .cldropdown { margin-left: -72px; }
/*** ESSENTIAL STYLES ***/
.sf-menu, 
.sf-menu * { margin: 0; padding: 0; list-style: none; }
.sf-menu { line-height: 120%; }
.sf-menu ul { position: absolute; top: -999em; width: 160px;  /* left offset of submenus need to match (see below) */ }
.sf-menu ul li {width:100%;}
.sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }
.sf-menu li {float:left;position:relative; }
.sf-menu a {display:block;position:relative;}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	background: #008457; 
	left: 0;
	top: 60px; /* match top ul list item height */
	z-index: 999;
	padding-bottom: 20px;
	}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {top:-999em;}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {left:10em; /* match ul width */top:	0;}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) 
{ 
.sf-menu li:hover ul, .sf-menu li.sfHover ul { margin-top: 10px !important;  }
#mainmenu { top: 310px }

}

/*** DEMO SKIN ***/
.sf-menu {float:left;margin-bottom:2px;}
.sf-menu a {text-decoration:none;}
.sf-menu li:hover, .sf-menu li.sfHover,.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {outline:0;}
.sf-menu li li:hover, .sf-menu li li.sfHover, .sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li a:active {background: #008457 url(http://www.worldcocoafoundation.org/images/dropdownbg.jpg) top left repeat-y;}
/*** arrows **/
.sf-menu a.sf-with-ul {
	padding-right: 	5px;
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */}
.sf-sub-indicator {
	position: absolute;
	display: none !important;
	right: 3px;
	bottom: 3px;
	top: 5px; /* IE6 only */
	width: 10px;
	height: 10px;
	text-indent: -9999px;
	overflow:	hidden;
	background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
	}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top:	5px;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
	}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator, 
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
	}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
	}
/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url('../images/shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-bottomright: 17px;
	-webkit-border-bottom-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
	}
.sf-shadow ul.sf-shadow-off { background: transparent; }

/* --------------------- */
/* CONTENT - LEFT COLUMN */
#columnleft { display: inline-block; vertical-align: top; width: 200px; margin-top: 50px; padding: 5px 10px; margin-right: 0px; }
#columnleft a { text-decoration: none; color: #8e543e; font-size: 9pt; line-height: 11pt; margin: 5px 0 10px; display: block; }
#columnleft a span { font-style: italic; display: block; }
.morelink { text-decoration: none; color: #8e543e; font-size: 9pt; line-height: 11pt; margin-bottom: 20px; text-transform: uppercase; }
#columnleft a span.date.bold { font-style: normal; font-weight: bold; }
#columnleft a.morelink { border-bottom: 1px dotted #8e543e; }
#columnleft a.morelink:hover { border-bottom: 1px solid #8e543e; }
#twitter_div { padding-top: 5px; }
#twitter_update_list li span { color: #8e543e; font-size: 9pt; line-height: 11pt; }
#twitter_div a:hover { text-decoration: underline; }
/* ------------------------ */
/* CONTENT - CENTER COLUMN  */
#columncenter { color: #8e543e; display: inline-block; vertical-align: top; width: 490px; margin-top: 50px; padding: 5px 20px; border-left: 1px dotted #8e543e; border-right: 1px dotted #8e543e; }
#columncenter h3.bigger { font-size: 16pt; }
#columncenter li { font-size: 9pt; }
#columncenter h4 { font-size: 9pt; color: #8e543e; line-height: 11pt; font-weight: bold;margin-top: 5px; }
#columncenter,
#columncenter li a { font-size: 9pt; line-height: 11pt; }
#columncenter li li { margin: 5px 0 5px 5px; }
#columncenter li { display: block; padding-left: 9px; margin: 0 0 5px 0; background: transparent url(http://www.worldcocoafoundation.org/images/listbullet.jpg) 0 4px no-repeat;}
#columncenter ul { margin: 5px 0 10px; list-style-type: disc; display: block; }
#columncenter .morelink { margin-bottom: 20px; display: block; }
#columncenter .program.block img.program { float: left; clear: left; width: 150px; height: auto;margin: 0 5px 0px 0;padding-right: 5px; }
#columncenter span { color: #8e543e; font-size: 9pt; }
#columncenter .program.block { min-height: 100px; width: 100%; margin-bottom: 15px;padding-bottom: 15px;}
#columncenter.wide img { margin: 5px; }
#columncenter.wide { border-right: 0px; width: 742px; padding-left: 30px; }
#columncenter.wide .col { width: 359px; display: inline-block; vertical-align: top; }
#columncenter.wide .col.left { margin-right: 20px; }
#columncenter ul,
#columncenter li { list-style-type: disc; list-style-position: inside; }
#columncenter p { margin: 5px 0 10px; }
#columncenter a { border-bottom: 1px dotted #8e543e; color: #8e543e; text-decoration: none; }
#columncenter a:hover { border-bottom: 1px solid #8e543e; }
#columncenter img { border: 0; }
#columncenter hr { width: 100%; clear: both; margin: 10px 0; border-color: #368357; }
/* partnership meeting and events calendar */
table.calendar { width: 742px; }
.calendar tr { border-bottom: 1px dotted #8e543e; }
.calendar tr td { padding-bottom: 5px; padding-top: 5px; }
td.date { text-align: right; padding-right: 5px; }
.calendar a { text-decoration: none; }
.calendar .month { margin-top: 15px;font-size: 13pt; color: #368357; border-bottom: 1px solid #368357; border-top: 2px solid #8e543e; padding: 5px 0 5px 0; }
/* -------------- */
/* RIGHT COLUMN - */
#columnright { display: inline-block; vertical-align: top; width: 222px; margin: 50px 10px 0 20px; }
/* callout blocks */
.callout { background: transparent url(../images/callout_block_body.jpg) bottom left no-repeat; margin-top: 10px; margin-bottom: 25px; width: 200px; padding: 0 11px 25px 11px; font-size: 9pt; color: #8e543e; }
.callout h3 { display: block; width: 200px; margin-top: -10px; margin-left: -11px; background: transparent url(../images/callout_block_header.png) top left no-repeat; padding: 5px 11px 10px 11px; text-align: center; }
.callout a { text-decoration: none; color: transparent; font-size: 0; display: block; width: 15px; height: 15px; margin: 0px 0 -9px 182px; }
/* ------ */
/* FOOTER */
.footer {
	display: block;
	height: 25px;
	padding: 10px 0 20px;
	border-top: 3px solid #368357;
	margin-top: 10px;
	}
.footer .secondarymenu { float: left; }
.footer .secondarymenu.right { float: right; }
.footer .privacy { border-left: 0px; }