#mappa {position:relative; max-width:948px; border:1px solid #aaa;}
#mappa img {position:absolute; top:0; left:0; /*border: 1px solid #aaa;*/}
.off {display:none}
.on {display:inherit}
#mappa img.base {position:static;}
#mappa a {position: absolute; background:url(images/backgrounds/blank.png) repeat 0 0;}
#didascalie {position:absolute;}
#didascalie > div {background-color: #FFCC00; border: 1px solid #EEBB00; box-shadow: 0 4px 5px #AA6600; box-shadow: 5px 5px 5px rgba(90,50,0,0.4);  font: 13px/140% arial; padding: 20px; width: 250px;}
#didascalie > div p {margin:5px 0 0}
#didascalie > div p span.numero {display: block; float: left; font-size: 61px; left: 0; line-height: 49px; margin: 0 5px 0 -5px; top: 0; color: rgba(0, 0, 0, 0.3);}
#didascalie h4 {font-size:14px; font-weight:bold;}
#mappa a[class|=dida] {background-color:#aaa; background-image:url(images/dida_i.png); background-position:center center; background-repeat:no-repeat; border-radius:50px; border: 1px solid #FFFFFF;}
#mappa a.attivo[class|=dida] {background-color:#eb0;}
#mappa a[class|=dida] span {position:absolute; left:40px; width:auto;}
#mappa a.numero[class|="dida"] { background:url(images/numeri_pulsantiera.png) no-repeat 0 0; border: medium none; display: block; height: 17px; padding: 3px 5px 7px 0; text-align: center; width: 24px; border-radius:0;}
#mappa a.attivo.numero[class|="dida"] {background-position:0 -100px; color:#fff;}
#mappa a.toponimo {background-color: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 15px 15px 15px 15px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); display: block; font-size: 14px; height: auto; line-height: 14px; padding: 5px 8px 5px 30px; width: auto; overflow:hidden}
#mappa a.toponimo span {display:block; position:absolute; top:0; left:0; background:url(images/dida_i.png) no-repeat center center #666; border-radius:0 15px 15px 0; width:24px; height:24px;}
#mappa a.toponimo:hover span {background-color:#eb0;}
.istruzioni {background-color: #555; color: #FFFFFF; font-size: 16px; margin: -5px 0 0; padding: 3px 0; text-align: center;}
.spiegazione {margin: 20px 20px 10px; color:#222; font-size:17px}
.legenda {position:relative; padding-left:50px;}
.legenda .item {position:absolute; top:0; left:10px; border:1px solid #fff; width:25px; height:25px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);}
.legenda .freccia {position:absolute; top:3px; left:0}

body.carta #contenuti h3 {margin:0 0 0.5em; font-size:25px;}
body.carta #contenuti p {margin-bottom:0.7em}

/*RESPONSIVE LARGHEZZE*/

@media only screen and (min-width: 1501px) {
body.carta #mappa {position:absolute;}
body.carta #contenuti {padding-left:970px;}
}

@media only screen and (min-width: 0) and (max-width: 1500px) {
body.carta #mappa {margin: 0 auto;}
body.carta #contenuti {width:948px; margin:0 auto;}
}