/* @override 
	http://phoenix-devl.rhinonet.com/webcms/groups/internet/@inter/@cms/documents/web_asset/esd_sw_style.css */

/*
CVS: $Id: esd_sw_style.css,v 1.12 2011/11/29 20:44:13 cvsdevel Exp $
Title: esd_sw_main.css
Copyright: (c) 2011
Author: Donovan Mueller - donovan@rhinointernet.com
Company: Rhino Internet
Description: Global styles for the City of Phoenix Stormwater interactive 
             piece.
---------------------------------------------------------------------------- */

/* @group HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* HTML5 element display
   ========================================================================= */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: block;
}
audio[controls], canvas, video {
    display: inline-block;/*display: inline;*/
   /*zoom: 1;*/
}
/* Base
   ========================================================================= */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em 
 *    units.
 *    http://clagnut.com/blog/348/#c790
 * 2. Force vertical scrollbar in non-IE
 * 3. Remove Android and iOS tap highlight color to prevent entire container 
 *    being highlighted
 *    www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
 * 4. Prevent iOS text size adjust on device orientation change, without 
 *    disabling user zoom
 *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 */
html {
    font-size: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
body {
    margin: 0;
    font-size: 13px;
    line-height: 1.231;

}
body, button, input, select, textarea {
    font-family: Arial, sans-serif;
    color: #222;
}

/* 
 * These selection declarations have to be separate
 * No text-shadow: twitter.com/miketaylr/status/12228805301
 * Also: hot pink!
 */
::-moz-selection {
background: #a8d3ff;
color: #fff;
text-shadow: none;
}
::selection {
    background: #a8d3ff;
    color: #fff;
    text-shadow: none;
}
/* Links
   ========================================================================= */
a {
    color: #00e;
}
a:visited {
    color: #551a8b;
}
a:focus {
    outline: thin dotted;
}
.no-js a, .no-js a:visited {
    color: #0096d5;
}
/* Improve readability when focused and hovered in all browsers: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {
    outline: 0;
}
/* Typography
   ========================================================================= */

abbr[title] {
    border-bottom: 1px dotted;
}
b, strong {
    font-weight: bold;
}
blockquote {
    margin: 1em 40px;
}
dfn {
    font-style: italic;
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
ins {
    background: #ff9;
    color: #000;
    text-decoration: none;
}
mark {
    background: #ff0;
    color: #000;
    font-style: italic;
    font-weight: bold;
}
/* Redeclare monospace font family:
   en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
pre, code, kbd, samp {
    font-family: monospace, monospace;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}
/* Improve readability of pre-formatted text in all browsers */
pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}
q {
    quotes: none;
}
q:before, q:after {
    content: "";
    content: none;
}
small {
    font-size: 85%;
}
/* Position subscript and superscript content without affecting line-height: 
   gist.github.com/413930 */
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
/* Lists
   ========================================================================= */
ul, ol {
    margin: 1em 0;
    padding: 0 0 0 40px;
}
dd {
    margin: 0 0 0 40px;
}
nav ul, nav ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Embedded content
   ========================================================================= */
/*
 * Improve image quality when scaled in IE7
 * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */
img {
    border: 0;
    -ms-interpolation-mode: bicubic;
}
/*
 * Correct overflow displayed oddly in IE9 
 */
svg:not(:root) {
    overflow: hidden;
}
/* Figures
   ========================================================================= */
figure {
    margin: 0;
}
/* Forms
   ========================================================================= */
form {
    margin: 0;
}
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}
/* 
 * 1. Correct color not inheriting in IE6/7/8/9 
 * 2. Correct alignment displayed oddly in IE6/7 
 */
legend {
    border: 0; /*margin-left: -7px;*/
    padding: 0;
}
/* Indicate that 'label' will shift focus to the associated form element */
label {
    cursor: pointer;
}
/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */
button, input, select, textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;/*vertical-align: middle;*/
}
/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the 
 *    UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */
button, input {
    line-height: normal;
/*overflow: visible;*/
}
/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */
button, input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button;
}
/*
 * Consistent box sizing and appearance
 */
input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
}
input[type="search"] {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

/* 
 * Remove inner padding and border in FF3/4
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ 
 */
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0;
}
/* Remove default vertical scrollbar in IE6/7/8/9 */
textarea {
    overflow: auto;
    vertical-align: top;
}

/* Colors for form validity */
input:valid, textarea:valid {
}
input:invalid, textarea:invalid {
background-color: #f0dddd;
}
/* Tables
   ========================================================================= */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* @end HTML5 Boilerplate */


/* Primary styles
   ========================================================================= */
   
/* @group Layering
   ------------------------------------------------------------------------- */
/* Base */
#doc {
    z-index: 1;
}
/* Top-most */
#hd > *, #info, #ft .nav.misc > ul > li {
    z-index: 1000;
}
#loadscrn {
    z-index: 2000;
}
/* Within the Stage */
#stage {
    z-index: 1;
}
#stage .stage.mtn_streams {
    z-index: 1;
}
#stage .stage.sky {
    z-index: 3;
}
#stage .stage.mountains {
    z-index: 4;
}
#stage .bizbldgs {
    z-index: 100;
}
#stage .divider {
    z-index: 102;
}
#stage .stage.ground {
    z-index: 200;
}
#stage .stage.street {
    z-index: 201;
}
#stage .overview.paloverde-med, #stage .overview.paloverde-small {
    z-index: 210;
}
#stage .overview.resid_house {
    z-index: 211;
}
#stage .overview.cactus2 {
    z-index: 215;
}
#stage .overview.paloverde-large, #stage .overview.retention_area, #stage .overview.roofguy {
    z-index: 219;
}
#stage .overview.const_home, #stage .overview.runner {
    z-index: 220;
}
#stage .overview.dog_walker {
    z-index: 221;
}
#stage .overview.cactus1 {
    z-index: 225;
}
#stage .business.storage, #stage .business.bizbldgs2 {
    z-index: 210;
}
#stage .business.sweeper, #stage .business.inspector_inspected, #stage .business.bucketman, #stage .business.retention_basin, #stage .business.cactus2, #stage .business.paloverde-small, #stage .business.shrub-small, #stage .business.shrub-med, #stage .business.shrub-large {
    z-index: 211;
}
#stage .business.concrete_pad {
    z-index: 220;
}
#stage .business.fueling_stn, #stage .business.oil, #stage .business.broomguy, #stage .business.paloverde-medlg, #stage .business.shrub-med.n3, #stage .business.shrub-large.n2 {
    z-index: 221;
}
#stage .business.truck_trucker, #stage .business.spillguy {
    z-index: 222;
}
#stage .residential.bg_houses {
    z-index: 100;
}
#stage .residential.driveway {
    z-index: 210;
}
#stage .residential.oil2, #stage .residential.pool {
    z-index: 211;
}
#stage .residential.other_houses, #stage .residential.beachball {
    z-index: 212;
}
#stage .residential.big_house, #stage .residential.pool_fence {
    z-index: 213;
}
#stage .residential.pool_house {
    z-index: 214;
}
#stage .residential.cactus2 {
    z-index: 216;
}
#stage .residential.paloverde-med2, #stage .residential.runner, #stage .residential.car_washer, #stage .residential.shrubs {
    z-index: 217;
}
#stage .residential.cactus1, #stage .residential.bins, #stage .residential.shrub-lg, #stage .residential.dog_walker, #stage .residential.shrub-med, #stage .residential.shrubs_rocks1, #stage .residential.shrubs_rocks2, #stage .residential.chemicals, #stage .residential.paloverde-medlg2, #stage .residential.cactus3 {
    z-index: 218;
}
#stage .residential.weed_sprayer, #stage .residential.broomguy, #stage .residential.dumpingguy {
    z-index: 219;
}
#stage .construction.bg_bldgs {
    z-index: 210;
}
#stage .construction.chem_storage, #stage .construction.gravel, #stage .construction.retention_area, #stage .construction.greenstuff {
    z-index: 211;
}
#stage .construction.backfence {
    z-index: 212;
}
#stage .construction.bucketman, #stage .construction.portable, #stage .construction.planners {
    z-index: 213;
}
#stage .construction.fence {
    z-index: 214;
}
#stage .construction.swales-right, #stage .construction.swales-left {
    z-index: 215;
}
#stage .construction.shovelguy, #stage .construction.cementtruck, #stage .construction.roofguy {
    z-index: 216;
}
#stage .construction.washout, #stage .construction.const_home {
    z-index: 217;
}
.area {
    z-index: 900;
}
#sanitarysewer, #stormdrain {
    z-index: 901;
}
/* @end Layering */

