/* Commitment to Development Index 2013. Center for Global Development, publisher. Owen Barder and Petra Krylová, authors. Coded by John Osterman, deputy director for communications and publications, CGD. */

* {
	margin:0;
	padding:0;
}

a, img {
	border:none;
}

html {
	font-size: 59.1%;
	text-rendering:auto !important;
}

body {
	
	overflow-x:hidden;
	background-color: rgb(76,76,76);
	background-color: rgba(0,0,0, 0.7);
	background-image:url(line2.png);
}

h1{
 font-family:'Futura W02 Medium', futura-med, futura, sans-serif;
 font-size: 42px; font-size: 4.4rem;
 margin-bottom:0.8em;
 color:#fdc012;
 line-height:135%;
}

h3 {font-weight:normal;}

ul {
	margin: 1em 0 1em 10%;
}

p a, p a:visited {
	color:rgb(3,87,129);
}
.p-share .tweet {
	background-image:url(twitter-new-k.png)
	}
.p-share .fbook {
	background-image:url(facebook-new-k.png)
}

#dummy
{
	width:420px;
}

#text-wrapper {
margin: 0 2em;
}

#CGD {
position: relative;
left: 4px;
display:block;
}

#for-more {
font-family: 'Futura W02 Medium', futura-med, futura, sans-serif;
color: #fff;
font-size:16px;font-size: 1.7rem;
margin: 10px 0;
clear: both;
background: url('ext-link.png') no-repeat right center;
display: inline-block;
padding-right: 20px;

}

#for-more a, #for-more a:visited {
	color:#fff;
}

.under-text {
	position: absolute;
	bottom: 0;
	font-size:21px;font-size:2.2rem;
	color:#fff;
	font-family:'Futura W02 Medium', futura-med, futura, sans-serif;
	width:100%;
	text-align:center;
}

.rank-text {
	font-size:1.5em;
}

.graph-div {
padding: 4px 4px 40px 4px;
width: 404px;
max-width:404px;
height: 566px;
float: left;
margin: 4px;
transition: max-width .3s ease-in-out;
-webkit-transition: max-width .3s ease-in-out;
background-size: contain !important;
overflow:hidden;
position:relative;
}

.share {
	position:relative;
	left:207px;
	top:252px;
}


.share-button {
display: inline-block;
top:6px;
background-size: 25px 25px !important;
position: relative;
border: none;
cursor: pointer;
width:25px;
height:25px;
}

.tweet{
	background: url('twitter-new.png') no-repeat;
}

.fbook {
	background: url('facebook-new.png') no-repeat;
}

#banner-wrapper {
	margin: 0 auto;
	width:100%;
	max-width:885px;
	position:relative;
}


#top-share-buttons {
	display:inline-block;
	position:absolute;
	right:0;
	top:5px;
	}
#australia {
	background: url('australia.png') no-repeat;
}

#austria {
	background: url('austria.png') no-repeat;
}

#belgium {
	background: url('belgium.png') no-repeat;
}

#canada {
	background: url('canada.png') no-repeat;
}
#czech-republic {
	background: url('czech-republic.png') no-repeat;
}

#denmark {
	background: url('denmark.png') no-repeat;
}

#finland {
	background: url('finland.png') no-repeat;
}

#france {
	background: url('france.png') no-repeat;
}

#germany {
	background: url('germany.png') no-repeat;
}
#greece {
	background: url('greece.png') no-repeat;
}

#hungary {
	background: url('hungary.png') no-repeat;
}
#ireland {
	background: url('ireland.png') no-repeat;
}
#italy {
	background: url('italy.png') no-repeat;
}
#japan {
	background: url('japan.png') no-repeat;
}
#luxembourg {
	background: url('luxembourg.png') no-repeat;
}
#netherlands {
	background: url('netherlands.png') no-repeat;
}
#new-zealand {
	background: url('new-zealand.png') no-repeat;
}
#norway {
	background: url('norway.png') no-repeat;
}
#poland {
	background: url('poland.png') no-repeat;
}
#portugal {
	background: url('portugal.png') no-repeat;
}
#slovakia {
	background: url('slovakia.png') no-repeat;
}
#south-korea {
	background: url('south-korea.png') no-repeat;
}
#spain {
	background: url('spain.png') no-repeat;
}
#sweden {
	background: url('sweden.png') no-repeat;
}
#switzerland {
	background: url('switzerland.png') no-repeat;
}
#united-kingdom {
	background: url('united-kingdom.png') no-repeat;
}
#united-states{
	background: url('united-states.png') no-repeat;
}

