/** play and pause button styles **/
body {
  height: 100%;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  padding: 0px;
  margin: 0px;
  text-align: center;
  background-color: black; /* #f6f6f6 Telia's standard-bakgrundsfärg */
  overflow: hidden; /* Viktigt så att inte iframen ska skrolla */
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  cursor: default; /* and that we don't have a text cursor when hovering text */
}

body:hover #controls-wrapper {
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-o-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
}

body:hover #extras-wrapper {
	opacity: 1;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-o-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
}

.imagepreload { 
	display: none; 
}

video {
	left: 0px;
	width: 100%;
   	height: 100%;
   	background: black;
}

video.hidden {
	opacity: 0;
}

video.showing {
	z-index: 0;
	opacity: 1;
}

#video-wrapper {
	position:absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: black; /* #f6f6f6; */
}

#controls-wrapper {
	position:absolute;
	left: 0;
	right: 0;
	bottom: 0;

	pointer-events: all;
	
	height:40px;	  
	background: transparent; /* fallback if gradients aren't supported */
	background-size: 8px 40px;
	background-image: url(images/controller_bg.png);

	z-index: 2; 	
	opacity: 0;
		
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-o-transform: translateY(100%);
	-ms-transform: translateY(100%);
	transform: translateY(100%);
	
	-webkit-transition-property: opacity -webkit-transform;
	-webkit-transition-duration: 0.5s;
	
	-moz-transition-property: opacity -moz-transform;
	-moz-transition-duration: 0.5s;

/*	-ms-transition-property: opacity -ms-transform;
	-ms-transition-duration: 0.5s; */

	-o-transition-property: opacity;
	-o-transition-duration: 0.5s;
	
	transition-property: opacity;
	transition-duration: 0.5s;
}


@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#controls-wrapper {
		background-image: url(images/controller_bg@2x.png);
	}
}

#controls-wrapper.showing {
	opacity: 1.0;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-o-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
}

#controls-wrapper.hidden {
	opacity: 0;
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-o-transform: translateY(100%);
	-ms-transform: translateY(100%);
	transform: translateY(100%);
} 

#scrubber-wrapper {
	position:absolute;
	top: 7px;
	left: 40px;
	height: 26px;
	right: 40px; /* 160px when volume is available */
}

#scrubber-wrapper-left {
	position:absolute;
	top: 0px;
	left: 0px;
	height:26px;
	width: 10px;
	background-size: 10px 26px;
	background-image: url(images/qtslider-left.png);
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#scrubber-wrapper-left {
		background-image: url(images/qtslider-left@2x.png);
	}
}

#scrubber-wrapper-middle {
	position:absolute;
	top: 0px;
	left: 10px;
	right: 70px;
	height: 26px;
	background-size: 10px 26px;
	background-image: url(images/qtslider-center.png);
	cursor: pointer;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#scrubber-wrapper-middle {
		background-image: url(images/qtslider-center@2x.png);
	}
}

#scrubber-wrapper-right {
	position:absolute;
	top: 0px;
	right: 60px;
	height:26px;
	width: 10px;
	background-size: 10px 26px;
	background-image: url(images/qtslider-right.png);
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#scrubber-wrapper-right {
		background-image: url(images/qtslider-right@2x.png);
	}
}

#scrubber-wrapper-right.loaded {
	background-size: 10px 26px;
	background-image: url(images/qtsliderloaded-right.png);
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#scrubber-wrapper-right.loaded {
		background-image: url(images/qtsliderloaded-right@2x.png);
	}
}

#timeElapsed {
	position: absolute;
	top: 5px;
	right: 0px;
	text-align: center;
	color: white;
	font-size: 13px;
	height: 15px;
	width: 52px;
	-moz-user-select: none;
  	-webkit-user-select: none;
  	cursor: default;
}

@-moz-keyframes top10 {
    from { background-position: 0 50%; }
    to { background-position: 100% 50%; }
}

@-webkit-keyframes top10 {
    from { background-position: 0 50%; }
    to { background-position: 100% 50%; }
}

