#media-player {
text-align:left;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	font-family:'verdana'; 
//	background:#ffffff;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f3e2c7+0,c19e67+98,e9d4b3+100 */
background: #f3e2c7; /* Old browsers */
background: -moz-linear-gradient(top,  #f3e2c7 0%, #c19e67 98%, #e9d4b3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3e2c7), color-stop(98%,#c19e67), color-stop(100%,#e9d4b3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f3e2c7 0%,#c19e67 98%,#e9d4b3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f3e2c7 0%,#c19e67 98%,#e9d4b3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f3e2c7 0%,#c19e67 98%,#e9d4b3 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f3e2c7 0%,#c19e67 98%,#e9d4b3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e2c7', endColorstr='#e9d4b3',GradientType=0 ); /* IE6-9 */




	border-radius: 2px;
	box-shadow: 1px 4px 3px rgba(0,0,0,.5);
	-webkit-box-shadow: 1px 4px 3px rgba(0,0,0,.5);
	padding:10px;
	max-width: 640px;
	margin: 0px 15px 5px 0px;
}
#media-player #infoaudio {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e1e1e1+7,e1e1e1+15,f1f1f1+71,f6f6f6+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #e1e1e1 7%, #e1e1e1 15%, #f1f1f1 71%, #f6f6f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(7%,#e1e1e1), color-stop(15%,#e1e1e1), color-stop(71%,#f1f1f1), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#e1e1e1 7%,#e1e1e1 15%,#f1f1f1 71%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#e1e1e1 7%,#e1e1e1 15%,#f1f1f1 71%,#f6f6f6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#e1e1e1 7%,#e1e1e1 15%,#f1f1f1 71%,#f6f6f6 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#e1e1e1 7%,#e1e1e1 15%,#f1f1f1 71%,#f6f6f6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */




	color: #2E2E2E;
	font-size: 14px;
    	line-height: 16px;
	padding: 5px;
	min-height: 45px;
	border-radius: 2px;
}
#media-player #preloader {
	position:absolute;
