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

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 360px;
	height:145px;
}

/*
	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 .elemento
{
    border: 1px solid #000000;
    float: left;
    cursor: pointer;
    width: 350px;
    height: 140px;
    margin-right: 10px;
    background-color: #E8EFFF;
}

.scrollable .elemento :hover
{
    background-image: url('../imagenes/menu-encima.jpg' );
    background-repeat: no-repeat;
}

/* active item */
.scrollable .active {
	border:2px solid #000;
	z-index:9999;
	position:relative;
}

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

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 125px;
	height:400px;
}

/*
	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.
*/
.scrollablevert .items {
	/* this cannot be too large */
	height:20000em;
	position:absolute;
}

/* single scrollable item */
.scrollablevert .elemento
{
    float: left;
    margin: 3px 0px 3px 1px;
    cursor: pointer;
    width: 120px;
    height: 90px;
    text-align: left;
    background-image: url('../imagenes/fondo.jpg');
    background-repeat: repeat;
}

/* active item */
.scrollablevert .active
{
    z-index: 9999;
    position: relative;
}

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

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 580px;
	height:145px;
}

/*
	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.
*/
.scrollableGrande .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

/* single scrollable item */
.scrollableGrande .elemento
{
    border: 1px solid #62A8DD;
    float: left;
    cursor: pointer;
    width: 570px;
    height: 140px;
    margin-right: 10px;
    background-color: #F2F9FD;
}

.scrollableGrande .elemento :hover
{
    background-image: url('../imagenes/menu-encima.jpg' );
    background-repeat: no-repeat;
}

/* active item */
.scrollableGrande .active {
	border:2px solid #000;
	z-index:9999;
	position:relative;
}