/****************** LAYOUT STUFF ***************************/

.node-type-data-page  .data-page-section .call-out {
	margin-bottom: 12px;
}

/* set size of callout when not alongside copy */
.node-type-data-page  .data-page-section.copy_above .call-out {
	display: inline-block;
}

.node-type-data-page .data-page-section:last-child {
	margin-bottom: 32px;
}


.node-type-data-page .sortable-table {
	margin-bottom: 12px;
	max-width: 100%;
}

.node-type-data-page .data-page-section {
	margin-top: 16px;
}

.node-type-data-page .data-page-section:after {
	content: "";
	display: table;
	clear: both;
}

/****************** END OF LAYOUT STUFF **********************/

/******* CALOUTS *****************/

.node-type-data-page .data-page-section.index-2 .call-out,
.callout-purple {
	background-color: #A45D9D;
}

.node-type-data-page .data-page-section.index-3 .call-out,
.callout-pink {
	background-color: #e3a0a8;
}

.callout-green {
	background-color: #768E83;
}

/******* CALOUTS END ************/



/************************ TABLE STYLING **********************/

.node-type-data-page .sortable-table {
	table-layout: fixed;
}

.node-type-data-page .sortable-table td.double-border-top {
	border-top: 3px double #a39161;
}

.node-type-data-page .sortable-table td.double-border-bottom {
	border-bottom: 3px double #a39161;
}

.node-type-data-page .sortable-table tr td, .node-type-data-page .sortable-table tr th {
	text-align: right;
	font-size: 11px;
	padding: 0.2em;
}

.node-type-data-page .sortable-table tr td:first-child, .node-type-data-page .sortable-table tr th:first-child {
	text-align: left;
}

.node-type-data-page #container-table-1 .sortable-table tr:last-child td:first-child {
	font-weight: bold;
}

.node-type-data-page .sortable-table th span:before{
	content: '\25b2';
    color: #ccc;
}

.node-type-data-page .sortable-table th, .sortable-table td {
	vertical-align: bottom;
}

.node-type-data-page .sortable-table th span:after{
	content: '\25bc';
    color: #ccc;
}

.node-type-data-page .sortable-table th span {
	margin-left: 3px;
}

.node-type-data-page .sortable-table th.sorted.sorted-desc span:before, .node-type-data-page .sortable-table th.sorted.sorted-asc span:before {
	content: '\25b2';
	color: #ccc;
}

.node-type-data-page .sortable-table th.sorted.sorted-asc span:after, .node-type-data-page .sortable-table th.sorted.sorted-desc span:after {
    content: '\25bc';
    color: #ccc;
}

.node-type-data-page .sortable-table th.sorted.sorted-asc span:before {
	color: #000;
}

.node-type-data-page .sortable-table th.sorted.sorted-asc span:after {
	color: #ccc;
}

.node-type-data-page .sortable-table th.sorted.sorted-desc span:before {
	color: #ccc;
}

.node-type-data-page .sortable-table th.sorted.sorted-desc span:after {
	color: #000;
}



/**** source text *****/
.node-type-data-page #container-table-1-outer p.source-text, .node-type-data-page #container-top15-table-outer p.source-text, .node-type-data-page #container-bottom15-table-outer p.source-text{
	font-size: 11px;
	margin-bottom: 0;
}

/* No border bottom for the "Other" row in the first table beause it's on top of the totals column*/ 

.node-type-data-page #container-table-1 .sortable-table tr:nth-child(4) td {
	border-bottom: none;
} 

/* Don't display the performance arrows on smaller screens because there isn't room*/ 
/*
@media only screen and (max-width:480px){
	.node-type-data-page #container-table-1-outer #container-table-1 #totalTable thead th.performance-arrow,
	.node-type-data-page #container-table-1-outer #container-table-1 #totalTable tbody td.performance-arrow {
		display: none;
	}
}
*/
/* up/down performance indicator arrows */
.node-type-data-page #container-table-1-outer #container-table-1 #totalTable thead th.performance-arrow,
.node-type-data-page #container-table-1-outer #container-table-1 #totalTable tbody td.performance-arrow {
	padding-right: 0;
	width: 16px;
	padding-left: 16px;
}

/********* ENGLISH UP ARROW **********/
.node-type-data-page #container-table-1-outer #container-table-1 #totalTable thead th.performance-arrow.performance-arrow-up,
.node-type-data-page #container-table-1-outer #container-table-1 #totalTable tbody td.performance-arrow.performance-arrow-up {
	/* background-color: green; */
	background: url("/sites/all/themes/gold/images/arrow-up.svg") no-repeat right;
}

