body {
	font-family: Arial;
	font-size: 12px;
	color: #333333;
}
.container {
	width: 940px;
	height: 590px;
	position: absolute;
	background-color: #efefef;
	overflow: hidden;
}

#map-holder  {
	width: 940px;
	height: 610px;
	position: absolute;
}

#key {
	position: absolute;
	right: 0px;
}

#loading {
	font-size: 14px;
	font-family: Arial;
	background-color: #fff;
	height: 460px;
	padding-top: 240px;
	text-align: center;
	width: 940px;
	position: absolute;
	line-height: 18px;
	z-index: 100000;
	left: 0;
	top: 0;
	color: #999;
}

.background {
  fill: none;
  pointer-events: all;
}

#states {
  fill: #aaa;
  stroke: #fff;
  stroke-width: 1.5px;
}

#states .active {
  fill: orange;
}

#states .inactive {
  fill: #666;
}


text {
	 stroke: none;
	 fill: #ddd;
	 pointer-events: none;
}

.num-circle {
	 fill: #000;
  stroke: none;
  pointer-events: none;
  opacity: 0.7;
}

.country {
	cursor:pointer;
		  -webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

}

.country-outside {
	 fill: #aaa;
  stroke: #fff;
  stroke-width: 1.5px;
}

.country:hover {
	 fill: orange;

	
}

.q0-6 { fill: #2b587f; }
.q1-6 { fill: #426f96; }
.q2-6 { fill: #5986ad; }
.q3-6 { fill: #709dc4; }
.q4-6 { fill: #87b4db; }
.q5-6 { fill: #a4caeb; }


a {
	color: #2b587f;
	text-decoration: none;
	font-weight: bold;
}

#footer {
	position: absolute;
	width: 940px;
	height: 90px;
	bottom: 0px;
	background: #fff;
}

#footer h3 {
	position: absolute;
	top: 15px;
	left: 0px;
	font-family: Georgia;
	font-size: 30px;
	color: orange;
	width: 940px;
}

#footer p {
	position: absolute;
	top: 55px;
	left: 0px;
	font-family: Arial;
	font-size: 12px;
	color: #666;
	width: 350px;
}

#country-info {
	position: absolute;
	width: 940px;
}


#figures {
	position: absolute;
	right: 0px;
	bottom: 0px;
	width: 940px;
	height: 24px;
}

#figures-grey {
	position: absolute;
	right: 0px;
	width: 940px;
	height: 24px;
	background-image:url('../images/grey-figures.png');
	background-repeat:no-repeat;
}

#figures-black {
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 0px;
	height: 24px;
	background-image:url('../images/black-figures.png');
	background-repeat:no-repeat;
	background-position: bottom right;
}

#figures-orange {
	position: absolute;
	right: 0px;
	bottom: 0px;
	width: 0px;
	height: 24px;
	background-image:url('../images/orange-figures.png');
	background-repeat:no-repeat;
	background-position: bottom right;
}

#jobs-total {
	position: absolute;
	right: 0px;
	top: 20px;
	font-family: Georgia;
	font-size: 20px;
	color: #666;
}

#youth-total {
	color: orange;
}

#comments-section {
	position: absolute;
	width: 940px;
	height: 500px;
	opacity:0;
	filter:alpha(opacity=0); /* For IE8 and earlier */
	display: none;
	z-index: 9999999;
}

#comments-container {
	position: absolute;
	top: 90px;
}

#comment-title {
	position: absolute;
	top: 60px;
	left: 170px;
	font-family: Georgia;
	font-size: 16px;
	
}

.comment {
	position: absolute;
	width: 600px;
	height: 340px;
	color: #333;
	left: 170px;
	font-family: Arial;
	font-size: 12px;
	background: #fff;
	-webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.35);
-moz-box-shadow:    0px 0px 10px rgba(50, 50, 50, 0.35);
box-shadow:         0px 0px 10px rgba(50, 50, 50, 0.35);
border-radius: 3px;
background-image:url('../images/openingQuote_37x18.png');
background-repeat:no-repeat;
background-position: 20px 80px;
}

.comment-name {
	position: absolute;
	top: 20px;
	left: 20px;
	font-weight: bold;
	font-size: 14px;
	color: orange;
}

.comment-location {
	position: absolute;
	top: 40px;
	left: 20px;
	color: #999;
}

.comment-body {
	position: absolute;
	top: 105px;
	left: 20px;
	width: 550px;
	height: 115px;
	line-height: 20px;
	font-size: 16px;
	font-family: Georgia;
	color: #666;
}

.comment-body blockquote {
	color: #666;
	padding-bottom: 10px;
}

.comment-body p {
	padding-bottom: 10px;
}

.comment-body a {
	color: #005689;
	text-decoration: none;
}

.comment-body a:hover {
	text-decoration: underline;
}

.comment-nav {
	position: absolute;
	top: 230px;
	height: 40px;
	width: 40px;
	color: #fff;
	cursor: pointer;
}

.comment-nav:hover {
}

#prev-comment {
	left: 90px;
background-image:url('../images/left-arrow.png');
	background-repeat:no-repeat;

}

#next-comment {
	right: 90px;
	background-image:url('../images/right-arrow.png');
	background-repeat:no-repeat;
}

#blocker {
	position: absolute;
	background: #fff;
	width: 940px;
	height: 500px;
	opacity:0.7;
	filter:alpha(opacity=70); /* For IE8 and earlier */
	display: none;
}

#back-button {
	position: absolute;
	right: 0px;
	padding: 5px;
	background-color: #333;
	color: #fff;
	cursor: pointer;
}

#bubble {
	opacity:0;
	filter:alpha(opacity=0); /* For IE8 and earlier */
	
	z-index: 999999;
}

/* ============================================================================================================================
== BUBBLE WITH AN ISOCELES TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-isosceles {
	position:relative;
	width: 250px;
	padding:15px 15px 15px 65px;
	margin:1em 0 3em;
	color:#000;
	background:#fff; /* default background for browsers without gradient support */
	font-family: Georgia;
	line-height: 1.25em;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	-webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.35);
-moz-box-shadow:    0px 0px 10px rgba(50, 50, 50, 0.35);
box-shadow:         0px 0px 10px rgba(50, 50, 50, 0.35);
background-image:url('../images/openingQuote_37x18.png');
background-repeat:no-repeat;
background-position: 15px 15px;
}

/* Variant : for top positioned triangle
------------------------------------------ */

.triangle-isosceles.top {

}

/* Variant : for left/right positioned triangle
------------------------------------------ */

.triangle-isosceles.left {
	
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-isosceles.right {
	margin-right:50px;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

/* creates triangle */
.triangle-isosceles:after {
	content:"";
	position:absolute;
	; /* value = - border-top-width - border-bottom-width */
	/* controls horizontal position */
	border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
	border-style:solid;
	border-color:#fff transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* Variant : bottom
------------------------------------------ */

.triangle-isosceles.bottom:after {
	bottom:-15px
	/* value = - border-top-width - border-bottom-width */
}

/* Variant : top
------------------------------------------ */

.triangle-isosceles.top:after {
	top:-15px; /* value = - border-top-width - border-bottom-width *//* controls horizontal position */
	bottom:auto;
	border-width:0 15px 15px; /* vary these values to change the angle of the vertex */
}

/* Variant : left
------------------------------------------ */

.triangle-isosceles.left:after {
	left:50px; 
}

/* Variant : right
------------------------------------------ */

.triangle-isosceles.right:after {
	
	right:50px; /* value = - border-left-width - border-right-width */
}