/* @group Overall Structure
   ------------------------------------------------------------------------- */
.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: 100%;
    height: auto;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: auto;
    height: 100%;
  }
}

body {
    text-align: center;
    background-color: #000;
}
body > * {
    text-align: left;
}
.no-js body {
    color: #fff;
}
#doc {
    position: relative;
    width: 1000px;
    height: 660px;
    margin: 0 auto;
    overflow: hidden;
}
.no-js #doc {
    height: auto;
    overflow: auto;
}
/* @end Overall Structure */

/* @group General
   Some misc. things that appear throughout.
   ------------------------------------------------------------------------- */
a.button.close {
    display: block;
    padding-right: 17px;
    color: #717171;
    text-align: right;
    text-decoration: none;
    text-transform: lowercase;
    background: transparent none no-repeat right 2px;
    font: 12px/1.231em Arial, sans-serif;
}
a.button.close:hover {
    text-decoration: underline;
}
/* @end General */

/* @group Loading Screen
   ------------------------------------------------------------------------- */
#loadscrn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #81d9ff;
    text-align: center;
    vertical-align: middle;
    background-color: #000;
}
#loadscrn > .body {
    position: relative;
    width: 372px;
    margin: 182px auto 0;
}
#loadscrn .stormwater {
    position: relative;
    z-index: 2;
    width: 372px;
    height: 135px;
    text-indent: -9999px;
    background: transparent url(../assets_stormwater/esd_sw_loading_logo.png) no-repeat center top;
}
#loadscrn .phoenix {
    width: 153px;
    height: 83px;
    margin: 0 auto;
    text-indent: -9999px;
    background: transparent url(../assets_stormwater/esd_sw_loading_phx_logo.png) no-repeat center top;
}
#loadscrn .meter {
    position: absolute;
    z-index: 1;
    top: 7px;
    right: 1px;
    width: 45px;
    height: 0;
    border-top: 122px solid #bedee9;
    margin: 0 auto;
    background-color: #0096d5;
}
#loadscrn .msg {
    padding-left: 41%;
    margin: .75em 0 2em;
    text-align: left;
    font-size: 1.4em;
    ;
    font-weight: bold;
}
/* @end Loading Screen */

/* @group Header
   Logo and main navigation.
   ------------------------------------------------------------------------- */
h1 {
    position: absolute;
    top: 30px;
    left: 18px;
    width: 163px;
    height: 79px;
    margin: 0;
    background: url(../assets_stormwater/esd_sw_loading_logo.png) no-repeat -9999px -9999px transparent;
}
.no-js h1 {
    position: static;
}
h1 a {
    display: block;
    height: 79px;
    text-indent: -9999px;
    background: transparent url(../assets_stormwater/esd_sw_logo.png) no-repeat left top;
}
#hd .nav.main {
    position: absolute;
    bottom: 0;
    width: 1000px;
    height: 48px;
    font-family: museo-sans, Arial, sans-serif;
    font-size: 25px;
    font-weight: 300;
    background: #0096d5 url(../assets_stormwater/esd_sw_main_nav_bg.png) no-repeat center top;
}
.no-js #hd .nav.main {
    position: fixed;
}
#hd .nav.main > ul {
    padding: 0;
    overflow: hidden; /* clearfix */
    margin: 0;
    list-style: none;
    background: url(../assets_stormwater/esd_sw_loading_phx_logo.png) no-repeat -9999px -9999px transparent;
}
#hd .nav.main > ul > li {
    float: left;
    text-transform: uppercase;
    background: transparent url(../assets_stormwater/esd_sw_main_nav_bg.png) no-repeat left -999px;
}
#hd .nav.main li.business {
    width: 331px;
}
#hd .nav.main li.residential {
    width: 334px;
}
#hd .nav.main li.construction {
    width: 335px;
}
#hd .nav.main li.business:hover, #hd .nav.main li.business.hover, #hd .nav.main li.business.active {
    background-position: 0px -58px;
}
#hd .nav.main li.residential:hover, #hd .nav.main li.residential.hover, #hd .nav.main li.residential.active {
    background-position: -331px -58px;
}
#hd .nav.main li.construction:hover, #hd .nav.main li.construction.hover, #hd .nav.main li.construction.active {
    background-position: -665px -58px;
}
#hd .nav.main > ul > li > a {
    display: block;
    width: auto;
    height: 36px;
    padding: 12px 0 0;
    text-align: left;
    color: #82d8fd;
    letter-spacing: 0px;
    text-decoration: none;
    background-color: transparent;
}
html.oldie #hd .nav.main > ul > li > a {
    font-weight: bold;
    letter-spacing: -1px;
}
#hd .nav.main li.business > a {
    padding-left: 140px;
    background: transparent url(../assets_stormwater/esd_sw_business_icon.png) no-repeat 65px 5px;
}
#hd .nav.main li.residential > a {
    padding-left: 117px;
    background: transparent url(../assets_stormwater/esd_sw_residential_icon.png) no-repeat 60px 7px;
}
#hd .nav.main li.construction > a {
    padding-left: 92px;
    background: url(../assets_stormwater/esd_sw_construction_icon.png) no-repeat 31px 9px transparent;
}
#hd .nav.main > ul > li:hover > a, #hd .nav.main > ul > li.active > a {
    color: #fff;
}
#hd .nav.main > ul > li.overview {
    position: absolute;
    top: -605px;
    left: 16px;
    width: auto;
    height: auto;
    font-size: 12px;
    font-weight: normal;
    text-transform: none;
}
.no-js #hd .nav.main > ul > li.overview {
    top: -21px;
    right: 0;
    left: auto;
    background-color: #00589b;
}
#hd .nav.main > ul > li.overview a {
    width: auto;
    height: auto;
    padding: 0 0 0 8px;
    color: #fff;
    line-height: 1em;
    background: transparent url(../assets_stormwater/esd_sw_arrow_right_white.png) no-repeat left top;
}
html.oldie #hd .nav.main > ul > li.overview > a {
    font-weight: normal;
    letter-spacing: normal;
}
.no-js #hd .nav.main > ul > li.overview a {
    padding: 4px 4px 4px 10px;
    border: 1px solid #0099d9;
    border-bottom: none;
    background-position: 3px center;
}
.no-js #hd .nav.main > ul > li.overview:hover a {
    background-color: #004590;
}
/* @end Header */

