html body		{ overflow:auto; }


.map_block-combine h3
	{
	padding:5px;
	}


/* Header */
header
	{
	background:  url("/grfx/header-bg.jpg") no-repeat scroll 0 0 / cover;
	position:relative;
	height:320px;
	right:0;
	left:0;
	}

.breadcrumb a		{ color: #1b4c95; }

/* Content */

.output_filename	{margin-top:20px; text-align:center;}

.content					{ margin-left:100px; }
.main						{ overflow:hidden;}
.content ul, .content ol	{ margin:0; }

.close_compare_btn	{top:5px;}

#map_container
	{
	width:100%;
	clear:right;
	}

.map_block select 			{ width: 100%; }

.pane.hidden { display: none; }

.map_block
	{
    border: 1px solid #e3e3e3;
    float: left;
    margin-bottom: 15px;
    margin-right: 1.5%;
    width: 32.1%;
    min-height:600px;
	}

.form_compare_div, .map_compare_div
	{
	background:#fff;
	overflow: hidden;
    position: relative;
	}

.timerow_compare	{ padding:0px 5px; }

.map_block-combine, .select-process
	{
	border: 1px solid #e3e3e3;
	float:left;
 	max-width: 35%;
    width: 100%;
	margin-right:1.5%;
	margin-bottom:15px;
	position:relative;
	}

.large-block
	{
	max-width:100%;
	margin-top:20px;
	}

.select-process		{ border:none; margin-top:3%; max-width:26.5%;}
.select-process select
	{
    padding:3px;
    background: #74918a;
    color:#fff;
    border:none;
    outline:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
    margin:0 auto;
    position:relative;
    width: 145px;
    border:0px;
    outline:0px;
	}

.combine_warning	{ padding:15px; }
.combine_warning a	{ color:#1b4c95; }


/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select { padding-right:18px }
}

label, .combine-name
	{
	display: table;
	margin: auto;
    position: relative;
    width: 190px;
    margin-top:15px;
    z-index:1;
	}

.combine-name	{width:220px;}

label:after
	{
    content:"\25BE";
    font:11px;
    color:#fff;
    right:4px; top:3px;
    position:absolute;
    pointer-events:none;
	}

.logo
	{
	float:left;
	height: auto;
	left:auto;
	padding-bottom:15px;
	}

h3.compare_title	{ float:left; }

.map_block:nth-child(3), .map_block-combine:nth-child(3)	{ margin-right:0px; }

.map_block-combine dl
	{
	padding:10px;
	overflow:hidden;
	width:100%;
	}

.map_block dd	{ float:left; }
.map_block-combine dt					{ display:inline-block; width:36%; }
.map_block-combine dd					{ display:inline-block; width:30%; margin-bottom:10px; }
.map_block-combine h4					{ color:#fff; background:#74918a; text-align:center; font-size:0.95em; padding:10px 0px;}

.map_block-combine h4:after
	{
	border-top: 7px solid #fff;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	width: 0;
	height: 0;
	float:right;
	display:block;
	content:"";
	margin-right:15px;
	}

.closed-links	{height:105px;}

.arrow-left, .arrow-right, .arrow-down, .arrow-up
	{
	width:50px;
	height:46px;
	}

.btn-execute, .btn-execute-mobile, .gonuts_buttons
	{
	background:#da721d;
	color:#fff;
	padding:5px 0px;
	display:block;
	margin:0 auto;
	width:112px;
	text-align:center;
	}

.gonuts_buttons
	{
	margin:auto;
	display:inline-block;
	border:none;
	width:auto;
	padding:5px;
	cursor:pointer;
	}

.map_block-combine label:first-of-type	{margin-top:0px;}


a.btn-execute:hover, a.btn-execute:active, .gonuts_buttons:hover	{ text-decoration:none; background:#df8235; }

.btn-execute-mobile	{ display:none; }
.arrow-left			{ background: url("/grfx/arrow-combine-left.png") no-repeat; position:absolute; background-size:50px 46px;}
.arrow-right		{ background: url("/grfx/arrow-combine-right.png") no-repeat; position:Absolute; right:0; background-size:50px 46px; top:0;}
.arrow-down			{ background: url("/grfx/arrow-combine-down.png") no-repeat; display:block; margin-top:40px; margin-bottom:20px; background-size:50px 46px;}
.arrow-up			{ background: url("/grfx/arrow-combine-up.png") no-repeat; display:none; margin-top:10px; margin-bottom:20px; background-size:50px 46px;}

.top-bar-right
	{
	position:relative;
	background:none;
	width:auto;
	height:auto;
	border:none;
	float:right;
	}

.top-bar-right li
	{
	margin:0 0 30px 10px;
	height:auto;
	font-size:16px;
	width:auto;
	}

.top-bar-right li:nth-child(2) 	{ background:#4d6b91; }
.top-bar-right li:first-child	{ margin-right:0px; margin-left:0px; }

.top-bar-right li p
	{
    margin-top: 0px;
    width: auto;
    padding:5px 8px;
    font-size:0.87em;
	}

.top-bar-right li:last-child::before, .top-bar-right li:nth-child(2)::before, .top-bar-right li:first-child::before
	{
    background: none;
    height:auto;
    margin:0;
    width:auto;
	}

#metadata_container
	{
	width: 100%;
	display: none;
	}

.full-metadata
	{
	clear:both;
	display:block;
	background:#4d6b91;
	border:none;
	color:#fff;
	padding:5px 10px;
	cursor:pointer;
	width:100%;
	}

.full-metadata:hover	{background:#da721d; }

.metadata-table, .compare-table
	{
	width:100%;
	border-collapse: collapse;
    position: relative;
	}

.colorbar
	{
	width:100%;
	height:auto;
	float:left;
	}

.timerow_compare_label	{display:inline-block; margin-right:30px; font-weight:bold; margin-top:5px;}

p.colorbar-unknown-text, p.colorbar-colors-low, p.colorbar-colors-high	{margin:0; padding:0;}
.colorbar-colors-low	{margin-left:15px !important;}

#csv_result table th, #csv_result table td
	{
	text-align:left;
	border: 1px solid #ccc;
    padding: 5px;
    text-align: left;
	}

#csv_result table	{border-collapse: collapse; max-width:75%;}

.colorbar-colors
	{
	width:78%;
	}

.colorbar span {
	margin-left: -6px;
}
.metadata-table td:first-child {
  width: 10%;
}
.metadata-table td {
  width: 30%;
}

.metadata-table th:first-child									{ background:#ddd; }
.metadata-table .label, .compare-table .label					{ background:#ddd; width:150px; max-width:100%; vertical-align:top; }
.metadata-table td, .metadata-table th, .compare-table td		{ vertical-align:top; padding: 5px; border:1px solid #e3e3e3; word-break: break-all;}
.metadata-table th, .metadata-table tr:last-child td			{ padding:0; }
.compare-table td	{border-right:0px; padding-right:7px;}

.metadata-table td:first-child, .metadata-table th:first-child	{ border:none;}

.legend-map, .map_combine_div
	{
	border:1px solid #e3e3e3;
	max-width:100%;
	width:29%;
	float:left;
	margin:5px;
	background:#e3f5e9;
	min-height:200px;
	height: 200px;

	}
.legend-map img {
	max-height: 100%;
}
.map_combine_div
	{
	float: right;
	width:62%;
	height:200px;
	}

#map_result, .legend-large	{ height:500px; }

.large-block dl { border-top:1px solid #e3e3e3;  }
.large-block dt	{ width:10%; }
.large-block dd
	{
	margin-left: 130px;
    width: auto;
	}

.large-block .legend-map		{ width:24%; }
.large-block .map_combine_div	{ width:73%; }

#add_map
	{
	background:#fff;
	border:1px solid #9fa2a2;
	font-weight:bold;
	width:30px;
	height:30px;
	float:left;
	cursor:pointer;
	}

#combine_container .intro
	{
	float:left;
	margin-bottom:15px;
	}

.theme_dropdown, .effect_dropdown, .indicator_dropdown
	{
	width:400px;
	max-width:100%
	}

.combine_name
	{
	position: relative;
	border:1px solid #fff;
	background:#74918a;
	color:#fff;
	padding:5px 10px;
	width:150px;
	text-align:top;
	margin: 0 auto;
    outline: 0 none;
    margin-top:0px;
	}

.combine_metadata_link	{cursor:pointer; color:#1b4c95;}
.combine_metadata_link:hover	{text-decoration:underline;}


.combine_name active	{ color:transparant; }
.process-log
	{
	 border: 1px solid #c10000;
    color: #c10000;
    margin: 15px auto 0;
    padding: 3px 5px;
	}


span.plog_melding		{ margin-bottom:15px; font-weight:bold; }

.input_weights			{ border:1px solid #ccc; padding:0px 3px; }

.help-video {
	background: url(/grfx/video-icon.png) no-repeat;
	background-size: auto 24px;
	width: 28px;
	height: 24px;
	margin-left: 14px;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	}



/* Aside */
.myclipc 			{ color:#5d5b5a; }
.map_compare_div 	{ height: 360px; }
aside				{ position:relative; z-index:1; }
.myclipc li a		{ color:#1b4c95; margin-bottom:5px; }
.myclipc li:first-child		{ margin-bottom:5px; }


#combine_popup
	{
	position: absolute;
	top: 0;
	left: 0;
	width: 400px;
	background: #34495e;
	color:#fff;
	padding:10px;
	z-index:9999;
	display: none;
	}

#close_combine_popup	{float:right; cursor:pointer; padding:0px 0px 0px 10px;}

#combine_popup.active	{ display: block}

aside ul.top .fa-print
	{
	display: block;
    font-size: 2em;
    margin: 0 auto;
    text-align:center;
    line-height:50px;
    vertical-align: middle;
    background:none;
	}


.prov, .csv_nuts {display: none;}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)
	{
	.top-bar-right li:first-child::before		{ background: url("/grfx/toolbox/compare-info-icon@2x.png") no-repeat; background-size:47px 47px;}
	.top-bar-right li:nth-child(2)::before		{ background: url("/grfx/toolbox/compare-map@2x.png") no-repeat; background-size:55px 46px; }
	.top-bar-right li:last-child::before		{ background: url("/grfx/toolbox/compare-metadata-icon@2x.png") no-repeat; background-size:45px 52px; }
	}



@media only screen and (min-width: 940px) and (max-width:1200px)
{
.arrow-left, .arrow-right	{display:none;}
}


@media (min-width:540px) and (max-width: 750px)
{
	#nav:not(:target) > a:first-of-type, #nav:target > a:last-of-type		{ border:1px solid #fff; color:#fff; }

}

@media (min-width: 100px) and (max-width: 560px)
{
	aside, aside ul.bottom
		{
		width:100%;
		height:auto;
		position:relative;
		min-height:100px;
		}

		.content					{ margin-left:0px; }

}




@media only screen and (max-width: 655px)
{
	.top-bar-right			{ float:left; }
	.top-bar-right li		{ margin:0 0 30px 0px }
	h3						{ float:none; }
	.large-block .legend-map		{ width:29%; }
	.large-block .map_combine_div	{ width:63%; }
	.content				{ float:none; width:auto;}
}
@media only screen and (max-width: 600px)
{
	aside					{ margin-top:15px; }
}

@media only screen and (min-width: 300px) and (max-width:940px)
{

.map_block, .map_block-combine
	{
	width:100%;
	max-width:100%;
	float:left;
	min-height:auto;
	}

	.btn-execute			{ display:none; }
	.btn-execute-mobile		{ display:block; margin-bottom:20px; margin-top:20px; }
	.arrow-left		{ display:none;}
	.arrow-right	{ display:none;}
	.arrow-down		{ background: url("/grfx/arrow-combine-down.png") no-repeat; display:block; margin-top:50px; margin-bottom:20px; background-size:50px 46px;}
	.arrow-up		{ display:block; margin-top:10px; margin-bottom:50px; background-size:50px 46px;}
	.select-process	{ margin-top:20px; }
	.compare-table .label		{width:auto;}
		.colorbar-colors
			{
			width:70%;
	}
}

@media only screen and (min-width: 600px) and (max-width:940px)
{
	.large-block .legend-map, .legend-map				{ width:23.7%;}
	.large-block .map_combine_div, .map_combine_div  	{ width: 71%;}
}

@media only screen and (min-width: 870px) and (max-width:940px)
{
	.legend-map			{ width:23.5%;}
	.map_combine_div 	{ width: 71%;}
	}


@media only screen and ( max-width: 1195px )	{ #nav .login-menu			{ margin:0; } }