/* setup the background image of the Trinidad */
.map {padding:0; margin:0; list-style-type:none; background:#508EC1 url(../images/map_T&T.jpg); background-position:center; width:322; height:290px; background-repeat: no-repeat; position:relative; z-index:100;}
/* move the text off screen */
.map li a {text-indent:-999px; display:block; width:16px; height:16px; background:#000; position:absolute; line-height:8px; background: url(../images/flag_blue.png);}
/* make the images and description invisible and an absolute position so that it does not take up any space */
.map li a em {visibility:hidden; position:absolute;}
/* Trinidad positions */
.map li a.ps {top:109px; left:195px;}
.map li a.sf {top:198px; left:205px;}
.map li a.tb {top:32px; left:343px;}
/* Jamaica position */
.map li a.ks {top:143px; left:299px;}

/* Barbados position */
.map li a.wt {top:225px; left:240px;}

/* move the text back into view on hover */
.map li a:hover {background:#9D001D; text-indent:0; height:1.2em; font-size:1em; color:#fff; line-height:1em; padding:2px 10px; width:90px; right:30px;}
/* hack for IE5.x */
* html .map 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 */
.map li a:hover em {visibility:visible; margin-left:5px; background:#fff; border:1px solid #9D001D; width:150px; color:#000; padding:15px;font-style:normal; top:-135px;right:100px; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande", arial, sans-serif; letter-spacing:1px; line-height:1.5em;z-index:101; text-align:left; font-size: 10px;}
/* hack for IE5.x */
* html .map li a:hover em {width:200px; w\idth:150px;}
/* give the image a border and margin */
.map li a:hover em img {display:block; margin-bottom:10px;}
/* style the empty span (I know it's not semantically correct) into an arrow point */
.map li a:hover em span {display:block; width:0; height:0; overflow:hidden; border:15px solid #fff; border-width:15px 15px 15px 0; border-right-color:#9D001D; position:absolute; right:0; top:128px;}
/* hack for IE5.x */
* html .map li a:hover em span {width:30px; height:30px; w\idth:0; he\ight:0;}