/* @group Footer
   ------------------------------------------------------------------------- */
.no-js #ft {
    margin-bottom: 75px;
}
#ft .nav.misc > ul {
    padding: 0;
    list-style: none;
}
#ft .nav.misc > ul > li {
    position: absolute;
}
.no-js #ft .nav.misc > ul > li {
    position: static;
}
#ft .nav.misc li.forkids {
    top: 0;
    right: 0;
}
#ft .nav.misc li.forkids a {
    display: block;
    width: 82px;
    height: 74px;
    padding: 5px 8px 0 0;
    text-indent: -9999px;
    background: transparent url(../assets_stormwater/esd_sw_kids_badge.png) no-repeat right top;
}
.no-js #ft .nav.misc li.forkids a {
    position: fixed;
    top: 0;
    right: 0;
}
#ft .nav.misc li.twitter {
    top: 128px;
    left: 17px;
}
#ft .nav.misc li.twitter a {
    display: block;
    width: 125px;
    min-height: 31px;
    padding: 5px 0 0 40px;
    text-align: center;
    text-decoration: none;
    color: #d2cf98;
    font-size: 13px;
    background: transparent url(../assets_stormwater/esd_sw_twitter_bg.png) no-repeat left top;
}
.no-js #ft .nav.misc li.twitter a {
    padding-left: 17px;
}
#ft .nav.misc li.twitter a small {
    position: relative;
    left: 2px;
    display: block;
    margin-top: 5px;
    color: #33cbfa;
    font-size: 10px;
}

#ft .nav.misc li.backtophx {
    top: 114px;
    right: -50px;
}
.no-js #ft .nav.misc li.backtophx {
    position: fixed;
    z-index: 1;
    top: auto;
    right: -148px;
    bottom: 80px;
}
.no-js #ft .nav.misc li.backtophx:hover {
    right: -51px;
}
#ft .nav.misc li.backtophx a {
    display: block;
    width: 191px;
    height: 42px;
    text-indent: -9999px;
    background: transparent url(../assets_stormwater/esd_sw_back_to_phx.png) no-repeat right top;
}

/*------------------------------*/
#ft2 .nav.misc li.backtophx {
    top: 160px;
    right: -50px;
}
.no-js #ft2 .nav.misc li.backtophx {
    position: fixed;
    z-index: 1;
    top: auto;
    right: -148px;
    bottom: 80px;
}
.no-js #ft2 .nav.misc li.backtophx:hover {
    right: -51px;
}
#ft2 .nav.misc li.backtophx a {
    display: block;
    width: 191px;
    height: 42px;
    text-indent: -9999px;
    background: transparent url(../assets_stormwater/esd_sw_back_to_phx2.png) no-repeat right top;
}
/*-----------------------------*/

#ft3 .nav.misc li.backtophx {
    top: 206px;
    right: -50px;
}
.no-js #ft3 .nav.misc li.backtophx {
    position: fixed;
    z-index: 1;
    top: auto;
    right: -148px;
    bottom: 80px;
}
.no-js #ft3 .nav.misc li.backtophx:hover {
    right: -51px;
}
#ft3 .nav.misc li.backtophx a {
    display: block;
    width: 191px;
    height: 42px;
    text-indent: -9999px;
    background: transparent url(../assets_stormwater/esd_sw_back_to_phx3.png) no-repeat right top;
}
/*-----------------------------*/

#ft4 .nav.misc li.backtophx {
    top: 251px;
    right: -50px;
}
.no-js #ft4 .nav.misc li.backtophx {
    position: fixed;
    z-index: 1;
    top: auto;
    right: -148px;
    bottom: 80px;
}
.no-js #ft4 .nav.misc li.backtophx:hover {
    right: -51px;
}
#ft4 .nav.misc li.backtophx a {
    display: block;
    width: 191px;
    height: 42px;
    text-indent: -9999px;
    background: transparent url(../assets_stormwater/esd_sw_back_to_phx4.png) no-repeat right top;
}
/*-----------------------------*/

#ft5 .nav.misc li.backtophx {
    top: 297px;
    right: -50px;
}
.no-js #ft5 .nav.misc li.backtophx {
    position: fixed;
    z-index: 1;
    top: auto;
    right: -148px;
    bottom: 80px;
}
.no-js #ft5 .nav.misc li.backtophx:hover {
    right: -51px;
}
#ft5 .nav.misc li.backtophx a {
    display: block;
    width: 191px;
    height: 42px;
    text-indent: -9999px;
    background: transparent url(../assets_stormwater/esd_sw_back_to_phx5.png) no-repeat right top;
}
/*-----------------------------*/

