/* STYLES FOR YELAPA LOCATIONS IMAGEMAP */ /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menu/solar_map.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ #yelapamap {position:relative; margin:0; width:800px; height:600px; top:0; left: 0; background: transparent url(http://www.singingphoenix.com/wedding/images/map/yelapa-gallery3.jpg) top left no-repeat; outline:0; border: 3px solid #333;} /* non-hover hotspot placement - must correspond to hover hotspot placement below */ /* general */ #yelapamap ul {padding:0; margin:0; list-style:none; /*position:absolute;*/ top:0; left:0; } #yelapamap ul li {position:absolute; border: 1px dotted #fff;} /*specific */ #yelapamap ul li#title {width:400px; height:3em; top:5px; left:15px; background: transparent; border:0;} /* special style for title at top of image -- no border or popup */ #yelapamap ul li#puente {left:440px; top:80px; width:60px; height:15px; background:url(http://www.singingphoenix.com/wedding/images/map/bridge65x20-trans.png) no-repeat center;} #yelapamap ul li#upper_village {left:485px; top:200px; width:70px; height:140px; background:url(http://www.singingphoenix.com/wedding/images/map/upriversouth60x100-trans.png) no-repeat center;} #yelapamap ul li#wade {left:615px; top:430px; width:25px; height:30px; background:url(http://www.singingphoenix.com/wedding/images/map/question52x52-trans.png) no-repeat center;} #yelapamap ul li#pueblo {left:650px; top:420px; width:100px; height:30px; background:url(http://www.singingphoenix.com/wedding/images/map/pueblo90x40-trans.png) no-repeat center;} #yelapamap ul li#point {left:680px; top:515px; width:95px; height:65px; background:url(http://www.singingphoenix.com/wedding/images/map/point130x40-trans.png) no-repeat center;} #yelapamap ul li#playa {left: 115px; top:395px; width:280px; height: 40px; background:url(http://www.singingphoenix.com/wedding/images/map/playa65x20-trans.png) no-repeat 55% 75%;} #yelapamap ul li#upriver {left:195px; top:190px; width:150px; height:165px; background:url(http://www.singingphoenix.com/wedding/images/map/upriver130x40-trans.png) no-repeat center;} #yelapamap ul li#compass {left:15px; top:550px; width:400px; height:3em; background: transparent; border:0; color:#fff;} /* special style for arrow pointing north to P.V. */ /* remove the absolute position from the list items for lte IE6 */ * html #yelapamap ul li {position:static;} /* and give the absolute position to the links for lte IE6 */ /* general */ * html #yelapamap ul li a.tl {position:absolute;} /* specific */ * html #yelapamap ul li#puente a.tl {left:440px; top:80px;} * html #yelapamap ul li#upper_village a.tl {left:485px; top:200px;} * html #yelapamap ul li#wade a.tl {left:615px; top:430px;} * html #yelapamap ul li#pueblo a.tl {left:650px; top:420px;} * html #yelapamap ul li#point a.tl {left:680px; top:515px;} * html #yelapamap ul li#playa a.tl {left:115px; top:395px;} * html #yelapamap ul li#upriver a.tl {left:195px; top:190px;} /* non-hover hotspot appearance */ #yelapamap ul li a {text-decoration:none; } #yelapamap ul li a.tl {display:block; text-indent:-9999px; background: transparent; outline:0; } /* hover hotspot appearance and priority - general */ #yelapamap ul li a.tl:hover {z-index:500; border:0;} #yelapamap ul li:hover {z-index:490; border:0;} /* hover hotspot backgrounds - specific (should correspond to non-hover hotspot placement above) */ #yelapamap ul li#title a.tl:hover, #yelapamap ul li#title:hover {background: transparent; color: #033;} /* special case: title superimposed at top of photo - no popup box */ #yelapamap ul li#puente a.tl {width:60px; height:15px;} #yelapamap ul li#puente a.tl:hover {background:transparent;} #yelapamap ul li#puente:hover {background:transparent url(http://www.singingphoenix.com/wedding/images/map/25black-trans.png);} #yelapamap ul li#upper_village a.tl {width:70px; height:140px;} #yelapamap ul li#upper_village a.tl:hover {background:transparent;} #yelapamap ul li#upper_village:hover {background:transparent url(http://www.singingphoenix.com/wedding/images/map/25black-trans.png);} #yelapamap ul li#wade a.tl {width:25px; height:30px;} #yelapamap ul li#wade a.tl:hover {background:transparent;} #yelapamap ul li#wade:hover {background:transparent url(http://www.singingphoenix.com/wedding/images/map/25black-trans.png);} #yelapamap ul li#pueblo a.tl {width:100px; height:30px;} #yelapamap ul li#pueblo a.tl:hover {background:transparent;} #yelapamap ul li#pueblo:hover {background:transparent url(http://www.singingphoenix.com/wedding/images/map/25black-trans.png);} #yelapamap ul li#point a.tl {width:95px; height:65px;} #yelapamap ul li#point a.tl:hover {background:transparent;} #yelapamap ul li#point:hover {background:transparent url(http://www.singingphoenix.com/wedding/images/map/25black-trans.png);} #yelapamap ul li#playa a.tl {width:280px; height:40px;} #yelapamap ul li#playa a.tl:hover {background:transparent;} #yelapamap ul li#playa:hover {background:transparent url(http://www.singingphoenix.com/wedding/images/map/25black-trans.png);} #yelapamap ul li#upriver a.tl {width:150px; height:165px;} #yelapamap ul li#upriver a.tl:hover {background:transparent;} #yelapamap ul li#upriver:hover {background:transparent url(http://www.singingphoenix.com/wedding/images/map/25black-trans.png);} /* hide popup text boxes when not hovering; show when hovering */ #yelapamap ul li .xsnazzy, #yelapamap ul li a .xsnazzy {visibility:hidden;} /* For IE6 to work */ * html #yelapamap ul li a.tl:hover {border:0;} * html #yelapamap ul li a:hover .xsnazzy {visibility:visible;} #yelapamap ul li:hover .xsnazzy, #yelapamap ul li.over .xsnazzy {visibility:visible;} /* explorerbugfix javascript goes anywhere with non-anchor hovers */ /* For IE7 to keep the :hover over .xsnazzy - goodness knows why? */ #yelapamap ul li:hover .xsnazzy, #yelapamap ul li.over .xsnazzy /*explorerbugfix javascript class */ {background: transparent;} /* popup text box placement - general */ .xsnazzy {display:block; position:absolute; height:auto; text-align:center; font-size: 80%;} /* popup text box placement - specific (rel to top/left corner of hover box) */ #puente .xsnazzy {left:55px; top:-60px; width:260px;} #upper_village .xsnazzy {left:65px; top:-20px; width:210px;} #wade .xsnazzy {left:-306px; top:-58px; width:300px;} #pueblo .xsnazzy {left:-20px; top:-235px; width:115px;} #point .xsnazzy {left: -425px; top: -40px; width: 430px;} #playa .xsnazzy { left: -5px; top: 45px; width: 280px;} #upriver .xsnazzy {left:-183px; top:-50px; width:175px;} /* popup text box headers */ .xsnazzy h1, .xsnazzy h3, .xsnazzy p {margin:0 0.5em; padding: 0.025em 0;} .xsnazzy h1, .xsnazzy h3 {color:#033; border-bottom:1px solid #fff;} .xsnazzy p {padding-bottom:0.5em; color:#033; font-size:12px; text-align:left;} .xsnazzy {background: transparent; margin:0.5em;} /* box bottom rounded edges = successively shorter border lines */ /* placement */ .xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7 {display:block; font-size:0; overflow:hidden;} /* outer styles */ .xb1, .xb2, .xb3, .xb4, .xb5, .xb6 {height:1px;} /* inner styles */ .xb4, .xb5, .xb6, .xb7 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #fff;} /* specific colors and sizes */ .xb1 {margin:0 8px; background:#fff;} .xb2 {margin:0 6px; background:#fff;} .xb3 {margin:0 4px; background:#fff;} .xb4 {margin:0 3px; background:#7f7f9c; border-width:0 5px;} .xb5 {margin:0 2px; background:#7f7f9c; border-width:0 4px;} .xb6 {margin:0 2px; background:#7f7f9c; border-width:0 3px;} .xb7 {margin:0 1px; background:#7f7f9c; border-width:0 3px; height:2px;} /* popup text box center content and link colors */ .xboxcontent {display:block; background: url(http://www.singingphoenix.com/wedding/images/map/50white-trans.png) repeat; border:3px solid #fff; font-size: 12px;} .xboxcontent a, .xboxcontent a:visited {display:block; color:#603; font-weight:bold; font-size:11px; text-indent:0; padding:0.25em;} #yelapamap ul li a:hover .xsnazzy .xboxcontent a:hover {color:#063;} #yelapamap ul li:hover .xsnazzy .xboxcontent a:hover {color:#063;} /* pointer positions in relation to popup box */ .xsnazzy em.point_top {display:block; font-size:0; width:25px; height:14px; background:url(http://www.singingphoenix.com/wedding/images/map/50whitepointer-trans.png) center top; position:absolute; left:50%; top:-11px;} .xsnazzy em.point_bottom {display:block; font-size:0; width:25px; height:14px; background:url(http://www.singingphoenix.com/wedding/images/map/50whitepointer-trans.png) center bottom; position:absolute; right:50%; bottom:-11px;} .xsnazzy em.arrowsouth {display:block; font-size:0; width:50px; height:50px; background:url(http://www.singingphoenix.com/wedding/images/map/50arrow50x50south-trans.png) no-repeat bottom center; position:absolute; right:25%; bottom:-45px;} .xsnazzy em.arrowse {display:block; font-size:0; width:60px; height:60px; background:url(http://www.singingphoenix.com/wedding/images/map/50whitearrow-se-trans.png) no-repeat center left; position:absolute; right:-45px; top:40%;} /* for IE5.5 */ * html .xsnazzy em.point_bottom {bottom:-12px; bo\ttom:-11px;} .xsnazzy em.point_left {display:block; font-size:0; width:14px; height:25px; background:url(http://www.singingphoenix.com/wedding/images/map/50whitepointer-trans.png) left center; position:absolute; left:-11px; top:50%;} .xsnazzy em.point_right {display:block; font-size:0; width:14px; height:25px; background:url(http://www.singingphoenix.com/wedding/images/map/50whitepointer-trans.png) right center; position:absolute; right:-11px; top:50%;} /* for IE5.5 */ * html .xsnazzy em.point_right {right:-12px; ri\ght:-11px;}