/* ---------- ALL STYLES BEGIN FOR SMALL SCREENS AND ARE PROGRESSIVELY ENHANCED FOR LARGER SCREENS VIA MEDIA QUERIES AT BOTTOM OF THIS FILE  ---------- */

/* ---------- SITEWIDE GENERAL STYLES ---------- */

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body, html { width: 100%; }
body { font-family: Helvetica, Arial, sans-serif; color: #333; background-color: #fff; background-size: auto 400px; }

a { color: #555; text-decoration: none; 
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover, a:focus { color: #333; cursor: pointer; }

a span.pdf { margin: 0; padding: 0; width: 16px; height: 16px; display: inline-block; background: transparent url("../images/pdf.png") no-repeat center; text-indent: -999em; }

strong { font-weight: bold; }
em { font-style: italic; }

.clear { clear: both; float: none; }
.center { text-align: center; }
.italic { font-style: italic; }
.indent { margin-left: 1em; }

h2 { margin-left: -9999em; position: absolute; background-color: #fff; color: #000; }

/* ---------- SMALL SCREEN HEADER, ODOS LOGO, COLUMN I LOGO, AND UI LINK STYLES ---------- */

#header a#safetyexit { margin: 0; padding: 1em 0; width: 100%; background-color: #e5e500; font-size: .875em; font-weight: bold; line-height: 1.25em; text-align: center; text-decoration: underline; color: #333; display: block; border-bottom: 1px solid #fff; position: fixed; top: 0; left: 0; z-index: 100; }
#header a#safetyexit:hover, #header a#safetyexit:focus { background-color: #fff; color: #000; }

#header { margin: 0; padding: 4em 0; width: 100%; background-color: #13294b; }
#header a:focus { outline: 1px dotted #fff; }

#header h1 { margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; font-size: 1.875em; line-height: 1.75em; text-align: center; text-transform: uppercase; color: #e84a27; }
#header h1 a { color: #fff; }
#header h1 a:hover, #header h1 a:focus { color: #8397b5; }
#header h1 span.atillinois { font-size: 1em; }
#header h1 span.atillinois a { color: #e84a27; }
#header h1 span.atillinois a:hover, #header h1 span.atillinois a:focus { color: #d3b4b2; }
#header h1 span.wecare { font-size: 2.4275em; font-weight: bold; display: block; }

#header h2 { margin: 1em 0 0; padding: 0; width: 100%; font-size: .9325em; font-weight: normal; text-align: center; background-color: transparent; color: #dfe4ea; }

/* ---------- SMALL SCREEN ILLINOIS BRANDING STYLES ---------- */

a#block-i img { margin: 0; padding: 0; width: 1.75em; height: auto; }
a#block-i:focus { outline: none; }
a#block-i:focus img { outline: 2px dotted #fff; }
a#block-i span { text-indent: -9999em; position: absolute; }

/* ---------- SMALL SCREEN GOOGLE SEARCH STYLES ---------- */

#google { margin: 0; padding: 0 0 2em; width: 100%; background-color: #13294b; }
#google form { margin: 0 auto; padding: 0; width: 18em; }
#google form input { margin: 0; padding: 0; font-size: .75em; font-weight: normal; float: left; border-radius: 0; -webkit-appearance: none; }
#google form input#gsc-i-id1 { margin: 0 0 0 -1em; padding: .25em; width: 20em; height: 2em; outline: none; background-color: transparent; color: #333; border: 1px solid #fff; border-right: none; }
#google form input#gsc-i-id1:focus { background-color: #ddd; outline: 1px dotted #000; }
#google form input#submit { margin: 0; padding: .25em; width: 4em; height: 2em; background-color: #13294b; color: #fff; border: 1px solid #fff; }
#google form input#submit:hover, #google form input#submit:focus { background-color: #e84a27; color: #fff; }
#google form input#submit:focus { outline: 1px dotted #fff; }

#google form label span { margin-left: -9999em; position: absolute; }

/* ---------- SMALL SCREEN CONTENT AREA STYLES ---------- */

#content { margin: 0; padding: 0; width: 100%; background-color: transparent; }

#content .container { margin: 0; padding: 2em 2em 0; width: 100%; }

#content h1 { margin: 0; font-family: Helvetica, Arial, sans-serif; font-size: 2em; line-height: 1.5em; color: #13294b; }
#content h1 span.subhead { font-size: .625em; line-height: 1.125em; display: block; }
#content h3 { margin: 2em 0 0; font-size: 1.25em; line-height: 1.25em; font-weight: bold; border-bottom: 1px solid #999; }
#content h4 { margin: 1em 0 0; font-size: 1em; line-height: 1.5em; font-weight: bold; }
#content h4.blue { color: #003c7d; }
#content h4.nospace { margin-bottom: -1em; }
#content h5 { margin: 1em 0 -1em; font-size: 1em; line-height: 1.5em; font-weight: bold; }
#content p { margin: 1em 0 0; font-size: 1em; line-height: 1.5em; }
#content .coming { background-color: #e5e500; }
#content ul { margin: .75em 0 0 1em; list-style-type: square; }
#content ol { margin: .75em 0 0 1.375em; list-style-type: decimal; }
#content li { margin: .25em 0 0; font-size: 1em; line-height: 1.5em; }
#content a { color: #333; text-decoration: underline; }
#content a:hover, #content a:focus { color: #000; }
#content a:focus { background-color: #dedede; outline: 1px dotted #000; }
#content iframe { margin-top: 1em; width: 310px; height: 241px; }

#content p.source { margin-top: 2em; padding-top: 2em; font-size: .75em; border-top: 1px solid #333; }

#content img.fullwidth { margin: 1em 0; padding: 0; width: 100%; height: auto; }

#content a#report_form { margin: 2em 0; padding: 1em; width: 100%; font-size: 1.5em; line-height: 1.5em; font-weight: bold; text-align: center; text-decoration: underline; background-color: #e84a27; color: #fff; border: .375em solid #333; display: block; }
#content a#report_form:hover, #content a#report_form:focus { background-color: #ccc; color: #000; border-color: #000; text-decoration: underline; }

/* ---------- CONTENT IMAGE STYLES ---------- */

body#bodyprevention #content #contentbox img.vert { margin: 1em 1em .5em 0; padding: 0; width: 100px; height: auto; float: left; }
body#bodyprevention #content #contentbox img.horz { margin: 1em 1em .5em 0; padding: 0; width: 150px; height: auto; float: left; }

/* ---------- FAQ PAGES SHOW HIDE STYLES ---------- */

#content #contentbox dl.faq { margin: 1em -2em 0; padding: 0; }
#content #contentbox dl.faq dt { margin: -1px 0 0; padding: 1em 1em 1em 2.5em; font-size: 1em; line-height: 1.25em; font-weight: bold; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
#content #contentbox dl.faq dd { margin: 0; padding: 0 1em 1em 2.5em; }
#content #contentbox dl.faq dd p { margin: 1em 0 0; font-size: 1em; line-height: 1.5em; }


/* ---------- SMALL SCREEN RESOURCE BOX STYLES ---------- */

#resourcebox { margin: 2em -2em 0; padding: 0; }
#resourcebox h3 { margin: 0; padding: .5em 1em .5em 1.75em; font-size: 1em; font-weight: normal; color: #fff; background-color: #13294b; }
#resourcebox ul { margin: 0; padding: 0; list-style-type: none; }
#resourcebox ul li { margin: 0; padding: .5em 2em; font-size: .875em; border-bottom: 1px solid #ccc; }
#resourcebox ul li a { margin: 0; padding: 0; color: #333; }
#resourcebox ul li a:hover, #resourcebox ul li a:focus { color: #000; }

#resourcebox ul#action { background-color: transparent; }
#resourcebox ul#action, #resourcebox ul#action li { border: none; }
#resourcebox ul#action li a { margin: 0 10% .75em; padding: 1em; width: 80%; font-size: 1.125em; line-height: 1.5em; text-align: center; text-decoration: underline; background-color: #e84a27; color: #fff; border: .375em solid #333; display: block; }
#resourcebox ul#action li a:hover, #resourcebox ul#action li a:focus { background-color: #ccc; color: #000; border-color: #000; text-decoration: underline; }

body#reporting_form #resourcebox ul#action { display: none; }

/* ---------- SMALL SCREEN BACK TO TOP LINK STYLES ---------- */

#content a.back-to-top { padding: 1em; font-size: .75em; text-decoration: none; background-color: #000; background: rgba(0, 0, 0, 0.70); color: #fff; display: none; position: fixed; bottom: 20%; right: 1em; z-index: 5; }
#content a.back-to-top span.hide { margin-left: -999em; position: absolute; }
#content a.back-to-top:hover, #content a.back-to-top:focus { background-color: #666; background: rgba(0, 0, 0, 1.0); }
#content a.back-to-top:focus { outline: 1px dotted #000; }
#content a.back-to-top span.arrow { margin: 0 auto .5em; width: 0; height: 0; border-left: 1em solid transparent; border-right: 1em solid transparent; border-bottom: 1em solid #bbb; display: block; }
#content a.back-to-top:hover span.arrow { border-bottom: 1em solid #ddd; }

/* ---------- SMALL SCREEN HOME PAGE SPECIFIC STYLES ---------- */

body#bodyhome #contentbox {  }

body#bodyhome #contentbox p { margin: 1em 0; padding: 0; width: 100%; font-size: 1.25em; line-height: 1em; font-weight: bold; text-align: center; }
body#bodyhome #contentbox p a#feature1, 
body#bodyhome #contentbox p a#feature2, 
body#bodyhome #contentbox p a#feature3, 
body#bodyhome #contentbox p a#feature4 
{ padding: 2em 0; background: #e84a27; color: #fff; border: .5em solid #333; text-decoration: underline; display: block; }
body#bodyhome #contentbox p a#feature1:hover, 
body#bodyhome #contentbox p a#feature2:hover, 
body#bodyhome #contentbox p a#feature3:hover, 
body#bodyhome #contentbox p a#feature4:hover, 
body#bodyhome #contentbox p a#feature1:focus, 
body#bodyhome #contentbox p a#feature2:focus, 
body#bodyhome #contentbox p a#feature3:focus, 
body#bodyhome #contentbox p a#feature4:focus 
{ background: #ccc; color: #000; border-color: #000; }
body#bodyhome #contentbox p a#feature1:focus, 
body#bodyhome #contentbox p a#feature2:focus, 
body#bodyhome #contentbox p a#feature3:focus, 
body#bodyhome #contentbox p a#feature4:focus 
{ outline: 2px dotted #000; }

/* ---------- SMALL SCREEN FOOTER AREA STYLES ---------- */

#footer { margin: 0; padding: 2em 0 10em; background-color: #ccc; text-align: center; }
#footer a:focus { background-color: #fff; outline: 1px dotted #000; }

#footer .container { margin: 0; padding: 0; width: 100%; }

#footer h3 { margin: 0 0 .25em; padding: 0; font-family: Helvetica, Arial, sans-serif; font-size: 1.875em; text-transform: uppercase; color: #333; width: 100%; }
#footer h3 a { color: #333; text-decoration: none; }
#footer h3 a:hover, #footer h3 a:focus { color: #000; text-decoration: underline; }
#footer h3 span.atillinois { font-size: .625em; }
#footer h3 span.atillinois a { color: #333; }
#footer h3 span.atillinois a:hover, #footer h3 span.atillinois a:focus { color: #000; text-decoration: underline; }
#footer h3 span.wecare { font-size: 1.5em; font-weight: bold; display: block; }

#footer p.tag { margin: 0 0 4em; padding: 0; font-size: .875em; color: #333; }

#footer p { margin: 0 0 2em; padding: 0 1em; font-size: .75em; line-height: 1.25em; color: #333; }
#footer p a { text-decoration: underline; }
#footer ul { margin: 2em auto; width: 16em; list-style-type: none; }
#footer li { margin: 1em 0; font-size: .875em; color: #333; }
#footer li a { padding: 1em; border: 1px solid #333; display: block; }
#footer li a:hover, #footer li a:focus { border-color: #fff; text-decoration: underline; }
#footer a { color: #000; }
#footer a:hover, #footer a:focus { color: #000; }





/* ---------- THE FOLLOWING STYLES EITHER ENHANCE OR OVERRIDE THE STYLES LISTED ABOVE FOR SMALLER SCREENS ---------- */



/* ---------- TABLETS AND LARGER ---------- */
@media only screen and (min-width: 768px) {

#header a#safetyexit { margin: 0; padding: 1.5em 1em; width: 26%; position: fixed; top: 0; left: 74%; z-index: 1000; border: .75em solid #000; }

#header { padding: 1.5em 0 4.5em; }
#header h1 {  }
#header h2 { font-size: 1.125em; }

a#block-i img { margin: 0 0 .875em; width: 1.875em; }

#google { margin: 0; width: 20em; background-color: transparent; border: none; position: absolute; top: 1.5em; left: .75em; }
#google form { margin: 0 auto; padding: 0; width: 18em; }
#google form input#gsc-i-id1 { width: 18em; border-color: #fff; background-color: transparent; color: #333; }
#google form input#submit { background-color: transparent; color: #fff; border-color: #fff; }

#content {  }
#content .container { padding: 1em 0; }
#content h1 { margin: 0 0 .5em; }
#content iframe { width: 425px; height: 330px; }

#content img.fullwidth { margin-top: 0; max-width: 679px; }

#contentbox { margin: 0; padding: 2em 1em; width: 73%; float: left; }
#contentbox h3 {  }

body#bodyhome #contentbox { margin: 0; padding: 2em 0 2em 1em; width: 73%; float: left; }

body#bodyhome #contentbox p { margin: 0 2% .5em 0; font-size: 2.0625em; text-align: left; width: 46%; float: left; }
body#bodyhome #contentbox p a#feature1, 
body#bodyhome #contentbox p a#feature2, 
body#bodyhome #contentbox p a#feature3, 
body#bodyhome #contentbox p a#feature4 
{ padding: 1.125em .75em 0; height: 6em; border: .375em solid #333; }
body#bodyhome #contentbox p a#feature1 span, 
body#bodyhome #contentbox p a#feature2 span, 
body#bodyhome #contentbox p a#feature3 span, 
body#bodyhome #contentbox p a#feature4 span 
{ display: block; }

#content a#report_form { margin: 2em auto; padding: 1em; width: 20em; font-size: 1.25em; font-weight: normal; }

#contentbox .col_2_3 { margin: 0; padding: 1em 2em 1em 0; width: 66.666666%; float: left; }
#contentbox .col_1_3 { margin: 0; padding: 1em; width: 33.333333%; float: left; }
#contentbox .col_1_4 { margin: 0; padding: 1em; width: 25%; float: left; }
#contentbox .col_1_2 { margin: 0; padding: 1em 1em 0 0; width: 50%; float: left; }

body#bodyprevention #content #contentbox img.vert { width: 150px; }
body#bodyprevention #content #contentbox img.horz { width: 250px; }

#content #contentbox dl.faq { margin: 0; }

#resourcebox { margin: 0 .5em 0 0; padding: 2em 0; width: 25%; float: right; }
#resourcebox h3 { margin: 0; padding: 0 0 .25em; font-size: .825em; font-weight: bold; background-color: transparent; color: #000; border-bottom: 1px solid #999; }
#resourcebox ul { margin: 0 0 1em; border: none; }
#resourcebox ul li { padding: .25em 1em; font-size: .675em; }
#resourcebox ul li a { margin: 0; padding: 0; }
#resourcebox ul#action { margin: 0; padding: 0; }
#resourcebox ul#action li:hover { background-color: transparent; }
#resourcebox ul#action li a { margin: 0 -1em .75em -1em; padding: 1em .5em; width: auto; font-size: 1.375em; font-weight: normal; text-decoration: underline; text-transform: none; display: block; }

#bodyhome #resourcebox {  }

#footer {  }
#footer ul { margin: 2em auto 4em; width: auto; }
#footer li { margin: 1em .5em; display: inline-block; }
#footer li a { font-size: .875em; width: 14em; }

} /*/mediaquery*/



/* ---------- DESKTOPS AND LAPTOPS ---------- */
@media only screen and (min-width: 1224px) {

#header a#safetyexit { padding: 2em 1em; width: 20%; left: 80%; }

#header { padding-bottom: 6.5em; }
#header h1 {  }
#header h2 { font-size: 1.25em; }

a#block-i img { margin-bottom: 1.25em; width: 2em; }

#navigation .nav-collapse li a { font-size: 1em; }

#content {  }
#content .container { margin: 0 10%; padding: 4em 0 0; width: 80%; }
#content iframe { width: 600px; height: 466px; }

body#bodyprevention #content #contentbox img.vert { width: 250px; }
body#bodyprevention #content #contentbox img.horz { width: 350px; }

#resourcebox ul li { font-size: .75em; }

} /*/mediaquery*/