Difference between revisions of "Template:SZU China/Playground/pie chart/CSS"

(Created page with "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...")
 
Line 1: Line 1:
 
html, body {
 
html, body {
−
margin: 0 auto;
+
    margin: 0 auto;
−
padding: 0 auto;
+
    padding: 0 auto;
−
font-family: "Times New Roman", arial, Verdana;
+
    font-family:"Times New Roman", arial, Verdana;
−
color: #817a53;
+
    color: #817a53;
−
background: #d8d6cb;
+
    background: #d8d6cb;
 +
}
 +
p {
 +
    margin: 0;
 +
    padding: 4px;
 +
}
 +
div {
 +
    margin: 0;
 +
    padding: 0;
 
}
 
}
−
 
−
p { margin: 0; padding: 4px; }
 
−
 
−
div { margin: 0; padding: 0;}
 
−
 
 
#wrapper {
 
#wrapper {
−
position:absolute;
+
    position:absolute;
−
top: 20px;
+
    top: 20px;
−
left: 50%;
+
    left: 50%;
−
width:740px;
+
    width:740px;
−
height:680px;
+
    height:680px;
−
margin: 0 0 0 -370px;
+
    margin: 0 0 0 -370px;
−
padding: 0;
+
    padding: 0;
 
}
 
}
−
 
 
/* Header start */
 
/* Header start */
−
#header {
+
#header {
−
text-align: center;
+
    text-align: center;
−
margin: 0 0 30px 0;
+
    margin: 0 0 30px 0;
−
padding: 15px 0 15px 0;
+
    padding: 15px 0 15px 0;
 
}
 
}
−
 
 
#txt_title {
 
#txt_title {
−
color: #3d381b;
+
    color: #3d381b;
−
font-size: 34px;
+
    font-size: 34px;
−
text-align:center;
+
    text-align:center;
−
text-shadow: 0 -1px 2px rgba(255,255,255,.5);
+
    text-shadow: 0 -1px 2px rgba(255, 255, 255, .5);
 
}
 
}
−
 
 
#txt_subtitle {
 
#txt_subtitle {
−
font-size: 17px;
+
    font-size: 17px;
−
text-align: center;
+
    text-align: center;
 
}
 
}
 
/* Header end */
 
/* Header end */
−
 
+
 
/* Label and percentage data start */
 
/* Label and percentage data start */
−
#labels {
+
#labels {
−
position: absolute;
+
    position: absolute;
−
left: 540px;
+
    left: 540px;
−
top: 150px;
+
    top: 150px;
−
width: 120px;
+
    width: 120px;
 
}
 
}
−
 
 
#percentage_wrapper {
 
#percentage_wrapper {
−
position: absolute;
+
    position: absolute;
−
left: 665px;
+
    left: 665px;
−
top: 151px;
+
    top: 151px;
−
width: 50px;
+
    width: 50px;
−
height: 124px;
+
    height: 124px;
−
overflow: hidden;
+
    overflow: hidden;
 
}
 
}
−
 
 
#percentage {
 
#percentage {
−
position: absolute;
+
    position: absolute;
−
clip: rect(0px, 50px, 125px, 0px);
+
    clip: rect(0px, 50px, 125px, 0px);
 
}
 
}
−
 
 
#labels ul, #percentage ul {
 
#labels ul, #percentage ul {
−
list-style-type: none;
+
    list-style-type: none;
−
margin: 0;
+
    margin: 0;
−
padding: 0;
+
    padding: 0;
−
font-size: 14px;
+
    font-size: 14px;
−
color: #333333;
+
    color: #333333;
 
}
 
}
−
 
 
#labels li, #percentage li {
 
#labels li, #percentage li {
−
display: block;
+
    display: block;
−
margin: 0;
+
    margin: 0;
−
padding: 0 0 8px 0;
+
    padding: 0 0 8px 0;
 
}
 
}
−
 
+
#labels span {
−
#labels span{
+
    display: block;
−
display: block;
+
    float: left;
−
float: left;
+
    width:8px;
−
width:8px;
+
    height: 8px;
−
height: 8px;
+
    margin: 5px 5px 0 0;
−
margin: 5px 5px 0 0 ;
+
    background: #FFFFFF;
−
background: #FFFFFF;
+
}
 +
#labels ul :nth-child(1) span {
 +
    background: #0092B9;
 +
}
 +
#labels ul :nth-child(2) span {
 +
    background: #86AD00;
 +
}
 +
#labels ul :nth-child(3) span {
 +
    background: #F2B705;
 +
}
 +
#labels ul :nth-child(4) span {
 +
    background: #D97904;
 +
}
 +
#labels ul :nth-child(5) span {
 +
    background: #BC3603;
 
}
 
}
−
 
−
#labels ul :nth-child(1) span{ background: #0092B9; }
 
−
#labels ul :nth-child(2) span{ background: #86AD00; }
 
−
#labels ul :nth-child(3) span{ background: #F2B705; }
 
−
#labels ul :nth-child(4) span{ background: #D97904; }
 
−
#labels ul :nth-child(5) span{ background: #BC3603; }
 
−
 
 
#percentage p {
 
#percentage p {
−
display: block;
+
    display: block;
−
width: 50px;
+
    width: 50px;
−
margin: 0;
+
    margin: 0;
−
padding: 0 0 8px 0;
+
    padding: 0 0 8px 0;
