﻿/* -------------------------------------------------------------------- */
/* DATEINAME: menue.css  			  */
/* -------------------------------------------------------------------- */
/* Cascade Style Sheet fuer die Webseiten vom	  */
/* Werner Nussbaum			  */
/* -------------------------------------------------------------------- */
/* (c) 2012 Dietmar Heck			  */
/* -------------------------------------------------------------------- */
/*
ohne    = HTML-Tag
.       = class
#       = id
*/
/* -------------------------------------------------------------------- */

@charset "ISO-8859-1"; 

/* Vorlage für eine senkrechte Menue-Darstellung */

/* ================================================================ 
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/menus/ipad-flyout-slide.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

#menuHolder {width:130px; position:relative; z-index:100; margin-left:10px; text-align:left;}
ul.menu {padding:0; margin:0; list-style:none; width:135px; font-family:verdana, sans-serif; 
         font-size:11px; height:35px;}
ul.menu li {float:left;}
ul.menu li a {text-decoration:none; color:#fff; text-decoration:none; font-size:11px; font-weight:bold;}

ul.menu li a.aTop {display:block; padding:0 0 0 10px; line-height:35px; height:35px; 
                   float:left; width:145px; background:#800;
transition-delay: 0.25s;
-o-transition-delay: 0.25s;
-moz-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
}
ul.menu li a.aFirst {
-webkit-border-radius:8px 8px 0 0;
-moz-border-radius:8px 8px 0 0;
-ms-border-radius:8px 8px 0 0;
border-radius:8px 8px 0 0;
}
ul.menu li a.aLast {
-webkit-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
-ms-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
}

ul.menu li div.drop {position:absolute; z-index:-1; left:10px; top:0; 
                     background:#fff url(divider.gif) left top; border:5px solid #800; 
                     border-width:5px 5px 5px 0; width:110px; height:305px; overflow:hidden;

-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;

-webkit-border-radius:0 8px 8px 0;
-moz-border-radius:0 8px 8px 0;
border-radius:0 8px 8px 0;
}

ul.menu li div.drop dl {float:left; width:250px; padding:0 10px 10px 10px; margin:-270px 0 0 0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;

}
ul.menu li div.drop dl dt {font-weight:bold; padding:10px 0 3px 0; color:#800; line-height:12px;}
ul.menu li div.drop dl dd {padding:0; margin:0;}
ul.menu li div.drop dl dd a {display:block; color:#c60; font-weight:normal; line-height:12px; padding:3px 0;}
ul.menu li div.drop dl dd a:hover {color:#800; text-decoration:underline;}

ul.menu li div.bottomLine {position:absolute; bottom:-1px; left:0; 
                           width:825px; background:#800; text-align:left;}
ul.menu li div.bottomLine p {padding:0 10px; margin:0; line-height:18px; color:#fc6; text-decoration:none;}
ul.menu li div.bottomLine p a:hover {text-decoration:underline;}

ul.menu li a.aTop:hover {color:#fc6;}
ul.menu li.sub:hover > a.aTop {color:#fc6;}

ul.menu li:hover div.col1 {left:150px; width:275px;
-webkit-transition: all 0.33s ease-in-out;
-moz-transition: all 0.33s ease-in-out;
-ms-transition: all 0.33s ease-in-out;
-o-transition: all 0.33s ease-in-out;
transition: all 0.33s ease-in-out;

transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}

ul.menu li:hover div.col2 {left:150px; width:550px;
-webkit-transition: all 0.66s ease-in-out;
-moz-transition: all 0.66s ease-in-out;
-ms-transition: all 0.66s ease-in-out;
-o-transition: all 0.66s ease-in-out;
transition: all 0.66s ease-in-out;

transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}

ul.menu li:hover div.col3 {left:150px; width:825px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;

transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}

ul.menu li:hover div.col1 dl {margin-top:0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;

transition-delay: 0.33s;
-o-transition-delay: 0.33s;
-moz-transition-delay: 0.33s;
-ms-transition-delay: 0.33s;
-webkit-transition-delay: 0.33s;

}
ul.menu li:hover div.col2 dl {margin-top:0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;

transition-delay: 0.66s;
-o-transition-delay: 0.66s;
-moz-transition-delay: 0.66s;
-ms-transition-delay: 0.66s;
-webkit-transition-delay: 0.66s;

}
ul.menu li:hover div.col3 dl {margin-top:0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;

transition-delay: 1s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;

}

ul.menu li.close {position:absolute; left:0; top:0; opacity:0; z-index:-1;

transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;

transition-delay: 1.5s;
-o-transition-delay: 1.5s;
-moz-transition-delay: 1.5s;
-ms-transition-delay: 1.5s;
-webkit-transition-delay: 1.5s;

}

.clear {clear:both;}

/* for IE6 */
ul.menu table {border-collapse:collapse; width:0; margin:0 0 -1px 0; 
               position:absolute; left:0; top:0; z-index:-1;}
ul.menu li.sub a.aTop:hover {direction:ltr;}
ul.menu li.sub a.aTop:hover div.drop {left:150px;}
ul.menu li.sub a.aTop:hover div.col1 {width:275px;}
ul.menu li.sub a.aTop:hover div.col2 {width:550px;}
ul.menu li.sub a.aTop:hover div.col3 {width:825px;}
ul.menu li.sub a.aTop:hover dl {margin-top:0;}

ul.menu li.sub a.aTop:hover div.bottomLine p {font-weight:normal;}
