﻿.FilmStripWrapper
{
  overflow:hidden;
   position:relative;
   width:808px;
   height:180px;
   float:right;
   
}

#FilmStripBox0
{
	position:absolute;
	display:block;
	left:0px;
    width:21px;
    height:100px;
    top:1px;
    z-index: 1;
}
.FrameItem
{
		background-image:url(../_img/thumbnail_off.png); 
 
 display:block;
  float:left;
  margin-left:0px;
 height:133px;
 width:153px;
 z-index: 100;
 position:absolute;
 
}

.FrameItem:hover
{
 background-image:url(../_img/thumbnail_on.png); 
 
 display:block;
 float:left;
  margin-left:0px;
 height:133px;
 width:153px;
}

#frameWrapper
{
	width: 0px;
	height: 142px;
	float: right;
	position:relative;
	top:0px;
	left:-7px;
}
#frameLayer {
	overflow:hidden;
	/* fix ie overflow issue */
	position:relative;
	width:760px;
	height:140px;
	left:8px;
	top:-11px;
}

/* remove the list styles, width : item width * total items */	
#frameLayer ul
{
    position: relative;
    left: 0;
    top: 0;
    list-style: none;
    margin-left: 0px;
    margin-top: 5px;
    padding: 0;
    width: 779px;
    height:136px
}

/* width of the item, in this case I put 250x250x gif */
#frameLayer li 
{
	width:153px;
	height:135px;	
	float:left;
	margin-left:0px;
	display:block;
	position: relative;
	text-decoration:none;
		 
}
a.FrameItem 
{
	text-decoration:none;
}

.imageTitle a, a:visited,  a:active
{
	
    cursor:pointer;
    text-decoration:none;
    
}

#frameLayer li img {
	padding:0px;
	z-index: 1 ;
	display:block;
	position: absolute;
	padding-left:0px;
	padding-top:25px;
	left:0px;
	width:146px;
}
#frameLayer li div 
{
	text-align:center;
	z-index: 200 ;
	display: block;
	position: absolute;
	padding-left: 9px;
	padding-top:6px;
	left: 0px;
	float:left;
	 width:130px;
	 height:28px;
	 visibility:visible;
	 color:White;
	 font-weight:bolder;
	 text-decoration: none;
}
/* Styling for prev and next buttons */
#buttons {
	padding:0 0 5px 0;	
	float:right;
	width:0px;
	height:37px;
}

#buttons a {
	display:block; 
	width:31px; 
	height:32px;
	text-indent:-999em;
	float:left;
	outline:0;

}

a#prev 
{
	background: url("../_img/arrow_left_inactive-new.jpg") no-repeat scroll 0 0 transparent;
	display:block;
	z-index: 2000;
	position:absolute;
	left:4px;
	height:17px;
	top:90px;
	width:11px;
   
}

a#prev:hover 
{
	background:url(../_img/arrow_left_hover-new.jpg) no-repeat scroll 0 0 transparent;
	display:block;
	z-index: 2000;
	position:absolute;
	left:4px;
	height:17px;
	top:90px;
	width:11px;


}

a#next 
{
	z-index:2000;
	background:url(../_img/arrow_right_active.jpg) no-repeat scroll 0 0 transparent; 
	display:block;
	position:absolute;
	left:785px;
	height:15px;
	top:90px;
	width:11px;
	
}

a#next:hover 
{
	background:url(../_img/arrow_right_hover.jpg) no-repeat scroll 0 0 transparent;
	z-index:2000;
	display:block;
	position:absolute;
	left:785px;
	height:15px;
	top:90px;
	width:11px;
	
}

.clear {clear:both}