/* ---------- PAGINA HOME OIL ---------- */

/* root element for the scrollable.  when scrolling occurs this element stays still. */
.half_box_referenze #scrollable { position: absolute; top: 50px; left: 0px; }

.half_box_referenze .scrollable { /* required settings */ position: relative; overflow: hidden; width: 904px; height: 82px; /* custom decorations */ /*background:url(/img/global/gradient/h300.png) repeat-x;*/ }

/* 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. */
.half_box_referenze .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. */
.half_box_referenze .items div { float: left; text-align: center; }

.half_box_referenze .scrollable .items > div { width: 900px; }
.half_box_referenze .scrollable .items > div a { display: inline-block; float: none; margin: 0 3px; }
/* SCROLLABLE BUTTONS */

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

/* prev, next, prevPage and nextPage buttons */
.half_box_referenze a.browse { background: url(../../img/scrollable/arrow/buttons_ref.png) no-repeat 0px 2px; display: block; width: 15px; height: 82px; float: left; margin: 0px 2px; cursor: pointer; font-size: 1px; }

/* right */
.half_box_referenze a.right { background-position: -15px 2px; clear: right; margin-right: 0px; }
.half_box_referenze a.right:hover { background-position: -15px -78px; }
.half_box_referenze a.right:active { background-position: -15px -78x; }

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

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

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

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

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

/* single scrollable item */
.half_box_referenze .scrollable a { float: left; margin: 0 5px 0 0; padding: 0px; border: 1px solid #ccc; }
.half_box_referenze .scrollable a img { margin: 0; padding: 0; width: 100px; height: 80px; }

/* active item */
.half_box_referenze .scrollable .active { border: 2px solid #000; position: relative; cursor: default; }


/* ---------- PAGINA SUCCESS STORIES ---------- */

/* root element for the scrollable.  when scrolling occurs this element stays still. */
#corpo_success .scrollable { /* required settings */ position: relative; overflow: hidden; width: 640px; height: 190px; /* custom decorations */ /*background:url(/img/global/gradient/h300.png) repeat-x;*/ }

/* 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. */
#corpo_success .scrollable .items { /* this cannot be too large */ width: 20000em; position: absolute; height: 190px; }

/* a single item. must be floated in horizontal scrolling. typically, this element is the one that *you* will style the most. */
#corpo_success .items div { float: left; }

/* SCROLLABLE BUTTONS */

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

/* prev, next, prevPage and nextPage buttons */
#corpo_success a.browse { background: url(../../img/scrollable/arrow/buttons.png) no-repeat 0px 0; display: block; width: 26px; height: 92px; float: left; margin: 38px 2px; cursor: pointer; font-size: 1px; }

/* right */
#corpo_success a.right { background-position: -28px 0px; clear: right; margin-right: 0px; }
#corpo_success a.right:hover { background-position: -28px 0px; }
#corpo_success a.right:active { background-position: -28px -92px; }

/* left */
#corpo_success a.left { margin-left: 0px; }
#corpo_success a.left:hover { background-position: 0px 0; }
#corpo_success a.left:active { background-position: 0px -92px; }

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

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

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

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

/* single scrollable item */
#corpo_success .scrollable .box { float: left; margin: 0 6px 0 0; padding: 2px; border: 1px solid #ccc; width: 203px; height: 160px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
#corpo_success .scrollable .box h3 { position: absolute; top: 2px; left: 9px; }
#corpo_success .scrollable .box img { margin: 0; padding: 0; width: 188px; height: 108px; border: 1px solid #CCC; position: absolute; top: 26px; left: 8px; }
#corpo_success .scrollable .box .link { position: absolute; top: 140px; left: 9px; }

/* active item */
#corpo_success .scrollable .active { border: 2px solid #000; position: relative; cursor: default; }