a {
	color:#005f9b;
	text-decoration:none;
	
	-webkit-transition: color 0.2s linear;
	-moz-transition: color 0.2s linear;
	transition: color 0.2s linear;
}
a:hover {
	color:#fff;
}

@font-face {
    font-family: 'PT Sans Narrow';
    src: url('pt_sans-narrow-web-regular-webfont.eot');
    src: url('pt_sans-narrow-web-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('pt_sans-narrow-web-regular-webfont.woff') format('woff'),
         url('pt_sans-narrow-web-regular-webfont.ttf') format('truetype'),
         url('pt_sans-narrow-web-regular-webfont.svg#PTSansNarrowRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'PT Sans Narrow Bold';
    src: url('pt_sans-narrow-web-bold-webfont.eot');
    src: url('pt_sans-narrow-web-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('pt_sans-narrow-web-bold-webfont.woff') format('woff'),
         url('pt_sans-narrow-web-bold-webfont.ttf') format('truetype'),
         url('pt_sans-narrow-web-bold-webfont.svg#PTSansNarrowBold') format('svg');
    font-weight: bold;
    font-style: normal;

}
@font-face {
    font-family: 'UbuntuTitlingBold';
    src: url('UbuntuTitling-Bold-webfont.eot');
    src: url('UbuntuTitling-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('UbuntuTitling-Bold-webfont.woff') format('woff'),
         url('UbuntuTitling-Bold-webfont.ttf') format('truetype'),
         url('UbuntuTitling-Bold-webfont.svg#UbuntuTitlingBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

span.gray {
	color:#444;
}

html,body {
	font-family: "PT Sans Narrow", "Helvetica",sans-serif;
	background: #d1b6a7 url('../img/gr.png') repeat-x top left;
	
}
header {
	width:100%;
	height:60px;
}
body.menu-open header {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
header {
	margin-top:10px;
}
header h1,
header h4 {
	color:#333;/*#157f53;*/
	margin:0 0 0 60px;
	width:300px;
}
header h1 {
	font-family: "UbuntuTitlingBold","Helvetica",sans-serif;
	font-size: 38px;
	/*text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);*/
	margin-top: 0px;
}
header h4 {
	font-size: 17px;
	font-weight: normal;
	line-height: 17px;
	text-transform: lowercase;
}
header h1 span {
	color:#555;
}
header .wrapper {
	background:transparent url('../img/logo.png') no-repeat center left;
	height:60px;
}
footer {
	height:180px;
	background-color:#ad9182;
	margin-top:2em;
	border:1px solid #997e6f;
}
footer h2 {
	line-height: 45px;
}
footer .wrapper {
	/*border-top:2px dashed #ddd;*/
	height:160px;
	margin-bottom:20px;
	position:relative;
}
footer .logo {
	width:400px;
	height:40px;
	margin:40px 0 0;
	padding: 0 0 0 40px;
	position:absolute;
	background:transparent url('../img/logo_small.png') no-repeat center left;
}
footer p {
	margin:0;
	text-shadow: 0px 1px 0px #C4A89B;
}
footer p a:hover {
	text-shadow:none;
}
footer .logo h2 a{
	color:#333;
	font-family:"UbuntuTitlingBold";
	font-size:30px;
	/*text-shadow: 0px 0px 2px rgba(0,0,0,0.4);*/
	text-decoration:none;
}
footer .logo a span{
	color:#666;
}
/*============ SOCIAL ==============*/
.social {
	float:right;
	margin:0;
}
footer .social {
	margin:102px 0 0;
	width:120px;
	overflow:hidden;
}
.tt_fb {
	position:absolute;
	top:0;
	right:0;
}
.tt_fb ul {
	list-style-type: none;	
	margin:11px 0 0;
}
.tt_fb ul li {
	float:left;
	margin:0 0 0 5px;
}
/*============= CONTENTS ============*/
.wrapper {
	width:960px;
	margin:0 auto;
	position:relative;
	overflow:hidden;
}
.wrapper section {
	margin:20px 0 0;
	clear:both;
	display: inline-block;
}
#container {
	position:relative;
	display:inline-block;
	margin:0 auto;
	width:650px;
}
#chartContainer {
	width:960px;
	height:600px;
	margin:0 auto;
	position:relative;
	background:transparent url('../img/bg2.png') no-repeat center right;
	
}
#countryDetails {
	width:310px;
	float:right;
}
canvas#bg {
}
canvas#chart {
	/*position:absolute;*/
	top:25px;
	left:25px;
	display:none;
}
#chart_svg {
	position:absolute;
	top:0px;
	right:0px;
	width:672px;
	height:600px;
	z-index:9999;
}
#icons {
	position:absolute;
	right:0px;
	bottom:60px;
	z-index:99999;
}
#icons ul {
	list-style-type: none;
	padding:0;
	margin:0;
	background:transparent url('../img/icons.png') no-repeat bottom right;
}
#icons ul li {
	font-family: "PT Sans Narrow", "Helvetica",sans-serif;
	color: #333;
	height: 37px;
	line-height: 38px;
	font-size: 0.85em;
	clear: both;
	margin: 0 35px 0 0;
	text-shadow: 0px 1px 0px #DBC7BC;
	text-align:right;
}
#icons ul li a {
	text-decoration:none;
	color:inherit;
	cursor:default;
	display:block;
}
#icons ul li a:hover {
	color:#005f9b;
}
#legend {
	position:absolute;
	left:0px;
	bottom:60px;
	z-index:99999;
	padding:5px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}
