@import url(http://fonts.googleapis.com/css?family=Roboto:400,400italic,900,900italic);
*{margin:0;padding:0;font-family:Roboto,Arial,Helvetica,sans-serif;color:#333;text-decoration:none;outline:0;list-style:none;box-sizing:border-box}
body{background:#EEE;font-size:1.0em}
header{background:#555;padding:10px 20%;position:relative}
header img{max-width:90%}
nav li{display:inline-block}
nav li a{padding:10px;display:block;margin:0 5px -10px 0;color:#FFF}
nav li a:hover{background:#333}

strong,h1,h2,h3{font-weight:900}
h1{font-size:2.0em;margin:20px 0}
h2{font-size:1.5em;margin:0 0 10px}
h2.myPrecinct{font-size:1.1em;position:relative;top:-10px}
select{padding:10px 5px;max-width:565px}
option{margin:0 0 5px;max-width:565px;text-indent:5px}
li{list-style:none}

#container{padding:0 20%;position:relative;margin-bottom:130px}
#headerText{position:relative}
#latestNews{position:absolute;top:0;right:0;width:35%;height:40px;overflow:hidden;font-size:0.9em;text-align:right}
#latestNews span{font-size:1.1em;font-weight:900}

#mapContainer{padding:90px 3px;background:#333;position:relative}
#mapDiv{}
#map{width:100%;height:500px}
#mapInfo{position:absolute;right:10px;top:100px;background:#FFF;padding:10px;box-shadow:0 0 5px #CCC;font-size:0.9em}
#mapInfo h4{margin:0 0 10px}
#mapInfo span{font-size:0.6em;background:#333;color:#FFF;display:block;padding:5px;position:relative;margin:-10px -10px 5px}
#mapInfo li{margin:0 0 10px;text-indent:5px;font-size:0.8em}
#regionInfo{color:#FFF;position:absolute;top:20px;padding:10px}
#regionFinder{position:absolute;right:20px;top:20px}
#regionFinder div{display:inline-block;margin:0 0 0 10px}
#precinctSelect{display:none}
#countyForm{}
#contestForm{position:absolute;right:20px;bottom:20px}
#share{position:absolute;left:20px;bottom:15px}
#share span{display:block;color:#FFF;text-align:center;font-size:1.2em;font-weight:900;margin:0 0 5px}
#share li{float:left;margin:0 5px 0}

#mainContent{}
#mainContent section{margin:0 0 20px;border-top:5px solid #333;padding:20px;clear:both}

#resultsContainer{}
#contestTitle p{margin:0 0 20px}
#chartContainer{position:relative}
canvas{float:left}
#chartLegend{margin:0 0 0 320px}
#chartLegend li{padding:2px 10px;margin:0 0 5px;border-left:10px;cursor:pointer;font-weight:900;font-size:1.1em}
#chartLegend li:hover{background:#FF9}
#chartLegend table{display:none;font-size:0.9em;box-shadow:0 0 5px #999;margin:10px 0;background:#FFF;width:100%;cursor:text}
#chartLegend table td{padding:5px 10px}
#chartLegend table td.voteType{width:150px;font-weight:900}
#chartLegend li.selected{background:#CCC}

#demographicsContainer{height:270px;position:relative;top:20px}
#demographicsContainer ul{top:105px;position:absolute;width:33%;height:200px}
#raceDemographics{left:33%}
#genderDemographics{left:66%}
#demographicsContainer li{position:relative;margin:0 0 5px;padding:5px;font-weight:900;cursor:default}
#demographicsContainer span{background:#CCC;width:1%;height:100%;position:absolute;top:0;left:0;z-index:-1}
#demographicsContainer li:hover span{background:#999}

#nationalResults{position:relative;top:20px}

#voterTurnout{}
#voterTurnout table{width:100%;margin:20px 0;box-shadow:0 0 5px #CCC}
#voterTurnout th{text-align:left;font-weight:900;padding:5px;background:url('/static/elections/images/sort.png') no-repeat 5px 50%;text-indent:15px;cursor:pointer}
#voterTurnout td{text-align:left;padding:5px;font-size:0.9em;cursor:pointer}
#voterTurnout tr:hover td{background:#FF9}

@media screen and (max-width:1690px) {
header{padding:10px 15%}
#container{padding:0 15%}
}

@media screen and (max-width:1580px) {
header{padding:10px 10%}
#container{padding:0 10%}
}

@media screen and (max-width:1280px) {
header{padding:10px 5%}
#container{padding:0 5%}
}

@media screen and (max-width:980px) {
#regionInfo,section p,table,#demographicsContainer ul,#chartLegend{font-size:0.9em}
h1{font-size:1.8em}
h2{font-size:1.3em}
#map{height:450px}
#share span{font-size:1.0em}
#share img{width:20px}
}

@media screen and (max-width:800px) {
body{font-size:0.9em}
header{padding:10px}
#container{padding:0 10px}
}

@media screen and (max-width:760px) {
select,option{font-size:0.8em}
select{padding:5px}
#mapContainer{padding:70px 3px}
#regionInfo,section p,table,#demographicsContainer ul,#chartLegend{font-size:0.8em}
#regionInfo{top:15px}
h1{font-size:1.5em}
h2{font-size:1.1em}
#map{height:400px}
#mainContent section{padding:20px 0}
}
@media screen and (max-width:720px) {
#chartCanvas{left:50%;position:relative;margin-left:-150px}
#chartLegend{clear:both;margin:0;position:relative;top:20px}
#demographicsContainer{height:auto}
#demographicsContainer ul{width:100%;position:relative;left:0;top:0;height:auto;margin:20px 0 0;outline:1px solid #CCC}
#share{top:10px}
#regionInfo{position:relative;text-align:right;margin:0 10px;top:10px}
#map{height:350px}
}
@media screen and (max-width:560px) {
#latestNews{width:45%;font-size:0.8em;height:40px}
#map{height:300px}
h1{font-size:1.3em}
h2{font-size:1.0em}
#regionInfo,section p,table,#demographicsContainer ul,#chartLegend{font-size:0.7em}
}
@media screen and (max-width:440px) {
#contestForm{width:98%;overflow:hidden;left:1%}
#map{height:250px}
#regionInfo,#regionFinder,#contestForm{right:10px}
#contestSelect,#regionInfo{font-size:0.7em}
}

#sponsorDiv img{position:absolute;left:10px;top:10px;height:70px}

.adBlock{width:100%;text-align:center;position:fixed;bottom:0;left:0;z-index:99}