/*
CSS for VLT Custom Video Player
Author: Mohd Farhan bin Nor
Version: 1.0
Credits: Daniel Stern - http://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
*/

	#vltVideoWrapper {
		width: 100%;
		height: 331px;
		background-color: #000;
		margin: 6px auto;
		position: relative;
	}

	video#vltVideoElement {
		width: 99.9%;
		height: 270px;
		display: block;
		margin: 0 auto;
	}

	.videoWrapperActive .videoTitle ,  .videoWrapperInactive .videoTitle, .vltVideoLoading .videoTitle{
		display: none;
	}
	
	.videoWrapperInactive .controlContainer , .vltVideoLoading .controlContainer{
		visibility: hidden;
	}
	
	.videoWrapperActive:hover   .videoTitle {
		/*display: block;*/
	}

	.vltVideoLoading {
		background: #000 url('https://vlt-gst.s3.amazonaws.com/img/awanivplayer/loading.png') center center no-repeat;
	}	


	.videoTitle {
		background-color: #000;
		color: #FFF;
		font-size: 13px;
		font-family: Arial, sans-serif;
		width: 100%;
		padding: 3px 1%;
		position: absolute;
		top: 0;
		left: 0;
		text-align: left;
		z-index: 1;
	}

	.controlContainer {
		width:100%;
		background-color: #000;
		/*position: absolute;*/
		/*bottom: 0;*/
		text-align: left;
		font-size: 12px;
		font-family: Arial, sans-serif;
		/*padding-bottom: 8px;*/
		height: 61px;
	}

	.controlContainer #seekbar {
		width: 100%;
		position: relative;
		margin: 0;
		padding: 0;
	}

	.controlContainer #fader {
		width: 100%;
		z-index: 1;
		position: relative;
		margin: 0;
	}

	.controlContainer button {
		display: inline-block;
		height: 30px;
		width: 30px;
		margin: 0 2px;
		background-repeat: no-repeat;
		background-color: transparent;
		border: none;
		background-image: url(https://vlt-gst.s3.amazonaws.com/img/awanivplayer/awani_controls.png);
		cursor: pointer;
		vertical-align: middle;
	}

	.controlContainer button.buttonplay {
		background-position: 0 0;
		margin: 0 0 0 23px;
	}
	
	.controlContainer button.buttonplay:hover {
		background-position: 0 -40px;
	}	

	.controlContainer button.buttonpause {
		background-position: -180px 0;
		margin: 0 0 0 23px;
	}
	
	.controlContainer button.buttonpause:hover {
		background-position: -180px -40px;
	}	

	.controlContainer button.muteno {
		background-position: -219px 0;
		margin: 0 5px 0 20px;
	}
	
	.controlContainer button.muteno:hover {
		background-position: -219px -40px;
	}	

	.controlContainer button.muteyes {
		background-position: -36px 0;
		margin: 0 5px 0 20px;
	}
	
	.controlContainer button.muteyes:hover {
		background-position: -36px -40px;
	}	

	.controlContainer .fullscreen {
		background-position: -105px 0;
		float: right;
		margin: 0 5px;
	}
	
	.controlContainer .fullscreen:hover {
		background-position: -105px -40px;
	}	

	.controlContainer .volumeBox {
		display: inline-block;
		width: 120px;
		vertical-align: middle;
	}

	.controlContainer .duration {
		display: inline-block;
		padding: 0 5px;
		color: #FFF;
		vertical-align: middle;
	}

	.controlContainer .resolution {
		display: block;
		float: right;
		margin: 0 5px;
		width: 77px;
		position: relative;
		height: 30px;
	}
	
	.controlContainer .resolution select {
		display: none;
	}
	
	.controlContainer .resolution a.ddPlaceholder {
		style: display: block;
		background: #000 url('https://vlt-gst.s3.amazonaws.com/img/awanivplayer/dropdownbg.png') 57px 12px no-repeat;
		width: 100%;
		height: 30px;
		line-height: 30px;
		text-align: center;
		position: relative;
		display: block;
		color: #FFF;
		cursor: pointer;
		text-decoration: none;
	}
	
	.controlContainer .resolution ul {
		list-style-type: none;
		background-color: #000;
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		margin: 0;
		padding: 5px 0;
		z-index: 2;
		display: none;
	}
	
	.controlContainer .resolution ul.shown {
		display: block;
	}
	
	.controlContainer .resolution ul li {
		display: block;
		height: 30px;
		width: 100%;
		line-height: 30px;
		text-align: center;
	}
	
	.controlContainer .resolution ul li a {
		color: #4b4b4b;
		text-decoration: none;
		cursor: pointer;
	}
	
	.controlContainer .resolution ul li:last-child {
		background: transparent url('https://vlt-gst.s3.amazonaws.com/img/awanivplayer/dropdownbg.png') 57px 12px no-repeat;
	}
	
	.controlContainer .resolution ul li a:hover, .controlContainer .resolution ul li a.curreso {
		color: #FFF;
	}

	.controlContainer input[type=range] {
	  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
	  width: 100%; /* Specific width is required for Firefox. */
	  margin: 0;
	  padding: 0;
	}

	.controlContainer input[type=range]::-webkit-slider-thumb {
	  -webkit-appearance: none;
	}

	.controlContainer input[type=range]:focus {
	  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
	}

	.controlContainer input[type=range]::-ms-track {
	  width: 100%;
	  cursor: pointer;
	  background: transparent; /* Hides the slider so custom styles can be added */
	  border-color: transparent;
	  color: transparent;
	  padding: 0;
	  margin: 0;
	  display: block;
	}

	/* Special styling for WebKit/Blink */
	.controlContainer .seekbar input[type=range]::-webkit-slider-thumb {
	  -webkit-appearance: none;
	  border: none;
	  height: 30px;
	  width: 30px;
	  border-radius: 3px;
	  background: transparent url('https://vlt-gst.s3.amazonaws.com/img/awanivplayer/awani_controls.png') -70px 0 no-repeat;
	  cursor: pointer;
	  margin-top: -10px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
	}

	/* All the same stuff for Firefox */
	.controlContainer .seekbar input[type=range]::-moz-range-thumb {
	  border: none;
	  height: 30px;
	  width: 30px;
	  border-radius: 3px;
	  background: transparent url('https://vlt-gst.s3.amazonaws.com/img/awanivplayer/awani_controls.png') -70px 0 no-repeat;
	  cursor: pointer;
	}

	/* All the same stuff for IE */
	.controlContainer .seekbar input[type=range]::-ms-thumb {
	  border: none;
	  height: 30px;
	  width: 30px;
	  border-radius: 3px;
	  background: transparent url('https://vlt-gst.s3.amazonaws.com/img/awanivplayer/awani_controls.png') -70px 0 no-repeat;
	  cursor: pointer;
	  margin: 0;
	  padding: 0;
	}

	/* Special styling for WebKit/Blink */
	.controlContainer .volumeBox input[type=range]::-webkit-slider-thumb {
	  -webkit-appearance: none;
	  border: none;
	  height: 30px;
	  width: 18px;
	  background: transparent url('https://vlt-gst.s3.amazonaws.com/img/awanivplayer/awani_controls.png') -72px 0 no-repeat;
	  cursor: pointer;
	  margin-top: -12px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
	}

	/* All the same stuff for Firefox */
	.controlContainer .volumeBox input[type=range]::-moz-range-thumb {
	  border: none;
	  height: 30px;
	  width: 18px;
	  background: transparent url('https://vlt-gst.s3.amazonaws.com/img/awanivplayer/awani_controls.png') -72px 0 no-repeat;
	  cursor: pointer;
	}

	/* All the same stuff for IE */
	.controlContainer .volumeBox input[type=range]::-ms-thumb {
	  border: none;
	  height: 30px;
	  width: 18px;
	  background: transparent url('https://vlt-gst.s3.amazonaws.com/img/awanivplayer/awani_controls.png') -72px 0 no-repeat;
	  cursor: pointer;
	}

	input[type=range]::-webkit-slider-runnable-track {
	  width: 100%;
	  height: 8.4px;
	  cursor: pointer;
	  background: #f9a116;
	}

	input[type=range]:focus::-webkit-slider-runnable-track {
	  background: #f9a116;
	}

	input[type=range]::-moz-range-track {
	  width: 100%;
	  height: 8.4px;
	  cursor: pointer;
	  background: #f9a116;
	}

	input[type=range]::-ms-track {
	  width: 100%;
	  height: 8.4px;
	  cursor: pointer;
	  background: transparent;
	  border-color: transparent;
	  color: transparent;
	  margin: 0;
	  padding: 0;
	}
	input[type=range]::-ms-fill-lower {
	  background: #f9a116;
	}
	input[type=range]:focus::-ms-fill-lower {
	  background: #f9a116;
	}
	input[type=range]::-ms-fill-upper {
	  background: #adadad;
	}
	input[type=range]:focus::-ms-fill-upper {
	  background: #adadad;
	}	
	
	/*volume*/
	.controlContainer .volumeBox input[type=range]::-webkit-slider-runnable-track {
	  height: 5px;
	}

	.controlContainer .volumeBox input[type=range]::-moz-range-track {
	  height: 5px;
	}

	.controlContainer .volumeBox input[type=range]::-ms-track {
	  height: 5px;
	}	
	
	/*styling for track ads*/
	.seekbarAds input[type=range]::-webkit-slider-runnable-track {
	  background: #f9a116;
	}

	.seekbarAds input[type=range]:focus::-webkit-slider-runnable-track {
	  background: #f9a116;
	}	
	
	.seekbarAds input[type=range]::-moz-range-track {
	  background: #f9a116;
	}

	.seekbarAds input[type=range]::-ms-fill-lower {
	  background: #fff;
	}
	.seekbarAds input[type=range]:focus::-ms-fill-lower {
	  background: #fff;
	}
	.seekbarAds input[type=range]::-ms-fill-upper {
	  background: #adadad;
	}
	.seekbarAds input[type=range]:focus::-ms-fill-upper {
	  background: #adadad;
	}		
	
	.browserIsMobile .volumeBox, .browserIsMobile  .muteno, .browserIsMobile  .muteyes, .browserIsMobile  .fullscreen {
		display: none;
	}

	#vltVideoWrapper .startButton {
		font-size: 14px;
		padding: 3px;
		background: #000 url('https://vlt-gst.s3.amazonaws.com/img/awanivplayer/play_button.png') center center no-repeat;
		opacity: 0.4;
		width: 100%;
		height: 100%;
		border: none;
		padding: 0;
		z-index: 2;
		top: 0;
		position: absolute;
		left: 0;
		display: none;
		cursor: pointer;
	}
	
	@media (max-width: 720px) {
		.controlContainer .volumeBox, .controlContainer  .muteno, .controlContainer  .muteyes, .controlContainer  .fullscreen {
			display: none;
		}		
	}