Template:SZU China/Playground/pie chart/CSS

html, body {

   margin: 0 auto;
   padding: 0 auto;
   font-family:"Times New Roman", arial, Verdana;
   color: #817a53;
   background: #d8d6cb;

} p {

   margin: 0;
   padding: 4px;

} div {

   margin: 0;
   padding: 0;

}

1. wrapper {

   position:absolute;
   top: 20px;
   left: 50%;
   width:740px;
   height:680px;
   margin: 0 0 0 -370px;
   padding: 0;

} /* Header start */

#header {
   text-align: center;
   margin: 0 0 30px 0;
   padding: 15px 0 15px 0;

}

1. txt_title {

   color: #3d381b;
   font-size: 34px;
   text-align:center;
   text-shadow: 0 -1px 2px rgba(255, 255, 255, .5);

}

1. txt_subtitle {

   font-size: 17px;
   text-align: center;

} /* Header end */

/* Label and percentage data start */

#labels {
   position: absolute;
   left: 540px;
   top: 150px;
   width: 120px;

}

1. percentage_wrapper {

   position: absolute;
   left: 665px;
   top: 151px;
   width: 50px;
   height: 124px;
   overflow: hidden;

}

1. percentage {

   position: absolute;
   clip: rect(0px, 50px, 125px, 0px);

}

1. labels ul, #percentage ul {

   list-style-type: none;
   margin: 0;
   padding: 0;
   font-size: 14px;
   color: #333333;

}

1. labels li, #percentage li {

   display: block;
   margin: 0;
   padding: 0 0 8px 0;

}

1. labels span {

   display: block;
   float: left;
   width:8px;
   height: 8px;
   margin: 5px 5px 0 0;
   background: #FFFFFF;

}

1. labels ul :nth-child(1) span {

   background: #0092B9;

}

1. labels ul :nth-child(2) span {

   background: #86AD00;

}

1. labels ul :nth-child(3) span {

   background: #F2B705;

}

1. labels ul :nth-child(4) span {

   background: #D97904;

}

1. labels ul :nth-child(5) span {

   background: #BC3603;

}

1. percentage p {

   display: block;
   width: 50px;
   margin: 0;
   padding: 0 0 8px 0;
   float: left;

}

1. percentage ul {

   position: absolute;
   width: 300px;

}

1. q2_2010:target #percentage ul {

   left: -0px;

}

1. q1_2010:target #percentage ul {

   left: -50px;

}

1. q4_2009:target #percentage ul {

   left: -100px;

}

1. q3_2009:target #percentage ul {

   left: -150px;

}

1. q2_2009:target #percentage ul {

   left: -200px;

}

1. q1_2005:target #percentage ul {

   left: -250px;

} /* Label and percentage data end */

/* Slider (contains two chart div) start */

#slider {
   width:300px;
   height: 350px;
   margin: 0 auto;
   padding: 0 auto;
   overflow-y: hidden;
   overflow-x: auto;

}

1. slider::-webkit-scrollbar {

   /* webkit only */
   height: 12px;
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#beb8a1), to(#cfcab9));
   -webkit-border-radius: 6px;

}

1. slider::-webkit-scrollbar-thumb {

   /* webkit only */
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#8c8775), to(#7f7a6a));
   -webkit-border-radius: 6px;

}

1. pie_ico, #pyr_ico {

   position: absolute;
   width: 80px;
   height: 26px;
   top: 464px;
   text-align: center;

}

1. pie_ico {

   left: 137px

}

1. pyr_ico {

   left: 535px

} /* Slider end */

/* Charts start */

#chart_holder {
   width: 600px;
   height: 350px;
   margin: 0;
   padding: 0;

}

1. pyr_chart, #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)));

}

1. pyr_chart ul, #pie_chart ul {

   list-style-type: none;
   width: 300px;
   height: 300px;
   padding: 0;
   margin: 0;

}

1. pyr_chart li, #pie_chart li {

   position: absolute;
   top: 0px;
   width: 300px;
   height: 300px;
   padding: 0;
   margin: 0;

}

1. pie_chart p {

   width: 300px;
   height: 300px;
   padding: 0;
   margin: 0;

}

1. pie_chart li p {

   -webkit-transition: all .7s ease-out;

}

1. pie_chart span {

   display: block;
   width: 150px;
   height: 300px;

}

