/*
* General Scrollable Configuration
*/
/*
root element for the scrollable.  when scrolling occurs this
element stays still.
*/
.scrollable {
  /* required settings */
  position:relative;
  overflow:hidden;
  width: 660px;
  height: 90px;
}
 
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accommodate scrollable
items.  it's enough that you set width and height for the root element
and not for this element.
*/
.scrollable .items {
  /* this cannot be too large */
  width:20000em;
  position:absolute;
}
 
/*
a single item. must be floated in horizontal scrolling.  typically,
this element is the one that *you* will style the most.
*/
.items div {
  float:left;
}

/*
  root element for the scrollable.
  when scrolling occurs this element stays still.
  */


.scrollable {

    /* required settings */
    position:relative;
    overflow:hidden;
    width: 820px;
    height: 105px;

    /* custom decorations */
    background-color: #E1EBF5;
    background-image: linear-gradient(top, #e0ebf5, ghostwhite);
    background-image: -o-linear-gradient(top, #e0ebf5, ghostwhite);
    background-image: -moz-linear-gradient(top, #e0ebf5, ghostwhite);
    background-image: -webkit-linear-gradient(top, #e0ebf5, ghostwhite);
    background-image: -ms-linear-gradient(top, #e0ebf5, ghostwhite);
    background-image: -ro-linear-gradient(to bottom, #e0ebf5, ghostwhite);
}

/*
   root element for scrollable items. Must be absolutely positioned
   and it should have a extremely large width to accomodate scrollable
   items.  it's enough that you set the width and height for the root
   element and not for this element.
*/
.scrollable .items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
    clear:both;
}


/* single scrollable item */
.scrollable img {
    float:left;
    margin: 10px 6px;
    background-color:#fff;
    border:1px solid #ccc;
    width:110px;
    height:50px;
    padding: 15px 20px;
}
/* active item */
.scrollable .active {
    border:2px solid #000;
    position:relative;
    cursor:default;
}

/* this makes it possible to add next button beside scrollable */
.scrollable {
    float:left;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
    background:url(jquerytools/hori_large.png) no-repeat;
    display:block;
    width:30px;
    height:30px;
    float:left;
    margin:40px 10px;
    cursor:pointer;
    font-size:1px;
}

/* right */
a.right { background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }


/* left */
a.left { margin-left: 0px; }
a.left:hover  { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }

/* up and down */
a.up, a.down  {
    background:url(jquerytools/vert_large.png) no-repeat;
    float: none;
    margin: 10px 50px;
}

/* up */
a.up:hover { background-position:-30px 0; }
a.up:active { background-position:-60px 0; }

/* down */
a.down { background-position: 0 -30px; }
a.down:hover { background-position:-30px -30px; }
a.down:active { background-position:-60px -30px; }


/* disabled navigational button */
a.disabled {
    visibility:hidden !important;
}


/* position and dimensions of the navigator */
.navi {
    margin: auto;
    width:58px;
    height:20px;
}

/* items inside navigator */
.navi a {
    width:8px;
    height:8px;
    float:left;
    margin:3px;
    background:url(jquerytools/navigator.png) 0 0 no-repeat;
    display:block;
}

/* mouseover state */
.navi a:hover {
    background-position:0 -8px;
}

/* active state (current page state) */
.navi a.active {
    background-position:0 -16px;
}

/*
* Customers Scrollable Configuration
*/
.customersScrollableContainer {
    margin: auto;
    width: 910px;
    height: 110px;
}

.customersScrollableContainer a.browse {
    display: none;
}

.customersScrollable {
    width: 910px;
    z-index: 1;
    margin-top: -105px;
}

.customersScrollableMaskLeft {
    float: left;
    position: relative;
    z-index: 10;
}

.customersScrollableMaskRight {
    float: right;
    position: relative;
    z-index: 10;
}

/*
* Features Scrollable Configuration
*/
.items .scrollfeature * {
  float: none;
}

.items .scrollfeature .singlefeature {
  float: left;
}

.items .scrollfeature p, .items .scrollfeature h2 {
  padding: 0 12px;
  width: 246px; 
} 

.featuresScrollableContainer a.browse {
    margin-top: 292px;
}

featuresScrollableContainer div.navi {
    margin-top: 5px;
}


.featuresScrollableContainer {
  margin:0 auto; 
  width: 910px; 
  height: 656px;
}

div.navi {
    margin-top: 10px;
}

.featuresScrollable {
    height: 656px;
    width: 820px;
}

.featuresScrollable h2 {
  margin: 0;
}

.featuresScrollable img {
    height: auto;
    width: 230px;
    padding: 10px;
    margin: 10px 12px 10px 10px;
}

.featuresScrollable .separator {
    /*border-left: 1px solid #DFE4E4;*/
    background-color: #DADCE3;
    height: 636px;
    top: 10px;
    width: 1px;
    margin-left: -2px;
    padding: 0;
    position: absolute;
}

.featuresScrollable .separator_v {
    /*border-left: 1px solid #DFE4E4;*/
    clear: both;
    background-color: #DADCE3;
    height: 1px;
    width: 800px;
    padding: 0;
    margin-left: 10px;
}

img.newbadge {
    position: absolute;
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    margin-top: 11px;
    margin-left: 11px;
    width: 60px;
    height: 60px;
}


img.addonbadge {
    position: absolute;
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    margin-top: 140px;
    margin-left: 202px;
    width: 60px !important;
    height: 60px !important;
}