.galerie{
border:  dotted 1px  #FFFFFF;
width:627px;
height:300px ;
margin-left:20px;
margin-top:0px;
padding-left:0px;
}

.galerie2{
border:  dotted 1px  #FFFFFF;
width:620px;
height:300px ;
margin-left:158px;
margin-top:-317px;
}

/* box für kleine bilder left  ***************************/
.pic-navi{
border:  dotted 1px  #FFFFFF;
width:128px;/* szerokosc kleine bilder  plus 2 mal padding z tad plus 2px von border von bild*/
height:300px ;
float:left;}

/* box für kleine bilder right  ***************************/
#galerie-right .pic-navi{
border:  dotted 1px  #FFFFFF;
width:128px;
height:300px ;
float:right;
margin-top:-303px;}
/*********************************************************************/


/*BOX 1 staly bild kiedy nic sie nie dzieje  */
div.helloworld{
float:right;
width:470px;
height: 300px;
margin-right:3px; /* polozenie odleglosc od prawej strony wegen float right */
margin-top:0px ;
margin-left: 0;
padding: 2px;
color: #2E2E2E;/* color textu opis do zdjec */
background:url(img/bildwechsel/oun_92.jpg) 2px 2px  no-repeat #FFFFFF ;
border:1px solid #C0C0C0;
  box-shadow:0px 5px 6px #909090;
}


 /* EFEKT BEIM HOVER LINKS*******************************************/
div.pic-navi a:hover span{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0 149px;/* odleglosc od malego bildu **********************/

display: block;
position: absolute;
width:470px;
height:300px ;
z-index: 100;
/* aussehen der box **************************************/
border:1px solid #C0C0C0;
float:right;
/* position des hintergrund  vorschaubox*****************************/
background-color:#FFFFFF;
background-repeat: no-repeat;

}

 /* EFEKT BEIM HOVER RIGHT*******************************************/
#galerie-right div.pic-navi a:hover span{
border:1px solid #C0C0C0;
padding:  1px;
margin: -1px 0 0 -478px;
position: absolute;
width:470px;
height:300px ;
}
/*************************************************************************/


/* kleine bilder ******************************************/
.pic-navi a img{
width:135px;
padding:2px;
margin:1px 1px 2px 1px;
border:1px solid #BBBBBB;
float:left;
  box-shadow:0px 5px 6px #909090;}

/* kleine bild hover**********************************/
.pic-navi a:hover img{
border:1px solid #CD2A2A;}


div.pic-navi a{
padding:0;
margin:0;}


div.pic-navi a span {
       display: none;
       color:#ff0000;
       background:#efefef;
    }
    div.pic-navi a:hover{
       color: #411;
       background: #005A00;
       padding:0;
       margin:0;
    }
    
   a#pic1:hover span{background-image:url(img/bildwechsel/347_0.jpg);}
   a#pic2:hover span{background-image:url(img/bildwechsel/374_0.jpg);}
   a#pic3:hover span{background-image:url(img/bildwechsel/1437_0.jpg);}
   a#pic4:hover span{background-image:url(img/bildwechsel/286_0.jpg);}
   a#pic5:hover span{background-image:url(img/bildwechsel/225_0.jpg);}
   a#pic6:hover span{background-image:url(img/bildwechsel/2844_0.jpg);}


   div.pic-navi a:hover span strong{
       background:#00FFFF;
       width: 295px;
       padding: 0px 0px 0px 0px;
       margin:-203px 0 0 0px;
       display:block;
       }