/* 20161031 hoi denise zoek op bb, om te kijken wat ik heb gedaan*/


/* --------------------------------------- */
/* UKDMOS search css */
/* --------------------------------------- */
@import url("reset.css");
@import url("font.css");
@import url("font-awesome.min.css");

body, td {
	font-family: "open_sansregular", arial, helvetica, sans-serif;
	font-size: 1em;
	color: #000;
	line-height: 1.6em;
	}

html, body {
    height: 100%;
    overflow: hidden;
	}


/* --------------------------------------- */
/* Map icons 							*/
/* --------------------------------------- */

.mapcontrols {
	position: relative;
	float: right;
	z-index: 9999999;
	display: block;
	margin-top: 18px;
	}

.mapcontrols li {
	background-color: #3a85a1;
	border-radius: 5px;
	cursor: pointer;
	list-style: none;
	display: inline-block;
	margin-right: 18px;
	padding: 5px 8px 5px 8px;
	}

.mapcontrols li:after {
	content: "\f0dd";
    font-family: FontAwesome;
    font-size: 1.4em;
    color: #fff;
    float: left;
	}

.mapcontrols li.control-layers, .mapcontrols li.control-auto-search
	{
	background-image: url("/ukdmos/grfx/mapcontrols-layers.png");
	background-size: 25px 23px;
	background-position: center center;
	background-repeat: no-repeat;
	min-width: 38px;
	min-height: 20px;
	text-indent: -9999px;
	}

.mapcontrols li.control-auto-search
	{
	background-image: url("/ukdmos/grfx/control-auto-search.png");
	}

.mapcontrols li.control-zoom-in:after	 		{ content: "\f00e"; }
.mapcontrols li.control-zoom-out:after	 		{ content: "\f010"; }
.mapcontrols li.control-legend:after	 		{ content: "\f03a"; }
.mapcontrols li.control-print:after	 			{ content: "\f02f"; }
.mapcontrols li.copyright-btn:after				{ content: "\f1f9"; }
.mapcontrols li.help-btn:after					{ content: "\f059"; }

