/* ================================================================ 
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.
=================================================================== */
.edges {background-image: url(showcasegradient.jpg);background-repeat: repeat-x;}
#map {position:relative; margin:0px 0 0 0px; width:780px; height:350px; display:block; margin-left:auto; margin-right:auto;}
#map ul {padding:0; margin:0; list-style:none; position:absolute; top:0; left:0;}
#map ul li {position:absolute; list-style-image:none; list-style-type:none;}
#map ul li#io {width:100px; height:98px; top:120px; left:10px;}
#map ul li#hmi {width:130px; height:113px; top:53px; left:112px;}
#map ul li#controllers {width:65px; height:205px; top:0px; left:316px;}
#map ul li#drives {width:56px; height:205px; top:0px; left:402px;}
#map ul li#motors {width:137px; height:98px; top:55px; left:543px;}
#map ul li#gearbox {width:140px; height:120px; top:170px; left:665px;}
#map ul li#linear {width:200px; height:93px; top:252px; left:450px;}
#map ul li#actuators {width:310px; height:91px; top:253px; left:65px;}

/* remove the absolute position from the list items for lte IE6 */
* html #map ul li {position:static;}
/* and give the absolute position to the links for lte IE6 */
* html #map ul li a.tl {position:absolute;}
* html #map ul li#io a.tl {top:120px; left:10px;}
* html #map ul li#hmi a.tl {top:53px; left:112px;}
* html #map ul li#controllers a.tl {top:0px; left:316px;}
* html #map ul li#drives a.tl {top:0px; left:402px;}
* html #map ul li#motors a.tl {top:55px; left:543px;}
* html #map ul li#gearbox a.tl {top:170px; left:665px;}
* html #map ul li#linear a.tl {top:252px; left:450px;}
* html #map ul li#actuators a.tl {top:253px; left:65px;}

#map ul li a {text-decoration:none;}
#map ul li a.tl {display:block; text-indent:-9999px; background: url(transparent.gif);}
#map ul li a.tl:hover, #map ul li:hover {z-index:500;}

#map ul li#io a.tl {width:100px; height:98px;}
#map ul li#hmi a.tl {width:130px; height:113px;}
#map ul li#controllers a.tl {width:65px; height:205px;}
#map ul li#drives a.tl {width:56px; height:205px;}
#map ul li#motors a.tl {width:137px; height:98px;}
#map ul li#gearbox a.tl {width:140px; height:120px;}
#map ul li#actuators a.tl {width:310px; height:91px;}
#map ul li#linear a.tl {width:200px; height:93px;}

#map ul li .xsnazzy, #map ul li a .xsnazzy {visibility:hidden;}

/* For IE6 to work */
* html #map ul li a.tl:hover {border:0;}
* html #map ul li a:hover .xsnazzy {visibility:visible;}

#map ul li:hover .xsnazzy {visibility:visible;}

/* For IE7 to keep the :hover over .xsnazzy - goodness knows why? */
#map ul li:hover .xsnazzy {background:url(transparent.gif);}

.xsnazzy {display:block; position:absolute; height:auto; text-align:left; width:200px;}

#io .xsnazzy {left:20px; top:40px; }
#hmi .xsnazzy {left:20px; top:20px;}
#controllers .xsnazzy {left:-80px; top:85px;}
#drives .xsnazzy {left:-50px; top:85px;}
#motors .xsnazzy {left:-100px; top:35px;}
#gearbox .xsnazzy {left:-90px; top:10px;}
#actuators .xsnazzy {left:76px; top:20px;}
#linear .xsnazzy {left:0px; top:20px;}

.xsnazzy h1, .xsnazzy p {margin:0 10px;}
.xsnazzy h1 {font-size:16px; color:#000; font-family:tahoma, arial, helvetica, sans-serif; border-bottom:1px solid #000;}
.xsnazzy p {padding-bottom:0.5em; color:#000; font-size:12px; font-family:tahoma, arial, helvetica, sans-serif; text-align:left;}
.xsnazzy {background: transparent; margin:1em; 
  -moz-opacity:0.93; -khtml-opacity: 0.93; opacity: 0.93;}

/* 7 lines form the rounded top and bottom of the xsnazzy window */
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7 {display:block; font-size:0; overflow:hidden;}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6 {height:1px;}
.xb4, .xb5, .xb6, .xb7 {background:#ccc; border-left:1px solid #FEEDB9; border-right:1px solid #FEEDB9;}
.xb1 {margin:0 8px; background:#FEEDB9;}
.xb2 {margin:0 6px; background:#FEEDB9;}
.xb3 {margin:0 4px; background:#FEEDB9;}
.xb4 {margin:0 3px; background:#5EC7FE; border-width:0 5px;}
.xb5 {margin:0 2px; background:#5EC7FE; border-width:0 4px;}
.xb6 {margin:0 2px; background:#5EC7FE; border-width:0 3px;} 
.xb7 {margin:0 1px; background:#5EC7FE; border-width:0 3px; height:2px;} 

.xboxcontent {display:block; background:#5EC7FE; border:3px solid #FEEDB9; border-width:0 3px;}
.xboxcontent a, .xboxcontent a:visited {display:block; color:#00f; font-weight:bold; font-size:12px; font-family:tahoma, arial, helvetica, sans-serif; text-indent:7px; padding:4px;}

#map ul li a:hover .xsnazzy .xboxcontent a:hover {color:#FEEDB9;}
#map ul li:hover .xsnazzy .xboxcontent a:hover {color:#FEEDB9;}