−
float: left;
+
    float: left;
 
}
 
}
−
 
 
#percentage ul {
 
#percentage ul {
−
position: absolute;
+
    position: absolute;
−
width: 300px;
+
    width: 300px;
 +
}
 +
#q2_2010:target #percentage ul {
 +
    left: -0px;
 +
}
 +
#q1_2010:target #percentage ul {
 +
    left: -50px;
 +
}
 +
#q4_2009:target #percentage ul {
 +
    left: -100px;
 +
}
 +
#q3_2009:target #percentage ul {
 +
    left: -150px;
 +
}
 +
#q2_2009:target #percentage ul {
 +
    left: -200px;
 +
}
 +
#q1_2005:target #percentage ul {
 +
    left: -250px;
 
}
 
}
−
 
−
#q2_2010:target #percentage ul { left: -0px; }
 
−
#q1_2010:target #percentage ul { left: -50px; }
 
−
#q4_2009:target #percentage ul { left: -100px; }
 
−
#q3_2009:target #percentage ul { left: -150px; }
 
−
#q2_2009:target #percentage ul { left: -200px; }
 
−
#q1_2005:target #percentage ul { left: -250px; }
 
 
/* Label and percentage data end */
 
/* Label and percentage data end */
−
 
+
 
/* Slider (contains two chart div) start */
 
/* Slider (contains two chart div) start */
−
#slider {
+
#slider {
−
width:300px;
+
    width:300px;
−
height: 350px;
+
    height: 350px;
−
margin: 0 auto;
+
    margin: 0 auto;
−
padding: 0 auto;
+
    padding: 0 auto;
−
overflow-y: hidden;
+
    overflow-y: hidden;
−
overflow-x: auto;
+
    overflow-x: auto;
 
}
 
}
−
 
+
#slider::-webkit-scrollbar {
−
#slider::-webkit-scrollbar { /* webkit only */
+
    /* webkit only */
−
  height: 12px;
+
    height: 12px;
−
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#beb8a1), to(#cfcab9));
+
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#beb8a1), to(#cfcab9));
−
  -webkit-border-radius: 6px;
+
    -webkit-border-radius: 6px;
 
}
 
}
−
+
#slider::-webkit-scrollbar-thumb {
−
#slider::-webkit-scrollbar-thumb { /* webkit only */
+
    /* webkit only */
−
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#8c8775), to(#7f7a6a));
+
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#8c8775), to(#7f7a6a));
−
  -webkit-border-radius: 6px;
+
    -webkit-border-radius: 6px;
 
}
 
}
−
 
 
#pie_ico, #pyr_ico {
 
#pie_ico, #pyr_ico {
−
position: absolute;
+
    position: absolute;
−
width: 80px;
+
    width: 80px;
−
height: 26px;
+
    height: 26px;
−
top: 464px;
+
    top: 464px;
−
text-align: center;
+
    text-align: center;
 +
}
 +
#pie_ico {
 +
    left: 137px
 +
}
 +
#pyr_ico {
 +
    left: 535px
 
}
 
}
−
 
−
#pie_ico { left: 137px}
 
−
#pyr_ico { left: 535px}
 
 
/* Slider end */
 
/* Slider end */
−
 
+
 
/* Charts start */
 
/* Charts start */
−
#chart_holder {
+
#chart_holder {
−
width: 600px;
+
    width: 600px;
−
height: 350px;
+
    height: 350px;
−
margin: 0;
+
    margin: 0;
−
padding: 0;
+
    padding: 0;
 
}
 
}
−
 
+
#pyr_chart, #pie_chart {
−
#pyr_chart , #pie_chart {
+
    position: relative;
−
position: relative;
+
    float: left;
−
float: left;
+
    width: 300px;
−
width: 300px;
+
    height: 300px;
−
height: 300px;
+
    margin: 0;
−
margin: 0;
+
    padding: 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)));
−
-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) ));
+
 
}
 
}
−
 
+
#pyr_chart ul, #pie_chart ul {
−
#pyr_chart ul , #pie_chart ul {
+
    list-style-type: none;
−
list-style-type: none;
+
    width: 300px;
−
width: 300px;
+
    height: 300px;
−
height: 300px;
+
    padding: 0;
−
padding: 0;
+
    margin: 0;
−
margin: 0;
+
 
}
 
}
−
 
 
#pyr_chart li, #pie_chart li {
 
#pyr_chart li, #pie_chart li {
−
position: absolute;
+
    position: absolute;
−
top: 0px;
+
    top: 0px;
−
width: 300px;
+
    width: 300px;
−
height: 300px;
+
    height: 300px;
−
padding: 0;
+
    padding: 0;
−
margin: 0;
+
    margin: 0;
 
}
 
}
−
 
 
#pie_chart p {
 
#pie_chart p {
−
width: 300px;
+
    width: 300px;
−
height: 300px;
+
    height: 300px;
−
padding: 0;
+
    padding: 0;
−
margin: 0;
+
    margin: 0;
 
}
 
}
−
 
