/* this makes it possible to add next button beside scrollable */


/* pulsanti small */
a.browseSmall {
    background:url(../media/images/small_arrows.png) no-repeat;
    display:block;
    width:30px;
    height:35px;
    float:left;
    margin:40px -10px;
    cursor:pointer;
    font-size:1px;
	z-index:999;
}


a.rightSmall { background-position: 0 -35px; clear:right; margin-right: 0px;z-index:999; position:absolute;top:20px;right:-10px;}
a.rightSmall:hover { background-position:-30px -35px; }
a.rightSmall:active { background-position:-60px -35px; }



a.leftSmall { margin-left: 0px; z-index:999;position:absolute;top:20px;left:-10px;}
a.leftSmall:hover  { background-position:-30px 0; }
a.leftSmall:active { background-position:-60px 0; }




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

/*pulsanti big*/
a.browse {
    background:url(../media/images/big_arrows.png) no-repeat;
    display:block;
    width:60px;
    height:71px;
    float:left;
    margin:40px -10px;
    cursor:pointer;
    font-size:1px;
	z-index:999;
}

a.right { background-position: 0 -71px; clear:right; margin-right: 0px;z-index:999; position:absolute;top:80px;right:-20px;}
a.right:hover { background-position:-60px -71px; }
a.right:active { background-position:-120px -71px; }



a.left { margin-left: 0px; z-index:999;position:absolute;top:80px;left:-20px;}
a.left:hover  { background-position:-60px 0; }
a.left:active { background-position:-120px 0; }

.scrollable {
    float:left;
}
.scrollable {

    /* required settings */
    position:relative;
    overflow:hidden;
    width: 1070px;
    height:320px;

    /* custom decorations */
	z-index:9;
}

/*
   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;
}

.items .blocchi {
    float:left;
    width:1070px !important;
}

.items .opera
{
	float:left;
	position:relative;
	width:340px !important;
	height:320px !important;
	/*border:1px solid #ff0000;*/
	margin: 0 25px 25px 0;
}

.items .operaLast
{
	float:right;
	margin: 0 0 25px 0;
}


/* single scrollable item */
.scrollable img {
    float:left;
    width:340px !important;
    height:320px;

}

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


.scrollableSmall {
    float:left;
}
.scrollableSmall {

    /* required settings */
    position:relative;
    overflow:hidden;
    width: 1070px;
    height:160px;

    /* custom decorations */
	z-index:9;
	margin-top:0px;
}

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

.artisti div {
    float:left;
    width:1070px;
}

.artisti div.artista
{
	float:left;
	position:relative;
	width:165px;
	height:160px;
	border:1px solid #E2E2E2;
	margin: 0 13px 15px 0;
}

.artisti div.artistaLast
{
	float:right;
	margin: 0 0 15px 0;
}


/* single scrollable item */
.scrollableSmall img {
/*    float:left;
    margin:0px 5px 0px 3px;
    background-color:#fff;
    padding:2px;
    border:1px solid #ccc;
    width:100px;
    height:75px;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;*/
}

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