/* Carousel works by animating margin
 * of a div (car_content) hidden inside 
 * a car_wrapper with overflow: hidden. */
.carousel {
  width: 340px;
}

.car_wrapper {
  overflow: hidden;
  height: 340px;
  width: 340px;
  position: relative;
}

.car_content {
  width: 340px;
  height: 340px;
  margin: 0;   /* This margin will be animated */
  padding: 0;
}

/* Layout of images */
div.car_content p {
  width: 320px;
  height: 320px;
  margin: 10px;
  padding: 0;
  float: left;
  text-align: center;
}

/* Crop down image size */
div.car_content img {
  max-width: 315px;
  max-height: 315px; 
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

/* Required only for vertical centering */
div.car_content p a {
  /* This should match miniature size */
  width: 340px;
  height: 340px;
  
  margin: 0;
  padding: 0;

  /* Place image in the middle */
  line-height: 320px; 

  text-decoration: none;
  font-size: 0pt;
}

/***
 * Decorations/layout 
 ***/
/* Header layout */
.car_header {
  background-color: #a3a3a3;

  overflow: hidden;
  position: relative;
}

.car_header p {
  color: white;
  font-weight: bold;
  padding: 5px;
  margin: 0 0 0px 0;
}

.car_header a {
  color: white;
  display: block;
  font-weight: normal;
}

/* Layout of buttons */
.car_buttons {
  position: absolute;
  margin: 0;
  top: 5px;
  left: 300px;
}

.car_buttons a {
  margin-right: 3px;
}

/* Background/borders */
.car_wrapper {
  background-color: #f6f6f6;
}

.carousel a img {
  border-style: none;
}

/* IE6 */
div.car_content {
  _width: 5000px;
}

div.car_content p {
  _margin: 0px;
}

div.car_content p a {
  *line-height: 0px;
}

.carousel img {
  _width: 320px;
  _height: 320px;
}