/* layers css */

/* layers css */

/* erbij gezet bb */

.container-layers, container-search {
    height: 75%;
    overflow-y: scroll;
    overflow-x:hidden;
    color:#fff;
    font-size:1em;
	}

/* erbij gezet bb einde */



/* Aside */
aside 
	{
	position: fixed;
	background-color: #55bdcd;
	width: 472px;
	height: 100%;
	padding: 14px;
	right: 0px;
	}

aside h3 
	{
	position: relative;
	border: 2px solid #fff;
	border-bottom: none;
	font-weight: bold;
	font-size: 1.2em;
	color: #fff;
	padding: 5px 10px 5px 10px;
	display: inline-block;
	}

aside h3::after 
	{
	display: block;
	content: '';
	position: absolute;
	bottom: 0;
	height: 0px;
	width: 26em;
	border-bottom: 2px solid #fff;
	pointer-events: none;
	left: 100%;
	margin-left: 2px;
	}

.layer-container,
.layer-container-base {
	margin-bottom: 18px;
	padding: 10px;
	}

.layer-container h4,
.layer-container-base h4 {
	font-size: 1em;
	color: #fff;
	margin-bottom: 6px;
	}

.content-layers li {
	list-style: none;
	margin-bottom: 6px;
	}

.content-layers table 			{ width: 100%; padding: 0px; border-spacing: 0px; }
.content-layers td				{ font-size: 1em; color: #fff; vertical-align: top; }
.content-layers tr td:first-child {
	width: 24px;
	}

.content-layers tr td:last-child {
	width: 18px;
	}

.layers-buttons {
	list-style: none;
	float: right;
	}

.layers-buttons li, #button_search, #button_reset, .download-btn {
	font-size: 1em;
	color: #fff;
	cursor: pointer;
	border:none;
	margin-right:8px;
	float:right;
	border-radius:2px;
	padding:3px 5px;
	background:#000;
	text-align: center;
    width: 75px;
	}

.content-layers .container-input div {
    float: left;
    height: 16px;
    margin-right: 6px;
    position: relative;
    width: 16px;
}

input[type="range"], .browse-table {
    width: 100%;
    color:#fff;
}

