.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
 }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; border:none !important;}
/* close commented backslash hack */



body {
	font-family: 'Open Sans', sans-serif;
	color:#333;
	font-size:12px;
}
#wrapper {
	width: 80%;
	max-width: 1040px;
	min-width: 960px;
	margin:20px auto;
}
#viz {
	width:100%;
	height: 100%;
	position: relative;
}
#viz #help {
	position: absolute;
	top: -5px;
	left: 0;
	right: 0;
	
	background-image: url(../img/help.png);
	background-color:rgba(255,255,255,0.6);
	background-position: 0px 55px;
	background-repeat: no-repeat;
	height:0;
	opacity: 0;

	-webkit-transition: opacity 0.5s ease-out, height 0.5s ease-out;
	-moz-transition: opacity 0.5s ease-out, height 0.5s ease-out;
	-ms-transition: opacity 0.5s ease-out, height 0.5s ease-out;
	-o-transition: opacity 0.5s ease-out, height 0.5s ease-out;
	transition: opacity 0.5s ease-out, height 0.5s ease-out;
}
#viz #help.visible {
	opacity: 1;
	height:100%;
	cursor: pointer;
}
.ie8 #viz #help {
	opacity: 1;
	bottom: 0;
	height:100%;
	background: #fff;
}
.ie8 #viz #help div {
	margin:20px auto;
	width:400px;
	border:1px solid #ddd;
	background-color:#eee;
	font-size:13px;
	padding:10px;
}
#viz #help.lower {
	background-position: 0 200px;
}
#viz #topFilters {
	margin-left: 130px;
	margin-bottom: 30px;
}
#viz #topFilters > ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
#viz #topFilters > ol li {
	float:left;
	
	width:180px;
	margin:0 20px 0 0;

    border-bottom:2px solid #2e2e2e;
	
	height: 100%;
    min-height: 30px;
    position: relative;
}
#viz #topFilters > ol li.help {
	float:right;
	width: 30px;
	margin: 0;
	height: 100%;
    min-height: 30px;
    position: relative;

    border-bottom: none;
    text-align:center;

}

.blink {
   	-moz-animation: blink 1s ease 2s 10 normal;
	-webkit-animation: blink 1s ease 2s 10 normal;
	animation: blink 1s ease 2s 10 normal;
}
.blink a {
	background-color:#fab153 !important;
}
@-moz-keyframes blink {
	0% {opacity: 1}
	50% {opacity: 0}
	100% {opacity: 1}
}
@-webkit-keyframes blink {
	0% {opacity: 1}
	50% {opacity: 0}
	100% {opacity: 1}
}
@keyframes blink {
	0% {opacity: 1}
	50% {opacity: 0}
	100% {opacity: 1}
}

#viz #topFilters > ol li a{
	margin:0;/* 15px;*/
	padding:0;
	font-size:11px;
	line-height: 25px;
	text-decoration: none;
	color:#333;
	display: block;
	font-weight: bold;
	position: absolute;
	bottom: 0;
	width: 180px;
}
#viz #topFilters > ol li a:hover {
	color:#000;
}
#viz #topFilters > ol li.help a {
	font-size: 27px;
	line-height: 30px;
	color: #ddd;
	width: 30px;
	position: relative;
	
    -webkit-border-radius: 15px;
	border-radius: 15px;
	background:#ddd;
	color:#333;
}
#viz #topFilters > ol li.help a:hover {
	background:#333;
	color:#ddd;
}
#viz #topFilters > ol li.help span {
	font-size: 10px;
	display: block;
	line-height: 10px;
	color:#ccc;
}
#viz #topFilters > ol li a i {
	float: right;
	padding-left: 11px;
	color:#ccc;
}
#viz #topFilters > ol li a:hover i {
	color:#333;
}
#viz #topFilters > ol li a i.icon-up-open {
	display: none;
}
#viz #topFiltersOptions {
	display: none;
}

