/* ------------------------------------------------------------------------- */
/* Fonts                                                                     */
/* ------------------------------------------------------------------------- */
@font-face {
	font-family: Fira;
	src: url('http://schiff.co.nz/fonts/FiraSans-Book.eot'); /* IE9 Compat Modes */
	src: url('http://schiff.co.nz/fonts/FiraSans-Book.woff') format('woff'), url('http://schiff.co.nz/fonts/FiraSans-Book.ttf') format('truetype'); 
	font-weight: normal;
	text-rendering: optimizeLegibility;
}

@font-face {
	font-family: Fira;
	src: url('http://schiff.co.nz/fonts/FiraSans-SemiBold.eot'); /* IE9 Compat Modes */
	src: url('http://schiff.co.nz/fonts/FiraSans-SemiBold.woff') format('woff'), url('http://schiff.co.nz/fonts/FiraSans-SemiBold.ttf') format('truetype');
	font-weight: bold;
	text-rendering: optimizeLegibility;
}

@font-face {
	font-family: Fira;
	src: url('http://schiff.co.nz/fonts/FiraSans-BookItalic.eot'); /* IE9 Compat Modes */
	src: url('http://schiff.co.nz/fonts/FiraSans-BookItalic.woff') format('woff'), url('http://schiff.co.nz/fonts/FiraSans-BookItalic.ttf') format('truetype'); 
	font-weight: normal;
	font-style: italic;
	text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------------------- */
/* Layout                                                                    */
/* ------------------------------------------------------------------------- */

body, html {
	padding: 0;
	margin: 0;
	height: 100%;
	min-width: 600px;
	font-family: Fira, Helvetica, Arial, Sans-Serif;
	font-size: 1em;
	overflow: hidden;
}

.title {
	font-size: 1.5em;
}

div#below {
	overflow: auto;
	position: relative;
	width: 500px;
	height: 125px;
	z-index: 200;
	top: -130px;
	left: 60px;
	margin: 0 0 -125px 0;
	opacity: 0;
}

div#info {
	overflow: auto;
	padding-top: 0.5em;
}

div#legend {
	float: left;
}

div#chart {
	padding: 0;
	width: 100%;
	position: relative;
	z-index: 100;
	opacity: 0;
}

div#about {
	font-size: 0.8em;
	padding-top: 0.8em;
}

div#about a {
	color: rgb(30, 30, 30);
}

/* ------------------------------------------------------------------------- */
/* Controls                                                                  */
/* ------------------------------------------------------------------------- */

div#controls {	
	overflow: auto;
	clear: both;
}

div#controls-title {
	float: left;
	padding-right: 110px;
}

a.region-control {
	display: block;
	float: left;
	margin: 0 12px 0 0;
	width: 55px;
	height: 55px;
	line-height: 55px;
	text-align: center;
	text-decoration: none;
	color: rgb(255, 255, 255);
	font-size: 0.7em;
	font-weight: bold;
	border-radius: 50%;
}

.Asia-control {
	background-color: rgba(152, 45, 21, 0.5);
}

.Asia-control-active {
	background-color: rgba(152, 45, 21, 1.0) !important;
}

.Europe-control {
	background-color: rgba(217, 183, 11, 0.5);
}

.Europe-control-active {
	background-color: rgba(217, 183, 11, 1.0) !important;
}

.Africa-control {
	background-color: rgba(2, 64, 28, 0.5);
}

.Africa-control-active {
	background-color: rgba(2, 64, 28, 1.0) !important;
}

.Oceania-control {
	background-color: rgba(129, 168, 141, 0.5);
}

.Oceania-control-active {
	background-color: rgba(129, 168, 141, 1.0) !important;
}

.Americas-control {
	background-color: rgba(163, 165, 118, 0.5);
}

.Americas-control-active {
	background-color: rgba(163, 165, 118, 1.0) !important;
}


/* ------------------------------------------------------------------------- */
/* Data points                                                               */
/* ------------------------------------------------------------------------- */