1. pie_chart ul :nth-child(odd) {

   clip: rect(0px, 300px, 300px, 150px);

}

1. 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;

}

1. c1_l span {

   background: #BC3603;
 

}

1. c1_r span {

   background: #BC3603;
  

}

1. c2_l span {

   background: #D97904;
 

}

1. c2_r span {

   background: #D97904;
   

}

1. c3_l span {

   background: #F2B705;
  

}

1. c3_r span {

   background: #F2B705;
   

}

1. c4_l span {

   background: #86AD00;
   

}

1. c4_r span {

   background: #86AD00;
  

}

1. c5_l span {

   background: #0092B9;
 

}

1. c5_r span {

   background: #0092B9;
   

} /*Pie chart data (degree value) */

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

}

1. 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);

}

1. 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);

}

1. 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);

}

1. 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);

}

1. 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);

}

1. 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);

}

1. pie_chart ul :nth-child(8) p, #q2_2010:target #pie_chart ul :nth-child(8) p {

   -moz-transform: rotate(126deg);
   -webkit-transform: rotate(126deg);
   -o-transform: rotate(126deg);

}

1. 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);

}

1. 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);

}

1. q1_2010:target #pie_chart ul :nth-child(1) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q1_2010:target #pie_chart ul :nth-child(2) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q1_2010:target #pie_chart ul :nth-child(3) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q1_2010:target #pie_chart ul :nth-child(4) p {

   -moz-transform: rotate(170deg);
   -webkit-transform: rotate(170deg);
   -o-transform: rotate(170deg);

}

1. q1_2010:target #pie_chart ul :nth-child(5) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q1_2010:target #pie_chart ul :nth-child(6) p {

   -moz-transform: rotate(153deg);
   -webkit-transform: rotate(153deg);
   -o-transform: rotate(153deg);

}

1. q1_2010:target #pie_chart ul :nth-child(7) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q1_2010:target #pie_chart ul :nth-child(8) p {

   -moz-transform: rotate(131deg);
   -webkit-transform: rotate(131deg);
   -o-transform: rotate(131deg);

}

1. q1_2010:target #pie_chart ul :nth-child(9) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q1_2010:target #pie_chart ul :nth-child(10) p {

   -moz-transform: rotate(42deg);
   -webkit-transform: rotate(42deg);
   -o-transform: rotate(42deg);

}

1. q4_2009:target #pie_chart ul :nth-child(1) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q4_2009:target #pie_chart ul :nth-child(2) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q4_2009:target #pie_chart ul :nth-child(3) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q4_2009:target #pie_chart ul :nth-child(4) p {

   -moz-transform: rotate(171deg);
   -webkit-transform: rotate(171deg);
   -o-transform: rotate(171deg);

}

1. q4_2009:target #pie_chart ul :nth-child(5) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q4_2009:target #pie_chart ul :nth-child(6) p {

   -moz-transform: rotate(154deg);
   -webkit-transform: rotate(154deg);
   -o-transform: rotate(154deg);

}

1. q4_2009:target #pie_chart ul :nth-child(7) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q4_2009:target #pie_chart ul :nth-child(8) p {

   -moz-transform: rotate(139deg);
   -webkit-transform: rotate(139deg);
   -o-transform: rotate(139deg);

}

1. q4_2009:target #pie_chart ul :nth-child(9) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q4_2009:target #pie_chart ul :nth-child(10) p {

   -moz-transform: rotate(50deg);
   -webkit-transform: rotate(50deg);
   -o-transform: rotate(50deg);

}

1. q3_2009:target #pie_chart ul :nth-child(1) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q3_2009:target #pie_chart ul :nth-child(2) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q3_2009:target #pie_chart ul :nth-child(3) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q3_2009:target #pie_chart ul :nth-child(4) p {

   -moz-transform: rotate(172deg);
   -webkit-transform: rotate(172deg);
   -o-transform: rotate(172deg);

}

1. q3_2009:target #pie_chart ul :nth-child(5) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q3_2009:target #pie_chart ul :nth-child(6) p {

   -moz-transform: rotate(156deg);
   -webkit-transform: rotate(156deg);
   -o-transform: rotate(156deg);

}

1. q3_2009:target #pie_chart ul :nth-child(7) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q3_2009:target #pie_chart ul :nth-child(8) p {

   -moz-transform: rotate(145deg);
   -webkit-transform: rotate(145deg);
   -o-transform: rotate(145deg);

}

