/* setup the background image of Germany */
.de {padding:0; margin:0; list-style-type:none; background:transparent url(./image/hamburg.png); width:500px; height:493px; margin:-10px auto 0px auto; position:relative; z-index:100;}
/* move the text off screen */
.de li a.hh1 {text-indent:-9999px; display:block; width:215px; height:20px; position:absolute; line-height:16px; border-radius:3px; background-image: url(./image/pin_blue.png); background-repeat: no-repeat; background-position: 0px 0px;}
.de li a.hh2 {text-indent:-9999px; display:block; width:175px; height:20px; position:absolute; line-height:16px; border-radius:3px; background-image: url(./image/pin_green.png); background-repeat: no-repeat; background-position: 0px 0px;}
.de li a.hh3 {text-indent:-9999px; display:block; width:140px; height:20px; position:absolute; line-height:16px; border-radius:3px; background-image: url(./image/pin_red.png); background-repeat: no-repeat; background-position: 0px 0px;}

/* make the images and description invisible and an absolute position so that it does not take up any space */
.de li a em {visibility:hidden; position:absolute;}
/* set position of the pin markers */
.de li a.hh1 {top:100px; left:230px;}
.de li a.hh2 {top:150px; left:316px;}
.de li a.hh3 {top:200px; left:260px;}

.de li b {display:block; width: auto; height:auto; position:absolute; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:12px; position:absolute; border:1px solid #000; padding:0 2px 0 2px; background:#fff; box-shadow: 3px 3px 5px #666;}

/* set position of the city name-label */
.de li b.hh1 {top:95px; left:245px;}
.de li b.hh2 {top:144px; left:332px;}
.de li b.hh3 {top:193px; left:278px;}

/* move the text back into view on hover */
.de li a:hover {background:#030; text-indent:0; height:1.2em; font-size:0.8em; color:#fff; line-height:1em; padding:2px 10px; width:90px; box-shadow: 10px 10px 5px #888;}
/* hack for IE5.x */
* html .de li a:hover {width:110px; height:1.5em; w\idth:90px; he\ight:1.2em;}
/* make the descriptive text visible, give it a size and position */
.de li a:hover em {visibility:visible; margin-left:5px; background:#fff; border:1px solid #030; width:150px; color:#030; padding:25px;font-style:normal; top:-135px; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande", arial, sans-serif; /*letter-spacing:1px;*/ line-height:1.3em; box-shadow: 3px 3px 8px #666; z-index:10; border-radius:10px;}
/* hack for IE5.x */
* html .de li a:hover em {width:200px; w\idth:150px;}
/* give the image a border and margin */
.de li a:hover em img {border:1px solid #000; display:block; margin-bottom:10px;}
/* style the empty span (I know it's not semantically correct) into an arrow point */
.de li a:hover em span {display:block; width:0; height:0; overflow:hidden; border:15px solid #fff; border-width:15px 0 15px 15px; border-left-color:#030; position:absolute; left:0; top:128px;}
/* hack for IE5.x */
* html .de li a:hover em span {width:30px; height:30px; w\idth:0; he\ight:0;}