body {
    font-family: 'Lato', Verdana, Arial, sans-serif;
    background-color: #f5f5f5;
	margin: 0;
	padding: 0;
}
.map-tooltip {
    position: relative;
    top: -9999px;
    right: -9999px;
}
.map-tooltip.closable {
    position: static;
}
.leaflet-control-container .leaflet-top.leaflet-right {
    bottom: 175px;
    top: auto;

}

#container {
	background-color: #eee;
	margin: 0;
	padding: 0;
	border: 0;
	height: 800px;
	overflow: hidden;
	position: relative;
}

#chart-canvas {
    width: 350px;
    height: 800px;
	background-color: #fff;
	z-index: 2;
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
}
	#header {
		padding: 0;
		background-color: #fff;
		width: 360px;
		overflow: hidden;
	}
		#buttons {
		    display: block;
		    clear: both;
		    z-index: 2;
			overflow: hidden;
		    font-family: 'Lato', Verdana, Arial, sans-serif;
		}
			a.button {
			    font-size: 13px;
				font-weight: 900;
				letter-spacing: 0.15em;
				text-decoration: none;
				text-transform: uppercase;
			    color: #fff;
				background-color: #000;
				padding: 13px 0;
				width: 117px;
			    text-align: center;
			    float: left;
			}
				a.button:hover {
					background: #e51133;
					color: #fff;
					cursor: pointer;
				}
				a.button-selected {
				    color: #000;
	                background-color: #fff;
				}
	#chart-header {
		display: block;
		overflow: hidden;
		padding: 15px 0;
		color: #666;
	    font-size: 12px;
	}
	.percent-reporting {
	    float: left;
		margin: 0 0 0 20px;
	}
	.marker {
	    float: right;
	    margin: 0 20px 0 0;
	}
		.marker img {
			margin: 0 0 0 7px;
			border: 1px solid #eee;
			vertical-align: middle;
		}
	.candidate {
		clear: both;
	    width: 100%;
		background: #fff;
	    height: 25px;
		padding: 12px 0 10px 0;
		margin: 0 0 1px 0;
	}
	.candidate-name {
	    float: left;
	    margin: 0 0 0 20px;
	    font-size: 14px;
		position: relative;
		top: 4px;
        width: 145px;
	}
    .candidate-party {
        font-size: 12px;
        float: left;
        margin-left: 5px;
        position: relative;
        top: 6px;


    }
		.candidate-name i {

			display: block;
			float: left;
			width: 20px;
			height: 20px;
			margin: 0 10px 0 0;
			position: relative;
			top: -2px;
		}
		.candidate-name b {
			font-weight: 900;
		}
	.candidate-votes, .candidate-vote-percent {
	    float: right;
		font-size: 14px;
		margin: 0 20px 0 0;
	    position: relative;
	    top: 4px;
	}
	.candidate-vote-percent {
	    font-weight: 900;
	    font-size: 18px;
	    top: 0px;
        width: 18%;
        text-align: right;
	}
    .candidate-votes {
        width: 17%;
        text-align: right;
		margin: 0 10px 0 0;
    }
	.winner {
	    background-color: yellow;
	}
	
	.candidate-toggle {
		text-transform: uppercase;
		letter-spacing: 0.15em;
		font-weight: 900;
		font-size: 12px;
		margin: 0 0 0 20px;
	}
		.candidate-toggle a {
			text-decoration: none;
			color: #e51133;
		}
		.candidate-toggle a:hover {
			color: #000;
		}
	#more-candidates {
		background: #fff;
		width: 100%;
		z-index: 2;
		position: absolute;
		display: none;
		padding-bottom: 11px;
	}
		#more-candidates .candidate {
			padding: 10px 0;
		}
				#more-candidates .candidate .candidate-name i {
					width: 0;
					display: none;
				}
	
#racial-breakdown {
	background: #333;
	padding: 20px 0;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
}
	.breakdown-text {
		color: #fff;
		font-size: 14px;
		padding: 0 20px;
		clear: both;
		overflow: hidden;
		font-weight: 400;
	}
		.label {
			float: left;
		}
		.label b {
			text-transform: uppercase;
			letter-spacing: 0.15em;
			font-weight: 900;
		}
		.count {
			float: right;
		}
	.breakdown-chart {
		padding: 0 20px;
		margin: 5px 0 15px 0;
		overflow: hidden;
	}
	.breakdown-chart:last-child {
		margin: 5px 0;
	}
	.bar {
		height: 20px;
		float: left;
	}
	
#map_and_zoom {
	float: right;
	margin: 0;
	width: 600px;
	height: 800px;
	position: relative;
	overflow: hidden;
	z-index: 1;
	background-color: #ddd;
}
	#legend {
		background: #333;
		margin: 0;
		padding: 13px 0;
		color: #fff;
		width: 200px;
		height: 140px;
		overflow: hidden;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 2;
	}
		#legend h3 {
			padding: 0 15px;
			margin: 0 0 15px 0;
			font-size: 14px;
			float: left;
		}
		#legend .marker {
			float: left;
			clear: both;
			font-size: 12px;
			font-style: normal;
			position: relative;
			top: 2px;
			margin: 0 0 15px 15px;
		}
		#pluralityWrapper, #majorityIcon,i.tie,i.other {
			display: block;
			float: left;
			width: 15px;
			height: 15px;
			margin: 0 10px 0 0;
			position: relative;
			top: -1px;
		}
                #pluralityWrapper {
                    background-color: white;
                }
                #pluralityIcon {
                    width: 15px;
                    height: 15px;
                    float: left;
                    opacity: 0.4;


                }

	#map-canvas {
		z-index: 1;
	    float: left;
		height: 800px;
		padding: 0 0 1px 0;
		position: absolute;
        width: 100%;
	}

#timeval, #mapnote {
    color: #aaa;
    float: left;
		clear: left;
    margin-left: 25px;
    margin-top: 10px;
}
	
.map-tooltip {
	border-radius: 0;
	-webkit-border-radius: 0;
	box-shadow: none;
	-webkit-box-shadow: none;
	border: 0;
	font-family: 'Lato', Verdana, Arial, sans-serif;
	font-size: 13px;
	color: #999;
	background-color: #333;
}
	.tooltipCandidate {
		margin: 4px 0 0 0;
		color: #fff;
	}
	.candidateVotes, .candidatePercent {
		font-weight: 900;
		margin: 0 0 0 3px;
	}