/* Adding some margin to allow for the image */
.yui3-dial{
    margin:0 0 20px 20px;
}

/* Here, we are just cleaning out the visible 
styles of the ring and the center button 
to allow for the images. */

/* Remove visible styles of the ring */
.yui3-skin-sam .yui3-dial-content .yui3-dial-ring{
    box-shadow: none;
    -moz-border-radius: none;
    -webkit-border-radius: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    background:none;
}

/* Remove visible style of the center button */
.yui3-skin-sam .yui3-dial-content .yui3-dial-center-button {
    box-shadow: none;
    -moz-border-radius: none;
    -webkit-border-radius: none;
    -moz-box-shadow: none;
    background:none;
}

/* Hide all VML ovals in IE. */
.yui3-skin-sam .yui3-dial-ring-vml v\:oval {
    visibility:hidden;
}

/* Show the marker and the handle ovals */
.yui3-skin-sam .yui3-dial-ring-vml .yui3-dial-marker-vml v\:oval,
.yui3-skin-sam .yui3-dial-ring-vml .yui3-dial-handle-vml v\:oval {
    visibility:visible;
}

/* Fill center button and ring so their backgrounds accept events in IE */
.yui3-skin-sam .yui3-dial-content .yui3-dial-center-button-vml,
.yui3-skin-sam .yui3-dial-content .yui3-dial-ring-vml{
    background:url({{{componentAssets}}}/images/empty.png);
}