/* @override 
	http://www.ruheforst-hilchenbach.local/wp-content/plugins/rf_biotope/public/css/rfbiotope-public.css?ver=1.0.0
*/

/**
* All of the CSS for your public-facing functionality should be
* included in this file.
*/

/**
 * Suchfilter
 */

#biotopsucheTable {
	border: none;
	margin: 20px 0;
}
#biotopsucheTable td {
	border: none;
	padding: 0;
	vertical-align: top;
	margin: 0;
}

#biotopart label,
#biotopart-header label,
#biotopfilter label,
#biotopfilter-header label {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#biotopsucheTable td:nth-child(2) {
	padding: 10px;
}

#biotopsucheTable td div#biotopart,
#biotopsucheTable td div#biotopfilter {
	margin-top: 0;
}

/* Art */

#biotopart,	
#biotopart-header {	
	margin: 20px 0;
}
#biotopart input.bioart,
#biotopart-header input.bioart-header {
	display: none;
}
#biotopart label,
#biotopart-header label {
	display: block;
	position: relative;
	padding-left: 30px;
	margin-bottom: 5px;
	cursor: pointer;
	font-size: 1.1em;
}
#biotopart .checkmark,
#biotopart-header .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: #eee;
	border:1px solid #070;
	border-radius: 50%;
}
#biotopart label:hover input ~ .checkmark,
#biotopart-header label:hover input ~ .checkmark {
	background-color: #070;
}
#biotopart label input:checked ~ .checkmark,
#biotopart-header label input:checked ~ .checkmark {
	background-color: #070;
}
#biotopart label .checkmark:after,
#biotopart-header label .checkmark:after {
	content: "";
	position: absolute;
	display: none;
}
#biotopart label input:checked ~ .checkmark:after,
#biotopart-header label input:checked ~ .checkmark:after {
	display: block;
}
#biotopart label .checkmark:after,
#biotopart-header label .checkmark:after {
	top: 5px;
	left: 5px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

/* Wertstufen */

#wertstufeWahl,
#wertstufeWahl-header {
	width: 260px;
	position: relative;
}
#wertstufeWahl::before,
#wertstufeWahl-header::before {
	/*
	font-family: sans-serif;
	content: "•";
	font-size: 20px;
	position: absolute;
	right: 15px;
	top: 6px;
	color: #070;
	pointer-events: none;
	*/
}
#wertstufeWahl select,
#wertstufeWahl-header select {
	-moz-appearance: none;
 	-webkit-appearance: none;
	appearance: none;
	border: none;
	outline: none;
	width: 100%;
	color: #000;
	padding: 6px 15px;
	border: 1px solid #070;
	box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.1);
 	border-radius: 0px;
 	cursor: pointer;
 	background: white url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23007700%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23007700%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat;
    background-position: right 15px top 50%;
}
#wertstufeWahl select:hover,
#wertstufeWahl-header select:hover {
 	background: #eee url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23007700%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23007700%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat;
    background-position: right 15px top 50%;
}
#wertstufeWahl select::-ms-expand,
#wertstufeWahl-header select::-ms-expand {
	display: none;
}
#wertstufeWahl select:focus::-ms-value,
#wertstufeWahl-header select:focus::-ms-value {
	background-color: transparent;
}
@media only screen and (max-width: 600px) {
	#wertstufeWahl,
	#wertstufeWahl-header {
		width: 100%;
	}
}

/* Merkmale */

#biotopfilter,
#biotopfilter-header {
	line-height: 1em;
	margin: 20px 0;
}
#biotopfilter input.biotype,
#biotopfilter-header input.biotype-header {
	display: none;
}
#biotopfilter label,
#biotopfilter-header label {
	color: #070;
	font-weight: bold;
	border: 1px solid #070;
	padding: 5px 15px;
	margin-right: 6px;
	margin-bottom: 6px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	white-space: pre;
	float: left;
}
#biotopfilter.static label,
#biotopfilter-header.static label {
}
#biotopfilter label:hover,
#biotopfilter-header label:hover {
	cursor: pointer;
	color: #000;
	border: 1px solid #ccc;
	background-color: #eee;
}
#biotopfilter label.active,
#biotopfilter-header label.active,
#biotopfilter label.active:hover,
#biotopfilter-header label.active:hover {
	color: #fff;;
    background-color: #070;
}

#biotopfilter .staticgroup,
#biotopfilter-header .staticgroup {
	/* border-bottom: 1px solid #ccc; */
	width: 100%;
	display: inline-block;
	clear: both;
}
#biotopfilter .staticgroup:last-child,
#biotopfilter-header .staticgroup:last-child {
	border: none;
}

#biotopauswahl {}
#biotopauswahl-header {}

#biotopauswahl > h2,
#biotopauswahl-header > h2 {
	font-size: 1.6em
}

#biotopauswahl .infoError,
#biotopauswahl-header .infoError {
	font-size: 1.1em;
	color: #b97815;
	padding: 15px 25px;
	margin-bottom:25px;
	background-color: #fff8d3;
}

/**
 * Listendarstellung
 */

.biotop-liste {}

.biotop-liste h2 {
	font-size: 1.4em;
	padding: 0;
	margin-bottom: 8px;
}
.biotop-element {
	margin: 20px 0;
	padding: 20px 0;
	border-bottom: 1px solid #eee;
}
.biotop-element:hover {
	background-color: #e4f0ed;
}

.biotop-element .merkmale {
		margin-bottom: 15px;
	font-style: italic;
}
.biotop-element .merkmale a {
	color: #070;
	text-decoration: none;
}
.biotop-element .merkmale a:hover {
	text-decoration: underline;
}