@keyframes flickering {
	0% {background-color:transparent;}
	50% {background-color:rgba(255,255,255,0.25);}
	100% {background-color:transparent;}
}

@-moz-keyframes flickering /* Firefox */ {
	0% {background-color:transparent;}
	50% {background-color:rgba(255,255,255,0.25);}
	100% {background-color:transparent;}
}

@-webkit-keyframes flickering /* Safari and Chrome */ {
	0% {background-color:transparent;}
	50% {background-color:rgba(255,255,255,0.25);}
	100% {background-color:transparent;}
}
.flicker {
	animation-iteration-count:infinite;
	-moz-animation-iteration-count:infinite; /* Firefox */
	-webkit-animation-iteration-count:infinite; /*Safari and Chrome*/
	
	animation-name:flickering;
	-moz-animation-name:flickering; /* Firefox */
	-webkit-animation-name:flickering; /* Safari and Chrome */
	
	animation-duration:2s;
	-moz-animation-duration:2s; /* Firefox */
	-webkit-animation-duration:2s; /* Safari and Chrome */
}
#legend ul {
	list-style-type: none;
	padding:0;
	margin:0;
}
#legend ul li {
	font-family: "PT Sans Narrow", "Helvetica",sans-serif;
	color:#333;
	height:20px;
	line-height:24px;
	font-size:0.85em;

	margin:8px 0;
	text-shadow: 0px 1px 0px #dbc7bc;
}
#legend > a span,
#legend ul li a span{
	width:20px;
	height:20px;
	margin:0 5px 0 0;
	display:block;
	float:left;
}
#legend li a b {
	font-weight:normal;
	display:block;
	float:left;
	max-width:150px;
	overflow:hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-icab-text-overflow: ellipsis;
	-khtml-text-overflow: ellipsis;
	-moz-text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	
}
#legend a {
	color:#333;
	text-decoration:none;
}
#legend a:hover {
	color:#005f9b;
}
#legend.ios a:hover {
	color:#333;
}
#legend a.add {
	display:block;
	padding: 2px 5px 2px 0;
	width:92px;
}
#legend a.add span {
	text-align:center;
	font-size: 30px;
	line-height: 25px;
}
#legend a.add:hover {
	background-color:#000;
	color:#fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
#legend a.add:hover span {
	background-color:transparent;
}
#legend ul li.world {
	
}
#legend ul.cc li a {
	display:block;
	float:left;
}

#legend ul li.selected a.cc {
	color:#000;
	font-family: 'PT Sans Narrow Bold';
	font-weight:bold;
}
#legend ul li a.cc:hover span{
	width:16px;
	height:16px;
	border:2px dotted #000;
}
#legend.ios ul li a.cc:hover span,
#legend ul li.hidden a.cc:hover span{
	width:20px;
	height:20px;
	border:none;
}
#legend ul li.hidden a.cc {
	cursor: default;
}
#legend ul li.hidden a.cc:hover {
	cursor: default;
	color:#000;
}
#legend ul li a.rm,
#legend ul li a.hs {
	color:#666;
	display:none;
	font-size:1em;
	font-weight:normal;
	margin-left:5px;
	width:50px;
}
#legend.ios ul li a.rm,
#legend.ios ul li a.hs {
	display:inline;
}
#legend ul li a.rm:hover {
	color:#000;
}
#legend ul li:hover a.rm{
	display:inline;
}
#legend ul li a.hs:hover {
	color:#000;
}
#legend ul li:hover a.hs{
	display:inline;
}
#legend ul li.hidden b {
	color:#a89083;
	font-weight:normal;
	text-shadow:none;
}
/* =========== COMMON =============*/
h1,h2,h3,h4,h5,h6 {
	
	margin:0;
	color:#333;
}
/* =========== COUNTRY LIST =============*/
#mainMenu {
	
	position:absolute;
	z-index:999999;
	width:960px;
	background-color:#000;
	background-color:rgba(0,0,0,0.8);
	top:0px;
	width:100%;
	height:0;
	overflow:hidden;
	-webkit-transition: height 0.5s ease-out;
	-moz-transition: height 0.5s ease-out;
	-o-transition: height 0.5s ease-out;
	transition: height 0.5s ease-out;
}

