body {
  background-color: #f9f9f9;
  background-image: url('../images/bg.png') repeat;
}

.demo-wrapper {
  width: 300px;
  margin: 30px auto 0;
}

.html5-progress-bar {
  padding: 15px 15px;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .2);
}

.html5-progress-bar progress {
  background-color: #f3f3f3;
  border: 0;
  width: 95%;
  height: 18px;
  border-radius: 9px;
}

.html5-progress-bar progress::-webkit-progress-bar {
  background-color: #f3f3f3;
  border-radius: 9px;
}

.html5-progress-bar progress::-webkit-progress-value {
  background: #cdeb8e;
  background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956));
  background: -webkit-linear-gradient(top, #cdeb8e 0%,#a5c956 100%);
  background: -o-linear-gradient(top, #cdeb8e 0%,#a5c956 100%);
  background: -ms-linear-gradient(top, #cdeb8e 0%,#a5c956 100%);
  background: linear-gradient(to bottom, #cdeb8e 0%,#a5c956 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 );
  border-radius: 9px;
}

.html5-progress-bar progress::-moz-progress-bar {
  background: #cdeb8e;
  background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956));
  background: -webkit-linear-gradient(top, #cdeb8e 0%,#a5c956 100%);
  background: -o-linear-gradient(top, #cdeb8e 0%,#a5c956 100%);
  background: -ms-linear-gradient(top, #cdeb8e 0%,#a5c956 100%);
  background: linear-gradient(to bottom, #cdeb8e 0%,#a5c956 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 );
  border-radius: 9px;
}

.html5-progress-bar .progress-value {
  padding: 0px 5px;
  line-height: 20px;
  margin-left: 5px;
  font-size: .8em;
  color: #555;
  height: 18px;
  float: right;
}