/* BEGIN BASE STYLES */

body{
	font-family:sans-serif;
}

.hide{ display:none; }

.axes, .axes text{
	fill: #000;
	font-size:120%;
}

.tool-tip{
	position: absolute;
	font-size:75%;
	line-height:1.3em;
	background-color: rgba(0, 0, 0, 0.8);
	color:#fff;
	border-radius: 3px;
	padding: 4px 6px 3px 7px;
	text-align: center;
	font-family: sans-serif;
	display:none;
}
	
.tool-tip.on{
	display:block;
}

line.trend{
	stroke:#ccc;
	stroke-width:2.9;
	
}

g.data circle:not(.on),
.chart nav select.countries option:not(.on){
	display:none;
}

g.data.country_on circle:not(.country_on){
	opacity:.2;
}

a.deselect.on{
	background-color:#000;
}

.chart p.info{
	font-size:115%;
	margin:30px 0;
	line-height:1.35em;
}

.chart p.info a.next,
.introduction a.start{
	margin-top: 24px;
	border-radius: 3px;
	display: table;
	width: auto;
	padding: 5px 10px 4px;
	clear: both;
	color: #fff;
	text-decoration:none;
	font-weight:bold;
}

.introduction a.start{
	background-color: #1f77b4;
	font-size:85%;
}

.introduction a.start.hide{
	display:none;
}


.chart p.info a.next span,
.introduction a.start span{
	color:#EAEAEA;
}

.chart p.info a.next:hover,
.introduction a.start:hover{
	color:#fff;
}

/* END BASE STYLES */

.chart{
	font-size:95%;
}

.chart nav{
	margin-top:18px;
	font-size:90%;
}

.chart nav div.show_hide{
	background-color:#333;
	transition:max-width 0.5s ease-out;
	max-width:165px;
}

.chart nav.on div.show_hide{
	transition:max-width 0.5s ease-out;
	width:100%;
	max-width:1200px;
}

.chart nav div.show_hide a{
	color:#fff;
	text-decoration:none;
	display:inline-block;
	padding:7px 0 6px 15px;
}

.chart nav div.show_hide a::after,
a#view-text::after{
	content:"+";
}

.chart nav.on div.show_hide a::after,
a#view-text.on::after{
	font-weight:bold; 
	content:"-";
}

a#view-text{
	font-weight:bold;
}

.chart nav div.nav{
	padding:0 15px;
	background-color:#F3F3F3;
	transition:max-height 0.7s ease-out;
	max-height:0;
	overflow:hidden;
}

.chart nav.on div.nav{
	transition:max-height 0.7s ease-out;
	height:auto;
	max-height:400px;
}

.chart nav div.nav a{
	display:inline-block;
	padding:3px 7px 2px;
	margin:4px 11px 4px 0;
	color:#fff;
	opacity:.75;
	border-radius:3px;
	text-decoration:none;
	background-color:#666;
}

.chart nav div.nav a:not(.on):not(:hover){
	background-color:#666 !important;
}

.chart nav div.nav h4.countries{
	float:left;
	margin:27px 12px 0 0;
}

.chart nav select.countries{
	font-size:85%;
	margin-top:18px;
	width:auto;
}

.chart .caption,
#text .caption{
	float:right;
	margin:0 0 5px 15px;
	width:50%;
	max-width:500px;
	background-color:#F3F3F3;
	padding:10px;
	font-size:90%;
}

.chart .caption img,
#text .caption img{
	display:block;
	width:100%;
	margin-bottom:8px;
}


#text{
	font-size:105%;
	line-height:1.3em;
}

#text .caption{
	width:30%;
}

p.introduction{
	font-size:125%;
	line-height:145%;
}

p.introduction a.start{
	font-weight:bold;
}

.notes{
	border-top:3px solid #ccc;
	border-top-style: dotted;
	padding-top:11px;
}

.notes ul{
	line-height:135%;
}

div#wpmchimpab{
	margin-top:70px;
}

@media screen and (max-width: 39.9375em) {
	.chart nav.on div.nav{
		max-height:540px;
	}
	#text .caption{
		width:50%;
	}
}