/* $Id: cssplay_prodrop_8.css 233 2008-08-04 10:05:02Z espaan $ */
/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/pro_drop8.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.
=================================================================== */
/* Adapted for Zikula menutree, Erik Spaan, http://code.zikula.org/blanktheme */

/* Set margins of surrounding div to zero */
#nav_cssplaypro ul {margin: 0;}

#nav_cssplaypro {
  position:relative;
  width:100%;
  z-index:100;
  background: transparent;
  display: block;
  float: none;
  overflow: visible;
}

/* hack to correct IE5.5 faulty box model */
* html #nav_cssplaypro {
  width:98%;
  w\idth:100%;
}

.cssplay_prodrop li {
  display:block;
  float:left;
  margin: 0;
  position: relative;
}

/* Preload the "on" images */
.cssplay_preload1 {background: url(../pnimages/cssplay_prodrop8/cssplay_prodrop8_lon.gif);}
.cssplay_preload2 {background: url(../pnimages/cssplay_prodrop8/cssplay_prodrop8_ron.gif);}

/* The menu styling */
.cssplay_prodrop {
  padding: 0 0 0 12px;
  margin: 0;
  border: 0;
  list-style: none;
  height: 36px;
  background: transparent url(../pnimages/cssplay_prodrop8/cssplay_prodrop8_bg.gif);
  position: relative;
  font-family: arial, verdana, sans-serif;
  z-index:200;
}

/* Default top link link styling, current tab li.select, float left to place inline */
.cssplay_prodrop li.top {
  display: block;
  float: left;
  margin: 0 3px;
}
.cssplay_prodrop li a.top_link {
  display: block;
  float: left;
  height: 36px;
  line-height: 27px;
  color: #666;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  padding: 0 0 0 10px;
  cursor: pointer;
  background: url(../pnimages/cssplay_prodrop8/cssplay_prodrop8_loff.gif) no-repeat;
}
.cssplay_prodrop li a.top_link span {
  float: left;
  display: block;
  padding: 0 20px 0 10px;
  height: 36px;
  background: url(../pnimages/cssplay_prodrop8/cssplay_prodrop8_roff.gif) right top;
}
.cssplay_prodrop li a.top_link:hover,
.cssplay_prodrop li.selected a.top_link {
  color: #000;
  background: url(../pnimages/cssplay_prodrop8/cssplay_prodrop8_lon.gif) no-repeat;
  line-height: 25px;
}
.cssplay_prodrop li a.top_link:hover span, 
.cssplay_prodrop li.selected a.top_link span {
  background: url(../pnimages/cssplay_prodrop8/cssplay_prodrop8_ron.gif) no-repeat right top;
}
.cssplay_prodrop li:hover > a.top_link,
.cssplay_prodrop li.selected > a.top_link {
  color: #000;
  background: transparent url(../pnimages/cssplay_prodrop8/cssplay_prodrop8_lon.gif) no-repeat;
  line-height: 25px;
}
.cssplay_prodrop li:hover > a.top_link span,
.cssplay_prodrop li.selected > a.top_link span {
  background: transparent url(../pnimages/cssplay_prodrop8/cssplay_prodrop8_ron.gif) no-repeat right top;
}

/* Style and position the table so it takes no part in the menu function. */
.cssplay_prodrop table {
  border-collapse: collapse;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
}
/* The iframe shim, width and height should reflect the dropmenu. */
.cssplay_prodrop :hover iframe {
  left: 0;
  top: 35px;
  width: 180px;
  height: 120px;
}

/* Style the list OR link hover. Depends on which browser is used */
.cssplay_prodrop a:hover {
  visibility: visible;
  position: relative;
  z-index:300;
} /* for IE6 */
.cssplay_prodrop li:hover {
  position: relative;
  z-index:300;
} /* for IE7 */

/* keep the 'next' level invisible by placing it off screen. */
.cssplay_prodrop ul,
.cssplay_prodrop :hover ul ul, 
.cssplay_prodrop :hover ul :hover ul ul,
.cssplay_prodrop :hover ul :hover ul :hover ul ul,
.cssplay_prodrop :hover ul :hover ul :hover ul :hover ul ul,
.cssplay_prodrop iframe {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* set up the first drop down sub level, change the width of the submenus below */
.cssplay_prodrop ul.drop {
  width: 180px;
  margin: 0;
}
.cssplay_prodrop :hover ul {
  left: 0;
  top: 35px;
  background: #b9d3fb;
  margin: 0;
  padding: 4px 3px;
  border: 1px solid #3a93d2;
  border-width: 0 1px 1px;
  white-space: nowrap;
  height: auto;
  z-index:400;
}
.cssplay_prodrop :hover ul li {
  display: block;
  height: 20px;
  position: relative;
  font-weight: normal;
  width: 100%;
}
.cssplay_prodrop :hover ul li a {
  display: block;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  /*width: auto;*/
  padding: 0px 4px;
  color: #000;
  text-decoration: none;
}
.cssplay_prodrop :hover ul li a:hover {
  background: #3a93d2;
  color: #fff;
}
.cssplay_prodrop :hover ul li a.fly {
  background: url(../pnimages/cssplay_prodrop8/cssplay_prodrop8_arrow_off.gif) 170px 7px no-repeat;
}
.cssplay_prodrop :hover ul li a.fly:hover {
  background: #3a93d2 url(../pnimages/cssplay_prodrop8/cssplay_prodrop8_arrow_on.gif) 170px 7px no-repeat;
  color: #fff;
}
.cssplay_prodrop :hover ul li:hover > a.fly {
  background: #3a93d2 url(../pnimages/cssplay_prodrop8/cssplay_prodrop8_arrow_on.gif) 170px 7px no-repeat;
  color:#fff;
} 

/* set up the flyout levels when hovering */
.cssplay_prodrop :hover ul :hover ul,
.cssplay_prodrop :hover ul :hover ul :hover ul,
.cssplay_prodrop :hover ul :hover ul :hover ul :hover ul,
.cssplay_prodrop :hover ul :hover ul :hover ul :hover ul :hover ul {
  left: 179px;
  top: -1px;
  background: #b9d3fb;
  margin: 0;
  padding: 3px;
  border: 1px solid #3a93d2;
  white-space: nowrap;
  width: 180px;
  height: auto;
  z-index:500;
}