#viz #topFilters.open > ol li a i.icon-down-open {
	display: none;
}
#viz #topFilters.open > ol li a i.icon-up-open {
	display: inline;
	/*border-left:1px solid #ddd;*/
}
#viz #topFilters.open #topFiltersOptions {
	display: block;
}
#viz #topFiltersOptions > div.filter {
	float: left;
	width: 148px;
	margin: 3px 22px 0 0;
	/*-webkit-border-radius: 0px 0px 5px 5px;
	border-radius: 0px 0px 5px 5px;*/
	background-color: #fafafa;
	padding-left: 15px;
	padding-bottom: 15px;
	padding-right: 15px;
	/*border:1px solid #ccc;*/
}
#viz #vizContainer {
	position: relative;
	min-height: 560px;
}
#viz #vizContainer #loading {
	width:120px;
	height:40px;
	position: absolute;
	z-index: 9999;
	border: 1px solid #aaa;
	font-size: 12px;
	color:#333;
	line-height: 40px;
	text-align: center;
	background: #fff;
	left:320px;
	top:50px;
}
.ie8 #viz #vizContainer #loading {
	display: none;
}
#viz .viz {
	float:left;
	position: relative;
}
#viz .viz ul {
	list-style: none;
	margin:0;
	padding:0;
}
#viz #prod_export {
	width:130px;
	margin-top: 120px;
	position: relative;
}
#viz #export_export {
	width:140px;	
}
#viz #export_export svg {
	margin-left: 20px;
}
#prod_export h2 {
	margin:0;
	padding:0;
	font-size: 16px;
}
#prod_export #year h2 {
	color:#999;
}
.perc {
	color:#999;
	fill:#999;
}
#filters {
	width:20%;
	float:left;
	
	margin-top:50px;
	display: none;
}
.filter {
	margin-bottom:30px;
	background-color: #fefefe;
	/*border: 1px solid #ddd;
	-webkit-border-radius: 5px;
    border-radius: 5px;*/
    /*padding:5px;*/
    position: relative;
}
.filter ul {
	list-style: none;
	margin:0;
	padding:0;
}
.filter li {
	position: relative;
}
.filter li.hidden {
	display: none;
}
.filter li.inactive {
	opacity: 0.5;
	font-style: italic;
}
.filter a {
	text-decoration: none;
	color: #999;
}
.filter li.inactive a,
.filter li.inactive a:hover {
	cursor: default;
	color:#999;
}
.filter a:hover {
	color:#db0031;
}
.filter a.selected {
	color:#333;
	font-weight: bold;
}
.filter a.selected:hover {
	color:#db0031;
}
.filter a i {
	font-size: 13px;
	float: left;
}
.filter a .icon-circle,
.filter a .icon-ok {
	display:none;
}
.filter a.selected .icon-circle,
.filter a.selected .icon-ok {
	display: block;
}
.filter a .icon-circle-empty,
.filter a .icon-cancel {
	
}
.filter a.selected .icon-circle-empty,
.filter a.selected .icon-cancel {
	display:none;
}
.filter a.hidden {
	display: none;
}
.filter a span {
	display: block;
	float: left;
	max-width: 129px;
}
.filter h3 {
	margin: 0;
	padding: 0;
	/*border-top: 1px solid #ccc;*/
	padding-top: 3px;
}
#fArea {
	position: absolute;
	top:45px;
	left:107px;
	background: transparent;
	border:none;
	z-index: 9999;
}
#fArea ul li{
	height:55px;
	font-weight: normal;
	text-transform: uppercase;
	font-size:11px;
}
#fArea .icon-ok {
	visibility: hidden;
}
#fArea .icon-cancel {
	visibility: hidden;
}
#fArea a.selected .icon-cancel,
#fArea a.unselected .icon-ok {
	display:inline;
}
#fArea a.selected .icon-ok,
#fArea a.unselected .icon-cancel {
	display:none;
}
#fArea a.selected:hover .icon-cancel {
	visibility: visible;
}
#fArea a.unselected:hover .icon-ok {
	visibility: visible;
}
#fIndicator {
	-webkit-border-radius: 5px;
	border-radius: 5px;
	margin-right: 15px;
	background-color: #f9f9f9;
	padding: 0 5px;
	position: absolute;
	left: 0;
	bottom: 0;
	min-height: 80px;
}
#fIndicator h3 {
	font-size: 10px;
	text-transform: uppercase;
	margin-bottom: 5px;
}
#fIndicator.legend {
	
}
#fIndicator svg {
	display: none;
}
#fIndicator.legend svg {
	display: block;
}
#fIndicator svg circle {
	stroke-width:1px;
	stroke:#888;
	fill:rgba(150,150,150,0.2);
}
#fIndicator svg line {
	stroke-width:1px;
	stroke:#888;
	fill:none;
	shape-rendering: crispEdges;
	stroke-dasharray: 1, 1;
}
#fIndicator svg text {
	fill:#666;
	text-anchor:end;
	font-size:10px;
}
g.arrow text.a-dir {
	font-size: 9px;
	fill:#ddd;
}
g.arrow line {
	stroke:#ccc;
	stroke-width:2;
	shape-rendering: crispEdges;
}
g.arrow g.grid line {
	stroke:#dfdfdf;
	stroke-width:1;
	shape-rendering: crispEdges;
	stroke-dasharray: 3, 2;
}
g.arrow line.gauge {
	stroke:#333;
	stroke-width:1;
	shape-rendering: crispEdges;
	stroke-dasharray: 3, 2;
}
g.arrow line.gauge.hidden {
	display: none;
}
g.arrow g.grid text {
	fill:#bbb;
	text-transform: none;
}
g.arrow path {
	stroke:none;
	fill:#ccc;
}
g.arrow text {
	text-transform: uppercase;
	font-size:10px;
}
g#areas g.area {
	pointer-events: all;
}

