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

.tier h5				{ max-width:80%; color:#234272; font-size:1.1em; float:left; }

.hidden	{display:hidden;}

.scenario-block
	{
	float:left;
	border:1px solid #cccccc;
	background: #e8e8e8; /* Old browsers */
	background: -moz-linear-gradient(top,  #e8e8e8 0%, #ececec 19%, #fdfdfd 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #e8e8e8 0%,#ececec 19%,#fdfdfd 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #e8e8e8 0%,#ececec 19%,#fdfdfd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#fdfdfd',GradientType=0 ); /* IE6-9 */
	padding:10px;
	padding-bottom:9px;
	}

.scenario-block	ul, .scenario-block	p	{margin:0; float:left;}
.scenario-block	p	{ margin-top:5px; }
.scenario-block	ul	{ margin-left:14px; }

.scenario-block	ul li
	{
	list-style:none;
	float:left;
	color:#fff;
	background:#6f8ca3;
	padding:5px 7px;
	margin-right:1px;
	min-width:50px;
	text-align:center;
	cursor:pointer;
	}

.scenario-block	.timeseries ul li	{min-width:100px;}
.scenario-block.indicator, .scenario-block.indicator p	 			{float:none; }
.scenario-block.indicator p			{float:none;}
.scenario-block.indicator span, #indicators span		{float:right; text-align:left;}

.scenario-block ul li.not-active	
	{
	cursor:default; 
 	background-color: rgb(111, 143, 164);
    background-color: rgba(111, 143, 164, 0.3);	
    }
   
.scenario-block ul li.active	{ background:#74918a; cursor:pointer;}


#map-scenario
	{
	max-width:771px;
	width:100%;
	height:535px;
	border:1px solid #ccc;

/* straks weghalen */
	position:relative;
	float:left;
	}

#netcdf_legend, .scenario-zoom	{position:absolute; z-index:1;}

#netcdf_legend				{right:0; bottom:0;}
.scenario-zoom				{right:10px; top:10px}

.fa-search-plus, .fa-search-minus
	{
    background: #384658;
    opacity:0.7;
    color:#fff;
    display: block;
    font-size: 2em;
    line-height: 50px;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    margin-bottom:1px;
    padding:15px 15px;
    cursor:pointer;
	}

.fa-search-plus:hover, .fa-search-minus:hover	{background:#7c99ad;}

#indicators
	{
	float:left;
	max-width:168px;
	min-width:140px;
	border: 1px solid #cccccc;
	border-top:0px;
	}

.tier
	{
	padding:10px;
	background:#f1f1f1;
	}

#indicators ul li		{ margin-bottom:10px; cursor:pointer; list-style:none; 	border:1px solid #74918a; padding:5px;}
#indicators ul			{ margin:0; padding:0; clear:both; padding-top:10px;}

#indicators ul li:hover
	{
	border:1px solid #fff;
	background:#6f8ca3;
	color:#fff;
	}

#indicators ul li.active-indicator
	{
	border:1px solid #fff;
	background:#6f8ca3;
	color:#fff;
	}

.scenario-block ul li.active-show	{background:#384658;}

input[type="checkbox"]
	{
	margin-right:5px;
	vertical-align:top;
	margin-top:2px;
	}

#indicators span.text
	{
	display: inline-block;
    float:none;
	}

.indicator.second {display:none;}
.choose-indicator-block		{ float:left; }


@media screen and (max-width : 1125px)
{
	.scenario, .timeseries 	{width:100%; padding:0px; border:1px solid #fff; background:#ccc;}

	.scenario-block p			{margin-left:5px;}
}

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

.content 
	{
    border-top: 1px solid #d7d7d7;
    float: left;
    margin: 0;
    width: 100%;
	}
}

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

.indicator.first {display:none;}
.indicator.second
	{
	display:block;
	width:100%;
	padding:0;
	border:none;
	margin-bottom:15px;
	}

.choose-indicator-block	{ width:100%; }

.indicator.second p		{margin-left:10px;}
.indicator.second span	{margin-right:10px;}

#indicators, #map-scenario	{ max-width:100%; }
#indicators	{float:none;}

}


@media screen and (max-width : 600px)
{
.scenario-block ul li			{ margin-bottom:1px; }
.scenario-block ul				{ margin-left:0px; margin-top:5px; }
.scenario p, .timeseries p		{ margin-top:0px; padding-left:10px; padding-top:10px; padding-bottom:10px; }
.scenario, .timeseries  		{ width:100%; padding:0px; border:none; border-bottom:1px solid #ccc; }
}


@media screen and (max-width : 480px)
{
	.scenario-block ul			{ margin-top:0px; }
	.scenario p, .timeseries p	{ display:none; }
}