1. q3_2009:target #pie_chart ul :nth-child(9) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q3_2009:target #pie_chart ul :nth-child(10) p {

   -moz-transform: rotate(61deg);
   -webkit-transform: rotate(61deg);
   -o-transform: rotate(61deg);

}

1. q2_2009:target #pie_chart ul :nth-child(1) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q2_2009:target #pie_chart ul :nth-child(2) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q2_2009:target #pie_chart ul :nth-child(3) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q2_2009:target #pie_chart ul :nth-child(4) p {

   -moz-transform: rotate(172deg);
   -webkit-transform: rotate(172deg);
   -o-transform: rotate(172deg);

}

1. q2_2009:target #pie_chart ul :nth-child(5) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q2_2009:target #pie_chart ul :nth-child(6) p {

   -moz-transform: rotate(158deg);
   -webkit-transform: rotate(158deg);
   -o-transform: rotate(158deg);

}

1. q2_2009:target #pie_chart ul :nth-child(7) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q2_2009:target #pie_chart ul :nth-child(8) p {

   -moz-transform: rotate(149deg);
   -webkit-transform: rotate(149deg);
   -o-transform: rotate(149deg);

}

1. q2_2009:target #pie_chart ul :nth-child(9) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q2_2009:target #pie_chart ul :nth-child(10) p {

   -moz-transform: rotate(66deg);
   -webkit-transform: rotate(66deg);
   -o-transform: rotate(66deg);

}

1. q1_2005:target #pie_chart ul :nth-child(1) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q1_2005:target #pie_chart ul :nth-child(2) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q1_2005:target #pie_chart ul :nth-child(3) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q1_2005:target #pie_chart ul :nth-child(4) p {

   -moz-transform: rotate(176deg);
   -webkit-transform: rotate(176deg);
   -o-transform: rotate(176deg);

}

1. q1_2005:target #pie_chart ul :nth-child(5) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q1_2005:target #pie_chart ul :nth-child(6) p {

   -moz-transform: rotate(167deg);
   -webkit-transform: rotate(167deg);
   -o-transform: rotate(167deg);

}

1. q1_2005:target #pie_chart ul :nth-child(7) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q1_2005:target #pie_chart ul :nth-child(8) p {

   -moz-transform: rotate(167deg);
   -webkit-transform: rotate(167deg);
   -o-transform: rotate(167deg);

}

1. q1_2005:target #pie_chart ul :nth-child(9) p {

   -moz-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -o-transform: rotate(180deg);

}

1. q1_2005:target #pie_chart ul :nth-child(10) p {

   -moz-transform: rotate(143deg);
   -webkit-transform: rotate(143deg);
   -o-transform: rotate(143deg);

}

1. pyr_chart li {

   -webkit-transition: all .5s;

}

1. pyr_chart ul :nth-child(1) {

   background: #BC3603;

}

1. pyr_chart ul :nth-child(2) {

   background: #D97904;   
   height:292px;

}

1. pyr_chart ul :nth-child(3) {

   background: #F2B705;
   
   height:277px;

}

1. pyr_chart ul :nth-child(4) {

   background: #86AD00;

   height:255px;

}

1. pyr_chart ul :nth-child(5) {

   background: #0092B9;

   height: 180px;

}

1. pyr_chart ul :nth-child(6) {

   width: 0;
   height: 0;
   border-color: transparent #d8d6cb transparent #d8d6cb;
   border-width: 0px 150px 300px 150px;
   border-style:solid;

} /*Pyramid chart data (height value) */

#q1_2010:target #pyr_chart ul :nth-child(2) {
   height: 292px;

}

1. q1_2010:target #pyr_chart ul :nth-child(3) {

   height: 277px;

}

1. q1_2010:target #pyr_chart ul :nth-child(4) {

   height: 259px;

}

1. q1_2010:target #pyr_chart ul :nth-child(5) {

   height: 185px;

}

1. q4_2009:target #pyr_chart ul :nth-child(2) {

   height: 292px;

}

1. q4_2009:target #pyr_chart ul :nth-child(3) {

   height: 279px;

}

1. q4_2009:target #pyr_chart ul :nth-child(4) {

   height: 266px;

}

1. q4_2009:target #pyr_chart ul :nth-child(5) {

   height: 192px;

}