+
#pie_chart li p {
−
#pie_chart li p { -webkit-transition: all .7s ease-out;}
+
    -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_chart span {
−
.pie_right{
+
    display: block;
−
margin-left: 150px;
+
    width: 150px;
−
-moz-border-radius-topright: 150px;
+
    height: 300px;
−
-moz-border-radius-bottomright: 150px;
+
}
−
-webkit-border-top-right-radius: 150px;
+
#pie_chart ul :nth-child(odd) {
−
-webkit-border-bottom-right-radius: 150px;
+
    clip: rect(0px, 300px, 300px, 150px);
−
border-top-right-radius: 150px;
+
}
−
border-bottom-right-radius: 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;
 
}
 
}
−
 
 
#c1_l span {
 
#c1_l span {
−
background: #BC3603;
+
    background: #BC3603;
−
background-image: -moz-radial-gradient(left 45deg, circle closest-corner, #de3d00 10%, #BC3603 100%);
+
    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));
+
    background-image: -webkit-gradient(radial, left center, 10, left center, 150, from(#de3d00), to(#BC3603));
 
}
 
}
−
 
 
#c1_r span {
 
#c1_r span {
−
background: #BC3603;
+
    background: #BC3603;
−
background-image: -moz-radial-gradient(right 45deg, circle closest-corner, #de3d00 10%, #BC3603 100%);
+
    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));
+
    background-image: -webkit-gradient(radial, right center, 10, right center, 150, from(#de3d00), to(#BC3603));
 
}
 
}
−
 
 
#c2_l span {
 
#c2_l span {
−
background: #D97904;
+
    background: #D97904;
−
background-image: -moz-radial-gradient(left 45deg, circle closest-corner, #fb8a00 10%, #D97904 100%);
+
    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));
+
    background-image: -webkit-gradient(radial, left center, 10, left center, 150, from(#fb8a00), to(#D97904));
 
}
 
}
−
 
 
#c2_r span {
 
#c2_r span {
−
background: #D97904;
+
    background: #D97904;
−
background-image: -moz-radial-gradient(right 45deg, circle closest-corner, #fb8a00 10%, #D97904 100%);
+
    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));
+
    background-image: -webkit-gradient(radial, right center, 10, right center, 150, from(#fb8a00), to(#D97904));
 
}
 
}
−
 
 
#c3_l span {
 
#c3_l span {
−
background: #F2B705;
+
    background: #F2B705;
−
background-image: -moz-radial-gradient(left 45deg, circle closest-corner, #ffc517 10%, #F2B705 100%);
+
    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));
+
    background-image: -webkit-gradient(radial, left center, 10, left center, 150, from(#ffc517), to(#F2B705));
 
}
 
}
−
 
 
#c3_r span {
 
#c3_r span {
−
background: #F2B705;
+
    background: #F2B705;
−
background-image: -moz-radial-gradient(right 45deg, circle closest-corner, #ffc517 10%, #F2B705 100%);
+
    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));
+
    background-image: -webkit-gradient(radial, right center, 10, right center, 150, from(#ffc517), to(#F2B705));
 
}
 
}
−
 
 
#c4_l span {
 
#c4_l span {
−
background: #86AD00;
+
    background: #86AD00;
−
background-image: -moz-radial-gradient(left 45deg, circle closest-corner, #9bc800 10%, #86AD00 100%);
+
    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));
+
    background-image: -webkit-gradient(radial, left center, 10, left center, 150, from(#9bc800), to(#86AD00));
 
}
 
}
−
 
 
#c4_r span {
 
#c4_r span {
−
background: #86AD00;
+
    background: #86AD00;
−
background-image: -moz-radial-gradient(right 45deg, circle closest-corner, #9bc800 10%, #86AD00 100%);
+
    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));
+
    background-image: -webkit-gradient(radial, right center, 10, right center, 150, from(#9bc800), to(#86AD00));
 
}
 
}
−
 
+
#c5_l span {
−
#c5_l span{  
+
    background: #0092B9;
−
background: #0092B9;
+
    background-image: -moz-radial-gradient(left 45deg, circle closest-corner, #00addb 10%, #0092B9 100%);
−
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));
−
background-image: -webkit-gradient(radial, left center, 10, left center, 150, from(#00addb), to(#0092B9));
+
 
}
 
}
−
 
+
#c5_r span {
−
#c5_r span{
+
    background: #0092B9;
−
background: #0092B9;
+
    background-image: -moz-radial-gradient(right 45deg, circle closest-corner, #00addb 10%, #0092B9 100%);
−
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));
−
background-image: -webkit-gradient(radial, right center, 10, right center, 150, from(#00addb), to(#0092B9));
+
 
}
 
}
−
 
 
/*Pie chart data (degree value) */
 