.Asia-1 {
	fill: rgba(127, 38, 18, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(127, 38, 18, 1.0);
}

.Asia-2 {
	fill: rgba(140, 42, 20, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(140, 42, 20, 1.0);
}

.Asia-3 {
	fill: rgba(152, 45, 21, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(152, 45, 21, 1.0);
}

.Asia-4 {
	fill: rgba(166, 49, 23, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(166, 49, 23, 1.0);
}

.Asia-5 {
	fill: rgba(179, 53, 25, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(179, 53, 25, 1.0);
}

.Europe-1 {
	fill: rgba(191, 161, 10, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(191, 161, 10, 1.0);
}

.Europe-2 {
	fill: rgba(204, 172, 10, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(204, 172, 10, 1.0);
}

.Europe-3 {
	fill: rgba(217, 183, 11, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(217, 183, 11, 1.0);
}

.Europe-4 {
	fill: rgba(229, 193, 11, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(229, 193, 11, 1.0);
}

.Europe-5 {
	fill: rgba(242, 204, 12, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(242, 204, 12, 1.0);
}

.Africa-1 {
	fill: rgba(1, 38, 17, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(1, 38, 17, 1.0);
}

.Africa-2 {
	fill: rgba(2, 51, 22, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(2, 51, 22, 1.0);
}

.Africa-3 {
	fill: rgba(2, 64, 28, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(2, 64, 28, 1.0);
}

.Africa-4 {
	fill: rgba(2, 76, 33, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(2, 76, 33, 1.0);
}

.Africa-5 {
	fill: rgba(3, 89, 39, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(3, 89, 39, 1.0);
}

.Oceania-1 {
	fill: rgba(110, 143, 119, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(110, 143, 119, 1.0);
}

.Oceania-2 {
	fill: rgba(120, 156, 130, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(120, 156, 130, 1.0);
}

.Oceania-3 {
	fill: rgba(129, 168, 141, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(129, 168, 141, 1.0);
}

.Oceania-4 {
	fill: rgba(139, 181, 151, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(139, 181, 151, 1.0);
}

.Oceania-5 {
	fill: rgba(149, 194, 162, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(149, 194, 162, 1.0);
}

.Americas-1 {
	fill: rgba(138, 140, 101, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(138, 140, 101, 1.0);
}

.Americas-2 {
	fill: rgba(151, 153, 110, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(151, 153, 110, 1.0);
}

.Americas-3 {
	fill: rgba(163, 165, 118, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(163, 165, 118, 1.0);
}

.Americas-4 {
	fill: rgba(176, 179, 129, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(176, 179, 129, 1.0);
}

.Americas-5 {
	fill: rgba(188, 191, 138, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(188, 191, 138, 1.0);
}

.Other {
	fill: rgba(120, 120, 120, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(120, 120, 120, 1.0);
}

.inactive-1 {
	fill: rgba(210, 210, 210, 0.4) !important;
	stroke: rgba(210, 210, 210, 1.0) !important;
}

.inactive-2 {
	fill: rgba(215, 215, 215, 0.4) !important;
	stroke: rgba(215, 215, 215, 1.0) !important;
}

.inactive-3 {
	fill: rgba(220, 220, 220, 0.4) !important;
	stroke: rgba(220, 220, 220, 1.0) !important;
}

.inactive-4 {
	fill: rgba(225, 225, 225, 0.4) !important;
	stroke: rgba(225, 225, 225, 1.0) !important;
}

.inactive-5 {
	fill: rgba(230, 230, 230, 0.4) !important;
	stroke: rgba(230, 230, 230, 1.0) !important;
}

.legend-dot {
	fill: rgba(30, 30, 30, 0.6);
	stroke-width: 0.5px;
	stroke: rgba(30, 30, 30, 1.0);
}

/* ------------------------------------------------------------------------- */
/* Axes                                                                      */
/* ------------------------------------------------------------------------- */

.tick path, .tick line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}

.axis path, .axis line {
	fill: none;
}

.axis text {
	font-family: Fira, Helvetica, Arial, Sans-serif;
	font-size: 1.0em;
}

/* ------------------------------------------------------------------------- */
/* clickCircle                                                               */
/* ------------------------------------------------------------------------- */

.clickCircle {
	stroke-width: 2px;
	stroke: rgb(30, 30, 30);
	fill: none;
}