/********** CHINESE UP ARROW ***********/
.lang-zh-hans.node-type-data-page #container-table-1-outer #container-table-1 #totalTable thead th.performance-arrow.performance-arrow-up,
.lang-zh-hans.node-type-data-page #container-table-1-outer #container-table-1 #totalTable tbody td.performance-arrow.performance-arrow-up {
	/* background-color: green; */
	background: url("/sites/all/themes/gold/images/arrow-up-red.svg") no-repeat right;
}


.node-type-data-page #container-table-1-outer #container-table-1 #totalTable thead th.performance-arrow.performance-arrow-down,
.node-type-data-page #container-table-1-outer #container-table-1 #totalTable tbody td.performance-arrow.performance-arrow-down
 {
	background: url("/sites/all/themes/gold/images/arrow-down.svg") no-repeat right;
}

/**** CHINESE DOWN ARROW ****************/
.lang-zh-hans.node-type-data-page #container-table-1-outer #container-table-1 #totalTable thead th.performance-arrow.performance-arrow-down,
.lang-zh-hans.node-type-data-page #container-table-1-outer #container-table-1 #totalTable tbody td.performance-arrow.performance-arrow-down {
	background: url("/sites/all/themes/gold/images/arrow-down-green.svg") no-repeat right;
}

.node-type-data-page .performance-arrow img {
		width: 12px;
}


.lang-zh-hans.node-type-data-page #container-table-1-outer #container-table-1 #totalTable tbody td.performance-arrow.performance-arrow-up ~ td {
	color: green;
}

.lang-zh-hans.node-type-data-page #container-table-1-outer #container-table-1 #totalTable tbody td.performance-arrow.performance-arrow-up ~ td {
	color: red;
}

.node-type-data-page #container-table-1-outer #container-table-1 #totalTable tbody td.performance-arrow.performance-arrow-down ~ td {
	color: red;
}

.lang-zh-hans.node-type-data-page #container-table-1-outer #container-table-1 #totalTable tbody td.performance-arrow.performance-arrow-down ~ td {
	color: green;
}

.node-type-data-page #container-table-1-outer #container-table-1 #totalTable thead th:last-child{
	width:65px;
}
.node-type-data-page #container-table-1-outer #container-table-1 #totalTable thead th:first-child{
	width:40%;
	min-width: 130px;
}
/* chinese table 1 first collumn doesn;t need to be as wide  */
.lang-zh-hans.node-type-data-page #container-table-1-outer #container-table-1 #totalTable thead th:first-child{
	width: auto;
	min-width: min-width:auto;
}

/* make the tables scroll horizntally if there isn't room for them */
.node-type-data-page .main-content { /* This bit is to stop the body doing a weird scroll thing */
	overflow-x: hidden;
}
.node-type-data-page #container-table-1-outer #container-table-1, 
.node-type-data-page #container-top15-table-outer #container-top15-table,
.node-type-data-page #container-bottom15-table-outer #container-bottom15-table {
	overflow-x: auto;
	width: 100%;
}
.node-type-data-page #container-table-1-outer #container-table-1 #totalTable,
.node-type-data-page #container-top15-table-outer #container-top15-table .sortable-table,
.node-type-data-page #container-bottom15-table-outer #container-bottom15 .sortable-table {
	min-width: 434px;
}

/* colors for the top10/bottom10 tables */
.node-type-data-page #container-top15-table-outer .sortable-table tr.performance-up td,
.node-type-data-page #container-bottom15-table-outer .sortable-table tr.performance-up td {
	color: black;
}

/*** ENGLISH TOP/BOTTOM TABLES LAST ROW POSITIVE *******/
.node-type-data-page #container-top15-table-outer .sortable-table tr.performance-up td:last-child,
.node-type-data-page #container-bottom15-table-outer .sortable-table tr.performance-up td:last-child {
	color: green;
}

/*** CHINESE TOP/BOTTOM TABLES LAST ROW POSITIVE *******/
.lang-zh-hans.node-type-data-page #container-top15-table-outer .sortable-table tr.performance-up td:last-child,
.lang-zh-hans.node-type-data-page #container-bottom15-table-outer .sortable-table tr.performance-up td:last-child {
	color: red;
}

.node-type-data-page #container-top15-table-outer .sortable-table tr.performance-down td,
.node-type-data-page #container-bottom15-table-outer .sortable-table tr.performance-down td {
	color: black;
}

/*** ENGLISH TOP/BOTTOM TABLES LAST ROW NEGATIVE *******/
.node-type-data-page #container-top15-table-outer .sortable-table tr.performance-down td:last-child,
.node-type-data-page #container-bottom15-table-outer .sortable-table tr.performance-down td:last-child {
	color: red;
}

