/* ================================================================ This copyright notice must be kept untouched in the stylesheet at all times. Copyright (c) 2010 Stu Nicholls. All rights reserved. =================================================================== */ #menu {width: 100%; height:50px; text-align:left;} #menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;} #menu ul {display:inline-block;} #menu li {margin:0; padding:0; list-style:none;} #menu li {display:inline-block; display:inline;} #menu ul ul {position:absolute; left:-9999px; padding:10px 0;} #menu ul.level1 {width: 100%; margin:0 auto; padding:0 0px;} #menu ul.level1 li.level1-li {float:left; display:block; position:relative;} #menu ul.level1 { background-image: url( bilder/back_menu.png ); background-repeat: repeat-x; background-position: left top; } #menu ul.level2 {background:#141414; opacity:0; background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0))); background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); -o-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5); -icab-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5); -khtml-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5); -moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5); box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5); -o-border-radius: 8px; -icab-border-radius: 8px; -khtml-border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -webkit-transition: opacity 0.6s ease-in-out; -moz-transition: opacity 0.6s ease-in-out; -o-transition: opacity 0.6s ease-in-out; transition: opacity 0.6s ease-in-out; } #menu ul.level3 {background:#141414; opacity:0; background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0))); background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7)); -o-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5); -icab-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5); -khtml-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5); -moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5); box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5); -o-border-radius: 8px; -icab-border-radius: 8px; -khtml-border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -webkit-transition: opacity 0.6s ease-in-out; -moz-transition: opacity 0.6s ease-in-out; -o-transition: opacity 0.6s ease-in-out; transition: opacity 0.6s ease-in-out; } #menu ul.level4 {background:#4ba; opacity:0; background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0))); background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); -o-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5); -icab-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5); -khtml-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5); -moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5); box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5); -o-border-radius: 8px; -icab-border-radius: 8px; -khtml-border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -webkit-transition: opacity 0.6s ease-in-out; -moz-transition: opacity 0.6s ease-in-out; -o-transition: opacity 0.6s ease-in-out; transition: opacity 0.6s ease-in-out; } #menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/ #menu a {display:block; font:bold 12px verdana,arial,sans-serif; color:white; line-height:35px; text-decoration:none; padding:0 30px 0 10px; margin-right:-10px;} #menu ul ul a {line-height:25px;} #menu li.left ul li a {padding:0 10px 0 30px; margin-right:0; margin-left:-10px;} #menu ul.level1 li.level1-li a.level1-a {float:left;} #menu ul li.level1-li:hover {padding-bottom:10px; margin-bottom:-10px;} #menu ul li:hover > ul {visibility:visible; left:0; top:35px; opacity:1; margin-top:10px;} #menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-35px; opacity:1; margin-left:8px;} #menu li.left:hover > ul {visibility:visible; left:auto; right:-10px; top:35px; opacity:1; margin-right:10px; } #menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-35px; margin-right:10px; opacity:1; } #menu a:hover ul {left:0; top:28px;} #menu li.left a:hover ul {left:auto; right:-1px; top:28px;} #menu li.left ul a {text-align:right; padding:0 10px 0 20px;} #menu a:hover a:hover ul, #menu a:hover a:hover a:hover ul {left:100%; visibility:visible; } #menu li.left a:hover a:hover ul, #menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;} #menu a:hover ul ul, #menu a:hover a:hover ul ul {left:-9999px;} #menu li.left a:hover ul ul, #menu li.left a:hover a:hover ul ul {left:-9999px;} #menu li a.fly {background:transparent url(bilder/arrow.gif) no-repeat 92% center;} #menu li.left ul a.fly {background:transparent url(bilder/arrow-left.gif) no-repeat 10px center;} #menu li a:hover, #menu li a.fly:hover {color:red; direction:ltr;} #menu ul li:hover > a, #menu ul li:hover > a.fly {color:red;} #menu table {position:absolute; height:33px; width:0; left:0; border-collapse:collapse; margin-top:-4px;} #menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-44px;} #menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;} #menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-44px;}