/**
 * Additional CSS stylesheet v. 1.0.
 * This file is part of the Additional images relocated with CSS contribution to Zen Cart.
 * This stylesheet works as an add-on to the main stylesheet.
 * It contains the stylesheet declarations needed to display additional images relocated below
 * the main product image.
 * The authors recommend that instead of keeping this stylesheet, you just copy-and-paste its contents
 * into your main stylesheet, comments included.
 * Authors: ckosloff & gjh42
 * July 27, 2007
 * Amended by Derek Jennings
 */


/* setup the background image of the British Isles */
.uk {padding:0; margin:0; list-style-type:none; background:#fff url(/regions/sales_map.jpg); width:302px; height:480px; margin:50px auto 200px auto; position:relative; z-index:100;}
/* move the text off screen */
.uk li a {text-indent:-999px; display:block; width:40px; height:40px; 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.north {top:228px; left:175px;  width:100px; height:95px;}
.uk li a.south {top:410px; left:235px;}
.uk li a.northeast {top:180px; left:165px;}
.uk li a.northwest {top:220px; left:68px; width:100px; height:100px; }
.uk li a.scotland {top:30px; left:28px; width:220px; height:160px;}
.uk li a.east {top:325px; left:240px; width:70px; height:100px;}
.uk li a.midlands {top:325px; left:90px; width:120px; height:70px;}
.uk li a.southwest {top:407px; left:20px; width:120px; height:80px;}
.uk li a.southern {top:387px; left:145px; width:70px; height:60px;}
.uk li a.southeast {top:387px; left:216px;  width:37px; height:58px;}
.uk li a.theddlethorpe {top:285px; left:240px;}
/* move the text back into view on hover */
.uk li a:hover {background:#600; 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 url(../images/logo_small.gif) top right no-repeat; border:1px solid #9a9a9a; width:150px; color:#600; padding:30px;font-style:normal; top:-135px; font-family:tahoma, 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:#600; 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;}