@font-face {
	font-family: 'Matiz';
	src: url(../font/Matiz-webfont.eot);
	src: url(../font/Matiz-webfont.eot?#iefix) format('embedded-opentype'),
	     url(../font/Matiz-webfont.woff) format('woff'),
             url(../font/Matiz-webfont.ttf) format('truetype');
	font-weight: normal;
	font-style: normal;
}

body {}

::-webkit-scrollbar { height: 12px; width: 12px; background: #ccc; }
::-webkit-scrollbar-thumb { background: #999; -webkit-border-radius: 1ex; }
::-webkit-scrollbar-thumb:hover { background: #858383;}
::-webkit-scrollbar-thumb:active { background: #ffe400;}

/** Skipto's **/
.skip{position:absolute;top: -100px;z-index: 5000;} 
.skip:focus,.skip:active {position:absolute;top: 0;width: 100%;background: #fff;color: #3f4140;padding:5px 0;text-decoration: none;text-align: center;box-shadow: 0 0 20px #000;}
.skip:active {color: #00315c;}
.linkDivider{display: none;}

/** RESETS **/
* {margin: 0;padding: 0;text-decoration: none;filter: inherit;outline:none;}
*:focus{outline: none;}  
h1, h2, h3, h4 ,h5, h6 {font-weight: normal;}
a {outline: 0;}
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section {display: block;}
a img {border: none;}
ul, ol, li {list-style-type: none;}
fieldset {border: 0;}
table {border:0;text-align:left;}
textarea {font-family:Arial, Helvetica, sans-serif;font-size:1.1em;}
address {font-style: normal;}
input[type="submit"] {cursor: pointer;}

/** GENERIC CLASSES **/
.hidden {position: absolute;top:-100000px;z-index:5000;}
.site-width {width: 937px;margin: 0 auto;position: relative;}
.clear {clear: both;}
.cta {
    background: #CC3399 url(../img/cta-arrow.png) center right no-repeat;
    -moz-border-radius: 3em;
    -webkit-border-radius: 3em;    
    border-radius: 3em;    
    display: inline-block;
    padding: 0 42px 0 20px;
    height: 37px;
    line-height: 37px;
    color: #F4EEED;
    font-family: 'Matiz';
    text-transform: uppercase;
    font-size: 1.1em;
    -webkit-transition: 0.2s ease-out;-moz-transition: 0.2s ease-out;-o-transition: 0.2s ease-out;-ms-transition: 0.2s ease-out;
}
.cta:hover{color: #CC3399; background-color: #fff;}
.inactive {/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
/* IE 5-7 */
filter: alpha(opacity=30);
/* Netscape */
-moz-opacity: .3;
/* Safari 1.x */
-khtml-opacity: .3;
/* Good browsers */
opacity: .3;cursor: default;
}


/** HTML ELEMENTS **/
body {
	font-family: "Arial", sans-serif;
	font-size:80%; /*Base unit of 13px*/
    overflow-x: hidden;
	color: #666;
}

/*a, a:visited{color: #666;}*/
/*a:hover, a:focus{text-decoration: underline;}*/


/** MISC OVERLAY ITEMS **/
.awww {position: absolute; width: 69px; height: 105px;background: url(../img/awwwards_siteoftheday_b_left.png) no-repeat;top: 210px;}
.misc-item{position: absolute;}
.swoosh {top:460px;left:0;}
.cloud-2 {bottom:238px;left:63px;}
.path {left:0;bottom:0;}
.tree {top:354px;right:-161px;}
.small-tree {bottom:-42px;right:-30px;}
.tree-group {bottom:-88px;left:40px;}
.sheep {top:506px;right:-155px;-webkit-animation: sheep 3s linear infinite;-moz-animation: sheep 3s linear infinite;}
.rainbow {bottom:0;right:0;}
.cloud-1 {position:absolute;width:100%;background:url(../img/cloud-1.png) no-repeat;height:26px;top:393px;-webkit-animation: cloud 120s linear infinite;-moz-animation: cloud 120s linear infinite;-webkit-transform:translate3d(0,0,0);-webkit-backface-visibility: hidden;}
.cloud-3 {position:absolute;width:100%;background:url(../img/cloud-1.png) no-repeat;height:26px;top:60px;-webkit-animation: cloudrev 250s linear infinite;-moz-animation: cloudrev 250s linear infinite;-webkit-transform:translate3d(0,0,0);-webkit-backface-visibility: hidden;}
.cloud-4 {position:absolute;width:100%;background:url(../img/cloud-1.png) no-repeat;height:26px;top:750px;-webkit-animation: cloudrev 320s linear infinite;-moz-animation: cloudrev 50s linear infinite;-webkit-transform:translate3d(0,0,0);-webkit-backface-visibility: hidden;}

/** interact **/
.interact-1 {right: 66px;top:275px;}
.interact-2 {left: 142px;top:556px;}
.interact-3 {right: 145px;top:644px;}
.interact-4 {right: 0;top:206px;}
.interact-5 {left: -18px;top:439px;}
.interact-6 {left: -78px;top:147px;}
.interact-7 {left: 41px;bottom:-17px;}
.interact-8 {right: 16px;bottom:22px;}

/*Cloud*/
@-webkit-keyframes cloud {from {background-position: top left;}to{background-position: top right;}}
@-moz-keyframes cloud {from {background-position: top left;}to{background-position: top right;}}
/*Cloud reverse */
@-webkit-keyframes cloudrev {from {background-position: top right;}to{background-position: top left;}}
@-moz-keyframes cloudrev {from {background-position: top right;}to{background-position: top left;}}

@-webkit-keyframes sheep {
    0% {top: 506px;}
    5% {top: 500px;}
    10% {top: 506px;}    
    100%{top: 506px;}
}
@-moz-keyframes sheep {
    0% {top: 506px;}
    5% {top: 500px;}
    10% {top: 506px;}    
    100%{top: 506px;}
}

@-webkit-keyframes wave {
    0% { margin-top:0px; }
    50% { margin-top:20px; }
    100% { margin-top:0px; }
}
@-moz-keyframes wave {
    0% { margin-top:0px; }
    50% { margin-top:20px; }
    100% { margin-top:0px; }
}

@-webkit-keyframes balloon {
    0% { margin-bottom:0px; }
    50% { margin-bottom:4px; }
    100% { margin-bottom:0px; }
}
@-moz-keyframes balloon {
    0% { margin-bottom:0px; }
    50% { margin-bottom:4px; }
    100% { margin-bottom:0px; }
}



/*test*/
@-webkit-keyframes hook {from {-webkit-transform: rotate(-0.5deg);}to{-webkit-transform: rotate(1deg);}}
@-moz-keyframes hook {from {-moz-transform: rotate(-0.5deg);}to{-moz-transform: rotate(0.5deg);}}

/** STRUCTURE **/

#site {}
    .logo {
        display: block;
        width: 224px;
        height: 156px;
        background: url(../img/logo.png) no-repeat;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 11;
        -webkit-transition: 0.2s ease-out;-moz-transition: 0.2s ease-out;-o-transition: 0.2s ease-out;-ms-transition: 0.2s ease-out;
    }
    .scrolling {opacity:.5;}
    .scrolling:hover {opacity:1;}
    .social {
        width: 80px;
        /*height: 257px;*/
        z-index: 20;
        position: fixed;
        right:11px;
        top: 123px;
        background: url(../img/social-top.png) no-repeat; /** To replace **/
        padding-top: 36px;
        -webkit-transition: 0.2s ease-out;-moz-transition: 0.2s ease-out;-o-transition: 0.2s ease-out;-ms-transition: 0.2s ease-out;
    }
        .social ul {
            background: #655556;
        }
            .social li:first-child {border-top: none;}
            .social li {                
                border-bottom: 1px solid #938889;
                border-top: 1px solid #463b3c;
                padding: 15px 0;
                text-align: center;
            }
            .social li:last-child {border-bottom: none;}
    hr:not(.zigzag) {
       position: absolute;
       bottom: -8px;
       width: 100%;
       height: 16px;
       background: url(../img/hr.png) top repeat-x;
       border: none;
    }
    section {position: relative;-webkit-transform:translate3d(0,0,0);-webkit-backface-visibility: hidden;}
    .evening-sky {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1100px;
        background: url(../img/sky.gif) repeat-x;
    }
    .morning-sky {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1100px;
        background: url(../img/morning-sky.gif) repeat-x;
        /*-webkit-transition: 0.5s ease-out;-moz-transition: 1.5s ease-out;-o-transition: 0.5s ease-out;-ms-transition: 0.5s ease-out;*/
    }
    .sky {
        /*background: url(../img/sky.gif) repeat-x;*/
        z-index: 10;
    }
        .sky .site-width {height: 1019px;}
        .sky header {
            padding: 115px 0 40px;
            border-bottom: 1px solid rgba(0,0,0, .15);
            overflow: hidden;
            margin-bottom: 42px;
        }
            h1 {
                width: 358px;
                height: 214px;
                background: url(../img/h1.png) no-repeat;
                float: left;
            }
            .sky header p {
                float: right;
                width: 400px;
                padding-right: 40px;
                margin-bottom: 30px;
                font-family: "proxima-nova", Arial;
                font-weight: 700;
                font-size: 1.2em;
                color: #60404A;
            }
        .primary-you-say {
            display: block;
            width: 128px;
            height: 30px;
            position: absolute;
            left: 360px;
            
        }
            .tool {
                position: absolute;
                left: 360px;
                width: 128px;
                height: 30px;
            }
            .tip {
                position: absolute;
                top: -90px;
                
            }
        .primary {
            background: url(../img/total-primary-h2.png) center top no-repeat;
            height: 97px;
        }
        .sky .time {
            position: absolute;
            bottom: 80px;
            left: 94px;
        }
            .sky .time ul {
                width: 92px;
                text-align: center;
            }
                .sky .time li {margin: 15px 0;}
                #site .vertical .prev, #site .vertical .next {
                    display: block;
                    background: url(../img/vert-nav.png) center top no-repeat;
                    height: 17px;
                    padding: 0;
                    -webkit-transition: 0.2s ease-out;-moz-transition: 0.2s ease-out;-o-transition: 0.2s ease-out;-ms-transition: 0.2s ease-out;
                }
                #site .vertical .next {background-position: center bottom;}
                .time a, .time a:visited {
                    color: #373737;
                    font-size: 1.8em;
                    padding: 5px 20px 5px 18px;    
                    display: block;
                    -moz-border-radius: 1em;
                    -webkit-border-radius: 1em;                    
                    border-radius: 1em;                    
                    position: relative;
                    -webkit-transition: 0.2s ease-out;-moz-transition: 0.2s ease-out;-o-transition: 0.2s ease-out;-ms-transition: 0.2s ease-out;
                    font-family: "proxima-nova", Arial;
                    font-weight: 700;
                    cursor: pointer;
                }
                .time .selected a, .sky .time .selected a:hover {background: #79B46F;color:#fff;}
                .sky .time a:hover {background: rgba(121,180,111,.6);}
                    .sky .time span {
                        background: url(../img/green-arrow-right.png);
                        width: 5px;
                        height: 9px;
                        right: 0;
                        top: 14px;                        
                        position: absolute;
                        /* IE 8 */
                        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
                        /* IE 5-7 */
                        filter: alpha(opacity=0);
                        /* Netscape */
                        -moz-opacity: 0;
                        /* Safari 1.x */
                        -khtml-opacity: 0;
                        /* Good browsers */
                        opacity: 0;
                        -webkit-transition: .2s ease-out;-moz-transition: .2s ease-out;-o-transition: .2s ease-out;-ms-transition: .2s ease-out;
                    }
                    .sky .selected span {
                        right: -4px;
                        /* IE 8 */
                        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
                        /* IE 5-7 */
                        filter: alpha(opacity=100);
                        /* Netscape */
                        -moz-opacity: 1;
                        /* Safari 1.x */
                        -khtml-opacity: 1;
                        /* Good browsers */
                        opacity: 1;
                    }
        .main-tree {
            position: absolute;
            left: 230px;
            bottom: -64px;
            width: 483px;
            height: 542px;
            /*background: url(../img/main-tree.png) no-repeat;*/
        }
            .blobs {
                position:absolute;
                top:0;
                /*background: url(../img/tree-2010.png);*/
                width: 483px;
                height: 468px;
                -webkit-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-o-transform-origin:50% 100%;-ms-transform-origin:50% 100%;
                /*-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);-ms-transform: scale(0);*/
                /* IE 8 */
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
                /* IE 5-7 */
                filter: alpha(opacity=0);
                /* Netscape */
                -moz-opacity: 0;
                /* Safari 1.x */
                -khtml-opacity: 0;
                /* Good browsers */
                opacity: 0;
                -webkit-transform:translate3d(0,0,0);
                -webkit-transition: .5s ease-in-out;-moz-transition: .2s ease-in-out;-o-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out;transition-delay:.12s;-moz-transition-delay:.12s;-webkit-transition-delay:.12s;-o-transition-delay:.12s;
            }
            .b1970{background-image: url(../img/tree-1970-2.png);}
            .b1980{background-image: url(../img/tree-1980-2.png);}            
            .b1990{background-image: url(../img/tree-1990-2.png);}            
            .b2000{background-image: url(../img/tree-2000-2.png);}            
            .b2010{background-image: url(../img/tree-2010-2.png);}
            
            .blobs.active {
                -webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);
                /*transition-delay:.12s;-moz-transition-delay:.12s;-webkit-transition-delay:.12s;-o-transition-delay:.12s;*/
                -webkit-transition: .45s ease-in-out;-moz-transition: .2s ease-in-out;-o-transition: .45s ease-in-out;-ms-transition: .45s ease-in-out;
            
                /* IE 8 */
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
                /* IE 5-7 */
                filter: alpha(opacity=100);
                /* Netscape */
                -moz-opacity: 1;
                /* Safari 1.x */
                -khtml-opacity: 1;
                /* Good browsers */
                opacity: 1;
                /*z-index: 300;*/
            }
            
                /** Blob Stats **/
                .stat {
                    position: absolute;
                    text-align: center;
                    font-family: 'Matiz';
                    line-height: 0.6em;
                    letter-spacing: -0.07em;
                }
                    .stat small {display: block;font-size: 0.4em;/*margin-top: 26%;*/letter-spacing: 0;}
                    
                    .pet-stat {line-height: 0.55em;}
                    .pet-stat small {font-size: 0.35em;}
                    
                    .b1970 .solid-stat, .b1980 .solid-stat{line-height: 0.55em;}
                    .b1970 .solid-stat small, .b1980 .solid-stat small {font-size: 0.35em;}                    
                    .elec-stat small {}                    
                    .bio-stat small {}                    
                    .pet-stat small {}                    
                    
                    
                    
                    
                    .stat .disc {
                        position: absolute;
                        top: 0;
                        left: 0;
                        height: 100%;
                        width: 100%;
                        -webkit-transition: .3s ease-in-out;-moz-transition: .3s ease-in-out;-o-transition: .3s ease-in-out;-ms-transition: .3s ease-in-out;
                        -webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-o-transform-origin:50% 50%;-ms-transform-origin:50% 50%;
                        z-index: 600;
                        background-repeat: no-repeat;
                    }
                    .blobs .active .disc {-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);-ms-transform: scale(0);}
                
                /** shared positions **/
                .b2010 .pet-stat, .b2000 .pet-stat, .b1990 .pet-stat, .b1980 .solid-stat, .b1970 .solid-stat {top: 34px;left: 59px;height: 131px;width: 170px;padding-top: 38px;font-size: 5em;line-height:0.58em;}
                .b2010 .elec-stat, .b2000 .elec-stat, .b1990 .elec-stat {top: 377px;left: 119px;height: 32px;width: 50px;padding-top: 18px;font-size: 2em;}
                .b2010 .gas-stat, .b2000 .gas-stat, .b1990 .gas-stat, .b1980 .pet-stat, .b1970 .pet-stat {top: 94px;left: 300px;height: 127px;width: 169px;padding-top: 43px;font-size: 4.3em;}
                .b2010 .solid-stat, .b2000 .solid-stat, .b1990 .solid-stat{top: 251px;left: 21px;height: 105px;width: 136px;padding-top:31px;font-size:4em;}                
                .b2010 .bio-stat, .b2000 .bio-stat {top: 358px;left: 229px;height: 23px;width: 39px;padding-top: 16px;font-size: 1.3em;}
                
                /** others **/
                .b1980 .gas-stat, .b1970 .gas-stat {top:266px;left:318px;height:104px;width:136px;padding-top:32px;font-size: 4em;}
                .b1980 .elec-stat, .b1970 .elec-stat {top:405px;left:235px;height:25px;width:39px;padding-top: 14px;font-size: 1.3em;}
                
                /** stat images **/
                .b1970 .pet-stat .disc, .b1980 .pet-stat .disc {background-image: url(../img/pet-1970.png);}
                .b1970 .elec-stat .disc, .b1980 .elec-stat .disc {background-image: url(../img/elec-1970.png);}                
                .b1970 .gas-stat .disc, .b1980 .gas-stat .disc {background-image: url(../img/gas-1970.png);}
                .b1970 .solid-stat .disc, .b1980 .solid-stat .disc {background-image: url(../img/solid-1970.png);}
                
                .b1990 .pet-stat .disc, .b2000 .pet-stat .disc, .b2010 .pet-stat .disc {background-image: url(../img/pet-1990.png);}
                .b1990 .elec-stat .disc, .b2000 .elec-stat .disc, .b2010 .elec-stat .disc {background-image: url(../img/elec-1990.png);}                
                .b1990 .gas-stat .disc, .b2000 .gas-stat .disc, .b2010 .gas-stat .disc {background-image: url(../img/gas-1990.png);}                
                .b1990 .solid-stat .disc, .b2000 .solid-stat .disc, .b2010 .solid-stat .disc {background-image: url(../img/solid-1990.png);}                
                
                .b2000 .bio-stat .disc, .b2010 .bio-stat .disc {background-image: url(../img/bio-2000.png);}
                
                /*.blobs .percent {border: 1px solid red;}*/
                /*.active .percent {visibility: visible !important;}*/
                
                .elec-stat .percent {color: #b9a0a2;}
                .bio-stat .percent {color: #c64da6;}                
                .gas-stat .percent {color: #c1e569;}                
                .pet-stat .percent {color:#79d772;}                
                .solid-stat .percent {color:#e2d652;}                
                
                /** Colours **/
                .pet-stat {color:#3d886b;}
                .elec-stat {color:#725658;}                
                .gas-stat {color:#54c77a;}                
                .solid-stat {color:#cc9900;}                
                .bio-stat {color:#c64da6;}  
                
            .stump {
                width: 259px;
                height: 135px;
                background: url(../img/main-tree-stump.png);
                position: absolute;
                bottom: 0;
                left: 114px;
                /*z-index: 400;*/
            }
        .sky .key {
            position: absolute;
            right: 34px;
            bottom: 152px;
            height: 280px;
            width: 142px;
            font-family: "proxima-nova", Arial;
            font-weight: 700;
            /*-webkit-animation: hook 3s alternate ease-in-out infinite;-moz-animation: hook alternate 3s ease-in-out infinite;*/
            /*-webkit-transform-origin:50% 0;*/
            /*-moz-transform-origin:50% 0;  */
            -webkit-animation: balloon 2s ease-in-out infinite;-moz-animation: balloon 2s ease-in-out infinite;
        }
            .sky .key .balloon-top {
                display: block;
                background: url(../img/balloon.png) center top no-repeat;
                /*width: 73px;*/
                height: 109px;
                margin-left: 24px;
            }
            .sky .key ul {
                border-left: 1px solid #a7d0d0;
            }
            .sky .key li {margin-bottom: 3px;}
            .sky .key li:last-child {margin-bottom: 0;}            
                .sky .key a {                
                    /*background: red;*/
                    display: block;
                    text-align:center;
                    /*font-family: 'Matiz';*/
                    text-transform: uppercase;
                    color: #fff;
                    padding: 8px 0;
                    -moz-border-radius: 1.5em;
                    -webkit-border-radius: 1.5em;                    
                    border-radius: 1.5em;                    
                    width: 117px;
                    margin-left: 24px;
                    position: relative;
                    cursor: default;
                    cursor: pointer;
                    -webkit-transition: .2s ease-out;-moz-transition: .2s ease-out;-o-transition: .2s ease-out;-ms-transition: .2s ease-out;
                }
                .sky .key a:hover, .sky .key .switched a {margin-left: 0;padding-left:24px;border-radius: 0.5em 1.5em 1.5em 0.5em;-moz-border-radius: 0.5em 1.5em 1.5em 0.5em;-webkit-border-radius: 0.5em 1.5em 1.5em 0.5em;}
                .sky .key .inactive:hover {margin-left: 24px;padding-left:0;border-radius: 1.5em;-moz-border-radius: 1.5em;-webkit-border-radius: 1.5em;}                
                
                .k-elec {background-color: #725658;} .sky .key .k-elec span {background-position: top left;}
                .k-bio {background-color: #c64da6;} .sky .key .k-bio span {background-position: top right;}         
                .k-gas {background-color: #54c77a;} .sky .key .k-gas span {background-position: center left;}               
                .k-pet {background-color: #3d886b;} .sky .key .k-pet span {background-position: bottom left;}   
                .k-solid {background-color: #cc9900;} .sky .key .k-solid span {background-position: bottom right;}   
                    .sky .key a span {
                        position: absolute;
                        display: block;
                        width: 16px;
                        height: 32px;
                        left: 0;
                        top: 0;
                        background: url(../img/k-point.png);
                        /*opacity: 0;*/
                        -webkit-transition: .2s ease-out;-moz-transition: .2s ease-out;-o-transition: .2s ease-out;-ms-transition: .2s ease-out;
                    }
                    .sky .key a:hover span, .sky .key .switched a span {left: -13px;/*opacity:1;*/}
                    .sky .key .inactive:hover span {left: 0;/*opacity:1;*/}                    
            
            @-webkit-keyframes balloon-shadow {from {opacity: 1;-webkit-transform: scale(1);}to{opacity: .6;-webkit-transform: scale(.85);}}
            @-moz-keyframes balloon-shadow {from {opacity: 1;-moz-transform: scale(1);}to{opacity: .6;-moz-transform: scale(.85);}}
            
            .key-shadow {
                background: url(../img/sky-key-shadow.png) no-repeat;
                position: absolute;
                display: block;
                width: 128px;
                height: 18px;
                bottom: -75px;
                right: 27px;
                -webkit-animation: balloon-shadow 1s ease-in-out alternate infinite;-moz-animation: balloon-shadow 1s ease-in-out alternate infinite;
            }
                    
            .tree-switch {
                background: url(../img/switch-string.png) 64px -8px no-repeat;
                position: relative;
                height: 75px;
            }
                #site .sky .tree-switch .switch {
                    background: url(../img/tree-switch.png);
                    width: 54px;
                    height: 54px;
                    display: block;
                    padding: 0;
                    margin: 0;
                    position: absolute;
                    left: 54px;
                    top: 10px;
                    width: 54px;
                }
                #site .sky .tree-switch .switch:hover {-moz-transform: rotate(15deg);-webkit-transform: rotate(15deg);-ms-transform: rotate(15deg);cursor: pointer;}
                #site .sky .tree-switch .switched {-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);-ms-transform: rotate(90deg); cursor: pointer;}
                 #site .sky .tree-switch .switched:hover {-moz-transform: rotate(75deg);-webkit-transform: rotate(75deg);-ms-transform: rotate(75deg);cursor: pointer;}
                
                .tree-switch span {-webkit-transition: .2s ease-out;-moz-transition: .2s ease-out;-o-transition: .2s ease-out;-ms-transition: .2s ease-out;}
                .tree-switch .text {
                    position: absolute;
                    pointer-events: none;
                    cursor: pointer;
                    left: 55px;
                    width: 50px;
                    top: 30px;
                    text-align: center;
                    /*display: none;*/
                }
                .switch-hover .text, .tree-switch .text:hover {
                    /* IE 8 */
                    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
                    /* IE 5-7 */
                    filter: alpha(opacity=0);
                    /* Netscape */
                    -moz-opacity: 0;
                    /* Safari 1.x */
                    -khtml-opacity: 0;
                    /* Good browsers */
                    opacity: 0;
                }
                .tree-switch .hover {
                    color: #CC3399;
                    position: absolute;
                    top: 32px;
                    left: 56px;
                    width: 50px;
                    text-align: center;
                    font-size: 0.8em;
                    pointer-events: none;
                    cursor: pointer;
                    /* IE 8 */
                    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
                    /* IE 5-7 */
                    filter: alpha(opacity=0);
                    /* Netscape */
                    -moz-opacity: 0;
                    /* Safari 1.x */
                    -khtml-opacity: 0;
                    /* Good browsers */
                    opacity: 0;
                }
                .switch-hover .hover {
                    /* IE 8 */
                    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
                    /* IE 5-7 */
                    filter: alpha(opacity=100);
                    /* Netscape */
                    -moz-opacity: 1;
                    /* Safari 1.x */
                    -khtml-opacity: 1;
                    /* Good browsers */
                    opacity: 1;   
                }               
                .tree-switch .label {
                    font-size: 0.9em;
                    /* IE 8 */
                    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=37)";
                    /* IE 5-7 */
                    filter: alpha(opacity=37);
                    /* Netscape */
                    -moz-opacity: .37;
                    /* Safari 1.x */
                    -khtml-opacity: .37;
                    /* Good browsers */
                    opacity: .37;
                }
                .tree-switch .active-label {
                    /* IE 8 */
                    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
                    /* IE 5-7 */
                    filter: alpha(opacity=100);
                    /* Netscape */
                    -moz-opacity: 1;
                    /* Safari 1.x */
                    -khtml-opacity: 1;
                    /* Good browsers */
                    opacity: 1;    
                }
                .tree-switch .on {
                    position: absolute;
                    bottom: 0;
                    left: 40px;
                }
                .tree-switch .off {
                    position: absolute;
                    bottom: 0;
                    right: 20px;
                }                
                
            
    .grass {
        background: url(../img/grass.gif) top repeat;
        z-index: 9;
        
    }
        .grass .site-width {height: 818px;}
        .grass header {
            /*padding: 119px 37px 20px;*/
            padding: 119px 25px 20px 25px;
            overflow: hidden;
            border-bottom: 1px solid rgba(0,0,0, .15);
            margin-bottom: 40px;
        }
        .grass h2 {
            float: left;
            background: url(../img/total-final-h2.png) no-repeat;
            width: 384px;
            height: 44px;
        }
        .grass header p {
            float: right;
            /*width: 446px;*/
            width: 468px;
            margin-top: 4px;
            color: #003333;
            font-family: "proxima-nova", Arial;
            font-weight: 700;
            font-size: 1.2em;
        }
            .grass header p span {color: #fff;}
        
        .grass .time {
            overflow: hidden;
            position: relative;
            margin-bottom: 10px;
        }
            #site .horizontal .prev, #site .horizontal .next {
                display: block;
                background: url(../img/hori-nav.png) center top no-repeat;
                height: 25px;
                width: 17px;                
                padding: 0;
                position: absolute;
                left: 60px;
                top: 5px;
                -webkit-transition: 0.2s ease-out;-moz-transition: 0.2s ease-out;-o-transition: 0.2s ease-out;-ms-transition: 0.2s ease-out;
            }
            #site .horizontal .next {background-position: center bottom;left: auto; right: 60px;}
            
            .grass .time ul {overflow: hidden;margin-left: 56px;padding-bottom: 5px;}
                .grass .time li {
                    float: left;
                    margin: 0 0 0 65px;
                }
                .grass .time li:last-child {margin-right: 0;}
                    .grass .time .selected a, .grass .time .selected a:hover {background: #fff;color:#7cb772;}
                    .grass .time a:hover {background: rgba(255,255,255, .6);}
                    .grass .time span {
                        background: url(../img/white-arrow-down.png);
                        width: 9px;
                        height: 5px;
                        bottom: -5px;
                        bottom: 0;                        
                        left: 38px;
                        position: absolute;
                        /* IE 8 */
                        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
                        /* IE 5-7 */
                        filter: alpha(opacity=0);
                        /* Netscape */
                        -moz-opacity: 0;
                        /* Safari 1.x */
                        -khtml-opacity: 0;
                        /* Good browsers */
                        opacity: 0;
                        -webkit-transition: .2s ease-out;-moz-transition: .2s ease-out;-o-transition: .2s ease-out;-ms-transition: .2s ease-out;
                    }
                    .grass .selected span {
                        bottom: -5px;
                        /* IE 8 */
                        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
                        /* IE 5-7 */
                        filter: alpha(opacity=100);
                        /* Netscape */
                        -moz-opacity: 1;
                        /* Safari 1.x */
                        -khtml-opacity: 1;
                        /* Good browsers */
                        opacity: 1;
                    }
        .boxes {
            /*position: absolute;*/
            /*bottom: 87px;*/
            width: 900px;
            margin: 0 27px;
            position: relative;
            z-index: 10;
            -webkit-transform:translate3d(0,0,0);
        }
            .boxes li {
                height: 456px;
                position: relative;
            }
                .box {
                    -moz-border-radius: 0.3em;
                    -webkit-border-radius: 0.3em;                    
                    border-radius: 0.3em;                    
                    position: absolute;
                    overflow:hidden;
                    -webkit-transition: 0.2s ease-out;-moz-transition: 0.2s ease-out;-o-transition: 0.2s ease-out;-ms-transition: 0.2s ease-out;
                    cursor: pointer;
                }
                    .box .corner {background-position: top left; z-index: 7;position: absolute;top:0;right:0;width: 50px;height:51px;}
                    .small .corner {width:33px;height:34px;}
                    
                    .boxes .pet .corner {background: url(../img/pet-corner.png);}
                    .boxes .elec .corner {background: url(../img/elec-corner.png);}                    
                    .boxes .gas .corner {background: url(../img/gas-corner.png);}                    
                    .boxes .solid .corner {background: url(../img/solid-corner.png) 13px 10px no-repeat;}                    
                    .boxes .other .corner {background: url(../img/other-corner.png) 13px 10px no-repeat;}                   
                    .box:not(.small):hover .corner {background-position: bottom left;}
                    
                    .box div {
                        height: 100%;
                        width: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        -webkit-transition: 0.2s ease-out;-moz-transition: 0.2s ease-out;-o-transition: 0.2s ease-out;-ms-transition: 0.2s ease-out;
                        z-index: 6;
                        -moz-border-radius: 0.3em;
                        -webkit-border-radius: 0.3em;                    
                        border-radius: 0.3em;  
                    }
                    .box-stat {
                        vertical-align: middle;
                        position: absolute;
                        width: 100%;
                        color: #fff;
                        text-align: center;
                        z-index: 5;
                        font-size: 5.5em;
                        line-height: 0.41em;
                        font-family: 'Matiz';
                        color: #418c6f;
                    }
                        .box-stat .box-num {
                            letter-spacing: -0.07em;
                        }
                        .box-stat small {
                            display: block;
                            color:#fff;
                            text-transform: uppercase;
                            font-size: 0.4em;
                        }
                        .boxes .pet small {font-size: 0.33em;}
                    
                    /** Small Style **/
                    .small {vertical-align:middle;display:table-cell;text-align:center;}
                    .small .box-stat {
                        font-size: 1.5em;
                        -webkit-transition: 0.5s ease-out;-moz-transition: 0.5s ease-out;-o-transition: 0.5s ease-out;-ms-transition: 0.5s ease-out;
                        color: #fff;
                        /* IE 8 */
                        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
                        /* IE 5-7 */
                        filter: alpha(opacity=0);
                        /* Netscape */
                        -moz-opacity: 0;
                        /* Safari 1.x */
                        -khtml-opacity: 0;
                        /* Good browsers */
                        opacity: 0;
                    }
                    .small:hover .box-stat, .switched .small .box-stat {
                        /* IE 8 */
                        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
                        /* IE 5-7 */
                        filter: alpha(opacity=100);
                        /* Netscape */
                        -moz-opacity: 1;
                        /* Safari 1.x */
                        -khtml-opacity: 1;
                        /* Good browsers */
                        opacity: 1;
                    }
                    
                  
                /** Default **/
                .pet {background: url(../img/pet-box-bg.gif);}
                    .pet div {background:  url(../img/pet-box-div.png) center center no-repeat;}
                    .pet .foot {
                        position: absolute;
                        bottom: -41px;
                        background: url(../img/pet-foot.png) no-repeat;
                        height: 41px;
                        width: 100%;
                    }
                    .pet:hover div, .switched .pet div {top: -75%;}
                    .pet .box-stat {padding-top: 170px;}
                .gas {
                    background: url(../img/gas-box-bg.gif);
                }
                    .gas div {background:  url(../img/gas-box-div.jpg) center center no-repeat;}
                    .gas .foot {
                        position: absolute;
                        bottom: -189px;
                        background: url(../img/gas-foot.png) repeat-x;
                        height: 189px;
                        width: 100%;
                    }
                    .gas:hover div, .switched .gas div {top: -100%;}
                    .gas .box-stat {padding-top: 94px;color:#E1FFAE;}
                    .gas .percent {color:#E1FFAE;}                    
                    
                    /* Year Specific */
                    .y1970 .gas:hover div, .switched .y1970 .gas div {top: -165%;}
                    .y1970 .gas .box-stat {font-size: 3em;padding-top: 30px;}
                    .y1980 .gas .box-stat {padding-top: 83px;}
                    .y2000 .gas .box-stat, .y2010 .gas .box-stat {padding-top: 110px;}                    
                .elec {
                    background: url(../img/elec-box-bg.gif);
                }
                    .elec div {background:  url(../img/elec-box-div.jpg) center center no-repeat;}
                    .elec .foot {
                        position: absolute;
                        bottom: -119px;
                        background: url(../img/elec-foot.png) no-repeat;
                        height: 119px;
                        width: 100%;
                    }
                    .elec:hover div, .switched .elec div {top: -100%;}
                    .elec .box-stat {padding-top: 50px;color:#6a5a5b;}
                    .elec .box-stat small{font-size: 0.3em;}                    
                    .elec .percent {color:#6a5a5b;}                    
                    
                    .y1970 .elec:hover div, .switched .y1970 .elec div {top: -65%;}
                    .y2000 .elec:hover div, .switched .y2000 .elec div {top: -110%;}                    
                    .y2010 .elec:hover div, .switched .y2010 .elec div {top: -110%;}                    
                    .y1970 .elec .box-stat {font-size: 3em;padding-top: 150px;}
                    .y1980 .elec .box-stat {padding-top: 65px;}
                    .y1990 .elec .box-stat {padding-top: 58px;}                    
                
                .other {background: #372d2d;}
                    .other:hover div, .switched .other div {top: -100%;}
                    .other div {background: #372d2d url(../img/other-box-div.gif) center center no-repeat;}
                    .other .box-stat {padding-top: 50px;}
                    .other .percent {color: #999;}                    
                    .y2000 .other .box-stat {padding-top: 25px;font-size: 2em;}
                
                .solid {background: #fff;}
                    .solid:hover div, .switched .solid div {top: -100%;}
                    .solid div {background: #fff url(../img/solid-box-div.gif) center center no-repeat;}
                    .solid .box-stat {color: #372d2d;padding-top: 25px;}
                    .solid .percent {color: #999;}                    
                    .y1970 .solid .box-stat {padding-top: 165px;font-size: 5em;}
                    .y1980 .solid .box-stat {padding-top: 93px;font-size: 4em;}
                    .y1990 .solid .box-stat {padding-top: 82px;font-size: 4em;}                    
                    .y2000 .solid .box-stat {padding-top: 40px;font-size: 3em;}                    
                
                /** 1970 **/
                .y1970 .pet {
                    width: 419px;
                    height: 456px;
                    top: 0;
                    right: auto;
                    bottom: auto;
                    left: 0;
                }
                .y1970 .gas {
                    width: 473px;
                    height: 84px;
                    top: 0;
                    right: 0;
                    bottom: auto;
                    left: auto;
                }                
                .y1970 .elec {
                    width: 125px;
                    height: 364px;
                    top: auto;
                    right: 348px;
                    bottom: 0;
                    left: auto;
                }                
                .y1970 .other {
                    width: 0;
                    height: 0;
                    top: auto;
                    right: auto;
                    bottom: auto;
                    left: 0;
                    display: none;
                }                
                .y1970 .solid {
                    width: 340px;
                    height: 364px;
                    top: auto;
                    right: 0;
                    bottom: 0;
                    left: auto;
                }
                
                /** 1980 **/
                .y1980 .pet {
                    width: 392px;
                    height: 456px;
                    top: 0;
                    right: auto;
                    bottom: auto;
                    left: 0;
                }
                .y1980 .gas {
                    width: 500px;
                    height: 233px;
                    top: 0;
                    right: 0;
                    bottom: auto;
                    left: auto;
                }                
                .y1980 .elec {
                    width: 253px;
                    height: 215px;
                    top: auto;
                    right: 247px;
                    bottom: 0;
                    left: auto;
                }                
                .y1980 .other {
                    width: 0;
                    height: 0;
                    top: auto;
                    right: 0;
                    bottom: 0;
                    left: auto;
                }                
                .y1980 .solid {
                    width: 239px;
                    height: 215px;
                    top: auto;
                    right: 0;
                    bottom: 0;
                    left: auto;
                }
                
                /** 1990 **/
                .y1990 .pet {
                    width: 383px;
                    height: 456px;
                    top: 0;
                    right: auto;
                    bottom: auto;
                    left: 0;
                }
                .y1990 .gas {
                    width: 509px;
                    height: 252px;
                    top: 0;
                    right: 0;
                    bottom: auto;
                    left: auto;
                }                
                .y1990 .elec {
                    width: 324px;
                    height: 196px;
                    top: auto;
                    right: 185px;
                    bottom: 0;
                    left: auto;
                }                
                .y1990 .other {
                    width: 8px;
                    height: 196px;
                    top: auto;
                    right: 0;
                    bottom: 0;
                    left: auto;
                }
                    .y1990 .other div {background: none;}
                    .y1990 .other .box-stat {display: none;}                    
                .y1990 .solid {
                    width: 161px;
                    height: 196px;
                    top: auto;
                    right: 16px;
                    bottom: 0;
                    left: auto;
                }
                
                /** 2000 **/
                .y2000 .pet {
                    width: 365px;
                    height: 456px;
                    top: 0;
                    right: auto;
                    bottom: auto;
                    left: 0;
                }
                .y2000 .gas {
                    width: 527px;
                    height: 273px;
                    top: 0;
                    right: 0;
                    bottom: auto;
                    left: auto;
                }                
                .y2000 .elec {
                    width: 408px;
                    height: 175px;
                    top: auto;
                    right: 119px;
                    bottom: 0;
                    left: auto;
                }                
                .y2000 .other {
                    width: 111px;
                    height: 66px;
                    top: auto;
                    right: 0;
                    bottom: 0;
                    left: auto;
                }                
                .y2000 .solid {
                    width: 111px;
                    height: 101px;
                    top: auto;
                    right: 0;
                    bottom: 74px;
                    left: auto;
                }
                
                /** 2010 **/
                .y2010 .pet {
                    width: 379px;
                    height: 456px;
                    top: 0;
                    right: auto;
                    bottom: auto;
                    left: 0;
                }
                .y2010 .gas {
                    width: 513px;
                    height: 269px;
                    top: 0;
                    right: 0;
                    bottom: auto;
                    left: auto;
                }                
                .y2010 .elec {
                    width: 419px;
                    height: 179px;
                    top: auto;
                    right: 94px;
                    bottom: 0;
                    left: auto;
                }                
                .y2010 .other {
                    width: 86px;
                    height: 108px;
                    top: auto;
                    right: 0;
                    bottom: 0;
                    left: auto;
                }                
                .y2010 .solid {
                    width: 86px;
                    height: 63px;
                    top: auto;
                    right: 0;
                    bottom: 116px;
                    left: auto;
                }
                
                
                
        .grass-switch {
            position: absolute;
            bottom: 37px; right: -74px;
            width: 108px;
            height: 75px;
            display: block;
            z-index: 6;
            background: url(../img/grass-switch-shadow.png) bottom left no-repeat;
            padding-bottom: 10px;
            cursor: pointer;
        }
            .grass-switch span {position: absolute;display: block;}
            .base {
                width: 61px;
                height: 31px;
                left: 20px;
                background: url(../img/lever-base.png) no-repeat;
                z-index: 10;
                bottom: 10px;
            }
            @-webkit-keyframes lever {
                0% {-webkit-transform: rotate(0)}             
                30% {-webkit-transform: rotate(-35deg)}
                100% {-webkit-transform: rotate(0)}                      
            }
            @-webkit-keyframes lever2 {
                0% {-webkit-transform: rotate(0);}             
                30% {-webkit-transform: rotate(-35deg);-webkit-transition-timing-function: ease-in;}
                100% {-webkit-transform: rotate(0)}                
            }
            @-moz-keyframes lever {
                0% {-moz-transform: rotate(0)}             
                30% {-moz-transform: rotate(-35deg)}
                100% {-moz-transform: rotate(0)}                      
            }
            @-moz-keyframes lever2 {
                0% {-moz-transform: rotate(0);}             
                30% {-moz-transform: rotate(-35deg);-moz-transition-timing-function: ease-in;}
                100% {-moz-transform: rotate(0)}                
            }
            .lever {
                z-index: 8;
                left: 50px;
                top: 4px;
                width: 43px;
                height: 60px;
                background: url(../img/lever.png) no-repeat;
                -webkit-animation: lever 1s;-moz-animation: lever 1s;
                -moz-transform-origin: 0 100%;-webkit-transform-origin: 0 100%;                
            }
            .switched-lever {-moz-animation: lever2 1s;-webkit-animation: lever2 1s;}
            .grass-switch .hover {
                left: 33px;
                bottom: 13px;
                color: #fff;
                font-family: proxima-nova;font-weight: 700;
                z-index: 12;
                font-size: 0.9em;
                /* IE 8 */
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
                /* IE 5-7 */
                filter: alpha(opacity=0);
                /* Netscape */
                -moz-opacity: 0;
                /* Safari 1.x */
                -khtml-opacity: 0;
                /* Good browsers */
                opacity: 0;   
                -webkit-transition: 0.2s ease-in-out;-moz-transition: 0.2s ease-in-out;-o-transition: 0.2s ease-in-out;-ms-transition: 0.2s ease-in-out;
            }
            .grass-switch:hover .hover {
                /* IE 8 */
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
                /* IE 5-7 */
                filter: alpha(opacity=100);
                /* Netscape */
                -moz-opacity: 1;
                /* Safari 1.x */
                -khtml-opacity: 1;
                /* Good browsers */
                opacity: 1;   
            }
            .grass-switch .label {
                color: #fff;
                font-family: proxima-nova;font-weight:700;
                font-size: 0.9em;
                left: 72px;
                top: -12px;
            }
            
        .box-shadow {background: url(../img/box-shadow.png) no-repeat;width: 1062px; height: 44px;position: absolute;bottom: 62px;left:-54px;z-index:5;}
    
    .zigzag {
        background: url(../img/zigzag.jpg) top repeat-x;
        height: 3px;
        border: none;
    }
    
    .chart {
        height: 1493px;
        background: url(../img/chart-bg.png);
    }
        .chart header {padding: 75px 0 0 0;margin-bottom: 25px;}
        .chart header h2 {
            background: url(../img/energy-by-sector-h2.png) center top no-repeat;
            height: 59px;
	    float: left;
	    width: 517px;
        }
	
	p.sector-intro {margin-left: 27px; width: 386px;float: left;font-family: proxima-nova;font-weight: 500;}
        .pies {
            /*-webkit-backface-visibility: hidden;*/
            clear: both; padding-top: 37px;
            overflow: hidden;
            margin-bottom: 40px;
        }
            .pies .key {width: 132px;height:292px;float: left;-webkit-transform:translate3d(0,0,0);-webkit-backface-visibility: hidden;}
            .pies .key ul {-webkit-transform:translate3d(0,0,0);-webkit-backface-visibility: hidden;}            
            .pies .key li  {}
            .pies .key li a {                
                background: url(../img/pie-key-new.png);
                display: block;
                width: 132px;
                height: 61px;
                -webkit-transition: 0.2s ease-in-out;-moz-transition: 0.2s ease-in-out;-o-transition: 0.2s ease-in-out;-ms-transition: 0.2s ease-in-out;
                cursor: pointer;
		padding-bottom: 16px;
            }
            .pies .key .p-industry a.over {background-position:left top;}
            .pies .key .p-domestic a.over {background-position:left -77px;}            
            .pies .key .p-transport a.over {background-position:left -154px;}            
            .pies .key .p-other a.over {background-position:left -231px;}
            
            .pies .key .p-industry a {background-position:right top;}
            .pies .key .p-domestic a {background-position:right  -77px;}            
            .pies .key .p-transport a {background-position:right -154px;}            
            .pies .key .p-other a {background-position:right -231px; padding-bottom:0;}
            
            span.year {
                font-family: 'Matiz';
                font-size: 1.5em;
                letter-spacing: -1px;
            }
            
            .pies .pie-charts {overflow: hidden;width: 789px;float: right;padding-top: 20px;}            
                .pie {float: left;width: 246px;margin-left: 17px;text-align: center;position:relative;}
                    .pie .pie-spin {position: relative;height: 245px;background: url(../img/pies.png) no-repeat;margin-bottom: 20px;-webkit-transition: 0.5s ease-out;-moz-transition: 0.5s ease-out;-o-transition: 0.5s ease-out;-ms-transition: 0.5s ease-out;}
                    
                    .pie-1 .pie-spin {background-image: url(../img/pie-1.png);}
                    .pie-2 .pie-spin {background-image: url(../img/pie-2.png);}                    
                    .pie-3 .pie-spin {background-image: url(../img/pie-3.png);}
                        
                    /** CW **/
                    
                    .over .pie-spin {-webkit-transition-duration: 0.2s ;-moz-transition-duration: 0.2s;}
                    
                    .p-industry-t.pie-1 .pie-spin, .p-industry-t.pie-3 .pie-spin, .p-transport-t.pie-1 .pie-spin, .p-transport-t.pie-3 .pie-spin, .p-domestic-t.pie-2 .pie-spin, .p-other-t.pie-2 .pie-spin {
                        -webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);
                    }
                    /** ACW **/
                    .p-industry-t.pie-2 .pie-spin, .p-transport-t.pie-2 .pie-spin, .p-domestic-t.pie-1 .pie-spin, .p-domestic-t.pie-3 .pie-spin, .p-other-t.pie-1 .pie-spin, .p-other-t.pie-3 .pie-spin {
                        -webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);
                    }
                    
                    .white-disc {
                        position: absolute;
                        background: url(../img/white-disc.png) no-repeat;
                        width: 212px;
                        height:212px;
                        top: 17px;
                        left: 17px;
                        background-size: 100%;
                        -webkit-transition: 0.2s ease-out;-moz-transition: 0.2s ease-out;-o-transition: 0.2s ease-out;-ms-transition: 0.2s ease-out;
                        -webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);-ms-transform: scale(0);
                    }
                    .pie-stat {
                        position: absolute;
                        width: 198px;
                        /*height:198px;*/
                        /*background: rgba(255,0,0,.2);*/
                        top: 98px;
                        left: 24px;
                        /*-webkit-transition: 0.4s ease-out;-moz-transition: 0.4s ease-out;-o-transition: 0.4s ease-out;-ms-transition: 0.4s ease-out;*/
                        /*-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-o-transform-origin:50% 50%;-ms-transform-origin:50% 50%;*/
                        font-family: 'Matiz';
                        
                        color: #fff;
                        font-size: 5em;
                        line-height: 0.4em;
                        text-transform: uppercase;
                        text-align: center;
                        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
                        /* IE 5-7 */
                        filter: alpha(opacity=0);
                        /* Netscape */
                        -moz-opacity: 0;
                        /* Safari 1.x */
                        -khtml-opacity: 0;
                        /* Good browsers */
                        opacity: 0;
                        -webkit-transition: opacity 0.01s ease-out;-moz-transition: opacity 0.01s ease-out;-o-transition: opacity 0.01s ease-out;-ms-transition: opacity 0.01s ease-out;
                        -webkit-transition-delay: 0s;-moz-transition-delay: 0s;-o-transition-delay: 0s;-ms-transition-delay: 0s;                        
                        
                    }
                    .over .pie-stat {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
                        /* IE 5-7 */
                        filter: alpha(opacity=100);
                        /* Netscape */
                        -moz-opacity: 1;
                        /* Safari 1.x */
                        -khtml-opacity: 1;
                        /* Good browsers */
                        opacity: 1;-webkit-transition-delay: 0.12s;-moz-transition-delay: 0.12s;-o-transition-delay: 0.12s;-ms-transition-delay: 0.12s;   }
                        .percent {
                            color: #428D70;
                            font-size: 0.5em;
                            position: relative;
                            top: -0.7em;
                        }
                        .stat-num {letter-spacing: -0.07em;}
                        .pie-stat .percent {/*color: #000;*//*font-size: 0.8em;*/}
                        .pie-stat .block {display:block;font-size: 0.3em;color:#428D70;}                        
                        
                        
                    .colour-disc {
                        position: absolute;
                        
                        width: 198px;
                        height:198px;
                        top: 24px;
                        left: 24px;
                        -webkit-transition: 0.35s ease-out;-moz-transition: 0.35s ease-out;-o-transition: 0.35s ease-out;-ms-transition: 0.35s ease-out;
                        -webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);-ms-transform: scale(0);
                    }
                    
                    .p-industry-t .percent, .p-industry-t .block {color: #b19a9c;}
                    .p-domestic-t .percent, .p-domestic-t .block {color: #368786;}       
                    .p-other-t .percent, .p-other-t .block {color: #7c7c01;}
                    
                    
                    .p-industry-t .colour-disc {background: url(../img/brown-disc.png) no-repeat;}
                    .p-domestic-t .colour-disc {background: url(../img/blue-disc.png) no-repeat;}                    
                    .p-transport-t .colour-disc {background: url(../img/green-disc.png) no-repeat;}                    
                    .p-other-t .colour-disc {background: url(../img/lime-disc.png) no-repeat;}                    
                    
                    .open-white-disc {-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);}
                    .open-stat {transition-delay:.12s;-moz-transition-delay:.12s;-webkit-transition-delay:.12s;-o-transition-delay:.12s;}                    
                    .open-colour-disc {-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);}                    
                  
            .chart-stats img{position: relative;}
            .chart-stat-2 {margin: 0 24px;}
          
        .chart h3 {
            background: url(../img/pie-h3.png) center top no-repeat;
            height: 32px;
            margin-bottom: 15px;
        }
        .tree-chart-heading {
            background: url(../img/total-primary-pink.png) center top no-repeat;
            height: 69px;
            margin-top: 50px;
            float: left;
            width: 396px;
            margin-left: 55px;
        }
	p.tree-chart-intro {
	    font-family: proxima-nova;
	    font-weight: 500;
	    float: left;
	    width: 461px;
	    margin-top: 50px;
	    margin-bottom: 40px;
	}
        .tree-chart {
            margin-top: 40px;
            background: url(../img/tree-chart-bg.gif) center top no-repeat;
            height: 375px;
            text-align: center;
            /*height: 493px;*/
            clear: both;
        }
            /*.tree-chart img {position: relative;}*/
            
            .tree-chart .stumps {
                background: url(../img/stumps.png) no-repeat;
                width: 678px;
                height: 79px;
                position: absolute;
                bottom: 55px;
                left: 90px;
            }
            
            .tree-blobs {position: relative;cursor:pointer;}
            .tree-blobs div {position: absolute;}
            .tree-blobs span {display: block; position: absolute;left:0;}
            .tree-disc {width: 100%;height: 100%;left:0;}
            
            .tree-stat {
                color: #fff;
                width: 100%;
                font-family: matiz;
                position: relative;
                display: block;
                pointer-events: none;
                /* IE 8 */
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
                /* IE 5-7 */
                filter: alpha(opacity=0);
                /* Netscape */
                -moz-opacity: 0;
                /* Safari 1.x */
                -khtml-opacity: 0;
                /* Good browsers */
                opacity: 0;
                -webkit-transition: 0.2s ease-out;-moz-transition: 0.2s ease-out;-o-transition: 0.2s ease-out;-ms-transition: 0.2s ease-out;
            }
            .tree-blobs div:hover .tree-stat {
                /* IE 8 */
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
                /* IE 5-7 */
                filter: alpha(opacity=100);
                /* Netscape */
                -moz-opacity: 1;
                /* Safari 1.x */
                -khtml-opacity: 1;
                /* Good browsers */
                opacity: 1;
            }
            .s .tree-stat {font-size: 1em;}
            .m .tree-stat {font-size: 1.3em;}            
            .l .tree-stat {font-size: 2.1em;}
            
            @-webkit-keyframes blob-hover {
                0% {-webkit-transform: scale(1);}
                50% {-webkit-transform: scale(1.08);}                
                100% {-webkit-transform: scale(1);}                
            }
            @-moz-keyframes blob-hover {
                0% {-moz-transform: scale(1);}
                50% {-moz-transform: scale(1.08);}                
                100% {-moz-transform: scale(1);}                
            }
            .tree-blobs div:hover .tree-disc {-webkit-animation: blob-hover .3s ease-in-out;-moz-animation: blob-hover .3s ease-in-out;}
            .pb-1 {width: 61px;height:61px;left:67px;top:95px;}
                .pb-1 .tree-disc {background-image: url(../img/pb-1.png);}
                .pb-1 .tree-stat {padding-top: 21px;opacity:1;}                
                
            .pb-2 {width: 34px;height:34px;left:176px;top:109px;}
                .pb-2 .tree-disc {background-image: url(../img/pb-2.png);}
                .pb-2 .tree-stat {padding-top: 8px;}  
                
            .pb-3 {width: 40px;height:40px;left:260px;top:106px;}
                .pb-3 .tree-disc {background-image: url(../img/pb-3.png);}
                .pb-3 .tree-stat {padding-top: 11px;} 
                
            .pb-4 {width: 49px;height:49px;left:350px;top:101px;}
                .pb-4 .tree-disc {background-image: url(../img/pb-4.png);}
                .pb-4 .tree-stat {padding-top: 15px;} 
                
            .pb-5 {width: 73px;height:73px;left:432px;top:89px;}
                .pb-5 .tree-disc {background-image: url(../img/pb-5.png);}
                .pb-5 .tree-stat {padding-top: 25px;} 
                
            .pb-6 {width: 85px;height:85px;left:523px;top:83px;}
                .pb-6 .tree-disc {background-image: url(../img/pb-6.png);}
                .pb-6 .tree-stat {padding-top: 31px;} 
                
            .pb-7 {width: 142px;height:142px;left:582px;top:56px;}
                .pb-7 .tree-disc {background-image: url(../img/pb-7.png);}
                .pb-7 .tree-stat {padding-top: 50px;} 
                
            .pb-8 {width: 145px;height:145px;left:675px;top:55px;}
                .pb-8 .tree-disc {background-image: url(../img/pb-8.png);}
                .pb-8 .tree-stat {padding-top: 51px;} 
                
            .pb-9 {width: 86px;height:86px;left:794px;top:86px;}
                .pb-9 .tree-disc {background-image: url(../img/pb-9.png);}
                .pb-9 .tree-stat {padding-top: 31px;opacity:1;} 
                
            .bb-1 {width: 67px;height:67px;left:64px;top:196px;}
                .bb-1 .tree-disc {background-image: url(../img/bb-1.png);}
                .bb-1 .tree-stat {padding-top: 24px;opacity:1;} 
                
            .bb-2 {width: 46px;height:46px;left:169px;top:207px;}
                .bb-2 .tree-disc {background-image: url(../img/bb-2.png);}
                .bb-2 .tree-stat {padding-top: 13px;} 
                
            .bb-3 {width: 46px;height:46px;left:257px;top:207px;}
                .bb-3 .tree-disc {background-image: url(../img/bb-3.png);}
                .bb-3 .tree-stat {padding-top: 13px;} 
                
            .bb-4 {width: 43px;height:43px;left:351px;top:208px;}
                .bb-4 .tree-disc {background-image: url(../img/bb-4.png);}
                .bb-4 .tree-stat {padding-top: 12px;} 
                
            .bb-5 {width: 97px;height:97px;left:419px;top:180px;}
                .bb-5 .tree-disc {background-image: url(../img/bb-5.png);}
                .bb-5 .tree-stat {padding-top: 37px;} 
                
            .bb-6 {width: 103px;height:103px;left:509px;top:177px;}
                .bb-6 .tree-disc {background-image: url(../img/bb-6.png);}
                .bb-6 .tree-stat {padding-top: 40px;} 
                
            .bb-7 {width: 151px;height:151px;left:576px;top:155px;}
                .bb-7 .tree-disc {background-image: url(../img/bb-7.png);}
                .bb-7 .tree-stat {padding-top: 58px;} 
                
            .bb-8 {width: 151px;height:151px;left:675px;top:155px;}
                .bb-8 .tree-disc {background-image: url(../img/bb-8.png);}
                .bb-8 .tree-stat {padding-top: 58px;} 
                
            .bb-9 {width: 67px;height:67px;left:804px;top:201px;}
                .bb-9 .tree-disc {background-image: url(../img/bb-9.png);}
                .bb-9 .tree-stat {padding-top: 21px;opacity:1;} 
                
            .pb-1 .tree-stat, .pb-9 .tree-stat,
            .bb-1 .tree-stat, .bb-9 .tree-stat
            {
               /* IE 8 */
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
                /* IE 5-7 */
                filter: alpha(opacity=100);
                /* Netscape */
                -moz-opacity: 1;
                /* Safari 1.x */
                -khtml-opacity: 1;
                /* Good browsers */
                opacity: 1; 
            }
                
            .tree-blob-key {
                position: absolute;
                display: block;
                width: 343px;
                height: 41px;
                background: url(../img/tree-blob-key.png) no-repeat;
                bottom: -21px;
                left: 202px;
            }
            
    .graph {}
        .top {background: url(../img/top-bg.png) top repeat-x;height: 492px;}
            .graph header {padding-top: 63px;}
            .graph header h2 {                
                float: left;
            }
            .graph header p {                
                float: right;
                width: 475px;
                font-family: "proxima-nova", Arial;
                font-weight: 700;
                font-size: 1.2em;
            }
            .graph-chart {
                background: url(../img/graph-heading.png) top left no-repeat;
                width: 400px;
                height: 164px;
            }
        .bottom {background: url(../img/bottom-bg.png);height: 431px;}
            .bottom .site-width {height: 100%;overflow:visible;}
            .i-graph {
                /*background: url(../img/graph.png) no-repeat;*/
                height: 503px;
                width: 961px;
                position: absolute;
                top: -251px;
            }
                .blob-1 {
                    position: absolute;
                    right: 0;
                    top: 0px;
                    -webkit-animation: wave 3s ease-in-out 1.5s infinite;-moz-animation: wave 3s ease-in-out 1.5s infinite;
                }
                .blob-2 {
                    position: absolute;
                    top: 293px;
                    right: 0;
                    -webkit-animation: wave 3s ease-in-out infinite;-moz-animation: wave 3s ease-in-out infinite;
                }
                
/** Tool Tip **/

        .unadjusted {
            display: block;
            width: 128px;
            height: 30px;
            /*position: absolute;*/
            left: 577px;
            bottom: -13px;
            text-align: left;
        }
        .temp-corrected {
            display: block;
            width: 128px;
            height: 30px;
            /*position: absolute;*/
            left: 688px;
            bottom: -13px;
            text-align: left;
        }

        .bubbleInfo {
            position: absolute;
            /*top: 150px;*/
            /*left: 100px;*/
            width: 500px;
        }
        .trigger {
            position: absolute;
            cursor: pointer;
        }
     
        /* Bubble pop-up */

        .popup {
        	position: absolute;
        	display: none;
        	z-index: 50;
            width: 300px;
            
            
            background: #CC3399;
            color: #fff;
            padding: 10px 12px;
            border-radius: 0.4em;
            /*opacity: 0;*/
            /*overflow: hidden;*/
            /*-webkit-transition: 0.2s ease-out;-moz-transition: 0.2s ease-out;-o-transition: 0.2s ease-out;-ms-transition: 0.2s ease-out;*/
            font-family: "proxima-nova", Arial;
            font-weight: 700;
        }
        
.bottom-text {
    position: absolute;
    bottom: 57px;
    font-family: "proxima-nova", Arial;
    font-weight: 700;
    color: #567379;
    text-align: center;
    margin: 0 auto;
    border-top: 1px dashed #96c9de;
    padding: 20px 150px 0;
}
    .bottom-text a, .bottom-text a:visited {
        color:#CC3399;
    }