/* ================================================================ 
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/menu/lightbox3.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#bilder{margin-left:auto;margin-right:auto;width:626px;padding-left:12px;padding-right:12px;text-align:left;border:0px solid #666;}
*html #bilder{width:555px;padding-left:20px;padding-right:35px;text-align:justify;border:0px solid #666;}
/* common styling */
/* Stellt die allgemeine Breite des Menüs div und der Ränder mit einer relativen Position ein*/
.menu2{font-family:verdana,arial,sans-serif;width:602px;height:400px;background:#fff  url(../showRoom/back.jpg);position:relative;z-index:1;border:1px solid #DCE0E1;}
.menu2 dl{font-family:verdana, arial, sans-serif;font-size:1.15em;position:absolute;width:350px;top:55px;left:120px;color:#6388A3;}
.menu2 dl dt{font-size:1.2em;margin-bottom:1.2em;font-weight:bold;}
.menu2 dl dd { padding:0; margin:0; line-height:1.3em; margin-bottom:1.1em;}
.menu2 dl dd:first-letter {font-weight:bold;}
/* Entferne die Bullets und setze das "margin" und das "padding" für die ungeordnete Liste auf Null zu stehen */
.menu2 ul{padding:0;margin:0;list-style-type:none;border:0;}
/* Fluktuiere die Liste, so dass die Items in einer Linie sind */
.menu2 ul li {float:left;}
/* style the links to be 233px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu2 ul li a, .menu2 ul li a:visited {
display:block; 
float:left;
text-align:center; 
text-decoration:none; 
width: 200px; 
height:31px; 
color:#fff; 
border-right:1px solid #DCE0E1;
background: #FBAE1A; 
line-height:30px; 
font-size:11px;
}
.menu2 ul li a.last, .menu2 ul li a.last:visited{border-width:0;}

/* make the dropdown ul invisible */
.menu2 ul li ul{display:none;}
/* clear the link floats at the end of each line so that IE gets it right */
span.clr{display:block;clear:both;width:0;height:0;font-size:0;line-height:1px;}

/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu2 ul li:hover a{color:#6388A3;background:#FDD680;}
/* make the sub menu ul visible and position it beneath the first list item */
.menu2 ul li:hover ul{text-align:left;display:block;position:absolute;top:31px;left:0;}
/* make the sub menu ul li the full width with padding and border. */
.menu2 ul li:hover ul li {
width:362px;
height:189px;
border:20px solid #FDD680;
background:#fff url(../showRoom/click.gif) top center no-repeat; 
color:#000;
position:relative;
padding-top:25px;
padding-left:  100px;
padding-right: 100px;
padding-bottom: 115px;
cursor:pointer;
}

/* style the initial image size 100px x 75px no border and 5pixel padding thumbnailEinstellung*/
.menu2 ul li:hover ul li a img{width:75px;height:55px;border:0;margin:5px;}
/* style the size, background color, border and margin of the submenu links rahmen und größe der Übersicht*/
.menu2 ul li:hover ul li a {float:left;width:85px;height:65px;background:#eee;border:1px solid #6388A3;margin:1px;}
/* style position of the links on hover */
.menu2 ul li:hover ul li a:hover {position:relative;}
/* keep the large image hidden with a position absolute to take it out of the page flow */
.menu2 ul li:hover ul li a img.bigger {visibility:hidden; position:absolute; z-index:0;}

/* style the 2x size image on hover with an absolute position to place it centrally over the original image hover Bild in der uebersicht*/
.menu2 ul li:hover li a:hover img{width:95px;height:70px;position:absolute;left:-20px;top:-15px;border:0;border:1px solid #DCE0E1;padding:5px;background:#ccc;}
/* give the link focus/active state a relative position and remove the focus/active border so that it doesn't spoil the large image */
/* active img for Opera (and Safari thanks to Anonymous Coward) and focus for Firefox */
.menu2 ul li:hover ul li a:active, .menu2 ul li:hover ul li a:focus {background:#F0EEEC; position:relative;outline:none;}

/* make the large image visible and give it an absolute position, set the padding and margin, use the default pointer */
.menu2 ul li:hover ul li a:active img.bigger, .menu2 ul li:hover ul li a:focus img.bigger{
visibility:visible;background:#F0EEEC;position:absolute;width:302px;height:227px;z-index:200;padding:5px;border:1px solid #6388A3;cursor:pointer;}
/*width:352px;height:277px;*/

/* position the large image depending on the photo clicked */
.menu2 ul li:hover ul li a:active img.pos1, .menu2 ul li:hover ul li a:focus img.pos1 {top:-10px; left:-10px;}
.menu2 ul li:hover ul li a:active img.pos2, .menu2 ul li:hover ul li a:focus img.pos2 {top:-10px; left:-100px;}
.menu2 ul li:hover ul li a:active img.pos3, .menu2 ul li:hover ul li a:focus img.pos3 {top:-10px; left:-193px;}
.menu2 ul li:hover ul li a:active img.pos4, .menu2 ul li:hover ul li a:focus img.pos4 {top:-10px; left:-273px;}

.menu2 ul li:hover ul li a:active img.pos5, .menu2 ul li:hover ul li a:focus img.pos5 {top:-90px; left:-10px;}
.menu2 ul li:hover ul li a:active img.pos6, .menu2 ul li:hover ul li a:focus img.pos6 {top:-90px; left:-100px;}
.menu2 ul li:hover ul li a:active img.pos7, .menu2 ul li:hover ul li a:focus img.pos7 {top:-90px; left:-193px;}
.menu2 ul li:hover ul li a:active img.pos8, .menu2 ul li:hover ul li a:focus img.pos8 {top:-90px; left:-273px;}

.menu2 ul li:hover ul li a:active img.pos9, .menu2 ul li:hover ul li a:focus img.pos9 {top:-159px; left:-10px;}
.menu2 ul li:hover ul li a:active img.pos10, .menu2 ul li:hover ul li a:focus img.pos10 {top:-159px; left:-100px;}
.menu2 ul li:hover ul li a:active img.pos11, .menu2 ul li:hover ul li a:focus img.pos11 {top:-159px; left:-193px;}
.menu2 ul li:hover ul li a:active img.pos12, .menu2 ul li:hover ul li a:focus img.pos12 {top:-159px; left:-273px;}

.menu2 ul li:hover ul li a:active img.pos13, .menu2 ul li:hover ul li a:focus img.pos13 {top:-227px; left:-10px;}
.menu2 ul li:hover ul li a:active img.pos14, .menu2 ul li:hover ul li a:focus img.pos14 {top:-227px; left:-100px;}
.menu2 ul li:hover ul li a:active img.pos15, .menu2 ul li:hover ul li a:focus img.pos15 {top:-227px; left:-193px;}
.menu2 ul li:hover ul li a:active img.pos16, .menu2 ul li:hover ul li a:focus img.pos16 {top:-227px; left:-273px;}