html,body,div,span,applet,object,,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}
body {
line-height:1;
}
ol,ul {
list-style:none;
}
blockquote,q {
quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
content:'';
content:none;
}
table {
border-collapse:collapse;
border-spacing:0;
}
.about {
margin:70px auto 40px;
padding:8px;
width:260px;
font:10px/18px 'Lucida Grande',Arial,sans-serif;
color:#666;
text-align:center;
text-shadow:0 1px rgba(255,255,255,0.25);
background:#eee;
background:rgba(250,250,250,0.8);
border-radius:4px;
background-image:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.1));
background-image:-moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.1));
background-image:-o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.1));
background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.1));
-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.3),inset 0 0 0 1px rgba(255,255,255,0.1),0 0 6px rgba(0,0,0,0.2);
box-shadow:inset 0 1px rgba(255,255,255,0.3),inset 0 0 0 1px rgba(255,255,255,0.1),0 0 6px rgba(0,0,0,0.2);
}
.about a {
color:#333;
text-decoration:none;
border-radius:2px;
-webkit-transition:background 0.1s;
-moz-transition:background 0.1s;
-o-transition:background 0.1s;
transition:background 0.1s;
}
.about a:hover {
text-decoration:none;
background:#fafafa;
background:rgba(255,255,255,0.7);
}
.about-links {
height:30px;
}
.about-links > a {
float:left;
width:50%;
line-height:30px;
font-size:12px;
}
.about-author {
margin-top:5px;
}
.about-author > a {
padding:1px 3px;
margin:0 -1px;
}
body {
font:13px/20px 'Lucida Grande',Tahoma,Verdana,sans-serif;
color:#404040;
background:#2a2a2a url("../img/bg.png") 0 0 repeat;
}
.container {
margin:80px auto;
width:640px;
text-align:center;
}
.container .progress {
margin:0 auto;
width:400px;
}
.progress {
padding:4px;
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 {
position:relative;
height:16px;
border-radius:4px;
-webkit-transition:0.4s linear;
-moz-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;
-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:'';
position:absolute;
top:0;
left:0;
right:0;
}
.progress-bar:before {
bottom:0;
background:url("../img/stripes.png") 0 0 repeat;
border-radius:4px 4px 0 0;
}
.progress-bar:after {
z-index:2;
bottom:45%;
border-radius:4px;
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:-o-linear-gradient(top,rgba(255,255,255,0.3),rgba(255,255,255,0.05));
background-image:linear-gradient(to bottom,rgba(255,255,255,0.3),rgba(255,255,255,0.05));
}
#five:checked ~ .progress > .progress-bar {
width:5%;
background-color:#f63a0f;
}
#twentyfive:checked ~ .progress > .progress-bar {
width:25%;
background-color:#f27011;
}
#fifty:checked ~ .progress > .progress-bar {
width:50%;
background-color:#f2b01e;
}
#seventyfive:checked ~ .progress > .progress-bar {
width:75%;
background-color:#f2d31b;
}
#onehundred:checked ~ .progress > .progress-bar {
width:100%;
background-color:#86e01e;
}
.radio {
display:none;
}
.label {
display:inline-block;
margin:0 5px 20px;
padding:3px 8px;
color:#aaa;
text-shadow:0 1px black;
border-radius:3px;
cursor:pointer;
}
.radio:checked + .label {
color:white;
background:rgba(0,0,0,0.25);
}