g#areas .bars-icon {
	cursor: pointer;
}
g#areas .bars-icon rect.bar {
	fill:#aaa;
	stroke:none;
	shape-rendering: crispEdges;
}
g#areas .bars-icon text.info {
	font-size:9px;
	display: none;
}
g#areas .bars-icon rect.ux {
	fill-opacity:0;
}
g#areas .bars-icon:hover .bar {
	fill:#333;
}
g#areas .bars-icon:hover text {
	font-weight: bold;
}

g#areas .bars-icon text.info {
	font-weight: normal;
	fill:crimson;
}
g#areas .bars-icon:hover text.info.open,
g#areas .bars-icon.expanded:hover text.info.close {
	display: block;	
}
g#areas .bars-icon:hover text.info.close,
g#areas .bars-icon.expanded:hover text.info.open {
	display: none;	
}
g#areas g.label-hide circle {
	stroke:#aaa;
	stroke-width:2;
	fill:#aaa;
	cursor: pointer;
}
g#areas g.label-hide text.info {
	font-size: 9px;
	display: none;
	fill:crimson;
}
g#areas g.label-hide:hover circle {
	stroke:#333;
	stroke-width:2;
	fill:#333;
	cursor: pointer;
}
g#areas g.label-hide.off circle{
	stroke:#aaa;
	fill:#fff;
}
g#areas g.label-hide.off:hover circle{
	stroke:#333;
	fill:#fff;
}
g#areas g.label-hide:hover text.open,
g#areas g.label-hide.off:hover text.close {
	display: none;	
}
g#areas g.label-hide:hover text.close,
g#areas g.label-hide.off:hover text.open {
	display: block;	
}
g#areas text.icon {
	display: none;
	cursor: pointer;
	font-weight: bold;
}
g.year line,
g#areas line {
	stroke:#ccc;
	stroke-width:1;
	shape-rendering: crispEdges;
}
g#areas text {
	text-anchor:start;
	font-size: 11px;
	text-transform: uppercase;
}
g.country {
	cursor: pointer;
}
g.country circle {
	fill-opacity:0.6;
	stroke-width:0.5;
	stroke-opacity:1;
}
g.country:hover circle,
g.country.hover circle,
g.country.selected circle {
	stroke:#333 !important;
	stroke-width:2 !important;
	fill-opacity:0.8;
}

