/* SITE.CSS content start */

html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
    height: 100vh;
}

body {
    background-color: #fff;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    height: 100%;
    overflow:hidden;
}

.container-fluid {
    height: 100%;
}

.main-content-container {
    width: 100%; 
    height: 100%; 
    left:0px; 
    top:0px;
    border: solid 2px yellow;
}

.main-content-row {
    width: 100%; 
    height: 100%; 
    left:0px; 
    right:0px;
    padding-bottom: 70px;
    border: dashed 2px yellow; 
}

.foreground1Absolute {
    z-index: 1;
}

.foreground1 {
    z-index: 1;
}

.fullsize {
    width: 100%; 
    height: 100%; 
    left:0px; 
    top:0px;
}

.fullHeight {
    height: 100%;
}

/*desktop menu panels JUNE 2017 Update*/

.desktopContainer {
    margin-top:0px;
}

.menuPanel {
    height:100%;
    min-height:100%;
}

.infoPanel {
    display: none;
    overflow: auto;
    background-color: antiquewhite;
    height: 90%;
    width: 60%;
    border-radius: 25px;
    left: 10%; 
    top: 0px;
    bottom: 0px;
    position: absolute;
    line-height: 1.4em;
    font-size: small;
    z-index: 2;
    padding: 5px;
    /*float: left;*/
}

.infoPanelRow {
    position:fixed;
    height:90%;
    width:100%;
    display:none;
}

.advisoryPanel {
    padding: 20px;
    display: none;
}

.closurePanel {
    padding: 20px;
    display: none;
}

.tjRiverPanel {
    padding: 20px;
    display: none;
}

.backgroundImg {
    width: 100%; 
    height: 100%; 
    left:0px; 
    top:0px;
    position: absolute; 
    z-index: 0;
}

.menuLogo {
    width: 90%; 
    height: 90%; 
    left:0px; 
    top:0px;
}

.checkIn {
    padding: 20px;
    width: 90%; 
    height: 90%; 
    left:0px; 
    top:0px;
}

.info-screen {
    padding-top: 10px;
    padding-bottom: 10px;
}

.tjRiverButton {
    padding: 20px;
    float: right;
    width: 65%; 
    height: 65%; 
    left:0px; 
    top:0px;
    min-height: 75px;
}

.advisoriesButton {
    padding: 20px;
    width: 80%; 
    height: 80%; 
    left:0px; 
    top:0px;
    min-height: 80px;
}

.closuresButton {
    padding: 20px;
    width: 80%;
    height: 80%;
    left: 0px;
    top: 0px;
    min-height: 85px;
}

.info-item {
    position:relative;
    display:inline-block;
}
.advisories-counter {
    position: absolute;
    right:25%;
    top:5px;
    background:red;
    text-align: center;
    border-radius: 25px;
    color:white;
    padding: 4px 10px;
    font-size: small;
    font-weight: bold;
}

.closures-counter {
    position: absolute;
    right:30%;
    top:5px;
    background:red;
    text-align: center;
    border-radius: 25px;
    color:white;
    padding: 4px 10px;
    font-size: small;
    font-weight: bold;
}

/*Navigation*/

.scrollable-menu {
    height: auto;
    max-height: 400px;
    overflow-x: hidden;
}

/*End Navigation*/

/*mobile */

.bingDirectionsRow {
    background-color: #1a4e89;
    overflow: auto;
    line-height: 1.4em;
    color: white;
}

.bingDrivingDirections {
    background-color: white;
    line-height: 1.4em;
    color: black;
    margin-top: 5px;
    margin-bottom: 5px;
}

.bingDirectionInput {
    display: inline;
}

.navMenuItem {
    color: white !important;
    font-size: small;
}

.hamburger {
    height:80%;
    width:80%;
    padding-top: 10px;
    left:0px; 
    top:0px;
    right:0px;
    bottom:0px;
    max-height:60px;
    max-width:60px;
}

