@charset "utf-8";

/* SCROLLABLE HORIZONTAL
------------------------------------------------------------------------*/
.scrollable {
position:relative;
width:710px;
height:240px;
margin-bottom:10px;
margin:0 auto;
border:1px solid #ccc;
background:url(/img/bg_cell_proces.jpg) repeat-x left bottom #fff;
overflow:hidden; /*SCoF*/
}

/*
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.
*/
.itemsList {
/* this cannot be too large */
width:20000em;
position:absolute;
clear:both;
margin:0;
padding:0;
list-style:none;
overflow:hidden; /*SCoF*/
}

.itemsList li {
float:left;
width:142px; /*112(width img)+30(margin-left img)*/
margin-top:10px;
text-align:center;
overflow:hidden;
}

.itemsListTitol {
font-size:12px;
font-weight:bold;
padding:0 5px;
}

.itemsListImg {
width:112px; /*img width*/
height:155px; /*img height*/
margin:5px 15px;
border:none;
cursor:pointer;
}

.itemsListDesc {
font-size:10px;
padding:0 5px;
}

/*** ESTANDALONE ***/
/* get rid of those system borders being generated for A tags */
a:active {
outline:none;
}

:focus {
-moz-outline-style:none;
}

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

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

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

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

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