/*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);}
+
#pie_chart ul :nth-child(1) p, #q2_2010:target #pie_chart ul :nth-child(1) p {
−
#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);}
+
    -moz-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);}
+
    -webkit-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);}
+
    -o-transform: rotate(180deg);
−
#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(2) p, #q2_2010:target #pie_chart ul :nth-child(2) p {
−
#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);}
+
    -moz-transform: rotate(180deg);
−
#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);}
+
    -webkit-transform: rotate(180deg);
−
#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);}
+
    -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);}
+
}
−
 
+
#pie_chart ul :nth-child(3) p, #q2_2010:target #pie_chart ul :nth-child(3) p {
−
#q1_2010:target #pie_chart ul :nth-child(1) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
+
    -moz-transform: rotate(180deg);
−
#q1_2010:target #pie_chart ul :nth-child(2) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
+
    -webkit-transform: rotate(180deg);
−
#q1_2010:target #pie_chart ul :nth-child(3) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
+
    -o-transform: rotate(180deg);
−
#q1_2010:target #pie_chart ul :nth-child(4) p{ -moz-transform: rotate(170deg); -webkit-transform: rotate(170deg); -o-transform: rotate(170deg);}
+
}
−
#q1_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(4) p, #q2_2010:target #pie_chart ul :nth-child(4) p {
−
#q1_2010:target #pie_chart ul :nth-child(6) p{ -moz-transform: rotate(153deg); -webkit-transform: rotate(153deg); -o-transform: rotate(153deg);}
+
    -moz-transform: rotate(170deg);
−
#q1_2010:target #pie_chart ul :nth-child(7) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
+
    -webkit-transform: rotate(170deg);
−
#q1_2010:target #pie_chart ul :nth-child(8) p{ -moz-transform: rotate(131deg); -webkit-transform: rotate(131deg); -o-transform: rotate(131deg);}
+
    -o-transform: rotate(170deg);
−
#q1_2010:target #pie_chart ul :nth-child(9) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
+
}
−
#q1_2010:target #pie_chart ul :nth-child(10) p{ -moz-transform: rotate(42deg); -webkit-transform: rotate(42deg); -o-transform: rotate(42deg);}
+
#pie_chart ul :nth-child(5) p, #q2_2010:target #pie_chart ul :nth-child(5) p {
−
 
+
    -moz-transform: rotate(180deg);
−
#q4_2009:target #pie_chart ul :nth-child(1) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
+
    -webkit-transform: rotate(180deg);
−
#q4_2009:target #pie_chart ul :nth-child(2) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
+
    -o-transform: rotate(180deg);
−
#q4_2009:target #pie_chart ul :nth-child(3) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
+
}
−
#q4_2009:target #pie_chart ul :nth-child(4) p{ -moz-transform: rotate(171deg); -webkit-transform: rotate(171deg); -o-transform: rotate(171deg);}
+
#pie_chart ul :nth-child(6) p, #q2_2010:target #pie_chart ul :nth-child(6) p {
−
#q4_2009:target #pie_chart ul :nth-child(5) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
+
    -moz-transform: rotate(152deg);
−
#q4_2009:target #pie_chart ul :nth-child(6) p{ -moz-transform: rotate(154deg); -webkit-transform: rotate(154deg); -o-transform: rotate(154deg);}
+
    -webkit-transform: rotate(152deg);
−
#q4_2009:target #pie_chart ul :nth-child(7) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
+
    -o-transform: rotate(152deg);
−
#q4_2009:target #pie_chart ul :nth-child(8) p{ -moz-transform: rotate(139deg); -webkit-transform: rotate(139deg); -o-transform: rotate(139deg);}
+
}
−
#q4_2009: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(7) p, #q2_2010:target #pie_chart ul :nth-child(7) p {
−
#q4_2009:target #pie_chart ul :nth-child(10) p{ -moz-transform: rotate(50deg); -webkit-transform: rotate(50deg); -o-transform: rotate(50deg);}
+
    -moz-transform: rotate(180deg);
−
 
+
    -webkit-transform: rotate(180deg);
−
#q3_2009:target #pie_chart ul :nth-child(1) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
+
    -o-transform: rotate(180deg);
−
#q3_2009:target #pie_chart ul :nth-child(2) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
+
}
−
#q3_2009: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(8) p, #q2_2010:target #pie_chart ul :nth-child(8) p {
−
#q3_2009:target #pie_chart ul :nth-child(4) p{ -moz-transform: rotate(172deg); -webkit-transform: rotate(172deg); -o-transform: rotate(172deg);}
+
    -moz-transform: rotate(126deg);
−
#q3_2009:target #pie_chart ul :nth-child(5) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
+
    -webkit-transform: rotate(126deg);
−
#q3_2009:target #pie_chart ul :nth-child(6) p{ -moz-transform: rotate(156deg); -webkit-transform: rotate(156deg); -o-transform: rotate(156deg);}
+
    -o-transform: rotate(126deg);
−
#q3_2009:target #pie_chart ul :nth-child(7) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
+
}
−
#q3_2009:target #pie_chart ul :nth-child(8) p{ -moz-transform: rotate(145deg); -webkit-transform: rotate(145deg); -o-transform: rotate(145deg);}
+
#pie_chart ul :nth-child(9) p, #q2_2010:target #pie_chart ul :nth-child(9) p {
−
#q3_2009:target #pie_chart ul :nth-child(9) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
+
    -moz-transform: rotate(180deg);
−
#q3_2009:target #pie_chart ul :nth-child(10) p{ -moz-transform: rotate(61deg); -webkit-transform: rotate(61deg); -o-transform: rotate(61deg);}
+
    -webkit-transform: rotate(180deg);
−
 
+
    -o-transform: rotate(180deg);
−
#q2_2009:target #pie_chart ul :nth-child(1) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
+
}
−
#q2_2009: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(10) p, #q2_2010:target #pie_chart ul :nth-child(10) p {
−
#q2_2009:target #pie_chart ul :nth-child(3) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
+
    -moz-transform: rotate(36deg);
−
#q2_2009:target #pie_chart ul :nth-child(4) p{ -moz-transform: rotate(172deg); -webkit-transform: rotate(172deg); -o-transform: rotate(172deg);}
+
    -webkit-transform: rotate(36deg);
−
#q2_2009:target #pie_chart ul :nth-child(5) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
+
    -o-transform: rotate(36deg);
−
#q2_2009:target #pie_chart ul :nth-child(6) p{ -moz-transform: rotate(158deg); -webkit-transform: rotate(158deg); -o-transform: rotate(158deg);}
+
}
−
#q2_2009:target #pie_chart ul :nth-child(7) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
+
#q1_2010:target #pie_chart ul :nth-child(1) p {
−
#q2_2009:target #pie_chart ul :nth-child(8) p{ -moz-transform: rotate(149deg); -webkit-transform: rotate(149deg); -o-transform: rotate(149deg);}
+
    -moz-transform: rotate(180deg);
−
#q2_2009:target #pie_chart ul :nth-child(9) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
+
    -webkit-transform: rotate(180deg);
−
#q2_2009:target #pie_chart ul :nth-child(10) p{ -moz-transform: rotate(66deg); -webkit-transform: rotate(66deg); -o-transform: rotate(66deg);}
+
    -o-transform: rotate(180deg);
−
 
+
}
−
#q1_2005:target #pie_chart ul :nth-child(1) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
+
#q1_2010:target #pie_chart ul :nth-child(2) p {
−
#q1_2005:target #pie_chart ul :nth-child(2) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
+
    -moz-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);}
+
    -webkit-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);}
+
    -o-transform: rotate(180deg);
−
#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_2010:target #pie_chart ul :nth-child(3) p {
−
#q1_2005:target #pie_chart ul :nth-child(7) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
+
    -moz-transform: rotate(180deg);
−
#q1_2005:target #pie_chart ul :nth-child(8) p{ -moz-transform: rotate(167deg); -webkit-transform: rotate(167deg); -o-transform: rotate(167deg);}
+
    -webkit-transform: rotate(180deg);
−
#q1_2005:target #pie_chart ul :nth-child(9) p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-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);}
+
}
−
 
+
#q1_2010:target #pie_chart ul :nth-child(4) p {
−
#pyr_chart li { -webkit-transition: all .5s; }
+
    -moz-transform: rotate(170deg);
−
 
+
    -webkit-transform: rotate(170deg);
 +
    -o-transform: rotate(170deg);
 +
}
 +
#q1_2010:target #pie_chart ul :nth-child(5) p {
 +
    -moz-transform: rotate(180deg);
 +
    -webkit-transform: rotate(180deg);
 +
    -o-transform: rotate(180deg);
 +
}
 +
#q1_2010:target #pie_chart ul :nth-child(6) p {
 +
    -moz-transform: rotate(153deg);
 +
    -webkit-transform: rotate(153deg);
 +
    -o-transform: rotate(153deg);
 +
}
 +
#q1_2010:target #pie_chart ul :nth-child(7) p {
 +
    -moz-transform: rotate(180deg);
 +
    -webkit-transform: rotate(180deg);
 +
    -o-transform: rotate(180deg);
 +
}
 +
#q1_2010:target #pie_chart ul :nth-child(8) p {
 +
    -moz-transform: rotate(131deg);
 +
    -webkit-transform: rotate(131deg);
 +
    -o-transform: rotate(131deg);
 +
}
 +
#q1_2010:target #pie_chart ul :nth-child(9) p {
 +
    -moz-transform: rotate(180deg);
 +
    -webkit-transform: rotate(180deg);
 +
    -o-transform: rotate(180deg);
 +
}
 +
#q1_2010:target #pie_chart ul :nth-child(10) p {
 +
    -moz-transform: rotate(42deg);
 +
    -webkit-transform: rotate(42deg);
 +
    -o-transform: rotate(42deg);
 +
}
 +
#q4_2009:target #pie_chart ul :nth-child(1) p {
 +
    -moz-transform: rotate(180deg);
 +
    -webkit-transform: rotate(180deg);
 +
    -o-transform: rotate(180deg);
 +
}
 +
#q4_2009:target #pie_chart ul :nth-child(2) p {
 +
    -moz-transform: rotate(180deg);
 +
    -webkit-transform: rotate(180deg);
 +
    -o-transform: rotate(180deg);
 +
}
 +
#q4_2009:target #pie_chart ul :nth-child(3) p {
 +
    -moz-transform: rotate(180deg);
 +
    -webkit-transform: rotate(180deg);
 +
    -o-transform: rotate(180deg);
 +
}
 +
#q4_2009:target #pie_chart ul :nth-child(4) p {
 +
    -moz-transform: rotate(171deg);
 +
    -webkit-transform: rotate(171deg);
 +
    -o-transform: rotate(171deg);
 +
}
 +
#q4_2009:target #pie_chart ul :nth-child(5) p {
 +
    -moz-transform: rotate(180deg);
 +
    -webkit-transform: rotate(180deg);
 +
    -o-transform: rotate(180deg);
 +
}
 +
#q4_2009:target #pie_chart ul :nth-child(6) p {
 +
    -moz-transform: rotate(154deg);
 +
    -webkit-transform: rotate(154deg);
 +
    -o-transform: rotate(154deg);
 +
}
 +
#q4_2009:target #pie_chart ul :nth-child(7) p {
 +
    -moz-transform: rotate(180deg);
 +
    -webkit-transform: rotate(180deg);
 +
    -o-transform: rotate(180deg);
 +
}
 +
#q4_2009:target #pie_chart ul :nth-child(8) p {
 +
    -moz-transform: rotate(139deg);
 +
    -webkit-transform: rotate(139deg);
 +
    -o-transform: rotate(139deg);
 +
}
 +
#q4_2009:target #pie_chart ul :nth-child(9) p {
 +
    -moz-transform: rotate(180deg);
 +
    -webkit-transform: rotate(180deg);
 +
    -o-transform: rotate(180deg);
 +
}
 +
#q4_2009:target #pie_chart ul :nth-child(10) p {
 +
    -moz-transform: rotate(50deg);
 +
    -webkit-transform: rotate(50deg);
 +
    -o-transform: rotate(50deg);
 +
}
 +
#q3_2009:target #pie_chart ul :nth-child(1) p {
 +
    -moz-transform: rotate(180deg);
 +
    -webkit-transform: rotate(180deg);
 +
    -o-transform: rotate(180deg);
 +
}
 +
#q3_2009:target #pie_chart ul :nth-child(2) p {
 +
    -moz-transform: rotate(180deg);
 +
    -webkit-transform: rotate(180deg);
 +
    -o-transform: rotate(180deg);
 +
}
 +
#q3_2009:target #pie_chart ul :nth-child(3) p {
 +
    -moz-transform: rotate(180deg);
 +
    -webkit-transform: rotate(180deg);
 +
    -o-transform: rotate(180deg);
 +
}
 +
#q3_2009:target #pie_chart ul :nth-child(4) p {
 +
    -moz-transform: rotate(172deg);
 +
    -webkit-transform: rotate(172deg);
 +
    -o-transform: rotate(172deg);
 +
}
 +
#q3_2009:target #pie_chart ul :nth-child(5) p {
 +
    -moz-transform: rotate(180deg);
 +
    -webkit-transform: rotate(180deg);
 +
    -o-transform: rotate(180deg);
 +
}
 +
#q3_2009:target #pie_chart ul :nth-child(6) p {
 +
    -moz-transform: rotate(156deg);
 +
    -webkit-transform: rotate(156deg);
 +
    -o-transform: rotate(156deg);
 +
}
 +
#q3_2009:target #pie_chart ul :nth-child(7) p {
 +
    -moz-transform: rotate(180deg);
 +
    -webkit-transform: rotate(180deg);
 +
    -o-transform: rotate(180deg);
 +
}
 +
#q3_2009:target #pie_chart ul :nth-child(8) p {
 +
    -moz-transform: rotate(145deg);
 +
    -webkit-transform: rotate(145deg);
 +
    -o-transform: rotate(145deg);
 +
}
 +
#q3_2009:target #pie_chart ul :nth-child(9) p {
 +
    -moz-transform: rotate(180deg);
 +
    -webkit-transform: rotate(180deg);
 +
    -o-transform: rotate(180deg);
 +
}
 +
#q3_2009:target #pie_chart ul :nth-child(10) p {
 +
    -moz-transform: rotate(61deg);
 +
    -webkit-transform: rotate(61deg);
 +
    -o-transform: rotate(61deg);
 +
}
 +
#q2_2009:target #pie_chart ul :nth-child(1) p {
 +
    -moz-transform: rotate(180deg);
 +
    -webkit-transform: rotate(180deg);
 +
    -o-transform: rotate(180deg);
 +
}
 +
#q2_2009:target #pie_chart ul :nth-child(2) p {
 +
    -moz-transform: rotate(180deg);
 +
    -webkit-transform: rotate(180deg);
 +
    -o-transform: rotate(180deg);
 +
}
 +
#q2_2009:target #pie_chart ul :nth-child(3) p {
 +
    -moz-transform: rotate(180deg);
 +
    -webkit-transform: rotate(180deg);
 +
    -o-transform: rotate(180deg);
 +
}
 +
#q2_2009:target #pie_chart ul :nth-child(4) p {
 +
    -moz-transform: rotate(172deg);
 +
    -webkit-transform: rotate(172deg);
 +
    -o-transform: rotate(172deg);
 +
}
 +
#q2_2009:target #pie_chart ul :nth-child(5) p {
 +
    -moz-transform: rotate(180deg);
 +
    -webkit-transform: rotate(180deg);
 +
    -o-transform: rotate(180deg);
 +
}
 +
#q2_2009:target #pie_chart ul :nth-child(6) p {
 +
    -moz-transform: rotate(158deg);
 +
    -webkit-transform: rotate(158deg);
 +
    -o-transform: rotate(158deg);
 +
}
 +
#q2_2009:target #pie_chart ul :nth-child(7) p {
 +
    -moz-transform: rotate(180deg);
 +
    -webkit-transform: rotate(180deg);
 +
    -o-transform: rotate(180deg);
 +
}
 +
#q2_2009:target #pie_chart ul :nth-child(8) p {
 +
    -moz-transform: rotate(149deg);
 +
    -webkit-transform: rotate(149deg);
 +
    -o-transform: rotate(149deg);
 +
}
 +
#q2_2009:target #pie_chart ul :nth-child(9) p {
 +
    -moz-transform: rotate(180deg);
 +
    -webkit-transform: rotate(180deg);
 +
    -o-transform: rotate(180deg);
 +
}
 +
#q2_2009:target #pie_chart ul :nth-child(10) p {
 +
    -moz-transform: rotate(66deg);
 +
    -webkit-transform: rotate(66deg);
 +
    -o-transform: rotate(66deg);
 +
}
 +
#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(8) 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);
 +
}
 +
#pyr_chart li {
 +
    -webkit-transition: all .5s;
 +
}
 
#pyr_chart ul :nth-child(1) {
 
#pyr_chart ul :nth-child(1) {
−
background: #BC3603;
+
    background: #BC3603;
−
background-image: -moz-radial-gradient(center 0deg, circle closest-corner, #de3d00 10%, #BC3603 100%);
+
    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));
+
    background-image: -webkit-gradient(radial, center center, 10, center center, 150, from(#de3d00), to(#BC3603));
 
}
 
}
−
 
 
#pyr_chart ul :nth-child(2) {
 
#pyr_chart ul :nth-child(2) {
−
background: #D97904;
+
    background: #D97904;
−
background-image: -moz-radial-gradient(center 0deg, circle closest-corner, #fb8a00 10%, #D97904 100%);
+
    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));
+
    background-image: -webkit-gradient(radial, center center, 10, center center, 150, from(#fb8a00), to(#D97904));
−
height:292px;
+
    height:292px;
−
+
 
}
 
}
−
 
 
#pyr_chart ul :nth-child(3) {
 
#pyr_chart ul :nth-child(3) {
−
background: #F2B705;
+
    background: #F2B705;
−
background-image: -moz-radial-gradient(center 0deg, circle closest-corner, #ffc517 10%, #F2B705 100%);
+
    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));
+
    background-image: -webkit-gradient(radial, center center, 10, center center, 150, from(#ffc517), to(#F2B705));
−
height:277px;
+
    height:277px;
 
}
 
}
−
 
 
#pyr_chart ul :nth-child(4) {
 
#pyr_chart ul :nth-child(4) {
−
background: #86AD00;
+
    background: #86AD00;
−
background-image: -moz-radial-gradient(center 0deg, circle closest-corner, #9bc800 10%, #86AD00 100%);
+
    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));
+
    background-image: -webkit-gradient(radial, center center, 10, center center, 150, from(#9bc800), to(#86AD00));
−
height:255px;
+
    height:255px;
 
}
 
}
−
 
+
#pyr_chart ul :nth-child(5) {
−
#pyr_chart ul :nth-child(5) {  
+
    background: #0092B9;
−
background: #0092B9;
+
    background-image: -moz-radial-gradient(center 0deg, circle closest-corner, #00addb 10%, #0092B9 100%);
−
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));
−
background-image: -webkit-gradient(radial, center center, 10, center center, 150, from(#00addb), to(#0092B9));
+
    height: 180px;
−
height: 180px;
+
 
}
 
}
−
 
+
#pyr_chart ul :nth-child(6) {
−
#pyr_chart ul :nth-child(6) {  
+
    width: 0;
−
width: 0;
+
    height: 0;
−
height: 0;
+
    border-color: transparent #d8d6cb transparent #d8d6cb;
−
border-color: transparent #d8d6cb transparent #d8d6cb;
+
    border-width: 0px 150px 300px 150px;
−
border-width: 0px 150px 300px 150px;
+
    border-style:solid;
−
border-style:solid;
+
 
}
 
}
−
 
 
/*Pyramid chart data (height value) */
 
