#Mfoto { 
    position:absolut; 
    margin:-830px 0px 0px 280px; 
    float:left;
    width:665px; 
    height:455px;
    z-index:4; 
    background-color:#ffffff; }


#fotoO {
width : 664px;
height : 103px;
background-color :#ffffff;
margin: 0px;
}
#fotoO1 {
width : 664px;
height : 50px;
background-color :#ffffff;
margin: 1px 0px 1px 1px;
}
#fotoO2 {
width : 664px;
height : 50px;
background-color :#ffffff;
margin: 0px 0px 1px 1px;
}


.fotoO1a,.fotoO1b,.fotoO1c,.fotoO1d,.fotoO1e,.fotoO1f,.fotoO1g,.fotoO1h,.fotoO1i,.fotoO1j,.fotoO1k,.fotoO1l,.fotoO1m {
width : 50px;
height : 50px;
background-color :#ffffff;
float : left;
margin: 0px 1px 0px 0px;
}
.fotoO2a,.fotoO2b,.fotoO2c,.fotoO2d,.fotoO2e,.fotoO2f,.fotoO2g,.fotoO2h,.fotoO2i,.fotoO2j,.fotoO2k,.fotoO2l,.fotoO2m {
width : 50px;
height : 50px;
background-color :#ffffff;
float : left;
margin: 0px 1px 0px 0px;
}



#fotomitte { 
    float:left;
    width:664px; 
    height:255px;
    z-index:4; 
    background-color:#ffffff;
    margin: 0px 0px 0px 1px;
    }


#fotoL {
width : 154px;
height : 255px;
background-color : #ffffff;
float : left;
margin: 0px;
}
#fotoL1 {
width : 50px;
height : 250px;
background-color :#ffffff;
margin:-1px 1px 0px 0px;
float : left;
}
.fotoL1a,.fotoL1b,.fotoL1c,.fotoL1d,.fotoL1e {
width : 50px;
height : 50px;
background-color :#ffffff;
margin : 0px 1px 1px 0px;
}

#fotoL2 {
width : 50px;
height : 250px;
background-color :#ffffff;
margin: -1px 1px 1px 0px;
float : left;
}
.fotoL2a,.fotoL2b,.fotoL2c,.fotoL2d,.fotoL2e {
width : 50px;
height : 50px;
background-color :#ffffff;
margin : 0px 0px 1px 0px;
}

#fotoL3 {
width : 50px;
height : 250px;
background-color :#ffffff;
margin: -1px 0px 1px 0px;
float : left;
}
.fotoL3a,.fotoL3b,.fotoL3c,.fotoL3d,.fotoL3e {
width : 50px;
height : 50px;
background-color :#ffffff;
margin : 0px 0px 1px 0px;
}





#mitteM {
width : 356px;
height : 254px;
background-color : #ffffff;
float : left;
margin-top: -1px ;
margin-left: -1px;
margin-right: 0px;
}

.mitte p { 
width : 100px;
height : 80px;
padding : 0px 10px 1px 0px;
margin:0px 10px 1px 30px;
text-align : center;
font : 21px Lucida Calligraphy, Verdana, Helvetica;
color: #ffffff;
}

#fotoR {
width : 154px;
height : 255px;
background-color : #ffffff;
float : left;
margin: 0px;
}
#fotoR1 {
width : 50px;
height : 250px;
background-color :#ffffff;
margin: -1px 0px 1px 1px;
float : left;
}
.fotoR1a,.fotoR1b,.fotoR1c,.fotoR1d,.fotoR1e {
width : 50px;
height : 50px;
background-color :#ffffff;
margin : 0px 1px 1px 0px;
}

#fotoR2 {
width : 50px;
height : 250px;
background-color :#ffffff;
margin: -1px 1px 1px 1px;
float : left;
}
.fotoR2a,.fotoR2b,.fotoR2c,.fotoR2d,.fotoR2e {
width : 50px;
height : 50px;
background-color :#ffffff;
margin : 0px 1px 1px 0px;
}

#fotoR3 {
width : 50px;
height : 250px;
background-color :#ffffff;
margin: -1px 1px 1px 0px;
float : left;
}
.fotoR3a,.fotoR3b,.fotoR3c,.fotoR3d,.fotoR3e {
width : 50px;
height : 50px;
background-color :#ffffff;
margin : 0px 0px 1px 0px;
}

#fotoU {
width : 664px;
height : 103px;
background-color :#ffffff;
margin-top: -2px;
float : left;
}
#fotoU1 {
width : 664px;
height : 50px;
background-color :#ffffff;
margin: 1px 0px 1px 0px;
}
#fotoU2 {
width : 664px;
height : 50px;
background-color :#ffffff;
margin: 0px 0px 1px 0px;
}

.fotoU1a,.fotoU1b,.fotoU1c,.fotoU1d,.fotoU1e,.fotoU1f,.fotoU1g,.fotoU1h,.fotoU1i,.fotoU1j,.fotoU1k,.fotoU1l,.fotoU1m {
width : 50px;
height : 50px;
background-color :#ffffff;
float : left;
margin: 0px 1px 0px 0px;
}
.fotoU2a,.fotoU2b,.fotoU2c,.fotoU2d,.fotoU2e,.fotoU2f,.fotoU2g,.fotoU2h,.fotoU2i,.fotoU2j,.fotoU2k,.fotoU2l,.fotoU2m {
width : 50px;
height : 50px;
background-color : #ffffff;
margin : 0px 1px 0px 0px;
float : left;
}


<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

/* smart image enlarger starts here */
/* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */

.ienlarger {
	float: left;
	clear: none; /* set to left or right if needed */
	padding-bottom: 0px; /* space between thumbs. Don't change this to margin */
	padding-right: 0px; /* space between thumbs and wrapping text when there is any text around it */
}

.ienlarger a { 
	display:block;
	text-decoration: none;
/* add cursor:default; to this rule to disable the hand cursor */
}

.ienlarger a:hover{ /* don't move this positioning to normal state */
 	position:center;
}

.ienlarger span img {
	border: 0px solid #ffffff; /* rand um bild */
}

.ienlarger a span {  /* this is for the large image and the caption */
	position: absolute;
	display:none;
	color: #88CC00; /* caption text colour */
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px; /* caption text size */
	font-weight: bold;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

.ienlarger img { /* kleines bild */
border-width: 0px;
}

.ienlarger a:hover span { 
	display:block;
	top: 273px; /* means the pop-up's top is 50px away from thumb's top */
	left: 594px; /* abstand linker rand*/
	z-index: 100;
	
/* If you want the pop-up open to the left of thumb, remove the left: 90px; and add  
right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */	

/* If you want the pop-up open above the thumb, remove the top: 50px; and add  
bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */	

/* add cursor:default; to this rule to disable the hand cursor only for the large image */
}

.resize_thumb {
	width: 50px; /* enter desired thumb width here */
	height : 50px;
}

/* smart image enlarger ends here */

</style>