.circle_progress_bar { position: relative; font-size: 248px; width: 1em; height: 1em; float: left; }
    .circle_progress_bar > .percent { position: absolute; top: 1.05em; left: 0; width: 3.33em; font-size: 0.3em; text-align: center; }
    .circle_progress_bar > #slice { position: absolute; width: 1em; height: 1em; clip: rect(0px,1em,1em,0.5em); }
        .circle_progress_bar > #slice.gt50 { clip: rect(auto, auto, auto, auto); }
        .circle_progress_bar > #slice > .pie { border: 0.05em solid #9ECEC7; position: absolute; width: 0.9em; /* 1 - (2 * border width) */ height: 0.9em; /* 1 - (2 * border width) */ clip: rect(0em,0.5em,1em,0em); -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border-radius: 0.5em; }
            .circle_progress_bar > #slice > .pie.fill { -moz-transform: rotate(180deg) !important; -webkit-transform: rotate(180deg) !important; -o-transform: rotate(180deg) !important; transform: rotate(180deg) !important; }
    .circle_progress_bar.fill > .percent { display: none; }
    .circle_progress_bar.fill > #slice > .pie { border: transparent; background-color: #c0c0c0; width: 1em; height: 1em; }