/**********************************************
	BANNER IMAGES AND TOP CIRCLE ICONS
***********************************************/

.general-commodity section.banner-content {background-image:url(../img/bgs/general-v2.jpg);background-position:center center;}
.soy-commodity section.banner-content {background-image:url(../img/bgs/soy-bg.jpg);}
.timber--pulp-commodity section.banner-content {background-image:url(../img/bgs/timber-bg.jpg);}
.palm-commodity section.banner-content {background-image:url(../img/bgs/palm-v2.jpg); background-position:center center;}
.cattle-commodity section.banner-content {background-image:url(../img/bgs/cattle-v2.jpg);}
.cocoa-commodity section.banner-content {background-image:url(../img/bgs/cocoa-bg.jpg);}

.commodity .whats-the-issue {
	background-image:url(../img/bgs/special/dotted_ring_341.png);
}

.header-photo-attribution {
	position:absolute;
	bottom:10px;
	right:10px;
	text-align:right;
	max-width:300px;
}
.header-photo-attribution a {
	color:#fff;
	font-size:12px;
}


.commodity .whats-the-issue > a {
  background-position: center center;
  background-size: 80% auto;
  border: 3px solid rgba(255, 255, 255, 0.7);
  height: 320px;
  width: 320px;
  background-size:70%;
  cursor:default;
}

.general-commodity .whats-the-issue > a {
  background-color: rgba(136, 121, 101, 0.7);
  background-image: url("/img/icons/commodities/general-white.png");
}
.soy-commodity .whats-the-issue > a {
  background-color: rgba(165, 206, 57, 0.7);
  background-image: url("/img/icons/commodities/soy-white.png");
}
.timber--pulp-commodity .whats-the-issue > a {
  background-color: rgba(199, 124, 30, 0.7);
  background-image: url("/img/icons/commodities/timber-white.png");
}
.palm-commodity .whats-the-issue > a {
  background-color: rgba(87, 140, 126, 0.7);
  background-image: url("/img/icons/commodities/palm-white.png");
}
.cattle-commodity .whats-the-issue > a {
  background-color: rgba(249, 174, 25, 0.7);
  background-image: url("/img/icons/commodities/cattle-white.png");
}
.cocoa-commodity .whats-the-issue > a {
  background-color: rgba(203, 58, 59, 0.7);
  background-image: url("/img/icons/commodities/cocoa-white.png");
  background-image: url("/img/icons/commodities/cocoa-white.svg"), linear-gradient(transparent, transparent);
}

.commodity .whats-the-issue {
  height: 320px;
  width: 320px;
  padding:20px;
}

.commodity-name {
  background-color: #ffffff;
  border-radius: 100px;
  bottom: 0;
  color: #897a66;
  font-family: roboto condensed;
  font-size: 16px;
  font-weight: bold;
  height: 107px;
  line-height: 107px;
  padding: 0;
  position: absolute;
  right: 0;
  text-transform: uppercase;
  width: 107px;
}

/**********************************************
	MENU
***********************************************/

/* Active Menu Items*/

.general-commodity .main-menu li.commodity.c-general > a {color:#887965;}
.soy-commodity .main-menu li.commodity.c-soy > a {color:rgb(165, 206, 57);}
.timber--pulp-commodity .main-menu li.commodity.c-timber--pulp > a {color:#C77C1E;}
.palm-commodity .main-menu li.commodity.c-palm > a {color:#578C7E;}
.cattle-commodity .main-menu li.commodity.c-cattle > a {color:#F9AE19;}
.cocoa-commodity .main-menu li.commodity.c-cocoa > a {color:#CA3939;}

.general-commodity .main-menu li.commodity.c-general {background-image:url(../img/icons/menu/general-active.png);}
.soy-commodity .main-menu li.commodity.c-soy {background-image:url(../img/icons/menu/soy-active.png);}
.timber--pulp-commodity .main-menu li.commodity.c-timber {background-image:url(../img/icons/menu/timber-active.png);}
.palm-commodity .main-menu li.commodity.c-palm {background-image:url(../img/icons/menu/palm-active.png);}
.cattle-commodity .main-menu li.commodity.c-cattle {background-image:url(../img/icons/menu/cattle-active.png);}

.cocoa-commodity .main-menu li.commodity.c-cocoa {background-image:url(../img/icons/menu/cocoa-active.png);}
.cocoa-commodity .main-menu li.commodity.c-cocoa {background-image:url(../img/icons/menu/cocoa-active.svg), linear-gradient(transparent, transparent);}


/**********************************************
	SLIDER BUTTONS
***********************************************/


.general-commodity .slider-toggles a, .general-commodity .slider-controls > a {background-color:#887965}
.soy-commodity .slider-toggles a, .soy-commodity .slider-controls > a  {background-color:rgb(165, 206, 57);}
.timber--pulp-commodity .slider-toggles a, .timber--pulp-commodity .slider-controls > a  {background-color:#C77C1E}
.palm-commodity .slider-toggles a, .palm-commodity .slider-controls > a  {background-color:#578C7E}
.cattle-commodity .slider-toggles a, .cattles-commodity .slider-controls > a  {background-color:#F9AE19}
.cocoa-commodity .slider-toggles a, .cocoa-commodity .slider-controls > a  {background-color:#CA3939}


/**********************************************
	COMMODITY DESCRIPTION
***********************************************/

.commodity-description-wrapper {
  background-color: #a5ce39;
  line-height: 1.3em;
  padding: 40px 17px 40px 63px;
}
@media screen and (max-width: 900px){
	 .commodity-description-wrapper {padding:40px;}
}
/* general has the same color as the sidebar, so we add a border */
.general-commodity .commodity-description-wrapper {
  border-left: medium dotted #ffffff;
}
.commodity-description-wrapper * {color:#FFF;}
.commodity-description-wrapper h1 {font-size:30px; padding-bottom:20px;}

.general-commodity  .commodity-description-wrapper {background-color: #887965;}
.soy-commodity  .commodity-description-wrapper {background-color: #a5ce39;}
.timber--pulp-commodity  .commodity-description-wrapper {background-color: #C77C1E;}
.palm-commodity  .commodity-description-wrapper {background-color: #578C7E;}
.cattle-commodity  .commodity-description-wrapper {background-color: #F9AE19;}
.cocoa-commodity  .commodity-description-wrapper {background-color: #CA3939;;}

/***********************************************
	COMMODITY BLOCKS
***********************************************/

.commodity-context {
  padding: 20px 0;
}

/***********************************************
	SPECIAL RULES
***********************************************/
.general-commodity .commodity-stat > em, .general-commodity .commodity-stat > span {display:none;} /* don't show units on general */