a:link{
	color: inherit;
}
/* VARIABILI COLORI */
	@beb_color1: #007593;
	/*@beb_color1: #9ec6d2;*/

	@beb_color2: #ffe387;
	@beb_color3: #9ec6d2;
	@bg_pagina_interna: #fff;
/* FINE VARIABILI COLORI */

/* FUNZIONI MULTI-BROWSER */
.border-radius(@value){
	-webkit-border-radius: @value;
	-moz-border-radius: @value;
	border-radius: @value;
}
.box-shadow(@style, @c) when (iscolor(@c)){
  box-shadow:         @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.darkGradient(@from,@to){
	@fromARGB : d2h(floor(@from * 255));
	@toARGB : d2h(floor(@to * 255));
	background: -moz-linear-gradient(top,  rgba(0,0,0,@from) 0%, rgba(0,0,0,@to) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,@from)), color-stop(100%,rgba(0,0,0,@to))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,@from) 0%,rgba(0,0,0,@to) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,@from) 0%,rgba(0,0,0,@to) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,@from) 0%,rgba(0,0,0,@to) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,@from) 0%,rgba(0,0,0,@to) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{fromARGB}000000', endColorstr='#@{toARGB}000000',GradientType=0 ); /* IE6-9 */
}
.borderImage(@image,@top,@right,@bottom,@left,@metod){
	-moz-border-image: url("@{image}")     @top @right @bottom @left @metod;
	-webkit-border-image: url("@{image}")  @top @right @bottom @left @metod;
	-o-border-image: url("@{image}")       @top @right @bottom @left @metod;
	border-image: url("@{image}")          @top @right @bottom @left fill @metod;
	border-width: 0px+@top 0px+@right 0px+@bottom 0px+@left;
}
.background-image(@url){
	background-image: url('@{url}');
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{url}', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{url}', sizingMethod='scale')";

}
.resetList(){
	margin: 0;
	padding: 0;
	list-style: none;
}
/* FINE FUNZIONI MULTI-BROWSER */

/* Reset per Internet Explorer */
a:link{
	img{
		border-style: none;
		border-width: 0px;
	}
}