#slideshow-wrapper {
	
	width:100%;
	overflow-x:hidden; 
	position:relative;
	padding: 200px 0 0 0;
	-webkit-overflow-scrolling:touch;
}

.arrow-div {
	position:absolute;
	top:58%;
	width:60px;
	height:60px;
	background-color:rgb(76,76,76);
	filter:alpha(opacity=70);
	opacity:1;
	background-color:rgba(0,0,0,.7);
	z-index:999;
	color:#fff;
	font-size:30px;
	border:none;
	cursor:pointer;
	vertical-align: baseline;
	}
	
#no-js-wrapper {
	display: none;
	position:relative;
}

#alert {
	font-size:14px;font-size:1.5rem;
	color:orange;
	position:absolute;
	padding:10px 15%;
}

.main-text-wrapper {
	background-color:#fff;
	margin: 204px 7px;
	padding: 10% 4px;
}

.component-text-wrapper {
	background-color:#fff;
	margin: 8px 7px;
	padding: 10% 4px;
}

.main-text  {
	width:100%;
	max-width:775px;
	margin: 0 auto;
	font-family:'Futura W02 Medium', futura-med, futura, sans-serif;
	line-height:150%;
	font-size:23px;font-size:2.4rem;
	color:#555;
}

.main-text  h2 {
	font-weight:normal;
	color:rgb(3,87,129);
	font-size:34px;font-size:3.6rem;
	margin-bottom:1em;
}

.main-text p {
	margin-bottom:1em;
}

.inactive {
	display:none;
}

.graph {
	width:100%;
	max-width:775px;
	margin: 0 auto;
}

.component p{
	max-width:575px;
	font-size:17px;font-size:1.8rem;
	line-height:140%;
	color:#000;
	font-family: 'Futura W02 Book', futura, sans-serif;
}

.aid {
	color:#bf4d49;
}

.trade {
	color:#1c71b9;
}

.finance {
	color:#e36e25;
}

.migration {
	color:#614b7c;
}

.environment {
	color:#8c9d4d;
	}
	
.security {
	color:#642624;
}

.technology {
	color:#e7b620;
}

.component-graph {
	width:24.55%;
	max-width:150px;
	max-height:100%;
	margin: 0 25px;
	float:right;
}
	
#button-wrapper button,  #category-button-wrapper button {
	border:1px solid transparent;
	padding:1px 1px 1px 2px;
	text-transform: capitalize;
	color:#fff;
	cursor:pointer;
	margin: 0 0 2px 0;
	font-weight:bold;
	width:100px;
	font-size:11px;
	}
	
#all-button-wrapper {
	padding: 0 6px 0px 4px;
	max-width: 885px;
margin: 20px auto 0 auto;
	
}

#button-wrapper button:hover, .cat:hover {
	border: 1px solid #ffbb36 !important;
}

#cgd-logo {
	position:relative;
	left:40px;
	bottom:2px;
	font-family:'Futura W02 Medium', futura-med, futura, sans-serif;
	font-size:15px;font-size:1.6rem;
	color:#ccc;
}

#cgd-logo a {
font-family:'Futura W02 Medium', futura-med, futura, sans-serif;
	font-size:15px;font-size:1.6rem;
	color:#ccc;
	text-decoration:none;
}

#cgd-logo img {
	border:none;
	float:left;
}

.cat {
	background-color:#000;
	background-color:rgba(0,0,0,.5);
}
	
.selected {
	background-color:rgb(41, 105, 118);
	background-color:rgba(41, 105, 118, .7);
}

.unselected {
	background-color:#000;
	background-color:rgba(0,0,0,.3);
}


#left-arrow-div {
	left:0px;
}

#right-arrow-div {
	right:0px;
	
}
#slideshow {
	width:11475px;
	position:relative;
	transition: left .3s ease-in-out;
	-webkit-transition: left .3s ease-in-out;
	padding: 0 3px;
}

#top-image {
	background-image: url(money.png);
}

