@import 'mixins.less';

.new-hotel-list {
	list-style: none;
	margin-bottom: 15px;
	padding: 0;

	li {
		border-bottom: solid 1px #e1e1e1;
		clear: left;
		margin-bottom: 17px;
		position: relative;
		width: 834px;
		&:after {
		    content: ' ';
		    display: block;
		    height: 0;
		    clear: both;
		    visibility: hidden;
    	}

    	.sm-desktop, .mobile {
			display: none;
		}

    	.lg-desktop {
			display: block;
		}

    	.stars {
    		line-height: 16px;
    		margin-top: 15px;
    		position: absolute;
    		z-index: 9999;
    	}

		.royalSlider {
			float: left;
			height: 185px;
			margin-right: 19px;
			width: 300px;
		}

		.hotel-info {
			height: 185px;
			float: left;
			position: relative;
			width: 515px;

			.rating {
	  			float: right;
	  			margin: 5px 0 0 0;
	  			text-align: right;

	  			a {
	  				color: #666;	
					font-size: 14px;
					.regular-font;
					&:hover {
						color: black;
					}

					.dot-rating {
						float: right;
					}
	  			}
	  		}

			.name {
				height: 24px;
				margin: 0;

				a {
					color: @dark-blue;
					line-height: 30px;
					.font(Medium, 18px);

					&.small {
						font-size: 16px;
					}

					&.xsmall {
						font-size: 14px;
					}
				}

				.label-new {
					background-color: @yellow;
					color: white;
					line-height: 20px;
					padding: 0 5px;
					vertical-align: middle;
					.font(Medium, 16px);
				}
			}

			.region {
				color: @blue;
				line-height: 20px;
				margin: 0;
				.font(Regular, 14px);

				.from-to {
					color: @blue;
					display: inline;
					line-height: 18px;
					.font(Regular, 14px);
				}
			}

			.from-to {
				color: @blue;
				display: none;
				line-height: 18px;
				.font(Regular, 14px);
			}

			

			/*
			.count {
				color: black;
				.font(Regular, 14px);
			}

			.amenities {
				color: @blue;
				margin: 0;
				.font(Regular, 16px);

				.separator {
					color: #e1e1e1;
				}
			}
			*/
			.summary {
				color: #333;
				margin: 5px 0 0 0;
				.font(Regular, 14px);
			}

			.legend {
				display: table !important;
				margin: 0;
				width: 314px;

				.bedrooms {
					border-right: solid 1px #e1e1e1;
					display: table-cell;
					height: 43px;
					line-height: 18px;
					padding: 0 10px 0 0;
					vertical-align: middle;

					img {
						margin-right: 8px;
					}

					.count {
						color: #333;
						vertical-align: middle;
						.font(Regular, 16px);
					}

					.what {
						color: #333;
						.font(Regular, 16px);
					}
				}

				.bathrooms {
					border-right: solid 1px #e1e1e1;
					display: table-cell;
					height: 43px;
					line-height: 18px;
					padding: 0 10px;
					vertical-align: middle;

					img {
						margin-right: 8px;
					}

					.count {
						color: #333;
						vertical-align: middle;
						.font(Regular, 16px);
					}

					.what {
						color: #333;
						.font(Regular, 16px);
					}
				}

				.distance {
					display: table-cell;
					height: 43px;
					line-height: 18px;
					padding: 0 10px;
					vertical-align: middle;
					&.hotel {
						border-right: solid 1px #e1e1e1;
					}

					img {
						margin-right: 8px;
					}

					.count {
						color: black;
						vertical-align: middle;
						.font(Regular, 16px);
					}

					.what {
						color: black;
						.font(Regular, 16px);
					}
				}

				.ai {
					border-right: solid 1px #e1e1e1;
					display: table-cell;
					vertical-align: middle;
					.font(Regular, 16px);
				}

				.spa {
					border-right: solid 1px #e1e1e1;
					display: table-cell;
					padding-left: 20px;
					vertical-align: middle;
					.font(Regular, 16px);
				}
			}

			.actions {
				bottom: 0;
				display: table;
				height: 33px;
				position: absolute;
				width: 220px;
				left: 295px;

				/*.price {
					border-top: solid 1px #e1e1e1;
					border-left: solid 1px #e1e1e1;
					color:@blue;
					display: table-cell;
					padding: 0 5px;
					text-align: center;
					vertical-align: middle;
					.font(Light, 14px);

					.per {
						font-size: 14px;
						line-height: 14px;
					}
				}*/

				.request {
					border-top: solid 1px #e1e1e1;
					border-left: solid 1px #e1e1e1;
					display: table-cell;
					text-align: center;
					vertical-align: middle;
					width: 110px;
					&:hover {
						background-color: @dark-blue;
						
						a {
							color: white;
						}
					}

					a {
						color: @blue;
						display: inline-block;
						line-height: 32px;
						height: 100%;
						width: 100%;
						.font(Medium, 16px);
					}
				}

				.view {
					background-color: @blue;
					border-top: solid 1px #e1e1e1;
					border-left: solid 1px #e1e1e1;
					display: table-cell;
					text-align: center;
					vertical-align: middle;
					width: 110px;
					&:hover {
						background-color: @dark-blue;
					}

					a {
						color: white;
						display: inline-block;
						line-height: 32px;
						height: 100%;
						padding: 0 5px;
						width: 100%;
						.font(Medium, 16px);
					}
				}

				.book {
					background-color: @blue;
					border-top: solid 1px #e1e1e1;
					border-left: solid 1px #e1e1e1;
					display: table-cell;
					text-align: center;
					vertical-align: middle;
					width: 110px;
					&:hover {
						background-color: #00366e;
					}

					a {
						color: white;
						display: inline-block;
						height: 100%;
						line-height: 32px;
						width: 100%;
						.font(Medium, 16px);
					}
				}
			}
		}

		.offers {
			border-top: solid 1px #e1e1e1;
	  		clear: both;
	  		list-style-type: none;
	  		margin: 15px 0 15px;
	  		padding-top: 15px;

	  		li {
	  			border: none;
	  			margin: 0;
	  			padding: 0;
	  			
	  			a {
		  			color: @blue;
		  			font-size: 16px;
		  			.medium-font;
		  		}	
	  		}
	  		
	  	}

		.room-list {
			border-top: solid 1px #e1e1e1;
			clear: both;
			width: 100%;

			thead {
				border-bottom: solid 1px #e1e1e1;
				height: 32px;
				text-transform: uppercase;

				.name {
					line-height: 32px;
					padding-left: 14px;
					text-align: left;
					.font(Regular, 12px);
				}

				.persons {
					line-height: 32px;
					text-align: center;
					.font(Regular, 12px);
				}

				.price {
					line-height: 32px;
					padding-right: 14px;
					text-align: right;
					.font(Regular, 12px);
				}
			}

			tbody {
				tr {
					border-bottom: solid 1px #e1e1e1;
					line-height: 42px;

					&.odd {
						background-color: #f8f8f8;
					}

					.name {
						line-height: 28px;
						padding-left: 14px;
						text-align: left;

						a {
							color: @blue;
							.font(Medium, 16px);
						}
					}

					.persons {
						color: @blue;
						text-align: center;
						.font(Medium, 16px);

						.person {
							/*margin-right: 5px;*/
						}

						.count {
							vertical-align: middle;
							line-height: 18px;
						}
					}

					.price {
						padding-right: 14px;
						text-align: right;
						width: 175px;

						a {
							color: @blue;
							.font(Medium, 16px);
						}

						.normal-price {
							color: #808080;
							text-decoration: line-through;
							.font(Medium, 16px);
						}
					}
				}
			}
		}
	}
}