#loading-progress.preloading {
	-moz-animation: top10 10s linear infinite;
    -webkit-animation: top10 10s linear infinite;
    
	background-image: -moz-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.25) 10px, rgba(255,255,255,.25) 16px), -moz-linear-gradient(#FFA1A1, #FF4B4B);
    background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 5px, #8e65a7 5px, #8e65a7 10px) , -webkit-linear-gradient(white, #b295c2);
	background-size: 10% 100%;

	width: 100%;
}

#loading-progress {
	position: absolute;
	top: 8px;
	width: 0%;
	height:10px;
	background-size: 10px 10px;
	background-image: url(images/qtsliderloaded-center.png);
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#loading-progress {
		background-image: url(images/qtsliderloaded-center@2x.png);
	}
}

#playing-progress {
	position: absolute;
	top: 8px;
	width: 0%;
	height:10px;
	background-size: 10px 10px;
	background-image: url(images/qtsliderplaying-center.png);
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#playing-progress {
		background-image: url(images/qtsliderplaying-center@2x.png);
	}
}

#thumb {
	position:absolute;
	top: 5px;
	left: 0%;
	width: 16px;
	height: 16px;
	margin-left: -8px;
	background-size: 16px 16px;
	background-image: url(images/sliderKnob.png);
	cursor: pointer;
	z-index: 3;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#thumb {
		background-image: url(images/sliderKnob@2x.png);
	}
}

#volume-wrapper {
	position:absolute;
	top: 0px;
	right: 40px;
	width: 108px;
	height: 40px;
}

#volume-bar-left {
	position: absolute;
	top: 7px;
	left: 0px;
	width: 10px;
	height: 26px;
	background-size: 10px 26px;
	background-image: url(images/volslider-left.png);
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#volume-bar-left {
		background-image: url(images/volslider-left@2x.png);
	}
}

#volume-bar-middle {
	position: absolute;
	top: 7px;
	left: 10px;
	right: 50px;
	height: 26px;
	background-size: 10px 26px;
	background-image: url(images/volslider-center.png);
	cursor: pointer;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#volume-bar-middle {
		background-image: url(images/volslider-center@2x.png);
	}
}

#volume-bar-right {
	position: absolute;
	top: 7px;
	right: 40px;
	width: 10px;
	height: 26px;
	background-size: 10px 26px;
	background-image: url(images/volslider-right.png);
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#volume-bar-right {
		background-image: url(images/volslider-right@2x.png);
	}
}

#volume-fill {
	position: absolute;
	width: 0%;
	height: 10px;
	top: 8px;
	background-size: 10px 10px;
	background-image: url(images/qtsliderplaying-center.png);
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#volume-fill {
		background-image: url(images/qtsliderplaying-center@2x.png);
	}
}

#volume-thumb {
	position:absolute;
	top: 5px;
	left: 0%;
	width: 16px;
	height: 16px;
	margin-left: -8px;
	background-size: 16px 16px;
	background-image: url(images/sliderKnob.png);
	cursor: pointer;
	z-index: 3;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#volume-thumb {
		background-image: url(images/sliderKnob@2x.png);
	}
}

#btnVolume {
	background-position: center center;
	height: 32px;
	width: 32px;
	background-size: 32px 32px;
	background-image: url(images/volume_32.png);
	top: 4px;
	right: 0px;
	position: absolute;
	cursor: pointer;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#btnVolume {
		background-image: url(images/volume_32@2x.png);
	}
}

#btnVolume:hover {
	background-size: 32px 32px;
	background-image: url(images/volume_32_gray.png);
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#btnVolume:hover {
		background-image: url(images/volume_32_gray@2x.png);
	}
}

#btnVolume.muted {
	background-size: 32px 32px;
	background-image: url(images/volume_32_mute.png);
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#btnVolume.muted {
		background-image: url(images/volume_32_mute@2x.png);
	}
}

#btnVolume.muted:hover {
	background-size: 32px 32px;
	background-image: url(images/volume_32_mute_gray.png);
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#btnVolume.muted:hover {
		background-image: url(images/volume_32_mute_gray@2x.png);
	}
}

