@charset "utf-8";
/* CSS Document */
.frame {
	width:600px;
	height:400px;
	background:url(https://www.showershopping.co.uk/HYW/NewTemplet/imgs/map.jpg);
	background-size:100%;
	margin:0 auto;
	padding:0;
}
.frame a {
	display:block;
	float:left;
	width:20px;
	height:20px;
	cursor:crosshair;
	position:relative;
	z-index:10;
}
.frame a.r1,.frame a.r10 {
	height:120px;
}
.frame a.c1,.frame a.c20 {
	width:120px;
}
.frame a:hover {
	direction:ltr;
	position:relative;
	z-index:1
}
.frame a:hover b {
	display:block;
	position:absolute;
	width:240px;
	height:240px;
	top:-120px;
	left:-120px;
	box-shadow:0px 0px 2px 2px #00a9c8;
	background:#fff;
	filter:alpha(opacity=30);
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
	opacity:0.3;
}
.frame a.r1:hover b {
	top:0;
}
.frame a.c1:hover b {
	left:0;
}
.frame a:hover i em {
	display:block;
	width:1200px;
	height:800px;
	background:url(https://www.showershopping.co.uk/HYW/NewTemplet/imgs/map.jpg);
	position:absolute;
}
.frame a:hover i {
	display:block;
	width:446px;
	height:486px;
	position:absolute;
	overflow:hidden;
	top:0;
	box-shadow:0px 0px 1px 1px #023550;
}
.frame a.c1:hover i {
	left:610px;
}
.frame a.c2:hover i {
	left:490px;
}
.frame a.c3:hover i {
	left:470px;
}
.frame a.c4:hover i {
	left:450px;
}
.frame a.c5:hover i {
	left:430px;
}
.frame a.c6:hover i {
	left:410px;
}
.frame a.c7:hover i {
	left:390px;
}
.frame a.c8:hover i {
	left:370px;
}
.frame a.c9:hover i {
	left:350px;
}
.frame a.c10:hover i {
	left:330px;
}
.frame a.c11:hover i {
	left:310px;
}
.frame a.c12:hover i {
	left:290px;
}
.frame a.c13:hover i {
	left:270px;
}
.frame a.c14:hover i {
	left:250px;
}
.frame a.c15:hover i {
	left:230px;
}
.frame a.c16:hover i {
	left:210px;
}
.frame a.c17:hover i {
	left:190px;
}
.frame a.c18:hover i {
	left:170px;
}
.frame a.c19:hover i {
	left:150px;
}
.frame a.c20:hover i {
	left:130px;
}
.frame a.r1:hover i {
	top:-10px;
}
.frame a.r2:hover i {
	top:-130px;
}
.frame a.r3:hover i {
	top:-150px;
}
.frame a.r4:hover i {
	top:-170px;
}
.frame a.r5:hover i {
	top:-190px;
}
.frame a.r6:hover i {
	top:-210px;
}
.frame a.r7:hover i {
	top:-230px;
}
.frame a.r8:hover i {
	top:-250px;
}
.frame a.r9:hover i {
	top:-270px;
}
.frame a.r10:hover i {
	top:-290px;
}
.frame a.c1:hover em {
	left:0px;
}
.frame a.c2:hover em {
	left:0px;
}
.frame a.c3:hover em {
	left:-40px;
}
.frame a.c4:hover em {
	left:-80px;
}
.frame a.c5:hover em {
	left:-120px;
}
.frame a.c6:hover em {
	left:-160px;
}
.frame a.c7:hover em {
	left:-200px;
}
.frame a.c8:hover em {
	left:-240px;
}
.frame a.c9:hover em {
	left:-280px;
}
.frame a.c10:hover em {
	left:-320px;
}
.frame a.c11:hover em {
	left:-360px;
}
.frame a.c12:hover em {
	left:-400px;
}
.frame a.c13:hover em {
	left:-440px;
}
.frame a.c14:hover em {
	left:-480px;
}
.frame a.c15:hover em {
	left:-520px;
}
.frame a.c16:hover em {
	left:-560px;
}
.frame a.c17:hover em {
	left:-600px;
}
.frame a.c18:hover em {
	left:-640px;
}
.frame a.c19:hover em {
	left:-680px;
}
.frame a.c20:hover em {
	left:-720px;
}
.frame a.r1:hover em {
	top:0px;
}
.frame a.r2:hover em {
	top:0px;
}
.frame a.r3:hover em {
	top:-40px;
}
.frame a.r4:hover em {
	top:-80px;
}
.frame a.r5:hover em {
	top:-120px;
}
.frame a.r6:hover em {
	top:-160px;
}
.frame a.r7:hover em {
	top:-200px;
}
.frame a.r8:hover em {
	top:-240px;
}
.frame a.r9:hover em {
	top:-280px;
}
.frame a.r10:hover em {
	top:-320px;
}
#mobile_map {
	display:none;
}
@media screen and (max-width:780px) {
	.frame {
		display:none;
	}
	#mobile_map {
		display:block;
		width:99%;
		padding:0.5%;
	}
}
.map_table {
	width:100%;
	margin:2px auto 0;
}
.map_table th {
	text-align:center;
	font-size:14px;
	line-height:25px;
}
@media (max-width:768px) {
	.map_table th {
		font-size:15px;
		line-height:15px;
	}
}
@media (max-width:640px) {
	.map_table th {
		font-size:12px;
		line-height:10px;
	}
}
@media (max-width:480px) {
	.map_table th {
		font-size:9px;
	}
}
@media (max-width:320px) {
	.map_table th {
		font-size:7px;
		line-height: 8px;
	}
}