#playnow:before  {
	font-family: '';
	speak: none;font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	}

#playnow:before {
	content: url("../images/play.png");
	
	}


.wrapper {
  width: 960px;
  margin: 0 auto;
  
}

.top-bar form .columns {
    padding: 0;
}
#player {
  margin: 15px 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 1px 1px #333;
  width: 960px;
  height: 580px
  
  
}

.player-container {
  line-height: 100%;
  background-color: #000;
  width: 960px;
  height: 536px
  
 
}

.movie-loading {
  background :#000; 
  position: absolute;
  width: 960px;
  height: 536px;
  z-index: 400;
  opacity:0.9;
  top: 0;
  left: 0;
  
}

.movie-loading-img {
 background : url("../images/backdrop.png")center center no-repeat;
  position: absolute;
  width: 960px;
  height: 536px;
  z-index: 200;
  top: 0;
  left: 0;
  
}

.loader-img {
  background : url("../images/loading.gif")center center no-repeat;
  display: block;
  position: relative;
  top:-40px;
  
  
  
}



.movie-loader {
  background : url("../images/loading.gif") center center no-repeat;
  display: block;
  position: absolute;
  width: 960px;
  height: 536px;
  filter: alpha(opacity=50);
}

.ld2 .movie-loader {
  display: block;
  position: absolute;
  
}



#playnow {
	opacity:0.6;
	cursor: pointer;
	position: absolute;
	top: 36%;
	left:45%;
	filter: alpha(opacity=50);
    
}
	

#playnow:hover { 
    opacity:1;
 }

#controls {
  width: 960px;
  position: relative;
  bottom: -37px;
  font-size: 130%;
  
}
#controls, #player:hover > #controls {
  bottom: 22px;
}
.controls-wraper {
  background: #2a2a2a; 
    background: linear-gradient(grey,black,grey);
    box-shadow: 0 0 15px 8px #333;
	background: -moz-linear-gradient(top,  #0002 0%, #2f2f2f 100%);
	background: -webkit-gradient(linear, bottom, color-stop(0%,#000), color-stop(100%,#2f2f2f));
	background: -webkit-linear-gradient(top,  #0002 0%,#2f2f2f 100%);
	background: -o-linear-gradient(top, #0002 0%,#2f2f2f 100%);
	background: -ms-linear-gradient(top,  #0002 0%,#2f2f2f 100%);
	background: linear-gradient(to bottom, #000  0%,#2f2f2f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000', endColorstr='#2f2f2f',GradientType=0 );
	-webkit-box-shadow: inset 0 0 3px #000;
	-moz-box-shadow: inset 0 0 2px #000;
	position: relative;
	z-index: 10;
	
}
.controls-wraper {
  width:960px;
  padding: 15px 15px 0;
  background-color:#000;
  color: #999;
  position: relative;
  z-index: 300;
  line-height:0px;
  height: 40px;
  overflow: hidden;
  box-shadow: 0 1px 1px #333;
  border-top: 2px solid #333;
  border-bottom: 1px solid #000;
  top:-4px;
}





.cplay, .volume, .duration, .clock {
  margin-right: 15px;
  position: relative;
  float: left;
  font-size: 21px;
  top: -7px;
  color: #999;
}
.duration {
  position: relative;
  float: left;
  font-size: 13px;
  top: 4px;
  color: #999;
  font-family:arial;
}
.dmax {
  color: #fff;
}


.buffering{
        position:absolute;
        background:white;
        display:block;
        width:960px;
        opacity:1;
}
	
.buffering::after{
        height:2px;
        content:'';
        opacity:1;
        position:absolute;
        top:2px;
        right:0;
        bottom:0px;
        left:0;
        background:green;
        -webkit-animation: animate-shine 100s ease-in;
        -moz-animation: animate-shine 100s ease-in;
        animation: animate-shine 100s ease-in;
}
@-webkit-keyframes animate-shine{0%{opacity:1;width:0;}50%{opacity:1;}100%{opacity:1;width:100%;}}
@-moz-keyframes animate-shine{0%{opacity:1;width:0;}50%{opacity: 1;}100%{opacity:1;width:100%;}}
@-webkit-keyframes animate-progres{0%{opacity:1;width:0;}50%{opacity:1;}100%{opacity:1;width:100%;}}
@-moz-keyframes animate-progres{0%{opacity:1;width:0;}50%{opacity: 1;}100%{opacity:1;width:100%;}}



.progres {
  display: block;
  margin: 0 70px 0 130px;
  position: relative;
  top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.buffering, .marquee {
  position: relative;
  height: 10px;
  background-color: #000;
  display: block;
  width: 100%;
}
.marquee {
  line-height: 15px;
  height: 15px;
  color: #fff;
  font-size: 13px;
  background-color: transparent;
  white-space: nowrap;
  -webkit-animation: rightThenLeft 10s infinite;
  top: -1px;
}
@-webkit-keyframes rightThenLeft{0%{margin-left:100%;}
50%{margin-right:50%;}
100%{margin-right:100%;}
}


.fullscreen {
  right: 15px;
}

.quality {
  right: 50px;
}
.quality .hd {
  position: absolute;
  background: #c00;
  color: #fff;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 7px;
  font-weight: bold;
  padding: 1px 3px;
  top: -5px;
  left: 8px;
  line-height: 100%;
}
.quality, .fullscreen {
  position: absolute;
  display: inline-block;
  top: 10px;
}
.play:hover,.volume:hover,.quality:hover,.clock:hover,.fullscreen:hover{
  cursor:pointer;
  color:#fff;
}
.nregister {
  background:#000;
  line-height: 1;
  text-align: center;
  color: #f2f2f2;
  font-weight: bold;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity:0.9;
  width: 960px;
  height: 536px;
}
.nregister {
  font-size: 20px;
  margin: 0;
}

.oops-wrapper {
  padding-top: 15%;
  line-height:30px;
  font-size: 22px;
  
}
.oops-target {
  font-size: 25px;
  cursor: pointer;
}


#regplay {
  color:#fff;
  display: inline-block;
  margin-top: 10px;
  cursor: pointer;
  font-size: 27px;
  padding :10px 16px;
  border-radius: 5px;
  background: #0000FF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
}


#regplay:hover { 
  background: #0000CD;
  color:#fff;
}