@media only screen and (min-width: @max-mobile-resolution) and (max-width: @max-resolution) {
	.new-hotel-list {
		li {
			width: 650px;

			.lg-desktop {
				display: none !important;
			}

			.mobile {
				display: none !important;
			}

			.sm-desktop {
				display: block !important;
			}

			.royalSlider {
				height: 185px;
				width: 300px;
			}

			.legend {
				top: 188px;
				display: table !important;
				margin: 0;
				position: absolute;
				top: 90px;
				width: 314px;

				.bedrooms {
					border-right: solid 1px #e1e1e1;
					display: table-cell;
					height: 43px;
					line-height: 18px;
					padding: 0 10px 0 0;
					vertical-align: middle;

					img {
						margin-right: 8px;
					}

					.count {
						color: black;
						vertical-align: middle;
						.font(Regular, 16px);
					}

					.what {
						color: black;
						.font(Regular, 16px);
					}
				}

				.bathrooms {
					border-right: solid 1px #e1e1e1;
					display: table-cell;
					height: 43px;
					line-height: 18px;
					padding: 0 10px;
					vertical-align: middle;

					img {
						margin-right: 8px;
					}

					.count {
						color: black;
						vertical-align: middle;
						.font(Regular, 16px);
					}

					.what {
						color: black;
						.font(Regular, 16px);
					}
				}

				.distance {
					display: table-cell;
					height: 43px;
					line-height: 18px;
					padding: 0 10px;
					vertical-align: middle;
					&.hotel {
						border-right: solid 1px #e1e1e1;
					}

					img {
						margin-right: 8px;
					}

					.count {
						color: black;
						vertical-align: middle;
						.font(Regular, 16px);
					}

					.what {
						color: black;
						.font(Regular, 16px);
					}
				}

				.ai {
					border-right: solid 1px #e1e1e1;
					display: table-cell;
					vertical-align: middle;
					.font(Regular, 16px);
				}

				.spa {
					border-right: solid 1px #e1e1e1;
					display: table-cell;
					padding-left: 20px;
					vertical-align: middle;
					.font(Regular, 16px);
				}
			}

			.hotel-info {
				height: 185px;
				width: 331px;

				/*.reviews-container {
					.font(Medium, 16px);

					.rating-desc {
						.font(Medium, 16px);
					}

					.based {
						color: @blue;
						.font(Regular, 14px);
					}
				}
				*/
				
				.region {
					.from-to {
						display : none;
					}
				}

				.from-to {
					color: @blue;
					display: block;
					.font(Regular, 14px);
				}

				.amenities {
					margin-top: 20px;
				}

				.actions {
					left: 111px;
					width: 220px;

					.price {
						border-top: solid 1px #e1e1e1;
						border-left: solid 1px #e1e1e1;
					}

					.request {
						a {
							.font(Medium, 14px);
						}
					}

					.book {
						a {
							.font(Bold, 14px);
						}
					}
				}
			}

			.room-list {
				thead {
					.name {
						.font(Regular, 12px);
					}

					.persons {
						.font(Regular, 12px);
					}

					.price {
						.font(Regular, 12px);
					}
				}
			}
		}
	}
}