/*Pyramid chart data (height value) */
−
#q1_2010:target #pyr_chart ul :nth-child(2) { height: 292px;}
+
#q1_2010:target #pyr_chart ul :nth-child(2) {
−
#q1_2010:target #pyr_chart ul :nth-child(3) { height: 277px;}
+
    height: 292px;
−
#q1_2010:target #pyr_chart ul :nth-child(4) { height: 259px;}
+
}
−
#q1_2010:target #pyr_chart ul :nth-child(5) { height: 185px;}
+
#q1_2010:target #pyr_chart ul :nth-child(3) {
−
 
+
    height: 277px;
−
#q4_2009:target #pyr_chart ul :nth-child(2) { height: 292px;}
+
}
−
#q4_2009:target #pyr_chart ul :nth-child(3) { height: 279px;}
+
#q1_2010:target #pyr_chart ul :nth-child(4) {
−
#q4_2009:target #pyr_chart ul :nth-child(4) { height: 266px;}
+
    height: 259px;
−
#q4_2009:target #pyr_chart ul :nth-child(5) { height: 192px;}
+
}
−
 
+
#q1_2010:target #pyr_chart ul :nth-child(5) {
−
#q3_2009:target #pyr_chart ul :nth-child(2) { height: 293px;}
+
    height: 185px;