#ft6 .nav.misc li.backtophx {
    top: 343px;
    right: -50px;
}
.no-js #ft6 .nav.misc li.backtophx {
    position: fixed;
    z-index: 1;
    top: auto;
    right: -148px;
    bottom: 80px;
}
.no-js #ft6 .nav.misc li.backtophx:hover {
    right: -51px;
}
#ft6 .nav.misc li.backtophx a {
    display: block;
    width: 191px;
    height: 42px;
    text-indent: -9999px;
    background: transparent url(../assets_stormwater/esd_sw_back_to_phx6.png) no-repeat right top;
}
/*-----------------------------*/
#ft7 .nav.misc li.backtophx {
    top: 389px;
    right: -50px;
}
.no-js #ft7 .nav.misc li.backtophx {
    position: fixed;
    z-index: 1;
    top: auto;
    right: -148px;
    bottom: 80px;
}
.no-js #ft7 .nav.misc li.backtophx:hover {
    right: -51px;
}
#ft7 .nav.misc li.backtophx a {
    display: block;
    width: 191px;
    height: 42px;
    text-indent: -9999px;
    background: transparent url(../assets_stormwater/esd_sw_back_to_phx7.png) no-repeat right top;
}
/*-----------------------------*/







/* @end Footer */

/* @group Info Window
   ------------------------------------------------------------------------- */
#info {
    position: absolute;
    top: 0;
    left: 258px;
    width: 441px;
    padding: 15px 19px 0;
    border: 1px solid #fff;
    border-top: none;
    background: url(../assets_stormwater/esd_sw_infobox_bg.png) no-repeat center top ;
}
.no-js #info {
    position: fixed;
    padding-top: 0;
}
#info > .header {
    font-family: museo-sans, Arial, sans-serif;
    font-weight: 500;
    font-size: 28px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: -1px;
    color: #033057;
}

html.oldie #info > .header {
    font-weight: bold;
    letter-spacing: -2px;
}
#info > .body {
    max-height: 400px;
    padding-top: 3px;
    border-top: 1px solid #023157;
    overflow: auto;
    font-size: 16px;
    line-height: 1.231em;
    color: #005295;
    font-weight: normal;
}
.ie7 #info > .body {
    padding-bottom: 15px;
}
#info > .body a, #info > .body a:visited {
    color: #005295;
}
#info > .body .infopoint {
    min-height: 50px;
    padding-left: 40px;
    background: url(../assets_stormwater/esd_sw_raindrop_big.png) no-repeat left top transparent;
}
#info > .body h3 {
    margin-bottom: -1em;
    font-size: 16px;
}
#info > .body p.calltoaction {
    font-weight: bold;
}
#info > .actions {
    padding-bottom: 10px;
    text-align: center;
}
#info > .actions a.button {
    display: inline-block;
    width: 301px;
    height: 49px;
    font-size: 28px;
    line-height: 47px;
    font-family: museo-sans, Arial, sans-serif;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    background: transparent url(../assets_stormwater/esd_sw_info_box_btn_bg.png) no-repeat center top;
}
html.oldie #info > .actions a.button {
    font-weight: bold;
}
#info > .actions a.button.close {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: auto;
    height: auto;
    color: #717171;
    background: transparent url(../assets_stormwater/esd_sw_x_gray.png) no-repeat right 2px;
    font: 12px/1.231em Arial, sans-serif;
}
#info > .actions a.button.close:hover {
    text-decoration: underline;
}
html.oldie #info > .actions a.button.close {
    font-weight: 500;
}
/* @end Info Window */

/* @group Stage
   ------------------------------------------------------------------------- */
#stage {
    position: relative;
    width: 100%;
    height: 612px;
}
#stage > .thing {
    position: absolute;
    background: transparent none no-repeat left top;
}
#stage .thing.stage.sky {
    top: 0;
    left: 0;
    width: 1000px;
    height: 397px;
    background-image: url(../assets_stormwater/esd_sw_stage_sky.png);
}
#stage .thing.stage.mountains {
    top: 187px;
    left: 0;
    width: 1000px;
    height: 305px;
    background-image: url(../assets_stormwater/esd_sw_stage_mountains.png);
}
#stage .thing.stage.mtn_streams {
    top: 231px;
    left: 358px;
    width: 322px;
    height: 185px;
    background-image: url(../assets_stormwater/esd_sw_stage_mtn_strm_cutout.png);
}
#stage .thing.stage.mtn_streams .water > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 322px;
    height: 185px;
    background: none no-repeat center top transparent;
}
#stage .thing.stage.mtn_streams .water > .base {
    background-image: url(../assets_stormwater/esd_sw_stage_mtn_stream.png);
}
#stage .thing.stage.mtn_streams .water > .shiny {
    background-image: url(../assets_stormwater/esd_sw_stage_mtn_strm_shine.png);
}
#stage .thing.stage.ground {
    bottom: -106px;
    left: 0;
    width: 1000px;
    height: 305px;
    background-image: url(../assets_stormwater/esd_sw_stage_ground_fill.png);
}
#stage .thing.stage.ground .animations, #stage .thing.stage.ground .animations .mask {
    position: relative;
    width: 100%;
    height: 100%;
}
#stage .thing.stage.ground .animations .mask {
    background: url(../assets_stormwater/esd_sw_stage_ground_mask.png) no-repeat left top transparent;
}
#stage .thing.stage.ground .animations .stream.big {
    position: absolute;
    right: 0px;
    bottom: 95px;
    width: 610px;
    height: 93px;
}
#stage .thing.stage.ground .animations .stream.big .horiz {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 591px;
    height: 42px;
    background: url(../assets_stormwater/esd_sw_stage_bigstream1.png) no-repeat left top transparent;
}
#stage .thing.stage.ground .animations .stream.big .vert {
    position: absolute;
    top: -27px;
    left: 2px;
    width: 250px;
    height: 100px;
    background: url(../assets_stormwater/esd_sw_stage_bigstream2.png) no-repeat left top transparent;
}
#stage .thing.stage.ground .animations .stream.big .waves {
    position: absolute;
    bottom: -9px;
    right: -10px;
    width: 718px;
    height: 110px;
    background: url(../assets_stormwater/esd_sw_stage_bigstream_waves.png) no-repeat left top transparent;
}
#stage .thing.stage.ground .animations .stream.small {
    position: absolute;
    left: 0;
    bottom: 149px;
    width: 488px;
    height: 31px;
}
#stage .thing.stage.ground .animations .stream.small .horiz {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 488px;
    height: 31px;
    background: url(../assets_stormwater/esd_sw_stage_smallstream.png) no-repeat left top transparent;
}
#stage .thing.stage.ground .animations .stream.small .waves {
    position: absolute;
    left: -96px;
    bottom: 6px;
    width: 438px;
    height: 44px;
    background: url(../assets_stormwater/esd_sw_stage_smallstream_waves.png) no-repeat left top transparent;
}
#stage .thing.stage.sky .lightning > * {
    display: none;
    position: absolute;
    background: none no-repeat left top transparent;
}
#stage .thing.stage.sky .lightning > .a {
    top: 73px;
    left: 672px;
    width: 187px;
    height: 387px;
    background-image: url(../assets_stormwater/esd_sw_stage_lightning_a.png);
}
#stage .thing.stage.sky .lightning > .b {
    top: 69px;
    left: 316px;
    width: 154px;
    height: 264px;
    background-image: url(../assets_stormwater/esd_sw_stage_lightning_b.png);
}
#stage .thing.stage.sky .lightning > .c {
    top: 191px;
    left: 23px;
    width: 91px;
    height: 161px;
    background-image: url(../assets_stormwater/esd_sw_stage_lightning_c.png);
}
/* @end Stage */

