div.chart { min-width: 310px; max-width: 645px; display: block; border-bottom: 1px solid #ddd;}
div.chart .active {display: block !important;}
div.headtohead_breakdown {display: hidden;}
div#breakdown_container {display: block; overflow: hidden; width: 100%; border-bottom: 1px solid #ddd;}

div.chartheader {margin: 3em auto;}
div.chart { min-width: 310px; max-width: 645px; display: block;}
img.headshot {height: 100px; float:left; margin-right: 1em;}
img.headshot .right {float:right; margin-left: 1em;}
p.charttitle {
  font-family: 'Open Sans', sans-serif; 
  font-size: 26px; font-weight: 600;
  line-height: 28px; 
  text-align: right; 
  position: relative; 
  width: 100%; height: 100px; left: 0px;
  border-bottom: 1px solid #000;
}
p.charttitle span { position: relative; top: 48px; }

div.switch {width: 100%; margin: 0.5em auto;}

div.iaSource {   font-family: 'Open Sans', sans-serif;  font-size: 0.8em;  text-align: right;}
span.bcBold {font-weight: 600;}

/* svg styles */
#states path {
  stroke: #fff;
}

path.arc {
  pointer-events: none;
  stroke: #fff;
  stroke-width: 1px;
}

svg text.pielabel {
  font-size: 14px;
  font-weight: 600;
  font-family: Open sans, sans-serif;
	fill:#000; fill-opacity:1;stroke:#fff;stroke-width:4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;
    paint-order: stroke;
}

svg text.title {
  font-size: 16px;
  font-weight: 900;
  font-family: Open sans, sans-serif;
}

path.cell {
  fill: none;
  pointer-events: all;
}

path.county {fill: #999; stroke-width: 1px; stroke-color: #fff;}

path.district {stroke-width: 5px; stroke: #fff; stroke-linejoin: round;}

circle {
  fill-opacity: 1;
  stroke: #fff;
}

#legend {font-family: 'Open Sans', sans-serif, font-size: 10px;}

@media screen and (max-width: 450px) {
	svg text.pielabel {
	  font-size: 10px;
	  stroke-width: 2px;
	  font-family: Open sans, sans-serif;
	}

	path.district {stroke-width: 2px; stroke: #fff; stroke-linejoin: round;}
}

.svgButton { 
	text-transform: uppercase; 
	font-family: 'Open Sans', sans-serif; 
	display: inline-block;
	list-style-type: none;
	width: 48%;  height: 3em;
	background-color: white; 
	padding: 0.25em;
	cursor: pointer; 
	border: solid 1px rgb(225,225,225); 
	color: rgb(100,100,100); 
	font-size: 13px; 
	font-weight: 600; 
	float: left; 
	letter-spacing: 1px; 
}
.buttonOn, .svgButton:hover { 
	background-color: rgb(198,40,40); 
	border: solid 1px rgb(198,40,40); 
	color: rgb(255,255,255); 
    -webkit-transition: background 0.5s linear;
    -moz-transition: background 0.5s linear;
    -ms-transition: background 0.5s linear;
    -o-transition: background 0.5s linear;
    transition: background 0.5s linear;
}


.iconPlain  {
    fill:white;   
}
            
.iconSelected  {
    fill:orange;   
}

#isotypechart text { 
	fill:orange;
	text-anchor:left;
	font-family: 'Open Sans',sans-serif,Helvetica,Arial;
	font-weight:bold;    
}

#isotypechart #txtValue {font-size: 32px;}

#isotypechart #txtChatter { 
	font-size: 16px;
}

rect.isotype    {
    fill:#555555;   
}


@media screen and (max-width: 520px) {
	img.headshot {height: 80px; float:left; margin-right: 1em;}
	p.charttitle {
	  font-size: 18px; font-weight: 600;
	  line-height: 24px; 
	  text-align: center; 
	  position: relative; 
	  width: 100%; height: 80px;
	}
	.svgButton { width: 50% !important; box-sizing: border-box; font-size: 10px; padding: 4px 7px 7px 7px; line-height: 16px; height: 44px; overflow: hidden;}
	p.charttitle span { position: relative; top: 0px; }
}