−
#q3_2009:target #pyr_chart ul :nth-child(3) { height: 280px;}
+
}
−
#q3_2009:target #pyr_chart ul :nth-child(4) { height: 271px;}
+
#q4_2009:target #pyr_chart ul :nth-child(2) {
−
#q3_2009:target #pyr_chart ul :nth-child(5) { height: 201px;}
+
    height: 292px;
−
 
+
}
−
#q2_2009:target #pyr_chart ul :nth-child(2) { height: 293px;}
+
#q4_2009:target #pyr_chart ul :nth-child(3) {
−
#q2_2009:target #pyr_chart ul :nth-child(3) { height: 282px;}
+
    height: 279px;
−
#q2_2009:target #pyr_chart ul :nth-child(4) { height: 274px;}
+
}
−
#q2_2009:target #pyr_chart ul :nth-child(5) { height: 205px;}
+
#q4_2009:target #pyr_chart ul :nth-child(4) {
−
 
+
    height: 266px;
−
#q1_2005:target #pyr_chart ul :nth-child(2) { height: 297px;}
+
}
−
#q1_2005:target #pyr_chart ul :nth-child(3) { height: 290px;}
+
#q4_2009:target #pyr_chart ul :nth-child(5) {
−
#q1_2005:target #pyr_chart ul :nth-child(4) { height: 290px;}
+
    height: 192px;