.navLogo {
    width: 100%; 
    height: 100%; 
    left:0px; 
    top:0px;
}

#mobile-indicator {
    display: none;
}

.mobileMapPartialView {
    position:absolute;
    display:none;
}

.mobileMap {
    width:100%;
    height: 95%; 
    bottom:0px;
    position:absolute; 
    right:0px;
    top:30px;
    display: block;
}

.mobileHeader {
    background-color:transparent;
}

.mobileMenu {
    background-color: #1a4e89;
}

.mobile-scrollable-menu {
    height: auto;
    max-height: 300px;
    overflow-x: hidden;
}

.mobileMapControls {
    position:fixed;
    width: 100%;
    z-index:1;
    right:0px;
}

.mobileMapRow {
    position:fixed;
    height:90%;
    width:100%;
}

.mobileMapInfoContent {
    height:100%;
    min-height:100%;
    display: none;
    overflow: auto;
    color: white;
    font-size: small;
    position:relative;
    padding: 5px;
    background-color: #1a4e89;
    right: 0px;
    width:100%;
    line-height: 1.4em;
}

#mobileMapInfoContent a:link {color: white !important; text-decoration: underline;}, #mobileMapInfoContent a:active, #mobileMapInfoContent a:visited {color: white;}

.mobileMapSplashScreen {
    width: 100%; 
    height: 100%; 
    left:0px; 
    top:0px;
    position: absolute; 
    z-index: 1;
}

.mobileSplashBackgroundImg {
    width: 100%; 
    height: 100%; 
    left:0px; 
    top:0px;
    position: absolute; 
}

.mobileCheckInCol {
    height:100%;
    top: 100px;
}

.mobileCheckIn {
    width: 99%; 
    left:0px; 
    top:15%;
    position: absolute;
}

/*Footer JUNE 2017*/

.footer-background {
    width: 100%; 
    position: absolute; 
    z-index: 0;
    top:0px;
    left:0px;
}

.footer-container {
    width: 100%; 
    color: white;
}

.footer-county-seal {
    height: 50px;
    width: auto;
    padding: 5px;
    top: 0px;
    left: 0px;
    bottom: 0px;
}

.footer-img {
    height: 30px;
    width: auto;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    top: 0px;
    left: 0px;
}

.footer-item {
    font-size: medium;
    padding-right: 5px;
    display: inline;
    float: left;
}

.footer-item-bold {
    font-size: medium;
    font-weight: bold;
    padding-right: 5px;
    display: inline;
    position: relative;
    top: 5px;
}

.footer-link {
    font-size: small;
    font-weight: bold;
    color: white;
    outline: none;
    padding: 0px;
    top: 5px;
    position: relative;
}

.footer-bottom-link {
    font-size: small;
    font-weight: bold;
    color: white;
    outline: none;
    padding: 0px;
}

.footer-link .footer-link a:active, .footer-link a:visited {color: white;}

/*end footer*/

/*Begin Header*/
.header-background {
    width: 100%; 
    position: absolute; 
    z-index: 1;
    top:0px;
    left:0px;
    height: 70px;
}
/*End Header*/

/*map panel*/

.mapButton {
    color: #46beed !important;
    font-size: medium !important;
}

.mapButtonBackground {
    background-color:white;
    width: 100%; 
    height: 100%; 
    left:0px; 
    top:0px;
    position: absolute; 
    z-index: 0;
}

.mapButtonRow {
    border: solid orange 1px; 
    width:100%;
    height:10%; 
    position:fixed;
}

.mapControls {
    position:fixed;
    width: 40%;
    z-index:1;
}

.mapDropDown {
    border-top-color: #46beed;
}

.mapPanel {
    height:90%;
    min-height:90%;
    bottom:0px;
}

#mapInfoContainer {
    height:80%;
    min-height:80%;
    display: none;
    overflow: auto;
    font-size: small;
    position:fixed;
    padding: 5px;
    background-color: #003b5d;
    color: white;
    border-radius: 2%;
    top: 80px;
    right: 20px;
    width: 40%;
}

