﻿/* Move down content because we have a fixed navbar that is 50px tall */
/*Sticky Footer Code Start*/
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
*{
    margin:0;
}
.btn, .btn-large, .btn-flat{
    text-transform: none;
}
a:hover, a:focus {
    text-decoration: none;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #191919;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #191919;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #191919;
}
:-moz-placeholder { /* Firefox 18- */
  color: #191919;
}

html, body {height: 100%;}

.disclaimer {
    background: #00beef none repeat scroll 0 0;
    width: 100%;
}
.disclaimer h3 {
    color: #fff;
    font-size: 25px;
    margin: 0;
    padding: 20px 0;
}
.disclaimer h4 {
    color: #fff;
    font-size: 18px;
    font-weight:600;
    margin: -6px;
    padding: 20px 0;
}

.hide-pollutants{
    display:none;
}
.hidden{
    display:none;
}
.chart-loader{
    height: 100px;
    display: inline-block;
    width: 50%;
    margin-left: 25%;
    margin-top: 20%;
}
.header-title{
    font-family: nimbus-sans-condensed,sans-serif;
    text-transform: uppercase;
    font-size: 5vh;
    padding-left: 15px;
    font-weight: 900;
    cursor: pointer;
    height: 100%;
    top: 0px;
    line-height: 5vh;
    color: rgb(133,182,5);
    position: relative;
    z-index: 995;
}
.nav-tabs{
    border-bottom-style: solid;
    border-bottom-width: 4px;
    border-bottom-color: rgb(133, 182, 5);
}
.nav-tabs li
{
    top:-1px;
}
.nav-tabs > li.active > a,.nav-tabs > li.active > a:hover{
   border: 0px solid #dddddd;
}
.nav-tabs li a{
    background: white;
    font-size: 16px;
    font-weight: 400;
    color: #5c4d41;
    text-transform: uppercase;
}
.nav-tabs li.active a{
    background: rgb(133, 182, 5);
    font-size: 16px;
    color: white;
    text-transform: uppercase;
}
.nav-tabs > li > a{
    border:0px solid transparent;
}
.nav-tabs li.active a:hover,.nav-tabs li.active a:focus{
    background: rgb(133, 182, 5);
    color:white;
}
.side-nav{
    background:rgb(35,35,35);
    overflow:hidden;
}

.side-nav-breadcrumb{
    color: rgb(83,83,83);
    font-weight: 700;
    float: right;
    line-height: 30px;
    text-align:center;
    width:100%;
    padding-bottom:5px;
}
.side-nav-noresults{
    margin: 0 auto;
    color: rgb(83,83,83);
    font-weight: 700;
    position: relative;
    text-align: center;
}
.side-nav .divider {
    margin: 0 0 0 0;
}
.side-nav-search-results{
    overflow: auto;
    height: calc(100% - 180px);
}
.pollutant-list{
    border-color: rgb(133, 182, 5);
    border-left-style: solid;
    padding-top: 5px;
    padding-bottom: 5px;
}
.pollutant-list li{
    margin-left:5px;
    margin-top:5px;
    margin-bottom:5px;
}
.pollutant-list li.Not-Active span.fa{
    display:none;
}
.pollutant-list li span.pollutant-item-text{
    display: inline-block;
    text-align: left;
    font-family: "nimbus-sans";
    font-size: 16px;
    font-weight: 400;
    word-wrap: normal;
    padding-bottom: 5px;
    color: #5c4d41;
    padding-left: 10px;
}
.pollutant-list li.Active span.fa{
    font-size: 30px;
    left: 0px;
    line-height: 15px;
    position: absolute;
    color: rgb(133, 182, 5);
    background: white;
}
.pollutant-list li.Active span.pollutant-item-text {
    position: relative;
    top: -6px;
    font-weight:600;
    padding-left:20px;
}