@media only screen and (max-width : @max-mobile-resolution) {
	.new-hotel-list {
		li {
			width: 320px;

			.lg-desktop {
				display: none !important;
			}

			.sm-desktop {
				display: none !important;
			}

			.mobile {
				display: block !important;
			}

			.royalSlider {
				height: 192px;
				margin-right: 0;
				width: 320px;
			}

			.hotel-info {
				height: 165px;
				width: 320px;
				&.dates {
					height: 145px;
				}

				.name {
					margin-left: 10px;
					a {
						&.small {
							font-size: 12px !important;
						}

						&.xsmall {
							font-size: 12px  !important;
						}
					}
				}

				.region {
					margin-left: 10px;

					.from-to {
						display : none;
					}
				}

				.from-to {
					display: block;
					margin-left: 10px;
					.font(Regular, 14px);
				}

				.reviews-container {
					margin-left: 20px;
					.font(Regular, 20px);
					
					.rating-desc {
						.font(Regular, 16px);
					}

					.based {
						color: @blue;
						.font(Regular, 14px);
					}
				}

				.dots {
					margin-left: 20px;
				}

				.legend {
					bottom: 40px;
					display: table !important;
					margin-left: 10px;
					position: absolute;
					width: 310px;

					.bedrooms {
						border-right: solid 1px #e1e1e1;
						display: table-cell;
						height: 35px;
						line-height: 18px;
						padding: 4px 5px 5px 0;

						img {
							margin-right: 8px;
						}

						.count {
							color: black;
							vertical-align: middle;
							.font(Regular, 16px);
						}

						.what {
							color: black;
							.font(Regular, 16px);
						}
					}

					.bathrooms {
						border-right: solid 1px #e1e1e1;
						display: table-cell;
						height: 35px;
						line-height: 18px;
						padding: 4px 5px;

						img {
							margin-right: 8px;
						}

						.count {
							color: black;
							vertical-align: middle;
							.font(Regular, 16px);
						}

						.what {
							color: black;
							.font(Regular, 16px);
						}
					}

					.distance {
						display: table-cell;
						height: 35px;
						line-height: 18px;
						padding: 4px 0 5px 5px;
						&.hotel {
							padding: 4px 15px 5px 0;
							border-right: solid 1px #e1e1e1;
						}

						img {
							margin-right: 8px;
						}

						.count {
							color: black;
							vertical-align: middle;
							.font(Regular, 16px);
						}

						.what {
							color: black;
							.font(Regular, 16px);
						}
					}

					.ai {
						display: table-cell;
						vertical-align: middle;
						padding: 4px 0 5px 5px;
						border-right: solid 1px #e1e1e1;
						.font(Regular, 16px);
					}

					.spa {
						display: table-cell;
						vertical-align: middle;
						padding: 4px 0 5px 5px;
						border-right: solid 1px #e1e1e1;
						.font(Regular, 16px);
					}
				}

				.actions {
					left: 0;
					width: 320px;
				}
			}

			.room-list {
				tbody {
					tr {
						display: none;
						&:first-child {
							display: table-row;
						}

						.name {
							a {
								font-size: 16px;
							}
						}

						.price {
							width: auto;
						}
					}
				}
			}
		}
	}
}