<|start_filename|>censusreporter/apps/census/templates/glossary.html<|end_filename|>
{% extends '_base.html' %}
{% comment %}
    <dt id="term-keyword">Keyword</dt>
    <dd><p>
      definition
    </p></dd>
{% endcomment %}

{% block head_title %}Glossary - {{ block.super }}{% endblock %}

{% block content %}
<article id="glossary">
    <header>
        <h1>Glossary</h1>
        <p>Brief definitions of key Census terms in plain language. Do you think we&rsquo;re missing something? <a href="http://censusreporter.uservoice.com/" data-uv-trigger>Let us know</a>. You can also consult the Census Bureau's complete <a href="http://www.census.gov/glossary/">glossary</a>.</p>
    </header>

    <section id="glossary-contents">
        <aside>
            <p>Here are a few key official Census sources where you can find more technical definitions.</p>
            <ul>
                <li><a href="http://www.census.gov/acs/www/data_documentation/documentation_main/">ACS Documentation Home Page</a></li>
                <li><a href="http://www.census.gov/acs/www/guidance_for_data_users/geography/">Geography and the American Community Survey</a></li>
                <li><a href="http://www.census.gov/population/metro/">Metropolitan and Micropolitan Statistical Areas Main</a></li>
            </ul>
        </aside>


        <dl class="glossary">

            <dt id="term-cdp-refererence">CDP</dt>
            <dd>
                <p>See <a href="{% url 'glossary' %}#term-cdp">Census Designated Place</a>.</p>
            </dd>
            

            <dt id="term-ccd" data-alt-keywords="census-county-division">Census County Division (CCD)</dt>
            <dd>
                <p>
                    Census County Divisions (CCDs) are a subset of <a href="{% url 'glossary' %}#term-county-subdivision">county subdivision</a> defined by the US Census Bureau, in cooperation with local officials, for states which do not have sub-county governmental units. 
                </p>
                <p>For complete details on county subdivisions, see the <a href="http://www.census.gov/geo/reference/gtc/gtc_cousub.html">Census documentation</a>.</p>
           </dd>
            <dt id="term-cdp" data-alt-keywords="census-designated-place">Census Designated Place (CDP)</dt>
            <dd>
                <p>
                    Census Designated Places (CDPs) are a subset of the <a href="{% url 'glossary' %}#term-place">place</a> <a href="{% url 'glossary' %}#term-summary-level">summary level</a>. CDPs have no legal status or government, but are identifiable by name. The boundaries of CDPs are usually defined in cooperation with local officials, and are subject to revision at each decennial census.
                </p>
                <p>For complete details on places, see the <a href="http://www.census.gov/geo/reference/gtc/gtc_place.html">Census documentation</a>.</p>
           </dd>
            <dt id="term-csa" data-alt-keywords="combined-statistical-area">Combined Statistical Area (CSA)</dt>
            <dd>
                <p>Officially specified by the Office of Management and Budget, a CSA combines adjacent <a href="{% url 'glossary' %}#term-cbsa">CBSAs</a> which have a moderate degree of social and economic ties. Ties between the component CBSAs in a CSA are not as strong as ties between the counties in any of the individual CBSAs.</p>
            </dd>

            <dt id="term-cbsa" data-alt-keywords="core-based-statistical-area">Core-Based Statistical Area (CBSA)</dt>
            <dd>
                <p>Officially specified by the Office of Management and Budget, the CBSA is the Census <a href="{% url 'glossary' %}#term-summary-level">summary level</a> representing a &ldquo;metropolitan area.&rdquo; Technically, CBSAs are either <a href="{% url 'glossary' %}#term-micropolitan-statistical-area">metropolitan</a> or <a href="{% url 'glossary' %}#term-micropolitan-statistical-area">micropolitan statistical areas</a>—both describe a specific group of counties (or sometimes just one county) around an urban core.</p>
                <p>While metro areas vary greatly in size, for some kinds of analysis they are better units of comparison than the single Census <a href="{% url 'glossary' %}#term-place">place</a> at the core.</p>
            </dd>

            <dt id="term-county-subdivision">County Subdivision</dt>
            <dd>
                <p>Because each state organizes its governments differently, there are some states where the "county subdivision" <a href="{% url 'glossary' %}#term-summary-level">summary level</a> is important, and others where it is unlikely be be used for analysis. In 12 states, most or all county subdivisions serve as local governments much like cities and towns. Specifically, those states are Connecticut, Maine, Massachusetts, Michigan, Minnesota, New Hampshire, New Jersey, New York, Pennsylvania, Rhode Island, Vermont, and Wisconsin. In these and 17 more states, most or all county subdivisions are legal entities, known to the Census Bureau as <em>minor civil divisions</em> (or MCDs). In the rest of the states, county subdivisions (known as <a href="{% url 'glossary' %}#term-ccd">CCDs</a>) exist for statistical purposes, but may be less important for journalists.</p>
                <p>For complete details on county subdivisions, see the <a href="http://www.census.gov/geo/reference/gtc/gtc_cousub.html">Census documentation</a>.</p>
            </dd>

            <dt id="term-householder">Householder</dt>
            <dd>
                <p>The person, or one of the people, in whose name the home is owned, being bought, or rented. Two types of householders are distinguished: a family householder and a nonfamily householder. A family householder is a householder living with one or more people related to him or her by birth, marriage, or adoption. A nonfamily householder is a householder living alone or with nonrelatives only.</p>
            </dd>

            <dt id="term-margin-of-error">Margin of Error</dt>
            <dd>
                <p>A number describing the statistical confidence in an estimate. When the margin of error is more than 10% of the estimate, Census Reporter recommends using caution when presenting the estimate. Know your wiggle-words.</p>
            </dd>

            <dt id="term-mcd-refererence">MCD</dt>
            <dd>
                <p>See <a href="{% url 'glossary' %}#term-mcd">Minor Civil Division</a>.</p>
            </dd>
            
            <dt id="term-metropolitan-statistical-area">Metropolitan Statistical Area (MSA)</dt>
            <dd>
                <p>A county or counties around an urban core of population greater than 50,000. See <a href="{% url 'glossary' %}#term-cbsa">Core Based Statistical Area (CBSA)</a> for more.</p>
            </dd>

            <dt id="term-micropolitan-statistical-area">Micropolitan Statistical Area (μSA)</dt>
            <dd>
                <p>A county or counties around an urban core of population between 10,000 and 50,000. See <a href="{% url 'glossary' %}#term-cbsa">Core Based Statistical Area (CBSA)</a> for more.</p>
            </dd>

            <dt id="term-mcd" data-alt-keywords="minor-civil-division">Minor Civil Division (MCD)</dt>
            <dd>
                <p>
                    Minor Civil Divisions (MCDs) are a subset of <a href="{% url 'glossary' %}#term-county-subdivision">county subdivision</a> based on official governmental/administrative boundaries. In states where counties are not divided into governmental units, the Census Bureau creates statistical areas known as <a href="{% url 'glossary' %}#term-ccd">Census County Divisions</a>.
                </p>
                <p>For complete details on county subdivisions, see the <a href="http://www.census.gov/geo/reference/gtc/gtc_cousub.html">Census documentation</a>.</p>
           </dd>

            <dt id="term-place">Place</dt>
            <dd>
                <p>A Census <a href="{% url 'glossary' %}#term-summary-level">summary level</a> representing officially incorporated governments such as cities, towns, villages, and boroughs. Census &ldquo;places&rdquo; also include unincorporated areas which are identifiable by name: the Census Bureau calls these CDPs, or &ldquo;Census Designated Places.&rdquo;</p>
                <p>In some parts of the country (especially New England, New York, Wisconsin and Alaska), <a href="{% url 'glossary' %}#term-county-subdivision">county subdivisions</a> are a more appropriate unit of comparison than Census places.</p>
                <p>For more technical details, see the <a href="http://www.census.gov/geo/reference/gtc/gtc_place.html">Census documentation on places</a>.</p>
            </dd>

            <dt id='term-release'>Release</dt>
            <dd>
                <p>
                    The American Community Survey data is produced in multiple releases to satisfy different needs of timeliness and geographic accuracy. Releases are described by the number of years and/or the specific years they cover, such as the "2012 1-year release" or the "2008-12 5-year release." Estimates are made based on data collected over the specified years. 
                </p>
                <p>
                    Roughly, releases include geographies with a population above a given threshold: the 1-year release includes geographies with a population of 65,000 or more; the 3-year release includes geographies with a population above 20,000; and the 5-year release includes all census down to the block group level, regardless of population.
                </p>

            </dd>
            <dt id="term-summary-level">Summary Level</dt>
            <dd>
                <p>The Census Bureau tabulates data for many different geographic scales. Summary Level is the generic term for a kind of geography, such as state, county, or <a href="{% url 'glossary' %}#term-place">place</a>. There are also summary levels for somewhat esoteric tabulations, such as the parts of Census tracts which are divided between places.</p>
                <p>For more, see our <a href="{% url 'topic_detail' topic_slug='geography' %}#summary-levels">guide to summary levels</a>.</p>
            </dd>

            <dt id="term-survey">Survey</dt>
            <dd>
                <p>A survey is a statistical method for gathering information about a population from a sample, rather than counting every member. Surveys generate approximate estimates which are subject to a <a href="{% url 'glossary' %}#term-margin-of-error">margin of error<a>.</p>
            </dd>


            <dt id="term-tenure">Tenure</dt>
            <dd>
                <p>Tenure refers to the distinction between owner-occupied and renter-occupied housing units.</p>
            </dd>

            <dt id="term-universe">Universe</dt>
            <dd>
                <p>A universe is the focus of a given data tabulation. For many Census tables, the universe is all Americans, but it is not always. For example, the Census Bureau specifically constrains tables about educational attainment, employment, child bearing, and others based on age and other characteristics. Some tables focus specifically on the United States, excluding Puerto Rico, or vice versa. Be sure to take note of the universe when analyzing data and expressing findings about it.</p>
            </dd>

            <dt id="term-urban-area">Urban Area</dt>
            <dd>
                <p>An urban area is a Census <a href="{% url 'glossary' %}#summary-level">summary level</a>. Urban areas are based on a densely-settled core of tracts or blocks, but also include adjacent land which is developed for urban use or which connects two dense territories. Urban areas come in two types: <em>Urbanized Areas</em> (a.k.a. UAs), with 50,000+ population and <em>Urban Clusters</em> (a.k.a. UCs), with 2,500-50,000 people.</p>
                <p>Urban areas and <a href="{% url 'glossary' %}#term-cbsa">CBSA</a>s describe similar areas, but CBSAs comprise the entirety of one or more counties, including rural land in them, while urban areas are based on population and land-use characteristics. As a point of reference, in the 2012 ACS, the <a href="/profiles/31000US16980-chicago-joliet-naperville-il-in-wi-metro-area">Chicago metropolitan statistical area</a> had almost 1,000,000 more people than the <a href="/profiles/40000US16264-chicago-il-in-urbanized-area">Chicago urbanized area</a>.</p>
                 <p>For more information, consult the <a href="https://www.census.gov/geo/reference/ua/urban-rural-2010.html">Census Bureau's documentation</a>.</p>
            </dd>

        </dl>
    </section>
