@charset "utf-8";
/* CSS Document */

/* ================================================================ 
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/image-manipulation.html
Copyright (c) 2005-2010 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.gallery {padding:0; margin:0 auto; list-style:none; position:relative; width:320px; height:218px; border:5px solid #444;}
.gallery li {width:107px; height:55px; float:left;}
.gallery li a {display:block; width:160px; height:109px; position:absolute;
-webkit-transition: 0.75s ease-in-out;
-moz-transition: 0.75s ease-in-out;
-ms-transition: 0.75s ease-in-out;
-o-transition: 0.75s ease-in-out;
transition: 0.75s ease-in-out;
}
.gallery li a.p1 {background:url(../../images/pics/bau1_640_klein.jpg) no-repeat; opacity:0.5; left:0; top:0; }
.gallery li a.p2 {background:url(../../images/pics/bau2_640_klein.jpg); opacity:0.5; left:107px; top:0;}
.gallery li a.p3 {background:url(../../images/pics/bau3_640_klein.jpg); opacity:0.5; right:0; top:0;}
.gallery li a.p4 {background:url(../../images/pics/bau4_640_klein.jpg); opacity:0.5; left:0; bottom:0;}
.gallery li a.p5 {background:url(../../images/pics/bau5_640_klein.jpg); opacity:0.5; left:107px; bottom:0;}
.gallery li a.p6 {background:url(../../images/pics/bau6_640_klein.jpg); opacity:0.5; right:0; bottom:0;}

.gallery li a:hover {position:absolute; width:320px; height:218px; z-index:100; opacity:1;}

.gallery li a.p1:hover {left:0; top:0;}
.gallery li a.p2:hover {left:0; top:0;}
.gallery li a.p3:hover {right:0; top:0;}
.gallery li a.p4:hover {left:0; bottom:0;}
.gallery li a.p5:hover {left:0; bottom:0;}
.gallery li a.p6:hover {right:0; bottom:0;}


.gallery2 {padding:0; margin:0 auto; list-style:none; position:relative; width:480px; height:280px; border:5px solid #444;}
.gallery2 li {width:240px; height:140px; float:left;}
.gallery2 li a {display:block; width:240px; height:140px; position:relative; overflow:hidden;} 
.gallery2 li a img {border:0; position:absolute; left:-360px; top:-210px; opacity:0.5; width:960px; height:560px;
-webkit-transition: 0.75s ease-in-out;
-moz-transition: 0.75s ease-in-out;
-ms-transition: 0.75s ease-in-out;
-o-transition: 0.75s ease-in-out;
transition: 0.75s ease-in-out;
}
.gallery2 li a:hover img {position:absolute; left:0; top:0; opacity:1; width:240px; height:140px;}

</style>