/**
 * CSS bar graph with Positive and Negative values
 */
.graph {
	width: 100px;
	border: 1px solid #aeaeae;
	background-color: #eaeaea;
}
/* Start of "Micro clearfix" */
        
        .cf { zoom: 1; }
        .cf:before,
        .cf:after { content: ""; display: table; }
        .cf:after { clear: both; }
        
        /* End of "Micro clearfix" */
 
 
.ext {
	width: 50px;
padding: 2px 0;
}
.ext.neg {
border-right: 1px solid black;
}
.ext.pos {
margin-left: 50px;
border-left: 1px solid black;
}
 
.ext.neg .bar {
  float: right;
  margin-bottom: 5px;
  background-color: red;
}
 
.ext.pos .bar {
 
  background-color: green;
}
 
.bar {
    height: 5px;
}