#banner-text {
 background-image:url(line2.png);
 color:#fff;
 padding: 6px 7.5% 10px 7.5%;
 width:85%;
 background-color: rgb(77,77,77);
 position:fixed;
 top:0;
 z-index:9999;
 height:27px;
}

#menu-button {
width: 30px;
height: 37px;
border: none;
background: url(menu.png) no-repeat;
background-size: 30px 30px;
position: absolute;
cursor: pointer;
background-position-y:2px;
}

#flyout {
position: fixed;
top:44px;
box-shadow: 10px 10px 5px rgba(0,0,0,.8);
transition: right .3s ease-in-out;
-webkit-transition: right .3s ease-in-out;
font-family:'Futura W02 Medium', futura-med, futura, sans-serif;
font-size:24px;font-size:2.5rem;
color:#000;
background-color:#f3f3f3;
padding:8px;
max-width:516px;
width:70%;
}

#close-flyout {
	font-size:16px;font-size: 1.7rem;
	color:#444 !important;
	margin-left:10px;
}

.flyout-show {
	right:0;
}

.flyout-hide {
	right:-600px;
}

#flyout p {
	margin-bottom:6px;
}

#flyout p a {
	color:#000;
}

#cdi-map {
position: absolute;
left: 166px;
top: 0px;
opacity:0;
filter:alpha(opacity=0);
transition:opacity .3s ease-in-out;
-webkit-transition:opacity .3s ease-in-out;
}

#bottom-map-link {
	border-width:0 !important;
}

#bottom-map-link img {
	width:100%;
	max-width:500px;
}

#map-wrapper:hover #cdi-map {
	opacity:1;
	filter:alpha(opacity=100);
}

#menu {
background-image: url(line2.png);
color: #fff;
font-family: 'Futura W02 Medium', futura-med, futura, sans-serif;
font-size:17px;font-size:1.8rem;
background-color: rgb(77,77,77);
position: absolute;
z-index: 9999;
display: inline-table;
top: 37px;
margin:0;
transition:opacity .3s ease-in-out;
-webkit-transition:opacity .3s ease-in-out;
}

.menu-show {
	opacity:1;
	filter:alpha(opacity=100);
	left:0;
}

.menu-hide {
	opacity:0;
	filter:alpha(opacity=0);
	left:99999px;
}

#hide-menu {
position: absolute;
right: 0;
padding: 0 2px;
cursor: pointer;
}

#hide-menu:hover {
	background-color: #000;
}

#menu ul {
	list-style-type:none;
	margin:0;
}

#menu li {
	padding:5px;
	cursor:pointer;
	background: url('ext-link.png') no-repeat right center;
}

#menu li a {
	color: #fff;
	text-decoration: none;
	margin-right:15px;
}

#menu li:hover {
	background-color: #000;	
}

#menu-button:hover {
	background-color:#000;
}

#top-text {
background-color:rgb(3,87,129);
filter:alpha(opacity=80);
opacity:1;
background-color: rgba(3,87,129,.8);
padding: 50px 15%;
font-size:27px;font-size: 2.8rem;
font-family: 'Futura W02 Medium', futura-med, futura, sans-serif;
line-height: 150%;
margin-top:42px;
color:#fff;

}

#top-text-wrapper {
	max-width:885px;
	margin:0 auto;
}


															@media only screen and (max-width:900px) {
															
																#banner-text {
																	padding: 6px 3% 10px 3%;
																	width:94%;
																}
																
																#top-text {
																	padding: 50px 3%;
																}
															}															
															
															@media only screen and (max-device-width:767px) {
															
																html {
																	font-size: 40.1%;
																	}
																	
																.component p {
																	font-size:2.4rem;
																}
																
																#slideshow-wrapper {
																padding-top:4px;
																}
																
																.main-text-wrapper {
																	margin:4px 7px;
																}
																.graph-div {
																	width:320px;
																	height: 448px;
																}
																
																#dummy {
																	width:336px;
																}
																
																#hide-graphs {
																	top:8px;
																}
																
																.arrow-div {
																	top:33%;
																}
																
																#top-share-buttons {
																	right:-35px;
																}
																#menu {
																	font-size:3rem;
																	
																}
															
															}
															
															@media only screen and (max-width:320px) {
															
															#CGD {display:none;}
															
															}