Customizing Media Elements - HTML5 Media - page 76

{
border: 1px solid #ccc;
padding: 5px;
border-radius: 10px;
}
body
{
/* set up transition */
-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;
background-color: #fff;
}
#butterfly
{
position: absolute;
left: 0;
top: −6px;
background-image: url(butterfly.png);
width: 30px;
height: 31px;
}
#progressbar
{
/* progress bar width and height */
width: 500px;
height: 20px;
/* position and border */
position: relative;
border: 1px solid #ccc;
margin: 10px;
border-radius: 20px;
/* add regular background */
background-color: #cccccc;
/* add gradient background */
background-image: linear-gradient(top, #fff, #ccc);
background-image: -moz-linear-gradient(top, #fff, #ccc);