@charset "utf-8";
/* Vision Zero Styles */
/* Created: 1/28/2015 */
/* Modified: 4/16/2015 : Reference to faqs.js location updated */
#mainContent *, .banner * { box-sizing:border-box; }
.vzBanner { background: #222; }
.vzBanner h1, .vzBanner h2, .vzBanner p { color: #ccc; }
.vzBanner h3 { color: white; }
.vzBanner a { color:#A2DFF9; }
.aboutButton { position:absolute; top:1.75em; right:3%; }
#collage { width:100%; }
@media (max-width: 680px) {
.aboutButton { position:relative; top:auto; left:0; margin:0 3% 1.5em; }
#collage { display:none; }
}
.vzHeader { position:relative; padding:2% 3% 0; color:black; }
.vzHeader a:hover { text-decoration: none; }
.vzHeader h2 { font-size: 3.2em; margin-top: -.25em; color:black; }
.vzHeader h2:hover { color:#4F4F4F; text-shadow: none; }
/* VisionZero header control - what gets displayed in the header */
.about, .resources, .roads, .people, .plans, .crashdata, .grants { display:none; } /* hides header.inc h2 until needed */
.aboutPage .about, .resourcesPage .resources, .roadsPage .roads,
.peoplePage .people, .plansPage .plans, .dataPage .crashdata, .grantsPage .grants {display:block;} /* put this class in to unhide irrelevent header.inc h2s */
.textShadow { text-shadow: 2px 2px 6px rgba(0,0,0,.3); }
.topRight { position:absolute; top: 2em; right:3%; width:auto; }
p + h3 {margin-top: 2em; }
.fullPage { padding: 0; overflow: hidden; }
.half { width:50%; float:left; padding:3%; }
.third { width: 33.333333%; float:left; padding:3%; }
.twothird { width: 66.66666%; float:left; padding:3%; }
.third h3 { line-height: normal; }
.rolldown { padding-bottom:1000em; margin-bottom:-1000em; } /* applies rollershade effect to div with bgcolor or border styles */
h2 { font-size: 3em; color: black; font-weight: bold; margin-top:0; margin-bottom:0;}
h3 { text-transform: uppercase; }
h4 { font-size: 115%; font-weight:bold; letter-spacing:1px; }
.button { width: auto; background: none; border: 1px solid #333; font-size: 1.5em; padding: .5em 1em; }
.button:hover { background: #eee; }
.uniformWidth button { width: 100%; margin-bottom:1em; }
.vzBanner button { background: #5B5B5B; color: #E7E7E7; border:1px solid #E7E7E7; }
.vzBanner button:hover { background: #333; color: #f5f5f5; border-color: #f5f5f5; }
.larger { font-size: 1.8em; }
/* Separator - Use on
to achieve vertical spacing and separation. */
.separator { border:none; height:4.25em; background: none; }
@media (max-width: 768px) {
.separator { display:none; }
}
/* Arrow Right - Used on Safer People */
.arrowR li:after { content:"\00bb"; margin-left:.5em;}
@media (max-width: 768px) {
.third, .half, .twothird { float:none; width: 100%; border-right: none; border-left: none; }
.rolldown { padding-bottom: 3%; margin-bottom:0; }
.tagline { font-size: 200%; }
.smallLogo { position: relative; }
.topRight { position:relative; top:0; right:0; display:block; margin:0; padding:2% 0; background: #f2f2f2; }
}
/* Collapsible FAQs - Place class="faq" inside the */
.faqs dt { margin-bottom: 1em; color:#007FFF; text-decoration:underline; }
.faqs dt:hover { color:black; text-decoration:none; cursor:pointer; }
/* scripts needed for FAQ behavior:
*/
/* Circles - Used to create icons on Safer Roads */
.circles img { border-radius: 3em; padding: 3px; background: rgba(0,0,0,.6); }
.circles img:hover { background: rgba(0,0,0,.2); }
.lessPadding { padding:1%; } /* default is 3% */
/* Border options */
.border { border: 1px solid #ccc; }
.borderT { border-top: 1px solid #ccc; }
.borderL { border-left: 1px solid #ccc; }
.borderR { border-right: 1px solid #ccc; }
.borderB { border-bottom:1px solid #ccc; }
/* Figure + Figcaption */
figure { display:block; margin-bottom:1.5em; }
figcaption { font-family:inherit; font-size: 1.2em; }
/* Thumbnails - used on Know Your Signs */
.thumbnails img { width:46%; display:inline; margin:0; }