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 */

  1. 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 */

  1. 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; }
  2. labels ul :nth-child(2) span{ background: #86AD00; }
  3. labels ul :nth-child(3) span{ background: #F2B705; }
  4. labels ul :nth-child(4) span{ background: #D97904; }
  5. 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; }
  2. q1_2010:target #percentage ul { left: -50px; }
  3. q4_2009:target #percentage ul { left: -100px; }
  4. q3_2009:target #percentage ul { left: -150px; }
  5. q2_2009:target #percentage ul { left: -200px; }
  6. q1_2005:target #percentage ul { left: -250px; }

/* Label and percentage data end */

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

  1. 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}
  2. pyr_ico { left: 535px}

/* Slider end */

/* Charts start */

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

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

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

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

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

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

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

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

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

  1. c5_r span{

background: #0092B9; background-image: -moz-radial-gradient(right 45deg, circle closest-corner, #00addb 10%, #0092B9 100%); background-image: -webkit-gradient(radial, right center, 10, right center, 150, from(#00addb), to(#0092B9)); }

/*Pie chart data (degree value) */

  1. 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);}
  2. 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);}
  3. 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);}
  4. 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);}
  5. 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);}
  6. 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);}
  7. 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);}
  8. 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);}
  9. 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);}
  10. 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);}
  2. q1_2010:target #pie_chart ul :nth-child(2) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  3. q1_2010:target #pie_chart ul :nth-child(3) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  4. q1_2010:target #pie_chart ul :nth-child(4) p{ -moz-transform: rotate(170deg); -webkit-transform: rotate(170deg); -o-transform: rotate(170deg);}
  5. q1_2010:target #pie_chart ul :nth-child(5) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  6. q1_2010:target #pie_chart ul :nth-child(6) p{ -moz-transform: rotate(153deg); -webkit-transform: rotate(153deg); -o-transform: rotate(153deg);}
  7. q1_2010:target #pie_chart ul :nth-child(7) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  8. q1_2010:target #pie_chart ul :nth-child(8) p{ -moz-transform: rotate(131deg); -webkit-transform: rotate(131deg); -o-transform: rotate(131deg);}
  9. q1_2010:target #pie_chart ul :nth-child(9) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  10. 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);}
  2. q4_2009:target #pie_chart ul :nth-child(2) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  3. q4_2009:target #pie_chart ul :nth-child(3) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  4. q4_2009:target #pie_chart ul :nth-child(4) p{ -moz-transform: rotate(171deg); -webkit-transform: rotate(171deg); -o-transform: rotate(171deg);}
  5. q4_2009:target #pie_chart ul :nth-child(5) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  6. q4_2009:target #pie_chart ul :nth-child(6) p{ -moz-transform: rotate(154deg); -webkit-transform: rotate(154deg); -o-transform: rotate(154deg);}
  7. q4_2009:target #pie_chart ul :nth-child(7) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  8. q4_2009:target #pie_chart ul :nth-child(8) p{ -moz-transform: rotate(139deg); -webkit-transform: rotate(139deg); -o-transform: rotate(139deg);}
  9. q4_2009:target #pie_chart ul :nth-child(9) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  10. 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);}
  2. q3_2009:target #pie_chart ul :nth-child(2) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  3. q3_2009:target #pie_chart ul :nth-child(3) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  4. q3_2009:target #pie_chart ul :nth-child(4) p{ -moz-transform: rotate(172deg); -webkit-transform: rotate(172deg); -o-transform: rotate(172deg);}
  5. q3_2009:target #pie_chart ul :nth-child(5) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  6. q3_2009:target #pie_chart ul :nth-child(6) p{ -moz-transform: rotate(156deg); -webkit-transform: rotate(156deg); -o-transform: rotate(156deg);}
  7. q3_2009:target #pie_chart ul :nth-child(7) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  8. q3_2009:target #pie_chart ul :nth-child(8) p{ -moz-transform: rotate(145deg); -webkit-transform: rotate(145deg); -o-transform: rotate(145deg);}
  9. q3_2009:target #pie_chart ul :nth-child(9) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  10. 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);}
  2. q2_2009:target #pie_chart ul :nth-child(2) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  3. q2_2009:target #pie_chart ul :nth-child(3) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  4. q2_2009:target #pie_chart ul :nth-child(4) p{ -moz-transform: rotate(172deg); -webkit-transform: rotate(172deg); -o-transform: rotate(172deg);}
  5. q2_2009:target #pie_chart ul :nth-child(5) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  6. q2_2009:target #pie_chart ul :nth-child(6) p{ -moz-transform: rotate(158deg); -webkit-transform: rotate(158deg); -o-transform: rotate(158deg);}
  7. q2_2009:target #pie_chart ul :nth-child(7) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  8. q2_2009:target #pie_chart ul :nth-child(8) p{ -moz-transform: rotate(149deg); -webkit-transform: rotate(149deg); -o-transform: rotate(149deg);}
  9. q2_2009:target #pie_chart ul :nth-child(9) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  10. 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);}
  2. q1_2005:target #pie_chart ul :nth-child(2) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  3. q1_2005:target #pie_chart ul :nth-child(3) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  4. q1_2005:target #pie_chart ul :nth-child(4) p{ -moz-transform: rotate(176deg); -webkit-transform: rotate(176deg); -o-transform: rotate(176deg);}
  5. q1_2005:target #pie_chart ul :nth-child(5) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  6. q1_2005:target #pie_chart ul :nth-child(6) p{ -moz-transform: rotate(167deg); -webkit-transform: rotate(167deg); -o-transform: rotate(167deg);}
  7. q1_2005:target #pie_chart ul :nth-child(7) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  8. q1_2005:target #pie_chart ul :nth-child(8) p{ -moz-transform: rotate(167deg); -webkit-transform: rotate(167deg); -o-transform: rotate(167deg);}
  9. q1_2005:target #pie_chart ul :nth-child(9) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
  10. 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; background-image: -moz-radial-gradient(center 0deg, circle closest-corner, #de3d00 10%, #BC3603 100%); background-image: -webkit-gradient(radial, center center, 10, center center, 150, from(#de3d00), to(#BC3603)); }

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

background: #D97904; background-image: -moz-radial-gradient(center 0deg, circle closest-corner, #fb8a00 10%, #D97904 100%); background-image: -webkit-gradient(radial, center center, 10, center center, 150, from(#fb8a00), to(#D97904)); height:292px;

}

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

