.mediaplayer .ui-button,
.mediaplayer button,
.mediaplayer button.ui-state-default {
  border-radius: 40px;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border: 1px solid #717171;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
  -o-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
}

[class*="uibtn-media-"] {
  border-radius: 40px;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border: 1px solid #717171;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
  -o-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);

  background: #e6e6e6 50% 50% no-repeat;
  
  padding: 3px;
  height:20px;
  width: 20px;
  display: inline-block;
}
    [class*="uibtn-media-"].large
    {
        height: 35px;
        width: 35px;
    }
 
[class*="uibtn-media-"]:active
{
    border: 1px solid #7d7d7d;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.1);
  -o-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.1);
  background-color: #717171;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAIAAAD9b0jDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjEwNUFBNjRGQjhFMTFFMTk3OTg5MkY1NzFBNTk1NkYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjEwNUFBNjVGQjhFMTFFMTk3OTg5MkY1NzFBNTk1NkYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyMTA1QUE2MkZCOEUxMUUxOTc5ODkyRjU3MUE1OTU2RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyMTA1QUE2M0ZCOEUxMUUxOTc5ODkyRjU3MUE1OTU2RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkmqjRQAAAJiSURBVHjarFY5YsRACEOsP7z/LxQPIGCSNm6ynoNDSHLw/X4tHpjR/ud5DIBezg/mn3xIm91aqvQEMYXgLJzdWHt833pP+I6w9hg3IyEYlaDDvbHcauGEfd7tqeeOnwUh17HSYPcDhdPLWyni+YMn6mK3CMsG811xuGYxQZ5oBIh7gQhpKsYK8NglKznzeJzMrH52z+XIzBdTd/ZlQYCNZwD93vfCsPvVibzfZWSlXp1puU5FyawfEBZRXuEtLBoh5IVTqV1jUISCUF00ZD32U3+NOKHhGpTX0aQacdGpmXTuO2ymwibWwUfEjbPPJzCNvZMOucvmZBDvjAHViOLEgE3HkxLMNA+a/VFICQVdZ0GJ5tVF6AiLPdiT7sX0IzmykBLxL4lSIx+GdvAUVZMHSSmiUB3S1Gg52Bp7nqYB3WJWoqN9LuUcTL3ui+vjNRhtxOMp/ZFgnnnwcUiiLhoi2CJFatoxBO80xRbdSguJHG+lvr1ORqgfPn2pd7r1uBVrtBguFeSnXQZxe6eN6bU5Yi1CfhYrHuR3jL+JnsSSLcG9AOnTpN8IlxadyjqV6p09KxUaapAoEg1q9u9yKcwnQcIQmC6K47JfEQZSpYYT68pj/QqRv7y02DIOdjFa0/UGaqDqphreF1OHzLxVIo0Da/KOZfRIjmYnaRVdaFIqcNFHr/1nJo7xgKoe6fqrkwErKrVhyfUNRTvrZQKZT5PQRC9envaTxteXb2npYu4aHmG3Qse5HkkIAPfHsZT699EBL4a1n1GUfTEN3bXRjfdjrIC/oh6O978mqA/KfDHtR4ABAPBnPFNZqmg1AAAAAElFTkSuQmCC);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#717171), to(#9a9a9b));
  background-image: -webkit-linear-gradient(top, #717171, #9a9a9b);
  background-image: -moz-linear-gradient(top, #717171, #9a9a9b);
  background-image: -o-linear-gradient(top, #717171, #9a9a9b);
  background-image: linear-gradient(to bottom, #717171, #9a9a9b);
}


.uibtn-media-seek-start
{
    background-image: url(../img/ui/media/media-previous-off.png);
}

.uibtn-media-seek-prev {
  background-image: url(../img/ui/media/media-rewind-off.png);
}
.uibtn-media-play {
  background-image: url(../img/ui/media/media-play-off.png);
}
.uibtn-media-pause {
  background-image: url(../img/ui/media/media-pause-off.png);
}
.uibtn-media-stop {
  background-image: url(../img/ui/media/media-stop-off.png);
}
.uibtn-media-seek-next {
  background-image: url(../img/ui/media/media-forward-off.png);
}
.uibtn-media-seek-end {
  background-image: url(../img/ui/media/media-next-off.png);
}

.uibtn-media-seek-start:active
{
    background-image: url(../img/ui/media/media-previous-on.png);
}

.uibtn-media-seek-prev:active {
  background-image: url(../img/ui/media/media-rewind-on.png);
}
.uibtn-media-play:active {
  background-image: url(../img/ui/media/media-play-on.png);
}
.uibtn-media-pause:active {
  background-image: url(../img/ui/media/media-pause-on.png);
}
.uibtn-media-stop:active {
  background-image: url(../img/ui/media/media-stop-on.png);
}
.uibtn-media-seek-next:active {
  background-image: url(../img/ui/media/media-forward-on.png);
}
.uibtn-media-seek-end:active {
  background-image: url(../img/ui/media/media-next-on.png);
}

.vcplayer {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.vcplayer > div {
  line-height: 371px;
  background: #000;
  color: #fff;
  font-weight: bold;
  font-size: 22px;
  text-align: center;
}
.vcplayer .controls {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #0d0a07;
  position: relative;
  /*background: #4f4f4f;
  /* Old browsers */

  background-image: url(../img/ui/media/barbg.png);

}
.vcplayer .controls li {
  border-right: 1px solid #0d0a07;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.vcplayer .controls li.volume,
.vcplayer .controls li.cc,
.vcplayer .controls li.fullscreen,
.vcplayer .controls li.play,
.vcplayer .controls li.pause,
.vcplayer .controls li.time {
  display: block;
  width: 45px;
  height: 45px;
}
.vcplayer .controls li.volume:hover,
.vcplayer .controls li.cc:hover,
.vcplayer .controls li.fullscreen:hover,
.vcplayer .controls li.play:hover {
  background: rgba(255, 255, 255, 0.05);
}
.vcplayer .controls li.volume:active,
.vcplayer .controls li.cc:active,
.vcplayer .controls li.fullscreen:active,
.vcplayer .controls li.play:active {
  background: none;
  border-left: 1px solid rgba(0, 0, 0, 0.4);
}
.vcplayer .controls li.volume a:active,
.vcplayer .controls li.cc a:active,
.vcplayer .controls li.fullscreen a:active,
.vcplayer .controls li.play a:active {
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7);
  -o-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7);
  -ms-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7);
}
.vcplayer .controls li.play, .vcplayer .controls li.pause {
  border-left: 0;
}
.vcplayer .controls li.fullscreen {
  border-right: 0;
}
.vcplayer .controls li.play, .vcplayer .controls li.pause {
  float: left;
}
.vcplayer .controls li.volume,
.vcplayer .controls li.cc,
.vcplayer .controls li.fullscreen
.vcplayer .controls li.time {
  float: right;
}
.vcplayer .controls li.volume {
  position: relative;
}
.vcplayer .controls li.volume > div {
  display: none;
  position: absolute;
  background: #404040;
  border-radius: 6px 6px 0 0;
  -webkit-border-radius: 6px 6px 0 0;
  -moz-border-radius: 6px 6px 0 0;
  bottom: 46px;
  left: -2px;
  height: 110px;
  padding: 10px 18px;
  width: 45px;
}
.vcplayer .controls li.volume > div > div {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  background: #141414;
  height: 100%;
  position: relative;
  height: 90px;
}
.vcplayer .controls li.volume > div > div > div {
  position: relative;
  bottom: -60%;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  height: 100%;
  background: #f8731f;
  /* Old browsers */

  /* IE9 SVG, needs conditional override of 'filter' to 'none' */

  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4NzMxZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkMDNhMDgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, #f8731f 0%, #d03a08 100%);
  /* FF3.6+ */

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8731f), color-stop(100%, #d03a08));
  /* Chrome,Safari4+ */

  background: -webkit-linear-gradient(top, #f8731f 0%, #d03a08 100%);
  /* Chrome10+,Safari5.1+ */

  background: -o-linear-gradient(top, #f8731f 0%, #d03a08 100%);
  /* Opera 11.10+ */

  background: -ms-linear-gradient(top, #f8731f 0%, #d03a08 100%);
  /* IE10+ */

  background: linear-gradient(to bottom, #f8731f 0%, #d03a08 100%);
  /* W3C */

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8731f', endColorstr='#d03a08', GradientType=0);
  /* IE6-8 */

  box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.7);
  -o-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.7);
  -ms-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.7);
  -moz-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.7);
  -webkit-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.7);
}
.vcplayer .controls li.volume > div > div a {
  position: absolute;
  margin-left: -18px;
}
.vcplayer .controls li.progress {
  height: 45px;
  position: relative;
  margin-left: 45px;
  margin-right: 135px;
  padding: 18px;
}
.vcplayer .controls li.progress > div {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  background: #141414;
  height: 100%;
  height: 9px;
  box-shadow: inset 1px 0 3px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.1);
  -o-box-shadow: inset 1px 0 3px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.1);
  -ms-box-shadow: inset 1px 0 3px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.1);
  -moz-box-shadow: inset 1px 0 3px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-box-shadow: inset 1px 0 3px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.1);
}
.vcplayer .controls li.progress > div > div {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  height: 100%;
  background: #f8731f;
  /* Old browsers */

  /* IE9 SVG, needs conditional override of 'filter' to 'none' */

  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4NzMxZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkMDNhMDgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, #f8731f 0%, #d03a08 100%);
  /* FF3.6+ */

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8731f), color-stop(100%, #d03a08));
  /* Chrome,Safari4+ */

  background: -webkit-linear-gradient(top, #f8731f 0%, #d03a08 100%);
  /* Chrome10+,Safari5.1+ */

  background: -o-linear-gradient(top, #f8731f 0%, #d03a08 100%);
  /* Opera 11.10+ */

  background: -ms-linear-gradient(top, #f8731f 0%, #d03a08 100%);
  /* IE10+ */

  background: linear-gradient(to bottom, #f8731f 0%, #d03a08 100%);
  /* W3C */

  box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.7);
  -o-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.7);
  -ms-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.7);
  -moz-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.7);
  -webkit-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.7);
}
.vcplayer .controls li.progress a {
  position: absolute;
  top: 0;
  margin-left: -22px;
  left: 40%;
}
.vcplayer .controls li a, [class*="icon-media-"] {
  background: url(../img/ui/media/sprite.png) 0 0 no-repeat;
  display: block;
  width: 30px;
  height: 30px;
  text-indent: -9999px;
}
.vcplayer .controls li.volume > a, .icon-media-volume {
  background-position: -6px -6px;
}
.vcplayer .controls li.cc a, .icon-media-cc {
  background-position: -6px -96px;
}
.vcplayer .controls li.cc.on a, .icon-media-cc-on {
  background-position: -6px -186px;
}
.vcplayer .controls li.fullscreen a, .icon-media-fullscreen {
  background-position: -6px -276px;
}
.vcplayer .controls li.progress a, .icon-media-progress {
  background-position: -6px -366px;
}
.vcplayer .controls li.volume .volslider a, .icon-media-volslider {
  background-position: -6px -456px;
}
.vcplayer .controls li.play a, .icon-media-play {
  background-position: -6px -546px;
}
    .vcplayer .controls li.mute a, .icon-media-mute
    {
        background-position: -51px -6px;
    }
    .vcplayer .controls li.pause a, .icon-media-pause
    {
        background-position: -52px -546px;
    }
	
/************* added new style for time *******************/

	
.vcplayer .controls li.time a, .icon-media-time
{
    background-position: -52px -97px;
}