−
#q1_2005:target #pyr_chart ul :nth-child(5) { height: 269px;}
+
}
 +
#q3_2009:target #pyr_chart ul :nth-child(2) {
 +
    height: 293px;
 +
}
 +
#q3_2009:target #pyr_chart ul :nth-child(3) {
 +
    height: 280px;
 +
}
 +
#q3_2009:target #pyr_chart ul :nth-child(4) {
 +
    height: 271px;
 +
}
 +
#q3_2009:target #pyr_chart ul :nth-child(5) {
 +
    height: 201px;
 +
}
 +
#q2_2009:target #pyr_chart ul :nth-child(2) {
 +
    height: 293px;
 +
}
 +
#q2_2009:target #pyr_chart ul :nth-child(3) {
 +
    height: 282px;
 +
}
 +
#q2_2009:target #pyr_chart ul :nth-child(4) {
 +
    height: 274px;
 +
}
 +
#q2_2009:target #pyr_chart ul :nth-child(5) {
 +
    height: 205px;
 +
}
 +
#q1_2005:target #pyr_chart ul :nth-child(2) {
 +
    height: 297px;
 +
}
 +
#q1_2005:target #pyr_chart ul :nth-child(3) {
 +
    height: 290px;
 +
}
 +
#q1_2005:target #pyr_chart ul :nth-child(4) {
 +
    height: 290px;
 +
}
 +