#custom-search-form {
    margin:0;
    margin-top: 5px;
    padding: 0;
}
.divider{
    height: 0.5px;
    background-color:rgb(83,83,83);
}
.side-nav a{
    color:#eaeaea;
    text-transform:uppercase;
}
a.side-nav-back{
    float: left;
    padding-left: 10px;
    color:rgb(133,182,5);
}
a.side-nav-back:hover{
    font-style:normal;
}
.panel-tabs > .panel-heading{
    color: white;
}
.side-nav-back .fa{
    font-size: 15px;
    padding-right: 10px;
    position: relative;
    top: 1px;
}
.side-nav .input-append{
    height: 30px;
    overflow: hidden;
}
.side-nav .search .fa-search{
    position: relative;
    top: -38px;
    left: 100px;
    font-size: 15px;
    transition: 0.2s ease all;
}

.side-nav .search{
    padding: 15px 0px 15px 0px;
    height:70px;
}

.btn-view-map, .btn-view-map:active,.btn-view-map:focus{
    display: block;
    margin: 0 auto;
    text-transform: uppercase;
    background: transparent;
    border-color: rgb(162,209,40);
    border-width: 2px;
    width: 160px;
    height: 45px;
    color: white;
    outline: none;
}
.btn-view-map:hover{
    color: rgb(83,83,83);
    background-color: rgb(162,209,40);
    border-color: rgb(162,209,40);
}

.search-query:focus + button {
    z-index: 3;   
}
input[type="text"].search-query{
    width:260px;
    background:rgb(83,83,83);
    text-align: center;
    border-radius: 15px;
    font-size:15px;
    color:#eaeaea;
    display: block;
    margin: 0 auto;
    border-bottom: none;
}
input[type=text]:focus:not([readonly]).search-query:focus{
    width: 280px;
    border-bottom: none;
    box-shadow: none;
}
input[type=text]:focus:not([readonly]).search-query:focus ~ .fa-search{
    left:20px;
} 
body {
    padding-top: 50px;
    font-family: "nimbus-sans";
}
.wrapper{
    min-height:100%;
}
form{
    overflow:auto;
    padding-bottom:180px;
}
footer{
    position: relative;
    margin-top: -180px;
    height: 180px;
    clear: both;
}
/*Sticky Footer Code End*/
.body-content{
    max-width:100%;
}
.body-content > div{
    max-width:1170px;
    margin:auto;
}
.body-content .jumbotron.banner{
    max-width:100%;

}
.body-content > .full-row{
    max-width:100%;
    margin:0;
}
.row {
    margin-right: -15px;
    margin-left: -15px;
    max-width: 1170px;
    margin: auto;
}