//	width: 60px;
//	height: 60px;
	z-index:99;
}
#media-player #playpng {
	cursor:pointer;
	position:absolute;
	width: 70px;
	height: 70px;
	z-index:99;
}
#media-player #playpng img{
	background-color: transparent;
	border: none;
}
#media-player #media-video {
	position: relative;
	color:whiteSmoke;
	width:100%;
	height: auto;
	max-width:640px;
	border-radius: 2px;
}
#media-player #media-controls {
	background: #DBA901;
	background: -moz-linear-gradient(to top , #DBA901, #FACC2E);
	background: -webkit-linear-gradient(to top ,#DBA901, #FACC2E);
	background: -ms-linear-gradient(to top , #DBA901, #FACC2E);
	background: linear-gradient(to top , #DBA901, #FACC2E);	
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;	
       	-moz-box-shadow: 0 3px 8px rgba(255,255,255,.4);
        	-webkit-box-shadow: 0 3px 8px rgba(255,255,255,.4);
        	box-shadow: 0 3px 8px rgba(255,255,255,.24);
	background: url('bg.png') ;
	max-width: 640px;
	margin-top: -2px;
	margin-bottom: 10px;
 	z-index: 2147483647;
}
#media-player button {
	text-indent:-9999px;
	margin: -4px 3px 3px 3px;
	width:40px;
	height:40px;
	border:none;
	cursor:pointer;
	background: transparent url('buttons.png') no-repeat 0 0;
}
#media-player button:focus {outline:0;}
#media-player .pause { background-position:-41px 0; }
#media-player .stop { background-position:-82px 0; }
#media-player .mute { background-position:-123px 0; }
#media-player .unmute { background-position:-164px 0; }
#media-player .full { background-position:-205px 0; float:right;}
#media-player .inv { background-position:-244px 0; }

#media-player #progressg {
	vertical-align:top;
	margin-top: 1px;
	margin-left: -1px;
  	width: 100%;
  	height: 13px;
	position: relative;
}
#media-player #progress3 {
	border-radius: 2px; 
	box-shadow: inset 0px 3px 8px rgba(0,0,0,0.24); 
	-moz-border-radius: 2px; 
	-webkit-border-radius: 2px; 
	-ms-box-shadow: inset 0 3px 8px rgba(0, 0, 0, .4); 
	-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, .4); 
	-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, .4);
	border: 1px solid transparent;
  	background: transparent;
  	width: 66%;
	height: 1rem;
  	position: absolute;
  	top: 0;
  	left: 0;
}
#media-player #myProgressBar {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#deefff+0,98bede+64 */
background: #deefff; /* Old browsers */
background: -moz-linear-gradient(left,  #deefff 0%, #98bede 64%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#deefff), color-stop(64%,#98bede)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #deefff 0%,#98bede 64%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #deefff 0%,#98bede 64%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #deefff 0%,#98bede 64%); /* IE10+ */
background: linear-gradient(to right,  #deefff 0%,#98bede 64%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#deefff', endColorstr='#98bede',GradientType=1 ); /* IE6-9 */



   	opacity: 0.6;
   	filter: alpha(opacity=60); /* For IE8 and earlier */
   	width: 0;
  	height: 90%;
  	position: absolute;
 	 top: 0;
  	left: 0;
}
#timebg {
margin-top: 1px;
	border-radius: 2px; 
	box-shadow: inset 0px 3px 8px rgba(0,0,0,0.24); 
	-moz-border-radius: 2px; 
	-webkit-border-radius: 2px; 
	-ms-box-shadow: inset 0 3px 8px rgba(0, 0, 0, .4); 
	-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, .4); 
	-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, .4);
	right:0;
	width: 95px; 
	height: 1rem;
	position: absolute;
 	z-index: 1;
}
#time {
	width: 100%; 
	text-align: right; 
	font-size:13px; 
	vertical-align:top; 
	position: absolute;
	color: #585858;
 	z-index: 2;
   	opacity: 0.6;
}
#media-player #media-play-list {
	float:left;
	clear:both;
	width:100%;
	margin-top:0px;
}
#media-player #list { font-size:18px; color:#fff; text-align: center; margin-top: 10px; margin-bottom: -10px;}

#media-player #play-list {
	padding:0;
	font-size:18px;
	list-style-type:none;
}
#media-player #play-list li {
	color:#fff;
	margin-bottom: 0;
	margin-left: 0;
	line-height: 30px;
	cursor:pointer;
	padding-left:15px;
	background:transparent url('item.png') no-repeat  0 10px;
}
#media-player #play-list li:hover {
	padding-left:20px;
	background:url('itemw.png') no-repeat 5px 10px;
	color:green;
}
#media-player #play-list li.active {
	padding-left:20px;
	background:whiteSmoke url('itemw.png') no-repeat 5px 10px;
	color:green;
}
#media-player #play-list li:visited {
	background:whiteSmoke url('itemw.png') no-repeat 0 4px;
	color:#FBFBEF;
}
#media-player #info {
	width: 100%;
	margin-top: 8px;
	margin-bottom: -8px;
	text-shadow: 0px 0px 6px #141004;
	color: #FFFEFD;
	font-size:14px;
	font-weight: bold;
	line-height: 14px;
}
#media-player #infox {
	margin-top: -8px;
	margin-bottom: -8px;
}
/* 
Desperate to remove focus outline in firefox 
*/
::-moz-focus-inner {outline:0;}
:focus {outline:0;}

