﻿#mediaContainer {
	margin:0px 0px 10px -6px;
	float:left;
	overflow:hidden;
}
img { border:0px; }
#largeImageContainer, #largeVideoContainer {
	position:relative;
	height:430px;
	width:650px;
	text-align: center;
	border: 1px solid #ccc;
	display: table-cell;
	vertical-align: middle;
	background-color:#202020;
	float:left;
}
#largeImageContainer div.imgHolder {
	position:absolute;
	height:430px;
	width:650px;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	float:left;
	top:0px;
	left:0px;
	overflow:hidden;
}
.loadingImage {
	position:absolute;
	top: 209px; /* height of #largeImageContainer minus the height of this bg image divided by 2 */
	left: 317px; /* width of #largeImageContainer minus width of this bg image divided by 2 */
	z-index:50;
	width: 16px;
	height: 11px;
	background: url(/images/38-1.gif) no-repeat;
}

.clear { clear:both; }
.pagingContainer {
	width: 650px;
	float:left;
}
.prev { 
	float:left;
	width: 150px;
}
.next {
	float:right;
	width: 150px;
	text-align:right;
}
.count {
	float:left;
	width: 350px;
	text-align:center;
}
.pagingContainer .inactive {
	visibility:hidden;
}
.pagingContainer .active {
	cursor: pointer;
	color: #000;
}
.pagingContainer .hundredPercent {
	width:100%;
}
.media {
	border: 1px solid #beb9c0;
	
}
.thumbnailContainer {
	float:left;
	width:650px;
	height:120px !important;
}
.thumbnailContainer ul { 
	margin: 0px; 
	display: inline;
	padding:0px;
	float:left;
}
.thumbnailContainer ul li {
	list-style: none;
	/* float: left; */
	padding: 6px;
	display:table-cell;
	vertical-align:top;
}
.thumbContainer {
	border: 3px solid #fff;
	position: relative;
	background-color:#fff;
	display:table-cell;
	height:95px !important;
	text-align:center;
	vertical-align:middle;
	width:144px;
	overflow:hidden;
}
.thumbContainer img {
	max-width:144px;
	max-height:95px;
}
.thumbContainer img.playIcon {
	position:absolute;
	width:47px;
	height:47px;
	left:48px;
	top:10px;
	display:none;
}
.thumbContainer .thumbLoading {
	position:absolute;
	width:16px;
	height:11px;
	left:64px;
	top:42px;
}
.thumbContainerActive{
	border: 3px solid #48464b;
	background-color:#48464B;
}
.thumbContainer a {
	width:100%;
	position:relative;
	float:left;
}
.caption, .categoryContainer, .thumbnailContainer, .pagingContainer, .captionContainer {
	clear:both;
}
.thumbCaptionContainer {
	color:#fff;
	background-color:#000;
	position:absolute;
	bottom: 0px;
	left:0px;
	width:100%;
	height:30px;
	opacity:0.8;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}	
.thumbCaption {
	padding:3px;
	font-size:10px;
	line-height:12px;
	text-align:left;
}
#mediaTabs ul { display:none; }
.captionContainer {
	display:none;
	width:100%;
	height:60px;
	background-color:#000;
	/*
	position:absolute;
	bottom:0px;
	left:0px;
	*/
	z-index:555;
	text-align:left;
	opacity:0.8;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
#videoGalleryContainer .captionContainer {
	min-height:60px;
	height:auto;
}
.caption {
	color:#fff;
	font-size:12px;
	padding:6px;
	width:600px;
}
#viewLarger { 
	width:22px;
	height:21px;
	background:url(/images/icon_viewLarger.gif) no-repeat;
	display:none;
	position:absolute;
	z-index:556;
	bottom:0px;
	right:0px;
	cursor:pointer;
	border:1px solid #eee;
}
.categoryContainer {
	margin: 10px 0px;
	float:left;
}
.categoryContainer select {
	min-width:215px;
}

.panes div.galleryContainer {
	/* display:none; */		
	/* padding:15px 10px; */
	/* height:100px;*/
}
/* root element for tabs  */
ul.mediaTabs { 
	list-style:none; 
	margin:0 !important; 
	padding:0;	
	height:30px;
}

/* single tab */
ul.mediaTabs li { 
	float:left;	 
	text-indent:0;
	padding:0;
	margin:0 !important;
	list-style-image:none !important; 
}

/* link inside the tab. uses a background image */
ul.mediaTabs a { 
	background: url(/images/tab.png) no-repeat 0px -31px;
	font-size:11px;
	display:block;
	height: 31px;  
	line-height:31px;
	width: 95px;
	text-align:center;	
	text-decoration:none;
	color:#333;
	padding:0px;
	margin:0px;	
	position:relative;
	top:1px;
	background-color:#fff;
	cursor:pointer;
}

ul.mediaTabs a:active {
	outline:none;		
}

/* when mouse enters the tab move the background image */
ul.mediaTabs a:hover {
	background-position: 0px 0px;	
	color:#fff;	
}

/* active tab uses a class name "current". its highlight is also done by moving the background image. */
ul.mediaTabs a.current, ul.mediaTabs a.current:hover, ul.mediaTabs li.current a {
	background-position: 0px 0px;		
	cursor:default !important; 
	color:#000 !important;
}