input					{ width:75px; }
input[type="range"]		{ height:4px; background:#fff; border:none; }
fieldset				{ border:none;  margin-right: 0; padding-right: 0;}

.browse-table															{ border-collapse: collapse; }
td.show_details show-detail												{ cursor:pointer;}
.browse-table th														{ text-align:left; min-width:50px; padding-bottom: 10px;}
.browse-table th.browse-desc1, .browse-table tr td:nth-child(2)			{ min-width:60px; text-align:center;}
.browse-table th.browse-desc2, .browse-table tr td:nth-child(3)			{ text-align:center; min-width:100px;}
.browse-table tr	{ border-bottom: 1px solid #f2f2f2; padding-bottom:5px; }

.content-browse, .layer-container, .layer-container-base
	{
	display:block;
	margin-top:25px;
	background:#549eb8;
	margin-right:10px;
	padding:10px;
	overflow: hidden;
    width: 93.5%;
	}

#search_form		{ background:none; border:none; margin-top:25px; }
#search_form tr		{ background:#549eb8; width:100px; }
#search_form td		{ display:block; padding:5px 10px 10px; color:#fff; }
#search_form table	{ width:98%;  border-collapse: separate; }

#search_form tr input::-moz-placeholder  				{ text-align:center; }
#search_form tr input::-webkit-input-placeholder 		{ text-align:center; }
#search_form tr input:-ms-input-placeholder 			{ text-align:center; }
#search_form tr input:focus::-webkit-input-placeholder 	{ color: transparent;  }
#search_form tr input:focus:-ms-input-placeholder 		{ color: transparent;  }

#search_form tr input:focus::-moz-placeholder	{ color: transparent; }

#observation_detail_lightbox table td 	{ color:#000;}
#search_form td.input-kompas 			{ text-align:center; padding:3px; width:190px; }
#search_form td.input-kompas:last-child	{ padding-bottom:10px; } 

.browse-table td						{ padding:5px 5px 7px; padding-bottom:7px; color:#fff; font-size:1em;}
.browse-table td.show-detail:hover		{ cursor:pointer; text-decoration:underline;}
#search_form input						{ border-radius:2px; }

#search_form td:first-child, #search_form tr:nth-child(2) td:first-child		{ font-weight:bold;}


.content-browse	ul	{ width:100%; list-style:none; position:relative;}
.previous-btn 		{ background-image: url(/grfx/search/previous.png); }
.next_btn			{ background-image: url(/grfx/search/next.png); }
.content-browse	li	{ float:left; margin-right:10px;}

li.next_btn, li.previous-btn
	{
	width:20px;
	height:20px;
	cursor:pointer;
	float:right;
	text-indent:-9999px;
	display:block;
	right:0;
	position:absolute;
	}
	
li.next_btn		{margin-right:0px;}
li.previous-btn	{right:20px;}

.container-input label 				{ width: 300px; height: 18px; display: inline-block; overflow: hidden; }

.info_layer_btn, .delete_layer_btn
	{
	background-image: url(/grfx/search/help.png);
	width:15px;
	height:15px;
	display:block;
	cursor:pointer;
	}

.delete_layer_btn			{ background-image: url(/grfx/search/delete.png); }

#search_form input[type=radio] 		{ width:20px;}

#search_form td span		{margin-right:10px;}

#layer_container li label 
	{
    font-size: 1em;
    height: 24px;
	}

.container-input label 
	{
    display: inline-block;
    height: 18px;
    overflow: hidden;
    width: 300px;
	}


/* styling checkbox radio */
.content-layers .container-input div {
	position: relative;
	width: 16px;
	height: 16px;
	margin-right: 6px;
	float: left;
	}

.content-layers .container-input span {
	position: relative;
    background-image: url(/grfx/search/check_radio_sheet.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
	width: 100%;
	height: 100%;
	display: block;
	}


.content-layers .input-type-radio span			{ background-position: -32px 0px; }

/* makes invisible */
.content-layers .container-input input {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	z-index: 100;
	cursor: pointer;
	}

/* when checked */
.content-layers .container-input input:checked ~ span {
	background-position: -16px 0px;
	}

.content-layers .input-type-radio input:checked ~ span {
	background-position: -48px 0px;
	}


/* range slider */
/* thumb */
input[type=range] {
	-webkit-appearance: none;
	width: 100%;
	margin: 2px 0;
	}

input[type=range]:focus {
	outline: none;
	}

input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 6px;
	cursor: pointer;
	box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
	background: #ffffff;
	border-radius: 0px;
	border: 1px solid #010101;
	}

input[type=range]::-webkit-slider-thumb {
	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
	border: 1px solid #000000;
	height: 10px;
	width: 10px;
	border-radius: 1px;
	background: #bce8ef;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -3px;
	}

input[type=range]:focus::-webkit-slider-runnable-track {
	background: #ffffff;
	}

input[type=range]::-moz-range-track {
	width: 100%;
	height: 6px;
	cursor: pointer;
	box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
	background: #ffffff;
	border-radius: 0px;
	border: 1px solid #010101;
	}

input[type=range]::-moz-range-thumb {
	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
	border: 1px solid #000000;
	height: 10px;
	width: 10px;
	border-radius: 1px;
	background: #bce8ef;
	cursor: pointer;
	}

input[type=range]::-ms-track {
	width: 100%;
  	height: 6px;
  	cursor: pointer;
  	background: transparent;
  	border-color: transparent;
  	color: transparent;
	}

input[type=range]::-ms-fill-lower {
  	background: #f2f2f2;
  	border: 1px solid #010101;
  	border-radius: 0px;
  	box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
	}

input[type=range]::-ms-fill-upper {
  	background: #ffffff;
  	border: 1px solid #010101;
  	border-radius: 0px;
  	box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
	}

input[type=range]::-ms-thumb {
  	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  	border: 1px solid #000000;
  	height: 10px;
  	width: 10px;
  	border-radius: 1px;
  	background: #bce8ef;
  	cursor: pointer;
  	height: 6px;
	}

input[type=range]:focus::-ms-fill-lower {
  	background: #ffffff;
	}

input[type=range]:focus::-ms-fill-upper {
  	background: #ffffff;
	}

input[type=range]::-ms-tooltip {
    display: none;
}

/* --------------------------------------- */
/* TABLET - mediaqueries css */
/* --------------------------------------- */

/* screens */
@media only screen and (max-width: 1280px) {

	aside						{ width: 350px; }

	.container-input label 		{ width: 180px; }
	.browse-table				{ font-size:0.8em; }
	.browse-table th			{ min-width:35px; }
	.browse-table th.browse-desc1, .browse-table tr td:nth-child(2)		{ min-width:45px; }
	.browse-table th.browse-desc2, .browse-table tr td:nth-child(3)		{ min-width:75px; }
	.content-browse, .layer-container, .layer-container-base.search_form	{padding:5px;}
	.browse-table th.browse-desc4	{text-align:Center;}

}

/* screens */
@media only screen and (max-width: 1152px) {

	aside						{ width: 276px; }
	.browse-table th.browse-desc1, .browse-table tr td:nth-child(2)		{ min-width:25px; }
	.browse-table th.browse-desc2, .browse-table tr td:nth-child(3)		{ min-width:55px; }
	.browse-table th.browse-desc3, .browse-table th.browse-desc4	{text-align:Center;}
}