style.css

body {font-family: Georgia, serif; font-size: 16px;line-height:21px;width: 970px; margin: 20px auto;padding:10px;text-align: center;background-color: #f4f4f4}
#wrapper {width:100%; min-height: 100%;margin: 0 auto -60px;}
p {color: #333332;}
#header
#searchform {margin-top:20px;}
#error {border-left: 3px solid rgba(255,0,0,0.61); padding: 0 8px; margin: 30px 0;}
#congrats{padding: 10px; color: #ff39d5;}
.line {width:50px; border-bottom: 1px solid #b3b3b1;margin:20px auto;}
.number {font-size: 50px;display:block;font-weight: bold;margin: 3px 0 15px; line-height: 60px;color:black;}
.hidden {display:none;}
.caveat {font-size:12px;color:grey;width:700px;margin: 10px auto;}
#footnote {font-size:12px;color:grey;margin-top: 30px;}
#footnote, #push {height:60px;}


/* viz styles */
.q10-11{fill:rgb(63, 0, 96)}
.q9-11{fill:rgb(73, 0, 106)}
.q8-11{fill:rgb(122, 1, 119)}
.q7-11{fill:rgb(174, 1, 126)}
.q6-11{fill:rgb(221, 52, 151)}
.q5-11{fill:rgb(247, 104, 161)}
.q4-11{fill:rgb(250, 159, 181)}
.q3-11{fill:rgb(252, 197, 192)}
.q2-11{fill:rgb(253, 224, 221)}
.q1-11{fill:rgb(255, 247, 243)}
.q0-11{fill:rgb(255, 250, 250)}

div.tooltip {   
  position: absolute;
  text-align: left;          
  width: 200px;                  
  height: 28px;                 
  padding: 4px;             
  font: 12px sans-serif;        
  background: #f3f3f3;   
  border: 1px;      
  border-radius: 2px;           
  pointer-events: none;         
}

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) {
body {width:100%;padding:0px;}
.legend {width:90%;color:#333332;}
#txt {width: 90%; margin: 0 auto;}
}