@font-face {
   font-family: 'Benton Gothic Regular';
   src: url('https://s3.amazonaws.com/latimes-datadesk-template/fonts/0.5.0/benton-gothic-regular.eot');
   src: url('https://s3.amazonaws.com/latimes-datadesk-template/fonts/0.5.0/benton-gothic-regular.eot?#iefix') format('embedded-opentype'),
        url('https://s3.amazonaws.com/latimes-datadesk-template/fonts/0.5.0/benton-gothic-regular.woff') format('woff'),
        url('https://s3.amazonaws.com/latimes-datadesk-template/fonts/0.5.0/benton-gothic-regular.ttf') format('truetype');
   font-weight:normal;
   font-style:normal;
}
@font-face {
  font-family: 'Benton Gothic Bold';
  src: url('https://s3.amazonaws.com/latimes-datadesk-template/fonts/0.5.0/benton-gothic-bold.eot');
  src: url('https://s3.amazonaws.com/latimes-datadesk-template/fonts/0.5.0/benton-gothic-bold.eot?#iefix') format('embedded-opentype'),
       url('https://s3.amazonaws.com/latimes-datadesk-template/fonts/0.5.0/benton-gothic-bold.woff') format('woff'),
       url('https://s3.amazonaws.com/latimes-datadesk-template/fonts/0.5.0/benton-gothic-bold.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
}

article.big-build header.center h1{
    max-width: 60%;
}

.viafoura .vf-comment-container .vf-comment-meta {
 float: none !important;
}
.sixtych {
    margin: 0 auto;
    max-width: 1000px;
}
.sixtych h3 {
    margin-top: 5px;
}
.sixtych .span6 {
    margin-bottom: 3px;
}
figure#lookup-graphic {
    max-width: 775px;
    margin: 5px auto;
    padding: 20px 105px;
    display: block;
    clear: both;
    border-top: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
    background-color: #f6f6f6;
}
form.lookup-form {
    display: block;
    clear:both;
    width: 100%;
    margin: 0 10px;
}
form.lookup-form h3 {
    margin-top: 0px;
}
form.standalone-search input[name="date"] {
    font-family: 'Benton Gothic Regular', Arial, sans-serif;
    font-size: 17px;
    line-height: 20px;
    height: 22px;
    padding: 8px 4px;
    min-width: 60px;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
form.standalone-search input[type="date"]:focus {
    border-color: #4591B8;
    outline: 0;
    outline: thin dotted \9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #4591B8;
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 1px #4591B8;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 1px #4591B8;
}
form.lookup-form input,
form.lookup-form button {
    margin: 0 15px 10px 0;
}
form.lookup-form input[type="text"],
form.lookup-form input[type="date"] {
    font-size: 15px;
    line-height: 25px;
    height: 27px;
    padding: 8px 4px;
    min-width: 40px;
}
form.lookup-form input[type="submit"],
form.lookup-form input[type="button"],
form.lookup-form button[type="submit"],
form.lookup-form button[type="button"],
form.lookup-form .btn {
    font-weight: normal;
    height: 45px;
    padding: 8px 8px;
    font-size: 21px;
    line-height: 27px;
    background-color: #ffffff;
    background-image: none;
    color: #4591B8;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
form.lookup-form .results {
    display:none;
}
form.lookup-form .results p {
    font-family: 'Benton Gothic Regular', Arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
}
form.lookup-form .results b {
    font-family: 'Benton Gothic Bold', Arial, sans-serif;
    font-weight: normal;
}
.reader-responses h3 {
    line-height: 140%;
    margin-bottom: 15px;
}
p.sources, p.credits {
    line-height: 16px !important;
    margin-bottom: 7px !important;
}

/* Static charts CSS */
.key p.keytext {
    float: left!important;
    padding-right: 10px!important;
    width: auto;
}
.perimeter {
    display: inline-block;
    width: 2em;
    height: 1.2em;
    margin-right: 5px;
    position: relative;
    top: 5px;
}
#ln1 {
    border: 2px solid #F2C115;
    border-radius: 50%;
}
#ln2 {
    border: 2px solid #529790;
    border-radius: 50%;
}
#ln3 {
    border: 2px solid #D5D7D8;
    border-radius: 50%;
}

