body {
	text-align: center;
}

div {
	float: left;
}
#waveformchart svg {
  position: absolute;
  width: 100%;
  height: 100%;
}
#waveformchart { 
	width: 100%;
	height: 140px;
	background-color: #333;
	position: relative;
	margin-bottom: 20px;
}
.axis {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}

.axis text {
	font: 11px sans-serif;
	fill: #000;
	stroke: none;
	font-weight: bold;
}

.axis line {
	stroke: #ccc;
}

.axis path {
	stroke: #ccc;
}
#waveformchart .bar{ 
	-ms-transform: scale(1,1); /* IE 9 */
    -webkit-transform: scale(1,1); /* Safari */
    transform: scale(1,1);
}

#waveformchart .bar:hover { 
	height: 100%;
	-ms-transform: scale(2,100); /* IE 9 */
    -webkit-transform: scale(2,100); /* Safari */
    transform: scale(2,100);
    -ms-transform-origin: 50% 50%; /* IE 9 */
    -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
    transform-origin: 50% 50%;
}

.bar:hover {    
	fill: #E55;
}

.dot:hover {
	fill: #E55;
}

.area:hover {
	fill: #E55;
}

.line {
	padding: 10px;
}

.line:hover {
	stroke: #E55;
}

.arc path:hover {
	fill: #E55;
}

.arc text {
	font: 11px sans-serif;
	fill: #000;
	stroke: none;
	font-weight: bold;
}

.tooltip {
	padding: 3px;
	border: 2px solid;
	border-radius: 4px;
	background-color: #eee;
	opacity: 0.6;
	justify-content: center;
	align-items: center;
}

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

.brush .background {
  fill: #ddd;
}