html * {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 20pt;
    color: #424241;
}

h2, h2 a {
    font-size: 28px;
    font-weight: bold;
}

h1, h1 a {
    font-size: 30px;
    font-weight: bold;
    color: #0b7a3c;
}

h3, h3 a {
    font-size: 26px;
    font-weight: bold;
}

h4, h4 a {
    font-size: 20px;
    font-weight: bold;
}

h5, h5 a {
    font-size: 18px;
    font-weight: bold;
}

h6, h6 a {
    font-size: 14px;
    font-weight: bold;
}

p {
    line-height: 20px !important;
}
/* new clearfix */
.clearFix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

* html .clearFix {
    zoom: 1;
}
/* IE6 */
*:first-child + html .clearFix {
    zoom: 1;
}
/* IE7 */

.leftFloat {
    float: left;
}

.rightFloat {
    float: right;
}






/* =========================== GLOBAL COMPONENT =========================== */
.mapAndIslandImage {
    /*flex-wrap the map and image next to it*/
    background-color: #f6f6f6;
}

.amChart.RESImap {
    background-color: #f6f6f6;
    width: 300px;
    float: left;
}
/* after the map, we inject the island */
.geo_HS_TS_island {
    z-index: 2000;
    width: 50px;
    float: left;
    height: 40vh;
    /*left: -50px;*/
    position: relative;
}

.pageIndex .geo_HS_TS_island, .pageProvinceList .geo_HS_TS_island {
    width: 100px;
}


.amChart {
    background-color: blue;
    background-color: #f6f6f6;
    z-index: 1000;
    width: 100%;
    height: 40vh;
}


/*need to turn on in JS
    var AMMAP_CONFIG = {
    "type": "map",
    addClassNames: true,*/
.RESImap .amcharts-map-area {
    /*opacity: .9;*/
    -webkit-transition: all .5s cubic-bezier(0,.45,.15,2);
    -webkit-transform-origin: 50% 50%;
    transition: all .3s cubic-bezier(0,.45,.15,2);
    transform-origin: 50% 50%;
}

    .RESImap .amcharts-map-area:hover {
        /*opacity: 1;*/
        -webkit-transform: scale(2);
        transform: scale(2);
    }

/* animate the selected area*/
.RESImap .RESImap__area--selected {
    -webkit-animation: am-pulsating 1s ease-out infinite;
    animation: am-pulsating 1s ease-out infinite;
}

@-webkit-keyframes am-pulsating {
    0% {
        stroke-opacity: 1;
        stroke-width: 0px;
    }

    100% {
        stroke-opacity: 0;
        stroke-width: 50px;
    }
}

@keyframes am-pulsating {
    0% {
        stroke-opacity: 1;
        stroke-width: 0px;
    }

    100% {
        stroke-opacity: 0;
        stroke-width: 50px;
    }
}