#mapInfoContent {
    display: none;
    overflow: auto;
    position:absolute;
    padding: 10px;
    top: 20px;
}

#mapInfoContent a:link {color: white !important; text-decoration: underline;} #mapInfoContent a:active, #mapInfoContent a:visited {color: white;}

.close {
    color: white; opacity: 1;
}

.returnToMap {
    display: none;
    color: white;
}

.returnToMap a:hover {color: white !important;}

header, footer, hgroup,
nav, section {
    display: block;
}

mark {
    background-color: #a6dbed;
    padding-left: 5px;
    padding-right: 5px;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

h1, h2, h3,
h4, h5, h6 {
    margin-bottom: 0;
    padding-bottom: 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

h5 a:link, h5 a:visited, h5 a:active {
    padding: 0;
    text-decoration: none;
}

/* main layout
----------------------------------------------------------*/
.content-wrapper {
    margin: 0 auto;
    max-width: 960px;
}

#body {
    background-color: #efeeef;
    clear: both;
    padding-bottom: 35px;
}

.main-content {
    background: url("../Images/accent.png") no-repeat;
    padding-left: 10px;
    padding-top: 30px;
}

.featured + .main-content {
    background: url("../Images/heroAccent.png") no-repeat;
}

header .content-wrapper {
    padding-top: 20px; 
}

footer {
    clear: both;
    background-color: #e2e2e2;
    font-size: .8em;
    height: 100px;
}

/* site title
----------------------------------------------------------*/
.site-title {
    color: #c8c8c8;
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
    font-size: 2.3em;
    margin: 0;
}

.site-title a, .site-title a:hover, .site-title a:active {
    background: none;
    color: #c8c8c8;
    outline: none;
    text-decoration: none;
}

/* login
----------------------------------------------------------*/
#login {
    display: block;
    font-size: .85em;
    margin: 0 0 10px;
    text-align: right;
}

#login a {
    background-color: #d3dce0;
    margin-left: 10px;
    margin-right: 3px;
    padding: 2px 3px;
    text-decoration: none;
}

#login a.username {
    background: none;
    margin: 0;
    padding: 0;
    text-decoration: underline;
}

#login ul {
    margin: 0;
}

#login li {
    display: inline;
    list-style: none;
}

/* menu
----------------------------------------------------------*/
ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: right;
}

ul#menu li {
    display: inline;
    list-style: none;
    padding-left: 15px;
}

ul#menu li a {
    background: none;
    color: #999;
    text-decoration: none;
}

ul#menu li a:hover {
    color: #333;
    text-decoration: none;
}


/* page elements
----------------------------------------------------------*/
/* featured */
.featured {
    background-color: #fff;
}

.featured .content-wrapper {
    background-color: #7ac0da;
    background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
    background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
    background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
    background-image: linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
    color: #3e5667;
    padding: 20px 40px 30px 40px;
}

.featured hgroup.title h1, .featured hgroup.title h2 {
    color: #fff;
}

.featured p {
    font-size: 1.1em;
}

/* page titles */
hgroup.title {
    margin-bottom: 10px;
}

hgroup.title h1, hgroup.title h2 {
    display: inline;
}

hgroup.title h2 {
    font-weight: normal;
    margin-left: 3px;
}

/* features */
section.feature {
    width: 300px;
    float: left;
    padding: 10px;
}

/* ordered list */
ol.round {
    list-style-type: none;
    padding-left: 0;
}

ol.round li {
    margin: 25px 0;
    padding-left: 45px;
}

ol.round li.zero {
    background: url("../Images/orderedList0.png") no-repeat;
}

ol.round li.one {
    background: url("../Images/orderedList1.png") no-repeat;
}

ol.round li.two {
    background: url("../Images/orderedList2.png") no-repeat;
}