/** status states **/
#status {
  	position: absolute;
  	top: 50%;
  	margin-top: -68px; /* 48 for half the div and 20 for half the footer height */
  	left: 50%;
  	margin-left: -48px;
  	width: 96px;
  	height: 92px;
  	z-index: 2;  /* on top of the overlay */
	background-size: 96px 96px;
	background-image: url(images/play_96.png);
	
	-webkit-transition-property: opacity, z-index;
  	-webkit-transition-duration: 0.5s;
  	
	-moz-transition-property: opacity, z-index;
	-moz-transition-duration: 0.5s;

	-o-transition-property: opacity, z-index;
	-o-transition-duration: 0.5s;
	
	transition-property: opacity, z-index;
	transition-duration: 0.5s;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#status {
		background-image: url(images/play_96@2x.png);
	}
}

#status.clicktoplay:hover { 
	background-image: url(images/play_96_over.png); 
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#status.clicktoplay:hover {
		background-image: url(images/play_96_over@2x.png);
	}
}

#status.progress {  
	background-size: 96px 96px;
	background-image: url(images/status_64_gray.png); 
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#status.progress {
		background-image: url(images/status_64_gray@2x.png);
	}
}

#status.error:before { 
  content: url(images/status_error_64.png);
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#status.error:before {
		content: url(images/status_error_64@2x.png);
	}
}

#overlay {
	left: 0px;
	width: 100%;
   	height: 100%; 
}

/** animations to fade out the overlay image and "Click To Play" button **/
#overlay {
   	position: absolute;
   	
	-webkit-transition-property: opacity, z-index;
  	-webkit-transition-duration: 0.5s;
  	
	-moz-transition-property: opacity, z-index;
	-moz-transition-duration: 0.5s;

	-o-transition-property: opacity, z-index;
	-o-transition-duration: 0.5s;
	
	transition-property: opacity, z-index;
	transition-duration: 0.5s;
}

/** showing and hidden states **/
.showing {
  	opacity: 1;
  	z-index: 1;
}

.hidden {
  	opacity: 0;
  	z-index: -1;
}

.active {  
  background-color: #336699;
  background-size: 32px 32px;
  background-image: url(images/play_32.png);
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	.active {
		background-image: url(images/play_32@2x.png);
	}
}

/** general body and button styles **/
a {
  color:white;
  font-size: 12px;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:visited {
  color: #6699cc;
}

#btnPlayPause {
	background-position: center center;
	height: 32px;
	width: 32px;
	top: 4px;
	left: 4px;
	position: absolute;
	cursor: pointer;
}

#btnPlayPause.play {
	background-size: 32px 32px;
	background-image: url(images/play_32.png);
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#btnPlayPause.play {
		background-image: url(images/play_32@2x.png);
	}
}

#btnPlayPause.play:hover {
	background-size: 32px 32px;
	background-image: url(images/play_32_gray.png);
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#btnPlayPause.play:hover {
		background-image: url(images/play_32_gray@2x.png);
	}
}

#btnPlayPause.pause {
	background-size: 32px 32px;
	background-image: url(images/pause_32.png);
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#btnPlayPause.pause {
		background-image: url(images/pause_32@2x.png);
	}
}

#btnPlayPause.pause:hover {
	background-size: 32px 32px;
	background-image: url(images/pause_32_gray.png);
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#btnPlayPause.pause:hover {
		background-image: url(images/pause_32_gray@2x.png);
	}
}

#btnFullscreen {
	background-position: center center;
	height: 32px;
	width: 32px;
	top: 4px;
	right: 4px;
	position: absolute;
	background-size: 32px 32px;
	background-image: url(images/fullscreen_32.png);
	cursor: pointer;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#btnFullscreen {
		background-image: url(images/fullscreen_32@2x.png);
	}
}

#btnFullscreen:hover {
	background-size: 32px 32px;
	background-image: url(images/fullscreen_32_gray.png);
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#btnFullscreen:hover {
		background-image: url(images/fullscreen_32_gray@2x.png);
	}
}