</article>
{% endblock %}




<|start_filename|>censusreporter/apps/census/templates/topics/getting_started.html<|end_filename|>
{% extends 'topics/_base_topics.html' %}

{% block content %}
<style>
    /*Some DLs on this page have long dt values and need a boost */
    .dl-horizontal.add-margin dd { margin-left: 80px;}
</style>

<section id="topic-overview">
<h2>What's in the Census?</h2>
<p>The Census isn't one thing. The U.S. Census Bureau has a number of data collection programs and even more data products based on them. Census Reporter focuses on just one of them, the American Community Survey, or ACS. Our <a href="{% url 'topic_detail' 'about-census' %}">About the Census</a> page gets into the basics you should know about the other Census products.</p>
<h2>OK, then, what's in the ACS?</h2>
<p>The ACS covers a good variety of general-interest topics about the US: not only basic demographics like age, sex, and race, but also a number of economic and social questions, and details about the actual homes where people live, like how many rooms are in a housing unit and how many units are in the building. Our <a href="{% url 'topic_detail' 'table-codes' %}">guide to the structure of table codes</a> includes <a href="{% url 'topic_detail' 'table-codes' %}#table-subjects">a list of the main subject areas.</a></p>
<h2>When is the ACS updated?</h2>
<p>
    Every fall the Census Bureau releases new ACS estimates in three forms. The different releases are based on data collected over different periods of time. Collecting data over longer periods of time helps to reduce the <span class="glossary-term">margin of error</span> for places with a smaller population.
