#Player {
	width: 640px; height: 384px; 
	display: block; 
	background: black url(<?php echo $this->movie->getScreenshot()->getUrl(); ?>) no-repeat center center
}
#PlayerExtra { position: relative; }
	#Captions {
		position: absolute; left: 105px; top: 2px;
		width: 150px; height: 20px;
	}
		#Captions * {
			float: left;
			font-size: 10px;
		}
	#AddThis { position: absolute; left: 346px; top: 2px; }
	#at15s { top: 559px !important; }	/* addthis - popup 1 */
	#at16pcc { left: 333px !important; } /* addthis - popup 2 */
	#EmbedCode {
		position: absolute; left: 0px; top: -34px; z-index: 1000;
		width: 630px; height: 60px;
		background: white;
		display: none;
		font-size: 11px;
	}
		#EmbedCode textarea {
			width: 580px; height: 24px;
			font-family: "Courier New", Courier, monospace; font-size: 10px;
			border: none;
			background: #a0b7c5;
			color: white;
			overflow: hidden;
		}
	#Icons {
		position: absolute; z-index: 1001;
		right: 14px;
		width: 25px; height: 18px;
	}
		#Icons a {
			background: url('/_img/icon_code.gif') no-repeat;
			width: 25px; height: 18px;
			display: inline-block;
		}
			#Icons .embed { margin-right: 3px; }
				#Icons .embed:hover { background-position: 0px -18px; }
				

div.controller {
	position:relative;
	height:35px; width:625px;
	background:#f6f6f6;
	margin: 7px 0 0 14px;
}

	/* play/pause button */
	div.controller a.play, div.controller a.pause { 
		position:absolute;
		width: 36px; height: 34px;
		display:block;
		cursor:pointer;
		background: url(../_img/play_buttons.gif) no-repeat;
	}
	
		div.controller a.play { background-position: 0px 0px; }
		div.controller a.play:hover { background-position: 0px -34px; }
		div.controller a.pause { background-position: 0px -68px; }
		div.controller a.pause:hover { background-position: 0px -102px;	}
	
	/* the timeline (or "scrubber")  */
	div.controller div.track {  
		position:absolute; left: 91px; top: 14px;
		cursor:pointer;
		width:366px; height:6px;
		background: url(../_img/timeline_bg.png) repeat-x;
	}

		/* the draggable playhead */
		div.controller div.playhead {
			position:absolute; top: -5px; left: -7px; z-index: 12;
			cursor:pointer; 
			width:19px; height:20px;
			background: url(../_img/timeline_bullet.png) center no-repeat;
		}
		
			div.controller div.playhead:hover { background-image: url(../_img/timeline_bullet_hover.png) }
		
		div.controller div.mask {
			position: absolute; left: 47;
			width:366px; height: 6px;
			background: url(../_img/timeline_mask.png) no-repeat;
			z-index: 11;
		}

		/* buffer- and progress bars. upon runtime the width of these elements grows */
		div.controller div.progress, div.controller div.buffer {	
			position:absolute; z-index:10;
			background-color:#a0b8c5;
			width:0px; height:6px;
		}

		/*
		div.controller div.buffer {
			background-color:#fff;
			opacity:0.1;
			filter: alpha(opacity=10);
		}
		*/

		div.buffer { display: none; }
		
	div.controller .time, div.controller .duration {
		position:absolute; top: 9px;
		color: #666;
		font-family: 'Lucida Grande','Lucida Sans',Verdana,sans-serif; font-size: 10px;
	}
	
	div.controller .time { left: 54px; }
	div.controller .duration { left: 468px; }
	
	#Speaker, #Speaker:hover, #Speaker.mute { background-image: url(../_img/volume_graphic.png); background-repeat: no-repeat; }
	
	#Speaker {
		position: absolute; left: 516px; top: 11px;
		width: 7px; height: 13px;
		background-position: 0px -62px;
	}
	
		#Speaker.mute { background-position: 0px -34px; }
		#Speaker:hover { background-position: 0px -48px; }

	#Volume {
		position: absolute; left: 531px; top: 14px;
		cursor:pointer;
		width:81px; height:6px;
		background: url(../_img/timeline_bg.png) repeat-x left top;
	}
	
		#Volume #MaskLeft, #Volume #MaskRight {
			position: absolute;
			background: url(../_img/timeline_mask.png) no-repeat;
			height: 6px; width: 1px; 
		}
			#Volume #MaskLeft { left: 0px; z-index: 2; }
			#Volume #MaskRight { right: 0px; }
	
		#Volume .ui-slider-range { background-color: #a0b8c5; }
		
		#Volume .ui-slider-handle {
			width:21px; height:17px;
			background: url(../_img/volume_graphic.png) 4px 0 no-repeat;
			top: -4px;
		}
			
			#Volume .ui-slider-handle:hover { background-position: 4px -17px; }
			#Volume .ui-slider-handle:focus { outline: none; }