@charset "utf-8";
@import url(/scripts/styles/menu.css);

main > h2 {text-align: center; margin: 0 0 0.25em;}
@media screen
{
	#dorsetmap {
		--mapWidth: 452;
		--mapHeight: 317;
		--imgWidth: 452;
		--imgHeight: 317;

		position: relative; margin: 10px auto; padding: 0; width: calc(var(--imgWidth) * 1px); height: calc(var(--imgHeight) * 1px);  background-image: url(images/dorset_css.gif); background-size: calc(var(--imgWidth) * 1px) calc(var(--imgHeight) * 4px) ; background-position: 0 0; background-repeat: no-repeat;
	}
	#dorsetmap li {position: absolute; display: block; text-indent: -3000px; overflow: hidden;}
	#dorsetmap a {display: block; width: inherit; height: inherit;}
	
	#dorset_east  	{left: calc((280 / var(--mapWidth)) * 100%); top: calc((50 / var(--mapHeight)) * 100%);}
	#dorset_north   {left: calc((181 / var(--mapWidth)) * 100%); top: 0;}
	#dorset_purbeck {left: calc((218 / var(--mapWidth)) * 100%); top: calc((168 / var(--mapHeight)) * 100%);}
	#dorset_west    {left: 0; top: calc((45 / var(--mapHeight)) * 100%);} 
	
	#dorset_east a {width: calc((var(--imgWidth) / var(--mapWidth)) * 171px); height: calc((var(--imgHeight) / var(--mapHeight)) * 174px)}
	#dorset_north a {width: calc((var(--imgWidth) / var(--mapWidth)) * 141px); height: calc((var(--imgHeight) / var(--mapHeight)) * 180px);}
	#dorset_purbeck	a {width: calc((var(--imgWidth) / var(--mapWidth)) * 148px); height: calc((var(--imgHeight) / var(--mapHeight)) * 115px);}
	#dorset_west a {width: calc((var(--imgWidth) / var(--mapWidth)) * 245px); height: calc((var(--imgHeight) / var(--mapHeight)) * 274px);}
	
	#dorsetmap a:hover, #dorsetmap a:focus {background-image: url(images/dorset_css.gif); background-repeat: no-repeat; background-size: calc(var(--imgWidth) * 1px) calc(var(--imgHeight) * 4px)}
	
	#dorset_east    a:hover, #dorset_east    a:focus {background-position: calc((var(--imgWidth) / var(--mapWidth)) * -280px) calc((var(--imgHeight) / var(--mapHeight)) * -366px);}
	#dorset_north   a:hover, #dorset_north   a:focus {background-position: calc((var(--imgWidth) / var(--mapWidth)) * -181px) calc((var(--imgHeight) / var(--mapHeight)) * -634px);}
	#dorset_purbeck a:hover, #dorset_purbeck a:focus {background-position: calc((var(--imgWidth) / var(--mapWidth)) * -218px) calc((var(--imgHeight) / var(--mapHeight)) * -1119px);}
	#dorset_west    a:hover, #dorset_west    a:focus {background-position: 0 calc((var(--imgHeight) / var(--mapHeight)) * -361px);}
	
	#flexintro {display: flex;}
}
@media print {#dorsetmap {display: none;}}

@media only screen and (max-width: 750px) {
	#dorsetmap {
		--imgWidth: 355;
		--imgHeight: 250;} 
	#flexintro {flex-direction: column-reverse;}
}