</p>
<p>
    The releases are staggered, with the 1-year release delivered first, usually in September, followed by the 3-year release, and finally, the 5-year release is usually delivered in early December.  
</p>
<p>
    Census Reporter always shows you the data for the release appropriate to the places you're looking at, so you generally don't have to worry about it too much. However, technically you shouldn't directly compare data from different releases, so be careful if you are gathering estimates from different profile pages.
</p>
<table>
    <thead>
        <tr>
            <th>Collection Period</th>
            <th>Geographies covered</th>
            <th>Month released</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1 year</td>
            <td>Population &gt; 65,000</td>
            <td>September</td>
        </tr>
        <tr>
            <td>3 years</td>
            <td>Population &gt; 20,000</td>
            <td>October</td>
        </tr>
        <tr>
            <td>5 years</td>
            <td>All major geographies down to <span class="glossary-term">block group</span></td>
            <td>December</td>
        </tr>
    </tbody>
</table>
</section>
{% endblock %}




<|start_filename|>censusreporter/apps/census/static/css/charts.css<|end_filename|>
/*
uncomment for separate inclusion into embed iframes */
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);

*, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.chart-title {
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 7px;
}
.chart-header {
    line-height: 1;
    margin: 0 0 .5em;
}
.chart-qualifier {
    float: left;
    display: block;
    margin: 0 .5em;
}
.census-chart-embed {
    position: relative;
    display: block;
    padding: 1em 0 0;
    margin: 0;
    overflow: hidden;
    background-color: #fff;
    line-height: 1.4;
    font-size: 14px;
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.census-chart-embed #census-chart {
    padding: 0 1em;
    position: relative;
}
.census-chart-embed .chart-title {
    font-weight: normal;
    font-size: 14px;
    margin: 0 0 1em;
}
.census-chart-embed .action-links {
    display: none;
}

