html,body {
	height: 100%;
}

body.map {
	overflow: hidden;
}

.main-footer {
    width: 100%;
    overflow: hidden;
}

#mapcontent {
	width: 100%;
	
	height: 600px;
	height: calc(100% - 116px);
	min-height: 120px;
	
	overflow: hidden;
	
	display: flex;
	flex-flow: row nowrap;
	
	position: relative;
}

#map {
	width: 100%;
	height: 100%;
    margin: 0px;
    padding: 0px;
	
    flex: 1 1 100px;
	align-self: stretch;
    order: 2;
}

#mapresult {
	position: relative;
	padding: 0 2ex;
	margin: 0;
    transition: all 0.4s ease 0s;
    
    width: 280px;
    flex: 0 1 auto;
    order: 1;

	overflow-y: auto;
	
	-ms-overflow-style: -ms-autohiding-scrollbar;
}

#mapresult.slidein {
	margin-left: -340px;
	margin-bottom: 0px;
}

#mapresultbutton {
    color: white;
	height: 40px;
    width: 40px;
    background-color: #F8B10C;
    display: block;
    vertical-align: middle;
    text-align: center;
    font-size: 26px;
    line-height: 40px;
    position: absolute;
    left: 280px;
    top: 20px;
    z-index:100;
    transition: all 0.4s ease 0s;
    cursor: pointer;
}

#mapresultbutton:not(.slidein) span.fi-arrows-in {
	display: none;
}

#mapresultbutton.slidein span.fi-arrows-out {
	display: none;
}

#mapresultbutton.slidein {
	margin-left: -280px;
	margin-bottom: 0px;
}

#mapresultbutton button {
	margin: 12px 10px;
}

.mapAd {
    margin: 1rem 0;
    padding: 0;
    text-align: center;
    overflow: hidden;
}

.mapDetail,
.mapMoreDetail {
	position: relative;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.mapDetail .close-button,
.mapMoreDetail .close-button {
	top: -.5rem;
    right: 0px;
}

.mapDetail .section-headline {
	margin-bottom: 1.2rem;
	margin-right: 2rem;
}

.mapDetailContent {
	border: 1px solid silver;
}

.hintmessage {
	margin: 1rem;
    color: #e02525;
}

.mapDetailContent .result {
	border-bottom: 1px solid silver;
	padding: .3rem;
	height: 5.5rem;
    font-size: 0.8rem;
	position: relative;
}

.mapDetailContent .result .top-icon {
	top: -17px;
    right: -15px;
    height: 54px;
}

.mapDetailContent .result:hover {
	background-color: #ffe3b8;
}

.mapDetailContent .result:nth-child(odd) {
	background-color: #eee;
}

.mapDetailContent .result:nth-child(odd):hover {
	background-color: #f1d7ae;
}

.mapDetailContent .result.mapselected {
	border: 1px solid gray;
	background-color: #ffe3b8;
}

.mapDetailContent .result .categories,
.mapMoreDetailContent .categories {
	font-size: 80%;
    color: gray;
    margin: 0px;
}

.mapDetailContent .result .categories .category:not(:last-child):after,
.mapMoreDetailContent .categories .category:not(:last-child):after {
	content: " ・ ";
}

.mapDetailContent .result .rating,
.mapMoreDetailContent .result .rating {
	zoom: .8;
	margin: 0;
    padding: 0;
    height: 24px;
}

.mapDetailContent .result .address,
.mapMoreDetailContent .address {
	margin-top: 1ex;
}

.mapDetailContent .result .name,
.mapDetailContent .result .categories,
.mapDetailContent .result .address {
	white-space: nowrap;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mapMoreDetailContent {
	margin-top: 1.5rem;
}

.mapMoreDetailContent .section-headline {
    padding-right: 2rem;
    font-weight: 400;
    color: #0A529D;
}

.mapMoreDetailContent .keywords {
    max-height: 100%;
    cursor: pointer;
}

.mapMoreDetailContent .keywords.shorten {
    max-height: 3.6rem;
}

.mapMoreDetailContent .keyword {
	background-color: #2ba6cb;
}

.result .review-bg .rating {
	cursor: auto;
}


.mapMoreDetailContent .map-info-icon {
	background-repeat: no-repeat;
    height: 22px;
    width: 22px;
    margin-right: 0.5rem;
    display: inline-block;
}

.mapMoreDetailContent .mapMoreDetailActions {
	margin-top: 1rem;
}




.map_infobox {
	padding: 1rem 0;
}    
    
.map_infobox #description {
	padding:.3em 0 0 .3em;
}
.map_infobox #description a {
	font-size:.8em;
}
.map_infobox .detail .rating.star0 {
    background-position:0 0; /* image distance in px */
}
.map_infobox .detail .rating.star10 {
    background-position:0 -19px; /* image distance in px */
}
.map_infobox .detail .rating.star20 {
    background-position:0 -39px; /* image distance in px */
}
.map_infobox .detail .rating.star30 {
    background-position:0 -57px; /* image distance in px */
}
.map_infobox .detail .rating.star40 {
    background-position:0 -74px; /* image distance in px */
}
.map_infobox .detail .rating.star50 {
    background-position:0 -93px; /* image distance in px */
}
.map_infobox .detail .rating.star5 {  /*entspricht "05" vorangstellte 0 nicht möglich da Wert berechnet */
    background-position:0 -110px; /* image distance in px */
}
.map_infobox .detail .rating.star15 {
    background-position:0 -129px; /* image distance in px */
}
.map_infobox .detail .rating.star25 {
    background-position:0 -147px; /* image distance in px */
}
.map_infobox .detail .rating.star35 {
    background-position:0 -167px; /* image distance in px */
}
.map_infobox .detail .rating.star45 {
    background-position:0 -184px; /* image distance in px */
}