body.menu-open #mainMenu {
	height:1035px;
	-webkit-box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.25);
	box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.25);
}
#mainMenu #countryList {
	height:1000px;
	margin-top: 35px;
}
.no-csscolumns body.menu-open #mainMenu {
	height:1100px;
}
#mainMenu .menuClose {
	position:absolute;
	top:10px;
	right:50px;
	color:#fff;
	font-size:1.2em;
	display:block;
	font-family: "PT Sans Narrow", "Helvetica",sans-serif;
}
#mainMenu .menuClose:hover {
	color:#01a1ed;
}
#mainMenu .bottom {
	top:1000px;
}
.no-csscolumns #mainMenu #countryList {
	height:1080px;
}
.no-csscolumns #mainMenu .bottom {
	top:1060px;
}
#mainMenu #countryList ul {
	list-style-type: none;
	margin:5px 0;
	padding:0;
	clear:both;
	-moz-column-count: 5;
	-webkit-column-count: 5;
	column-count: 5;
}
#mainMenu #countryList h3 {
	color:#fff;
	border-bottom: 1px dotted #666;
	width: 98%;
	margin:10px 0 0;
	display:block;
	clear:both;
}
#mainMenu #countryList ul li {
	color:#eee;
	font-size:0.9em;
	line-height:18px;
	height:18px;	
}
.no-csscolumns #mainMenu #countryList ul li {
	float:left;
	width:179px;
}
.no-csscolumns #mainMenu #countryList ul {
	display:inline-block;
	clear:both;
}
#mainMenu li a {
	color:#eee;
	text-decoration: none;
	display:block;
	line-height:16px;
	height:16px;
	white-space: nowrap;
}
#mainMenu li a span {
	display:inline-block;
	max-width:120px;
	overflow:hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-icab-text-overflow: ellipsis;
	-khtml-text-overflow: ellipsis;
	-moz-text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
}
#mainMenu li a span.rank {
	color:#eee;
}
#mainMenu li a:hover {
	color:#01a1ed;
}
#mainMenu li a.selected {
	color:#009dff;
	font-family: 'PT Sans Narrow Bold';
	font-weight:bold;
}
#mainMenu li a.selected:hover {
	color:#666;
}
/* =========== COUNTRY DETAILS =============*/
#countryComparison,
#info {
	margin-top:3em;
}
.country-details {
	width:300px;
	float:left;
	margin:20px 0;
}
#countryComparison .middle {
	margin:20px 30px;
}
.country-details h2 {
	border-bottom:1px dotted #444;
	font-size:1.2em;
	font-weight:normal;
	height:24px;
}
.country-details h2 span.name {
	width:230px;
	overflow:hidden;
	float:left;
	display:block;
	height:24px;
	white-space: nowrap;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-icab-text-overflow: ellipsis;
	-khtml-text-overflow: ellipsis;
	-moz-text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	text-shadow: 0px 1px 0px #dbc7bc;
}
.country-details h2 span.pos {
	float:right;
	display:block;
	text-shadow: 0px 1px 0px #dbc7bc;
}
.country-details h2 sup {
	font-size:0.7em;
}
.country-details h4 {
	font-weight:normal;
	margin:5px 0;
}
.country-details ul {
	margin:0;
	padding:0;
	list-style-type: none;
}
.country-details ul li {
	margin: 4px 0;
	height:20px;
	color:#fff;
	width:280px;
	position:relative;
}
.country-details ul li span.icon {
	display:block;
	float:left;
	font-family: "PT Sans Narrow", "Helvetica",sans-serif;
	font-size:0.8em;
	color:#333;
	text-align:center;
	line-height:20px;
	height:16px;
	width:20px;
}
.country-details ul li div.bar {
	width:300px;
	background-color:#ad9182;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	position: relative;
	height:20px;
}
.country-details ul li div.bar div {
	height:20px;
	width:0px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	position:absolute;
	/*
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 3px;
	-webkit-border-radius: 3px 0px 0px 3px;
	border-radius: 3px 0px 0px 3px;
	*/
	-webkit-transition: width 0.5s ease-out;
	-moz-transition: width 0.5s ease-out;
	-o-transition: width 0.5s ease-out;
	transition: width 0.5s ease-out;
	
}
.country-details ul li div.bar span,
.country-details ul li div.bar b {
	font-size:0.8em;
	line-height:24px;
	height:20px;
	margin-left:10px;
	position:relative;
	float:left;
}
.country-details ul li div.bar b {
	font-weight:normal;
	margin-left:2px;
}
/* =========== INFO =============*/
#info > div {
	width:450px;
	float:left;
	margin-right:30px;
}
#info h2 {
	font-weight:normal;
	text-shadow: 0px 1px 0px #DBC7BC;
	text-transform: uppercase;
}
#info p {
	color:#333;
}
#info strong span {
	color:#666;
}
/* =========== TREND CHART =============*/
#trend {
	
}
#trend #timeChart {
	width:910px;
	height:180px;
}
#trend ul {
	display:block;
	width:50px;
	float:left;
	margin:0;
	padding:0;
}
#trend ul li a{
	font-size:0.8em;
	color:#000;
	text-shadow: 0px 1px 0px #DBC7BC;
}

#trend #timeChart {
	float:left;
}