g.country-bar circle {
	fill:#333;
}
g.country-bar line {
	fill:none;
	stroke:#aaa;
	stroke-width:1;
}
g.country-bar rect {
	fill:#999;
	stroke:none;
	stroke-width:0;
	shape-rendering: crispEdges;
}
g.country-bar rect.hover {
	fill:#000;
	stroke:none;
	fill-opacity:0;
}
g.country-bar circle {
	fill:#999;
	stroke:#fff;
	stroke-width:2;
}
g.country-bar.hover rect,
g.country-bar:hover rect {
	fill:#333;
	stroke:#ccc;
}
g.country-bar.hover circle,
g.country-bar:hover circle {
	fill:#fff;
	stroke:#333;
}
g.country-bar.selected rect,
g.country-bar.selected circle {
	fill:#a0091d;
	stroke:#fff;
}
g.country-bar text {
	text-anchor:end;
	font-size: 11px;
	text-transform: uppercase;
}
g.country-bar.selected text,
g.country-bar.hover text,
g.country-bar:hover text {
	font-weight: bold;
}
#tooltip {
	background-color:#333;
	color:#fff;
	width:150px;
	height:85px;
	position: absolute;
	z-index: 9999999;
	padding: 5px 10px 10px;
	-webkit-border-radius: 5px;
    border-radius: 5px;
    display: none;
    color:#eee;
}
#tooltip h3 {
	font-size: 14px;
	margin: 0 0 2px 0;
	padding: 0;
	color:#fff;
	font-weight: normal;
	white-space: nowrap;
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: capitalize;
	border-bottom: 1px solid #555;
}
/*
#tooltip #ttGDP {
	display: none;
}
#tooltip #ttPop {
	display: none;
}
*/

#tooltip #ttExpPP {
	display: none;
}
#tooltip #labelExp,
#tooltip #labelGDP,
#tooltip #labelPopulation,
#tooltip #labelExpPP {
	font-weight: bold;
}
#tooltip.gdp #ttGDP {
	display: inline;
}
#tooltip.pop #ttPop {
	display: inline;
}
#tooltip .icon-down-dir {
	position: absolute;
	bottom: -5px;
	left: 61px;
	color: #333;
	font-size: 20px;
	height: 18px;
	overflow: hidden;
}

g.country text {
	font-size: 11px;
	fill:#333;
	text-anchor:middle;
	stroke:none;
	display: none;
	text-transform: capitalize;
}
/*g.country:hover text,*/
g.country.selected text {
	display: block;
}


g#totalSrc rect.total {
	fill:#ddd;
	fill-opacity:0.6;
	stroke:#ddd;
	stroke-width:1;
}
g#totalSrc rect.part {
	fill:#333;
	fill-opacity:0.8;
	stroke:none;
}
g#totalSrc text {
	font-size: 15px;
	font-weight: bold;
	fill:#555;
	/*text-anchor:middle;*/
	text-anchor:end;
}
g#totalSrc text.outside-box {
	fill:#fff;
	text-anchor:start;
}
g#totalDst rect.total {
	fill:#fff;
	fill-opacity:0.3;
	stroke:#aaa;
	stroke-width:1;
	stroke-dasharray: 3,3;
}
g#totalDst rect.part {
	fill:#333;
	fill-opacity:0.8;
	stroke:none;
}
g#totalDst g g text {
	font-size: 11px;
	fill:#333;
	text-anchor:start;
	fill-opacity:0.6;
}
g#totalDst g g text.qta,
g#totalDst g g text.bold {
	display:none;
}
g#totalDst g g text.bold {
	font-weight: bold;
}

g#totalDst g:hover g text{
	fill-opacity:1;
}
g#totalDst g:hover g text.bold,
g#totalDst g:hover g text.qta {
	display:block;
}
g#totalDst g g text.perc {
	fill:#333;
	font-weight: bold;
	font-size:15px;
}
g#totalDst g g rect.bg,
g#totalDst g g path.bg {
	display: none;
	fill:#333;
}
g#totalDst g:hover rect.bg,
g#totalDst g:hover path.bg {
	display: block;
}
g#totalDst g:hover text {
	fill:#fff !important;
	fill-opacity:1;
}
g#totalDst g.compact g text.perc {
	font-size: 11px;
}
g#totalDst g.compact:hover g text.perc {
	font-size: 11px;
	fill:#333 !important;
}
g#totalDst g.compact rect.total,
g#totalDst g.compact rect.part,
g#totalDst g.compact .bg,
g#totalDst g.compact text.bold,
g#totalDst g.compact text.qta {
	display: none !important;
}

#export_timeseries {
	width: 1050px;
}
#export_timeseries .svg {
	margin-left: 70px;
	/*width: 830px;*/
	float: left;
}

