/* All places with color definition search with This-color-is (or search # and ignore the id defs) */
:root {
   /* 
      CSS Variable names must have the -- prefix
      CSS variables does not work on android OS => set via js
      var(custom-name, optional_default_value_in_case_of_invalid_var)
   */
}                
/* latin-ext */
/*
@font-face {
  font-family: 'Bree Serif';
  font-style: normal;
  font-weight: 400;
  src: local('Bree Serif Regular'), local('BreeSerif-Regular'), url(http://fonts.gstatic.com/s/breeserif/v7/4UaHrEJCrhhnVA3DgluA96Tp56N1.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
*//* latin */
/*
@font-face {
  font-family: 'Bree Serif';
  font-style: normal;
  font-weight: 400;
  src: local('Bree Serif Regular'), local('BreeSerif-Regular'), url(http://fonts.gstatic.com/s/breeserif/v7/4UaHrEJCrhhnVA3DgluA96rp5w.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*/
html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, em, img, article, figcaption, figure, footer, header, hgroup, menu, nav, section {
   margin:0;
   padding:0;
   border:0;
   outline:0;
   font-size:100%;
   font:normal 14px/1.6 "ff-meta-web-pro-1", "Helvetica Neue", Helvetica, "sans serif";
   text-rendering:optimizeLegibility;
   vertical-align:baseline;
   background:transparent;
}                 
article, figcaption, figure, footer, header, hgroup, menu, nav, section {
   display:block;
}
h1, h3, h4, h5, h6 {
   font-weight: bold;
}
h1 {
   margin-top: 61px;
   color: #9FA617; /* This-color-is medium light green; for text */
   font-size: 3.43em; /* 48/14 */
   line-height:1.13;
}
h2 {
   margin-top: 36px;
   font-size: 1.71em; /* 24/14 */
   line-height:1.5;
}
h3 {
   margin: 28px 0 6px 0;
   color: #E36F1E; /* This-color-is orange; for h3 text */
   font-size: 1.57em; /* 22/14 */
   line-height:1.5;
}
h4 {
   margin-top: 36px;
   color: #9FA617; /* This-color-is medium light green; for h4 text */
   font-size: 4.14em; /* 58/14 */
   line-height:1.0;
}
h5 {
   color: #9FA617; /* This-color-is medium light green; for h5 text */
   font-size: 1.43em; /* 20/14 */
   line-height:1.3;
}
nav ul { list-style:none; }
body {
   color: #fff7dc;       /* This-color-is nearly white */
   background:#3D2F00;   /* This-color-is dark brown */
   overflow:hidden;
}
p {
   margin: 0 0 12px 0;
}
form {
   margin-top: -18px;
}
a {
   text-decoration: none;
   color: #9FA617; /* This-color-is medium light green; for text */
}
a:hover {
   text-decoration: underline;
}
#accordion {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   z-index: 0;
   overflow: hidden;
}
.home_icon {
   margin-top: -10px;
   position: absolute;
   z-index: 89;
   border: none;
   left: 30px;
}
.toggler {
   cursor: pointer;
/* padding is set in js = 0 0 0 v_article_lm */
/* min-height is set in js = v_band_hight */
/* height is set in js = togglerHeight + add_pix */
/* line-height is set in js = togglerHeight + add_pix */
   width: 100%;
   font-size: 18px;
   color: #3D2F00; /* This-color-is dark brown */
   vertical-align: text-bottom;
   -webkit-transition: opacity .5s;
   -moz-transition: opacity .5s;
   -o-transition: opacity .5s;
}
.toggler:hover {
   opacity: .7;
   font-size: 22px;
}
.toggler:active {
   opacity: 1;
}
.element {
   height: 0;
   overflow: hidden;
   width: 100%;
   position: relative;
   z-index: 3;
}
.container {
   width: 100%;
   overflow: hidden;
}
.article {
/* margin is set in js = 0 v_article_rm 0 v_article_lm */
/* width is set in js = v_article_width */
   float: left;
   
}
.right {
/* width is set in js = v_right_width */
/* height is set in js = (fixedHeight / 2) */
   float: left;
   position: relative;
   z-index: 1;
}
.right_img {
   overflow: hidden;
}
.right_img img {
   /* height is set in js = (fixedHeight / 2) */
}
.subtitle {
   margin: 0 0 0 24px;
/* width is set in js = v_subtitel_width */
/* hight is set in js = v_subtitel_height */
}
.subtitle h2 {
   font-weight: bold;
}
.subtitle a {
   margin-right: 20px;
}
.subpage_titles {
   margin-top: 4px; /* make h3 top margin smaller */
}

