------------------------------------------------DEMO-----------------------------------------
------------------------------------------------CSS3-----------------------------------------
div { margin:0; padding:0;}
#labels { position:absolute; left:340px; top:70px; width:120px; }
#percentage_wrapper { position:absolute; left:665px; top:151px; width:50px; height:124px; overflow:hidden; }
#percentage { position:absolute; clip:rect(0px, 50px, 125px, 0px); }
#labels ul, #percentage ul { list-style-type:none; margin:0; padding:0; font-size:14px; color:#333333; }
#labels li, #percentage li { display:block; margin:0; padding:0 0 8px 0; }
#labels span{ display:block; float:left; width:8px; height:8px; margin:5px 5px 0 0 ; background:#FFFFFF; }
#labels ul :nth-child(3) span{ background:#0092B9; } #labels ul :nth-child(1) span{ background:#86AD00; }
#labels ul :nth-child(2) span{ background:#F2B705; } #labels ul :nth-child(5) span{ background:#D97904; }
#labels ul :nth-child(4) span{ background:#BC3603; }
#pie_chart {position:relative;float:left;width:300px;height:300px;margin:0;padding:0;
-webkit-box-reflect:below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.2) ));}
#pie_chart ul {list-style-type:none;width:300px;height:300px;padding:0;margin:0;}
#pie_chart li {position:absolute;top:0px;width:300px;height:300px;padding:0;margin:0;}
#pie_chart p {width:300px;height:300px;padding:0;margin:0;}
#pie_chart li p { -webkit-transition:all .7s ease-out;}
#pie_chart span { display:block; width:150px; height:300px;}
#pie_chart ul :nth-child(odd) { clip:rect(0px, 300px, 300px, 150px);}
#pie_chart ul :nth-child(even) { clip:rect(0px, 150px, 300px, 0px);}
.pie_left{-moz-border-radius-topleft:150px;-moz-border-radius-bottomleft:150px;-webkit-border-top-left-radius:150px;-webkit-border-bottom-left-radius:150px;
border-top-left-radius:150px;border-bottom-left-radius:150px;}
.pie_right{margin-left:150px;-moz-border-radius-topright:150px;-moz-border-radius-bottomright:150px;-webkit-border-top-right-radius:150px;
-webkit-border-bottom-right-radius:150px;border-top-right-radius:150px;border-bottom-right-radius:150px;}
#c2_l span {background:#BC3603;background-image:-moz-radial-gradient(left 45deg, circle closest-corner, #de3d00 10%, #BC3603 100%);
background-image:-webkit-gradient(radial, left center, 10, left center, 150, from(#de3d00), to(#BC3603));}
#c2_r span {background:#BC3603;background-image:-moz-radial-gradient(right 45deg, circle closest-corner, #de3d00 10%, #BC3603 100%);
background-image:-webkit-gradient(radial, right center, 10, right center, 150, from(#de3d00), to(#BC3603));}
#c1_l span {background:#D97904;background-image:-moz-radial-gradient(left 45deg, circle closest-corner, #fb8a00 10%, #D97904 100%);
background-image:-webkit-gradient(radial, left center, 10, left center, 150, from(#fb8a00), to(#D97904));}
#c1_r span {background:#D97904;background-image:-moz-radial-gradient(right 45deg, circle closest-corner, #fb8a00 10%, #D97904 100%);
background-image:-webkit-gradient(radial, right center, 10, right center, 150, from(#fb8a00), to(#D97904));}
#c4_l span { background:#F2B705; background-image:-moz-radial-gradient(left 45deg, circle closest-corner, #ffc517 10%, #F2B705 100%);
background-image:-webkit-gradient(radial, left center, 10, left center, 150, from(#ffc517), to(#F2B705));}
#c4_r span {background:#F2B705;background-image:-moz-radial-gradient(right 45deg, circle closest-corner, #ffc517 10%, #F2B705 100%);
background-image:-webkit-gradient(radial, right center, 10, right center, 150, from(#ffc517), to(#F2B705));}
#c5_l span {background:#86AD00;background-image:-moz-radial-gradient(left 45deg, circle closest-corner, #9bc800 10%, #86AD00 100%);
background-image:-webkit-gradient(radial, left center, 10, left center, 150, from(#9bc800), to(#86AD00));}
#c5_r span {background:#86AD00;background-image:-moz-radial-gradient(right 45deg, circle closest-corner, #9bc800 10%, #86AD00 100%);
background-image:-webkit-gradient(radial, right center, 10, right center, 150, from(#9bc800), to(#86AD00));}
#c3_l span{ background:#0092B9;background-image:-moz-radial-gradient(left 45deg, circle closest-corner, #00addb 10%, #0092B9 100%);
background-image:-webkit-gradient(radial, left center, 10, left center, 150, from(#00addb), to(#0092B9));}
#pie_chart ul :nth-child(1) p, #q2_2010:target #pie_chart ul :nth-child(1) p{ -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg);}
#pie_chart ul :nth-child(2) p, #q2_2010:target #pie_chart ul :nth-child(2) p{ -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg);}
#pie_chart ul :nth-child(3) p, #q2_2010:target #pie_chart ul :nth-child(3) p{ -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg);}
#pie_chart ul :nth-child(4) p, #q2_2010:target #pie_chart ul :nth-child(4) p{ -moz-transform:rotate(170deg); -webkit-transform:rotate(170deg); -o-transform:rotate(170deg);}
#pie_chart ul :nth-child(5) p, #q2_2010:target #pie_chart ul :nth-child(5) p{ -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg);}
#pie_chart ul :nth-child(6) p, #q2_2010:target #pie_chart ul :nth-child(6) p{ -moz-transform:rotate(152deg); -webkit-transform:rotate(152deg); -o-transform:rotate(152deg);}
#pie_chart ul :nth-child(7) p, #q2_2010:target #pie_chart ul :nth-child(7) p{ -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg);}
#pie_chart ul :nth-child(
p, #q2_2010:target #pie_chart ul :nth-child(
p{ -moz-transform:rotate(126deg); -webkit-transform:rotate(126deg); -o-transform:rotate(126deg);}
#pie_chart ul :nth-child(9) p, #q2_2010:target #pie_chart ul :nth-child(9) p{ -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg);}
#pie_chart ul :nth-child(10) p, #q2_2010:target #pie_chart ul :nth-child(10) p{ -moz-transform:rotate(36deg); -webkit-transform:rotate(36deg); -o-transform:rotate(36deg);}
#q1_2005:target #pie_chart ul :nth-child(1) p{ -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg);}
#q1_2005:target #pie_chart ul :nth-child(2) p{ -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg);}
#q1_2005:target #pie_chart ul :nth-child(3) p{ -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg);}
#q1_2005:target #pie_chart ul :nth-child(4) p{ -moz-transform:rotate(176deg); -webkit-transform:rotate(176deg); -o-transform:rotate(176deg);}
#q1_2005:target #pie_chart ul :nth-child(5) p{ -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg);}
#q1_2005:target #pie_chart ul :nth-child(6) p{ -moz-transform:rotate(167deg); -webkit-transform:rotate(167deg); -o-transform:rotate(167deg);}
#q1_2005:target #pie_chart ul :nth-child(7) p{ -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg);}
#q1_2005:target #pie_chart ul :nth-child(
p{ -moz-transform:rotate(167deg); -webkit-transform:rotate(167deg); -o-transform:rotate(167deg);}
#q1_2005:target #pie_chart ul :nth-child(9) p{ -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg);}
#q1_2005:target #pie_chart ul :nth-child(10) p{ -moz-transform:rotate(143deg); -webkit-transform:rotate(143deg); -o-transform:rotate(143deg);}
.hint--right:before { border-right-color: #383838; } .hint--right:before { margin-left: -12px; margin-bottom: -6px; }
.hint--right:after { margin-bottom: -14px; } .hint--right:before, .hint--right:after { left: 100%; bottom: 50%; }
.hint--right:hover:after, .hint--right:hover:before, .hint--right:focus:after, .hint--right:focus:before { -webkit-transform: translateX(8px);
-moz-transform: translateX(8px); transform: translateX(8px); } .hint--error.hint--right:before { border-right-color: #b34e4d; }
.hint--warning.hint--right:before { border-right-color: #c09854; } .hint--info.hint--right:before { border-right-color: #3986ac; }
.hint--success.hint--right:before { border-right-color: #458746; }
.hint--always.hint--right:after, .hint--always.hint--right:before { -webkit-transform: translateX(8px); -moz-transform: translateX(8px); transform: translateX(8px); }
.hint, [data-hint] { position: relative; display: inline-block; }
.hint:before, .hint:after, [data-hint]:before, [data-hint]:after { position: absolute; -webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: hidden; opacity: 0; z-index: 1000000; pointer-events: none;
-webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; transition: 0.3s ease; }
.hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before,
[data-hint]:focus:after { visibility: visible; opacity: 1; }
.hint:before, [data-hint]:before { content: ''; position: absolute; background: transparent; border: 6px solid transparent; z-index: 1000001; }
.hint:after, [data-hint]:after { content: attr(data-hint); background: #383838; color: white; text-shadow: 0 -1px 0px black; padding: 8px 10px;
font-size: 12px; line-height: 12px; white-space: nowrap; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); }
------------------------------------------------HTML5------------------------------------------