.btn-rect-md {
    width: 50%;
    max-width:130px;
    height: 40px;
    position: relative;
    display: block;
    margin: 0 auto;
    text-align: center;
    line-height: 18px;
    background: transparent;
    border-style: solid;
    border-width: 2px;
    color: rgb(58,133,4);
    border-color: rgb(58,133,4);
}
.btn-rect-md:hover{
    color:white;
    background:rgb(58,133,4);
    border-color: rgb(58,133,4);
}
.jumbotron.banner{
    line-height: 0.8;
    background: url(/Images/banner.jpg);
    height: 500px;
    position: relative;
    background-size: cover;
    text-align:center;
    font-family: "nimbus-sans-condensed";
    font-size: 90px;
    font-weight: 900;
    text-transform: uppercase;
    color:white;
    border-radius: 0px;
}
.jumbotron.banner .description{
    font-size: 30px;
    font-weight: 400;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.55);
    border-top-style: solid;
    width: 100%;
    height: 50px;
}
a:hover{
    color:rgb(172, 235, 8);
}
.navbar-fixed-top{
    z-index:997;
}
.navbar-inverse .navbar-toggle{
    border-style:none;
}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus{
    background:rgb(133,182,5);
}
.navbar-inverse {
    background-color: rgb(58,133,4);
    border-color: rgb(58,133,4);
    font-family: "nimbus-sans-condensed",sans-serif;
    font-style: normal;
    font-weight: 900;
}
.navbar-brand{
    font-size: 36px;
    float: left;
    padding: 15px 15px;
    line-height: 20px;
}
.welcome-banner{

}
.navbar-description{
        font-size: 16px;
    font-weight: 400;
    margin-left: -20px;
    margin-bottom: -21px;
    padding-top: 22px;
    padding-bottom: 0px;
    
}
.navbar-description span{
    color: rgb(220,202,0);
}
.highlight{
    color:rgb(220,202,0);
}
.highlight-background{
    background:rgb(220,202,0);
}
.navbar-inverse .navbar-brand,.navbar-inverse .navbar-nav > li > a{
    color:white;
}
.time-series-image-container{
    cursor: pointer;
    width: 45.5%;
    display: inline-block;
    margin-left: 30px;
    border-style: solid;
    border-color: rgba(37, 78, 7, 0.18);
    border-radius: 10px;
    border-width: 1px;
    padding: 1px;
    box-shadow: 9px 11px 25px -17px #163003;
    margin-bottom: 10px;
    margin-top: 5px;
    position:relative;
}
.time-series-image-container .overlay
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
}
.time-series-image-container:hover .overlay{
    opacity: 1;
}
.time-series-image-container .overlay .overlay-background{
    cursor:auto;
    width: 100%;
    position: absolute;
    height: 100%;
    background: rgba(0, 0, 0, 0.61);
}

.time-series-image-container .fa-download, .time-series-image-container .fa-external-link{
    cursor:pointer;
    position: relative;
    top: 43%;
    left: 37%;
    font-size: 25px;
    color: white;
    vertical-align: middle;
    border-style: solid;
    border-radius: 5px;
    border-color: rgba(228, 240, 226, 0.46);
    padding: 5px;
    height: 40px;
    background-color: #3f8c18;
    width: 40px;
    text-align: center;
}
.time-series-image-container .fa-external-link{
        left: 45%;
    padding-top: 7px;
    padding-left: 6px;
}
.seperator{
    height:3px;
}

.form-group label, .form-group select{
    font-family: "nimbus-sans";
    font-size: 16px;
    font-weight: 300;
    width:200px;
    color: #5c4d41;
}

.control-container{
    padding-top:7px;
}
/*
    Ajax File Upload Container CSS
*/
.ajax__maincontent_fileupload
{
    font-family: "nimbus-sans" !important;
}
.ajax-fileupload-container{

}
.ajax__fileupload{
    border: rgba(93, 76, 66, 0.32) 1px solid;
    border-radius: 5px;
    overflow: auto;
    padding: 4px;
    height: 100%;
}
.ajax__fileupload_dropzone{
    background: rgb(244,243,241);
    border-style: none !important;
    margin-bottom: 5px;
    text-align: center;
    width: 100%;
    height: 60px;
    visibility: visible;
    text-align: center;
    padding-top: 118px;
    font-family: "nimbus-sans";
    font-size: 20px;
    color: rgb(127, 126, 126);
    height: 280px !important;
}
.ajax__fileupload_fileItemInfo{

}
.ajax__fileupload_fileItemInfo{
    height:25px!important;
}
.ajax__fileupload_footer{
    height:25px !important;
}
.ajax__fileupload_progressBar{
    background-color:#428bca!important;
    border-radius:5px;
    color:white;
    text-align:center;
    margin-top:2px;
}
.ajax__fileupload_selectFileContainer {
    display: inline-block;
    height: 30px!important;
    line-height: 24px;
    overflow: hidden;
    position: relative;
    width: 90px!important;
}
.ajax__fileupload_selectFileButton{
    color: #fff;
    background-color: #5bc0de !important;
    border-color: #46b8da !important;
    color:white!important;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 11px !important;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    width:90px !important;
    height:25px !important;
    margin-top: 5px;
    margin-bottom: 5px;
    float:left;
}
.ajax__fileupload_uploadbutton{
    color: #fff;
    background-color: #3071a9 !important;
    border-color: #285e8e !important;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 11px !important;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    width:75px !important;
    height:25px !important;
    margin-top: 5px;
    margin-bottom: 5px;
    float:left;
}
.removeButton,.ajax_fileupload_cancelbutton{
    color: #ffffff;
    background-color: #d9534f !important;
    border-color: #d43f3a !important;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 11px !important;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    width:75px !important;
    height:25px !important;
}
.ajax_fileupload_cancelbutton{
    float:left !important;
    width:70px !important;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding: 0;
    border-radius:0px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
    
}