.column-chart,
.bar-chart,
.pie-chart {
    font-size: 0.75em;
    position: relative;
    font-weight: 500;
}
.column-set,
.bar-set {
    position: relative;
}
.grouped-column-chart .column-set {
    margin-bottom: 2.5em;
}
.column {
    position: absolute;
    cursor: pointer;
    bottom: 0;
    -webkit-border-top-left-radius: 2px;
    -moz-border-radius-topleft: 2px;
    border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -moz-border-radius-topright: 2px;
    border-top-right-radius: 2px;
}
.column .area {
    background-color: #014948;
    -webkit-border-top-left-radius: 2px;
    -moz-border-radius-topleft: 2px;
    border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -moz-border-radius-topright: 2px;
    border-top-right-radius: 2px;
    display: block;
}
.column:hover {
    opacity: 1;
}

.bar-set {
    clear: both;
    width: 100%;
    margin-bottom: .33em;
}
.bar {
    display: block;
    cursor: pointer;
    height: 2.5em;
    padding: .5em;
    margin-top: .75em;
}
.bar .area {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    -webkit-border-top-right-radius: 2px;
    -moz-border-radius-topright: 2px;
    border-top-right-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    -moz-border-radius-bottomright: 2px;
    border-bottom-right-radius: 2px;
}
.bar .label {
    position: absolute;
    padding-left: .5em;
}
.bar-set h4.label {
    margin: .25em 0;
}
.bar-group {
    margin-bottom: 2em;
}
.bar-group .bar {
    margin: .5em 0 0;
}

