/* SOME MISSING STYLES */
#millennials-wrapper .franklin {
    font-family: "FranklinITCProLight", "Helvetica", "Arial", sans-serif;
}
#millennials-wrapper .postoni,
#millennials-wrapper .franklin {
    font-weight: normal;
}
#millennials-wrapper .franklin-thin {
    font-family: "FranklinITCProThin", "Helvetica", "Arial", sans-serif;
}

#millennials-wrapper p.franklin, #millennials-wrapper .franklin p, .wp-graphics-tooltip p.franklin {
    font-family:"FranklinITCProLight","Franklin Gothic","ITC Franklin Gothic",'Arial',sans-serif;
    line-height: 1.3em;
    margin: 0 0 10px;
    font-size: 14px;
}

#millennials-wrapper .franklin strong {
    font-family:"FranklinITCProBold", "Helvetica", "Arial", sans-serif;
    font-weight: normal;
}
#millennials-wrapper p.credit {
    font-family:"FranklinITCStdLight","Franklin Gothic","ITC Franklin Gothic",'Arial',sans-serif;
    font-size:12px;
    color:#777;
    padding:5px 0 2px;
    margin: 0 0 10px 0;
    line-height:14px;
}

#millennials-wrapper p.credit.border {
    border:0 none;
    border-top:1px solid #ccc;
    margin-top:10px;
    padding-top: 10px;
}

#millennials-wrapper h3.franklin, #millennials-wrapper h4.franklin {
    font-family:"FranklinITCProBold", "Helvetica", "Arial", sans-serif;
}

#millennials-wrapper h3 {
    font-size: 1.5em;
    line-height: 1.2em;
}

#millennials-wrapper h4 {
    font-size: 1.2em;
    line-height: 1.1em;
}

p.wp-graphics-intro {
    max-width: 920px;
    margin-bottom: 15px;
}

.map-col {
    width: 60%;
    float: left;
}

#map {
    width: 100%;
    height: 610px;
    margin-top: 1px;
}

#map-type {
    background-color: white;
    width: 100%;
}

#map-type .map-type-tab {
    border: 1px solid #ccc;
    cursor: pointer;
    padding: 14px 2%;
    margin: 0 0 -1px -1px;
    -moz-box-shadow: 0 0 11px #ddd inset;
    -webkit-box-shadow: 0 0 11px #DDD inset;
    box-shadow: 0 0 11px #DDD inset;
    width: 46%;
    text-align: center;
}

#map-type .map-type-tab:hover {
    background-color: #fcfcfc;
}

#map-type .map-type-tab.posabs {
    top: 0;
    bottom: 1px;
    right: -1px;
}

#map-type .map-type-tab.disabled {
    opacity: 0.3;
    filter: alpha(opacity=30);
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#legend {
    background: #fff;
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 270px;
    padding: 15px;
    -moz-box-shadow: 0 0 3px #999;
    -webkit-box-shadow: 0 0 3px #999;
    box-shadow: 0 0 3px #999;
}

#legend .legend-key {
    width: 100%;
}

#legend .legend-key.disabled {
    display: none;
}

#legend .legend-key .map-type-label {
    font-size: 14px;
}

#legend .legend-key.wp-graphics-colorkey .table-labels span.cell-labels {
    font-size: 12px;
}

#legend,
#zoom-to-dc {
    z-index: 10;
}

#zoom-to-dc {
    left: 10px;
    top: 80px;
}

#zoom-to-dc a {
    background: white url('http://www.washingtonpost.com/wp-srv/special/local/dc-recovered-guns/img/zoom-dc.png') no-repeat center -18px;
    display: block;
    height: 24px;
    width: 26px;
}

#zoom-to-dc.disabled a {
    background-position: center 3px;
    cursor: default;
}

.leaflet-top-pane {
    pointer-events: none;
}

.info-col {
    float: left;
    width: 37%;
    padding: 0 0 0 3%;
}

.info-col p.franklin em {
    font-size: 14px;
}

/* OL STYLES */
#millennials-wrapper ol {
    margin-left: 20px;
}

#millennials-wrapper ol li.neighborhood-item {
    margin-bottom: 5px;
    padding: 3px;
    line-height: 18px;
    cursor: pointer;
}

#millennials-wrapper ol li.neighborhood-item.first-list-item {
    margin-bottom: 20px;
}

.neighborhood-item:hover {
    background: #efefef;
}

.neighborhood-item p {
    margin-bottom: 5px !important;
    line-height: 1.1em;
}

.info-chart {
    width: 100%;
    clear: both;
}

.info-chart-box {
    display: block;
    width: 5px;
    height: 5px;
    float: left;
    margin: 2px 2px 0 0;
    background: #ccc;
    position: relative;
}

.info-partial-box {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    background: #ccc;
}

.info-last-partial-box {
    background: #fff;
}

.info-chart.pct {
    background: #ddd;
    height: 8px;
    margin-top: 2px;
}

