video {
 width: 100%    !important;
 height:  auto !important;
}


div#video{ width:100%; background:#000; margin:0px auto;}
div#video_controls_bar{ height:50px; background: #003 300; padding:10px;   color:#00CC00;}

input#volumeslider{ width: 10%;  }
button#fullscreenbtn{  padding: 3px; margin: 10px;  }

button#playpausebtn{  padding: 9px; margin: 5px;  }
             
             /* background color and gradient */ 
       video,#playpausebtn, #stop, #fwd,#rew,#slower,#faster,#restart,#normal,#fullscreenbtn,#stop, #pause, #plus, #minus, #mutebtn,#g ,#g2 ,#g3 ,#g4 ,#g ,#g5 ,#g6 
             { /* background color */ background-color: #223333; 
             
             
             /* background gradient */ background-image: linear-gradient(top, #fff, #fcc); 
             background-image: -moz-linear-gradient(top, #fff, #fcc); background-image: -webkit-linear-gradient(top, #fff, #333);
              background-image: -o-linear-gradient(top, #fff, #fcc); background-image: -ms-linear-gradient(top, #fff, #222); 
              
              
              }

/* shadows */ play, #stop, #fwd,#rew,#slower,#faster,#restart,#normal,#full-screenbtn,#stop, #pause, #plus, #minus,#draggable5, #g ,#g9 ,#mute  
{ 

box-shadow: 0 0 10px #ccc; 

}

 #play:hover, #fwd :hover,#rew,#slower:hover,#g9:hover ,#g:hover,#faster:hover,#restart:hover,#normal:hover, #full-screen:hover, #stop:hover, #pause:hover, #plus:hover, #minus:hover, #mute:hover 
{ 
/* glow */ 
box-shadow: 0 0 20px #888; 

}

#controls { display: none; margin: 10px 30px; } /* style for buttons */ #play, #fwd,#rew,#slower,#faster,#restart,#normal,#full-screen, #stop, #pause, #plus, #minus, #mute { border: 1px solid #ccc; padding: 5px; border-radius: 10px; width: 60px; margin: 0 10px 0 0; } body{ /* color tranzitiontransition */ -webkit-transition: background-color 1s ease-in-out; -moz-transition: background-color 1s ease-in-out; -o-transition: background-color 1s ease-in-out; -ms-transition: background-color 1s ease-in-out; transition: background-color 1s ease-in-out; /* initial color */ background-color: #fff; } #butterfly{ position: absolute; left: 0; top: -6px; background-image: url(butterfly.png); width: 40px; height: 40px; } #progressbar{ display: none; /* size */ width: 400px; height: 20px; /* position and border */ position: relative; border: 1px solid #ccc; margin: 10px; border-radius: 20px; /* background color */ background-color: #cccccc; /* background gradient */ background-image: linear-gradient(top, #fff, #ccc); background-image: -moz-linear-gradient(top, #fff, #ccc); background-image: -webkit-linear-gradient(top, #fff, #fcc); background-image: -o-linear-gradient(top, #fff, #ccc); background-image: -ms-linear-gradient(top, #fff, #ccc); /* shadow */ box-shadow: 0 0 10px #ccc; } #loadingprogress{ /* border */ border-radius: 20px; /* initial size */ height: 20px; width: 0; /* background color */ background-color: #9acd00; /* background gradient */ background-image: linear-gradient(top, #ffffff, #9acd00); background-image: -moz-linear-gradient(top, #ffffff, #9acd00); background-image: -webkit-linear-gradient(top, #ffffff, #9acd00); background-image: -o-linear-gradient(top, #ffffff, #9acd00); background-image: -ms-linear-gradient(top, #ffffff, #9acd00); }


button {
	background: rgba(0,0,0,.5);
	border: 0;
	color: #EEE;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
}

button:hover {
	cursor: pointer;
}

#seekslider {
	width: 25%;
}

#volumeslider {
	width: 60px;
}



.curtimetext {
  background-color: #FF0000;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 150%; 
}