.column .label,
.column-group .label {
    position: absolute;
    width: 100%;
    text-align: center;
}
.column .label,
.column:hover .label,
.bar .label,
.bar:hover .label {
    color: #111;
}
.column .axis.label,
.column-group .axis.label {
    font-weight: bold;
    line-height: 1.1;
}
.column .axis.label.secondary,
.column-group .axis.label.secondary,
.bar-group .label.secondary {
    font-weight: normal;
}
.pie-chart .legend {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pie-chart .legend-full-width {
    margin: 1em 0 .5em;
    width: 100%;
}
.legend-item {
    cursor: pointer;
    color: #888;
    fill: #888;
    line-height: 1.1;
    margin-bottom: .33em;
    clear: both;
    padding-left: 15px;
}
.legend-full-width .legend-item {
    width: 45%;
    margin-right: 5%;
    float: left;
    clear: none;
}
.legend-item .swatch {
    opacity: .8;
    float: left;
    margin-left: -15px;
    height: 10px;
    width: 10px;
}
.legend-item .label {
}
.legend-item:hover,
.legend-item.hovered {
    opacity: 1;
    color: #111;
    fill: #111;
}

.hovercard {
    position: absolute;
    text-align: center;
    font-size: 13px;
    background: #fff;
    pointer-events: none;
    z-index: 999;
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    padding: .67em .83em;
    border: solid 1px #777;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.chart .hovercard {
    pointer-events: auto;
}
.census-chart-embed .hovercard {
    padding: .5em .83em .83em;
}
.hovercard .label-title,
.hovercard .name,
.hovercard .value {
    display: block;
}
.hovercard .label-title,
.hovercard .name {
    font-weight: bold;
}
.hovercard .label-title {
    margin-bottom: .5em;
}
.hovercard h3,
.hovercard h4,
.hovercard ul,
.hovercard .note {
    text-align: left;
    margin: 0 0 6px;
}
.hovercard .note {
    line-height: 1.3;
    font-size: .83em;
    margin: .67em 0 0;
}
.hovercard ul,
.hovercard ol,
.flippant-back ul {
    padding: 0;
    line-height: 1.3;
    font-size: .9em;
    list-style: none;
    margin-bottom: 1em;
}
.hovercard ol {
    list-style: decimal;
    padding-left: 1.5em;
    line-height: 1.4;
}
.hovercard ul:last-child,
.hovercard li:last-child {
    margin-bottom: 0;
}
.hovercard li,
.flippant-back li {
    margin-bottom: .67em;
}
.hovercard .context {
    margin-left: .5em;
}
.hovercard .inline-stat {
    margin: 0 .5em;
}
.hovercard p {
    font-size: .9em;
}

.chart.highlighted {
    margin: -.5em;
    padding: .5em;
}

.data-drawer {
    padding: 1.5em 0 0;
    overflow-x: auto;
}
.data-drawer th {
    border-left: 5px solid #fff;
}
.data-drawer th:first-child {
    border-left: none;
}
.data-drawer td.context {
    vertical-align: bottom;
}
.data-drawer h3.chart-title {
    padding-left: 8px;
    margin-bottom: 6px;
}
.data-drawer .chart-get-data {
    font-size: .75em;
    float: left;
    margin: 8px;
    cursor: pointer;
}

.embed-footer {
    clear: both;
    line-height: 15px;
    margin: 0 1em;
    padding-top: 1em;
}
.embed-footer a {
    color: #68b3a3;
    text-decoration: none;
}
.embed-footer a.title {
    display: block;
    font-size: 13px;
    font-weight: bold;
}
.embed-footer a:hover {
    color: #014948;
    border-color: #68b3a3;
}
.embed-footer img {
    height: 12px;
    margin-right: 3px;
    border: none;
    vertical-align: baseline;
}
.embed-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: right;
}
.embed-footer li {
    list-style: none;
    float: left;
}
.embed-footer li a {
    display: block;
    font-size: 10px;
    padding: 0 5px;
    border: 1px solid #a1cfc6;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.action-links {
    float: right;
    color: #68b3a3;
}
.action-links a {
    cursor: pointer;
    color: #68b3a3;
}
.action-links a:hover {
    color: #014948;
}
.action-links span {
    margin: 0 .33em;
}