input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea
{
    font-size:1.5em;
}

.source .title{
    text-align:left;
    font-family: "nimbus-sans";
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 5px;
    color: #5c4d41;
    padding-top:20px;
}
.source .liTitle{
    font-size: 15px;
    letter-spacing: 0px;
    line-height: 1.5em;
    font-weight:600;
}
.source li{
    margin-left: 20px;
    margin-bottom: 10px;
}
.footer-overview{

}
.footer-overview .title{
    text-align:center;
    font-family: "nimbus-sans";
    font-size: 16px;
    font-weight: 700;
    padding-bottom: 5px;
    color: #5c4d41;
}
.footer-icon{
    height: 55px;
    position: relative;
    left: -24px;
    top: -18px;
}
.footer-overview .description{
    min-height:75px;
    text-align:center;
    color: rgb(147,138,118);
    padding-bottom:15px;
}
.footer-overview .overview-icon{
    height: 40px;
    position: absolute;
    top: 0px;
    left: 5px;
}

.btn-rect-md .icon-container{
    opacity:0;
    width: 100%;
    height: 100%;
    position: absolute;
    left: -1px;
    top: -1px;
}
.btn-rect-md .icon-container:hover{
    opacity:100;
}
.btn-rect-md path{
    fill:white;
}
.air-nav .overview-icon{
    left:15px;
    display:inherit;
}
.water-nav .overview-icon{
    left: 7px;
    height: 43px;
    top: -3px;
    display: inherit;
}
.climate-nav .overview-icon{
    left: 1px;
    height: 40px;
    top: 0px;
    display: inherit;
}
.land-nav .overview-icon{
    left: 3px;
    height: 40px;
    top: 0px;
    display: inherit;
}

footer{
    background: rgb(93,76,66);
    color:white;
}
.footer-copyright{
    font-size:1em;
    padding-bottom: 5px;
}

.footer-description{
    font-size:16px;
}
.footer-row{
    display: table;
    height:180px;
}
.footer-col{
    width:100%;
    display: table-cell;
    vertical-align: middle;
}
.btn-circle.btn-lg {
    width: 40px;
    height: 40px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 25px;
    margin-right: 5px;
}

a{
    color:rgb(133,182,5);
}
.nav > li > a.environment-nav{
    border-style: solid;
    width: 6em;
    text-align: center;
    margin-left: 6px;
    display: inline-table;
    border-radius: 5px;
    margin-top: 15px;
    padding: 0px;
    border-width: 2px;
    border-color: rgb(133,182,5);
    font-weight: 500;
    font-family: "nimbus-sans";
}
.nav > li > a.environment-nav:hover,.nav > li > a.environment-nav:active{
    background:rgb(133,182,5);
}

.btn-footer{
    background: rgb(133,182,5);
    border-color: rgb(133,182,5);
}
.btn-footer:hover{
    background-color: #978371;
    border-color: #978371;
}
.footer-icon path, .footer-icon rect,.footer-icon circle{
    fill:rgb(93,76,66);
}

.body-icon{
    height: 120px;
    margin: 0 auto;
    display: block;
}
.body-icon path{
    fill:rgb(58,133,4)
}
.scrollbar
{
	margin-left: 30px;
	float: left;
	height: 300px;
	width: 65px;
	background: #F5F5F5;
	overflow-y: scroll;
	margin-bottom: 25px;
}
#style-2::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 5px;
	background-color: rgb(35,35,35);
}

