img{
border: 0;
display: block;
}
#Gallery{
position: relative;
float: left;
margin: 0 0 20px 0;
padding-left: 0px;
}
/* root element for the whole scrollable setup */
div.scrollable {  
position:relative;
overflow:hidden;
direction:ltr;
float:left;
text-align:left;
}
.ArabiCss div.scrollable { 
direction:rtl; 
text-align:right;
}
#layout .MainGallery{
margin: 0px 0 0 20px;
width:100%;
}
#layout .ImageGallery{
margin: 10px 0 0 0;
padding-right:0px;
}
/* this makes it possible to add next button beside scrollable */

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:block;
	width:16px;
	height:40px;
	background:url(../Images/Generic/PagingLeft.png) no-repeat;
	float:left;
	cursor:pointer;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	sbackground-position:0px -18px;		
}

/* disabled navigational button */
a.DisabledPrev {
	basckground-image:url(../Images/Generic/PagingLeftInactive.png);
}

a.DisabledNext {
	bsackground-image:url(../Images/Generic/PagingNextInactive.png);
}


/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(../Images/Generic/PagingRightActive.png);
	clear:right;	
}

/*********** navigator ***********/


/* position and dimensions of the navigator */
div.navi {
	width:480px;
	display: none;
 padding:0px 0px 0px 20px;
 text-align:center;
 float: left;
 bottom:0px;
left:18px;
overflow: hidden;

}


/* items inside navigator */
div.navi a {
	width:8px;
	height:8px;
 display:inline-block;
	margin:3px;
	background:url(../Images/Generic/navigator.png) 0 0 no-repeat;     
	cursor:pointer;	
	overflow: hidden;
}

/* mouseover state */
div.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
div.navi a.active {
background-position:0 -16px;     
} 	

.TeamMembers div.scrollable {
width: 730px;	 
height:45px;	
}

#layout .MainGallery  div.scrollable{
height:167px;	
width:765px;
margin-left:10px;
*margin-left:5px;
float:left;
}

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

/* custom positioning for navigational links */

#layout .MainGallery  a.prev{
top:60px;
left: -12px;
*left: -18px;
}

#layout .MainGallery  a.next{
top:60px;
}

a.prev{
position: absolute;
top: 0px;
left: 0px;
}

 a.next {
 position: absolute;
 top: 0px;
 right: 0px;
}


/* single item */
.TeamMembers #thumbs div.Thumb{
float:left;
color:#333;
cursor:pointer;
height: 46px;
width: 45px;
padding: 2px 5px 5px 5px;
margin:0 0 0 0px;
}
#layout .MainGallery #thumbs div.Thumb{
cursor:pointer;
height: 169px;
width: 154px;
margin:0px;
padding:0px;
text-align:left;
overflow:hidden;
position:relative;
float:left;
}
#layout .MainGallery #thumbs div.Thumb img{
float:left;
display:block;
}
/*For arabic Part if need to upload more Video just delet this style block , it will act same as image gallery*/
.ArabiCss #layout .MainGallery{
margin:0px 5px 0px 0px;
}
.ArabiCss #layout .ImageGallery{
margin: 10px 0 0 0;
padding-right:10px;
}
.ArabiCss #layout .MainGallery  div.scrollable{
margin-left:15px;
*margin-left:5px;
}
.ArabiCss #layout .MainGallery #thumbs div.Thumb{
float:right;
padding:0px;
}
.ArabiCss .TeamMembers #thumbs div.Thumb{
float:right;
color:#333;
cursor:pointer;
height: 46px;
width: 52px;
margin:0 0 0 0px;
}
/* styele ends*/
#thumbs div.Thumb  a img{
filter:alpha(opacity=50);-moz-opacity:.50;opacity:.5;
}

.PartnersHold #thumbs div.Thumb  a img{
filter:alpha(opacity=1000);-moz-opacity:1;opacity:1;
}
.PartnersHold #thumbs div.Thumb{
padding: 2px 5px 5px 5px;
width:56px;
}

#thumbs div.Thumb  a:hover img,#thumbs div.active  a img{
filter:alpha(opacity=100);-moz-opacity:1;opacity:1;
}

#thumbs div.Thumb  a.Disabled img{
filter:alpha(opacity=10);-moz-opacity:.10;opacity:.1;
cursor: default;
}

#thumbs div.Thumb  a.Disabled:hover{
cursor: default;
}

#thumbs div.Thumb  a.Disabled:hover img{
filter:alpha(opacity=10);-moz-opacity:.10;opacity:.1;
cursor: default;
}

#thumbs div.Thumb  a.Disabled{
display: block;
width: 149px;
height: 169px;
background: #ddd;
background-image: url(../Images/Background/RestrictedAccess.gif?d);
background-position: 0px 0px;
background-repeat: no-repeat;

}

.VideoInfo{
padding: 10px 0 0 0;
}

.VideoInfo strong{
 color:#2B7D89;
	font-size: 12px;
}

/* style when mouse is over the item */
#thumbs div.hover {
	
}

/* style when element is active (clicked) */
#thumbs div.active {
background-image: url(../Images/Background/ThumbHighlighted.gif?d);
background-position: 3px 0px;
background-repeat: no-repeat;
}
.PartnersHold #thumbs div.active{
background-image: url(../Images/Background/ThumbHighlighted2.gif?d);
background-position:top left;
}
#layout .MainGallery #thumbs div.active{
background:none;
}

#thumbs h3, #thumbs p, #thumbs span {

	font-size:11px;
	color:#9B9B9B;
}

#thumbs h3 em {
	font-style:normal;
 color:#9B9B9B;
}

#thumbs div.active h3{
color: #333;
}

.MainGallery  a.next,.MainGallery  a.nextPage {
	background-image:url(../Images/Generic/GalleryRightActive.png);
	clear:right;	
}

.MainGallery a.prev,.MainGallery a.prevPage {
	background:url(../Images/Generic/GalleryLeftActive.png) no-repeat;
}