/*///////////////////////////////////////////////////////////////////////////
Video
///////////////////////////////////////////////////////////////////////////*/
body{ width: 100%; height: 100%;}
#content { width: 100%; }
#content-container { height: 100%;}
.control * {position:relative;}


/* video container */
.videoContainer{
	width:600px;
	height:350px;
	position:relative;
	overflow:hidden;
	background:#000;
	color:#ccc;
}

/*** VIDEO CONTROLS CSS ***/
/* control holder */

.control{
	color:#ccc;
	position:absolute;
	bottom: 12px;
	left:0;
	width:100%;
	z-index:5;
	display:none;
}

.control div.btn {
	float:left;
	cursor:pointer;
}
.control div.text{
	font-size:14px;
	font-weight:bold;
	line-height:30px;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	width:20px;
	border:none;
	color:#777;
}
.control div.btnPlay { 
	background: rgba(69, 68, 70, 0.35) url(../img/control.png) no-repeat 0 0;
	height: 31px;
	width: 48px;
	left: 12px;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
.control div.btnPlay:hover { background-color: #000  }
.control div.paused { 
	background: rgba(69, 68, 70, 0.35) url(../img/control.png) no-repeat 0 -30px;
	height: 31px;
	width: 48px;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

/* PROGRESS BAR CSS */
/* Progress bar */
.progress {
	position: absolute!important;
	top: 3px;
	left: 70px;
	right: 105px;
	
	height:3px;
	cursor:pointer;
	
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	
	padding: 11px 50px 11px 9px;
	/*padding: 11px 0;*/
	
	background: rgba(69, 68, 70, 0.35);
}

#video-container .progress{
	padding: 11px 70px 11px 9px;
}

#modal-content .time-left{
	position:relative;
	float:right;
	margin-top:-12px;
	margin-right:-40px;
	
	font-family: 'GlyphaLTStdRegular';
	font-size: 11px;
	color:#fff;
}

#video-container .time-left{
	position:relative;
	float:right;
	margin-top:-12px;
	margin-right:-40px;
	
	font-family: 'GlyphaLTStdRegular';
	font-size: 11px;
	color:#fff;
}

.fullscreen-btn{
	position:relative;
	float:right;
	margin-top:-13px;
	margin-right:-63px;
}

#modal-content .progress {
	right: 10px;
}

.gallery .control { bottom: 0 }

.gallery .progress { right: 0; left: 58px}

.gallery .btnPlay { left: 0 !important}

.timeBar, .bufferBar {
	height:3px;
	position:relative;
	
	display:block;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}
.timeBar{
	top: -3px;
	width:0;
	z-index: 10;
	background: #FFF;
}
.bufferBar{
	height:3px;
	width:0;
	z-index:5;
	background: rgba(255, 255, 255, 0.36);
}

/* OTHERS CSS */
/* video screen cover */
.loading, #init{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../img/loading.gif) no-repeat 50% 50%;
	z-index:2;
	display:none;
}
#init{
	background:url(../img/bigplay.png) no-repeat 50% 50% !important;
	cursor:pointer;
}

/* hightlight */

.highlightBar { z-index: 15 }

.highlight {
	width: 7px;
	height: 7px;
	z-index:100;
	display: block;
	position: absolute;
}

.highlight-node {
	background-color: #FFD00E;
	opacity: 0.7;
	width: 7px;
	height: 7px;
	position:absolute;
	top: -2px;
	
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	
	border-width: 0;
	border-color: #FFD00E;
	border-style: solid;
}

.highlight-copy {
	position: absolute;
	top: -50px;
	margin-left: -6px;
	display: none;
	padding: 10px;
	z-index: 100;
	
	color: #FFF;
	font-size:14px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	white-space:nowrap;
	text-align:center;
	
	background: rgb(108,108,103); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(108,108,103,1) 0%, rgba(50,48,43,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(108,108,103,1)), color-stop(100%,rgba(50,48,43,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(108,108,103,1) 0%,rgba(50,48,43,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(108,108,103,1) 0%,rgba(50,48,43,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(108,108,103,1) 0%,rgba(50,48,43,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(108,108,103,1) 0%,rgba(50,48,43,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c6c67', endColorstr='#32302b',GradientType=0 ); /* IE6-9 */
}

.item-container .highlight-copy{
	top: -25px;
	left: 50%;
}

.highlight-copy img{
	position: absolute;
	bottom: -8px;
	left: 50%;
	margin-left: -8px;
}

.timelineShare {
	font-family: 'GlyphaLTStdBold';
	font-size: 14px;
	color: #FFF;
	background: rgba(69, 68, 70, 0.35);
	
	position: absolute;
	top: 3px;
	right:10px;
	width: 65px;
	
	padding: 4px 9px;
	
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

.timelineShare span {
	padding-right: 16px;
	background: url(../img/share-arrow.png) no-repeat right 4px;
}

.timelineShare:hover span {
	background: url(../img/share-arrow-hover.jpg) no-repeat right 4px;
}

.timelineShare span:hover { cursor:pointer }

#timelineShare-left { float: left; padding-bottom: 5px; display: none; }

#timelineShare-right { float: right; padding-bottom: 5px; display: none; }

.timelineShare .social-btn{
	position: relative;
	width: 28px;
	height: 29px;
	padding: 4px 0;
}

.timelineShare .social-btn a{ display: block }