/* @group Areas & Info Points
   Info Points = Raindrops
   ------------------------------------------------------------------------- */
.area {
    position: absolute;
    top: 0;
    left: 0;
}
.no-js .area {
    position: static;
}
.area > h2, .area > .intro {
    display: none;
}
.no-js .area > h2, .no-js .area > .intro {
    display: block;
}
.area .infopoints {
    margin: 0;
    padding: 0;
}
.area .infopoints > li {
    display: block;
    position: absolute;
    width: 22px;
    height: 32px;
    background: url(../assets_stormwater/esd_sw_raindrop.png) no-repeat left top transparent;
}
.no-js .area .infopoints > li {
    position: static;
    width: auto;
    height: auto;
}
.area .infopoints > li:hover, .area .infopoints > li.active {
    cursor: pointer;
    background-position: -1000px top;
}
.no-js .area .infopoints > li:hover, .no-js .area .infopoints > li.active {
    cursor: default;
}
.area .infopoints > li > * {
    display: none;
}
.no-js .area .infopoints > li > * {
    display: block;
}
.no-js .area .infopoints > li h3 {
    padding-top: 9px;
    text-indent: 30px;
}
/* Sanitary Sewer & Storm Drain graphics */
#sanitarysewer, #stormdrain {
    position: absolute;
    top: 0;
    left: 0;
    width: 1000px;
    height: 106px;
    background: url(../assets_stormwater/esd_sw_sanitarysewer_bg.jpg) no-repeat left top transparent;
}
#stormdrain {
    height: 92px;
    background-image: url(../assets_stormwater/esd_sw_stormdrain_bg.jpg);
}
#sanitarysewer h4, #stormdrain h4 {
    position: absolute;
    top: 5px;
    left: 289px;
    margin: 0;
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
}
#stormdrain h4 {
    top: 8px;
    left: 451px;
}
#sanitarysewer a.button.close, #stormdrain a.button.close {
    position: absolute;
    top: 8px;
    left: 465px;
    width: auto;
    height: auto;
    color: #ebebeb;
    background-image: url(../assets_stormwater/esd_sw_x_lightgray.png);
}
#stormdrain a.button.close {
    top: 11px;
    left: 584px;
}
#sanitarysewer .label {
    display: block;
    position: absolute;
    bottom: 16px;
    right: 41px;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
}
#sanitarysewer .animations .flow.horiz, #stormdrain .animations .flow.horiz {
    position: absolute;
    bottom: 59px;
    width: 402px;
    height: 7px;
    background: url(../assets_stormwater/esd_sw_water_flow_hz.png) no-repeat -799px top transparent;
}
#sanitarysewer .animations .flow.horiz.long, #stormdrain .animations .flow.horiz.long {
    bottom: 22px;
    width: 779px;
    height: 5px;
    background: url(../assets_stormwater/esd_sw_water_flow_hz_long.png) no-repeat left top transparent;
}
#stormdrain .animations .flow.horiz.long {
    bottom: 14px;
    left: 0;
    width: 777px;
}
#sanitarysewer .animations .flow.vert, #stormdrain .animations .flow.vert {
    position: absolute;
    bottom: 23px;
    left: 239px;
    width: 10px;
    height: 10px;
    background: url(../assets_stormwater/esd_sw_water_flow_vert.png) no-repeat left top transparent;
}
#stormdrain .animations .flow.vert {
    height: 45px;
    bottom: 15px;
}
#sanitarysewer .animations .flow.vert.b, #stormdrain .animations .flow.vert.b {
    left: 622px;
}
#stormdrain .animations .flow.vert.a {
    left: 87px;
}
#stormdrain .animations .flow.vert.b {
    left: 345px;
}
#stormdrain .animations .flow.drain {
    position: absolute;
    bottom: 6px;
    right: 13px;
    width: 210px;
    height: 36px;
    overflow: hidden;
}
#stormdrain .animations .flow.drain .water {
    position: absolute;
    top: 0;
    left: 0;
    width: 210px;
    height: 34px;
    background: none no-repeat left top transparent;
}
#stormdrain .animations .flow.drain .water.a {
    background-image: url(../assets_stormwater/esd_sw_stormdrain_washwater1.png);
}
#stormdrain .animations .flow.drain .water.b {
    background-image: url(../assets_stormwater/esd_sw_stormdrain_washwater2.png);
}
#stormdrain .animations .flow.drain .water.c {
    background-image: url(../assets_stormwater/esd_sw_stormdrain_washwater3.png);
}
#stormdrain .animations .flow.drain .water.d {
    background-image: url(../assets_stormwater/esd_sw_stormdrain_washwater4.png);
}
#stormdrain .animations .flow.drain .wave {
    position: absolute;
    z-index: 999;
    background: none no-repeat left top transparent;
}
#stormdrain .animations .flow.drain .wave.a {
    top: 4px;
    left: 12px;
    width: 102px;
    height: 21px;
    background-image: url(../assets_stormwater/esd_sw_stormdrain_waves1.png);
}
#stormdrain .animations .flow.drain .wave.b {
    top: 21px;
    left: 70px;
    width: 140px;
    height: 13px;
    background-image: url(../assets_stormwater/esd_sw_stormdrain_waves2.png);
}
/* @end Info Points */


/* @group Overview Area
   ------------------------------------------------------------------------- */

