/* setup the background image of the British Isles */
.uk {padding:0; margin:0; list-style-type:none; background:#fff url(images/brit.gif) no-repeat; width:300px; height:350px; margin:50px auto 200px auto; position:relative; z-index:100;}
/* move the text off screen */
.uk li a {text-indent:-999px; display:block; width:8px; height:8px; background:#FF9900; position:absolute; line-height:8px;}
/* make the images and description invisible and an absolute position so that it does not take up any space */
.uk li a em {visibility:hidden; position:absolute;}
/* position the square markers */
.uk li a.bristol {top:288px; left:190px;}
.uk li a.ln {top:280px; left:243px;}
.uk li a.gl {top:130px; left:148px;}
.uk li a.bf {top:172px; left:112px;}
.uk li a.du {top:220px; left:105px;}
.uk li a.richmond {top:263px; left:222px;}
.uk li a.renfrew {top:129px; left:139px;}
.uk li a.cornwall {top:332px; left:127px;}
.uk li a.aberdeen2 {top:79px; left:198px;}
.uk li a.aberdeen1 {top:79px; left:189px;}
.uk li a.edinburgh1 {top:130px; left:170px;}
.uk li a.edinburgh2 {top:139px; left:170px;}
.uk li a.essex {top:272px; left:260px;}
.uk li a.musselburgh {top:130px; left:180px;}
.uk li a.doncaster {top:213px; left:218px;}
.uk li a.loanhead {top:139px; left:170px;}
.uk li a.carluke {top:139px; left:158px;}
.uk li a.lowestoft {top:246px; left:282px;}
.uk li a.nottingham {top:235px; left:210px;}
.uk li a.stgiles {top:279px; left:231px;}
.uk li a.alton {top:272px; left:222px;}
.uk li a.reading {top:281px; left:222px;}
.uk li a.orkney {top:9px; left:181px;}
.uk li a.isleofman {top:188px; left:147px;}
.uk li a.bridgend {top:291px; left:167px;}
.uk li a.penrhyndeudraeth {top:236px; left:157px;}
.uk li a.dundee {top:109px; left:177px;}
.uk li a.chesham {top:270px; left:231px;}
.uk li a.swansea {top:282px; left:162px;}
.uk li a.liverpool1 {top:215px; left:189px;}
.uk li a.liverpool2 {top:215px; left:180px;}
.uk li a.felixstowe {top:265px; left:276px;}
.uk li a.grimsby {top:212px; left:239px;}
.uk li a.birmingham {top:250px; left:199px;}
.uk li a.shefford {top:260px; left:235px;}
.uk li a.dunfermline {top:121px; left:168px;}
.uk li a.isleofwight {top:319px; left:220px;}


/* move the text back into view on hover */
.uk li a:hover {background:#FF9900; text-indent:0; height:1.2em; font-size:1em; color:#fff; line-height:1em; padding:2px 10px; width:90px;}
/* hack for IE5.x */
* html .uk 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 */
.uk li a:hover em {visibility:visible; margin-left:5px; background:#fff; border:1px solid #FF9900; width:150px; color:#000; padding:25px;font-style:normal; top:-135px; font-family:verdana, geneva, "lucida sans unicode", "lucida grande", arial, sans-serif; letter-spacing:1px; line-height:1.5em;}
/* hack for IE5.x */
* html .uk li a:hover em {width:200px; w\idth:150px;}
/* give the image a border and margin */
.uk 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 */
.uk 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:#FF9900; position:absolute; left:0; top:128px;}
/* hack for IE5.x */
* html .uk li a:hover em span {width:30px; height:30px; w\idth:0; he\ight:0;}