.map_infobox .rating p {
    font-size:1em;
    padding-left:6em;
    cursor:pointer;
    line-height:1.2;
}


.map_infobox .matrix {
	overflow: hidden;
	display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.map_infobox .matrix li {
	background-color:#F6F6F6;
	width:3.5rem;
	height:3.5rem;
	margin:2px 2px 0 0;
	display:block;
	border-radius:4px;
}

.map_infobox .matrix li:hover {
	background-color:#ffd87c;
}

.map_infobox .matrix li.active {
    background: #F8B10C;
}
.map_infobox .matrix li span {
	background-repeat: no-repeat;
    background-image: url(../images/svg/map_icons.svg);
    background-color:transparent;
    background-size: 220px 240px;
    display:block;
    height:38px;
    cursor:pointer;
    width:35px;
    margin-left:.9em;
    margin-top:.2em;
}
.map_infobox .matrixText {
	background: none !important;
    color: #0A529D;
    font-size: .65em;
    font-weight: normal;
    height: 12px !important;
    line-height: 11px;
    margin-left:0 !important;
    padding: 0;
    width:5.4em !important;
    text-align: center;
}

.map_infobox .matrix .food {
	background-position: -9px 0px;   /* image distance in px*/
}
.map_infobox .matrix .car {
    background-position: -179px -51px;   /* image distance in px*/
}
.map_infobox .matrix .doc {
    background-position: -9px -103px;   /* image distance in px*/
}
.map_infobox .matrix .bed {
    background-position: -122px 0px;   /* image distance in px*/
}
.map_infobox .matrix .beauty {
    background-position: -68px -151px;   /* image distance in px*/
}
.map_infobox .matrix .grocery {
    background-position: -9px -51px;   /* image distance in px*/
}
.map_infobox .matrix .docEye {
    background-position: -65px -103px;   /* image distance in px*/
}
.map_infobox .matrix .docTooth {
    background-position: -123px -103px;   /* image distance in px*/
}
.map_infobox .matrix .docKid {
    background-position: -177px -103px;   /* image distance in px*/
}
.map_infobox .matrix .museum {
    background-position: -9px -195px;   /* image distance in px*/
}
.map_infobox .matrix .bank {
    background-position: -180px 0px;   /* image distance in px*/
}
.map_infobox .matrix .flower {
    background-position: -177px -151px;   /* image distance in px*/
}
.map_infobox .matrix .sport {
    background-position: -68px -195px;   /* image distance in px*/
}
.map_infobox .matrix .movie {
    background-position: -123px -195px;   /* image distance in px*/
}
.map_infobox .matrix .bar {
    background-position: -68px -1px;   /* image distance in px*/
}
.map_infobox .matrix .petrol {
    background-position: -122px -51px;   /* image distance in px*/
}
.map_infobox .matrix .theater {
    background-position: -177px -195px;   /* image distance in px*/
}
.map_infobox .matrix .pharmacy {
    background-position: -68px -51px;   /* image distance in px*/
}
.map_infobox .matrix .dress {
    background-position: -123px -151px;   /* image distance in px*/
}
.map_infobox .matrix .haircut {
    background-position: -9px -151px;   /* image distance in px*/
}
.map_infobox #mapResultsContainer .top_map_pin, .map_infobox #mapResultsContainer .basic_map_pin {
	background-color: #ff4e00;
    border: 2px solid #FFFFFF;
    box-shadow: 0.125em 0.125em 0.438em #333777;
    margin-right:.3em;
    float:left;
    margin-top:.15em;
    margin-bottom:.2em;
    border-radius:4px;
}
.map_infobox #mapResultsContainer article {
	margin-bottom:.5em;
    padding:.1em .1em .5em .1em;
}
.map_infobox #mapResultsContainer .top {
    background:rgba(0,0,0,.2)
}
.map_infobox #mapResultsContainer .headline2 {
	line-height:1.1em;
	display:block;
}
.map_infobox #mapResultsContainer .adress {
	margin-left:2.15em;
}
.map_infobox #mapResultsContainer {
	border-bottom: 0.125em solid #F3B800;
    height:21.8em;
    overflow-y:scroll;
    overflow-x:hidden;
}
.map_infobox .noSearch {
	color:#000;
	padding-top:4em;
}
.map_infobox a {
	font-size:.85em;
}
.flashyPin {
	cursor:pointer;
}
.flashyPin.TOP_map_pin .olAlphaImg {
    background-image: url(../images/map/icon_pin_top.png);
    background-repeat: no-repeat;
}
.flashyPin.BASIC_map_pin .olAlphaImg {
	background-image: url(../images/map/icon_pin.png);
    background-repeat: no-repeat;
}
.flashyPin.TOP_map_pin img:hover {
    background-image: url(../images/map/icon_pin_top_aktiv.png);
    background-repeat: no-repeat;
}
.flashyPin.BASIC_map_pin img:hover {
    background-image: url(../images/map/icon_pin_aktiv.png);
    background-repeat: no-repeat;
}
.flashyPin.active {
    z-index:1000 !important;
}
.flashyPin .needleAktiv {
	display: block;
    margin-left: -11px;
    margin-top: -52px;
}