/*** CHINESE TOP/BOTTOM TABLES LAST ROW NEGATIVE *******/
.lang-zh-hans.node-type-data-page #container-top15-table-outer .sortable-table tr.performance-down td:last-child,
.lang-zh-hans.node-type-data-page #container-bottom15-table-outer .sortable-table tr.performance-down td:last-child {
	color: green;
}

.node-type-data-page #container-top15-table-outer .sortable-table tr td:first-child,
.node-type-data-page #container-bottom15-table-outer .sortable-table tr td:first-child,
.node-type-data-page #container-top15-table-outer .sortable-table tr th:first-child,
.node-type-data-page #container-bottom15-table-outer .sortable-table tr th:first-child {
	white-space: normal;
	width:45%;
	min-width: 275px;
}





/******************** END OF TABLE STYLING ******************************/

/*
.sortable-table th:first-child span:before, .sortable-table:first-child th:first-child span:after, th.not-sortable span:before, th.not-sortable span:after {
	content: none;
}
*/

/********** TOGGLE BUTTONS ********/
.node-type-data-page .month-year-buttons-div, .node-type-data-page .dollars-tonnes-buttons-div, .node-type-data-page .month-year-buttons-div, .node-type-data-page .etp-dollars-tonnes-buttons-div {
	margin: 0 auto;
	display: block;
	width: 174px;
}
.lang-zh-hans.node-type-data-page .month-year-buttons-div {
	margin: 0 auto;
	display: block;
	width: 200px;
}
.node-type-data-page .dollars-tonnes-buttons-div, .node-type-data-page .etp-dollars-tonnes-buttons-div {

	width: 150px;
}

.node-type-data-page .month-year-buttons-div button, .node-type-data-page .dollars-tonnes-buttons-div button, .node-type-data-page .etp-dollars-tonnes-buttons-div button {
	float: left;
	color: #484848;
	background-color: #E7E6E6;
	border: 1px solid #cccccc;
	margin-bottom: 8px;
	padding: 4px 12px;
	font-size: 14px;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
	height: 30px;
}

.node-type-data-page .month-year-buttons-div button:hover, .node-type-data-page .month-year-buttons-div button.active, .node-type-data-page .dollars-tonnes-buttons-div button:hover, .node-type-data-page .dollars-tonnes-buttons-div button.active, .node-type-data-page .etp-dollars-tonnes-buttons-div button.active {
	background-color: #c9c9c9;
}

.node-type-data-page .month-year-buttons-div button:first-child, .node-type-data-page .dollars-tonnes-buttons-div button:first-child, .node-type-data-page .etp-dollars-tonnes-buttons-div button:first-child {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	border-right-width: 0;
}

.node-type-data-page .month-year-buttons-div button:last-child, .node-type-data-page .dollars-tonnes-buttons-div button:last-child, .node-type-data-page .etp-dollars-tonnes-buttons-div button:last-child {
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

/******** END OF TOGGLE BUTTONS *****************/

/****************** ETF CHART ***************************/

.node-type-data-page .wgc-chart-controls {
  position: relative;
}

.node-type-data-page .wgc-chart-controls p.source-text {
	position: absolute;
	top: -76px;
	font-size: 11px;
}

.node-type-data-page .wgc-chart-controls-toolbar.export {
  position: absolute;
  top: -40px;
  right: 0;
  float: none;  
}

@media only screen and (max-width: 890px){
	.node-type-data-page .wgc-chart-controls-toolbar.export {
		position: static;
	}
	.node-type-data-page .wgc-chart-controls-toolbar.export a {
		font-size: 12px;
	}
}


.node-type-data-page .wgc-chart-controls-toolbar.countries.wgc-data {
  position: absolute;
  top: -40px;
  left: 0;
  float: none;  
}
#chart-and-buttons-container .wgc-chart-controls-toolbar.countries.wgc-data{
	top:0px;
}
.node-type-data-page .wgc-chart-controls-toolbar {
	list-style: none;
}
.node-type-data-page .wgc-chart-controls-toolbar ul {
	margin:0px;
}

.node-type-data-page .wgc-chart-controls-toolbar li {
	float: left;
	color: #fff;
	padding: 6px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
	background: #768E83;
	list-style: none;
    border: 1px solid #768E83;
}

.node-type-data-page .wgc-chart-controls-toolbar li:first-child {
	border-radius: 3px 0 0 3px;
}

.node-type-data-page .wgc-chart-controls-toolbar li:last-child {
	border-radius: 0 3px 3px 0;
}

.node-type-data-page .wgc-btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background: #e6e6e6;
    border-left-width: 0;
}