ol.round li.three {
    background: url("../Images/orderedList3.png") no-repeat;
}

ol.round li.four {
    background: url("../Images/orderedList4.png") no-repeat;
}

ol.round li.five {
    background: url("../Images/orderedList5.png") no-repeat;
}

ol.round li.six {
    background: url("../Images/orderedList6.png") no-repeat;
}

ol.round li.seven {
    background: url("../Images/orderedList7.png") no-repeat;
}

ol.round li.eight {
    background: url("../Images/orderedList8.png") no-repeat;
}

ol.round li.nine {
    background: url("../Images/orderedList9.png") no-repeat;
}

/* content */
article {
    float: left;
    width: 70%;
}

aside {
    float: right;
    width: 25%;
}

aside ul {
    list-style: none;
    padding: 0;
}

aside ul li {
    background: url("../Images/bullet.png") no-repeat 0 50%;
    padding: 2px 0 2px 20px;
}

.label {
    font-weight: 700;
}

/* login page */
#loginForm {
    border-right: solid 2px #c8c8c8;
    float: left;
    width: 55%;
}

#loginForm .validation-error {
    display: block;
    margin-left: 15px;
}

#loginForm .validation-summary-errors ul {
    margin: 0;
    padding: 0;
}

#loginForm .validation-summary-errors li {
    display: inline;
    list-style: none;
    margin: 0;
}

#loginForm input {
    width: 250px;
}

#loginForm input[type="checkbox"],
#loginForm input[type="submit"],
#loginForm input[type="button"],
#loginForm button {
    width: auto;
}

#socialLoginForm {
    margin-left: 40px;
    float: left;
    width: 40%;
}

#socialLoginForm h2 {
    margin-bottom:  5px;
}

#socialLoginList button {
    margin-bottom: 12px;
}

#logoutForm {
    display: inline;
}

/* contact */
.contact h3 {
    font-size: 1.2em;
}

.contact p {
    margin: 5px 0 0 10px;
}

.contact iframe {
    border: 1px solid #333;
    margin: 5px 0 0 10px;
}

/* forms */
fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

fieldset legend {
    display: none;
}

fieldset ol {
    padding: 0;
    list-style: none;
}

fieldset ol li {
    padding-bottom: 5px;
}

label {
    display: block;
    font-size: 1.2em;
    font-weight: 600;
}

label.checkbox {
    display: inline;
}

input, textarea {
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #333;
    font-size: 1.2em;
    margin: 5px 0 6px 0;
    padding: 5px;
    width: 300px;
}

textarea {
    font-family: inherit;
    width: 500px;
}

input:focus, textarea:focus {
    border: 1px solid #7ac0da;
}

input[type="checkbox"] {
    background: transparent;
    border: inherit;
    width: auto;
}

input[type="submit"],
input[type="button"],
button {
    background-color: #d3dce0;
    border: 1px solid #787878;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 600;
    padding: 7px;
    margin-right: 8px;
    width: auto;
}

td input[type="submit"],
td input[type="button"],
td button {
    font-size: 1em;
    padding: 4px;
    margin-right: 4px;
}

/* info and errors */
.message-info {
    border: 1px solid;
    clear: both;
    padding: 10px 20px;
}

