/*  --- (C) Jo Klimek 2012 CssApps.de ---  */

#window{
  position:relative;
  width:400px;
/*  height:300px;    */
  height:auto;
  margin:50px auto;
  overflow:hidden;
  box-shadow:0 0 15px 0px rgba(0,0,0,1);
}

#all{
  -webkit-animation:slide10 40s ease-in-out infinite;
  -moz-animation:slide10 40s ease-in-out infinite;
  -ms-animation:slide10 40s ease-in-out infinite;
  -o-animation:slide10 40s ease-in-out infinite;
  animation:slide10 40s ease-in-out infinite;
  width:4400px;     /* max 10 pictures +1 */
  height:300px;
  /* background:#444; */
  background:0,0,0,0;
  }

#window:hover #all{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-ms-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}

#window:hover:after{
content:"▌▌";
text-shadow:-1px -2px 3px #fff,1px 2px 3px #000;
position:absolute;
right:5px;
top:5px;
opacity:.4;
color:#bbb;
}

#all span{
  display:block;
  float:left;
  width:400px;
  height:300px;
}

#all span.ls img{
  display:block;
  width:400px;
  height:300px;
}

#all span.pt img{
  display:block;
  margin:0 auto;
  height:300px;
}

/* -moz-    */
@-moz-keyframes slide10{
0%   {margin-left:0px;}
7%   {margin-left:0px;}
10%  {margin-left:-400px;}
17%  {margin-left:-400px;}
20%  {margin-left:-800px;}
27%  {margin-left:-800px;}
30%  {margin-left:-1200px;}
37%  {margin-left:-1200px;}
40%  {margin-left:-1600px;}
47%  {margin-left:-1600px;}
50%  {margin-left:-2000px;}
57%  {margin-left:-2000px;}
60%  {margin-left:-2400px;}
67%  {margin-left:-2400px;}
70%  {margin-left:-2800px;}
77%  {margin-left:-2800px;}
80%  {margin-left:-3200px;}
87%  {margin-left:-3200px;}
90%  {margin-left:-3600px;}
97%  {margin-left:-3600px;}
100%  {margin-left:-4000px;}
}

/* -webkit-    */
@-webkit-keyframes slide10{
0%   {margin-left:0px;}
7%   {margin-left:0px;}
10%  {margin-left:-400px;}
17%  {margin-left:-400px;}
20%  {margin-left:-800px;}
27%  {margin-left:-800px;}
30%  {margin-left:-1200px;}
37%  {margin-left:-1200px;}
40%  {margin-left:-1600px;}
47%  {margin-left:-1600px;}
50%  {margin-left:-2000px;}
57%  {margin-left:-2000px;}
60%  {margin-left:-2400px;}
67%  {margin-left:-2400px;}
70%  {margin-left:-2800px;}
77%  {margin-left:-2800px;}
80%  {margin-left:-3200px;}
87%  {margin-left:-3200px;}
90%  {margin-left:-3600px;}
97%  {margin-left:-3600px;}
100%  {margin-left:-4000px;}
}

/* -o-    */
@-o-keyframes slide10{
0%   {margin-left:0px;}
7%   {margin-left:0px;}
10%  {margin-left:-400px;}
17%  {margin-left:-400px;}
20%  {margin-left:-800px;}
27%  {margin-left:-800px;}
30%  {margin-left:-1200px;}
37%  {margin-left:-1200px;}
40%  {margin-left:-1600px;}
47%  {margin-left:-1600px;}
50%  {margin-left:-2000px;}
57%  {margin-left:-2000px;}
60%  {margin-left:-2400px;}
67%  {margin-left:-2400px;}
70%  {margin-left:-2800px;}
77%  {margin-left:-2800px;}
80%  {margin-left:-3200px;}
87%  {margin-left:-3200px;}
90%  {margin-left:-3600px;}
97%  {margin-left:-3600px;}
100%  {margin-left:-4000px;}
}
/*     */
@keyframes slide10{
0%   {margin-left:0px;}
7%   {margin-left:0px;}
10%  {margin-left:-400px;}
17%  {margin-left:-400px;}
20%  {margin-left:-800px;}
27%  {margin-left:-800px;}
30%  {margin-left:-1200px;}
37%  {margin-left:-1200px;}
40%  {margin-left:-1600px;}
47%  {margin-left:-1600px;}
50%  {margin-left:-2000px;}
57%  {margin-left:-2000px;}
60%  {margin-left:-2400px;}
67%  {margin-left:-2400px;}
70%  {margin-left:-2800px;}
77%  {margin-left:-2800px;}
80%  {margin-left:-3200px;}
87%  {margin-left:-3200px;}
90%  {margin-left:-3600px;}
97%  {margin-left:-3600px;}
100%  {margin-left:-4000px;}
}