@import url("font-awesome.min.css");


/* Css Reset */
html, body, div, span, object, iframe, h1, input, h2, h3, h4, h5, h6, blockquote, pre,abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, sub, sup, var,b, i,dl, dt, dd, ol, ul, fieldset, form, label, legend, caption, tbody, tfoot, thead ,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video
	{
	margin: 0 auto;
	padding: 0px;
	outline: 0;
	border:0;
	outline:0;
	}

.debug-content
	{
	font-size:1.3em;
	color:#ff0000;
	}

img	{ max-width:100%; height:auto;}

body, html
	{
	font-family: arial, helvetica, sans-serif;
	font-size: 0.9em;
	color:#5d5b5a;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
	min-width:380px;
	}

.wrapper
	{
	position:relative;
    max-width: 1500px;
	padding:0px 15px;
	box-sizing: border-box;
	}

a
	{
	color: #1b4c95;
	text-decoration:none;
	}

a:hover			{ text-decoration:underline;}

h1, header h2  	{ font-weight:bold; color: #fff; font-size: 2em; margin-bottom: 10px; margin-top:50px; float:right; text-shadow:2px 1px #000;}
header h2
	{
    font-size: 1.7em;
    font-weight: normal;
    margin-bottom: 10px;
    margin-top: 0;
    clear:right;
	}

h3 				{ color: #234272; font-size: 1.5em; margin:8px 0px; }
h4				{ font-size:1.3em; color:#1b4c95; margin-bottom:5px; font-weight:normal;}
.myclipc h4		{ margin-bottom:5px; }
.clear 			{ clear: both; }

abbr
	{
    cursor:pointer;
    border-bottom: thin dotted #3c3e4f;
	}

abbr:hover::after
	{

	}

/* --------------------------------------- */
/* UNCERTAINTY 							   */
/* --------------------------------------- */

.layer_ui_optionbox.active, .layer_control_box .row  	{ display:block; margin-bottom:12px;}

.uncertainty_range
	{
	height:50px;
	cursor:pointer;
	overflow:hidden;
	background:#fff;
	color:#395069;
	font-weight:bold;
	margin:0px -10px 0px -15px;
	padding:10px 15px;
	margin-bottom:-12px !important;
	}

.uncertainty_range p		{ }

.threshold_box p, #timeseries_row p, #opacity_row p, .style_row p , .row p	{ margin:0; padding-bottom:1px; }

.colorbar, .colorbar-table
	{
	float:left;
	height:15px;
	max-width:250px;
	width:100%;
	position:relative;
	}

.colorbar-table	{float:none;}

.colorbar-unknown
	{
	height:15px;
	background:#fff;
	width:15%;
	border:1px solid #666;
	display:inline-block;
	box-sizing:border-box;
	margin-right:5%;
	}

.colorbar-colors-low	{ margin-left:10px !important;}
.colorbar-colors-high	{ float:right !important; }
.colorbar-colors
	{
	height:15px;
	border:1px solid #666;
	width:80%;
	box-sizing:border-box;
	display:inline-block;
	background: #ff0000; /* Old browsers */
	background: -moz-linear-gradient(left,  #ff0000 0%, #ff6600 50%, #0e7e00 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #ff0000 0%,#ff6600 50%,#0e7e00 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #ff0000 0%,#ff6600 50%,#0e7e00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#0e7e00',GradientType=1 ); /* IE6-9 */
	float:right;
	}

p.colorbar-unknown-text, p.colorbar-colors-low, p.colorbar-colors-high
	{
	font-size:0.65em;
	text-decoration:none;
	display:inline-block;
	}

.colorbar span
	{
	background:#000;
	width:12px;
	height:19px;
	opacity:0.8;
	position:absolute;
	margin-top:-2px;
	top:0;
	}

/* --------------------------------------- */
/* QUICK LINKS 								   */
/* --------------------------------------- */

.quick-links-viewport
	{
	width:140px;
	height:100%;
	float:left;
	overflow:hidden;
	position:relative;
	z-index: 99999999;
	}


ul.quick-links
	{
	list-style:none;
	background:#6b8782;
	max-width:100%;
	border-right:1px solid #d4d8db;
	height:105px;
	position:absolute;
	margin-left: -100%;
	transition: .5s ease-in-out;
	-webkit-transition: .5s ease-in-out;
	}

ul.quick-links li	{padding:2px 10px 1px 10px; color:#fff;}
ul.quick-links li a	{color:#fff;}

ul.quick-links li:after
	{
	font-family:FontAwesome;
	display:block;
	float:right;
	color:#fff;
	margin-top:2px;
	}

ul.quick-links li:first-child
	{
	background:#303f50;
	font-weight:bold;
	border-bottom:1px solid #d4d8db;
	padding:5px 10px;
	font-size:1em;
	margin-bottom:2px;
	cursor:pointer;
	}

ul.quick-links li:first-child:after	{content:"\f0d9"; margin:0px;}

.closed-links
	{
	width:20px;
	height:105px;
	cursor:pointer;
	position:relative;
	float:left;
	}

.closed-links	ul	{display:none;}

table.html-top-table td:first-child
	{
	vertical-align:top;
	min-width:150px;
	}

.closed-links:after
	{
	font-family:FontAwesome;
	color:#fff;
	content:"\f0da";
	font-size:2.5em;
	vertical-align:bottom;
	display:block;
	position:absolute;
	top:35%;
	left:2%;
	}

ul.open-links {
  margin-left: -0%;
  transition: .5s ease-in-out;
  -webkit-transition: .5s ease-in-out;
}

ul.first_time_open_links {
    -webkit-transition: 1s ease-in-out;
     transition: 1s ease-in-out;
    -webkit-transition-delay: 5s;
          transition-delay: 5s;
}

/* --------------------------------------- */
/* HEADER 								   */
/* --------------------------------------- */

header
	{
	background: url(/grfx/header-bg.jpg) no-repeat;
	background-size: cover;
	width:100%;
	border-bottom:1px solid #D1CFCF;
	height:320px;
	margin-bottom:0px;
	}

.header-top
	{
	background: rgba(56, 70, 88, 0.8) none repeat scroll 0 0;
	height:105px;
	}

.logo
	{
	width:200px;
	height:200px;
	position:relative;
	float:left;
	background: url(/grfx/logo.png) no-repeat rgba(255, 255, 255, 0.85) center top;
	background-size:150px 100px;
	padding:0px 15px;
	}

.myclipc
	{
	padding:10px;
	bottom:0;
	margin-top:120px;
	padding-bottom:0px;
	position:relative;
	cursor:pointer;
	z-index:1;
	list-style:none;
	font-weight:bold;
	}

.myclipc p		{ margin:3px 0px; }

.myclipc input, .newsletter form input, .border-box input
	{
	border:1px solid #bfbfbf;
	margin:5px 0px 7px 0px;
	padding:5px;
	width:95%;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #e7e7e7 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e7e7e7)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e7e7e7 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#e7e7e7 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#e7e7e7 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 0%,#e7e7e7 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e7e7e7',GradientType=0 ); /* IE6-9 */
	}

.myclipc input[type="submit"], .border-box input[type=submit], input[type=submit]
	{
	margin-top:3px;
	background: #6f8ca3; /* Old browsers */
	background: -moz-linear-gradient(top,  #6f8ca3 0%, #87a3b6 75%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6f8ca3), color-stop(75%,#87a3b6)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #6f8ca3 0%,#87a3b6 75%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #6f8ca3 0%,#87a3b6 75%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #6f8ca3 0%,#87a3b6 75%); /* IE10+ */
	background: linear-gradient(to bottom,  #6f8ca3 0%,#87a3b6 75%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6f8ca3', endColorstr='#87a3b6',GradientType=0 ); /* IE6-9 */
	color:#fff;
	padding:3px 10px;
	cursor:pointer;
	}

@media only screen and (-webkit-min-device-pixel-ratio: 1.3), not all, not all, not all, only screen and (min-resolution: 124.8dpi), only screen and (min-resolution: 1.3dppx)
{
	.logo
		{
		background: url(/grfx/logo@2x.png) no-repeat rgba(255, 255, 255, 0.8) center top;
		background-size:150px 100px;
		}
}

/* --------------------------------------- */
/* NAVIGATIE 							   */
/* --------------------------------------- */

#nav
	{
	display: block;
    float: right;
    max-width: 100%;
    position: relative;
    right: 0;
    margin-top:60px;
	}

#nav > a{ display: none;}

#nav ul > li
    {
    position: relative;
    float:left;
    padding: 5px;
    list-style:none;
    display: block;
    z-index: 1;
    }

#nav li:after
	{
	color:#fff;
	content:"|";
	padding-left:10px;
	}

#nav li.active a							{ color:#a8c0dd; }
#nav ul > li:last-child						{ padding-right:0px; }
#nav li a									{ color:#fff;}
#nav li a:hover, #nav li.active				{ color:#a8c0dd;}
#nav > ul									{ height: 100%; float:right; margin:0;}
#nav > ul > li  							{ float: left; color:#fff; cursor:pointer; }
#nav ul > li > ul > li a, #nav li:hover ul 	{ display:block; }
#nav ul > li > ul > li						{ float:none; }

#nav ul >li:last-child:after, #nav ul > li > ul > li:after		{ content:none; border-bottom:none; }

#nav li ul
    {
	display: none;
	position: absolute;
	top: 100%;
	right:0%;
	background: rgba(56, 70, 88, 0.8) none repeat scroll 0 0;
	padding:5px 5px;
	border:1px solid #f2f2f2;
	min-width:175px;
    }

@media only screen and ( max-width: 1240px )
{

    #nav:not( :target ) > a:first-of-type,
	#nav:target > a:last-of-type
        {
		border: 1px solid #fff;
		color: #fff;
		display: block;
		float: right;
		padding: 7px 10px;
        }

    #nav li
    	{
    	border-bottom:1px solid #fff;
    	font-size:1.2em;
    	}

    #nav						{width:100%; position:absolute; right:15px;}

    #nav li	a					{ width:100%; display:block; font-size:1em;}
	#nav li:after				{ content:none;}
	#nav ul > li > ul > li a	{ font-size:0.9em; }
	#nav:target > ul 			{ display: block; }
	#nav li ul 					{ position: static; width:90%; margin-left:-10px; padding-left:20px; border:none; background:none;}
 	#nav li ul li 				{ border:none;}

    #nav > ul
    	{
    	position: absolute;
    	background: rgba(56, 70, 88, 0.9) none repeat scroll 0 0;
        height: auto;
        display: none;
        right: 0;
        top:31px;
        width:95%;
        border:1px solid #fff;
        z-index:2000;
   	 	}

    #nav > ul > li
        {
        width: 100%;
        float: none;
        padding:10px 10px;
        }

	#nav li:hover ul, #nav li.hover ul 	{ display: block; }
	#nav li {  -webkit-tap-highlight-color: transparent; }

}

/* --------------------------------------- */
/* MAIN 								   */
/* --------------------------------------- */

.main
	{
	position:relative;
	margin-bottom:30px;
	min-height:350px;
	}

span.combine-info
	{
    color: #fff;
    font-size: 0.8em;
    padding: 3px 6px 2px;
    cursor:pointer;
	}

span.combine-info .fa-info	{font-size:0.95em;}

.btn-more			{ float:right; }
.breadcrumb 		{ box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.2); padding:10px 0px; background:#f1f1f1; overflow:hidden; }
.breadcrumb ul li	{ list-style:none; float:left; margin-right:5px; }
.breadcrumb ul li:after
	{
	content:">";
	display:block;
	float:right;
	margin-left:5px;
	}

.breadcrumb ul li:last-child:after	{ content:none; }

.content
	{
	position: relative;
    margin-top: 20px;
    margin-left: 290px;
	}

.content ul, .content ol		{ margin-left:40px; }
.content li						{ line-height:18px;}
.content li a:hover	{color:#384658 !important;}

.consortiun-table td:last-child, .agenda_knmi td:last-child	{ background:#f1f1f1; }
.consortiun-table td			{ border:1px solid #f1f1f1; padding:20px;}
.consortiun-table 				{ width:100%; }
.consortiun-table img			{ margin:0 auto !important; display:block; }

.choose-theme:hover
	{
	opacity: 0.6;
    filter: alpha(opacity=60);
    }

.agenda_knmi td					{ border:1px solid #f1f1f1; padding:5px; }

.bounding_box, .geobox_execute
	{
	background: url("/grfx/toolbox/zoom-in.png") no-repeat #606b79 center center;
    padding: 0;
    text-indent: -9999px;
   	cursor:pointer;
   	list-style:none;
	}

.content p	{ line-height: 19px; margin-bottom:5px; }

.bounding_box			{ background: url("/grfx/toolbox/bounding_box.png") no-repeat #606b79 center center; }
.bounding_box:hover, .bounding_box:active		{ background: url("/grfx/toolbox/bounding_box.png") no-repeat #7c99ad center center; }
.geobox_execute			{ background: url("/grfx/toolbox/geobox_execute.png") no-repeat #606b79 center center; }
.geobox_execute:hover, .geobox_execute:active			{ background: url("/grfx/toolbox/geobox_execute.png") no-repeat #7c99ad center center; }

dl.news-overview
	{
    padding: 10px;
   	padding-left:0px;
   	border-bottom: 1px solid #d7d7d7;
   	margin-bottom:10px;
   	margin-top:10px;
	}


.behind-data
	{
	float:left;
	margin-right:15px;
	margin-bottom:15px;
	}

dl.news-overview:last-child			{border-bottom: none; }

dl.news-overview dt
	{
    float: left;
    width: 100px;
    height:90px;
    margin:0;
    padding:0;
    margin-right:20px;
    overflow:hidden;
	}

dl.news-overview dd 			{ margin-left:120px; }
.date							{ font-weight:bold; }

.news-detail { max-width:30%; float:right; margin-left:15px; margin-bottom:5px; }


.glossary-overview	td	{ border:1px solid #ccc; padding:10px; vertical-align:top;}
table.glossary-overview	{ border-collapse: collapse;}
tr.colorbar-table		{ background:#6f8ca3; display:table-row; width:100%; }
.glossary-alphabet		{ text-transform:uppercase; cursor:pointer; }
.glossary-alphabet tr	{ margin-bottom:10px; display:block; }
.glossary-alphabet td	{ border:1px solid #ccc; padding:5px 10px; margin-right:10px; display:inline-block; margin-bottom:10px; }
.glossary-alphabet td:hover	{ background:#6f8ca3; color:#fff; }
tr.colorbar-table td a		{ color:#fff; font-weight:bold; text-decoration:none; cursor:pointer; text-transform:uppercase; }
tr.colorbar-table td a .top:hover	{ text-decoration:underline;}
tr.colorbar-table td span
	{
	background: url("/grfx/arrow-up.png") no-repeat;
	width:15px;
	height:15px;
	float:right;
	display:block;
	background-size:15px 15px;
	}

.climate-box
	{
	border:3px solid #7c99ad;
	padding:15px 10px;
	float:left;
	margin-right:15px;
	text-transform:uppercase;
	margin-top:20px;
	min-width:150px;
	text-align:center;
	}

.climate-box:hover
	{
	cursor:pointer;
	background:#f1f1f1;
	}

.glossary-split	td { border:none; }


/* --------------------------------------- */
/* Mouse over description 				   */
/* --------------------------------------- */
.mo-item
	{
	overflow:hidden;
	border-bottom: thin dotted #3c3e4f;
    cursor: pointer;
	position: relative;
	cursor: help;
	}

.mo-item .mo-desc
	{
	opacity: 0;
	position: absolute;

	margin-top: 15px;
	display: block;
	z-index: 1;
	padding: 10px;
	background: #34495e;
	color: #fff;
	min-width: 250px;
	pointer-events: none;
	-webkit-transition: opacity 0.3s, top 0.2s, bottom 0.2s;
	transition:  opacity 0.3s, top 0.2s, bottom 0.2s;
	border:1px solid #fff;
	font-weight:normal;
	text-align:left;
	text-transform:none;
	}

.mo-item .mo-desc a
	{
	text-decoration: underline;
	}

.mo-item .mo-desc a:hover	{ color:#809caf; }


.mo-item .mo-desc:before
	{
	content: " ";
	top: -20px;
	display: block;
	height: 20px;
	left: 0;
	position: absolute;
	width: 100%;
	z-index: 1;
	}

.mo-item:hover  .mo-desc
	{
	display: block;
	opacity: 1;

	/* Let users interact with tooltip */
	pointer-events: auto;
	z-index:99999;
	}

.mo-right {left: -75%;}
.mo-left {right: -75%;}
.mo-top {bottom: 0;}
.mo-bottom {top: 0;}
.mo-item:hover .mo-top {bottom: 100%;}
.mo-item:hover .mo-bottom  {top: 100%;}

.mo-title	{ font-size:1.1em; font-weight:bold; margin:0;}

.dim_map {
	position:relative;
}
.dim_map:after
	{
	content: url("/grfx/spinner.gif");
	position: absolute;
	top:0;
	padding-top:20%;
	bottom: 0;
	background:rgba(0, 0, 0, .75);
	text-align:center;
	width: 100%;
	display:block;

}

/* --------------------------------------- */
/* ASIDE 								   */
/* --------------------------------------- */

aside		{ position:relative; width:100%; float: left; max-width:260px; z-index:1000;}
aside h3	{ margin:0; padding:0; }

a.highlights
	{
	border:2px solid #d7d7d7;
	padding:8px;
	display:block;
	margin-top:15px;
	}

a.highlights:first-child		{ margin-top:0px; }
a.highlights p					{ color:#5d5b5a; margin-bottom:0px; margin-top:0px;}
a.highlights:hover				{ text-decoration:none !important; background:#f1f1f1;}
a.highlights h4:hover			{ text-decoration:underline; }
a.highlights h4					{ margin-top:5px; }
a.highlights img				{ max-width:100%; }

/* --------------------------------------- */
/* FOOTER 								   */
/* --------------------------------------- */

footer
	{
	position:relative;
	background:#384658;
	padding-bottom:10px;
	overflow:hidden;
	color:#dee2e2;
	font-size:1em;
	clear:both;
	}

#copyright
	{
	color:#fff;
	margin-top:20px;
	margin-bottom:20px;
	float:left;
	}

a#to-top
	{
	background: url('/grfx/top.png') no-repeat;
	width:24px;
	height:19px;
	text-indent:-9999px;
	display:block;
	float:left;
	margin:15px 0px 0px 10px;
	}

footer ul a					{ color:#fff; }
footer ul					{ float:right; list-style:none; margin-top:20px; font-size: 0.9em; }
footer li					{ float:left; margin-right:5px;}
footer li:after				{ content:"|"; margin-left:5px; }
footer li:last-child:after	{ content:none;}

footer p					{ border-top:1px solid #586371; padding-top:10px; line-height:25px; margin-top:5px;}
footer p:before				{ content:""; background: url(/grfx/eu-logo.jpg) no-repeat; float:left; padding-left:15px; width:43px; height:28px;}

#policy {
	line-height: 25px;
	margin-top: 5px;
	padding-top: 10px;
	float: right;
	display: inline-block;
	}

#policy a					{ color: #fff; }


/* --------------------------------------- */
/* RESPONSIVE 							   */
/* --------------------------------------- */

@media (min-width: 865px) and (max-width: 1120px)
{
	h1			{ font-size:1.6em; }
	header h2	{ font-size:1.3em; }
}

@media (min-width: 750px) and (max-width: 865px)
{
	h1			{ font-size:1.2em; }
	header h2	{ font-size:1em; }
	.quick-links-viewport		{ display:none; }
}

@media (min-width: 100px) and (max-width: 750px)
{
	h1, header h2							{ font-size:1em; }
	h1										{ float:right; }
	aside									{ margin-bottom:20px; }
	.logo									{ height: 105px;  width: 150px; padding:0; }
	.myclipc p, .quick-links-viewport		{ display:none; }
	header									{ height:225px;}
	.myclipc input							{ width:90%; margin:5px 0 2px}
}


@media (min-width: 100px) and (max-width: 600px)
{
	#searchbox, h1,	header h2, a#to-top, 	.breadcrumb	{ display:none; }
	footer ul, #copyright								{ width:100%; float:none; }
	footer p, footer li a								{ line-height: 15px; font-size:0.9em;}
	.content											{ margin:0; float:left; border-top:1px solid #d7d7d7; width:100%;}
	aside												{ max-width:100%; margin-top:15px; }
	aside a.highlights									{ max-width:260px;}
	a.highlights h4										{ margin-top:5px; }
}

@media (min-width: 100px) and (max-width: 460px)
{
	#nav												{ margin-top:10px; }
	#freesearch											{ display:none; }
}