.band {
   cursor: pointer;
/* height is set in js = v_band_hight */
/* width is set in js = v_spacer_width + v_right_width + v_prev_width */
   -webkit-transition: opacity .5s;
   -moz-transition: opacity .5s;
   -o-transition: opacity .5s;
   position: relative;
   z-index: 5;
}
.bandup {
   margin-top: -30px; /* -(24+6) = -(v_band_hight + arrow margin-top) */
}
.band:hover {
   opacity: .8;
}
.band:active {
   opacity: 1;
}
.nextcontainer {
/* height is set in js = v_band_hight */
/* width is set in js = v_spacer_width + v_right_width */
}
.next {
/* padding is set in js = 0 v_prev_width 0 0 */
/* height is set in js = v_band_hight */
/* width is set in js = v_right_width - v_prev_width */
   line-height: 21px;
   color: #3D2F00; /* This-color-is dark brown; (not good readable on dark slide colors); better check in js the darkness of background and select the text color accordingly */
   text-align: right;
}
.next_dark {
/* padding is set in js = 0 v_prev_width 0 0 */
/* height is set in js = v_band_hight */
/* width is set in js = v_right_width - v_prev_width */
   line-height: 21px;
   color: #fff; /* This-color-is white; text color for dark backgroung */
   text-align: right;
}
.next img, .next_dark img {
   margin: 2px 2px 0 0;
   vertical-align: text-top;
}
.next img:hover, .next_dark img:hover {
   padding-left: 1px; 
   margin-right: 1px; 
}
.previous {
/*  margin-top is set in js = -1*v_band_hight */
/* width is set in js = v_prev_width */
/* height is set in js = v_band_hight */
/* line-height is set in js = v_band_hight */
   float: right;
}
.arrow-right { 
   border-top:5px solid transparent;
   border-bottom:5px solid transparent;
   border-left:5px solid #fff; /* This-color-is white */
   margin: 6px -24px 0 0;
   float: right;
}
.arrow-left { 
   border-top:5px solid transparent;
   border-bottom:5px solid transparent;
   border-right:5px solid #fff; /* This-color-is white */
   margin: 6px 24px 0 0;
}
.spacer {
/* width is set in js = v_spacer_width */
   float: left;
   position: relative;
   z-index: 0;
   overflow: hidden;
}
.imgup {
   /* margin-top is set in js = -(fixedHeight / 2) */
}
.spacer_full_img {
   overflow: hidden;
}
.spacer_full_img img {
   /* height is set in js = fixedHeight) */
}
.spacer_half_img {
   overflow: hidden;
}
.spacer_half_img img {
   /* height is set in js = fixedHeight) */
}
.facts {
   margin: 0 0 0 24px;
   width: 543px;
   float: left;
}
.fact {
   margin: 0 36px 0 0;
   width: 187px;
   float: left;
}
.callout {
/* margin-top is set in js = v_all_margin_top */
   margin-left: -91px;
   width: 397px;
/* height is set in js = (fixedHeight / 2) - v_all_margin_top - v_band_hight */
   overflow: hidden;
   position: relative;
   z-index: 0;
}
.donate_table {
   margin: 18px 0 0 88px;
   border-spacing: 12px 1px;
   z-index: 1;
}
#donate_spalte_1{ width: 33%; }
#donate_spalte_2{ width: 40%; }
#donate_spalte_3{ width: 27%; }
.donate_table th {
   float: left;
   padding-left: 42px;
}
.donate_table td {
   vertical-align:top;
}
.donate_table td > div {
    overflow: hidden;
    height: 70px;
}
.donate_table td img {
   float: left;
   vertical-align:top;
   margin: 4px 10px 0px 0px;
}
.donate_table td input {
   margin: 6px 0px 0px 0px;
}
input:focus {
   background-color: #E8D3A2; /* This-color-is light beige; for button background if button is clicked */
}

/* with the current layout this class is not used 
.donate_right {         
   margin-top: -140px;
   height: 12px;
   z-index: 0;
}
*/

.donate {
/* margin-top is set in js = v_all_margin_top */
}

.donate2 {
   margin-top: 75px;
   height: 142px;
}
.donate p , .donate2 p {
   line-height: 1.6;
}

.yellow{
   background: #BCD231;  /* This-color-is is really more light green; for Seeds band */
}
.green{
   background: #7DB145;  /* This-color-is green; for Integrated Approach and donate main text area background */
}
.orange{
   background: #F36523;  /* This-color-is orange; for More Food... */
}
.red{
   background: #9D0B0E;  /* This-color-is red; for Change the crop... and right text area background */
}
.blue{
   background: #4796CF;  /* This-color-is blue; for Enhanced Learning...  */
}
.dark_blue{
   background: #383bb1;  /* This-color-is dark blue; for Community Building */
}
.violet{
   background: #7b0078;  /* This-color-is violet; for get involved */
}
.dark_brown {
	background: #3D2F00;  /* This-color-is dark brown; for donate slides text background */
}
.beige{
   background: #E8D3A2;  /* This-color-is light beige; for double slides text background */
   color:      #3D2F00;  /* This-color-is dark brown; for double slides text */
}
.greent{
   color: #C2C344; /* This-color-is khaki green; for donate $-amount text */
}

