/* 
	this dropdown.css-file is included in every site on sage.de
	it is especially used for the drop-down-menu feature to provide 
	product information of single units.
	
	by now, following units are using this for enhancing the productmenu:
	smb, sb, hw
*/

#navi-main ul li:hover div,
#navi-main ul li.over div {
	display: block;
}

/* position only */
#subMenu {
	position: absolute; 
	z-index: 999 !important;
	left: 0 !important; 
	top: 35px !important;
}

#subMenu * {
	z-index: 999 !important;
}

/* styling only */
#subMenu {
	width: 711px;
	height:194px;
	border:0 !important;
	color: #111;
	padding:10px;
	display: none;
	background: #fff;
}

/* units */
#subMenu-SMB #subMenu {
	background: transparent url('/images/smb/dropdown_background.gif') no-repeat;
	height: 219px;
}

#subMenu-SMB.active #subMenu {
	background: transparent url('/images/smb/dropdown_background_active.png') no-repeat;
	padding-left: 14px;
}

#subMenu-SB #subMenu {
	background: transparent url('/images/sb/dropdown_background.gif') no-repeat;
	height: 260px;
}

#subMenu-SB.active #subMenu {
	background: transparent url('/images/sb/dropdown_background_active.png') no-repeat;
	width: 728px;
	height: 276px;
	padding: 10px 0 0 14px;
}

#subMenu-HW #subMenu {
	background: transparent url('/images/hw/dropdown_background.gif') no-repeat;
	height: 350px;
}

#subMenu-HW.active #subMenu {
	background: transparent url('/images/hw/dropdown_background_active.png') no-repeat;
	padding-left: 14px;
}

/* everything else but the main stuff */
#subMenu ul {
	margin:0;
	padding:0;
	bottom:0;
	left:0;
	position:static;
	width:172px;
	float: left;
}

#subMenu div#product_teaser {
	float: left;
	display: block;
	width:535px;
	height:auto;
	overflow:hidden;
}

#subMenu div#product_teaser p {
	padding: 0 10px;
	display: block;
	width:auto;
	position: relative;
}
#subMenu div#product_teaser p.hidden {
	display: none;
}

#subMenu div#product_teaser p img {
	float: right;
	height: auto;
	width: auto;
	padding: 11px 0 0 20px;
	visibility: hidden;
}

#subMenu ul li {
	display: block;
	padding:0;
	border-bottom:1px solid #ccc;
	width:162;
	height:24px;
	margin:0;
	font-weight:bold;
	color:#727272;
}

#subMenu ul li.first {
	height: 19px;
}
#subMenu ul li.first a {
	padding-top:0;
}

#subMenu ul li.last {
	border: 0;
}

#subMenu ul li a {
	text-decoration: none !important;
	display: block;
	width: 162px;
	height:14px;
	padding:5px 0;
}

#subMenu ul li a:hover,
#subMenu ul li a:active,
#subMenu ul li a:focus,
#subMenu ul li a.activated {
	background: transparent url('/images/general/arrow_green.gif') no-repeat 158px 10px;
	color: #006F52;
}

#subMenu ul li.first a:hover,
#subMenu ul li.first a:active,
#subMenu ul li.first a:focus,
#subMenu ul li.first a.activated {
	background: transparent url('/images/general/arrow_green.gif') no-repeat 158px 5px;
	color: #006F52;
}

/*
 definition only for single units
*/
/* hw */
#subMenu-HW #subMenu ul li a:hover,
#subMenu-HW #subMenu ul li a:active,
#subMenu-HW #subMenu ul li a:focus,
#subMenu-HW #subMenu ul li a.activated {
	background: transparent url('/images/general/arrow_green.gif') no-repeat 240px 10px;
	color: #006F52;
}

#subMenu-HW #subMenu ul li.first a:hover,
#subMenu-HW #subMenu ul li.first a:active,
#subMenu-HW #subMenu ul li.first a:focus,
#subMenu-HW #subMenu ul li.first a.activated {
	background: transparent url('/images/general/arrow_green.gif') no-repeat 240px 5px;
	color: #006F52;
}

#subMenu-HW #subMenu ul li a {
	width: 250px;
}
#subMenu-HW #subMenu ul li {
	width: 250px;
}
#subMenu-HW #subMenu div#product_teaser {
	width:430px;
}
#subMenu-HW #subMenu ul {
	width:255px;
}

#subMenu-HW #subMenu div#product_teaser span {
	width:275px;
	display: block;
	float:left;
}
/* - */