.box-header img {
    height: 16px;
}
.box-header a {
    font-size: 16px;
}

.arc,
.arc-group path {
    stroke: #fff;
    cursor: pointer;
}
.arc,
.legend-item .swatch {
    opacity: .8;
}
.arc.hovered,
.legend-item.hovered .swatch {
    opacity: 1;
}

.center-group .label-name,
.center-group .label-value {
    display: block;
    line-height: 1.1;
    position: absolute;
    text-align: center;
}
.center-group .label-name {
    font-size: 1.1em;
}
.center-group .label-value {
    font-weight: bold;
    font-size: 2em;
}

.flippant {
    transform: perspective(500px) rotateY(0deg);
    -webkit-transform: perspective(500px) rotateY(0deg);
    -moz-transform: perspective(500px) rotateY(0deg);
    /*z-index: 200;*/
}

.flippant-back {
    -moz-transform: perspective(500px) rotateY(-180deg);
    -webkit-transform: perspective(500px) rotateY(-180deg);
    transform: perspective(500px) rotateY(-180deg);
    height: 0;
    /*z-index: 200;*/
}

.flippant, .flippant-back {
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;

    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flippant, .flipper {
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.flippant.flipped {
    -moz-transform: perspective(500px) rotateY(180deg);
    -webkit-transform: perspective(500px) rotateY(180deg);
    transform: perspective(500px) rotateY(180deg);
}

.flippant-back.flipped  {
    padding-right: 1.5em;
    -moz-transform: perspective(500px) rotateY(0deg);
    -webkit-transform: perspective(500px) rotateY(0deg);
    transform: perspective(500px) rotateY(0deg);
}

.flippant-modal-light {
    position: fixed;
    margin: 0;
    top: 0 !important;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1em;
    background-color: #fff;
}
.flippant-back h3 {
    line-height: 1;
    margin: 0 0 .5em;
}
.flippant-back a {
    color: #014948;
}

section.coal-chart-container {
    padding: 2em 0 4em;
    margin-bottom: 0;
}
section.chart-divider {
    margin: 1em 0 0;
    padding: 0.6em 0.75em;
    background-color: #f7f8f3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border-top: 1px solid #e8eadf;
    border-bottom: 1px solid #cad0b5;
}
section.chart-divider h2 {
    margin: 0;
    line-height: 1;
}
.coal-chart-container h2 {}
.coal-chart {
    list-style: none;
    position: relative;
    height: 10px;
    border-bottom: 1px solid #e5e5e5;
    margin: 0 1.5em;
}
.coal-chart li {
    display: inline;
    position: absolute;
    bottom: -6px;
    margin-left: -5px;
}
.coal-chart li .point {
    display: block;
    cursor: pointer;
    position: relative;
    height: 11px;
    width: 11px;
    color: #222;
    background-color: #eff1e9;
    border: 1px solid #acb58c;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.coal-chart li .point:hover,
.coal-chart li .point.hovered {
    background-color: #42472e;
    border-color: #42472e;
    z-index: 3;
}
.coal-chart li .point.selected {
    background-color: #027b7a;
    border-color: #027b7a;
    z-index: 2;
}
.coal-chart li .pointz.selected.hovered {
    z-index: 4;
}
.coal-chart li a .hovercard {
    position: absolute;
    width: 15em;
    bottom: 1.5em;
    right: -7.5em;
    font-size: .83em;
    line-height: 1.3;
    text-align: center;
    display: none;
    padding: .5em;
    border: 1px solid #e0e0e0;
}
.coal-chart li .point:hover .hovercard,
.coal-chart li .point.hovered .hovercard,
.coal-chart li .point.selected .hovercard {
    display: block;
    background-color: #fff;
}
.coal-chart li.tick-mark {
    height: 26px;
    bottom: -13px;
    margin-left: 0;
    border-left: 1px solid #d5d5d5;
}
.coal-chart li.tick-mark.tick-mark-min {
    left: 0;
}
.coal-chart li.tick-mark.tick-mark-max {
    left: 100%;
}
.coal-chart li.tick-mark span {
    position: relative;
    font-size: .75em;
    display: block;
    color: #606060;
    padding: 0;
    margin-top: 26px;
    margin-left: -50%;
    white-space: nowrap;
}
.coal-chart li.tick-mark-min span {
    margin-left: -1px;
}
.coal-chart li.tick-mark-max span {
    margin-left: -99%;
}

@media only screen and (max-width: 640px) {
    .chart-qualifier,
    .action-links {
        float: left;
        margin: 1em 0 0;
        display: block;
        position: relative;
        clear: both;
    }
    .chart-get-data,
    .action-links a {
        display: inline-block;
    }
    .column-chart,
    .bar-chart,
    .pie-chart {
        padding-bottom: 3em;
    }
}
@media only screen and (max-width: 480px) {
    .chart .hovercard {
        /* an !important is better than recalculating
        every time the hover listener fires */
        left: -1% !important;
        width: 100% !important;
    }
}
@media only screen and (max-width: 291px) {
    .census-chart-embed .pie-chart {
        margin-bottom: 3em !important;
    }
}
@media only screen and (max-width: 260px) {
    .embed-footer ul {
        display: none;
    }
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

svg text {
    font-size: 1em;
}
.x.axis text, .axis {
    shape-rendering: crispEdges;
}
.x.axis line,
.x.axis path,
.y.axis path {
    display: none;
}
.y.axis text {
    font-weight: bold;
}
.y.axis text {
    fill: #c5c5c5;
}
.y.axis line {
    stroke: #f5f5f5;
}


<|start_filename|>censusreporter/apps/census/templates/locate/locate.html<|end_filename|>
{% extends '_base.html' %}


{% block content %}
    <article id="locate" class="clearfix">
        <header class="column-full clearfix">
            {% if not location %}
            <h1 class="article-header">Finding your current location&hellip;</h1>
            {% else %}
            <h1 class="article-header">Use your current location</h1>
            <p class="explainer">Your browser says you&rsquo;re in&hellip;</p>
            {% endif %}
        </header>
        {% if places %}
        <section class="column-half">
            <ul class="location-list">
            {% for place in places %}
                <li>
                    <a href="{% url 'geography_detail' place.full_geoid %}" class="card">
                        <span class="identifier glossary-term">{{ place.sumlev_name }}</span>
                        {{ place.full_name }}
                    </a>
                </li>
            {% endfor %}
            </ul>
        </section>
        {% endif %}
    </article>
{% endblock %}

{% block body_javascript_extra %}
<script>
var lat = '{{ location.lat }}',
    lon = '{{ location.lon }}';

// prepare spinner
$('body').append('<div id="body-spinner"></div>');
var spinnerTarget = document.getElementById('body-spinner');
    spinner = new Spinner();

function foundLocation(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    window.location = '{% url "locate" %}?lat=' + lat + '&lon=' + lon;
}

function noLocation() {
    alert('Sorry, your browser was unable to determine your location.')
}

if (navigator.geolocation && !lat && !lon) {
    spinner.spin(spinnerTarget);
    navigator.geolocation.getCurrentPosition(foundLocation, noLocation, {timeout:10000});
}
Glossary.init("{% url 'glossary' %}",".glossary-term");
$('a.card').click(function(e){
    if ($(e.target).hasClass('glossary-term')) {
        Glossary.popup(e.target);
        return false;
    }
});
</script>
{% endblock %}