
body {
	font-family:'verdana';
	color:#FFF;
	background-color:black;
 }

h1 { 
	font-size:16px;
	color:#333;
}

#video {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}


#media-player {
	//float:left;
	padding:1em 1em .5em;
	background-color:#cc3333;
}

.playbutton {
	text-indent:-9999px;
	width:48px;
	height:48px;
	border:none;
	cursor:pointer;
	background:transparent url('play.png') no-repeat 0 0;
}

.subbutton{
	padding: 0px 0px;
	border: none;
	background:transparent;
}

.subbutton img {
	height:36px;
}

.pause {
	background:transparent url('pause.png') no-repeat 0 0;
	text-indent:-9999px;
	width:48px;
	height:48px;
	border:none;
	cursor:pointer;	
}
.play { 
	background:transparent url('play.png') no-repeat 0 0;
	text-indent:-9999px;
	width:48px;
	height:48px;
	border:none;
	cursor:pointer;
}

#media-play-list {
	float:left;
	clear:both;
	color:#fff;
	/*width:100%;*/
	margin-top:10px;
	border-top:1px solid #cc3333;
}
#media-play-list  h2 { font-size:12px; }
#play-list {
	padding:0;
	font-size:18px;
	list-style-type:none;
}
#play-list li {
	cursor:pointer;
	padding-left:15px;
	background:transparent url('item.png') no-repeat 0 4px;
}

/*.marq{
 height: 50px;	
 overflow: hidden;
 position: relative;
}*/

.marq {

 overflow: hidden;
  position: relative;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: marq 5s linear infinite;
 -webkit-animation: marq 5s linear infinite;
 animation: marq 5s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes marq {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes marq {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes marq {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}