.info-chart-bar {
    display: block;
    text-align: right;
    background: #ccc;
    height: 8px;
    float: left;
    opacity: 0.8;
    filter: alpha(opacity=80);;
}

.info-chart-label {
    float: left;
    margin: -2px 0 0 0;
    color: #999;
    font-size: 13px;
    line-height: 13px;
}

.info-chart-label-add {
    display: none;
}

.item-first-class .info-chart-label-add {
    display: inline-block;
}

.info-chart-total {
    text-align: right;
    float: right;
}

/* NEIGHBORHOOD DATA */
.info-pane-back a {
    color: #999;
}
.info-pane-back a:hover {
    color: #666;
    text-decoration: none;
}

.info-pane-back span {
    text-transform: uppercase;
}

#millennials-wrapper p.nbhd-info-name {
    font-size: 1.4em;
    line-height: 1.2em;
}

#millennials-wrapper p.nbhd-info-total {
    font-size: 1.1em;
}

table.nbhd-info-change {
    width: 220px;
    margin-bottom: 20px;
}

table.nbhd-info-share {
    width: 100%;
}

.info-pane-nbhd th {
    font-weight: normal;
}

.info-pane-nbhd td {
    padding: 5px 0;
    font-size: 1.1em;
}

.table-col-left {
    width: 70px;
    text-align: left;
}

.table-col-right {
    text-align: right;
    width: 150px;
}

.nbhd-info-label {
    margin-bottom: 5px;
}

.nbhd-info-bar {
    display: inline-block;
    background: #ccc;
    height: 16px;
    margin: 0 5px -3px 0;
}

.nbhd-info-pct {
    color: #999;
    font-size: 0.9em;
}

/* CLEAR, CLEARFIX */
.clear {
    height: 0;
    line-height: 0;
    zoom: 1;
}

.cf:before,
.cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }

/* INLINE POSITIONING */
.posrel {position: relative}
.posabs {position: absolute}

/* Color key */
.wp-graphics-colorkey .key-wrap { position: relative; height: 20px; }
.wp-graphics-colorkey .key-table { width: 100%; }
.wp-graphics-colorkey .key-table tr.fill-cell { height: 6px; }
.wp-graphics-colorkey .key-table tr.fill-white { height: 6px; }
.wp-graphics-colorkey .key-table td { border-left: 1px solid #666; }
.wp-graphics-colorkey .key-table td.label-right { border-left: none; border-right: 1px solid #666; }
.wp-graphics-colorkey .table-labels { position: absolute; top: 12px; }
.wp-graphics-colorkey .table-labels span.cell-labels { display: block; float: left; text-align: center; }

/* Tooltip plugin */
.wp-graphics-tooltip {
    position: absolute;
    display: none;
    max-width: 200px;
    padding:7px 9px;
    background: white;
    border: 1px solid #ccc;
    text-align: left;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 2px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.3);
    z-index: 9999;
}

.wp-graphics-tooltip p.franklin {
    margin-bottom: 0;
}

/* STANDALONE CHART STUFF */
.bottom-chart-section {
    float: left;
    margin-bottom: 30px;
}

.bottom-col-left {
    float: left;
    width: 48%;
    margin-right: 4%;
}

.skinny-col {
    width: 50%;
    float: left;
}

.skinny-col-left {
    width: 46%;
    margin-right: 4%;
}

#millennials-wrapper p.franklin.bottom-charts-anno {
    font-size: 15px;
}

.bottom-col-right {
    float: left;
    width: 48%;
}

#bottom-charts-wrapper img {
    max-width: 700px;
    width: 100%;
}

.skinny-col img {
    max-width: 330px;
    width: 100%;
}

/* MEDIA QUERIES */
@media screen and (max-width: 645px) {
    .map-col {
        width: 100%;
    }

    #map {
        height: 340px;
    }

    #legend {
        width: 100%;
        padding: 2%;
        left: 0;
        bottom: 0;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #ddd;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }

    .info-col {
        width: 100%;
        padding: 0;
    }

    .bottom-chart-section {
        margin-bottom: 0;
    }

    .bottom-col-left, .bottom-col-right {
        width: 100%;
        margin: 0 0 20px;
    }

    .skinny-col, .skinny-col-left {
        width: 100%;
        margin: 0 0 10px;
    }
}

@media screen and (min-width: 646px) and (max-width: 979px) {


    .info-chart {
        display: none;
    }

    .info-chart-label {
        text-align: center;
    }

    .info-pane-change .item-first-class .info-chart-label-add {
        clear: both;
        display: block;
    }

    .info-pane-share .item-first-class .info-chart-label-add {
        display: inline;
    }

    #millennials-wrapper .info-pane-share ol > li {
        margin-bottom: 18px;
    }

    .bottom-chart-section {
        margin-bottom: 0;
    }

    .bottom-col-left, .bottom-col-right {
        width: 100%;
        margin: 0 0 20px;
    }
}