/******** Page layout ********/

html {
	}

body {
	background: #777;
	font-family: Helvetica, Arial, sans-serif;
	margin: 0;
	}

iframe {
	border: none;
}

#wrapper {
	width: 3840px;
	margin-right:auto;
	margin-left:auto;
	background: white;
	height: auto;
	}

/******** Fonts and swatches ********/

/*.red {color: rgb(213,17,0)}
.green {color: rgb(0,198,62)}
.pink {color: rgb(255,7,190)}
.orange {color: rgb(249,130,56)}
.cyan {color: rgb(0,193,238)}
.purple {color: rgb(108, 59, 195)}
*/
/******** General text elements ********/

a:link, a:visited {
	color: #555;
	text-decoration: none;
	}

a:hover, a:active {
	color: rgb(213,17,0);
	text-decoration: none;
	}

p {
	margin: 0.5em 0 0.5em 0;
	}
	
h2 {
		margin-top: 34px;
		font-size: 18px;
		line-height: 1.2em;
		}

h3 {
		margin-top: 30px;
		font-size: 16px;
		color: rgb(213,17,0);
		}

/******** Header area ********/

#masthead {
	background: #333;
	padding: 45px 60px 45px 60px;
	}
	
#site-title-the {
	color: white;
	text-transform: uppercase;
	display: inline;
	font-size: 36px;
	}

#site-title {
	color: white;
	text-transform: uppercase;
	display: inline;
	font-size: 60px;
	font-weight: bold;
	}

#site-strapline {
	display: inline;
	color: yellow;
	font-size: 48px;
	margin-left: 30px;
	}

#credit {
	display: inline;
	float: right;
	padding-top: 18px;
	color: white;
	font-size: 42px;
	vertical-align: baseline;
	}

#credit a:link,
#credit a:visited {
	color: white;
	}

#credit a:hover,
#credit a:active {
	color: yellow;
	}

#contents {
	font-size: 42px;
	padding: 42px 60px 60px 60px;
	height: auto;
	}
	
#contentsfail {
	background: url("palewashforie.png") no-repeat 0 0;
	width: 1024px;
	height: 625px;
	}
	
#failmessage {
	display: block;
	width: 650px;
	padding: 10px 30px 18px 30px;
	margin-top: 20px;
	margin-left: 158px;
	float: left;
	background: #333;
	color: white;
	font-size: 15px;
	line-height: 1.25em;
	}

#failvideo {
	width: 504px;
	height: 378px;
	margin: 10px 0 0 70px;
	}
	
.failmessagehead {
	color: yellow;
	font-weight: bold;
	font-size: 20px;
	margin: 10px 0;
}
	
#failmessage a:link,
#failmessage a:visited {
	color: yellow;
	border-bottom: dotted 1px yellow;
	}	

#failmessage a:hover,
#failmessage a:active {
	color: #999;
	border-bottom: dotted 1px #999;
	}	

#failmessage p {
	margin: 18px 0;
}

/******** Navigation ********/

#navigation {
	}
	
#reference, #responsibility, #vulnerability {
	display: inline-block;
	padding-right: 12px;
	}

#navglobe {
	margin: 0 0 -1px 0;
	width: 42px;
	height: 42px;
	display: inline-block;
	background: url("globe-massive.png") no-repeat 0 0;
	background-size: 100%;
}

#navglobe:hover {
	background-position: 0 -42px;
	}

.navitemsselected #navglobe {
		background-position: 0 -84px;
	}

.navtitle {
	color: rgb(213,17,0);
	border-bottom: dotted 1px gray;
	text-transform: uppercase;
	font-size: 36px;
	padding-top: 6px;
	padding-bottom: 0;
	padding-left: 4px;
	}
.navtitle div {
	width: 150px;
}

.navitems {
	display: inline-block;
	font-size: 60px;
	font-weight: bold;
	padding: 12px 18px;
	-moz-border-bottom-right-radius: 15px;
	border-bottom-right-radius: 15px;
	-moz-border-bottom-left-radius: 15px;
	border-bottom-left-radius: 15px;
	}
		
.navitemsselected {
	color: white;
	background: #666;
	}

.navitemsselected a:hover, 
.navitemsselected a:link,
.navitemsselected a:visited {
	color: white;	
	}



/******** Main Area ********/

#mainarea {
	margin: 30px 0 0 0;
	display: inline-block;
	width: 3070px;
	}

#maparea {
	height: 1688px;
	position: relative;
}
	
#map {
	height: 1650px;
	width: 3600px;
	position: absolute;
	left: 0; top: 0;
}

#map-placeholder {
	width: 819px;
	height: 448px;
	position: absolute;
	left: 0; top: 0;
}

#loading {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	display: none;
}
#loading img {
	position: absolute;
	left: 300px; top: 144px;
	width: 220px;
	height: 19px;
}
#loading div {
	color: #555;
	size: 14px;
	font-weight: bold;
	text-align: center;

	position: absolute;
	left: 300px; top: 167px;
	width: 220px;
}

svg {
	border: none;
}

#bounds {
	fill: none;
	stroke: none;
}

path {
	stroke: white;
	stroke-width: 1;
	fill: #DDD; /* Used for countries with no data */
}

.country {
	cursor: pointer;
}

.selected-country {
	fill: #555 !important;
}

