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); }