#stage .thing.overview .highlight, #stage .thing.overview .bldgs {
    position: absolute;
    top: -9999px;
    left: 0;
    background: none no-repeat left top transparent;
    cursor: pointer;
}
#stage .thing.overview .bldgs {
    display: block;
    top: auto;
    bottom: 0;
}
.no-touch #stage .thing.overview:hover .highlight, .no-touch #stage .thing.overview.hover .highlight {
    top: 0;
}
.ie7 #stage .thing.overview:hover .highlight {
    top: -9999px;
}
.ie7 #stage .thing.overview.hover .highlight {
    top: 0;
}
#stage .thing.bizbldgs {
    top: 127px;
    left: 0;
    width: 1000px;
    height: 323px;
}
#stage .thing.overview.bizbldgs .highlight {
    width: 999px;
    height: 322px;
    background-image: url(../assets_stormwater/esd_sw_overview_bizbldgs_hl.png);
}
#stage .thing.overview.bizbldgs .bldgs {
    width: 1000px;
    height: 319px;
    background-image: url(../assets_stormwater/esd_sw_overview_bizbldgs.png);
}
#stage .thing.divider {
    top: 447px;
    left: 0;
    width: 1000px;
    height: 64px;
    background-image: url(../assets_stormwater/esd_sw_business_divider.png);
}
#stage .thing.overview.resid_house {
    top: 437px;
    left: 164px;
    width: 394px;
    height: 108px;
}
#stage .thing.overview.resid_house .highlight {
    width: 393px;
    height: 93px;
    background-image: url(../assets_stormwater/esd_sw_overview_resid_house_hl.png);
}
.no-touch #stage .thing.overview.resid_house:hover .highlight, .no-touch #stage .thing.overview.resid_house.hover .highlight {
    top: 2px;
}
.ie7 #stage .thing.overview.resid_house:hover .highlight {
    top: -9999px;
}
.ie7 #stage .thing.overview.resid_house.hover .highlight {
    top: 2px;
}
#stage .thing.overview.resid_house .bldgs {
    width: 394px;
    height: 104px;
    background-image: url(../assets_stormwater/esd_sw_overview_resid_house.png);
}
#stage .thing.const_home {
    top: 403px;
    left: 743px;
    width: 257px;
    height: 192px;
}
#stage .thing.overview.const_home .highlight {
    width: 256px;
    height: 165px;
    background-image: url(../assets_stormwater/esd_sw_overview_const_home_hl.png);
}
.no-touch #stage .thing.overview.const_home:hover .highlight, .no-touch #stage .thing.overview.const_home.hover .highlight {
    top: -3px;
}
.ie7 #stage .thing.overview.const_home:hover .highlight {
    top: -9999px;
}
.ie7 #stage .thing.overview.const_home.hover .highlight {
    top: -3px;
}
#stage .thing.overview.const_home .bldgs {
    width: 257px;
    height: 192px;
    background-image: url(../assets_stormwater/esd_sw_overview_const_home.png);
}
#stage .thing.cactus1 {
    top: 472px;
    left: 15px;
    width: 28px;
    height: 119px;
    background-image: url(../assets_stormwater/esd_sw_cactus1.png);
}
#stage .thing.cactus2 {
    top: 408px;
    left: 47px;
    width: 27px;
    height: 114px;
    background-image: url(../assets_stormwater/esd_sw_cactus2.png);
}
#stage .thing.paloverde-large {
    top: 396px;
    left: 875px;
    width: 148px;
    height: 161px;
    background-image: url(../assets_stormwater/esd_sw_paloverde_large.png);
}
#stage .thing.paloverde-med {
    top: 394px;
    left: 68px;
    width: 120px;
    height: 123px;
    background-image: url(../assets_stormwater/esd_sw_paloverde_med.png);
}
#stage .thing.paloverde-small {
    top: 447px;
    left: 564px;
    width: 71px;
    height: 73px;
    background-image: url(../assets_stormwater/esd_sw_paloverde_small.png);
}
#stage .thing.runner {
    top: 496px;
    left: 243px;
    width: 31px;
    height: 63px;
    background-image: url(../assets_stormwater/esd_sw_runner.png);
}
#stage .thing.dog_walker {
    top: 524px;
    left: 297px;
    width: 37px;
    height: 66px;
    background-image: url(../assets_stormwater/esd_sw_dog_walker.png);
}
#stage .thing.retention_area {
    top: 543px;
    left: 613px;
    width: 191px;
    height: 46px;
    background-image: url(../assets_stormwater/esd_sw_retention_area.png);
}
#stage .thing.roofguy {
    top: 406px;
    left: 853px;
    width: 30px;
    height: 38px;
    background-image: url(../assets_stormwater/esd_sw_roofguy.png);
}
/* @end Overview Area */

/* @group Business Area
   ------------------------------------------------------------------------- */

/* Buildings */
#stage .thing.business.bizbldgs {
    top: 131px;
    height: 319px;
    background-position: left top;
    background-image: url(../assets_stormwater/esd_sw_overview_bizbldgs.png);
}
#stage .thing.business.storage {
    top: 434px;
    left: 50px;
    width: 190px;
    height: 84px;
    background-image: url(../assets_stormwater/esd_sw_biz_storage.png);
}
#stage .thing.business.bizbldgs2 {
    top: 253px;
    left: 233px;
    width: 566px;
    height: 290px;
    background-image: url(../assets_stormwater/esd_sw_biz_bldgs2.png);
}
#stage .thing.business.retention_basin {
    top: 565px;
    left: 0;
    width: 170px;
    height: 47px;
    background-image: url(../assets_stormwater/esd_sw_biz_retention_basin.png);
}
#stage .thing.business.concrete_pad {
    top: 529px;
    left: 579px;
    width: 422px;
    height: 63px;
    background-image: url(../assets_stormwater/esd_sw_biz_concrete_pad.png);
}
#stage .thing.business.fueling_stn {
    top: 495px;
    left: 653px;
    width: 169px;
    height: 79px;
    background-image: url(../assets_stormwater/esd_sw_fueling_stn.png);
}
#stage .thing.business.oil {
    top: 555px;
    left: 856px;
    width: 42px;
    height: 10px;
    background-image: url(../assets_stormwater/esd_sw_oil.png);
}
/* Figures */
#stage .thing.business.truck_trucker {
    top: 447px;
    left: 825px;
    width: 322px;
    height: 120px;
    background-image: url(../assets_stormwater/esd_sw_biz_truck_trucker.png);
}
#stage .thing.business.sweeper {
    top: 458px;
    left: 487px;
    width: 55px;
    height: 59px;
    background-image: url(../assets_stormwater/esd_sw_sweeper.png);
}
#stage .thing.business.inspector_inspected {
    top: 478px;
    left: 388px;
    width: 55px;
    height: 61px;
    background-image: url(../assets_stormwater/esd_sw_biz_inspector_inspected.png);
}
#stage .thing.business.spillguy {
    top: 565px;
    left: 258px;
    width: 151px;
    height: 43px;
    background-image: url(../assets_stormwater/esd_sw_spillguy.png);
}
#stage .thing.business.bucketman {
    top: 468px;
    left: 133px;
    width: 34px;
    height: 63px;
    background-image: url(../assets_stormwater/esd_sw_buckketman.png);
}
#stage .thing.broomguy {
    top: 509px;
    left: 33px;
    width: 32px;
    height: 69px;
    background-image: url(../assets_stormwater/esd_sw_broomguy.png);
}
/* Plants */
#stage .thing.business.cactus2 {
    top: 398px;
    left: 13px;
}
#stage .thing.business.paloverde-medlg {
    top: 438px;
    left: -62px;
    width: 134px;
    height: 137px;
    background-image: url(../assets_stormwater/esd_sw_paloverde_medlg.png);
}
#stage .thing.business.paloverde-small {
    top: 449px;
    left: 248px;
}
#stage .thing.business.paloverde-small.n2 {
    top: 446px;
    left: 578px;
}
#stage .thing.business.shrub-small {
    top: 500px;
    left: 628px;
    width: 35px;
    height: 15px;
    background-image: url(../assets_stormwater/esd_sw_shrub_small.png);
}
#stage .thing.business.shrub-med {
    top: 491px;
    left: 187px;
    width: 54px;
    height: 24px;
    background-image: url(../assets_stormwater/esd_sw_shrub_med.png);
}
#stage .thing.business.shrub-med.n2 {
    top: 503px;
    left: 551px;
}
#stage .thing.business.shrub-med.n3 {
    top: 564px;
    left: 138px;
}
#stage .thing.business.shrub-large {
    top: 504px;
    left: 290px;
    width: 72px;
    height: 32px;
    background-image: url(../assets_stormwater/esd_sw_shrub_large.png);
}
#stage .thing.business.shrub-large.n2 {
    top: 582px;
    left: 132px;
}
/* Info Points */
#business .infopoints .good_housekeeping {
    top: 444px;
    left: 514px;
}
#business .infopoints .spill_management {
    top: 561px;
    left: 350px;
}
#business .infopoints .chemical_storage {
    top: 413px;
    left: 95px;
}
#business .infopoints .outside_storage {
    top: 399px;
    left: 185px;
}
#business .infopoints .runoff_management {
    top: 552px;
    left: 74px;
}
#business .infopoints .administrative_controls {
    top: 440px;
    left: 392px;
}
#business .infopoints .equipment_maintenance {
    top: 473px;
    left: 846px;
}
#business .infopoints .fueling {
    top: 468px;
    left: 739px;
}
#business .infopoints .storm_drain {
    top: 510px;
    left: 129px;
}
#business .infopoints .sanitary_sewer {
    top: 524px;
    left: 202px;
}
/* @end Business Area */