.node-type-data-page .wgc-data .wgc-btn.wgc-btn-small {
    font-size: 12px;
    padding: 3px 8px;
}

.node-type-data-page .wgc-btn-group > .wgc-btn {
    position: relative;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.node-type-data-page .wgc-btn-group > .wgc-btn:first-child {
    margin-left: 0;
    border-left-width: 1px;
    -webkit-border-bottom-left-radius: 3px;
    border-bottom-left-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    border-top-left-radius: 3px;
    -moz-border-radius-bottomleft: 3px;
    -moz-border-radius-topleft: 3px;
}

.node-type-data-page .wgc-btn-group > .wgc-btn:last-child {
    -webkit-border-top-right-radius: 3px;
    border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.node-type-data-page .wgc-btn-group > .wgc-btn.active {
	background-color: #c9c9c9;
}

.node-type-data-page .wgc-btn-group > .wgc-btn:hover,.node-type-data-page .wgc-btn-group > .wgc-btn:active,.node-type-data-page .wgc-btn-group > .wgc-btn:focus {
	background-color: #c9c9c9;
	transition: background-color 200ms linear;
	text-decoration: none;
}

@media only screen and (max-width: 448px){
	.node-type-data-page .wgc-chart-controls-toolbar li, .node-type-data-page p.source-text, .node-type-data-page .wgc-chart-controls-toolbar.export a, .node-type-data-page #chart1-controls .chart1-controls-toolbar.export a {
		font-size: 10px;
		margin-bottom: 10px;
	}
}


/********** END OF ETF CHART ***************************/

/******* SECOND CHART (It's the first one now. We swapped them around) ******************/

.node-type-data-page  #chart-and-buttons-container {
	position: relative;
}
.node-type-data-page  #chart-and-buttons-container p.source-text {
	position: absolute;
	top: 400px;
	font-size: 11px;
	left: 12px;
}

.node-type-data-page  #chart-and-buttons-container #chart1-controls .chart1-controls-toolbar.export, 
.node-type-data-page  #monthly-flows-chart-and-buttons-container .chart2-controls-toolbar.export {
	position: static;
	float: right;
}

.node-type-data-page  #chart-and-buttons-container .wgc-chart-controls-toolbar.countries,
.node-type-data-page  #monthly-flows-chart-and-buttons-container .wgc-chart-controls-toolbar.countries {
	position: static;
	float: left;
	margin-bottom: 16px;
}




/* 
We can't make the marginBottom of the chart responsive 
and we need it to be large enough for when the legend wraps on smaller screens,
so we're moving the legend up, then using negative margin on the div below the chart to move that up and close the gap 
*/
/*
@media only screen and (min-width:354px){
	.node-type-data-page  .data-page-section.index-1 {
		margin-top: -17px;
	}

	.node-type-data-page  #chart-and-buttons-container g.highcharts-legend {
		transform: translate(36px, 325px);
	}
}
*/

@media only screen and (max-width:353px){
	.node-type-data-page  .data-page-section.index-1 {
		margin-top: -30px;
	}

	.node-type-data-page  #chart-and-buttons-container g.highcharts-legend {
		transform: translate(36px, 322px);
	}
}

@media only screen and (max-width: 810px){
	.node-type-data-page #chart1-controls .wgc-chart-controls-toolbar.countries {
		margin-bottom: 0;
	}
	.node-type-data-page #chart-and-buttons-container #chart1-controls .chart1-controls-toolbar.export {
		float: left !important;
		width: 100%;
	}
}	

/******* END OF SECOND CHART ******************/

.node-type-data-page  .text-placeholder p + h3 {
	margin-top: 16px;
}

.node-type-data-page p.in-page-tools + p {
	font-weight: normal;
}

/******* WRAPPING FOR THE TEXT NEXT TO THE TOP/BOTTOM FLOWS TABLES **********/

@media only screen and (min-width:1024px) {
	.node-type-data-page .data-page-section.index-2.copy_left.split-70-30 .text-placeholder,
	.node-type-data-page .data-page-section.index-1.copy_left.split-70-30 .text-placeholder {
		width: 100%;
		float: none;
	}

	.node-type-data-page .data-page-section.index-2.copy_left.split-70-30 .call-out,
	.node-type-data-page .data-page-section.index-1.copy_left.split-70-30 .call-out {
		width: calc( 30% - 26px );
	}

	.node-type-data-page .data-page-section.index-2.copy_left.split-70-30 .html-embed,
	.node-type-data-page .data-page-section.index-1.copy_left.split-70-30 .html-embed {
		margin-left: 12px;
	}

}

.node-type-data-page .call-out sup {
	vertical-align: super;
}