#infoarea {
	display: none;
	height: 74px;
	background: #555;
	-moz-border-bottom-left-radius: 8px;
	border-bottom-left-radius: 8px;
	}

#selectacountry {
	color: rgb(190,190,190);
	font-weight: bold;
	padding-top: 3px;
	text-transform: uppercase;
	font-size: 17px;
	}

#infoareaunselected {
	border-top: dotted 1px gray;	
	height: 74px;
	background: rgb(240,240,240);
	padding: 0 10px 0 10px;
	-moz-border-bottom-left-radius: 8px;
	border-bottom-left-radius: 8px;
	}

#selectedcountryinfo {
	padding: 0 10px 0 10px;
	}

#selectedcountryname {
	font-size: 17px;
	font-weight: bold;
	color: white;
	border-bottom: dotted 1px white;
	padding-top: 5px;
	}

#selectedcountrydataarea1 {
	float: left;
	width: 33%;
	height: 30px;
	font-size: 12px;
	color: white;	
	text-align: left;
	}

#selectedcountrydataarea2, #selectedcountrydataarea3 {
	display: inline-block;
	width: 33%;
	height: 30px;
	font-size: 12px;
	color: white;	
	text-align: right;
	}

#selectedcountrydatadescription1, #selectedcountrydatadescription2, #selectedcountrydatadescription3 {
	margin-top: 5px;
	}

#selectedcountrydataresult1, #selectedcountrydataresult2, #selectedcountrydataresult3 {	
	font-weight: bold;
	padding-left: 20px;
	padding-top: 2px;
	} 

#selectedcountryrank1, #selectedcountryrank2, #selectedcountryrank3 {
	padding-left: 20px;
	padding-top: 2px;
	text-decoration: italic;
	} 

#selectedcountryrankrating1, #selectedcountryrankrating2, #selectedcountryrankrating3 {
	margin: 0 6px 0 6px;
	} 

#selectedcountryrankdata1, #selectedcountryrankdata2, #selectedcountryrankdata3 {
	}

#selectedcountrydatarankoutof1, #selectedcountrydatarankoutof2, #selectedcountrydatarankoutof3 {
	} 

/******** Sidebar ********/

.welcome, .unwelcome {
	display: none;
}

#sidebar {
	margin: 30px 0 0 0;
	width: 426px;
	float: right;
	border: none;
	}

#sidebarmain {
	height: 1350px;
	margin: none;
	border: none;
	}

#sidebarwelcome {
	font-size: 28px;
	font-weight: bold;
	letter-spacing: -1px;
	line-height: 0.95em;
	padding-top: 20px; 
	}

.welcomered {
	color: rgb(213,17,0)
	}

.welcomeblue {
	color: rgb(0,193,238)
	}

#sidebarbottom {
	display: none;
	border-top: dotted 1px gray;
	width: 142px;
	float: right
	}

.sidebarhead {
	padding: 18px 0 0 0;
	font-size: 42px;
	font-weight: bold;
	margin-bottom: 12px;
	color: #CB181D;
	}

.sidebartext {
	line-height: 1.2em;
	font-size: 36px;
	font-weight: normal;
	}

#shadedropdown,
#shadedropdown option {
	font-size: 33px;
	-webkit-appearance: none;
	border: none;
	font-weight: bold;
	font-family: Helvetica;
}

#legendbox {
	padding: 0 0 12px 0;
	}

#shade {
	margin-top: 6px;
	}
	
.legendtext {
	font-size: 36px;
	}

#legendtext {
	font-size: 36px;
	line-height: 1.1em;
	margin-bottom: 30px;
	}

.legendswatch {
	width: 36px;
	height: 36px;
	float: left;
	margin-right: 15px;
	}

#twittershare {
	margin-top: 4px;
	}

#facebookshare {
	margin-top: 3px;
	margin-bottom: 6px;
	}

/******** Footer ********/

#footer {
	display: none;
	margin: 0 auto;
	padding: 4px 0 30px;
	width: 550px;
	height: 100px;
	position: relative;
	}

.footerlink,
.footerlink a:link, 
.footerlink a:visited {
	display: inline;
	margin: 0 8px 0 8px;
	text-transform: uppercase;
	font-size: 12px;
	text-align: centre;
	color: white;
	}
	
.footerlink a:hover, 
.footerlink a:active {
	color: yellow;
	} 

#voteforus {
	width: 75px;
	height: 75px;
	position: absolute;
	right: 65px;
	top: -10px;
	display: inline-block;
	background: url("voteforus.png") no-repeat 0 0;
	}
	
#voteforus:hover {
	background-position: 0 -75px;
	}

#twitter-button {
	display: none;
	margin: -80px auto 20px;
	width: 154px;
	}
	
/******** Metapages	********/

.abouttext {
	width: 500px;
	margin-left: 178px;
	margin-right: auto;
	padding: 0 0 50px 0;
	line-height: 18px;
	}
	
.abouttext a:link,
.abouttext a:visited {
	color: rgb(213,17,0);
	border-bottom: dotted 1px rgb(213,17,0);
	}

.abouttext a:hover,
.abouttext a:active {
		color: black;
		text-decoration: underline dotted 1px;
	}
	
.sources {
	font-size: 12px;
	line-height: 16px;
	color: #444;
	}

#sourcesbox	 {
	background: rgb(228,228,228);
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 10px;
	margin: 30px 0 40px;
	}	