html5 progress bar styling

dabblet.css

/**
 * html5 progress bar styling
 */
html{
	background: #f06;
	background: linear-gradient(45deg, #f33, #a33);
	min-height:100%;
}

/* remove standard styling 
 * for all HTML5 progress enabled browsers
 */

progress
{
	/* turn of styling */
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;

	/* no default border in FF and Opera */
	border: none;

	/* Dimensions */
	width: 400px;
	height: 50px;
}

/* Firefox  */ 
progress  {
   background: #fee;
   border:1px solid #333;
}
progress::-moz-progress-bar {
    background: bada55;
}
progress:not([value])::-moz-progress-bar {
  background:#fdd;
}

/* Chrome */
progress::-webkit-progress-bar {
    background: #fee;
}
progress::-webkit-progress-value {
    background: #bada55;
}
progress:not([value])::-webkit-progress-bar {
  background:#fdd;
}

dabblet.html

<!-- Styled progress bar -->
<progress max="100" value="70">
  <strong>Total progress: <span>70</span>% done.</strong>
</progress>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"css"}