.message-error {
    clear: both;
    color: #e80c4d;
    font-size: 1.1em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.message-success {
    color: #7ac0da;
    font-size: 1.3em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.error {
    color: #e80c4d;
}

/* styles for validation helpers */
.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #e80c4d;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}


/* tables
----------------------------------------------------------*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.75em;
    border: 0 none;
}

th {
    font-size: 1.2em;
    text-align: left;
    border: none 0px;
    padding-left: 0;
}

th a {
    display: block;
    position: relative;
}

th a:link, th a:visited, th a:active, th a:hover {
    color: #333;
    font-weight: 600;
    text-decoration: none;
    padding: 0;
}

th a:hover {
    color: #000;
}

th.asc a, th.desc a {
    margin-right: .75em;
}

th.asc a:after, th.desc a:after {
    display: block;
    position: absolute;
    right: 0em;
    top: 0;
    font-size: 0.75em;
}

th.asc a:after {
    content: '▲';
}

th.desc a:after {
    content: '▼';
}

td {
    padding: 0.25em 2em 0.25em 0em;
    border: 0 none;
}

tr.pager td {
    padding: 0 0.25em 0 0;
}

/********************
*   Mobile Styles   *
********************/
@media only screen and (max-width: 850px) {

    /* header
    ----------------------------------------------------------*/
    header .float-left,
    header .float-right {
        float: none;
    }

    /* logo */
    header .site-title {
        margin: 10px;
        text-align: center;
    }

    /* login */
    #login {
        font-size: .85em;
        margin: 0 0 12px;
        text-align: center;
    }

    #login ul {
        margin: 5px 0;
        padding: 0;
    }

    #login li {
        display: inline;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #login a {
        background: none;
        color: #999;
        font-weight: 600;
        margin: 2px;
        padding: 0;
    }

    #login a:hover {
        color: #333;
    }

    /* menu */
    nav {
        margin-bottom: 5px;
    }

    ul#menu {
        margin: 0;
        padding: 0;
        text-align: center;
    }

    ul#menu li {
        margin: 0;
        padding: 0;
    }

    /* main layout
    ----------------------------------------------------------*/
    .main-content,
    .featured + .main-content {
        background-position: 10px 0;
    }

    .content-wrapper {
        padding-right: 10px;
        padding-left: 10px;
    }

    .featured .content-wrapper {
        padding: 10px;
    }

    /* page content */
    article, aside {
        float: none;
        width: 100%;
    }

    /* ordered list */
    ol.round {
        list-style-type: none;
        padding-left: 0;
    }

    ol.round li {
        padding-left: 10px;
        margin: 25px 0;
    }

    ol.round li.zero,
    ol.round li.one,
    ol.round li.two,
    ol.round li.three,
    ol.round li.four,
    ol.round li.five,
    ol.round li.six,
    ol.round li.seven,
    ol.round li.eight,
    ol.round li.nine {
        background: none;
    }

     /* features */
     section.feature {
        float: none;
        padding: 10px;
        width: auto;
     }

    section.feature img {
        color: #999;
        content: attr(alt);
        font-size: 1.5em;
        font-weight: 600;
    }

    /* forms */
    input {
        width: 90%;
    }

    /* login page */
    #loginForm {
        border-right: none;
        float: none;
        width: auto;
    }

    #loginForm .validation-error {
        display: block;
        margin-left: 15px;
    }

    #socialLoginForm {
        margin-left: 0;
        float: none;
        width: auto;
    }

    /* footer
    ----------------------------------------------------------*/
    footer .float-left,
    footer .float-right {
        float: none;
    }

    footer {
        text-align: center;
        height: auto;
        padding: 10px 0;
    }

        footer p {
            margin: 0;
        }
}

/* SITE.CSS content end */