.biotop-thumbnail {
	margin-bottom: 20px;
	width: 100%;
	height: 250px;
	max-height: 100%;
	overflow: hidden;
}
.biotop-thumbnail a {
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	transition: transform 1.0s; /* Animation */
}
.biotop-thumbnail a:hover {
 	transform: scale(1.15); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.biotop-thumbnail img {
	width: 100%;
	max-width: 100% !important;
	height: auto !important;
}

.biotop-excerpt:after {
  content: "";
  display: table;
  clear: both;
}

.biotop-excerpt p {
	margin: 5px 0 15px;
}

a.biotopDetail,
a.biotopLagepdf {
	/* color: #033604; */
	color: #070;
	font-size: 0.9em;
	border: 1px solid #070;
	background-color: #fff;
	text-decoration: none;
	font-weight: bold;
	padding: 2px 10px;
	margin-right: 8px;
	margin-bottom: 8px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	white-space: pre;
	float: left;
}
a.biotopDetail:hover ,
a.biotopLagepdf:hover  {
	color: #fff;	
	background-color: #070;
	border: 1px solid #070;
	
}
a.biotopDetail::before {
	/* content: "\00BB\0020"; */
}

a.biotopLagepdf {
	/* ohne Icons
	padding-left: 25px;
	background-repeat: no-repeat;
	background-size: 60% 60%;
	background-position: left center;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3c!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='-25 0 82 92.9' preserveAspectRatio='xMinYMid' style='enable-background:new 0 0 82 92.9;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:%23379C36;%7d %3c/style%3e%3cg%3e%3cpath class='st0' d='M49.2,89.2l6.1,3.7H26.6l6.1-3.7V76.5H0l22.1-24.6H8.2l22.1-24.6H16.4L41,0l24.6,27.3H51.6l22.1,24.6H59.8 L82,76.5H49.2V89.2z'/%3e%3c/g%3e%3c/svg%3e ");
	*/
}

@media only screen and (min-width: 600px) {
	.biotop-element {
		display: flex;
		
		margin: 0px 0;
	}

	.biotop-thumbnail {
		flex-basis: 25%;
		margin-bottom: 0px;
		width: 100%;
		height: auto;
	}

	.biotop-excerpt {
		padding-left: 25px;
		flex-basis: 75%;
	}
}

/**
 * Singledarstellung
 */
 .green-links a {
	 color:#060;
 }
.singleBiotopThumbnailContainer {
	overflow: hidden;
}
a.singleBiotopThumbnail {
	display: block;
	width: 100%;
	height: 450px;
	transition: transform 1.0s; /* Animation */
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
a.singleBiotopThumbnail:hover {
 	transform: scale(1.15); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
div#biotopNichtverfuegbar {
	font-size: 1.1em;
	color: #b97815;
	padding: 15px 25px;
	margin-bottom:25px;
	background-color: #fff8d3;
}
div#biotopNichtverfuegbar b {
	color: #b97815;
}
div.lagePics:before {
  content: "";
  display: table;
  clear: both;
}
div.lagePics {
	margin-bottom: 25px;
}
div.lagePics img {
	width: 49%;
}
table.biotop-kaufinformation {
	width: 100%;
	margin:25px 0 0;
	background-color: #e4f0ed;
}
table.biotop-kaufinformation tr {
	border-bottom: 1px solid white;
}
table.biotop-kaufinformation td {
	font-weight: bold;
	padding: 10px 10px !important;
}
table.biotop-kaufinformation td:nth-child(1) {
	width: 110px;
	color:  #060;
}
article.biotop .merkmale {
	font-weight: bold;
}
article.biotop .merkmale a {
	color: #070;
	text-decoration: none;
}
article.biotop .merkmale a:hover {
	text-decoration: underline;
}
article.biotop img {
	max-width: 100% !important;
	height: auto !important;
}

#biotopFormButton {
	border: 1px solid #070;
	background-color: #080;
	color: white;
	padding: 5px 20px;
	margin: 0 0 25px 0;
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
}

#biotopFormButton:hover {
	background-color: #0a0;
}

#biotopformSend {
	border: 1px solid #070;
	background-color: #080;
	color: white;
	padding: 5px 20px;
	margin: 20px 0 20px 0;
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#biotopformSend:hover {
	background-color: #0a0;
}

form#biotopForm {
	display: none;
	padding: 25px;
	margin: 0 0 25px 0;
	background-color: #eee;
}

#sendInformation {
	display: none;
}

#sendInformation .infoSuccess {
	padding: 25px;
	margin-bottom: 25xp;
	background-color: #090;
	color: white;
}

#sendInformation .infoError {
	padding: 25px;
	margin-bottom: 25xp;
	background-color: #900;
	color: white;
}

#sendInformation .infoSuccess b,
#sendInformation .infoError b {
	color: white;
}

form#biotopForm .form-field {
	width: 100%;
	margin: 0;
	padding: 2%;
	background-color: white;
	border: 1px solid #ddd;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

form#biotopForm textarea.form-field {
	width: 98%;
}

form#biotopForm label {
	display: inline-block;
	margin: 12px 0 2px 2px;
	padding: 0;
	font-size: 1.0em;
	color: #666;
}

form#biotopForm .form-clearrow {
	clear: both;
}

form#biotopForm .form-group-1 {
	width: 48%;
	float: left;
}

form#biotopForm .form-group-2 {
	width: 48%;
	float: right;
}

form#biotopForm select.form-field {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border: none;
}

@media only screen and (max-width: 768px) {
	div.lagePics img {
		width: 100%;
	}
	form#biotopForm .form-field {
		width: 98%;
	}

	form#biotopForm .form-group-1 {
		width: auto;
		float: none;
	}

	form#biotopForm .form-group-2 {
		width: auto;
		float: none;
	}

}