/* 	
    Stylesheet bleichermühle.de
	V. 2010-06-14
*/

* {
	font-family: verdana,arial,helvetica;	
	font-size: 14px;
}


div.header{
  background-color: white;
  position: relative;
  z-index: 0;
  height: 312px;
}

div.headerlogo{
  background-image: url(/images/logo.png);
  background-repeat: no-repeat;
  height: 112px;
}

div.eventbannerpic{
  float: left;
  margin:7px 5px;
}

div.eventbannertext{
  float: left;
  font-size: 10px;
  color: black;
  width: 320px;
  margin:7px 5px;
  font-size: 12px;
}

div.headerpic{
  height: 200px;
}

div.navbutton{
  float:left;
  margin-left: 40px;
}

a.nav{
  color: #000000;
  text-decoration: none;
}




/* Service */
a.navService{
  color: #000000;
  text-decoration: none;
}

a.activenavService{
  color: #a8b885;
  text-decoration: none;
}

a.navService:hover{
  color: #a8b885;
  text-decoration: none;
}


/* Programm */
a.navProgramm{
  color: #000000;
  text-decoration: none;
}

a.activenavProgramm{
  color: #9dc28a;
  text-decoration: none;
}

a.navProgramm:hover{
  color: #9dc28a;
  text-decoration: none;
}


/* Panorama */
a.navPanorama{
  color: #000000;
  text-decoration: none;
}

a.activenavPanorama{
  color: #b5ac7e;
  text-decoration: none;
}

a.navPanorama:hover{
  color: #b5ac7e;
  text-decoration: none;
}


/* Impressionen */
a.navImpressionen{
  color: #000000;
  text-decoration: none;
}

a.activenavImpressionen{
  color: #d58e6e;
  text-decoration: none;
}

a.navImpressionen:hover{
  color: #d58e6e;
  text-decoration: none;
}


/* Home */
a.navHome{
  color: #000000;
  text-decoration: none;
}

a.activenavHome{
  color: #96c98e;
  text-decoration: none;
}

a.navHome:hover{
  color: #96c98e;
  text-decoration: none;
}


/* Events */
a.navEvents{
  color: #000000;
  text-decoration: none;
}

a.activenavEvents{
  color: #cd9572;
  text-decoration: none;
}

a.navEvents:hover{
  color: #cd9572;
  text-decoration: none;
}


/* Angebote */
a.navAngebote{
  color: #000000;
  text-decoration: none;
}

a.activenavAngebote{
  color: #c29f78;
  text-decoration: none;
}

a.navAngebote:hover{
  color: #c29f78;
  text-decoration: none;
}




div.subnavbutton{
  margin-bottom: 10px;
}

a.subnav{
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  font-size:11px;
}

div.oeffnungszeiten{
  color: #ffffff;
  font-size: 14px;
}

ul.oeffnungszeiten{   
  margin-top:6px;
}

li.oeffnungszeiten{
  margin-left:-20px;
}

div.alterpreis{
  margin-bottom: 2px;
  color: red;
}

div.angebotmwst{
  font-size: 12px;
}

div.bildunterschrift{
  background-color: #d58e6e; 
  color:#ffffff;
}

a.events{
  color: white;
  text-decoration: none;
}

a.angebotpromotion{
  color: #000000;
  text-decoration: none;
}

a.homelink{
  color: #96C98E;
  text-decoration: none;
}

a.eventlink{
  color: #CC9475;
  text-decoration: none;
}

a.herstellerlink{
  color: #9EC28D;
  text-decoration: none;
}

div.mitarbeiter{
  float: left;
  margin: 10px 20px;
  font-size: 12px;
}

div.mitarbeiterline{
  clear:both;
}

/* rightpic css */
            p {
                /* In order to create the proper effect with hover we should use display inline-table
                This will display the big picture right next to its thumbnail
                */
                list-style:none; 
                display:inline-table; 
            }
                 
                 
            /* This is the pic to display when the hover action occur over the li that contains the thumbnail  */
            p .pic{
                /* Animation with transition in Safari and Chrome */
               -webkit-transition: all 0.6s ease-in-out;
               /* Animation with transition in Firefox (No supported Yet) */
               -moz-transition: all 0.6s ease-in-out;
               /* Animation with transition in Opera (No supported Yet)*/
               -o-transition: all 0.6s ease-in-out;
                /* The the opacity to 0 to create the fadeOut effect*/
               opacity:0;
               visibility:hidden; 
               position:absolute; 
               margin-top:75px; 
               margin-left:-75px; 
               border:1px solid black;

            }
            

            p .mini:hover{
                cursor:pointer;
            }
            
            
            /* This create the desired effect of showing the imagen when we mouseover the thumbnail*/
           p:hover .pic {
                /* width and height is how much the picture is going to growth with the effect */
                width:300px; 
                opacity:1; 
                visibility:visible; 
                float:right;
            }