#extras-wrapper {
	position: absolute;
	right: 10px;
	top: 10px;
	width: 48px;
	height: 100px;
	z-index: 3;
	opacity: 1;
	
	-webkit-transition-property: opacity, z-index;
  	-webkit-transition-duration: 0.5s;
  	
	-moz-transition-property: opacity, z-index;
	-moz-transition-duration: 0.5s;

	-o-transition-property: opacity, z-index;
	-o-transition-duration: 0.5s;
	
	transition-property: opacity, z-index;
	transition-duration: 0.5s;
}

#extras-wrapper.showing {
	opacity: 1;
}

#extras-wrapper.hidden {
	opacity: 0;
} 

#btnShare {
	background-position: center center;
	height: 48px;
	width: 48px;
	background-size: 48px 48px;
	background-image: url(images/share_48.png);
	position: relative;
	cursor: pointer;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#btnShare {
		background-image: url(images/share_48@2x.png);
	}
}

#btnShare:hover {
	background-size: 48px 48px;
	background-image: url(images/share_48_gray.png);
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#btnShare:hover {
		background-image: url(images/share_48_gray@2x.png);
	}
}

#btnDownload {
	background-position: center center;
	margin-top: 8px;
	height: 48px;
	width: 48px;
	background-size: 48px 48px;
	background-image: url(images/download_48.png);
	position: relative;
	cursor: pointer;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#btnDownload {
		background-image: url(images/download_48@2x.png);
	}
}

#btnDownload:hover {
	background-size: 48px 48px;
	background-image: url(images/download_48_gray.png);
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#btnDownload:hover {
		background-image: url(images/download_48_gray@2x.png);
	}
}

#background_overlay {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.75;
	opacity:.75;
	filter: alpha(opacity=75);
	
	-webkit-transition-property: opacity, z-index;
  	-webkit-transition-duration: 0.5s;
  	
	-moz-transition-property: opacity, z-index;
	-moz-transition-duration: 0.5s;

	-o-transition-property: opacity, z-index;
	-o-transition-duration: 0.5s;
	
	transition-property: opacity, z-index;
	transition-duration: 0.5s;
}

#background_overlay.hidden {
	z-index: -1;
	opacity: 0;
}

#background_overlay.showing {
	z-index: 1001;
	opacity: 0.75;
}

#sharebox {
	position: absolute;
	top: 10%;
	left: 10%;
	bottom: 10%;
	right: 10%;
	margin-bottom: 40px;
	border: 1px solid #dacfe2;
	background-color: white;
	z-index:1002;
	overflow: hidden;
	-webkit-box-shadow: 5px 5px 10px #333333;
	
	-webkit-transition-property: opacity, z-index;
  	-webkit-transition-duration: 0.5s;
  	
	-moz-transition-property: opacity, z-index;
	-moz-transition-duration: 0.5s;

	-o-transition-property: opacity, z-index;
	-o-transition-duration: 0.5s;
	
	transition-property: opacity, z-index;
	transition-duration: 0.5s;
}

#sharebox.hidden {
	z-index: -1;
	opacity: 0;
}

#sharebox.showing {
	z-index: 1002;
	opacity: 1;
}

#closebox {
	position: absolute;
	margin-right: -15px;
	margin-top: -12px;
	top: 10%;
	right: 10%;
	width: 31px;
	height: 32px;
	z-index: 1003;
	background-size: 32px 32px;
	background-image: url(images/closebox.png);
	
	-webkit-transition-property: opacity, z-index;
  	-webkit-transition-duration: 0.5s;
  	
	-moz-transition-property: opacity, z-index;
	-moz-transition-duration: 0.5s;

	-o-transition-property: opacity, z-index;
	-o-transition-duration: 0.5s;
	
	transition-property: opacity, z-index;
	transition-duration: 0.5s;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#closebox {
		background-image: url(images/closebox@2x.png);
	}
}

#closebox.hidden {
	z-index: -1;
	opacity: 0;
}

#closebox.showing {
	z-index: 1003;
	opacity: 1;
}

#closebox:hover {
	background-size: 31px 32px;
	background-image: url(images/closebox_pressed.png);
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	#closebox:hover {
		background-image: url(images/closebox_pressed@2x.png);
	}
}