@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,700');
body {
  /*overflow: hidden;*/
  margin: 0;
  font-size: 10px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  color: #292929;
}

a {
	text-decoration: none;
	color: #6B6B6B;
}

#credits {
	position: absolute;
	left: 760px;
	top: 700px;
	z-index: 100;
}

.creditText {
	text-align: right;
	font-size: 9px;
	font-weight: 300;
	color: #6B6B6B;
}

#titleAll {
  font-family: Oswald;
  font-size: 24px;
  font-weight: 300;
  padding: 10px 0px 0px 20px;
  /*text-transform: uppercase;*/
}

#rule{
  height:1px;
  background:#ddd;
  width:700px;
}

#callOut {
	position: absolute;
	left: 200px;
	top: 250px;
	width: 310px;
	height: 136px;
	font-size: 11px;
	visibility: hidden;
 /* background: rgba(253,253,191,0.8);*/
  pointer-events: none;
   z-index: 20px;
   padding:6px;
   border:2px dashed black;
}



.callOutTitle {
	font-family: Oswald;
	font-size: 18px;
	font-weight: 300;
	padding-bottom: 2px;
}

#callOutrule{
  height:1px;
  background: #B3B3B3;
  width:225px;
  margin-bottom: 6px;
}

table.fixed { table-layout:fixed; width:310px;}
table.fixed td { overflow: hidden; }

#callOutCountryWrapper {
	position: absolute;
	left: 200px;
	top: 250px;
	width: 300px;
	height: 50px;
	visibility: hidden;
}

#explanation {
	font-size: 18px;
	top: 200px;
	left: 50px;
	width: 550px;
	line-height: 150%;
}

#explanationIntro {
	font-size: 12px;
	top: 475px;
	left: 50px;
	width: 550px;
	line-height: 180%;
	color: #5E5E5E;
}

.expl-text {
	position: absolute;
	text-align: center;
}

#section {
  position: absolute;
  top: 60px;
  left: 650px;	
  width: 320px;
  visiblity: hidden;
}

#sectionTitle {
  font-family: Oswald;
  font-size: 18px;
  font-weight: 300;	
  padding-bottom: 7px;
}

#sectionText {
	color: #6B6B6B;
	text-align: justify;
	line-height: 150%;
}

#Help{
  width:6%;
  position: absolute;
  left:1240px;
}

#clickerWrapper {
  z-index: 10;
  display: block;
  position: absolute;
  width: 360px;
  top: 610px;
  visibility: auto;
/*  border: 2px solid black;*/
  left:960px;

}
#HelpRect{
  width:1000px;
  height:900px;
  background: black;
  opacity:0.6;
}

#progressButtonWrapper{
	text-align: center;
	position: relative;
	width: 360px;
	height: 30px;
	margin: 0 auto;
/*  border: 2px solid black;*/

}

#progress {
  z-index: 1;
  display: block;
  position: relative;
  width: 30%;
  height: 6px;
  margin-left:30px;
  padding-bottom: 30px;
  visibility: hidden;
}
		
.progressButton {
  display: block;
  font-family: Oswald;
  font-size: 20px;
  font-weight: 300;
  position: relative;
  /*width: 80px;*/
  text-align: center;
  width: 20%;
  margin: 0 auto;
  border: 1px solid;
  cursor: pointer;
  display:inline-block;
}

.activeButton {
  color: #363636;
  border-color: #363636;
  cursor: pointer;
}

.inactiveButton {
  color: #D3D3D3;
  border-color: #D3D3D3;
  cursor: default;
  pointer-events: none;
}

.space{
	position: relative;
	width:  2%;
	height: 10px;
	display:inline-block;
	cursor: default;
}	

.circleBase {
	position: relative;
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    width: 10px;
    height: 10px;
    border: 1px solid #D3D3D3;
	top: -5px;
	display:inline-block;
    background: white;
}

#viewOuterWrapper {
  top: 0;
  display: block;
  position: absolute;
  width: 300px;
  top: 742px;
  left: 25px;
}

.view {
  font-size: 12px;
  width: 12%;
}

.activeButtonView {
  color: #5E5E5E;
  border-color: #7F7F7F;
  cursor: pointer;
}

.clickable {
	cursor: pointer;
}

.stepLine {
	stroke-width: 1;
	stroke: #AAAAAA;
}

.stepText {
	color: #AAAAAA;
}

.stepRect {
	fill: white;
	opacity: 0;
}

.geo-path {
	stroke:  white;
	stroke-width: 1.5px;
	stroke-opacity: 1;
	fill: #E5D9C9;
	fill-opacity: 1;
}

.city_2000 {
	fill: #858483;
	color: #858483;
	opacity: 1;
}

.city_2010 {
	fill: #DA6761;
	color: #DA6761;
	opacity: 1;
}

.titleTop {
	font-family: Oswald;
	font-size: 16px;
	font-weight: 300;
	fill: #525252;
}

.title {
	font-size: 12px;
	fill: #A6A6A6;
}

.barTitle {
	font-size: 14px;
}

.subTitle {
	text-anchor: middle;
	font-size: 10px;
	fill: #A3A3A3;
	font-weight: 300;
}

text {
	cursor: default;
	fill: #525252;
}

.btn-group {
	position: relative;
	top: 400px;
	left: 40px;
	visibility: hidden;
}

.btn {
	font-size: 10px;
	border-radius:0;
	padding: 3px 7px;
	line-height: 1.5;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;	
}

.axis path,
.axis line {
  fill: none;
  stroke: #8C8C8C;
  shape-rendering: crispEdges;
}
.axis text {
	font-size: 8px;
}

/*Pulse effect*/

.pulse {
  box-shadow: 0 0 0 rgba(204,169,44, 0.4);
  animation: pulse 2s infinite;
}
.pulse:hover {
  animation: none;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255,39,124, 0.4);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(255,39,124, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(255,39,124, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255,39,124, 0.4);
    box-shadow: 0 0 0 0 rgba(255,39,124, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(255,39,124, 0);
      box-shadow: 0 0 0 10px rgba(255,39,124, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(255,39,124, 0);
      box-shadow: 0 0 0 0 rgba(255,39,124, 0);
  }
}

.m1 text{
  fill:#DA6761 !important;
}

.m2 text{
  fill:#3d5afe !important;
}

.m3 text{
  fill:#76ff03 !important;
}