/* Navigation (hochtouren.de)
*******************************************************************************/
* {
margin: 0;
padding: 0;
}
#navi {
width: 980px;
position:fixed;
margin-left:auto;
margin-right:auto;
top: 102px; left: -63px;
}
#menu {
width: 140px;
background: none;
font-family: Arial;
font-size: 1.0em;
font-weight:bold;
line-height: 1.5;
float: left;
-moz-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
transform:rotate(-90deg);
}
#menu ul {
width: 156px;
list-style-type: none;
}
/*--definiert die Blocküberschriften--*/
#menu h3 {
height: 30px;
font-family: Arial;
font-size: 1.1em;
font-weight:bold;
line-height: 1.5;
letter-spacing:2px;
text-align: center;
color: #0000FF;
margin-bottom:-20px;
background: #F0D2BA;
border-top:#FFF4E2 2px solid; /* Farbe und Art des oberen Rands */
border-left:#B48D7E 2px solid; /* linker Rand */
border-bottom:#B48D7E 2px solid; /* unterer Rand */
border-right:#FFF4E2 2px solid; /* rechter Rand */
-webkit-border-bottom-left-radius:15px;
-moz-border-radius-bottomleft:15px;
border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
-moz-border-radius-bottomright:15px;
border-bottom-right-radius:15px;
box-shadow: -2px 2px 2px #313136;
}
/*--definiert die "Ausklapp-Links" im Normalzustand--*/
#menu a {
text-decoration: none;
display: block;
border: 1px solid #ccc;
text-align: center;
background: #F0D2BA;
color: #0000FF;
border-top:#FFF4E2 2px solid; /* Farbe und Art des oberen Rands */
border-left:#FFF4E2 2px solid; /* linker Rand */
border-bottom:#B48D7E 2px solid; /* unterer Rand */
border-right:#B48D7E 2px solid; /* rechter Rand */
-webkit-border-top-right-radius:15px;
-moz-border-radius-topright:15px;
border-top-right-radius:15px;
-webkit-border-bottom-right-radius:15px;
-moz-border-radius-bottomright:15px;
border-bottom-right-radius:15px;
box-shadow: 2px 2px 2px #313136;
-webkit-transition:0.2s all ease-in-out;
-moz-transition:0.2s all ease-in-out;
-o-transition:0.2s all ease-in-out;
-ms-transition:0.2s all ease-in-out
}
/*--definiert die "Ausklapp-Links" im Hoverzustand--*/
#menu a:hover {
color: #800000;
background: #F0D2BA;
border-bottom:#FFF4E2 2px solid;
border-right:#FFF4E2 2px solid;
border-top:#B48D7E 2px solid;
border-left:#B48D7E 2px solid;
/* Um den Effekt des Eindrückens zu verstärken wird auch der Text durch verändern des Innenabstands um 1 Pixel verrückt */
}
/*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern--
*/
#menu li {
position: relative;
}
/*--versteckt die "Ausklapp-Links", solange nicht gehovert wird--*/
#menu ul ul {
position: absolute;
top: -98px; left: -98px; z-index: 1;
display: none;
}
/*--lässt die Ausklapp-Links beim Hovern erscheinen--*/
#menu ul li:hover ul {
display: block;
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
}
/*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/
* html #menu ul li{
float: left;
width: 100%;
}
/*--nur für IE 7 erkennbar--*/
*+ html #menu ul li {
float: left;
width: 100%;
}
/*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/
*html body {
behavior: url(csshover3-source.htc);
font-size: 100%;
}
*html #menu ul li a {
height: 1%;
}
/*--definiert einen Einzellink im Normalzustand, wenn kein Ausklappen erforderlich--*/
#menu a.direkt:link {
font-size: 1em;
font-weight: bold;
text-align: center;
color: #000;
border: 1px solid #003366;
background: #ff8000;
}
/*--definiert einen Einzellink im Hoverzustand, wenn kein Ausklappen erforderlich--*/
#menu a.direkt:hover {
color: #ff9224;
background: #003366;
border: 1px solid #ccc;
}