scalable, reponsive image map + font-size so are em values for radius & shadow

dabblet.css

/* scalable, reponsive image map + font-size so are em values for radius & shadow*/
html {
font-size:30px;
min-height:100%;
background:linear-gradient(0deg, transparent,gray);}
p , h1{text-align:center;
position:relative;text-shadow:1px 1px #999
}
.image_map  {
width:640px;height:480px;
margin:1em auto;
border : solid gray;
box-shadow:0 0 0.5em  white,0 0 0  2000px rgba(0,0,0,0.5);
transition:0.5s;
border-radius:1em;
overflow:hidden;
position:relative;
}

@media all and (max-width:700px) {
div.image_map {
width:480px;height:360px;overflow:hidden;
position:relative;border:solid red;
box-shadow:0 0 0.5em  white,0 0 0  2000px rgba(100,50,0,0.5);
transition:0.5s;}
html {transition:0.5s;
font-size:20px;}
.image_map img, map {
position:absolute;
transform:scale(0.75);transform-origin:0 0}
 }
 @media all and (max-width:500px) { 
div.image_map {
border:solid blue;
width:320px;height:240px;overflow:hidden;
position:relative;border:solid;
box-shadow:0 0 0.5em  white,0 0 0  2000px rgba(0,100,200,0.5);
transition:0.5s;}
html {transition:0.5s;
font-size:15px;}
.image_map img, map {
position:absolute;
transform:scale(0.5);transform-origin:0 0}
 }
 img {vertical-align:top;}
 h1,p {margin:0;}
 
 /* chrome */
 map, area {position:absolute;display:block;text-align:center}
 map {top:0;left:0;font-size:2em;}
 area:before {content:attr(title);color:white;text-shadow:0 0 1px #333;}
 area[title="Lien 1"] {top:0;left:0;width:298px;height:248px;background:rgba(0,0,0,0.5);line-height:248px;}
 area[title="lien 2"] {top:0;left:298px;width:342px;height:248px;background:rgba(0,0,0,0.5);line-height:248px;}
 area[title="lien 3"] {top:248px;left:0;width:338px;height:232px;background:rgba(0,0,0,0.5);line-height:232px;}
 area[title="lien 4"] {top:248px;left:338px;width:302px;height:232px;background:rgba(0,0,0,0.5);line-height:232px;}
 area:hover {background:none;}

dabblet.html

<h1>Ants surfing weeds</h1>
<div  class="image_map">
<img id="Image-Maps_6201305161140066" src="http://lorempixel.com/640/480/nature/1/" usemap="#Image-Maps_6201305161140066" border="0" width="640" height="480" alt="Ants surfing weeds" />
<map id="_Image-Maps_6201305161140066" name="Image-Maps_6201305161140066">
<area shape="rect" coords="0,0,298,248" href="#" alt="Lien 1" title="Lien 1"    />
<area shape="rect" coords="297,1,635,249" href="#" alt="lien 2" title="lien 2"    />
<area shape="rect" coords="0,247,338,475" href="#" alt="lien 3" title="lien 3"    />
<area shape="rect" coords="336,245,635,475" href="#" alt="lien 4" title="lien 4"    />
</map>
</div>
<p>	<a style="text-decoration:none; color:black;  font-family:verdana;" href="#" title="Lien 1">Lien 1</a>
 | 	<a style="text-decoration:none; color:black;  font-family:verdana;" href="#" title="lien 2">lien 2</a>
 | 	<a style="text-decoration:none; color:black;  font-family:verdana;" href="#" title="lien 3">lien 3</a>
 | 	<a style="text-decoration:none; color:black;  font-family:verdana;" href="#" title="lien 4">lien 4</a>
 | 	<a style="text-decoration:none; color:black;  font-family:verdana;" href="http://www.image-maps.com/index.php?aff=mapped_users_6201305161140066" title="Image Map">Image Map</a>
</p>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}