@charset "UTF-8";

/* Stylesheet for the Single Market Scoreboard
 * Adopting the general design of the new Europa site
 * by Sascha Leib for GROW.R.4
 * File name: scoreboard.css
 */

/* sub-site navigation */
#sub-site-nav-layout ul {
	margin: 0 6pt;
	padding:	0;
}
#sub-site-nav-layout ul li,
#sub-site-nav-layout ul li a:link {
	margin:		0;
	padding:	0;
}

/* changes to the standard elements: */
#languages-menu {
	width: 225px;
}
.file-download {
	margin:		0 0 0 auto;
}

/* headline and reporting period */
#intro .h2group {
	margin:			0;
}
#intro .reporting-print-box {
	margin-top:	21pt;
}
#intro .reporting-period {
	text-align:		right;
}
#intro .edition {
	float:			right;
	font-weight:	bold;
	color:			grey;
}

/* print button */
#intro .print-download {
	text-align:		right;
	height:			48px;
	margin:			6pt 0;
}
#intro .print-download a:link {
	display:		inline-block;
	height:			48px;
	width:			48px;
	overflow:		hidden;
	color:			transparent;
	background:		url('../img/icon/print-button0.png') center no-repeat;
}
#intro .print-download a:hover {
		background-image:	url('../img/icon/print-button.png');
}
#intro .print-download a:focus {
	background-image:	url('../img/icon/print-button.png');
	outline:			3px solid #ffd617;
}

/* intro layout: */
#intro .layout-2-columns .column-1 {
    width: 70%;
	padding-right:	2em;
}
#intro .layout-2-columns .column-2 {
    width: 30%;
	min-width:		255px;
	padding-right:	0;
}

/* simple boxes next to asides */
.simple-box.near-aside {
	max-width:		49%;
}

/* heatmap tables */
.heatmap-table {
	font-size:			10pt;
	width:				100%;
	margin-top:			2em;
	overflow:			auto;
}

.heatmap-table caption {
	caption-side:		top;
	font-size:			12pt;
	font-weight:		normal;
	padding:			2pt 4pt;
}

.heatmap-table thead td {
	border-right:	#EEE solid 1px;
}
.heatmap-table thead th {
	height:			12em;
	white-space:	nowrap;
	border-right:	#EEE solid 1px;
}
.heatmap-table thead th div {
	width:			2.4em;
	height:			2.4em;
	transform:		rotate(270deg);
}
.heatmap-table tbody th {
}
.heatmap-table tbody td {
	text-align:				center;
	border-color:			#FFF;
	border-style:			solid;
	border-width:			0 1px 1px 0;
}
.heatmap-table tfoot td {
	border-top:			#DDD solid 2px;
	border-right:		#EEE solid 1px;
	font-weight:		bold;
}
.heatmap-table td.total {
	font-weight:		bold;
	text-align:			left;
}

/* SVG Map Styles */
main .map-container {  }
main .map-container .map-layout {
	width:				100%;
	margin:				0 auto;
	display:			grid;
	grid-template-columns: 550px auto;
	grid-auto-flow:		column; 
	grid-gap:			0;
	background-color:	#f2f2f2;
}
main .map-container .map-layout svg { display: block; width: 100% }
main .map-container .map-layout .map-list-layout {
	display: 		block;
	height:			550px;
	overflow-x:		hidden;
	overflow-y:		scroll;
}
main .map-container .map-layout .map-list-layout:focus {
	outline:			3px solid #ffd617;
}

