/* Container */
.votestats {margin: 10px -20px;}
.votestats canvas {max-width:100%;width:100%;}

/* Clearing */
.votestats h3, .canvas-group {clear:both;}
.votestats h3 { margin-left: 20px; }
.canvas-holder {position:relative;float:left;margin: 20px 10px;}

/* Line graph (currently n/a) */
.canvas-holder.line {float:none;max-width:none;width:100%;}
.canvas-holder.line canvas {width:100%;}

/* Pie/Doughnut chart */
.turnout {
position: absolute;
left: 25%;
margin-top: 50%;
top: -23px;
width: 50%;
text-align: center;
line-height: 1;
font-size: 46px;
z-index: -1;
font-weight: bold;
}
.turnout.smallest {font-size:16px;}
.turnout.smaller {font-size:16px;top: -8px;}
.turnout.small {font-size:24px;top: -13px;}
.turnout.large {font-size:60px;top: -30px;}

.turnout span {font-size:24px;}
.turnout.smallest span, .turnout.smaller span {font-size:10px;}
.turnout.small span {font-size:12px;}

.demographic {
display: block;
text-align: center;
margin: 1em 0;
font-size: 24px;
font-weight: 600;
}
.demographic.smallest {font-size:12px;}
.demographic.small {font-size:18px;}
.demographic.large {font-size:28px;}

/* Progress Bars */
ul.vote-stats {margin: 10px 20px;padding:0; list-style:none;clear:both;}
ol.vote-stats {margin: 10px 0 10px 20px;padding:0; }
.vote-stats li {
margin: 5px 0;
padding:0;
position:relative;
border-radius:3px;
background-color:#eee;
}

.vote-stats li .msl-progress {
position:absolute;
border-radius:3px;
transition: bars 0.5s;
top:0;
bottom:0;
}

.vote-stats li .group-name {
font-weight:600;
padding:5px 8px;
display:inline-block;
position:relative;
}
.group-overall .vote-stats li .group-name, .vote-stats.dark li .group-name {color:#fff;}
.vote-stats.light li .group-name {color:#000;}

.vote-stats li .info {
position:absolute;
right:0;
padding: 5px;
}
.vote-stats li .percentage {
display:none;
position:absolute;
top:0px;
right:-20px;
padding:5px;
width:20px;
text-align:left;
background:#eee;
z-index:2;
}
.vote-stats li:hover .percentage {
display:block;
}

/* Animation Keyframes */

@keyframes bars {
from {width:0;}
to {width:100%;}
}
@-webkit-keyframes bars {
from {width:0;}
to {width:100%;}
}
.animate.vote-stats li .msl-progress span {
position:absolute;
top:0;
bottom:0;
left:0;
width:100%;
-webkit-animation: bars 2s ease-in-out 1; /* Chrome, Safari, Opera */ 
animation: bars 2s  ease-in-out 1;
}