/*// auto replace class should inherit all thing from its parent,because it is embbed inside h1, h2, ... */
.auto {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.auto--GeoColor {
    padding: 5px 50px;
}

.GeoColor--orange {
    background-color: #f77b0f;
}

.GeoColor--yellow {
    background-color: #f7b90f;
}

.GeoColor--green {
    background-color: #74c20e;
}



/*----Begin style Body and Structure ------*/
body {
    background-image: url("../img/common/img_banner.jpg"), url("../img/common/footerBg.png");
    background-repeat: repeat-x;
    background-position: top left, bottom left;
}

.pageStructure {
    width: 965px;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 100;
    top: 0;
    padding-bottom: 227px;
}
    /*----End style Body and Structure ------*/


    /*----Begin style Banner Area----*/
    .pageStructure .topArea {
        height: 270px;
        display: inline-block;
        z-index: 99;
        top: 0;
    }

    .pageStructure .language {
        display: inline-block;
        float: right;
        width: 100px;
        margin-top: 40px;
    }

        .pageStructure .language img {
            display: inline-block;
            float: right;
        }

        .pageStructure .language h6 {
            display: inline-block;
            float: right;
            line-height: 11px;
            margin-left: 5px;
            color: white;
        }

        .pageStructure .language li,
        .pageStructure .language li a {
            line-height: 11px;
            height: 11px;
            text-align: right;
            float: right;
            color: white;
            text-decoration: none;
        }

            .pageStructure .language li a:hover {
                color: #74c20e;
            }

    .pageStructure .subNavigator {
        width: 322px;
        height: 120px;
        background-color: rgba(0, 0, 0, 0.5);
        display: inline-block;
        float: right;
        padding-top: 5px;
    }

        .pageStructure .subNavigator .lineSpaceSubnavigator {
            background-image: url("../img/common/lineSpace.png");
            width: 1px;
            height: 107px;
            display: inline-block;
            float: left;
        }

        .pageStructure .subNavigator .leftSubNagvigator,
        .pageStructure .subNavigator .rightSubNagvigator {
            display: inline-block;
            float: left;
            color: white;
            width: 115px;
            margin-left: 40px;
        }

            .pageStructure .subNavigator .leftSubNagvigator h6,
            .pageStructure .subNavigator .rightSubNagvigator h6 {
                color: white;
            }

        .pageStructure .subNavigator ul li,
        .pageStructure .subNavigator ul li a {
            display: inline-block;
            text-align: left;
            float: left;
            line-height: 20pt;
            font-size: 13px;
            color: white;
        }

            .pageStructure .subNavigator ul li a:hover {
                color: #74c20e;
            }

    .pageStructure .logoArea {
        width: 643px;
        height: 194px;
        background: url("../img/common/RESI_logo.png") top left no-repeat;
        display: inline-block;
        float: left;
    }
    /*----End style Banner Area----*/

    /*----Begin style Navigator----*/
    .pageStructure .navigatorBlock {
        height: 63px;
        width: 965px;
        position: absolute;
        top: 192px;
        text-align: right;
    }

.navigatorBlock .navigator {
    text-align: right;
    float: right;
    display: inline-block;
}

    .navigatorBlock .navigator .activeNag {
        color: #fb7d20;
    }

    .navigatorBlock .navigator li {
        padding-left: 68px;
    }

        .navigatorBlock .navigator li,
        .navigatorBlock .navigator li a {
            display: inline-block;
            text-align: right;
            float: left;
            line-height: 63px;
            height: 63px;
            font-size: 16px;
            font-weight: bold;
            color: white;
            font-style: normal;
            text-decoration: none;
        }

            .navigatorBlock .navigator li a:hover {
                color: #74c20e;
            }

            .navigatorBlock .navigator li a:active {
                color: #fb7d20;
            }
/*----End style Navigator-----*/

/*----Begin style Main Content Area----*/
.pageStructure .contentBlock {
    margin: 40px 0 100px 0;
    width: 965px;
    display: inline-block;
}

    .pageStructure .contentBlock .nameOfPage {
        background: #e6e7e6 repeat-x;
        height: 45px;
        display: inline-block;
        width: 100%;
        margin-bottom: 20px;
    }

        .pageStructure .contentBlock .nameOfPage h1 {
            line-height: 45px;
            padding-left: 20px;
        }






    /*-----Begin style tab block------*/
    .pageStructure .contentBlock .tabBlock {
        margin-bottom: 45px;
    }

        .pageStructure .contentBlock .tabBlock .tabLine {
            width: 100%;
            height: 89px;
            margin-bottom: 27px;
        }

            .pageStructure .contentBlock .tabBlock .tabLine h2 {
                color: #c85c19;
                height: 89px;
                width: 391px;
                line-height: 89px;
                text-align: left;
                margin-left: 10px;
                display: inline-block;
                float: left;
                text-decoration: none;
            }


    .pageStructure .contentBlock .tabPanel .subHeadingInsideChart {
        margin-bottom: 10px;
        line-height: 2rem;
    }


    .pageStructure .contentBlock .tabBlock .tabLine .tabNormal .lastTab {
        margin-right: 0;
    }

    .pageStructure .contentBlock .tabBlock .tabLine .tabNormal {
        width: 89px;
        height: 89px;
        line-height: 89px;
        display: inline-block;
        float: left;
        text-align: center;
        background-color: #e1e0e0;
        margin-right: 5px;
        cursor: pointer;
        color: #9e9d9d;
    }

        .pageStructure .contentBlock .tabBlock .tabLine .tabNormal :hover {
            color: #c85c19;
        }

        .pageStructure .contentBlock .tabBlock .tabLine .tabNormal h3 {
            color: #9e9d9d;
            height: 89px;
            line-height: 89px;
        }

        .pageStructure .contentBlock .tabBlock .tabLine .tabNormal.tabActive {
            cursor: default;
            background-color: #c85c19;
        }

            .pageStructure .contentBlock .tabBlock .tabLine .tabNormal.tabActive h3 {
                color: white;
            }




    .pageStructure .contentBlock .GeoColorLegendBox {
        display: inline-block;
        float: right;
        margin: 50px 0;
    }

        .pageStructure .contentBlock .GeoColorLegendBox .lineGeoColorLegendBox {
            height: 2rem;
            float: left;
            display: inline-block;
            margin: 0 1rem;
        }

        .pageStructure .contentBlock .GeoColorLegendBox .colorBox {
            height: 25px;
            width: 64px;
            float: right;
            margin: 0 7px 0 7px;
        }

        .pageStructure .contentBlock .GeoColorLegendBox .NumberGeoColorLegendBox {
            float: right;
            width: 50px;
            text-align: left;
            line-height: 25px;
        }

        .pageStructure .contentBlock .GeoColorLegendBox .NameGeoColorLegendBox {
            width: 130px;
            float: right;
            line-height: 25px;
            text-align: right;
        }

    /*-----End style tab block------*/


    /*-----Begin style left content------*/
    .pageStructure .contentBlock .LeftContentDefaultPage {
        width: 700px;
        display: inline-block;
        float: left;
    }

        .pageStructure .contentBlock .LeftContentDefaultPage h1 {
            margin-bottom: 26px;
        }

        .pageStructure .contentBlock .LeftContentDefaultPage .styleFocusContent {
            margin: 30px 0 30px 0;
        }

            .pageStructure .contentBlock .LeftContentDefaultPage .styleFocusContent p,
            .pageStructure .contentBlock .LeftContentDefaultPage .styleFocusContent li {
                margin-left: 35px;
                padding-left: 20px;
                background: url("../img/common/iconStyleFocusContent.png") left 9px no-repeat;
            }
    /*-----End style left content------*/
    /*-----Begin style right content------*/
    .pageStructure .contentBlock .rightContentDefaultPage {
        width: 210px;
        display: inline-block;
        float: right;
    }

        .pageStructure .contentBlock .rightContentDefaultPage .utilityOptions {
            margin: 65px 0 10px 0;
        }

            .pageStructure .contentBlock .rightContentDefaultPage .utilityOptions .upponUtilityOptions {
                width: 100%;
                height: 5px;
                background: #0b7a3c repeat-x;
                margin-bottom: 20px;
            }

            .pageStructure .contentBlock .rightContentDefaultPage .utilityOptions .underUtilityOptions {
                width: 100%;
                height: 3px;
                background: #d7d9d7 repeat-x;
                margin-top: 10px;
            }

            .pageStructure .contentBlock .rightContentDefaultPage .utilityOptions ul li .guideOption {
                background: url("../img/common/iconGuidle.jpg") top left no-repeat;
                padding-left: 35px;
                height: 26px;
                line-height: 26px;
                display: inline-block;
                margin-bottom: 10px;
            }

            .pageStructure .contentBlock .rightContentDefaultPage .utilityOptions ul li .reportOption {
                background: url("../img/common/iconReport.jpg") top left no-repeat;
                padding-left: 35px;
                height: 26px;
                line-height: 26px;
                display: inline-block;
                margin-bottom: 10px;
            }

            .pageStructure .contentBlock .rightContentDefaultPage .utilityOptions ul li .sumOption {
                background: url("../img/common/iconSum.jpg") top left no-repeat;
                padding-left: 35px;
                height: 26px;
                line-height: 26px;
                display: inline-block;
                margin-bottom: 10px;
            }

            .pageStructure .contentBlock .rightContentDefaultPage .utilityOptions ul li,
            .pageStructure .contentBlock .rightContentDefaultPage .utilityOptions ul li a {
                color: #c85c19;
            }

                .pageStructure .contentBlock .rightContentDefaultPage .utilityOptions ul li a:hover {
                    color: #0b7a3c;
                }
    /*-----End style right content------*/
    /*----End style Main Content Area----*/

    /* Begin style for the page haass only 2 column*/
    .pageStructure .contentBlock .leftColumn {
        width: 578px;
        margin-right: 37px;
        float: left;
        display: inline-block;
    }

    .pageStructure .contentBlock .rightColumn {
        width: 350px;
        display: inline-block;
        float: right;
    }
/* End style for the page haass only 2 column*/

/* ------Begin footer------*/
/*Begin LeftFooter*/
.footerBlock .leftFooter {
    display: inline-block;
    width: 450px;
    float: left;
    margin-top: 20px;
    color: #424241;
}

    .footerBlock .leftFooter ul li,
    .footerBlock .leftFooter ul li a {
        display: inline-block;
        float: left;
        color: #c85c19;
        margin-right: 20px;
    }

        .footerBlock .leftFooter ul li a:hover {
            color: #0b7a3c;
        }

    .footerBlock .leftFooter h5 {
        color: #424241;
        margin-top: 10px;
    }

    .footerBlock .leftFooter .contactContent {
        display: inline-block;
        margin: 5px 0 15px 0;
    }

        .footerBlock .leftFooter .contactContent .address {
            background: url("../img/common/iconHome.png") top left no-repeat;
            height: 25px;
            line-height: 25px;
            display: inline-block;
            padding-left: 30px;
            margin-bottom: 5px;
        }

        .footerBlock .leftFooter .contactContent .emailAddress {
            background: url("../img/common/iconEmail.png") top left no-repeat;
            height: 25px;
            line-height: 25px;
            display: inline-block;
            padding-left: 30px;
            margin-bottom: 5px;
        }

        .footerBlock .leftFooter .contactContent .phoneNumber {
            background: url("../img/common/iconPhone.png") top left no-repeat;
            height: 25px;
            line-height: 25px;
            display: inline-block;
            padding-left: 30px;
            margin-bottom: 5px;
        }

/*Begin RightFooter*/
.footerBlock .rightFooter {
    display: inline-block;
    width: 350px;
    margin-top: 20px;
    float: right;
}

    .footerBlock .rightFooter h5 {
        text-align: right;
        margin-bottom: 10px;
    }

    .footerBlock .rightFooter .firstRowLogo {
        display: inline-block;
        float: right;
        margin-bottom: 10px;
    }

        .footerBlock .rightFooter .firstRowLogo img,
        .footerBlock .rightFooter .secondRowLogo img {
            margin-left: 5px;
        }

    .footerBlock .rightFooter .secondRowLogo {
        display: inline-block;
        float: right;
    }


/*Style of ToolTip*/
.toolTip {
    padding: 10px 5px;
    display: inline-block;
    /*-webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px; 
    border: 1px solid #f7b910;*/
    text-align: left;
}

.nameProToolTip {
    font-size: 14px !important;
    font-weight: bold;
    color: #0b793a;
    margin-right: 5px;
    text-align: left !important;
}

.scoreInToolTip {
    color: #ed5b02;
    font-weight: bold;
    font-size: 12px;
    line-height: 17px;
    text-align: left !important;
    margin-right: 5px !important;
}

.toolTip .TitleInToolTip {
    text-decoration: underline;
    padding-right: 5px;
    text-align: left !important;
}



.pageIndex .INDEX_composite_chart__provinceBar {
    BACKGROUND-COLOR: #f6f6f6;
    width: 900px;
    height: 2rem;
    padding-left: 65px;
    overflow: hidden;
}
.pageIndex .INDEX_composite_chart__provinceBox {
    text-align: center;
    float: left;
    margin-right: 4rem;
    width: 10rem;
}