@import url(//fonts.googleapis.com/css?family=Oswald:400);
* {
    margin: 0;
    padding: 0;
}
.chart {
    width: 700px;
    height: 400px;
    float: left;
    margin-right: auto;
    margin-left: auto;

}
#regions{
    width: 300px;
    float: left;
}
#header {
    text-align: center;
    margin: 0 0 30px 0;
    padding: 15px 0 15px 0;
}

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

#txt_subtitle {
    font-size: 17px;
    text-align: center;
}
.pieTip {
    position: absolute;
    float: left;
    min-width: 30px;
    max-width: 300px;
    padding: 5px 18px 6px;
    border-radius: 2px;
    background: rgba(255,255,255,.97);
    color: #444;
    font-size: 19px;
    text-shadow: 0 1px 0 #fff;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
    letter-spacing: .06em;
    box-shadow: 0 0 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.5);
    -webkit-transform: all .3s;
    -moz-transform: all .3s;
    -ms-transform: all .3s;
    -o-transform: all .3s;
    transform: all .3s;
    pointer-events: none;
}
.pieTip:after {
    position: absolute;
    left: 50%;
    bottom: -6px;
    content: "";
    height: 0;
    margin: 0 0 0 -6px;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 6px solid rgba(255,255,255,.95);
    line-height: 0;
}
.chart path { cursor: pointer; }