background: #F2B705; background-image: -moz-radial-gradient(center 0deg, circle closest-corner, #ffc517 10%, #F2B705 100%); background-image: -webkit-gradient(radial, center center, 10, center center, 150, from(#ffc517), to(#F2B705)); height:277px; }

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

background: #86AD00; background-image: -moz-radial-gradient(center 0deg, circle closest-corner, #9bc800 10%, #86AD00 100%); background-image: -webkit-gradient(radial, center center, 10, center center, 150, from(#9bc800), to(#86AD00)); height:255px; }

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

background: #0092B9; background-image: -moz-radial-gradient(center 0deg, circle closest-corner, #00addb 10%, #0092B9 100%); background-image: -webkit-gradient(radial, center center, 10, center center, 150, from(#00addb), to(#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) */

  1. q1_2010:target #pyr_chart ul :nth-child(2) { height: 292px;}
  2. q1_2010:target #pyr_chart ul :nth-child(3) { height: 277px;}
  3. q1_2010:target #pyr_chart ul :nth-child(4) { height: 259px;}
  4. q1_2010:target #pyr_chart ul :nth-child(5) { height: 185px;}
  1. q4_2009:target #pyr_chart ul :nth-child(2) { height: 292px;}
  2. q4_2009:target #pyr_chart ul :nth-child(3) { height: 279px;}
  3. q4_2009:target #pyr_chart ul :nth-child(4) { height: 266px;}
  4. q4_2009:target #pyr_chart ul :nth-child(5) { height: 192px;}
  1. q3_2009:target #pyr_chart ul :nth-child(2) { height: 293px;}
  2. q3_2009:target #pyr_chart ul :nth-child(3) { height: 280px;}
  3. q3_2009:target #pyr_chart ul :nth-child(4) { height: 271px;}
  4. q3_2009:target #pyr_chart ul :nth-child(5) { height: 201px;}
  1. q2_2009:target #pyr_chart ul :nth-child(2) { height: 293px;}
  2. q2_2009:target #pyr_chart ul :nth-child(3) { height: 282px;}
  3. q2_2009:target #pyr_chart ul :nth-child(4) { height: 274px;}
  4. q2_2009:target #pyr_chart ul :nth-child(5) { height: 205px;}
  1. q1_2005:target #pyr_chart ul :nth-child(2) { height: 297px;}
  2. q1_2005:target #pyr_chart ul :nth-child(3) { height: 290px;}
  3. q1_2005:target #pyr_chart ul :nth-child(4) { height: 290px;}
  4. q1_2005:target #pyr_chart ul :nth-child(5) { height: 269px;}

/* Charts end */

/* button panel start */

  1. 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 }
  2. 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;}
  2. 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;}
  3. 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;}
  4. 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;}
  5. 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;}
  6. 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 */