.mapcontrols li.active							{ background-color: #304e96; }


#result_programme p	{padding:15px; font-size:0.95em;}

/* --------------------------------------- */
/* Aside								   */
/* --------------------------------------- */
aside {
	width: 450px;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #3a85a1;
    z-index: 3000;
	}

aside h1 {
	font-family: "oswaldregular", arial, helvetica, sans-serif;
	font-weight: normal;
	font-size: 1.3em;
	color: #fff;
    padding: 18px 14px 14px;
    overflow: hidden;
    }

aside h1:before {
	background: url(/ukdmos/grfx/logo.png) no-repeat center center;
	background-size: 162px 54px;
	content: " ";
	width: 162px;
	height: 54px;
	margin-right: 18px;
	display: block;
	float: left;
	}

aside a							{ text-decoration: none; }

.toggle-search
	{
	color:#fff;
	position:absolute;
	top:0px;
	right:-37px;
	border:1px solid #fff;
	padding: 3px 10px 5px 8px;
	cursor:pointer;
	background:#304e96;
	height:87px;
	border-top:0px;
	}

.toggle-search:hover	{ background:#3a85a1; }

.toggle-search::after, .sidebar-open::after		
	{
	content:"\f101";
	display:block;
	color:#fff;
	font-size:30px;
	font-family:fontAwesome;
	vertical-align:middle;
	margin-top: 25px;
	}

.sidebar-open::after	{ content:"\f100"; }

.btns-footer {
	position: absolute;
	bottom: 0;
	background: #3a85a1;
	width: 100%;
	display: block;
	}

.btns-footer button {
	font-family: "oswaldregular", arial, helvetica, sans-serif;
	background-color:#3a85a1;
	border:0px;
	min-width:100px;
	color:#fff;
	padding:10px;
	cursor:pointer;
	float:left;
	cursor:pointer;
	font-size:1.1em;
	width:50%;
	}

#programme_next, #programme_prev
	{
	margin-bottom:15px;
	background-color: #304e96;
	}

button:focus {outline:0;}

#programme_next	{ float:right;}
#programme_prev	{border-right:1px solid #fff;}
#programme_next:hover, #programme_prev:hover	
	{
	background-color:#fff; 
	-webkit-box-shadow:inset 0px 0px 0px 2px #304e96;
    -moz-box-shadow:inset 0px 0px 0px 2px #304e96;
    box-shadow:inset 0px 0px 0px 2px #304e96;
	color:#000;
	}

.btns-footer button:hover	{ background-color: #304e96; }

.btns-footer-more button		{ width:50%; }

.btns-footer .button-first-page {
	float: right;
	}

.btns-footer-more br {
	margin-bottom: 6px;
	clear: both;
	}

.button-icon {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 24px 24px;
	text-indent: -9999px;
	width: 25% !important;
	}

.button-store-query {
	background-image: url(/ukdmos/grfx/icon-store-query.png);
	background-size: 23px 24px;
	}

/* bb */
.button-view-series {
	background-image: url(/ukdmos/grfx/icon-store-query.png);
	background-size: 23px 24px;
	}

.button-zoomto-selected			{ background-image: url(/ukdmos/grfx/icon-zoom-to-selected.png); }
.button-export-result			{ background-image: url(/ukdmos/grfx/icon-export-result.png); }
.button-create-wmsurl			{ background-image: url(/ukdmos/grfx/icon-create-wms-url.png); }

.count-shown-results {
	font-size: 0.9em;
	text-align: center;
	margin-top: 18px;
	margin-bottom: 18px;
	}


/* --------------------------------------- */
/* Aside search							   */
/* --------------------------------------- */
.search-field {
	background: #fff;
	height: 90%;
	padding-top: 10px;
	position:relative;
	}

.scroll-box {
	position:relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
	height:75vh;
	max-height:75vh;
	margin-right:4px;
	}

.search-tabs {
    list-style: outside none none;
    overflow: hidden;
    margin-top: 10px;
    padding-left: 14px;
	}

.search-tabs li	{
    background-color: #3a85a1;
	border: 2px solid #3a85a1;
	border-bottom: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: "oswaldregular",arial,helvetica,sans-serif;
    font-size: 1em;
    margin-left: 1px;
    padding: 5px 10px;
    text-transform: uppercase;
	}

.search-tabs li.tab-active {
    background-color: #fff;
	border: 2px solid #3a85a1;
	border-bottom: none;
    color: #3a85a1;
    position: relative;
	}

.search-tabs li.tab-active::after,
.search-tabs li.tab-active::before {
    border-bottom: 2px solid #3a85a1;
    bottom: 0;
    content: "";
    display: block;
    height: 0;
    pointer-events: none;
    position: absolute;
    width: 999em;
	}

.search-tabs li.tab-active::before {
    margin-right: 0;
    right: 100%;
	}

.search-tabs li.tab-active::after {
    left: 100%;
    margin-left: 0;
	}

.search-form					{ padding: 14px; }
.search-form dt {
	font-family: "oswaldregular",arial,helvetica,sans-serif;
	font-size: 0.9em;
	color: #3a85a1;
	text-transform: uppercase;
	}

.search-form dd					{ font-size: 0.85em; margin-bottom: 18px; }
.search-form select				{ line-height:10px;}
.search-form dd.birthday input	{ width:30%; margin-right: 14px; }
.search-form dd.birthday input:last-child {
	margin-left:14px;
	margin-right:0px;
	}

.search-form input,
.search-form select {
	width:100%;
	border:1px solid #d5cdcd;
	}

.input-north,
.input-south {
	margin-left: 75px;
	}

.input-west,
.input-north,
.input-south,
.input-east {
    cursor: pointer;
    float: left;
    text-align: center;
    width:30%;
    max-width:30%;
	}

.input-west {
    clear: left;
    margin-right: 10px !important;
	}

.input-west,
.input-east {
	float: left;
	}

.input-west:hover,
.input-north:hover,
.input-south:hover,
.input-east:hover {
	background: #f1f1f1;
	}

.additional-search		{ background:#f1f1f1; margin-bottom: 54px; }
.additional-search dl	{ margin-top: 18px; }


/* --------------------------------------- */
/* Aside results							   */
/* --------------------------------------- */

.scroll-box .options-box
	{
	padding:15px;
	font-size:0.9em;
	color:#585c5d;
	}

.scroll-box .options-box span				{ font-family: "oswaldregular",arial,helvetica,sans-serif;}
.scroll-box .options-box span:last-child	{ float:right; margin-bottom:10px;}

.scroll-box .options-box ul li
	{
	text-indent:-9999px;
	width:24px;
	height:24px;
	cursor:pointer;
	}

.scroll-box .options-box ul li.icon-plus	{ background: url(/grfx/ukdmos/icon-plus.png) no-repeat; }
.scroll-box .options-box ul li.icon-csv		{ background: url(/grfx/ukdmos/icon-csv.png) no-repeat; }
.scroll-box .options-box ul li.icon-star	{ background: url(/grfx/ukdmos/icon-star.png) no-repeat; }
.scroll-box .options-box ul li.icon-wms		{ background: url(/grfx/ukdmos/icon-wms.png) no-repeat; }

aside .options-box ul
	{
	margin:10px 0px;
	}

aside .options-box ul li
	{
	list-style:none;
	float:left;
	margin-right:10px;
	}

aside .options-box ul li:last-child	{ margin-right:0px; }

.button_extended_search
	{
	float:right;
	font-size:0.8em;
	list-style:none;
	padding:15px 15px 0px 0px;
	cursor:pointer;
	}

.button_extended_search:after, .less-result:after
	{
	content: "\f0d7";
    font-family: FontAwesome;
    font-size:1.5em;
    color:#3a85a1;
    cursor:pointer;
    margin-left:5px;
    vertical-align:middle;
	}

.less-result:after
	{
	content: "\f0d8";
	vertical-align:top;
	}

.results-form
	{
    border: 0 none;
    border-collapse: collapse;
    font-size: 1.3em;
    text-align: left;
    width: 100%;
	}

.results-form th
	{
    background: #5592b1 none repeat scroll 0 0;
    color: #fff;
	}

.results-form select		{ max-width:50px; }

.results-form th, .results-form td
	{
    font-weight: normal;
    padding: 10px;
	}

.results-form td				{ padding: 8px; }

.results-form th:last-child,
.results-form td:last-child {
    text-align: center;
    vertical-align: middle;
	}

.results-form thead, .total-found { display: none; }

.results-form tr {
	margin-bottom: 20px;
	display: block;
	border: 1px solid #ddd;
	padding:0px 5px;
	}

tr:nth-child(even) 				{ background: #f1f1f1; }

.results-form td {
    display: block;
    text-align: right;
    font-size: 13px;
    border-bottom: 1px dotted #ccc;
    color:#585c5d;
    }

.results-form td p {
	width: 200px;
    display: inline-block;
	}

.results-form td:last-child 	{ border-bottom: 0; }

.results-form td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    }

.results-form td:last-child		{ text-align:right; }

.results-form td a.show:after {
	content: "\f06e";
    font-family: FontAwesome;
    font-size:1.5em;
    color:#585c5d;
	}

.results-form td a				{ text-decoration:none; }

.results-article {
	border-bottom: 1px solid #3a85a1;
	padding: 14px;
	overflow:hidden;
	}

.results-article h4				{ font-size: 0.9em; color: #0e72b5; cursor: pointer; }

.results-article h4:hover		{color:#288ed3;}



h4.show_detail	{text-decoration:underline;}

.results-article p				{ font-size: 0.85em; }
#result_programme .organisation	{ color: #55c5ef; padding:0;}
#result_programme .description	{ padding:0; margin-bottom:10px; font-size: 0.85em;}

/* --------------------------------------- */
/* Map								       */
/* --------------------------------------- */

#main							{ margin-left: 450px; }

.map {
	position: absolute;
	background:#4f6baa;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-left: 450px solid #ef2358;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 0;
	}


/* --------------------------------------- */
/* Layers								       */
/* --------------------------------------- */

.layer_ui_title {
	font-family: "oswaldregular",arial,helvetica,sans-serif;
	font-size: 1em;
	color: #3a85a1;
	text-transform: uppercase;
	}

.layer_ui_label {
	font-size: 0.85em;
	}

.layers_table
	{
	width:100%;
	}

.layers_table tr	{margin-bottom:10px; cursor:pointer;}
.layers_table td:first-child{width:60%;}
.layers_table th
	{
    font-family: "oswaldregular",arial,helvetica,sans-serif;
    font-size: 0.9em;
    color: #3a85a1;
    text-transform: uppercase;
    text-align:left;
	}

.layers_table tr:nth-child(2n)	{background:none;}

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

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


}

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


}

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


}

/* ==> breakpoint notebooks, tablets */
@media only screen and (max-width: 920px) {
	.mapcontrols li
	{
		display:block;
		margin-bottom:18px;
		min-height:35px;
	}

}

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


}

/* ==> breakpoint mobiles */
@media only screen and (max-width: 480px) {

}

@media screen and ( min-width: 600px ) and ( max-height: 950px )
{

	.scroll-box
	{
		height: 70vh;
		max-height: 70vh;
	}

.mapcontrols li.control-layers, .mapcontrols li.control-auto-search {min-height:35px;}

}

@media screen and ( min-width: 600px ) and ( max-height: 825px )
{

	.scroll-box
	{
		height: 66vh;
		max-height: 66vh;
	}

		.btns-footer	{bottom:7px;}

}

@media screen and ( min-width: 600px ) and ( max-height: 700px )
{

	.scroll-box
	{
		height: 62vh;
		max-height: 62vh;
	}
	.btns-footer	{bottom:15px;}

}