/* 
    Document   : scrollable
    Created on : 7-lug-2009, 10.29.19
    Author     : FranchinM
    Description:
        Purpose of the stylesheet follows.
*/
#scrollContainer {
    padding:10px;
    padding-top:0px;
    width: 359px;
    border: 0px solid blue;
/*    overflow:scroll;*/
}
.scrollContainer_4 {
    width: 470px !important;
}

#tematicArea {
    position:relative;
/*    border-right:1px solid #DCDCDC;
    border-left:1px solid #DCDCDC;*/
    border-top:0px solid #EBEBEB;
    padding:1px;
    margin:0px;
    /*padding-top: 10px;*/
    width:100%;
    height:120px;
    background-image:url('../images/scroll/scroll_bg.jpg');
    background-repeat: repeat-x;
    background-position: 0px 10px;
    /*border: 1px solid red;*/
}

#temAreaType {
    width:100%;
    /*border-top:2px solid #c0c0c0;*/
    position:relative;
    top:-13px;
}

#temAreaType ul {
    float:right;
    margin:0px;
    margin-right:4px;
    padding:3px 0px;
    list-style-type:none;
    list-style-image:none;
    height:20px;
}
#temAreaType li {
    display:inline;
    width:70px;
    margin:0px;
    padding:1px 10px;
    cursor: pointer;
    background-color:#EBEBEB;
    border:0px;
    border-top:0px solid #fff;
    position:relative;
    top:0px;
    right:-7px;
}

#temAreaType li.selected {
    border:1px solid #c0c0c0;
    background-color:#EBEBEB;
    border-top:1px solid #EBEBEB;
    font-weight:bold;
}


/* root element for the whole scrollable setup */
div.scrollable, div.scrollable_3 {
    margin:0px 11px;
    position:relative;
    padding:0px;
    padding-top:1px;
    padding-bottom:10px;
    overflow:hidden;
/*    width: 340px;*/
    height:110px;
    /*border:1px solid blue;*/
    /*vertical-align:middle;*/
}

/*
	root element for scrollable items. It is
	absolutely positioned with large width.
*/
#thumbs {
    position:absolute;
    width:20000em;
    clear:both;
    border:0px;
}


/* single item */
#thumbs div {
    float:left;
    width:60px;
    overflow:hidden;
    /*border:1px solid red;*/
    cursor:pointer;
    padding:22px 12px;
}
    #thumbs div .selected {
        display: none;
    }
    #thumbs div img {
        width:60px;
        /*height:70px;*/
/*        opacity:0.6;
        filter:alpha(opacity=60);*/
    }
    #thumbs div img.sitcom {
        height:60px !important;
    }

#thumbs div.hover img {
    position:relative;
    left:-3px;
    top: -4px;
    width:54px;
    height:65px;
    padding:0px;
    border:2px solid #c0c0c0;
    opacity:1;
    filter:alpha(opacity=100);
    display:none;
}
#thumbs div.active img {
/*    position:relative;
    left:-17px;
    top: -26px;
    width:80px;
    height:108px;
    padding:0px;
    border:3px solid #c0c0c0;
    opacity:1;
    filter:alpha(opacity=100);*/
    display: none;

}

        #thumbs div.active .selected, #thumbs div.hover .selected  {
            background: url(../images/scroll_at_selected_bg.jpg) repeat-x;
            color: #fff;
            font-weight: bold;
            background-color: #EA6C3C;
            position:relative;
            left:-10px;
            top: -17px;
            width:59px;
            height:65px;
            padding:8px;
            padding-top:30px;
            border:2px solid #c0c0c0;
            text-decoration: none;
            /*opacity:1;
            filter:alpha(opacity=100);*/
            display:block;
        }

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

a#scrollPrev, a#scrollNext {
    position:absolute;
    display:block;
    width:14px;
    height:106px;
    cursor:pointer;
    margin:0px;
    padding:0px;
    top:8px;
}
a#scrollPrev {
    left:-14px;
    background:url(../images/scroll/prev.gif) no-repeat;
}

a#scrollNext {
    right:-14px;
    background-image:url(../images/scroll/next.gif);
}






#user-media-files {
    position:absolute;
    width:20000em;
    clear:both;
    border:0px;
}


/* single item */
#user-media-files div {
    float:left;
    width:111px;
    height: 90px;
    overflow:hidden;
    /*border:1px solid red;*/
    cursor:pointer;
    text-align: center;
    padding-top:25px;
}

#user-media-files div.hover img {
    opacity:0.9;
    filter:alpha(opacity=90);
}
#user-media-files div.active img {
/*    opacity:0.9;
    filter:alpha(opacity=90);*/
border: 2px solid #333;
}