/* setup the background image of Germany */
/*   CSS for www.suetterlinstube.org 	 */
/* ##################################### */

.de {padding:0; margin:0; list-style-type:none; background:transparent url("image/deutschlandkarte.png"); width:460px; height:618px; margin:-10px auto 0px auto; position:relative; z-index:100;}
/* move the text off screen */
.de li a{text-indent:-9999px; display:block; width:70px; height:20px; position:absolute; line-height:16px; border-radius:3px; background: url("image/bluepin.png") no-repeat 0px 0px;} 
.de li a {text-indent:-9999px; display:block; width:70px; height:20px; position:absolute; line-height:16px; border-radius:3px; background: url("image/bluepin.png") no-repeat 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.hh {top:115px; left:208px;} /* Hamburg Pin */
.de li a.we {top:281px; left:43px;}  /* Wesel Pin */
.de li a.du {top:305px; left:45px; width:120px;}  /* Düsseldorf Pin */
.de li a.co {top:258px; left:412px;} /* Cottbus Pin */
.de li a.ha {top:294px; left:302px;} /* Halle Pin */
.de li a.ko {top:562px; left:137px;} /* Konstanz Pin */
.de li a.le {top:291px; left:146px; width:85px; background-image: url(image/blaupin.png); background-position: right center;} /* Leinefelde Pin */
.de li a.hi {top:145px; left:250px;} /* Hitzacker Pin */
.de li a.jo {top:105px; left:106px; background-image: url(image/blaupin.png); background-position: right center;} /* Jork Pin */
.de li a.gi {top:200px; left:230px;} /* Gifhorn Pin */
.de li a.bi {top:240px; left:130px;} /* Bielfeld Pin */
.de li a.gu {top:256px; left:42px; width:80px; background-image: url(image/blaupin.png); background-position: right center;} /* Gütersloh Pin */
.de li a.al {top:345px; left:165px;} /* Alsfeld Pin */
.de li a.he {top:480px; left:150px;} /* Hemmingen Pin */
.de li a.dr {top:322px; left:385px;} /* Dresden Pin */
.de li a.aa {top:340px; left:10px;} /* Aachen Pin */
.de li a.of {top:143px; left:77px;} /* Westoverledingen Pin */
.de li a.nh {top:202px; left:387px;} /* Neuenhagen Pin */
/*.de li a.mz {top:397px; left:115px;} /* Mainz Pin */


.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 */
.de li b.hh {top:115px; left:223px; background:#FFFFCC;}  /* Hamburg label */
.de li b.we {top:281px; left:58px;}   /* Wesel label */
.de li b.du {top:305px; left:60px;}   /* Düsseldorf label */
.de li b.co {top:258px; left:427px;}  /* Cottbus label */
.de li b.ha {top:294px; left:317px;}  /* Halle label */
.de li b.ko {top:562px; left:152px;}  /* Konstanz label */
.de li b.le {top:292px; left:150px;}  /* Leinefelde label */
.de li b.hi {top:145px; left:265px;}  /* Hitzacker label */
.de li b.jo {top:106px; right:299px;}  /* Jork label */
.de li b.gi {top:200px; left:245px;}  /* Gifhorn label */
.de li b.bi {top:240px; left:145px;}  /* Bielefeld label */
.de li b.gu {top:259px; left:44px;}  /* Gütersloh label */
.de li b.al {top:345px; left:180px;}  /* Alsfeld label */
.de li b.he {top:480px; left:165px;}  /* Hemmingen label */
.de li b.dr {top:322px; left:400px;}  /* Dresden label */
.de li b.aa {top:340px; left:25px;}  /* Aachen label */
.de li b.of {top:143px; left:91px;} /* Westoverledingen label */
.de li b.nh {top:202px; left:401px;} /* Neuenhagen label */
/*.de li b.mz {top:397px; left:130px;} /* Mainz label */


/* 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:120px; box-shadow: 10px 10px 5px #888;} /* alt: width 90px */
/* 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;}