/* @group Residential Area
   ------------------------------------------------------------------------- */

#stage .thing.residential.bg_houses {
    top: 383px;
    left: 0;
    width: 746px;
    height: 89px;
    background-image: url(../assets_stormwater/esd_sw_resid_bg_houses.png);
}
#stage .thing.residential.pool_house {
    top: 441px;
    left: 165px;
    width: 402px;
    height: 109px;
    background-image: url(../assets_stormwater/esd_sw_overview_resid_house.png);
}
#stage .thing.residential.big_house {
    top: 415px;
    left: 547px;
    width: 220px;
    height: 112px;
    background-image: url(../assets_stormwater/esd_sw_resid_bighouse.png);
}
#stage .thing.residential.other_houses {
    top: 416px;
    left: 758px;
    width: 242px;
    height: 100px;
    background-image: url(../assets_stormwater/esd_sw_resid_otherhouses.png);
}
#stage .thing.residential.pool {
    top: 495px;
    left: 69px;
    width: 107px;
    height: 36px;
    background-image: url(../assets_stormwater/esd_sw_resid_pool.png);
}
#stage .thing.residential.beachball {
    top: 501px;
    left: 99px;
    width: 27px;
    height: 16px;
    background-image: url(../assets_stormwater/esd_sw_resid_beachball.png);
}
#stage .thing.residential.pool_fence {
    top: 488px;
    left: 73px;
    width: 111px;
    height: 39px;
    background-image: url(../assets_stormwater/esd_sw_resid_poolfence.png);
}
#stage .thing.residential.bins {
    top: 560px;
    left: 75px;
    width: 70px;
    height: 55px;
    background-image: url(../assets_stormwater/esd_sw_resid_bins.png);
}
#stage .thing.residential.bins {
    top: 559px;
    left: 76px;
    width: 70px;
    height: 55px;
    background-image: url(../assets_stormwater/esd_sw_resid_bins.png);
}
#stage .thing.residential.driveway {
    top: 540px;
    left: 641px;
    width: 361px;
    height: 55px;
    background-image: url(../assets_stormwater/esd_sw_resid_driveway.png);
}
#stage .thing.residential.chemicals {
    top: 517px;
    left: 798px;
    width: 54px;
    height: 32px;
    background-image: url(../assets_stormwater/esd_sw_resid_chemicals.png);
}
#stage .thing.residential.cactus1 {
    top: 476px;
}
#stage .thing.residential.cactus2 {
    top: 412px;
    left: 43px;
}
#stage .thing.residential.cactus3 {
    top: 432px;
    left: 973px;
    width: 21px;
    height: 119px;
    background-image: url(../assets_stormwater/esd_sw_cactus3.png);
}
#stage .thing.residential.paloverde-med2 {
    top: 433px;
    left: 114px;
    width: 99px;
    height: 102px;
    background-image: url(../assets_stormwater/esd_sw_paloverde_med2.png);
}
#stage .thing.residential.paloverde-medlg2 {
    top: 416px;
    left: 860px;
    width: 115px;
    height: 130px;
    background-image: url(../assets_stormwater/esd_sw_paloverde_medlg2.png);
}
#stage .thing.residential.shrub-lg {
    top: 552px;
    left: 222px;
    width: 52px;
    height: 65px;
    background-image: url(../assets_stormwater/esd_sw_resid_shrub_lg.png);
}
#stage .thing.residential.shrub-med {
    top: 576px;
    left: 403px;
    width: 41px;
    height: 34px;
    background-image: url(../assets_stormwater/esd_sw_resid_shrub_med.png);
}
#stage .thing.residential.shrubs_rocks1 {
    top: 553px;
    left: 545px;
    width: 150px;
    height: 34px;
    background-image: url(../assets_stormwater/esd_sw_resid_srubs_rocks1.png);
}
#stage .thing.residential.shrubs_rocks2 {
    top: 555px;
    left: 731px;
    width: 84px;
    height: 27px;
    background-image: url(../assets_stormwater/esd_sw_resid_srubs_rocks2.png);
}
#stage .thing.residential.shrubs {
    top: 523px;
    left: 882px;
    width: 70px;
    height: 24px;
    background-image: url(../assets_stormwater/esd_sw_resid_shrubs.png);
}
#stage .thing.residential.dog_walker {
    top: 534px;
    left: 300px;
}
#stage .thing.residential.runner {
    top: 496px;
    left: 382px;
}
#stage .thing.residential.car_washer {
    top: 482px;
    left: 540px;
    width: 156px;
    height: 79px;
    background-image: url(../assets_stormwater/esd_sw_resid_carwasher.png);
}
#stage .thing.residential.weed_sprayer {
    top: 521px;
    left: 711px;
    width: 57px;
    height: 67px;
    background-image: url(../assets_stormwater/esd_sw_resid_weedsprayer.png);
}
#stage .thing.residential.oil2 {
    top: 564px;
    left: 880px;
    width: 80px;
    height: 18px;
    background-image: url(../assets_stormwater/esd_sw_resid_oil.png);
}
#stage .thing.residential.broomguy {
    top: 513px;
    left: 873px;
    width: 31px;
    height: 65px;
    background-image: url(../assets_stormwater/esd_sw_resid_broomguy.png);
}
#stage .thing.residential.dumpingguy {
    top: 519px;
    left: 929px;
    width: 45px;
    height: 58px;
    background-image: url(../assets_stormwater/esd_sw_resid_dumpingguy.png);
}
#residential .infopoints .pet_waste {
    top: 531px;
    left: 325px;
}
#residential .infopoints .pools {
    top: 471px;
    left: 71px;
}
#residential .infopoints .lawn_care {
    top: 522px;
    left: 755px;
}
#residential .infopoints .household_chemicals {
    top: 485px;
    left: 811px;
}
#residential .infopoints .automobile_maintenance {
    top: 483px;
    left: 541px;
}
#residential .infopoints .storm_drain {
    top: 513px;
    left: 130px;
}
#residential .infopoints .sanitary_sewer {
    top: 524px;
    left: 206px;
}
#residential .infopoints .spill_management {
    top: 540px;
    left: 906px;
}
#residential .infopoints .trash_and_recycling {
    top: 554px;
    left: 49px;
}
#residential .infopoints .vehicle_washing {
    top: 455px;
    left: 643px;
}
/* @end Residential Area */

