@import 'mixins.less';

.info-window {
	min-width: 300px;
	max-width: 500px;
	overflow: hidden;
	padding: 3px;
	
	&.business {
		width: 350px;
		
		.title {
			font-size: 0.8em;
			margin: 0;
		}
	}
	
	
	
	.text {
		font-size: 16px;
		color: #284791;
		text-decoration: none;
		font-family: 'Din Text Pro Regular','Din Display Cyrillic Medium',sans-serif;
	  	font-size-adjust: 0.5;
	  	font-weight: 500;
	  	font-style: normal;
	  	line-height: 20px !important;
	  	
	  	
		a:link {
			font-size: 16px;
			color: #2972C5;
			text-decoration: none;
		}
		
		a:visited {
			font-size: 16px;
			color: #2972C5;
			text-decoration: none;
		}
		
		a:hover {
			font-size: 16px; 
			COLOR : #000;
		}
		
		a {
			font-size: 16px;
			COLOR: #284791; 
			TEXT-DECORATION: none;
		}
	}
	
	
	
	
	.image {		
		width: 120px;
		float: left;
		
		img {			
			width: 120px;
		}
	}	
	
	
	&.hotel {
	
		.text {
			float: left;
			margin-left: 13px;
			
			.price-from {
				font-size: 14.4px;
			}
			
			.rating {
				display: block;
				margin-top: 20px;
			}
			 
			.mark {
				font-size: 1.2em;
			}
			 
			.reviews-count {
				font-size: 0.8em;
			}
		}

	}
	
	.stars {
		white-space: nowrap;
	}

	
	p {
		margin: 0;
	}
	
	 
}




@media (max-width : @max-mobile-resolution-portrait) {
	.info-window {
		/*max-width: 150px;*/
		min-width: 100px;
		display: block;
		
		.image {
			/*float: none;*/
			margin-bottom: 10px;		
		}
		
		
		&.hotel {
			.text {
				margin-left: 0;
				clear: both;				

				.mark {
					font-size: 100%;
				}

			}
		}
		
		
		.image {
			width: 100%;
			padding: 0;
		}
		

	}
	
}


.map-type-switch {
	position: absolute;
	top: 10px;
	left: 10px;
	list-style: none;	
	margin: 0;
	padding: 0;
	
	
	li {
		float: left;
		height: 40px;
		line-height: 40px;
		padding: 0 20px;
		color: #666;
		cursor: pointer;
		box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
		background: #fff;
		font-family: Roboto, Arial, sans-serif;
		font-weight: 400;
		font-size: 18px;
	}
	
	
	li.active {
		color: #000;
	}
	
}

#close_map_search {
	position: absolute;
	top: 10px;
	right: 60px;
	line-height: 3px;
	z-index: 100;
}



#legend {
	background-color: white;
	right: 10px;
	position: absolute;
	top: 60px;	
	box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
	border-radius: 2px;	

	.legend-toggle {
		color: #666;
		display: block;
		
		i {
			line-height: 40px;
			font-size: 20px;
		}
	}


	h2 {		
		margin: 15px 0;		
		padding-left: 10px;
		height: 20px;
		line-height: 20px;
		margin: 20px 0;
		.font(Regular, 22px);
	}
	
	ul.overlays {
		list-style: none;
		margin: 0;
		padding: 0;
		
		input, ul.overlays label{
			cursor: pointer;
		}
		
		li {
			border-bottom: 1px dotted #ddd;
			padding : 2px;
			.font(Regular, 14px);
		}
		
		li:last-child {
			border: none;
		}
	
		img {
			vertical-align: middle;	
		}
	}
	
	
	.legend-toggle-show {
		width: 40px;
		height: 40px;
		text-align: center;
	}
	
	.legend-toggle-hide {
		float: right;		
		margin-top: 10px;
	}
	
	
	.overlays,
	.legend-toggle-hide,
	h2 {
		display: none;
	}

	
	&.active {
	
		.overlays,
		.legend-toggle-hide,
		h2 {
			display: block;
		}

		.legend-toggle-show {
			display: none;
		}	
	}

}



@media (min-width : @min-desktop-resolution) {

	#legend {

		h2 {
			border-bottom: 1px dotted #e1e1e1;
			padding-bottom: 20px;
			margin-bottom: 10px;
		}

		&.active,
		&.desktop-always-open {
			width: 200px;	
			padding-bottom: 10px;
			padding-left: 10px;
			padding-right: 10px;
		}
		
		
		
		&.desktop-always-open {
		
			.overlays,
			h2 {
				display: block;
			}
	
			.legend-toggle-show,
			.legend-toggle-hide {
				display: none;
			}
	
		}
	
	
		&.desktop-always-open {
			.legend-toggle-hide {
				display: none;
			}
		}
		
		
	}
	
}

@media (max-width : @max-mobile-resolution) {
	
	#legend {	
	
		top: 10px;
	
		ul.overlays li {
			padding: 10px;
			font-size: 16px;
		}
		
		&.active {	
			
			left: 0;
			right: 0;
			top: 0;	
			width: auto;				
		}
	}
	
	
	.hotel-map #legend {
		display: none;
		top: 60px;
		
		&.active {
			top: 50px;
		}
		
	}
	
	.hotel-map .map-type-switch {
		top: 60px;
	}
	
	.map-type-switch {
		display: none;
	}
	
	.legend-toggle-hide {
		margin-right: 20px;
	}
	
	
	
}