/* Table */
.bar-diagram table {
	border: none; /* Turn off all borders */
	border-top: 1px solid #ccc;
	width: 540px;
}
.bar-diagram table {
	color: #545454;
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
	margin: 0 0 20px 0;
	padding: 0;
	text-align: center;
}
.bar-diagram table thead {
	background: #f0f0f0;
}
.bar-diagram table th, 
.bar-diagram table td {
	border: none; /* Turn off all borders */
	border-bottom: 1px solid #ccc;
	margin: 0;
	padding: 10px;
	text-align: left;	
}

/* Toggle */
.bar-diagram .toggles {
	background: #ebebeb;	
	color: #545454;
	height: 20px;
	padding: 15px;
}
.bar-diagram .toggles p {
	margin: 0;
}
.bar-diagram .toggles a {
	background: #222;
	border-radius: 3px;	
	color: #fff;
	display: block;
	float: left;
	margin: 0 10px 0 0;
	padding: 0 6px;
	text-decoration: none;
}
.bar-diagram .toggles a:hover {
	background: #666;
}

/* Graph */
/* Containers */
.bar-diagram .figure {
	height: 280px;
	position: relative;
}
.bar-diagram .figure ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bar-diagram .graph {
	height: 280px;
	position: relative;
}

/* Legend */
.bar-diagram .legend {
	background: #f0f0f0;
	border-radius: 4px;
	bottom: 0;
	position: absolute;
	text-align: left;
	width: 540px;	
}
.bar-diagram .legend li {
	display: block;
	float: left;
	height: 20px;
	margin: 0;
	padding: 10px 30px;
	width: 120px;
}
.bar-diagram .legend span.icon {
	background-position: 50% 0;
	border-radius: 2px;
	display: block;
	float: left;
	height: 16px;
	margin: 2px 10px 0 0;
	width: 16px;	
}

/* X-Axis */
.bar-diagram .x-axis {
	bottom: 0;
	color: #555;
	position: absolute;
	text-align: center;
	margin-top:1px;
        border-top:1px solid #00b3e9;
}
.bar-diagram .x-axis li {
	float: left;
	margin: 0 5px;
	padding: 3px 0 0;
	width: 42px;	
        background: none;
        font-size:13px;
        line-height: 1;
        color:#717171;
        height:15px;
}



/* Graph Bars */
.bar-diagram .bars {
	height: 230px;
	position: absolute;
        margin: 0 auto;
	z-index: 10;
        bottom:20px;
}
.bar-diagram .bar-group {
	float: left;
	height: 100%;
	margin: 0 5px;
	position: relative;
        width: 42px;
}
.bar-diagram .bar {
	bottom: 0;
	height: 0;
	position: absolute;
	text-align: center;
	width: 100%;
        -webkit-transition: height .8s ease-in-out, width .8s ease-in-out;
        -moz-transition: height .8s ease-in-out, width .8s ease-in-out;
        -o-transition: height .8s ease-in-out, width .8s ease-in-out;
        transition: height .8s ease-in-out, width .8s ease-in-out;
}
.bar-diagram .bar.fig0 {
	left: 0;
}
.bar-diagram .bar.fig1 {
	left: 0;
}
.bar-diagram .bar.fig2 {
	left: 0;
}
.bar-diagram .bar span {
	margin-top: -25px;
        display: block;
	position: relative;
	width: 100%;
	z-index: 20;
	text-align: center;
        font-size:16px;
        font-weight: bold;
}

.bar-diagram .fig0 {
	background: #00b3e9;
}
.bar-diagram .fig1 {
	background: #f8952b;
}
.bar-diagram .fig0 span {
	color:#00b3e9;
}
.bar-diagram .fig1 span {
	color:#f8952b;
}

.bar-diagram .horizontal .figure {
	height: auto;
}
.bar-diagram .horizontal .graph {
    height: auto;
    padding-top: 20px;
}

.bar-diagram .horizontal .bars {
    height: auto;
    position: relative;
    bottom:0;
}
.bar-diagram .horizontal .bar-group {
	float: none;
	height: 40px;
	margin: 0 0 20px;
	width: 100%;
}

.bar-diagram .horizontal .x-axis {
	position: absolute;
        z-index: 15;
        top:0;
	text-align: left;
	margin: 0;
        border-top:0;
        width: 40px;
        
}
.bar-diagram .horizontal .x-axis li {
	float: left;
	margin: 0 0 10px;
	padding-top: 7px;
	width: 100%;	
        height:43px;
}

.bar-diagram .horizontal .bar span {
	text-align: right;
        min-width: 80px;
        margin-top: 6px;
        -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;
        padding-right: 10px;
}
.textshadow .bar-diagram .horizontal .bar span {
	text-shadow:1px 1px 1px #000;
}
.no-textshadow .bar-diagram .horizontal .bar span {
	color:#000;
}