/* @group Construction Area
   ------------------------------------------------------------------------- */

#stage .thing.construction.bg_bldgs {
    top: 131px;
    left: 52px;
    width: 756px;
    height: 376px;
    background-image: url(../assets_stormwater/esd_sw_const_bgbldgs.png);
}
#stage .thing.construction.portable {
    top: 444px;
    left: 187px;
    width: 217px;
    height: 103px;
    background-image: url(../assets_stormwater/esd_sw_const_portable.png);
}
#stage .thing.construction.chem_storage {
    top: 484px;
    left: 96px;
    width: 70px;
    height: 33px;
    background-image: url(../assets_stormwater/esd_sw_const_chemstorage.png);
}
#stage .thing.construction.backfence {
    top: 485px;
    left: 376px;
    width: 163px;
    height: 29px;
    background-image: url(../assets_stormwater/esd_sw_const_backfence.png);
}
#stage .thing.construction.gravel {
    top: 499px;
    left: 388px;
    width: 219px;
    height: 42px;
    background-image: url(../assets_stormwater/esd_sw_const_gravel.png);
}
#stage .thing.construction.fence {
    top: 503px;
    left: -11px;
    width: 520px;
    height: 42px;
    background-image: url(../assets_stormwater/esd_sw_const_fence.png);
}
#stage .thing.construction.washout {
    top: 548px;
    left: -87px;
    width: 239px;
    height: 70px;
    background-image: url(../assets_stormwater/esd_sw_const_washout.png);
}
#stage .thing.construction.const_home {
    top: 402px;
    left: 743px;
    background-image: url(../assets_stormwater/esd_sw_overview_const_home.png);
}
#stage .thing.construction.retention_area {
    top: 544px;
    left: 606px;
}
#stage .thing.construction.swales-left {
    top: 539px;
    left: 126px;
    width: 81px;
    height: 17px;
    background-image: url(../assets_stormwater/esd_sw_const_swalesleft.png);
}
#stage .thing.construction.swales-right {
    top: 545px;
    left: 447px;
    width: 82px;
    height: 18px;
    background-image: url(../assets_stormwater/esd_sw_const_swalesright.png);
}
#stage .thing.construction.greenstuff {
    top: 446px;
    left: 515px;
    width: 255px;
    height: 81px;
    background-image: url(../assets_stormwater/esd_sw_const_greenstuff.png);
}
#stage .thing.construction.shovelguy {
    top: 531px;
    left: 23px;
    width: 58px;
    height: 65px;
    background-image: url(../assets_stormwater/esd_sw_const_shovelguy.png);
}
#stage .thing.construction.bucketman {
    top: 467px;
    left: 80px;
    width: 25px;
    height: 44px;
    background-image: url(../assets_stormwater/esd_sw_const_bucketman.png);
}
#stage .thing.construction.planners {
    top: 484px;
    left: 438px;
    width: 63px;
    height: 45px;
    background-image: url(../assets_stormwater/esd_sw_const_planners.png);
}
#stage .thing.construction.roofguy {
    left: 857px;
}
#stage .thing.construction.cementtruck {
    top: 482px;
    left: 124px;
    width: 573px;
    height: 146px;
    background-image: url(../assets_stormwater/esd_sw_const_cementtruck.png);
}
#construction .infopoints .entrance_exit {
    top: 498px;
    left: 511px;
}
#construction .infopoints .sedimentation_control {
    top: 479px;
    left: 17px;
}
#construction .infopoints .erosion_control {
    top: 502px;
    left: 580px;
}
#construction .infopoints .chemical_storage {
    top: 450px;
    left: 120px;
}
#construction .infopoints .concrete_washout {
    top: 564px;
    left: 86px;
}
#construction .infopoints .administrative_controls {
    top: 450px;
    left: 450px;
}
#construction .infopoints .post_const_controls {
    top: 512px;
    left: 722px;
}
#construction .infopoints .low_impact_development {
    top: 467px;
    left: 675px;
}
#construction .infopoints .storm_drain {
    top: 511px;
    left: 149px;
}
#construction .infopoints .sanitary_sewer {
    top: 521px;
    left: 208px;
}
/* @end Construction Area */


/* @group Non-semantic helper classes
   Please define your styles before this section.
   ========================================================================= */
/* For image replacement */
.ir {
    display: block;
    text-indent: -999em;
    overflow: hidden;
    background-repeat: no-repeat;
    text-align: left;
    direction: ltr;
}
.ir br {
    display: none;
}
/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden {
    display: none;
    visibility: hidden;
}
/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
/* Extends the .visuallyhidden class to allow the element to be focusable when 
   navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}
/* Hide visually and from screenreaders, but maintain layout */
.invisible {
    visibility: hidden;
}
/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
   /* zoom: 1;*/
}

/* @end Non-semantic helper classes */