/* 
 *  Carousel styles for reusablebags.com 
 */

/* layout */
#carousel {
  margin: 0 auto;
  height: 310px;  
  width: 678px;
  font-size: 12pt;
}
#carousel .slide{
  width: 650px;
  padding: 15px;
  height: 280px;
}
#carousel .graphic{
  float: left;
  margin: 0 40px 20px 0;
  height: 250px;
  overflow: hidden;
}
#carousel .copy{
  height: 260px;
}
#carousel .copy *{
  margin-top: 0;
}
#carousel .caption{
  clear: both;
  width: 100%;
}
#carousel .caption *{
  padding: 0; margin: 0;
}
#carousel_controls {
  height: 30px;
  width: 150px;
  position: absolute;
  bottom: 0;
  right: 0;
}

/* typogrophy and color */
#carousel, #carousel a{
  font-family: Arial, Helvetica, sans-serif;
  color: #736F6E;
  text-decoration: none;
}
#carousel h2{
  color: #000;
  font-size: 1.2em;
  margin-bottom: 5px;
}
#carousel h3{
  font-size: 1em;
  color: #265599;
}
#carousel p, #carousel li {
font-size:0.9em;
line-height:2em;
}
#carousel li {
line-height:1.6em;
list-style:none;
}
#carousel_controls {
  background-color: #f4f3e6;
}

/* controls */
#carousel_controls a{
  display: block;
  position: absolute;
  bottom: 5px;
  width: 28px;
  height: 22px;
  background-image: url(/store/includes/images/prev-next-controls.gif);
  text-indent: 9000px;
  overflow: hidden;
}
#carousel_controls a.prev_button{
  right: 42px;
  background-position: 0 0;
}
#carousel_controls a.next_button{
  right: 15px;
  background-position: 28px 0;
}
#carousel_controls a.prev_button:hover{
  background-position: 0 22px;
}
#carousel_controls a.next_button:hover{
  background-position: 28px 22px;
} 


/** functional styles **/
#carousel{
  overflow: hidden;
  position: relative;
}
#slide_holder_inner div,
#row_of_slides,
#row_of_slides .slide{
  position: absolute;
}
div#slide_holder_inner div.slide div{
  position: relative;
}
#row_of_slides{
  top: 0;
}
#row_of_slides .slide{
  display: none;
}