#style-2::-webkit-scrollbar
{
	width: 10px;
}

#style-2::-webkit-scrollbar-thumb
{
	border-radius: 5px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: rgb(83,83,83);
}

.markerInfoContainer{
    width:170px;
    min-height:75px;
}
.markerInfoTitle{
    margin-top: 12px;
    margin-bottom: 12px;
    text-align:center;
    font-size: 15px;
    font-weight:500;
}
.markerInfoButtons{
    width: 90px;
    padding-bottom: 7px;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 35px;
    font-size: 20px;
}
#loginForm{
    width:50%;
    margin:0 auto;
}
.navbar-collapse.in{
    min-height:320px;
}

@media (min-width: 768px){
    .navbar-nav > li > a{
        padding-top:5px;
        padding-bottom:0px;
    }
}

@media screen and (max-width: 360px){
    .jumbotron.banner .description{
        white-space: normal;
        line-height: 25px;
    }
    .navbar-description{
        font-size:1em;
        top: -35px;
        position: relative;
        margin-bottom: -35px;
        left: 27px;
    }
    .donner-img img{
        width:504px !important;
    }
    .navbar-brand{
        font-size:35px;
    }
}
@media screen and (max-width: 568px){
    .navbar-brand{
        font-size:30px;
    }
    .navbar-brand.navbar-description{
        font-size:15px;
    }
    .jumbotron.banner .description{
        line-height:25px;
    }
   .header-title{
       font-size:3vh;
   }
}
@media screen and (max-width: 320px) {
    .navbar-brand{
        font-size:30px;
    }
    .jumbotron.banner{
        white-space: normal;
        font-size:50px!important;
    }
    .jumbotron.banner .description{
        font-size:25px;
    }
}

/* Vertical Phone CSS 6 inch screen*/
@media screen and (max-width: 450px){
    .jumbotron.banner{
        font-size:65px;
    }

    .jumbotron.banner .description{
        white-space: normal;
        line-height: 35px;
    }
    .navbar-description{
        font-size:1em;
        top: -35px;
        position: relative;
        margin-bottom: -35px;
        left: 27px;
    }
    .donner-img img{
        width:504px !important;
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
       display: inline-block;
        float:right;
   }
   .navbar-header{
       width:100%;
   }
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }
    .body-content {
        padding: 0;
    }
    .navbar-nav{
        float: right;
    }
    .form-horizontal .control-label {
        text-align: left;
    }
    
   
   .navbar-description {
       float:left;
       font-size:17px;
       padding-left:5px !important;
   }

}
@media screen and (max-width: 769px) {
    .navbar-description{
        padding-top:16px;
        margin-left: -10px;
        padding-left:10px;
    }
    .time-series-image-container{
        width:90%;
    }
    .nav > li{
        display:inline-block;
    }
    .navbar-collapse.in {
        min-height: 120px;
    }
}
@media screen and (max-width: 767px) {
    .body-content {
        padding: 0;
    }
}
@media screen and (max-width: 970px) {
    .full-row .row{
        padding-top:0px!important;
        padding-bottom:0px!important;
    }
    .footer-overview {
        width: 50%;
        float: left;
        border-style:solid;
        border-color:rgba(128, 128, 128, 0.14);
        border-width:1px;
        border-right-width:0px;
        border-bottom-width:0px;
    }
    .btn-rect-md {
        margin-bottom: 20px;
    }
    .btn-footer{
        display:none;
    }
    .footer-nav{
        margin-top:50px;
        color:rgb(138,130,120);
    }
    .footer-col {
        width: 100%;
        display: block;
        vertical-align: middle;
    }
    .footer-description{
        font-size:12px;
    }
    .footer-overview .description {
        min-height: 60px;
        padding-bottom:0px;
    }
}