.section {
   width: 100%;
   overflow: hidden;
}
.content {
   /* height is set in js = (fixedHeight / 2) */
   width: 30000px;
   overflow: hidden;
}
.slide {
   float: left;
}
.tlnav {
/* margin is set in js = 0 -1*v_article_lm 0 0 */
   width: 160px;
   float: left;
   position: relative;
   z-index: 2;
}
.tlnav li {
   width: 60px;
   font-size: 20px;
   color: #E8D3A2; /* This-color-is light beige */
   -webkit-transition: color .25s;
   -moz-transition: color .25s;
   -o-transition: color .25s;
}
.tlnav li:hover {
   cursor: pointer;
   text-decoration: underline;
}
#timeline {
   margin: 25px 0 0 0;
   padding: 0;
   height: 435px;
   overflow: hidden;
}
#timelineb {
   padding: 0;
   height: 435px;
   overflow: hidden;
}
.tlcontent {
   width: 20000px;
}
.tlcontent li {
   margin: 0 0 15px 0;
   color: #9FA617; /* This-color-is medium light green; for text */
}
.tlcontent ul { 
   list-style:none; 
}

#b2004 {
   color: #9FA617; /* This-color-is medium light green; for text */
   font-weight: bold;
}
.tlentry{
   margin: 0 70px 0 0;
   width: 370px;
   float: left;
}
ul {
   padding: 0;
   margin: 0;
}


.tlitemExtra {
   margin: 15px 0 0 0;
}
.partnersboard {
   font-size: 1.57em; /* 22/14 */
   line-height:1.5;
}

.menu_table {
   table-layout: fixed;
   width: 465px; /* sum of all menu table col width */
 }

.menu_1 {
/* left is set in js = menu_pos */
/* top is set in js = homeMargin - c_margin - v_band_hight - x */
   overflow: visible;
   position: absolute;
   z-index: 99;
}

.menu_1 h3 {
   font-size: 14px;
   color: #3D2F00;         /* This-color-is dark brown */
   background: #3D2F00;    /* This-color-is dark brown */
   padding: 10px;
   margin: 0;
   line-height: 20px;
}

.menu_1 ul {
   position: absolute;
   margin: 0 auto;
   list-style: none;
}

.menu_1 ul li {
   float: left;
   margin: 0 0 0 20px;
   width: 140px;
   font-size: 18px;
   line-height: 53px;
}

.menu_1 ul li a {
   color: #3D2F00;      /* This-color-is dark brown */
   text-decoration: none;   
}

.menu_1 ul li a:hover {
   text-decoration: none;   /* underline */
}

.menu_1 ul li img {
   margin: 15px 2px 0 0;
   float: left;
   background: #BCD231;   /* This-color-is for menu diamond */
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   border-radius: 25px;
}

.menu_1 ul li:hover img {
   background: #E8D3A2; /* This-color-is light beige */
   padding: 1px 0 0 2px; 
}

.menu_1 ul ul {
   position: absolute;
   top: -9999px;
   background: #ccc;  /* This-color-is light gray */
   padding: 0;
   margin: 0 0 0 -5px;
   -webkit-box-shadow: 0 10px 20px #EEE;   /* This-color-is very light gray */
   -moz-box-shadow: 0 10px 20px #EEE;      /* This-color-is very light gray */
   box-shadow: 0 10px 20px #EEE;           /* This-color-is very light gray */
   z-index: 93;
}
.menu_1 ul li:hover ul {
   top: 48px;
}

.menu_1 ul ul:before {
   position: absolute;
   width: 10px;
   height: 10px;
   top: -5px;
   left: 20px;
   background: #BCD231;   /* This-color-is for menu diamond */
   content:"";
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}

.menu_1 ul ul li {
   float: none;
   font-size: 14px;
   padding: 5px 10px;
   text-align: left;
   text-transform: none; /* capitalize */
   margin: 0;
   border-bottom: 0px solid #ddd;   /* This-color-is light gray */
   line-height: 20px;
   -webkit-transition: .3s ease-in-out;
   -moz-transition: .3s ease-in-out;
   -o-transition: .3s ease-in-out;
   -ms-transition: .3s ease-in-out;
   transition: .3s ease-in-out;
}