#q1_2005:target #pyr_chart ul :nth-child(5) {
 +
    height: 269px;
 +
}
 
/* Charts end */
 
/* Charts end */
−
 
+
 
/* button panel start */
 
/* button panel start */
−
#btn_panel {
+
#btn_panel {
−
position: relative;
+
    position: relative;
−
margin-left:auto;
+
    margin-left:auto;
−
margin-right:auto;
+
    margin-right:auto;
−
width: 420px;
+
    width: 420px;
−
padding-top: 35px;
+
    padding-top: 35px;
 
}
 
}
−
 
+
#btn_panel ul {
−
#btn_panel ul{
+
    list-style-type: none;
−
list-style-type: none;
+
    display: inline;
−
display: inline;
+
    padding: 0;
−
padding: 0;
+
    margin: 0;
−
margin: 0;
+
 
}
 
}
−
+
#btn_panel li {
−
#btn_panel li{  
+
    float: left;
−
float: left;  
+
    padding: 5px;
−
padding: 5px;
+
 
}
 
}
−
 
+
#btn_panel span:first-child {
−
#btn_panel span:first-child{ display: block; font-size: 22px; padding: 5px 0 0 0 }
+
    display: block;
−
#btn_panel span:last-child{ display: block; font-size: 16px; padding: 7px 0 0 0;}
+
    font-size: 22px;
−
 
+
    padding: 5px 0 0 0
−
#btn_panel li a{
+
}
−
display: block;
+
#btn_panel span:last-child {
−
width: 60px;
+
    display: block;
−
height: 65px;
+
    font-size: 16px;
−
text-decoration: none;
+
    padding: 7px 0 0 0;
−
text-align: center;
+
}
−
color: #565446;
+
#btn_panel li a {
−
background: #fcfcfc;
+
    display: block;
−
background-image: -moz-linear-gradient(100% 40% 270deg,#FFFFFF, #eaeaea, #f5f5f5 100%);
+
    width: 60px;
−
background-image: -webkit-gradient(linear, 0% 45%, 0% 69%, from(#FFFFFF), to(#EDEDED), color-stop(.4,#F7F7F7));
+
    height: 65px;
−
-moz-border-radius: 4px;
+
    text-decoration: none;
−
-webkit-border-radius: 4px;
+
    text-align: center;
−
border-radius: 4px;
+
    color: #565446;
−
-moz-box-shadow: #c0bca7 0px 1px 0px;
+
    background: #fcfcfc;
−
-webkit-box-shadow: #c0bca7 0px 1px 0px;
+
    background-image: -moz-linear-gradient(100% 40% 270deg, #FFFFFF, #eaeaea, #f5f5f5 100%);
−
box-shadow: #c0bca7 0px 1px 0px;
+
    background-image: -webkit-gradient(linear, 0% 45%, 0% 69%, from(#FFFFFF), to(#EDEDED), color-stop(.4, #F7F7F7));
−
-webkit-transition: all .3s ease-out;
+
    -moz-border-radius: 4px;
−
  opacity:.5;
+
    -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;
 +
}
 +
#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;
 +
}
 +
#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;
 +
}
 +
#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;
 +
}
 +
#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;
 +
}
 +
#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;
 +
}
 +
#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;
 +
}
 +
#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;
 
}
 
}
−
 
−
#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;}
 
−
 
−
#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;}
 
−
#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;}
 
−
#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;}
 
−
#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;}
 
−
#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;}
 
−
#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 */
 
/* button panel end */

Revision as of 21:20, 18 September 2015

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

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

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