/* Style */
body{
	margin: 0px;
	padding: 0px;
	border: 0px;
	background: @beb_color3;
	font-family: sans-serif;
	font-size: 12px;
	.background-image("../img/beb_bg_yellow.jpg");
	background-repeat: repeat-x;
	a{
		text-decoration: none;
		color: inherit;
		&:link:visited{
			text-decoration: none;
			color: inherit;
		}
		&:hover{
			text-decoration: underline;
		}
	}
	div#pageContainer{
		background-color: @bg_pagina_interna;
		width: 820px;
		padding: 20px;
		margin: auto;
		margin-top: 20px;
		.border-radius(10px);
		.box-shadow(inset 0px 2px 3px,40%);
		table.servicetable{
			td{
				padding: 10px;
				color: #007690;
			}
		}
		div.header{
			.background-image("../img/wi-fi-logo-header.png");
			background-position: left top;
			background-repeat: no-repeat;
			height: 50px;
			padding-left: 120px;
			font-weight: bold;
			font-size: 40px;
			margin-bottom: 20px;
			div.header_subtitle{
				p{
				margin: 0;
				}
				float: right;
				font-size: 16px;
				font-weight: normal;
				text-align: right;
				margin-top: 5px;
				width: 450px;
			}
		}
		div.sub_header{
			height: 75px;
			.background-image("../img/beb_logo_75.png");
			background-repeat: no-repeat;
			padding-left: 95px
		}
		ul.header_menu{
			.resetList();
			margin-top: 13px;
			float: left;
			a:visited{
				img{
					border: none;
				}
			}
			li{
				font-size: 15px;
				font-weight: bold;
				float: left;
				color: #fff;
				margin-right: 20px;
				background: #c3c3c3;
				padding: 13px;
				.border-radius(4px);
				box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,.6),
							0px 2px 2px rgba(0,0,0,.1);
				border-style: solid;
				border-width: 1px;
				&.blue{
					text-shadow: 0px 2px 0px #174e8a;
					border-color: #2a6294;
					background: #8cb4d2; /* Old browsers */
					background: -moz-linear-gradient(top,  #8cb4d2 0%, #609ac4 50%, #3984be 50%, #48b7ea 100%); /* FF3.6+ */
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8cb4d2), color-stop(50%,#609ac4), color-stop(50%,#3984be), color-stop(100%,#48b7ea)); /* Chrome,Safari4+ */
					background: -webkit-linear-gradient(top,  #8cb4d2 0%,#609ac4 50%,#3984be 50%,#48b7ea 100%); /* Chrome10+,Safari5.1+ */
					background: -o-linear-gradient(top,  #8cb4d2 0%,#609ac4 50%,#3984be 50%,#48b7ea 100%); /* Opera 11.10+ */
					background: -ms-linear-gradient(top,  #8cb4d2 0%,#609ac4 50%,#3984be 50%,#48b7ea 100%); /* IE10+ */
					background: linear-gradient(to bottom,  #8cb4d2 0%,#609ac4 50%,#3984be 50%,#48b7ea 100%); /* W3C */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8cb4d2', endColorstr='#48b7ea',GradientType=0 ); /* IE6-9 */
				}
				&.green{
					text-shadow: 0px 2px 0px #6eaa31;
					border-color: #6eaa31;
					background: #b5ce57; /* Old browsers */
					background: -moz-linear-gradient(top,  #b5ce57 1%, #8cba46 50%, #6eaa31 50%, #93c640 100%); /* FF3.6+ */
					background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#b5ce57), color-stop(50%,#8cba46), color-stop(50%,#6eaa31), color-stop(100%,#93c640)); /* Chrome,Safari4+ */
					background: -webkit-linear-gradient(top,  #b5ce57 1%,#8cba46 50%,#6eaa31 50%,#93c640 100%); /* Chrome10+,Safari5.1+ */
					background: -o-linear-gradient(top,  #b5ce57 1%,#8cba46 50%,#6eaa31 50%,#93c640 100%); /* Opera 11.10+ */
					background: -ms-linear-gradient(top,  #b5ce57 1%,#8cba46 50%,#6eaa31 50%,#93c640 100%); /* IE10+ */
					background: linear-gradient(to bottom,  #b5ce57 1%,#8cba46 50%,#6eaa31 50%,#93c640 100%); /* W3C */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5ce57', endColorstr='#93c640',GradientType=0 ); /* IE6-9 */
				}
				&.purple{
					text-shadow: 0px 2px 0px #af0071;
					border-color: #af0071;
					background: #c540a0; /* Old browsers */
					background: -moz-linear-gradient(top,  #c540a0 0%, #c4449e 50%, #ab0073 50%, #d9289a 100%); /* FF3.6+ */
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c540a0), color-stop(50%,#c4449e), color-stop(50%,#ab0073), color-stop(100%,#d9289a)); /* Chrome,Safari4+ */
					background: -webkit-linear-gradient(top,  #c540a0 0%,#c4449e 50%,#ab0073 50%,#d9289a 100%); /* Chrome10+,Safari5.1+ */
					background: -o-linear-gradient(top,  #c540a0 0%,#c4449e 50%,#ab0073 50%,#d9289a 100%); /* Opera 11.10+ */
					background: -ms-linear-gradient(top,  #c540a0 0%,#c4449e 50%,#ab0073 50%,#d9289a 100%); /* IE10+ */
					background: linear-gradient(to bottom,  #c540a0 0%,#c4449e 50%,#ab0073 50%,#d9289a 100%); /* W3C */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c540a0', endColorstr='#d9289a',GradientType=0 ); /* IE6-9 */
				}
				&.orange{
					text-shadow: 0px 2px 0px #dd562b;
					border-color: #dd562b;
					background: #ff9f4e; /* Old browsers */
					background: -moz-linear-gradient(top,  #ff9f4e 0%, #ffa54f 50%, #ff7828 50%, #ff7a29 100%); /* FF3.6+ */
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9f4e), color-stop(50%,#ffa54f), color-stop(50%,#ff7828), color-stop(100%,#ff7a29)); /* Chrome,Safari4+ */
					background: -webkit-linear-gradient(top,  #ff9f4e 0%,#ffa54f 50%,#ff7828 50%,#ff7a29 100%); /* Chrome10+,Safari5.1+ */
					background: -o-linear-gradient(top,  #ff9f4e 0%,#ffa54f 50%,#ff7828 50%,#ff7a29 100%); /* Opera 11.10+ */
					background: -ms-linear-gradient(top,  #ff9f4e 0%,#ffa54f 50%,#ff7828 50%,#ff7a29 100%); /* IE10+ */
					background: linear-gradient(to bottom,  #ff9f4e 0%,#ffa54f 50%,#ff7828 50%,#ff7a29 100%); /* W3C */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9f4e', endColorstr='#ff7a29',GradientType=0 ); /* IE6-9 */
				}
				&:hover{ .box-shadow(inset 0px 2px 2px,0%);}
				&:active{ .box-shadow(inset 0px 2px 10px,30%);}
				&.withIcon{
					padding-left: 45px;
					position: relative;
					img{
						position: absolute;
						top:9px;
						left:10px;
						width: 25px;
						height: 25px;
					}
				}
			}
		}
		ul.menu_lingue{
			.resetList();
			margin-top: 25px;
			float: right;
			li{
				float: right;
				height: 28px;
				border: 1px solid #4d4d4d;
				.box-shadow(0px 1px 2px,40%);
				margin-left: 20px;
			}
		}
		div.mainHr{
			border: none;
			height: 1px;
			background-color: #bcbcbc;
			border-bottom: none;
			margin-top: 20px;
			.box-shadow(0px 1px 1px,20%);
		}
		div#content{
			font-size: 12px;
			h1{
				font-size: 32px;
				margin-bottom: 25px;
				margin-top: 25px;
			}
			div.faq-list{
				p{
					margin: 0;
				}
				h3{
					font-size: 20px;
					color: #007690;
					clear: both;
					margin-bottom: 0px;
				}
				div.li-question{
					width: 400px;
					float: left;
					margin-right: 20px;
				}
				div.lastRowElement{
					margin-right: 0px;
				}
				div.question{
					background-color: @beb_color2;
					padding: 15px;
					.border-radius(4px 4px 0px 0px);
					text-shadow: 0px 1px 0px white;
					box-shadow: inset 0px 22px 0px rgba(255,255,255,.2);
					margin-bottom: 0px;
					margin-top: 20px;
					cursor: pointer;
					border: 1px solid darken(@beb_color2,20%);
					&:first-letter{
						text-transform: capitalize;
					}
					&:hover{
						background-color: lighten(@beb_color2,5%);
					}
					&:active{
						box-shadow: inset 0px 2px 5px rgba(0,0,0,.2);
					}
					&.condensed{
						.border-radius(4px 4px 4px 4px);
					}
				}
				div.response{
					margin-top: 0px;
					border-radius: 0px 0px 4px 4px;
					box-shadow: inset 0px 2px 5px rgba(0,0,0,.2);
					margin-bottom: 0px;
					padding: 15px;
				}
				ul{
					margin: 0;
					padding: 0;
					list-style: none;
				}
			}
			div.footerSondaggio{
				margin-top: 10px;
			}
			span.msgoutstar{
				color: #525252;
				font-size: 14px;
				margin-left: 10px;
			}
			div.formCategory{
				margin-top: 20px;
				h3{
					margin: 0;
					font-size: 30px;
					color: @beb_color1;
				}
				div.domanda{
					clear: both;
					margin-top: 10px;
					font-size: 16px;
					padding: 10px;
					border: 1px solid #bcbcbc;
					margin-top: 20px;
					border-radius: 4px;
					box-shadow: inset 0px 2px 5px rgba(0,0,0,.2);
					div.domanda_text{
						color: @beb_color1;
						margin-bottom: 5px;
					}
					div.risposte{
						label{
							margin-left: 5px;
							margin-right: 5px;
							font-size: 14px;
							color: lighten(black,30%);
						}
						div.macrorisp{
							float: left;
							margin-bottom: 3px;
						}
					}
					&:hover{
						background-color: lighten(#ffe393,18%);
					}
				}
			}
			div.questionarioOK{
				margin-top: 20px;
			}
			div.schedaHotel{
				h1{
					font-size: 33px;
					float: left;
				}
				h2{
					color: @beb_color1;
					float: right;
					font-size: 20px;
					text-align: right;
					div.telephone{
						.background-image("../img/phone_icon.png");
						background-position: right center;
						background-repeat: no-repeat;
						padding-right: 25px;
						background-size: auto 15px;
						margin-bottom: 5px;
					}
					div.email{
						.background-image("../img/mail_icon.png");
						background-position: right center;
						background-repeat: no-repeat;
						padding-right: 25px;
						background-size: 18px;
					}
					&.turisticInformation{
						text-align: left;
						float: left;
						margin-bottom: 0px;
					}
				}

				div.descrizioneHotelSx{
					width: 490px;
					float: left;
					font-size: 14px;
					p{
						margin-top: 0;
					}
					div.LinkUtili{
						position: relative;
						background: @beb_color1;
						border-radius: 5px;
						padding: 15px;
						color: white;
						box-shadow: inset 0px 1px 5px darken(@beb_color1,20%);
						p{
							margin: 0;
							img[alt="Tripadvisor"]{
								position: absolute;
								right: 10px;
								top: 10px;
							}
						}
					}
				}
				div.mapDx{
					float: right;
					width: 300px;
					height: 256px;
					border: 1px solid @beb_color1;
					div.mediaContainer{
						width: 300px;
						height: 215px;
						background: darken(@beb_color1,15%);
						background-size: auto 215px;
						background-position: center center;
						background-repeat: no-repeat;
						small{
							display: none;
						}
					}
					div.slider-bottom{
						height: 40px;
						background-color: @beb_color1;
						border-bottom: 1px solid @beb_color1;
						border-top: 1px solid @beb_color1;
						div.centerBox{
							height: 40px;
							padding: 1px;
							padding-top: 0px;
							width: 262px;
							float: left;
							overflow: hidden;
							ul{
								padding: 0;
								margin: 0;
								list-style: none;
								width: 9000px;
								li{
									cursor: pointer;
									float: left;
									width: 38px;
									height: 38px;
									border: 1px solid white;
									margin-right: 1px;
									background-repeat: no-repeat;
									background-position: center center;
									background-size: auto 38px;
									&:active{
										opacity: 0.8;
									}
									&.map{
										background-color: white;
										.background-image("../img/pin_icon.png");
										background-size: 10px;
									}
								}
							}
						}
						div.arrow{
							background: white;
							width: 18px;
							height: 40px;
							cursor: pointer;
							float: left;
							background-repeat: no-repeat;
							background-position: center center;
							background-size: 8px;
							&.leftArrow{
								.background-image("../img/arrow-left.png");
							}
							&.rightArrow{
								.background-image("../img/arrow-right.png");
							}
							&:active{
								opacity: 0.8;
							}
						}
					}
				}
				div.monumentiList{
					overflow: hidden;
					height: 180px;
					margin-top: 20px;
					margin-bottom: 20px;
					margin-left: -20px;
					margin-right: -20px;
					div.arrow{
						width: 20px;
						height: 180px;
						float: left;
						background-position: center center;
						background-repeat: no-repeat;
						background-size: 10px;
						cursor: pointer;
						&.leftArrow{
							.background-image("../img/arrow-left.png");
						}
						&.rightArrow{
							.background-image("../img/arrow-right.png");
						}
						&:active{
							opacity: .5;
						}
					}
					div.centerBox{
						width: 820px;
						overflow: hidden;
						float: left;
						ul{
							list-style: none;
							margin: 0;
							padding: 0;
							width: 9000px;
							height: 180px;
							li{
								float: left;
								width: 238px;
								height: 158px;
								padding: 10px;
								border:1px solid @beb_color1;
								border-radius: 5px;
								margin-right: 20px;
								box-shadow: inset 0px 2px 5px rgba(0,0,0,.33);
								h4{
									margin: 0px;
									margin-bottom: 5px;
									font-size: 20px;
									color: @beb_color1;
								}
								div.immagineMonumento{
									width: 238px;
									border-radius: 5px;
									height: 85px;
									background: @beb_color1;
									background-position: center center;
									background-repeat: no-repeat;
									background-size: 238px;
								}
								div.descrizioneMonumento{
									margin-top: 5px;
									color: #575757;
									font-size: 12px;
									p{margin: 0;}
								}
							}
						}
					}
				}
			}
		}
		img.starRate{
			cursor: pointer;
		}
	}
	#footer{
		text-align: center;
		color: #fff;
		width: 800px;
		margin: auto;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	div.indicazioniStradaliBar,
	div.moreInfoBar{
		margin-top: 20px;
		clear: both;
		background-color: @beb_color2;
		color: @beb_color1;
		font-weight: bold;
		padding: 13px;
		padding-left: 50px;
		border-radius: 5px;
		overflow: hidden;
		box-shadow: inset 0px 1px 5px 0px #fabc02;
		.background-image("../img/pin_icon.png");
		background-repeat: no-repeat;
		background-position: 17px 17px;
		min-height: 42px;
		p{
			margin: 0;
		}
		div.indicazioniStradaliText{
			float: left;
			width: 625px;
		}
		div.buttonSirectionsOnMap{
			width: 130px;
			text-align: center;
			float: right;
			border-left: 1px solid #fabc02;
			box-shadow: inset 1px 0px 0px rgba(255,255,255,.5);
			margin-right: -13px;
		}
	}
	div.moreInfoBar{
		.background-image("../img/globe_icon.png");
		padding-left: 65px;
	}
}
ul.hotelList{
	list-style: none;
	margin: 0;
	padding: 0;
	width: 820px;
	li{
		float: left;
		width: 238px;
		height: 158px;
		padding: 10px;
		border:1px solid @beb_color1;
		border-radius: 5px;
		margin-right: 20px;
		box-shadow: inset 0px 2px 5px rgba(0,0,0,.33);
		margin-bottom: 20px;
		h4{
			margin: 0px;
			margin-bottom: 5px;
			font-size: 15px;
			height: 20px;
			margin-top: 2px;
			color: @beb_color1;
		}
		div.immagineMonumento{
			width: 238px;
			border-radius: 5px;
			height: 130px;
			background: @beb_color1;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 238px;
		}
		div.descrizioneMonumento{
			margin-top: 5px;
			color: #575757;
			font-size: 12px;
			p{margin: 0;}
		}
	}
}
ul.csResultList{
	list-style: none;
	margin: 0;
	padding: 0;
	table,td{
		border:1px solid black;
		border-collapse: collapse;
		position: relative;
		padding: 2px;
		font-size: 13px;
	}
	th{
		font-size: 15px;
		background: gray;
		color: white;
	}
	table{
		tr:hover{
			background-color: #f9ffbc;
		}
		width: 100%;
	}
	div.progContainer{
		width: 100%;
		min-width: 200px;
		height: 20px;
		background: #e2e2e2;
		box-shadow: inset 0px 2px 5px rgba(0,0,0,.2);
		overflow: hidden;
		border-radius: 3px;
		position: relative;
		div.prog{
			position: absolute;
			top:0px;
			left: 0px;
			height: 20px;
			background: green;
		}
		div.numberProg{
			position: absolute;
			top:3px;
			width: 100%;
			height: 20px;
			color: white;
			text-align: center;
			text-shadow: 0px 1px 0px black;
		}
	}
}