1. q3_2009:target #pyr_chart ul :nth-child(2) {

   height: 293px;

}

1. q3_2009:target #pyr_chart ul :nth-child(3) {

   height: 280px;

}

1. q3_2009:target #pyr_chart ul :nth-child(4) {

   height: 271px;

}

1. q3_2009:target #pyr_chart ul :nth-child(5) {

   height: 201px;

}

1. q2_2009:target #pyr_chart ul :nth-child(2) {

   height: 293px;

}

1. q2_2009:target #pyr_chart ul :nth-child(3) {

   height: 282px;

}

1. q2_2009:target #pyr_chart ul :nth-child(4) {

   height: 274px;

}

1. q2_2009:target #pyr_chart ul :nth-child(5) {

   height: 205px;

}

1. q1_2005:target #pyr_chart ul :nth-child(2) {

   height: 297px;

}

1. q1_2005:target #pyr_chart ul :nth-child(3) {

   height: 290px;

}

1. q1_2005:target #pyr_chart ul :nth-child(4) {

   height: 290px;

}

1. q1_2005:target #pyr_chart ul :nth-child(5) {

   height: 269px;

} /* Charts end */

/* button panel start */

#btn_panel {
   position: relative;
   margin-left:auto;
   margin-right:auto;
   width: 420px;
   padding-top: 35px;

}

1. btn_panel ul {

   list-style-type: none;
   display: inline;
   padding: 0;
   margin: 0;

}

1. btn_panel li {

   float: left;
   padding: 5px;

}

1. btn_panel span:first-child {

   display: block;
   font-size: 22px;
   padding: 5px 0 0 0

}

1. btn_panel span:last-child {

   display: block;
   font-size: 16px;
   padding: 7px 0 0 0;

}

1. btn_panel li a {

   display: block;
   width: 60px;
   height: 65px;
   text-decoration: none;
   text-align: center;
   color: #565446;
   background: #fcfcfc;
   background-image: -moz-linear-gradient(100% 40% 270deg, #FFFFFF, #eaeaea, #f5f5f5 100%);
   background-image: -webkit-gradient(linear, 0% 45%, 0% 69%, from(#FFFFFF), to(#EDEDED), color-stop(.4, #F7F7F7));
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
   -moz-box-shadow: #c0bca7 0px 1px 0px;
   -webkit-box-shadow: #c0bca7 0px 1px 0px;
   box-shadow: #c0bca7 0px 1px 0px;
   -webkit-transition: all .3s ease-out;
   opacity:.5;

}

1. btn_panel li:last-child a {

   color:#c33702;
   -moz-transform: scale(1.1);
   -webkit-transform: scale(1.1);
   -o-transform: scale(1.1);
   opacity:1;

}

1. q1_2005:target #btn_panel li:last-child a, #q2_2009:target #btn_panel li:last-child a, #q3_2009:target #btn_panel li:last-child a, #q4_2009:target #btn_panel li:last-child a, #q1_2010:target #btn_panel li:last-child a {

   color:#565446;
   -moz-transform: scale(1);
   -webkit-transform: scale(1);
   -o-transform: scale(1);
   opacity:.5;

}

1. q1_2005:target #btn_panel li:nth-child(1) a {

   color:#c33702;
   -moz-transform: scale(1.1);
   -webkit-transform: scale(1.1);
   -o-transform: scale(1.1);
   opacity:1;

}

1. q2_2009:target #btn_panel li:nth-child(2) a {

   color:#c33702;
   -moz-transform: scale(1.1);
   -webkit-transform: scale(1.1);
   -o-transform: scale(1.1);
   opacity:1;

}

1. q3_2009:target #btn_panel li:nth-child(3) a {

   color:#c33702;
   -moz-transform: scale(1.1);
   -webkit-transform: scale(1.1);
   -o-transform: scale(1.1);
   opacity:1;

}

1. q4_2009:target #btn_panel li:nth-child(4) a {

   color:#c33702;
   -moz-transform: scale(1.1);
   -webkit-transform: scale(1.1);
   -o-transform: scale(1.1);
   opacity:1;

}

1. q1_2010:target #btn_panel li:nth-child(5) a {

   color:#c33702;
   -moz-transform: scale(1.1);
   -webkit-transform: scale(1.1);
   -o-transform: scale(1.1);
   opacity:1;

} /* button panel end */