/* setup the background image */
.vgl {padding:0; margin:0; list-style-type:none; background:#fff url(../images/vg_map.jpg); width:754px; height:526px; margin:0; position:relative; z-index:100;}
/* move the text off screen */
.vgl li a {text-indent:-2000px; display:block; width:10px; height:10px;  position:absolute; line-height:8px; border: 1px solid #ffffff; text-align: center;}
/* make the images and description invisible and an absolute position so that it does not take up any space */
.vgl li a em {visibility:hidden; position:absolute;}
/* position the square markers */
.vgl li a.scs {top:160px; left:140px;background:#5e6d2f;}
.vgl li a.ag {top:115px; left:247px;background:#5e6d2f;}
.vgl li a.wg {top:79px; left:334px;background:#5e6d2f;}
.vgl li a.pk {top:190px; left:303px;background:#5e6d2f;}
.vgl li a.bwk {top:138px; left:404px;background:#5e6d2f;}
.vgl li a.dg {top:168px; left:397px;background:#5e6d2f;}
.vgl li a.pv {top:215px; left:397px;background:#5e6d2f;}
.vgl li a.ht {top:43px; left:452px;background:#5e6d2f;}
.vgl li a.el {top:377px; left:677px;background:#5e6d2f;}
.vgl li a.wng {top:385px; left:626px;background:#5e6d2f;}
.vgl li a.gz {top:328px; left:652px;background:#5e6d2f;}
.vgl li a.vp {top:154px; left:563px;background:#5e6d2f;}
.vgl li a.pc1 {top:137px; left:523px;background:#5e6d2f;}
.vgl li a.pc2 {top:156px; left:464px;background:#5e6d2f;}
.vgl li a.pc3 {top:192px; left:515px;background:#5e6d2f;}
.vgl li a.rr {top:208px; left:497px;background:#5e6d2f;}
.vgl li a.klpp {top:193px; left:450px;background:#5e6d2f;}
.vgl li a.jf {top:171px; left:444px;background:#006600;}
.vgl li a.cp {top:228px; left:577px;background:#003399;}
.vgl li a.ut {top:319px; left:591px;background:#ff9900;}
.vgl li a.tr {top:300px; left:665px;background:#0099ff;}
.vgl li a.dgw {top:268px; left:687px;background:#cccc33;}



/* move the text back into view on hover */
.vgl li a:hover {background:#5e6d2f; text-indent:0; height:20px; font-size:.9em; color:#fff; line-height:1em; padding:5px 12px; width:150px;}
.vgl li a.jf:hover {background:#006600; text-indent:0; height:20px; font-size:.9em; color:#fff; line-height:1em; padding:5px 12px; width:150px;}
.vgl li a.cp:hover {background:#003399; text-indent:0; height:20px; font-size:.9em; color:#fff; line-height:1em; padding:5px 12px; width:150px;}
.vgl li a.ut:hover {background:#ff9900; text-indent:0; height:20px; font-size:.9em; color:#fff; line-height:1em; padding:5px 12px; width:150px;}
.vgl li a.tr:hover {background:#0099ff; text-indent:0; height:20px; font-size:.9em; color:#fff; line-height:1em; padding:5px 12px; width:150px;}
.vgl li a.dgw:hover {background:#cccc33; text-indent:0; height:20px; font-size:.9em; color:#fff; line-height:1em; padding:5px 12px; width:150px;}

/* hack for IE5.x */
* html .vgl li a:hover {width:110px; height:20px; w\idth:90px; he\ight:1.2em;}
/* make the descriptive text visible, give it a size and position */
.vgl li a:hover em {visibility:visible; margin-left:5px; background:#fff; width:152px; color:#5e6d2f; padding:12px;font-style:normal; top:28px; left: -6px; font-family:"Times New Roman"; text-align: left;}
/* hack for IE5.x */
* html .vgl li a:hover em {width:200px; w\idth:150px;}
/* give the image a border and margin */
.vgl li a:hover em img {border:1px solid #5e6d2f; display:block; margin-bottom:10px;}
/* style the empty span (I know it's not semantically correct) into an arrow point */