@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i');

html {
box-sizing:border-box;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%}

*, 
*:before, 
*:after {
box-sizing:inherit}

body {
margin:0;
padding-bottom:1rem;
overflow-x:hidden;
text-align:center;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
color:#383838}

#content {
max-width:754px;
margin:auto;
padding-bottom:1rem}

h1,h2,h3,h4,h5,h6 {
letter-spacing:-.033em}

h1 {
font-size:28px}

.intro {
font-family:"Libre Baskerville", serif;
font-style:normal;
margin:1.5rem 0;
font-size:13px}

a {
color:#069;
outline:none;
cursor:pointer}

#content > p {
margin:1rem auto}  

.sm {
font-size:11px}

#opts {
margin:1.5rem 0;
font-family:'Libre Baskerville', serif;
font-style:italic;
vertical-align:middle}

#opts > span {
margin:.1rem 0;
display:inline-block}

form {
display:block;
margin:2rem 0;
position:relative}

select,
input {
display:inline-block;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:11px;
color:#383838;
background:#fff;
vertical-align:middle;
border-radius:4px;
-moz-appearance:none;
-webkit-appearance:none;
appearance:none}

input {
vertical-align:top;
display:inline-block;
width:auto;
font-size:13px;
border:1px solid #ccc;
color:#666;
text-align:center;
padding:8px 12px 10px;
font-weight:bold;
cursor:pointer;
outline:none;
margin:0;
transition:background .33s}

#find-btn {
color:#fff;
background:#62BE9A;
border:none}

#clear-btn {
border:0;
color:#fff;
display:none;
background:#B0DECC}

#find-btn:hover,
#clear-btn:hover {
background:#666}

input[type="tel"]{
font-weight:normal;
border-color:#ccc;
width:90px;
cursor:text;
color:#383838;
background:#fff}

input[type="button"]:hover {
color:#383838;
border-color:#383838}

select {
border:0;
background:#efefef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 10'%3E%3Cpolygon fill='%23383838' points='14 0 8 7 2 0 0 2 8 10 16 2'/%3E%3C/svg%3E") no-repeat 100% 50%/16px 5px;
margin:0 .33rem 0 .2rem;
padding:.33rem 1.25rem .4rem .5rem}

select::-ms-expand {
display:none}

#clear-btn.show {
display:inline-block}

#find-msg {
opacity:0;
position:absolute;
top:50%;
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
font-size:11px;
margin-left:.5rem;
color:#cf2522;
transition:opacity .2s}

#find-msg.show {
opacity:1}

.notes {
font-size:13px}

.notes span.above,
.notes span.below,
.notes span.avg,
.notes span.null,
#missing b {
vertical-align:middle;
display:inline-block;
margin:0 1px;
width:14px;
height:14px;
background:#D8352A;
opacity:.75;
border-radius:50%}

#missing b {
opacity:1}

.notes span.null {
border:1px solid #383838;
background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgogIDxyZWN0IHdpZHRoPSc1JyBoZWlnaHQ9JzUnIGZpbGw9J3doaXRlJy8+CiAgPHBhdGggZD0nTTAgNUw1IDBaTTYgNEw0IDZaTS0xIDFMMSAtMVonIHN0cm9rZT0nIzg4OCcgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPg==) repeat 0 0/4px 4px;
opacity:.25}

.event-type:before {
content:'Hover over'}

.is-touch .event-type:before {
content:'Click'}

.notes span.avg {
background:#F59E46}

.notes span.below {
background:#4A90E2}

.notes span.no-data {
border:1px solid #ccc;
background:#fff}

svg {
overflow:visible;
display:block;
margin:40px auto}

#notes {
margin-top:2rem;
text-align:left}

#notes ol {
padding:0}

#notes li {
font-size:10px;
margin-left:1rem}
    
#info {
display:none;
width:180px;
position:absolute;
padding:1rem;
background:#fff;
border:2px solid #383838;
margin-top:-20px;
font-size:11px;
border-radius:0;
-webkit-transform:translate(-50%,-100%);
transform:translate(-50%,-100%);
transition:.33s}

#info.shift-left {
margin-left:1rem;
-webkit-transform:translate(-100%,-100%);
transform:translate(-100%,-100%)}

#info.shift-right {
margin-left:-1rem;
-webkit-transform:translate(0,-100%);
transform:translate(0,-100%)}

#info.show {
display:block}

#info h3 {
margin:0;
font-size:0.8125rem} 

#info h3 + h6 {
opacity:.5;
margin:1em 0 0;
font-size:10px;
font-weight:normal;
letter-spacing:0;
line-height:1.1}

#info p {
margin-bottom:0}

#info .flag {
color:#D8352A}

#info .p100K:after {
content:' per 100,000 people'}

#info.mir .p100K:after {
content:''}

#info .txt:after {
content:'above'}

#info.is-avg .flag {
color:#383838}

#info.is-avg .txt:after,
#info.is-avg .national-avg {
display:none}

#info.is-below-avg .flag {
color:#4A90E2}

#info.is-below-avg .txt:after {
content:'below'}

#info.income .xxx:before {
content:'$'}

#info.ind .xxx:after {
content:'%'}

#info.RA .xaxis span:after {
content:'ness area classification** (from 1-5)'}

#info.note {
display:block;
width:240px;
top:50%;
left:50%;
font-size:12px;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%)}

#info a {
text-decoration:underline}

@media all and (max-width:420px){ 

	input {
	font-size:11px}
	
	input[type="tel"]{
	width:75px}

}