/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */

.player {
	display:block;
	width:390px;
	height:300px;
	background-color:#000;

}

.player.wide {
	display:block;
	width:390px;
	height:220px;
	background-color:#d7d7d7;
	margin-left:15px;
}

.player.wide2 {
	display:block;
	height:220px;
	width:294px;
	background-color:#d7d7d7;
	margin-left:15px;
}

.player.small {
	width:195px;
	height:124px;
}
.player.wide {
	height:220px;
}
.player h2 {
	background:none;
	margin:none;
	padding:0 0 0 0;
	font-size:18px;
}
.player a {
	color:#4d4d4d;
}

#player {
	display:block;
	width:390px;
	height:248px;
	background-color:#d7d7d7;
	margin-left:15px;


}

#player.wide {
	display:block;
	width:390px;
	height:220px;
	background-color:#d7d7d7;
	margin-left:15px;


}
#player.small {
	width:195px;
	height:124px;
}
#player.wide {
	height:220px;
}
#player h2 {
	background:none;
	margin:none;
	padding:0 0 0 0;
	font-size:18px;
}
#player a {
	color:#4d4d4d;
}

div.playerctrl {
	position:relative;
	height:56px;
			margin-left:15px;


	
	/* black background with a gradient */
	background:#d7d7d7 url(http://www.loucoll.ac.uk/themes/des10/images/playerctrl.png) no-repeat 361px 10px;
	width:390px;
}
div.playerctrl.small {
	width:195px;
	background:#d7d7d7 url(http://www.loucoll.ac.uk/themes/des10/images/playerctrl.png) no-repeat 180px 10px;
}
/* play/pause button */
div.playerctrl a.play, div.playerctrl a.pause { 
	position:absolute;
	width: 46px;
	height: 40px;
	display:block;
	text-indent:-9999em;
	background:url(http://www.loucoll.ac.uk/themes/des10/images/playerctrl.png) no-repeat 10px -52px;
	cursor:pointer;
}
div.playerctrl a.pause { 
	position:absolute;
	width: 46px;
	height: 40px;
	display:block;
	text-indent:-9999em;
	background:url(http://www.loucoll.ac.uk/themes/des10/images/playerctrl.png) no-repeat 10px -183px;
	cursor:pointer;
}
/* pause state */
div.playerctrl a.pause:hover {
	background-position:10px -183px;	
}

/* the timeline (or "scrubber")  */
div.playerctrl div.track {  
	left:90px;
	position:absolute;
	cursor:pointer;
	width:180px;
	height:40px;	
}

/* the timeline (or "scrubber")  */
div.playerctrl.small div.track {  
	left:80px;
	width:50px;
}

/* the draggable playhead */
div.playerctrl div.playhead {
	position:absolute;
	cursor:pointer; 
	background-color:#4d4d4d;
	width:4px;
	height:15px;
	top:20px;
	left:-3px;
}

/* buffer- and progress bars. upon runtime the width of these elements grows */
div.playerctrl div.progress, div.playerctrl div.buffer {	
	position:absolute;
	background:url(http://www.loucoll.ac.uk/themes/des10/images/playerctrl.png) repeat-x 0 -400px;

	width:0px;
	height:40px;
}


/* time display */
div.playerctrl div.time {
	position:absolute;		
	left:240px;
	padding:21px 0;
	text-align:center;

	font-family:helvetica,arial;	
	font-size:12px;
	color:#4d4d4d; 
}
div.playerctrl.small div.time {
	left:100px;
}

div.playerctrl div.time span {
	position:relative;		
	left:-190px;
}

div.playerctrl.small div.time span {
	left:-60px;
}

/* mute / unmute buttons */
div.playerctrl a.mute, div.playerctrl a.unmute {
	position:absolute;
	left:315px;
	width:40px;
	height:40px;
	text-align:center;
	padding:8px 0;
	cursor:pointer;
	text-indent:-9999em;
	background:url(http://www.loucoll.ac.uk/themes/des10/images/playerctrl.png) no-repeat 5px -313px;
}
div.playerctrl.small a.mute, div.playerctrl.small a.unmute {
	left:157px;
}


div.playerctrl a.mute:hover {
	background-position:5px -357px;	
}

/* unmute state */
div.playerctrl a.unmute {
	background-position:5px -226px;	
}