/*Font from https://github.com/codeforamerica/codeforall/blob/master/type/Gotham-Bold.ttf*/
@font-face {
	font-family: "Gotham Bold";
	src:url("Fonts/Gotham-Bold.ttf");
}

/*Font from https://github.com/mapzen/open/blob/master/assets/fonts/Gotham-Light.ttf*/
@font-face {
	font-family: "Gotham Light";
	src:url("Fonts/Gotham-Light.ttf");
}

h1 {
	text-align: center;
	font-family: "Gotham Bold";
	font-size: 30px;
}

h2 {
	text-align: center;
	font-family: "Gotham Bold";
	font-size: 25px;
}

h3 {
	text-align: center;
	font-family: "Gotham Bold";
	font-size: 20px;	
}

p {
	display: block;
	margin: auto;
	width: 80%;
	font-family: "Gotham Light";
	font-size: 18px;
}

ul {
	display: block;
	margin: auto;
	width: 80%;
}

li {
	font-family: "Gotham Light";
	font-size: 18px;	
}

#referenceContainer {
	margin: auto;
	width: 80%;
}

.referenceBlock {
	word-wrap: break-word;
	box-sizing: border-box;
	width: 33.33%;
	padding: 5px;
	display: inline-block;
	vertical-align: top;
}


/* Header */

#header {
	background-color: #022756;
	display: block;
	height: 150px;
	width: 100%;
}

#header-background {
	display: block;
	width: 100%;
	height: 100%;
	margin: auto;
}

#header-text {
	position: absolute;
	display: block;
	margin: auto;
	top: 10px;
	left: 50%;
	margin-left: -150px;
}

/* Images (for use in shaders) */

#euroLogo {
	display: none;
}

#euroImage {
	display: none;
}

#euroCanvas {
	display: none;
	/*width: 90%;*/
}

/* Geography Block*/

#geographyFiller {
	/*-webkit-appearance: none;*/
	padding: 0px 5px 0px 0px;
	margin: 0px;
	display: inline-block;
	width: 66.66%;
	box-sizing: border-box;
	height: 25px;
	outline: none;/*
	opacity: 0.7;*/
	/*border: blue 0px dashed;*/
}

#geographySlider {
	-webkit-appearance: none;
	padding: 0px 5px 0px 0px;
	margin: 0px;
	display: inline-block;
	width: 66.66%;
	box-sizing: border-box;
	height: 25px;
	outline: none;
	opacity: 0.0;
	border: blue 0px dashed;
}

.geographyDirectionBlock {
	
	/*display: inline-block;*/
	/*box-sizing: border-box;*/
	/*padding: 5px 0px 5px 0px;*/
	/*background-color: #88BBAA;*/
	/*width: 16.66%;*/
	/*height: 25px;*/
	/*font-family: "Gotham Light";*/
	/*font-size: 18px;*/
	
	display: inline-block;
	box-sizing: border-box;
	padding: 5px;
	margin: 0px 0px 3px 0px;
	/*background-color: #ffd8dd;*/
	/*background-color: #d8ffdd;*/
	width: 16.66%;
	height: 50px;
	font-family: "Gotham Light";
	font-size: 90%;
	text-align: center;
	border: 1px solid grey;
}


#geographyBlock {
	display: block;
	width: 90%;
	margin: auto;
}

#geographyMap {
	display: inline-block;
	width: 66.66%;
	box-sizing: border-box;
	padding: 0px 5px 0px 0px;
	/*background-color: #000000;*/
}

#geographyMap:hover {
	cursor: pointer;
}

#geographyGraphContainer {
	display: inline-block;
	overflow-y: auto;
	width: 33.33%;
	height: 100px;
	box-sizing: border-box;
	padding: 0px 0px 0px 5px;
}

#geographyGraph {
	width: 100%;
	/*display: inline-block;*/
	/*width: 33.33%;*/
	/*box-sizing: border-box;*/
	/*padding: 0px 0px 0px 5px;*/
	/*background-color: #88BBAA;*/
}

/* Popularity Block */

#popularitySliderText {
	font-family: "Gotham Bold";
	font-size: 18px;
	text-align: center;
	/*padding: -15px 0px 0px 0px;*/
	/*margin: 0px 0px 8px 0px;*/
	width: 20%;
	height: 25px;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
}

#popularitySlider {
	-webkit-appearance: none;
	padding: 0px 5px 0px 0px;
	margin: 0px;
	display: inline-block;
	width: 80%;
	box-sizing: border-box;
	height: 25px;
	outline: none;
	opacity: 0.7;
	border: blue 0px dashed;
}

#popularitySlider:hover {
	cursor: pointer;
}

.popularityJuryBlock {
	display: inline-block;
	box-sizing: border-box;
	/*padding: 5px 0px 5px 0px;*/
	/*background-color: #88BBAA;*/
	width: 20%;
	height: 25px;
	font-family: "Gotham Light";
	font-size: 18px;
}

#popularityCountryContainer {
	display: inline-block;
	overflow-y: auto;
	width: 20%;
	height: 100px;
	box-sizing: border-box;
	padding: 0px 0px 0px 5px;
	font-family: "Gotham Light";
	font-size: 18px;
}

#popularityBlock {
	display: block;
	width: 90%;
	margin: auto;
}

#popularityGraph {
	display: inline-block;
	width: 80%;
	box-sizing: border-box;
	/*margin: 3px;*/
	padding: 0px 0px 0px 0px;
	/*background-color: #88BBAA;*/
	/*padding-bottom: 50.0%;*/
}

/* Language Block */

#languageBlock {
	display: block;
	width: 90%;
	margin: auto;
	/*border: blue 1px dashed;*/
}

#languageSliderText {
	font-family: "Gotham Bold";
	font-size: 18px;
	text-align: center;
	/*padding: -15px 0px 0px 0px;*/
	/*margin: 0px 0px 8px 0px;*/
	width: 15%;
	height: 25px;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
}

#languageSlider {
	-webkit-appearance: none;
	padding: 0px;
	padding: -1px 0px 0px 0px;
	margin: 0px 0px 2px 0px;
	width: 85%;
	box-sizing: border-box;
	height: 25px;
	outline: none;
	opacity: 0.7;
	border: blue 0px dashed;
}

#languageSlider:hover {
	cursor: pointer;
}

#languageMap {
	display: inline-block;
	width: 66.66%;
	box-sizing: border-box;
	/*margin: 0px;*/
	padding: 0px 5px 0px 0px;
	/*background-color: #000000;*/
	/*padding-bottom: 50.00%;*/
	/*height: 40%;*/
	/*height: 100px;*/
}

#languageMap:hover {
	cursor: pointer;
}

#languageGraph {
	display: inline-block;
	width: 33.33%;
	box-sizing: border-box;
	/*margin: 3px;*/
	padding: 0px 0px 0px 5px;
	/*background-color: #88BBAA;*/
	/*padding-bottom: 50.0%;*/
}