#export_timeseries svg path {
	
}
#export_timeseries line.axis {
	fill: none;
	stroke: #000;
	stroke-width: 1;
	shape-rendering: crispEdges;
}
#export_timeseries text.x-label {
	font-size:12px;
}
#export_timeseries text.y-label {
	font-size:11px;
}
#export_timeseries line.grid {
	fill: none;
	stroke: #ddd;
	stroke-width: 1;
	stroke-dasharray: 3, 1;
	shape-rendering: crispEdges;
}
#export_timeseries rect.total {
	fill:#ddd;
	fill-opacity:0.6;
	stroke:#ddd;
	stroke-width:1;
}
#export_timeseries rect.part {
	fill:#333;
	fill-opacity:0.8;
	stroke:none;
}
#export_timeseries #export_data {
	float: left;
	width:100px;
	height:100px;
}

g#totalExport text.exports {
	font-size: 12px;
	fill:#666;
	text-anchor:end;
	fill-opacity:1;
}
g#totalExport text.bold {
	font-weight: bold;
}

g#totalExport:hover text{
	fill-opacity:1;
}
g#totalExport:hover text.bold {
	display:block;
}
g#totalExport text.tt{
	text-transform: uppercase;
	fill:#aaaaaa;
	font-size:10px;
}
g#totalExport text.perc{
	fill:#aaaaaa;
	font-size:15px;
	font-weight: bold;
	fill-opacity:1;
	text-anchor:end;
}
/******************* STACKCHART *********************/

#export_timeseries h2 {
	text-align: center;
}

#export_timeseries svg {
	font-size: 10px;	
}
#export_timeseries svg text {
	fill:#333;	
}
#export_timeseries svg text.rule {
	
}
#export_timeseries svg line {
	shape-rendering: crispEdges;
}
#export_timeseries svg g.vrule.hover text {
	font-weight: bold !important;
	fill: #000;
	font-size:12px;
}
#export_timeseries svg g.vrule.selected text {
	font-weight: bold !important;
	fill: #000;
	font-size:13px;
}
#export_timeseries svg g.vrule line {
	stroke:#333;
	stroke-opacity: 0.4;
	stroke-dasharray: 3, 2;
}
#export_timeseries svg g.vrule.selected line,
#export_timeseries svg g.vrule.hover line {
	stroke:#333;
	stroke-opacity:1;
}
#export_timeseries path {
	fill-opacity:0.8;
	stroke-opacity:0.4;
	stroke:#333 !important;
}
#export_timeseries svg g.vlabel {
	cursor: pointer;
}
#export_timeseries svg g.vlabel.hover *{
	display: block;
}
#export_timeseries svg g.vlabel text {
	display: none;
	fill:#fff;
	font-size:12px;
	font-weight: bold;
}
#export_timeseries svg g.vlabel rect {
	display: none;
	fill:#333;
	fill-opacity:0.8;
	stroke:none;
	stroke-width:1;
}
#export_timeseries svg g.vlabel circle {
	display: none;
	fill:#333;
	stroke:none;
	stroke-width:2;
}

#export_timeseries svg g.vlabel rect.ux {
	fill:#000;
	display: block;
}
/******************* COLORS *********************/
.North-America {
	fill:#E31A1C;
	stroke:#E31A1C;
}
.South-Central-America-and-Caribbean {
	fill:#FEC44F;
	stroke:#FEC44F;
}
.Africa {
	fill:#FF7F00;
	stroke:#FF7F00;
}
.Oceania {
	fill:#2888CC;
	stroke:#2888CC;
}
.Rest-of-the-World {
	fill:#AAAAAA;
	stroke:#AAAAAA;
}
.Asia {
	fill:#8856A7;
	stroke:#8856A7;
}
.Asia-Middle-East {
	fill:#64379F;
	stroke:#64379F;
}
.Asia-South-East {
	fill:#C51B8A;
	stroke:#C51B8A;
}
.Europe-EU-27,
.Europe-EU-28 {
	fill:#31A354;
	stroke:#31A354;
}
.Europe-Others-extra-EU-27,
.Europe-Others-extra-EU-28 {
	fill:#7FCDBB;
	stroke:#7FCDBB;
}