.progress {
height: 20px;
background: #f2f2f2;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
/* border-radius: 10px; */
}
.progress > span {
position: relative;
float: left;
margin: 0 -1px;
min-width: 30px;
height: 18px;
line-height: 16px;
text-align: right;
background: #cccccc;
border: 1px solid;
border-color: #bfbfbf #b3b3b3 #9e9e9e;
background-image: linear-gradient(to bottom, #f0f0f0, #dbdbdb 70%, #cccccc);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.progress-percentage {
padding: 0 8px;
color: #333;
text-align: center;
margin-top:10px;
}
/*
.progress > span:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
height: 18px;
background: url("../images/progress_bg.png") 0 0 repeat-x;
border-radius: 10px;
}
*/
.progress .ifonly {
background: url("../images/progressbar_tile.png") 0 0 repeat-x;
}
.progress .green {
background: #85c440;
border-color: #78b337 #6ba031 #568128;
background-image: linear-gradient(to bottom, #b7dc8e, #99ce5f 70%, #85c440);
}
.progress .red {
background: #db3a27;
border-color: #c73321 #b12d1e #8e2418;
background-image: linear-gradient(to bottom, #ea8a7e, #e15a4a 70%, #db3a27);
}
.progress .orange {
background: #f2b63c;
border-color: #f0ad24 #eba310 #c5880d;
background-image: linear-gradient(to bottom, #f8da9c, #f5c462 70%, #f2b63c);
}
.progress .blue {
background: #5aaadb;
border-color: #459fd6 #3094d2 #277db2;
background-image: linear-gradient(to bottom, #aed5ed, #7bbbe2 70%, #5aaadb);
}