.range-input,
.topcoat-range-input,
.topcoat-range-input--vertical {
  	padding: 0;
  	margin: 0 0 0 1px;
  	background: transparent;
  	border: none;
  	box-sizing: border-box;
  	background-clip: padding-box;
  	vertical-align: top;
  	outline: none;
  	-webkit-appearance: none;
  	width: 66%;
  	position: absolute;
  	z-index: 31;
  	height: 1rem;
}
/* 
  Declarations get duplicated because an invalid selector
  invalidates the entire declaration block
*/
.range-input::-webkit-slider-thumb,
.topcoat-range-input::-webkit-slider-thumb,
.topcoat-range-input--vertical::-webkit-slider-thumb {
  	cursor: pointer;
  	-webkit-appearance: none;
}
.range-input::-moz-range-thumb,
.topcoat-range-input::-moz-range-thumb,
.topcoat-range-input--vertical::-moz-range-thumb {
  	cursor: pointer;
}
.topcoat-range-input::-moz-range-track,
.topcoat-range-input--vertical::-moz-range-track {
  	border: 1px solid #a5a8a8;
  	background: #d3d7d7;
  	opacity: 0.7;
  	height: 1rem;
  	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
.topcoat-range-input::-ms-track,
.topcoat-range-input--vertical::-ms-track {
  	border: 1px solid transparent;
  	background: transparent;
  	opacity: 0.7;
  	color: #d3d7d7;
  	height: 0.97rem;
  	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
/* Declarations get duplicated because an invalid selector
   invalidates the entire declaration block 
*/
.topcoat-range-input::-webkit-slider-thumb,
.topcoat-range-input--vertical::-webkit-slider-thumb {
  	height: 0.95rem;
  	width: 2rem;
  	border: 1px solid rgba(0,0,0,0.36);
  /* Is base64 the way to go ? */
  /* I don't imagine simulating vertical stripes w/ gradients */ 
  	background:url('light-grips.svg') center center no-repeat #e5e9e8;
  	background-size: 7px 18px;
  	box-shadow: inset 0 1px white;
}
.topcoat-range-input::-moz-range-thumb,
.topcoat-range-input--vertical::-moz-range-thumb {
  	height: 3rem;
  	width: 2rem;
  	border: 1px solid rgba(0,0,0,0.36);
  	background:url('light-grips.svg') center center no-repeat #e5e9e8;
  	background-size: 7px 18px;
  	box-shadow: inset 0 1px white;
}
/* IE styles */

.topcoat-range-input::-ms-thumb,
.topcoat-range-input--vertical::-ms-thumb {
  	height: 14px;
  	width: 2rem;
  	border: 1px solid rgba(0,0,0,0.36);
  	background:url('light-grips.svg') center center no-repeat #e5e9e8;
  	background-size: 7px 14px;
  	box-shadow: inset 0 1px white;
}	
::-ms-tooltip,
::-ms-fill-lower {display: none;}

.topcoat-range-input--vertical {
  	-webkit-transform:rotate(90deg);
 	 -moz-transform:rotate(90deg);
  	-ms-transform:rotate(90deg);  
  	transform:rotate(90deg);
}
/* Active state */

.topcoat-range-input:active::-webkit-slider-thumb,
.topcoat-range-input--vertical:active::-webkit-slider-thumb {
  	border: 1px solid #61380B;
  	box-shadow: 0 0 0 2px #61380B;
}
input[type=range]:active::-moz-range-thumb {
  	border: 1px solid #61380B;
  	box-shadow: 0 0 0 2px #61380B;
}
input[type=range]:active::-ms-thumb {
  	border: 1px solid #61380B;
  	box-shadow: 0 0 0 2px #61380B;
}
#media-video:-ms-fullscreen{
  	width: 100%;
  	height: 100%;
}
#media-video::full-screen {
  	width: 100%;
  	height: 100%;
}
::-moz-full-screen #media-video {
  	width: 100%;
  	height: 100%;
}
#media-video::-moz-full-screen {
  	width: 100%;
  	height: 100%;
}
#media-video::-webkit-full-screen {
  	width: 100%;
  	height: 100%;
}