<!-- scrolling images info from:    http://designshack.net/articles/css/infinitephotobanner/  -->
<!-- This pattern is downloaded from www.subtlepatterns.com 
 If you need more, that's where to get'em. -->

<style type="text/css">
 
* {margin: 0; padding: 0;}
 
body {
    background-image: url('green_cup.png');
}
 
#imgContainer {
    height: 450px;
    width: 400px; /*note that this width is set in JavaScript.  Ignore the value of the width that is here.  Changing it will not do anything */
    overflow: hidden;
    margin-left: 50px;
    /*margin: 50px auto;*/
    background: #009933;
    color: white; /*border and text color*/
    border: 2px solid;
    border-top-left-radius: 50px;  
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;  
    border-bottom-right-radius: 50px;
}

/*blend the color of the hyperlink into the background of the image container*/
#imgContainer a:link {color:#009933;}      /* unvisited link */
#imgContainer a:visited {color:#009933;}  /* visited link */
#imgContainer a:hover {color:#009933;}  /* mouse over link */
#imgContainer a:active {color:#009933;}  /* selected link */

/*header*/
header {
    width: 800px;
    margin: 40px auto;
}
 
header h1 {
    text-align: center;
    font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
     
}
 
header p {
    font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
    text-align: justify;
}
 
/*photobanner*/
 
#photobanner {
    height: 110px;                 /*note that this height is set in JavaScript.  Ignore the value of the height that is here.  Changing it will not do anything */
    width: 1750px;                 /*note that this width is set in JavaScript.  Ignore the value of the width that is here.  Changing it will not do anything */ /* 10x width of an image  (fit all images - we have 10) */
    margin-bottom: 80px;
}

#photobanner img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
 

/* On hover, we’ll scale the image by 10% and add a shadow */
#photobanner img:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    /*cursor: pointer;*/
 
    -webkit-box-shadow: 7px 7px rgba(0,0,0,0.4);
    -moz-box-shadow:    7px 7px rgba(0,0,0,0.4);
    box-shadow:         7px 7px rgba(0,0,0,0.4);
}

/* Bring it to life
 The keyframe animation process is pretty straightforward. To begin, we want to target that “first” class that we created and declare an animation. Here we name the animation, then set a duration and timing duration and set the repetition to infinite. 
 Moving down the line, we then define our frames using the @keyframes syntax. We only really need two frames here, one to start and one to stop. We simply set the margin to a negative value to move the line of images left far enough that the second iteration of the first image takes the initial spot. 
*/

/*keyframe animations*/
/*These change the speed of the images going across the banner.  Put a lower number before the s to make the images scroll faster.  Put a higher number before the s to make the images scroll slower ex: 20s for faster, 50s for slower*/
.first {
    -webkit-animation: bannermove 90s linear infinite; /*a lower # scrolls faster, a higher number scrolls slower*/
       -moz-animation: bannermove 90s linear infinite; /*a lower # scrolls faster, a higher number scrolls slower*/
        -ms-animation: bannermove 90s linear infinite; /*a lower # scrolls faster, a higher number scrolls slower*/
         -o-animation: bannermove 90s linear infinite; /*a lower # scrolls faster, a higher number scrolls slower*/
            animation: bannermove 90s linear infinite; /*a lower # scrolls faster, a higher number scrolls slower*/
}
 
/* margin-left must be -1 x number of unique images x [the width of each image (85px) + border (5px)] - border (5px) */
/* for example; 1 unique images = -1 x 550 = -550px */
/* for example; 2 unique images = -2 x 550 = -1100px */
/* for example; 3 unique images = -3 x 550 = -1650px */
/* for example; 4 unique images = -4 x 550 = -2200px */
/* for example; 5 unique images = -5 x 550 = -2750px */
/* for example; 6 unique images = -6 x 550 = -3300px */
/* for example; 7 unique images = -7 x 550 = -3850px */
/* for example; 8 unique images = -8 x 550 = -4400px */
/* for example; 9 unique images = -9 x 550 = -4950px */
/* for example; 10 unique images = -10 x 550 = -5500px */


@keyframes "bannermove" {
 0%   { margin-left:     0px;}
 100% { margin-left: -4950px;}
}
 
@-moz-keyframes bannermove {
 0%   { margin-left:     0px;}
 100% { margin-left: -4950px;}
}
 
@-webkit-keyframes "bannermove" {
 0%   { margin-left:     0px;}
 100% { margin-left: -4950px;}
}
 
@-ms-keyframes bannermove {
 0%   { margin-left:     0px;}
 100% { margin-left: -4950px;}
}
 
@-o-keyframes "bannermove" {
 0%   { margin-left:     0px;}
 100% { margin-left: -4950px;}
}

</style>