/* D3 chart CSS */
article.big-build .container .graphic-holder {
    max-width: 100%;
    width:auto;
    margin: 0 0 15px 15px;
}
.graphic-holder .headline {max-width:none; font:21px 'Benton Gothic Bold', Arial, sans-serif; margin-top: -10px !important; margin-left: 20px;}
h3.headline-small {max-width:none; font:14px 'Benton Gothic Bold', Arial, sans-serif; margin-top: -10px !important;}
.graphic-holder .subhead {font: 14px 'Benton Gothic Bold', Arial, sans-serif;}
.graphic-holder p {font:16px 'Benton Gothic Regular', Arial, sans-serif;}
.graphic-holder .description  {line-height:24px;}

article.big-build .container .chart-holder p {
    max-width:100%;
    width: auto;
    margin:0 0 0 20px;
}

text {
    font:12px 'Benton Gothic Regular', Arial, sans-serif;
    letter-spacing: 0.05em;
    fill: #888;
}

.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: cripEdges;
}

/* Y-axis vertical line */
.y.axis path {
    display: none;
}

/* Y-axis ticks */
.y.axis line {
    stroke-dasharray: 3, 3;
    stroke: #ccc;
}

/* X-axis horizontal line */
.x.axis path {
    display: none;
}

/* X-axis ticks */
.x.axis line {
    stroke: #ccc;
}

.line {
    fill: none;
    stroke-width: 4px;
    stroke-linejoin: round;
}
.line.aip {stroke: #F2C115;}
.line.lib {stroke: #D5D7D8;}
.line.grn {stroke: #529790;}

.circle {
    fill: #4d4d4d;
    fill-opacity:1;
    pointer-events:none
}

.tipData {
    font-family: 'Benton Gothic Bold', Arial, sans-serif;
    font-size: 14px;
    background-color: #FFFFFF,
    color: #666;
    text-shadow: 4px 4px 4px #FFFFFF,
     -2px -2px 0 #FFFFFF,
      2px -2px 0 #FFFFFF,
      -2px 2px 0 #FFFFFF,
       2px 2px 0 #FFFFFF;
}

/* Legend styles */
.legend_line {width:20px; height:3px; margin:6px 5px; display:inline-block;}
.aip {background-color: #F2C115;}
.lib {background-color: #D5D7D8;}
.grn {background-color: #529790;}

.chart-holder img {display:none; width:auto;}
/* Fallback to static graphics on smaller screens */
@media (max-width:979px) {
    article.big-build header.center h1 {
    max-width: 88%;
    }
    figure#lookup-graphic {
        padding: 9px 0;
    }
    .sixtych h3 {
        margin: 0 5px;
    }
    .sixtych figcaption {
        margin: 0 5px;
        padding: 0 5px;
    }
    .lookup-form h3,
    .sixtych h3 {
        font-family: 'Benton Gothic Bold', Arial, sans-serif;
        font-size: 18px;
        line-height: 24px;
    }
    .sixtych img {
        margin: 0;
    }
    .sixtych .span6:first-of-type {
        margin-bottom: 0;
    }
    .sixtych .span6:nth-of-type(2) {
        margin-top: 0;
    }
    figure#lookup-graphic p {
        font-size: 15px;
        line-height: 24px;
    }
    figure#lookup-graphic .results {
        width: 85%;
    }
    figure#lookup-graphic .results p {
        font-size: 15px;
        line-height: 24px;
        margin-right:10px;
    }
    form#lookup-form {
        width: auto;
    }
    article.big-build .container .headline,
    article.big-build .container .graphic-holder p { margin-left:0; }
    #interactive-aip-chart {display:none;}
    #aip-static-img {display:block;}
}

@media (max-width:479px) {
    .legend_item {display:block;}
    #aip-static-img {display:none;}
    #aip-static-img-480 {display:block;}
    article.big-build .container .graphic-holder h2 {
        margin-top: 5px !important;
    }
    article.big-build .container .graphic-holder {
        max-width: 100%;
        width:auto;
        margin: -10px 0 0 0px;
        padding: 4px 0;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }
    .graphic-holder .headline {font-size:18px;}
    .graphic-holder .subhead {font-size: 15px;}
    .graphic-holder p {font-size:15px;}
    .graphic-holder .description  {line-height:19px;}
    .mlt li a span {
        margin-top: 10px;
        line-height:18px !important;
    }
    article.big-build header.center h1{
        max-width: 88% !important;
    }
}