slidebox.css

/* slideBox.css -- stylesheet for Atto Slideshow microwidget */

/* apply a natural box layout model to all child elements */
.aw-slidebox * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.aw-slidebox {
    border: 2px inset #aaa;
    margin: 0;
    padding: 0.5em;
    position: relative;
    overflow: hidden;
    
  -webkit-box-shadow: 2px 2px 4px 0px #aaa; 
     -moz-box-shadow: 2px 2px 4px 0px #aaa; 
          box-shadow: 2px 2px 4px 0px #aaa; 
}

.aw-slidebox .aw-slide {
    background-color: #FFF;
    position: absolute;
    top: 0; left: 0;
    height: 100%; width: 100%;
    margin: 0;
    padding: 0.5em;
    
    visibility: hidden;

  -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
       -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
}

.aw-slidebox .aw-slide.prev {
    left: -100%;
}

.aw-slidebox .aw-slide.current {
    left: 0;
    opacity: 1;
    visibility: inherit;
}

.aw-slidebox .aw-slide.next {
    left: 100%;
}

.aw-slidebox .aw-prev-button,
.aw-slidebox .aw-next-button {
    position: absolute;
    cursor: pointer;
    top: 50%; margin-top: -40px;
    font-size: 64px;
    color: #777;
    text-decoration: none;
    opacity: 0.25;
}
.aw-slidebox .aw-prev-button { left: 10px; }
.aw-slidebox .aw-next-button { right: 10px; }

.aw-slidebox .aw-prev-button:hover,
.aw-slidebox .aw-next-button:hover {
    opacity: 1;
    color: #222;
}