/*
 root element for the scrollable.
 when scrolling occurs this element stays still.
 */
.scrollable {
		/* required settings */
		position: relative;
		overflow: hidden;
		width: 750px;
		height: 120px;
		/* custom decorations */
		border: 0px solid #ccc;
		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 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;
}

.scrollable .container {
		float: left;
		margin: 20px 2px 20px 3px;
		background-color: #fff;
		padding: 2px;
		border: 1px  ridge black;
		cursor: pointer;
		width: 238px;
		height: 81px;
		overflow: hidden;
		vertical-align: top;
}

.scrollable .container div {
		vertical-align: top;
		float: left;
    display: block;
    
}

.overlay_arrow{
margin-left:-13px; /* the width of the navigation item*/
width: 13px;
margin-top:0px;
position:relative; /* needed for IE 6 */
}

.overlay_arrow2{
margin-left:-16px; /* the width of the navigation item*/
width: 13px;
margin-top:0px;
position:relative; /* needed for IE 6 */
}

.caption {
		vertical-align: text-top;
		margin: 0;
		padding: 0 10px 0px 10px;
		border: 0px;
		color: black;
		float: left;
		text-align: left;
		font-family: sans-serif;
		font-size: x-small;
    width:104px;
}

.scrollable .caption .title {
		font-weight: bold;
}

.title{
    font-weight: bold;
}

.episode {
		color: black;
}

.video_title {
		color: red;
}

.description{
    color: #88ae3d;
}

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


#desctip { 
    display:none; 
    background-color:#88ae3d;
    font-size:small; 
    width:300px;
    padding: 4px;
    color:black;
    border-style: ridge;
    border-width: thick;
    border-color: black;
    z-index:9999;
}