@media (max-width: 767px) {
            .top-navigation .navbar-full-title {
                display: none;
            }

            .navbar-inverse p.navbar-text {
                white-space: nowrap;
            }

            .top-navigation .navbar.navbar-static-top .navbar-header {
                float: left;
                width: 100%;
            }
        }

        @media (min-width: 768px) {

            .top-navigation .navbar-mobile-title {
                display: none;
            }

            .top-navigation .navbar.navbar-static-top .navbar-header {
                float: left;
            }
        }

        .header-back.winter {
            height: 300px;
            width: 100%;
            background: url('../images/banner_winter.jpg') 50% 0 no-repeat;
            background-size: cover;
            position: absolute;
        }

        .header-back.construction {
            height: 300px;
            width: 100%;
            background: url('../images/banner_construction.jpg') 50% 0 no-repeat;
            background-size: cover;
            position: absolute;
        }
        .header-back.truck {
            height: 300px;
            width: 100%;
            background: url('../images/banner_1500.jpg') 50% 0 no-repeat;
            background-size: cover;
            position: absolute;
        }
        .header-back.summer {
            height: 300px;
            width: 100%;
            background: url('../images/banner_summer.jpg') 50% 0 no-repeat;
            background-size: cover;
            position: absolute;
        }
        .header-back.eighthundred {
            height: 300px;
            width: 100%;
            background: url('../images/banner_0800.jpg') 50% 0 no-repeat;
            background-size: cover;
            position: absolute;
        }
        .header-back.ninehundred {
            height: 300px;
            width: 100%;
            background: url('../images/banner_0900.jpg') 50% 0 no-repeat;
            background-size: cover;
            position: absolute;
        }
        .header-back.tenhundred {
            height: 300px;
            width: 100%;
            background: url('../images/banner_1000.jpg') 50% 0 no-repeat;
            background-size: cover;
            position: absolute;
        }
        .header-back.elevenhundred {
            height: 300px;
            width: 100%;
            background: url('../images/banner_1100.jpg') 50% 0 no-repeat;
            background-size: cover;
            position: absolute;
        }
        .header-back.twelvehundred {
            height: 300px;
            width: 100%;
            background: url('../images/banner_1200.jpg') 50% 0 no-repeat;
            background-size: cover;
            position: absolute;
        }
        .header-back.thirteenhundred {
            height: 300px;
            width: 100%;
            background: url('../images/banner_1300.jpg') 50% 0 no-repeat;
            background-size: cover;
            position: absolute;
        }
        .header-back.fourteenhundred {
            height: 300px;
            width: 100%;
            background: url('../images/banner_1400.jpg') 50% 0 no-repeat;
            background-size: cover;
            position: absolute;
        }
        .header-back.fifteenhundred {
            height: 300px;
            width: 100%;
            background: url('../images/banner_1500.jpg') 50% 0 no-repeat;
            background-size: cover;
            position: absolute;
        }
        .header-back.sixteenhundred {
            height: 300px;
            width: 100%;
            background: url('../images/banner_1600.jpg') 50% 0 no-repeat;
            background-size: cover;
            position: absolute;
        }
        .header-back.seventeenhundred {
            height: 300px;
            width: 100%;
            background: url('../images/banner_1700.jpg') 50% 0 no-repeat;
            background-size: cover;
            position: absolute;
        }
        .header-back.eighteenhundred {
            height: 300px;
            width: 100%;
            background: url('../images/banner_1800.jpg') 50% 0 no-repeat;
            background-size: cover;
            position: absolute;
        }
        .header-back.nineteenteenhundred {
            height: 300px;
            width: 100%;
            background: url('../images/banner_1900.jpg') 50% 0 no-repeat;
            background-size: cover;
            position: absolute;
        }
        .header-back.twentyhundred {
            height: 300px;
            width: 100%;
            background: url('../images/banner_2000.jpg') 50% 0 no-repeat;
            background-size: cover;
            position: absolute;
        }
        .header-back.night {
            height: 300px;
            width: 100%;
            background: url('../images/banner_night.jpg') 50% 0 no-repeat;
            background-size: cover;
            position: absolute;
        }
        .winter {
            display: inherit;
        }
        .construction {
            display: inherit;
        }
        .osow{
            display:inherit;
        }

        .navbar-inverse {
            background: #222;
            background: -webkit-linear-gradient(#3c3c3c, #222); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(#3c3c3c, #222); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(#3c3c3c, #222); /* For Firefox 3.6 to 15 */
            background-image: linear-gradient(#3c3c3c, #222); /* Standard syntax */
            background-repeat: repeat-x;
        }

        .navbar-toggle {
            background: none;
        }

        .navbar-inverse p.navbar-text {
            color: White;
            font-size: 12px;
            margin-left: 0;
        }

        #navbar .idot-brand,
        #navbar .idot-brand a,
        #bannerbar .idot-brand, 
        #bannerbar .idot-brand a {
            background: none;
            color: white;
        }

        #navbar .nav.navbar-nav > .open > a,
        #navbar .nav.navbar-nav > .open > a:hover,
        #navbar .nav.navbar-nav > .open > a:focus {
            background-color: #222;
        }

        #navbar .nav.navbar-nav > li.active > a, 
        #navbar .nav.navbar-nav > li.active > a:hover,
        #navbar .nav.navbar-nav > li.active > a:focus {
            background-color: #222;
            color: white;
        }

        #navbar .nav.navbar-nav > li > a {
            padding-right: 5px;
        }

        #navbar .nav.navbar-nav > li > a:hover,
        #navbar .nav.navbar-nav > li > a:focus {
            color: white;
            background-color: transparent;
        }

        #navbar .nav.navbar-nav .dropdown-menu > li > a:hover,
        #navbar .nav.navbar-nav .dropdown-menu > li > a:focus {
          color: inherit;
          background-color: #D5D5D5;
          text-decoration: none;
        }

        #navbar .idot-navbar-social {
            margin: 7px 15px 7px 0;
            padding: 0;
            list-style-type: none;
        }


        .red-text {
            color: #990000;
        }

        .black-text {
            color: #000000;
        }

        .idot-clear {
            color: transparent;
        }

        .idot-partlycovered {
            color: #73B2FF;

        }

        .idot-mostlycovered {
            color: #F789D8;
        }

        .idot-covered {
            color: #C500FF;
        }

        .idot-alert {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .idot-card {
            box-shadow: 0 4px 8px 0 #990000;
            box-shadow: 0 4px 8px 0 rgba(153, 0, 0, .6);
        }

        .idot-card:hover {
            box-shadow: 0 8px 16px 0 #000000;
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.6);
        }

        .idot-card-red {
            box-shadow: 0 4px 8px 0 #000000;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
            background: #990000;
            background: rgba(153, 0, 0, 1);
            color: #ffffff;
        }

                .idot-card-orange {
            box-shadow: 0 4px 8px 0 #000000;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
            background: #ff6600;
            background: rgba(255, 102, 0, 1);
            color: #ffffff;
        }

        .idot-card-blue {
            box-shadow: 0 4px 8px 0 #000000;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
            background: #1c84c6;
            background: rgba(28, 132, 198, 1);
            color: #ffffff;
        }

        .idot-feed {
            margin: 10px 0 10px 0;
            overflow-y: scroll;
            max-height: 850px;
        }

        .idot-footer {
            position: relative;
        }
        
        .idot-footer-text {
            font-size: 12px;
            padding-top: 6px;
            padding-bottom: 6px;
            
        }

        .idot-footer a:hover,
        .idot-footer a:focus {
            color: #990000;
        }

         /*using !important to override css in esri.css loaded elsewhere in the template*/
        .esriMobileNavigationBar {
            top: 116px !important;
        }

        /*using !important to override css in esri.css loaded elsewhere in the template*/
        .esriMobileInfoView {
            top: 158px !important;
        }

        /*using !important to override css in esri.css loaded elsewhere in the template*/
        .esriPopupMobile > .sizer > .titlePane .footer {
            display: none !important;
        }