[div=position: center;]
body {
color: #fff;
font-family: 'Yanone Kaffeesatz';
font-size: 16px;
font-weight: normal;
background: #2a2a2a url("http://jenniferperrin.com/image/background.gif") 0 0 repeat;
}
h1 a {
display: block;
margin: 0 auto 20px auto;
font-size: 60px;
font-family: 'Yanone Kaffeesatz';
color: rgba(255,255,255,0.2);
text-decoration: none;
}
h1 a:hover {
color: rgba(255,255,255,0.3);
}
p {
margin: 10px 0 0 21px;
font-family: 'Yanone Kaffeesatz';
font-size: 14px;
color: rgba(255,255,255,0.3);
}
a {
color: #f27011;
text-decoration: none;
}
a:hover {
color: #f63a0f;
}
.container {
margin: 10px auto;
width: 300px;
text-align: center;
}
/* ========================================================
Progress bars
===================================================== */
.progress {
padding: 4px;
margin-bottom: 25px;
background: rgba(0, 0, 0, 0.25);
border-radius: 6px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.progress-bar {
font-family: 'Yanone Kaffeesatz';
font-size: 14px;
color: #111;
text-align: left;
text-indent: 6px;
position: relative;
height: 16px;
border-radius: 4px;
-webkit-transition: 0.4s linear;
-moz-transition: 0.4s linear;
-ms-transition: 0.4s linear;
-o-transition: 0.4s linear;
transition: 0.4s linear;
-webkit-transition-property: width, background-color;
-moz-transition-property: width, background-color;
-ms-transition-property: width, background-color;
-o-transition-property: width, background-color;
transition-property: width, background-color;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}
.progress-bar:before, .progress-bar:after {
content: '';
top: 0;
right: 0;
left: 0;
position: absolute;
}
.progress-bar:before {
bottom: 0;
z-index: 2;
background: url("../img/stripes.png") 0 0 repeat;
border-radius: 4px 4px 0 0;
}
.progress-bar:after {
bottom: 45%;
z-index: 3;
border-radius: 4px;
background-color: transparent;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.05)));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
}
.ten.progress > .progress-bar {
width: 10%;
background-color: #f63a0f;
}
.twenty.progress > .progress-bar {
width: 20%;
background-color: #f27011;
}
.thirty.progress > .progress-bar {
width: 30%;
background-color: #f2b01e;
}
.fourty.progress > .progress-bar {
width: 40%;
background-color: #f2d31b;
}
.fifty.progress > .progress-bar {
width: 50%;
background-color: #86e01e;
}
.sixty.progress > .progress-bar {
width: 60%;
background-color: #f63a0f;
}
.seventy.progress > .progress-bar {
width: 70%;
background-color: #f27011;
}
.eighty.progress > .progress-bar {
width: 80%;
background-color: #f2b01e;
}
.ninety.progress > .progress-bar {
width: 90%;
background-color: #f2d31b;
}
.hundred.progress > .progress-bar {
width: 100%;
background-color: #86e01e;
}
[/div]