main .map-container svg { background-color: #97DBF2; }			
main .map-container svg .fill_red,
main .map-container svg .fill_green,
main .map-container svg .fill_yellow,
main .map-container svg .fill_grey,
main .map-container svg .fill_void,
main .map-container svg .fill_lakes {
	opacity:			1;
	fill-opacity:		1;
	stroke:				#fff;
	stroke-width:		1;
	z-index:			1;
}
main .map-container svg .circle_red,
main .map-container svg .circle_green,
main .map-container svg .circle_yellow,		
main .map-container svg .circle_grey{
	fill:				transparent;
	fill-opacity:		0;
	stroke-width:		12.66;
	stroke-miterlimit:	4;
	stroke-opacity:		1;
}
main .map-container svg .fill_lakes {
	fill:				#97DBF2;
	stroke-width:		0.1;
}
main .map-container svg .fill_red { fill: #CC4B3D ;}
main .map-container svg .circle_red { stroke: #CC4B3D ;}
main .map-container svg .fill_green {fill: #71AB7C;}
main .map-container svg .circle_green {stroke: #71AB7C;}
main .map-container svg .fill_yellow {fill: #DBC42E;}
main .map-container svg .circle_yellow {stroke: #DBC42E;}
main .map-container svg .fill_grey,
main .map-container svg .fill_void {fill: #f2f2f2;}
main .map-container svg .circle_grey  {stroke: #f2f2f2;}

main .map-container svg a:hover .fill_red { fill: #C0281E ;}
main .map-container svg a:hover .circle_red { stroke: #C0281E ;}
main .map-container svg a:hover .fill_green { fill: #3F7E49 ;}
main .map-container svg a:hover .circle_green { stroke: #3F7E49 ;}
main .map-container svg a:hover .fill_yellow { fill: #C29F10 ;}
main .map-container svg a:hover .circle_yellow { stroke: #C29F10 ;}
main .map-container svg a:hover .fill_grey { fill: #CBCBCB ;}
main .map-container svg a:hover .circle_grey { stroke: #CBCBCB ;}

main .map-container svg a:focus { outline-color: rgba(0, 68, 148, 0.67);}


main .map-container .map-layout .value-table {
	vertical-align:	top;
	border-left: #404040 solid 2px;
	background:	#f2f2f2;
	width:		100%;
	padding:	0;
	margin:		0;
	list-style: none inside none;
}

main .map-container .value-table .flag {
	background: url('../img/flags/zz.png') 5px center no-repeat;
	padding-left:	32px;
}

main .map-container .map-layout ul.value-table li {
	border-bottom:		#CDCDCD solid 1px;
	margin:				0;
}
main .map-container .map-layout ul.value-table li:hover {
	background-color:	#CDCDCD;
}
main .map-container .map-layout ul.value-table li a:link,
main .map-container .map-layout ul.value-table li span.no-link {
	padding:	1pt 0 1pt 36px;
	display:	inline-block;
	width:		calc(100% - 4.5em - 36px);
}
main .map-container .map-layout ul.value-table li span.value {
	display:	inline-block;
	width:		4em;
	height:		18pt;
	text-align:	center;
}

/* compact lists */
main ul.compact,
main ol.compact {
	display:	block;
	list-style: none inside;
}
main ul.compact li,
main ol.compact li {
	display:	inline;
}
main ul.compact li:after,
main ol.compact li:after {
	content:	', ';
}
main ul.compact li:last-child:after,
main ol.compact li:last-child:after {
	content:	'.';
}

/* list with roman numbers in brackets */
main ol.parenthesized-lower-latin {
	list-style:		none;
	counter-reset:	olcounter;
}
main ol.parenthesized-lower-latin li:before {
	content:		'(' counter(olcounter,lower-roman) ')';
}
main ol.parenthesized-lower-latin>li {
	counter-increment:	olcounter;
}

/* country flags */
.flag.at {background-image: url('../img/flags/at.png') !important;}
.flag.be {background-image: url('../img/flags/be.png') !important;}
.flag.bg {background-image: url('../img/flags/bg.png') !important;}
.flag.hr {background-image: url('../img/flags/hr.png') !important;}
.flag.cy {background-image: url('../img/flags/cy.png') !important;}
.flag.cz {background-image: url('../img/flags/cz.png') !important;}
.flag.dk {background-image: url('../img/flags/dk.png') !important;}
.flag.ee {background-image: url('../img/flags/ee.png') !important;}
.flag.fi {background-image: url('../img/flags/fi.png') !important;}
.flag.fr {background-image: url('../img/flags/fr.png') !important;}
.flag.de {background-image: url('../img/flags/de.png') !important;}
.flag.el {background-image: url('../img/flags/el.png') !important;}
.flag.hu {background-image: url('../img/flags/hu.png') !important;}
.flag.ie {background-image: url('../img/flags/ie.png') !important;}
.flag.it {background-image: url('../img/flags/it.png') !important;}
.flag.lv {background-image: url('../img/flags/lv.png') !important;}
.flag.lt {background-image: url('../img/flags/lt.png') !important;}
.flag.lu {background-image: url('../img/flags/lu.png') !important;}
.flag.mt {background-image: url('../img/flags/mt.png') !important;}
.flag.nl {background-image: url('../img/flags/nl.png') !important;}
.flag.pl {background-image: url('../img/flags/pl.png') !important;}
.flag.pt {background-image: url('../img/flags/pt.png') !important;}
.flag.ro {background-image: url('../img/flags/ro.png') !important;}
.flag.sk {background-image: url('../img/flags/sk.png') !important;}
.flag.si {background-image: url('../img/flags/si.png') !important;}
.flag.es {background-image: url('../img/flags/es.png') !important;}
.flag.se {background-image: url('../img/flags/se.png') !important;}
.flag.uk {background-image: url('../img/flags/uk.png') !important;}
.flag.is {background-image: url('../img/flags/is.png') !important;}
.flag.li {background-image: url('../img/flags/li.png') !important;}
.flag.no {background-image: url('../img/flags/no.png') !important;}
.flag.ch {background-image: url('../img/flags/ch.png') !important;}

/* smaller version for a table with many entries: */
main table.heatmap-table.smaller th,
main table.heatmap-table.smaller td {
	padding:		2pt 1pt;
}

/* give extra height to the header if needed: */
main table.heatmap-table.high-heading thead th {
	height:			17.2em;
}

/* references to heatmap table colors for other items */
.above {
	background-color:		#71AB7C !important;
}
td.above, th.above {
	border-bottom:			#B8D5BD solid 1px;
}
.average {
	background-color:		#DBC42E !important;
}
td.average, th.average {
	border-bottom:			#EDE196 solid 1px;
}
.below {
	background-color:		#CC4B3D !important;
	color:					#FFF;
}
td.below, th.below {
	border-bottom:			#E5A59E solid 1px;
}
.no-data {
	background-color:		#EEE !important;
}
td.no-data, th.no-data {
	border-bottom:			#CCC solid 1px;
}
.highlight {
	font-weight:			bold;
	background-color:		#9ff;
}

/* reference tables have a smaller font size: */
table.reference {
	font-size:		smaller;
}
table.no-border,
table.no-border tbody {
	border:			transparent 0 none;
}
table.no-border tbody tr:nth-child(2n+1) {
	background-color:	transparent;
}

/* H5 always bold! */
main h5 {
	font-weight:		bold;
}

figure.chart-container {
	margin-top:		3em;
	padding:		0 2px;
}

aside.clippit-box {
	width:			auto;
	max-width:		40%;
	margin: 		.5em 0 1em .5em;
	padding:		0 5pt 1pt 44px;
	background:		#f2f2f2 url('../img/icon/clip-20.png') no-repeat 12px 10pt;
}

/* columns text blocks */
main .text-columns {
	-webkit-columns: 400px 2;
	-webkit-column-gap: 35px;
	-moz-columns: 400px 2;
	-moz-column-gap: 35px;
	columns: 400px 2;
	column-gap: 35px;
}
main .text-columns p,
main .text-columns li {
	widows:		2;
	orphans:	2;
}

@media screen and (max-width: 1170px) {
	main img.decorative {
		display:		none;
	}
}
@media screen and (max-width: 768px) {
	
	#intro .edition {
		float:			none;
		margin:			1em 0 0 0;
	}

	#intro .layout-2-columns .column-2,
	#intro .layout-2-columns .column-1 {
		width:			100%;
	}

	/* clip boxes unfloat: */
	aside.clippit-box {
		width:				100%;
		max-width:			100%;
		background-image:	none;
		margin:				.5em 0 1em 0;
		padding:			3pt 1pt 2pt 3pt;
	}
	
	/* simple boxes next to asides */
	.simple-box.near-aside {
		max-width:		100%;
	}

}

/* pre-print view */
body.print-preview {
	max-width:		20.7cm;
	font-size:		12pt;
}
body.print-preview #globan,
body.print-preview #site-navigation,
body.print-preview #header-tools-layout,
body.print-preview>footer {
	display:		none;
}