.menu_1 ul ul a {
   color: #3D2F00;     /* This-color-is dark brown */
   text-decoration: none;
}

.menu_1 ul ul li:hover {
   background: #3D2F00;      /* This-color-is dark brown */
   color: #fff;   /* This-color-is white */
}

.menu_1 ul li ul a:hover {
   text-decoration: none;
}

/**************************************************/
.menu_books {
   left: 242px;
   top: -33px;
   overflow: visible;
   position: relative;
   z-index: 99;
}

.menu_books h3 {
   font-size: 14px;
   color: #CCC;   /* This-color-is gray */
   background: #3D2F00;   /* This-color-is dark brown */
   padding: 8px;
   margin: 0;
   line-height: 12px;
   text-align: center;
}

.menu_books ul {
   position: absolute;
   margin: 0 auto;
   list-style: none;
}

.menu_books ul li {
   float: left;
   margin: 0 0 0 20px;
   width: 188px;
   font-size: 14px;
   line-height: 14px;
}

.menu_books ul li a {
   color: #9FA617; /* This-color-is medium light green; for text */
   text-decoration: none;
}

.menu_books ul li a:hover {
   text-decoration: underline;   /* none  */
}

.menu_books ul ul {
   position: absolute;
   top: -9999px;
   background: #ccc;   /* This-color-is gray */
   opacity: .9;
   padding: 0;
   width: 230px;
   margin: 0 0 0 270px;
   -webkit-box-shadow: 0 0 20px #EEE;   /* This-color-is very light gray */
   -moz-box-shadow: 0 0 20px #EEE;      /* This-color-is very light gray */
   box-shadow: 0 0 20px #EEE;           /* This-color-is very light gray */
   z-index: 99;
}

.menu_books ul ul:before {
   position: absolute;
   width: 10px;
   height: 10px;
   top: -5px;
   left: 20px;
   background: #BCD231;   /* This-color-is for menu diamond */
}

.menu_books ul ul li {
   float: none;
   font-size: 14px;
   padding: 5px 10px;
   text-align: left;
   text-transform: none; /* capitalize */
   margin: 0;
   border-bottom: 0px solid #ddd;   /* This-color-is light gray */
   line-height: 12px;
   -webkit-transition: .6s ease-in-out;
   -moz-transition: .6s ease-in-out;
   -o-transition: .6s ease-in-out;
   -ms-transition: .6s ease-in-out;
   transition: .6s ease-in-out;
}

.menu_books ul ul a {
   color: #3D2F00;   /* This-color-is dark brown */
   text-decoration: none;
}

.menu_books ul ul li:hover {
   background: #3D2F00;    /* This-color-is dark brown */
   color: #fff;   /* This-color-is white */
}

.menu_books ul li ul a:hover {
   text-decoration: none;
}



.no-js body #accordion .element #b1 .content #b1-1 .right.red  table tr td {
   color: #FFFFFF;   /* This-color-is white */
}
.unsorted_list_no_type {
   list-style-type: none;
   margin: 0 0 0 40px;
}
.unsorted_list_type_1 {
   list-style-type: square;
   margin: -4px 0 0 0;
   line-height: 1.3;
}
.ordered_list {
   list-style:decimal; 
   margin: -4px 0 0 0;
}
.ordered_list li {
   margin: 0 0 8px -40px;
}

.team_pic_table {
   margin: 6px 0 0 -40px;
   border-spacing: 15px 1px;
   font-size: 13px;
   line-height:1.0;
   text-align: center;
   vertical-align: top;
   float: left;
   table-layout: fixed;
   width: 510px;
}
.team_pic_table td {
   width: 140px;
}
.team_pic_table img {
   max-height: 110px;
}
.team_pic_table_b{
   margin: 40px 0 0 30px;
   width: 370px;
 }
.team_pic_table_b td {
   width: 160px;
}

/*
#warning-message { display: none; }
@media only screen and (orientation: portrait){
   #wrapper {
      display: none;
   }
   #warning-message {
      display: block;
      margin-top: 428px;
      text-align: center;
      font-size: 4.14em;
      line-height:1.0;
      color: #BB1122;
   }
}
@media only screen and (orientation: landscape){
   #warning-message { 
      display: none;
   }
}*/
/* made selective for android in js */
#warning-message {
   display: none;
   margin-top: 428px;
   text-align: center;
   font-size: 4.14em; /* 58/14 */
   line-height:1.0;
   color: #BB1122;   /* This-color-is warning red */
}
#wrapper {
   display: block;
}
.test_info {
   border: 1px solid #3D2F00;   /* This-color-is dark brown */
   color: #3D2F00;              /* This-color-is dark brown */
   background-color: #3D2F00;   /* This-color-is dark brown */
   margin: 6px 0 0 12px;
 }