body {
  width: 100%;
  margin: auto;
  font-size: 16px;
  font-family:"avenir next", Arial, sans-serif;
  background-color:#f0f0f0;
/*          font-weight: 500;*/
}

#main {
    width: 90%;
    height: 98%;
    margin: auto;
    fill: #252525;
}

.axis { font: 12px sans-serif; }

.labels {
    fill: white;
}

#leftPanel {
  width: 40%;
  height: 92%;
  float: left;
  position: relative;
  text-align: left;
  font-family: 'Helvetica Neue',Arial,freesans,sans-serif;
  background-color:#fff;
}

#dropdown_selector {
    padding: 6% 0 1% 2%;
    width: 10%;
    height: 92%;
/*    margin-right: 0.5%;*/
    float: left;
    position: relative;
    font-family: 'Helvetica Neue',Arial,freesans,sans-serif;
    background-color:#fff;
    box-sizing:border-box;
}
#dropdown_selector select{height:483px;}

#dropdown_selector option {
    font-size: 12px;
}

#histogram {
    padding: 1% 0 1% 0;
    height: 95%;
    text-align: left;
    font-family: 'Helvetica Neue',Arial,freesans,sans-serif;
}

#filter {
    height: 3%;
    text-align: left;
    font-family: 'Helvetica Neue',Arial,freesans,sans-serif;
    font-size: 12px;
}

#panel {
    width: 49.5%;
    height: 92%;
    margin: auto;
    float: right;
    position: relative;
    text-align: left;
    font-family: 'Helvetica Neue',Arial,freesans,sans-serif;
/*    font-size: 18px;*/
    background-color:#fff;
}

#map {
    padding: 1% 0 1% 0;
    height: 65%;
    text-align: center;
    font-family:"avenir next", Arial, sans-serif;
}

#intro {
    padding: 2% 4% 4% 4%;
    height: 25%;
    text-align: left;
    font-family: "avenir next", Arial, sans-serif;
    overflow-y: auto; 
}

.introText {
    font-family: 'Helvetica Neue',Arial,freesans,sans-serif;
    font-size: 15px;
    line-height: 20px;
}

.y.axis line {
  fill: #BEBEBE;
  stroke: #BEBEBE;
}

.x.axis line {
  fill: #BEBEBE;
  stroke: #BEBEBE;
  shape-rendering: crispEdges;
}

.axis path {
    fill: #BEBEBE;
    stroke: #BEBEBE;
}

.brush .extent {
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

.tooltip {
    position: absolute;
    line-height: 1.5;
    font-weight: 200;
    font-family:"avenir next", Arial, sans-serif;
    padding: 2px;
    background: rgba(0, 0, 0, 0.7);
    color: #FFA500;
    border-radius: 3px;
    pointer-events: none;
  }

.tooltip p {
    border:  1px;
    padding: 1px;
    font-size: 12px;
}

.bubble {
    fill: #e66b6e;
    fill-opacity: .6;
    stroke: #fff;
    stroke-width: 1;
}

.mapLegend circle {
    fill: #e66b6e;
    fill-opacity: .6;
    stroke: #fff;
    stroke-width: 1;
}

.legend text {
    fill: #777;
    font: 10px sans-serif;
    text-anchor: middle;
}   

.handle {
    display: inline; 
    fill: #7A7A7A;
    fill-opacity: 1;
    stroke: #7A7A7A;
    stroke-width: 2px;
}

#header {
  width: 90%;
  max-height: 25px;
  margin: auto;
  background-color:#005371;
  color: #FFF;
  padding: 0.5% 0% 0.5% 0%;
  margin-bottom: 10px;
  font-size: 20px;
  text-align: center;
}

.tab_header{
    width: 90%;
    margin:auto;
    margin-bottom: 1%; 
    height: 2%;
    text-align: center;
    font-family: 'Helvetica Neue',Arial,freesans,sans-serif;
    font-size: 15px;

}

.tab_header ul {
    padding: 0;
    margin: 0;
}

.tab_header ul li{
    list-style-type: none;
    float: left;
    width: 20%;
    line-height: 30px;
    cursor: pointer;
}

.contentli {
    border:1px  solid #e1e1e1;
    border-left: none;
    background-color: #fff;
    box-sizing: border-box;
}

.content{
    border: 1px solid #eee;
    width: 90%;
    margin: 40px auto;
    text-align: center;
}

/*控制列表选项卡活动状态时的背景颜色*/
.tab_header .active{
    background-color: #CCC;
    filter: alpha(opacity=80);
    opacity: 0.8;
}

/*控制列表切换内容的显示与隐藏*/
.m_box {
    display: none;
}

.m_box.active {
    display: block;
}

/*
.subtopicHis .subtopicMap {
    font-family: 'Helvetica Neue',Arial,freesans,sans-serif;
    font-size: 18px;
}*/