/* root element for the whole scrollable setup */
div.scrollable {
  position:relative;
  overflow:hidden;
  /* This width holds place for 3 items. But it's actually overridden at runtime by jquery according
  to how much actual space we have on page */
  width: 276px;
  height: 242px;
  clear: both;
}

a.strip-prev, a.strip-next {
  display:block;
  width:17px;
  height:17px;
  float:left;
  margin: 3px;
  cursor:pointer;
  text-decoration: none;
  background-repeat: no-repeat;
  border-bottom: none;
}

/* next button uses another background image */
a.strip-next, a.nextPage {
  clear:right;
}

a.strip-next {
  background-image: url(strip_sprite.gif);
  background-position: -200px -200px;
}
a.strip-prev {
  background-image: url(strip_sprite.gif);
  background-position: -100px -200px;
}
/* mouseover state */
a.strip-next:hover {
  background-position: -200px -100px;
}
a.strip-prev:hover {
  background-position:-100px -100px;
}
/* disabled navigational button */
.strip-prev-container a.disabled {
  background-position:-100px 0px;
}
.strip-next-container a.disabled {
  background-position:-200px 0px;
}
.strip-prev-container, .strip-next-container {
  float: right;
}


/* single item */
.ob-thumbs .item-container {
float:left;
/* Changing the width should be in sync with the JS and Java code !!!*/
height: 240px;
cursor: pointer;
padding:0 9px 0 0;
width:119px;
}

/* style when element is active (clicked) */
.ob-thumbs div.active {
cursor: default;
}


/*
root element for scrollable items. It is
absolutely positioned with large width.
*/
.ob-thumbs {
position:absolute;
width:2000em;
clear:both;
}


/* style when element is active (clicked) */
.ob-thumbs div.active {
cursor:default;
}

img.strip-img {
border: none !important;
height: 109px;
margin: 0px !important;
display: block;
padding: 0px !important;
background-image: url(strip_default.png); /*This is a default image in case communication fails*/
}

.ob-thumbs a.strip-rec-link-img {
  border:1px solid #ccc !important;
  display:block;
  padding:3px;
  width: 109px;
  float: left;
  height: 109px;
}


/* The "You might also like" string */
.strip-like {
  float: left;
  font-size: 14px;
  line-height: 16px;
  height: 20px;
  font-weight: bold;
}
.div-wrapper-right .strip-like {
  float: right;
  direction: rtl;
}

.strip-navi-cont {
  float: right;
}
.div-wrapper-right .strip-navi-cont {
  direction: ltr;
  padding-right: 100px;
  float: left;
}

.thumbs-container {
  display: none;
}

.div-wrapper-right .thumbs-container {
  direction: rtl;
}

.strip-navi {
  margin-top: 7px;
  float: right;
}

.strip-header {
  display: none;
}

.strip-navi a {
  background: #aaa url(strip_sprite.gif) no-repeat scroll 0 0;
  display:block;
  float:left;
  font-size:1px;
  height:9px;
  width:9px;
  border-bottom: none;
}
div.strip-navi a.active {
  background-position:0 -100px;
  background-color: #555;
}

.item-container .top-bar {
  height: 3px;
  font-size: 3px;
  background-color: #ddd;
  margin-bottom: 2px;
  width:117px;
}

.item-container .strip-text-content {
  margin-top: 0px;
  clear: both;
}

.div-wrapper-right .item-container .strip-text-content {
  direction: rtl;
}

.item-container-ad .strip-text-content {
  position: relative;
  top: -18px;
}

.item-container .strip-rec-link-title {
  font-size: 13px;
  line-height: 16px;
  font-weight: normal;
}

.item-container .strip-rec-link-source {
  display: block;
  font-size: 12px;
  line-height: 16px;
}

.ob-thumbs div.hover .top-bar {
  background-color: #555;
}
.ob-thumbs div.hover a.strip-rec-link-img {
  border: 2px solid #555;
  padding: 2px;
}

.strip-slant-borderdraw {
  visibility: hidden;
  border-style: solid;
  width: 0px;
  height: 0px;
  line-height: 0px;
  border-width: 8px 8px 0px;
  border-color: #555 transparent transparent;
  margin: 0 50px 0 50px;
  clear: both;
}

.item-container-ad .strip-slant-borderdraw {
  position: relative;
  top: -19px;
}

.strip-ie6 .strip-slant-borderdraw {
  display: none;
}


.ob-thumbs div.hover .strip-slant-borderdraw {
  visibility: visible;
}

.item-container-ad .paid-distribution a, .item-container-ad .paid-distribution a:hover {
  background-color:#555;
  border-color:#FFF;
  border-style:solid;
  border-width:2px 2px 0 0;
  color:#FFF;
  float:left;
  font-family:verdana,arial,sans-serif;
  font-size:9px;
  font-size-adjust:none;
  font-stretch:normal;
  font-style:normal;
  font-variant:normal;
  font-weight:normal;
  line-height:normal;
  padding:2px 4px;
  position:relative;
  top:-18px;
  z-index:0;
}

.ob-thumbs a, .ob-thumbs a:hover, .ob-thumbs a:visited {
  text-decoration: none;
  border: none;
}

.strip-ie6 .top-bar {
  display: none;
}