/* CUSTOM.CSS content start */
@font-face {
    font-family: 'titillium_webregular';
    src: url('titilliumweb-regular-webfont.eot');
    src: url('titilliumweb-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('titilliumweb-regular-webfont.woff') format('woff'),
         url('titilliumweb-regular-webfont.ttf') format('truetype'),
         url('titilliumweb-regular-webfont.svg#titillium_webregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'titillium_websemibold';
    src: url('titilliumweb-semibold-webfont.eot');
    src: url('titilliumweb-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('titilliumweb-semibold-webfont.woff') format('woff'),
         url('titilliumweb-semibold-webfont.ttf') format('truetype'),
         url('titilliumweb-semibold-webfont.svg#titillium_websemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'titillium_webbold';
    src: url('titilliumweb-bold-webfont.eot');
    src: url('titilliumweb-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('titilliumweb-bold-webfont.woff') format('woff'),
         url('titilliumweb-bold-webfont.ttf') format('truetype'),
         url('titilliumweb-bold-webfont.svg#titillium_webbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
html {background-color: white;}
a {text-decoration: none;}
a:hover {background-color: transparent;}
blockquote {border-left-width: 0;}
#header {margin: 15px 0 10px 0;}
#header a#iBingMap {padding: 0;}
div.content-wrapper {margin-top: -10px; padding-top: 0;}
#hotline {
    color: goldenrod;
}
#iMenu {margin-top: -25px;}
.hide-max {display: none;}
	.btn {text-align: center; padding: 5px; background-color: transparent; border-color: transparent;}
	.btn-info {text-align: center; font-size: 1.2em;}  
a.btn-primary:link {color: white;}
.btn-group {width: 25%; padding:0px;}
.btn-group > .btn {font-size: 14px; font-family: 'titillium_websemibold';}
.btn-group > .btn + .dropdown-toggle {border-top-right-radius: 4px; border-bottom-right-radius: 4px;}
#tj-green, #tj-red {color: white; text-shadow: 0 0 0;}
#home, #reports, #contact, #overview, #localinks, #returnToMapLink {color: white;}
#socials {margin: 0 0 5px 0;}
#socials a img {width: 30px; margin-bottom: 10px;}
classyoutube {height: 32px; width: 32px;}
ul.nav-tabs {border-bottom-color: #ccc;}
ul.nav-tabs li {width: 50%;}
ul.nav-tabs .active a {color: black; border-top-color: #ccc; border-left-color: #ccc; border-right-color: #ccc;}
ul.nav-tabs li a {padding: 10px 10%; color: #007fbf; font-weight: bold; font-family: 'titillium_websemibold'; font-size: 1.1em;} 
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {background-color: #f9f9f9;}
#clo-adv {margin-top: 30px; margin-left: 0;}
#clo-adv * {line-height: 1.2em;}
#clo-adv-area {margin-top: -20px; height: 190px; border: 1px #ccc solid; border-top: none; padding: 10px 10px 10px 3px; font-size: 0.8em; overflow: scroll; overflow-x: hidden; background-color: #f9f9f9;}
#clo-adv-area ul li {margin-bottom: 1.5em;}
#clo-adv-area ul li a {color: #0051a0; padding-left: 0; text-decoration: underline;}
#iMap {
    position: fixed !important; 
    height: 77%; 
    width: 40%;
    margin-top: 5px; 
    border: 1px solid #bbd0ed;
    right: 20px;
    top: 100px;
}
#iMap * a {padding: 0;} /* for map area, override 3px link padding from Bootstrap */
a.MapPushpinBase:hover {background-color: transparent; cursor: pointer !important;}
#iContent a:hover {text-decoration: underline;}
#iContent {
    color: white;
    font-size: small;
}

#map-area {float: right;}
#map-area a.btn {color: white; background-color: #0051a0 !important; border-color: #0051a0 !important;}
#map-key {border: 1px #ccc solid; padding: 3px 3px 3px 20px;}
#cosd-links {font-size: 0.7em; text-align: right; padding-right: 15px;}
#website-version {margin-right: 30px;}
#cosd-links a:link, #cosd-links a:active, #cosd-links a:visited {text-decoration: underline; color: #0051a0;}
#cosd-links a:hover {background-color: transparent; color: #007fbf;}
.make-black {color: black;}
.make-red {color: red;}
#nav-main {display: block; margin-bottom: 0;}	
#navbar-bottom {display: block; margin-bottom: 0;}
.mainBackgroundDiv {
    display: block;
    margin-bottom: 0;
    width: 100%; 
    height: 100%; 
    min-height:100%;
    left:0px; 
    top:0px;
    position: absolute; 
    z-index: 0;
}
#nav-mobile {display: none;}
#iContent * h2 {font-family: 'titillium_websemibold';}
#content-area blockquote p {font-size: 0.9em;}
.alert-error {position: absolute; top: 0; left: 0; color: black; background-color: #ffff99; border-color: black; padding: 5px 10px 5px 10px; width: 245px;}
.infobox_content {width: 245px; line-height: 1.2em; text-align: left; padding:0px;}
.infobox_content p {font-size: small; line-height: 1.2em;}
.infobox_content a {font-size: small; line-height: 1.5em;}
.infobox_content a:link, .infobox_content a:active, .infobox_content a:visited {position: relative; text-decoration: underline; color: blue;}
.infobox_content #iViewMap {margin-left: 7px;}
.infobox_close {background-color: #999; color: white; font-size: 0.7em;}
.infobox_title {font-size: small; font-weight: bold; padding-right: 10px;}

#advisory-popup {
    padding: 10px 15px 0px 0px;
}
#description-popup {
    padding: 10px 15px 0px 0px;
}
#description-popup a, #advisory-popup a {padding-left: 0; font-size: 0.93em;}
.dropdown-menu li a {padding: 1px 10px; font-family: titillium_webregular, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #0088cc;}
#iContent * h2 {font-size: 1.6em; line-height: 1.9em;}

/* Directions page */
#iiMap {position: relative; width: 100%; height: 500px;}
#map-directions {margin-top: -30px;}
#map-directions input.btn {font-size: 0.8em; padding: 4px; background-color: #0051a0 !important; border-color: #0051a0 !important;}

 @media (min-width: 768px) and (max-width: 980px) {
	.btn {font-size: 1em;}
	ul.nav-tabs li a {font-size: 1em; padding: 10px 1% 10px 7%;}
 	#socials a img {width: 22px; margin-bottom: 5px;}	
	#map-area {margin-top: 7px;} 	
	#iMap {height: 75%; margin-top: 5px;} 	
	#clo-adv-area {height: 393px;}
    .btn-group {width: 25%; padding:0px;}
	.footer-item-bold {font-size:small;}
    .footer-link {font-size: small;}
    .footer-img {
        padding: 5px;
    }
    .tjRiverButton {
        width: 77%; 
        height: 77%; 
        min-height: 40%;
    }

    .faqButton {
        width: 100%;
        height: 100%;
        min-height: 80%;
    }

    .advisoriesButton {
        width: 100%; 
        height: 100%; 
        min-height: 80%;
    }

    .closuresButton {
        width: 100%;
        height: 100%;
        min-height: 69%;
    }

    .advisories-counter {
        right:15%;
    }

    .closures-counter {
        right:15%;
    }
 }

@media (max-width: 767px) {	
    #mobile-indicator {
        display: block;
    }
	body {padding: 0; margin: 0; line-height: 1em; font-size: 0.9em; border-top: 0 solid white; background-color: #1a4e89;}		
	header .content-wrapper {padding-top: 0;}
	#contact, #overview, #localinks, #reports, #hotline, #tj-max, #clo-adv, #clo-adv-area, #socials, #tj-red, #tj-green {display: none;}
	.main-content {padding-left: 0; background-color: transparent;}
	.btn {text-align: center; padding: 0px;}
	.btn-info {text-align: center; font-size: 1.2em;}  
	.show-min {display: block;}
	#map-area {height: width: 100%;}
	#map-area .btn-group > .btn {font-size: 12px; margin: 0;}
	.infobox_content {width: 245px;}
	#socials {text-align: center; width: 100%; margin: 5px 0;}
	#socials a img {width: 40px; margin: 7px;}
	#localinks {margin-bottom: 0;}
	.num-temp {display: inline;}
	.btn-block {display: inline-block;}
	a#closures {width: 48%; float: left; color: white;}
	#closures span {color: red;}
	a#advisories {width: 48%; float: right; color: white;}
	#advisories span {color: green;}
	a#contact {width: 48%; float: left;}
	a#overview {width: 48%; float: right;}
	#socials-min {margin: 0px 0 10px 0;}
	#socials-min a img {width: 30px; margin-bottom: 10px;}	
	.MicrosoftNav {display: none;}		
	#content-area p, #content-area li, table.content * {font-size: 0.9em;}
	#iContent * h2 {font-size: 1.07em; margin: 0;}
	#iContent p, #iContent li {font-size: 0.75em; line-height: 1.3em;}
	#closures, #advisories {display: none;}
	#closures-min * a, #advisory-min * a {padding-left: 0;}
	#iMap {height: 100%; position:fixed; right:0px;top:125px;}
    .btn-group {width: 25%; padding:0px;}
    #iContent {
        color: white;
        overflow: hidden;
    }
	
	/* Mobile Nav */
	.alert-error {font-size: 0.8em; width: 245px;}
	#nav-panel {width: 100%; margin-top: -10px; text-align: center;}
	#nav-panel a {width: 90%;}
	#nav-mobile {display: block; margin-bottom: 0;}	
    #nav-mobile .dropdown-toggle {color: #46beed !important;}
	#nav-mobile  .dropdown-menu {margin-left: 15px;}
    #nav-main {display: none;}
    #navbar-bottom {display: none;}
    .backgroundImg {display: none;}
    .main-content-container {
        padding-top: 0px;
        position: fixed;
    }
    .main-content-row {
        position: fixed;
        width: 100%; 
        height: 100%;
        left:0px; 
        top:0px;
        right:0px;
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 0px;
        padding-top: 0px;
        min-height: 100%;
    }
    .mapPanel {
        height:100%;
        min-height:100%;
    }

    #mapInfoContent {
        height:88%;
        min-height:88%;
        display: none;
        overflow: auto;
        color: white;
        font-size: small;
        right:0px;
        position:absolute;
    }

    .navbar.navbar-default {
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .navbar.navbar-default .navbar-collapse {
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .navbar-toggle {
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    #map-area {text-align: center;}
    .dropdown-menu {text-align: left; width: 290px;}
    .dropdown-menu, .dropdown-menu li, .dropdown-menu li a {max-width: 300px;}
    .dropdown-menu li {font-size: 11px;}
    .dropdown-menu li a {line-height: 1.7em; padding: 3px 10px;}	
    #NavigationN {left: 0;}
    #NavigationC {left: -75px;}
    #NavigationS {left: -158px;}
    #NavigationCity {left: -235px;}
    #tj-green-min {background-color: green;}
    #tj-red-min {background-color: red;}
    #tj-red-min .make-red {color: white;}
    body {padding-bottom:0px;}
}
 
 @media (max-width: 980px) {
	 
 }
 
 @media (min-width: 980px) {
	 
 }

@media (min-width: 1200px) {
	 
 }

@media (max-width: 540px) {
	#site-title span {font-size: 0.6em;} 
}

@media (max-width: 479px) {
	#site-title span {font-size: 0.5em;} 
}
 
@media (max-width: 320px) {			
	#map-area {padding: 0;}
	#iContent li {line-height: 1.4em;}
	#hotline-number-min {display: block;}	
	header, .content-wrapper, #header {width: 100%; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0;}
	.btn-group > .btn {font-size: 12px;}
	.alert-error {padding: 2px 2px 2px 4px; width: 150px;}	
	#website-version {display: block; margin-right: 0;}
    .infobox_content {width: 150px;}

	/* Directions page */
	#map-directions {padding: 5px;}
	#map-directions .span12 {font-size: 0.8em; font-weight: bold; text-align: center;}
	#iStart, #iEnd {display: block; width: 95%; font-size: 1em; color: #0051a0;}
	#iiMap {position: relative; width: 100%; height: 200px;}
	#output {font-size: 0.7em; line-height: 1em;}	
	.MicrosoftMap .dd_itinerary li {padding: 0 !important;}
}
/* CUSTOM.CSS content end */