#loading {
	position: fixed;
	height: 60%;
	width: 100%;
	background-color: rgba(255,255,255,0.6);
	font-size: 30px;
	color: #666;
	text-align: center;
	padding-top: 40%;
	z-index: 100;
}
form { float: none; }
h1 { font-size: 36px; font-weight: normal; margin: 10px 15px 0 15px; padding-bottom: 10px; border-bottom: 1px solid #DDD; }
h1 span { color: #999; }
h2 { margin: 0 20px 0 0; font-size: 1.5em; }
h3 { font-size: 18px; font-weight: normal; margin-top: 10px; }

#regtable { border-collapse: collapse; margin-top: 15px; clear:both; width: 100%; }
#regtable tr.alt { background: #EEE; }
tr#head { font-weight: bold; text-align: center; background: #CCC; }
#head td { vertical-align: top; padding-top: 5px; }
tr { border-top: 1px solid #CCC; }
td { padding: 0 15px; }
.changes, .makeup { border-left: 1px solid #CCC; }
.changes > div, .makeup > div { position: relative; }
.change { padding: 0 10px 0 0; white-space: nowrap; text-align: right; }
.changes, #changeshead { width: 100%; padding: 0 10px; }

.dem, #legend span.dem:before, .tooltip td.dem:before { background: #55F; }
.rep, #legend span.rep:before, .tooltip td.rep:before { background: #F33; }
.lib, #legend span.lib:before, .tooltip td.lib:before { background: #EA0; }
.una, #legend span.una:before, .tooltip td.una:before { background: #90C; }
.white, #legend span.white:before, .tooltip td.white:before { background: #DBB; }
.black { background: #333; }
#legend span.black:before, .tooltip td.black:before { background: #000; }
.other, #legend span.other:before, .tooltip td.other:before { background: #960; }
.bars span { border: 1px solid rgba(0,0,0,0.3); }
.negative { color: #900; }

.nav { margin: 1em 0 0 15px; }
.nav > div { padding-left: 100px; }
.nav select { margin-right: 25px; }
.nav a, .nav span { font-size: 12px; text-align: center; display: inline-block; margin-left: 15px; }
.current { font-weight: bold; color: #446; background: #DDF; border: 1px solid #DDF; border-radius: 3px; padding: 0px 3px; }

#legend { border-top: 1px solid #DDD; margin: 1em 15px 0px; }
#legend span, .tooltip td { background: none !important; }
#legend span:before { content: ""; height: 12px; width: 12px; display: inline-block; border-radius: 8px; margin: 15px 5px 0 15px; }
.tooltip td.circle:before { content: ""; height: 7px; width: 7px; border-radius: 3px; margin: 2px 5px 0px 0px; display: block; float: left; }
.tooltip .black { background: #000; }

.button#excel {
	background-color:#6B6;
	float: right;
}
.county a { color: #557; }
table.bars { width: 100%; border-collapse: collapse; }
.bars tr { border: none; }
.bars td { height: 6px; padding: 0; padding-bottom: 0; width: 50%; }
.bars td.left { border-right: 1px solid #000; }
.bars td span { display: block; height: 4px; }
.bars td.left span { float: right; border-right: none; }
.bars td.right span { float: left; border-left: none; }
.bars tr.top span { margin-top: 5px; }
.bars tr.bottom span { margin-bottom: 6px; }

.makeup > div > div { width: 450px; height: 15px; overflow: hidden; white-space: nowrap; }
#regtable > tbody > tr:hover { background: #F2F2F9; }
#regtable > tbody > tr.alt:hover { background: #E2E2E8; }
tr:hover .makeup > div > div { -moz-box-shadow: #000 0 0 2px; box-shadow: #000 0 0 2px }
.totalvoters { float: right !important; width: 55px; padding-top: 6px; text-align: right; }
.race {
	background: #960;
	border-radius: 0 0 3px 3px;
	border-right: 1px solid rgba(0, 0, 0, 0.4);
	border-top: 1px solid #000;
}
.party {
	background: #90C;
	border-radius: 3px 3px 0 0;
	border-right: 1px solid rgba(0, 0, 0, 0.4);
}

.race, .race span, .party, .party span, .bars span, #regtable tbody tr:hover .race, #regtable tbody tr:hover .race span, #regtable tbody tr:hover .party, #regtable tbody tr:hover .party span, #regtable tbody tr:hover .bars span {
	background-image: -webkit-linear-gradient(transparent,rgba(0, 0, 0, 0.15));
	background-image: -moz-linear-gradient(transparent,rgba(0, 0, 0, 0.15));
	background-image: linear-gradient(transparent,rgba(0, 0, 0, 0.15));
}
#regtable tbody:hover .race { border-top-color: #666; }
#regtable tbody tr:hover .race { border-top-color: #000; }
#regtable tbody:hover .race, #regtable tbody:hover .race span, #regtable tbody:hover .party, #regtable tbody:hover .party span, #regtable tbody:hover .bars span  {
	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.4));
	background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.4));
	background-image: linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.4));
}
#regtable tbody tr:hover .county a { color: #223; }

.party > *:first-child { border-radius: 3px 0 0 0; }
.race > *:first-child { border-radius: 0 0 0 3px;}
.makeup span { display: block; height: 14px; float: left; }
.party span { border-top: 1px solid rgba(0, 0, 0, 0.4); }
.race span { border-bottom: 1px solid rgba(0, 0, 0, 0.4); }
.party span:first-child, .race span:first-child { border-left: 1px solid rgba(0, 0, 0, 0.4); }

.scale { font: normal 10px verdana, sans-serif; border-bottom: 1px solid #999; margin-bottom: 5px; }
.visible { height: 31px; padding: 5px 0px; width: 525px; }
.tooltip {
	display: none;
	box-shadow: rgba(0, 0, 0, 0.8) 0px 1px 3px;
	background: #222; background: rgba(0, 0, 0, 0.85);
	border: 2px solid white;
	border-radius: 5px;
	color: #FFF;
	font: 10px verdana, sans-serif;
	pointer-events: none;
	position: absolute;
	bottom: 40px;
}
.tooltip:before, .tooltip:after {
	border: 10px solid transparent;
	content: "";
	width: 0; height: 0;
	display: block;
	position: absolute;
}
.tooltip:before { border-top-color: #222; bottom: -20px; left: 20px; z-index: 20; }
.tooltip:after {
	border-top-color: #FFF;
	bottom: -22px; left: 20px;
	z-index: 19;
	-webkit-filter: drop-shadow(0 2px 2px rgba(0,0,0,0.6));
	-moz-filter: drop-shadow(0 2px 2px rgba(0,0,0,0.6));
}
tr:hover .tooltip { display: block; }
.tooltip * { border:0; }
.tooltip .border td { padding: 0; }
.tooltip .border hr { height: 0; border: none; border-top: 1px solid #666; border-top: 1px solid rgba(255,255,255,0.2); }
.tooltip td { padding: 0 10px; }
.tooltitle h3 { margin: 5px 0 0; }
.tooltip .tooltitle h3 span { color: #888; display: inline; float: none; }

.totals { font-size: 18px; font-weight: bold; }
.totals .visible { height: 61px; }
.totals .changes { border-left: none; }
.totals .bars td { height: 8px; }
.totals .bars td span { height: 6px; }
.totals .totalvoters { padding-top: 16px; }
.totals a { border-bottom: none; }
.totals .party { margin-top: 15px; }
.tooltip .note { padding-bottom: 10px; font-style: italic; color: #CCC; }