Template:Progressbar

.progress { width: 100px; border: 1px solid #ccc; position: relative; display: block; height: 22px; padding: 0; min-width: 200px; margin:4px 0; background: #DEDEDE; background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#e9e9e9)); background: -moz-linear-gradient(top, #ccc, #e9e9e9); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#e9e9e9');

-moz-box-shadow:0 1px 0 #fff; -webkit-box-shadow:0 1px 0 #fff; box-shadow:0 1px 0 #fff;

-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } .progress span { display: block; height: 20px; margin: 0; padding: 0; text-align:center; width:0; -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);

-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .progress span b{   color:#fff; line-height:20px; padding-left:2px; text-shadow:0 1px 1px rgba(0, 0, 0, 0.5); }

.progress-blue span { border: 1px solid #0078a5; background-color: #5C9ADE; background: -moz-linear-gradient(top, #00adee 10%, #0078a5 90%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #00adee), color-stop(0.9, #0078a5)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5'); }

.progress-green span { border: 1px solid #5c9425; background-color: #77AF3F; background: -moz-linear-gradient(top, #8fc857 10%, #5c9425 90%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #8fc857), color-stop(0.9, #5c9425)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fc857', endColorstr='#5c9425'); } .progress-orange span { border: 1px solid #f47a20; background-color: #faa51a; background: -moz-linear-gradient(top, #faa51a 10%, #f47a20 90%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #faa51a), color-stop(0.9, #f47a20)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); } .progress-red span { border: 1px solid #A92C2C; background-color: #C44747; background: -moz-linear-gradient(top, #DD5F5F 10%, #A92C2C 90%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #DD5F5F), color-stop(0.9, #A92C2C)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DD5F5F', endColorstr='#A92C2C'); }