@media screen and (orientation:portrait) and (max-width: 39.9375em) {
	#mapcontent {
		height: calc(100% - 147px);
		flex-flow: column nowrap;
	}

	#map {
		height: 300px;
		order: 1;
	}

	#mapresult {
		height: 180px;
		width: 100%;

		order: 2;
	}
	
	#mapresult.slidein {
		margin-left: 0;
		margin-bottom: -180px;
	}
	
	#mapresultbutton {
	    right: 50px;
	    bottom: 180px;
	    top: inherit;
    	left: inherit;
	}
	
	#mapresultbutton.slidein {
		margin-left: 0px;
		margin-bottom: -180px;
	}
	
}



@media screen and (orientation:portrait) and (max-width: 320px) {
	#searchSpot,#searchRequest {
		height: 2rem;
	}
	
	#searchSpotAndGeoPosition img {
		top: 3px;
	}
	
	#mapcontent {
		height: calc(100% - 133px);
	}
	
	#mapresult {
	    height: 160px;
	    flex: 0 1 160px;
	}
	
	#mapresultbutton {
	    bottom: 160px;
	}

	#mapresultbutton.slidein {
		margin-left: 0px;
		margin-bottom: -160px;
	}

	.menu > li > a {
	    padding: 0.7rem .7rem;
	}
}




@media screen and (orientation:landscape) and (max-height: 414px) {
	.header-top-bar:not(.inputfieldhasfocus) {
		display: none;
	}

	#mapcontent {
		height: 100%;
	}
}