body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/*
   Override the default bootstrap navbar positioning - we have a 80px logo and want text to be
    roughly centred in place
*/
ul.navbar-nav {
    margin-top: 29px;
}

ul.navbar-nav li a {
    padding: 0px;
    margin-right: 15px;
}
/*
   Accommadate long second link list as bootstrap flexes
*/
@media (max-width: 990px) {
  ul.navbar-nav.navbar-right.logged-in {
    margin-top: 4px;
  }
}

/*
   Remove our additional padding once ul is rendered as drop down AND apply padding to drop down to align below logo
*/
@media (max-width: 767px) {
  ul.navbar-nav {
    margin-top: 6px;
      padding-left: 6px;
  }

  div.navbar-collapse {
    margin-top: 10px;
  }
}

/*
   Addition tweaks to the navbar -> brand element to accomodate logo && text branding
*/
.navbar .navbar-brand{
    min-width: 240px;
    margin-top: -10px;
}

.navbar .navbar-brand img {
    float: left;
    height: 80px;
}

.navbar .navbar-brand a {
    float: right;
    margin-top: 14px;
}

.navbar .navbar-brand a:hover {
    text-decoration: none;
}

.main-header {
    background-image:  url(images/northwyke-banner-2C.PNG);
    background-size:   cover;                     
    background-repeat: no-repeat;
    background-position: center center;  
    min-height: 220px;
    padding-top: 9px;
}

.about .jumbotron {
    background: url(images/North-Wyke-static-map.png) no-repeat center top;
}

.data .jumbotron {
    background: url(images/core-data.jpg) no-repeat center;
}

/* 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 width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.form-group.required.has-error p.hidden {
    display: block!important;
    visibility: visible!important;
}

.has-error {
    -moz-transition: all 4s ease-in;
    -o-transition: all 4s ease-in;
    -webkit-transition: all 4s ease-in;
    transition: all 4s ease-in;
}

.validation-error { 
    color: transparent;
    max-height: 0;

    -moz-transition: all .4s ease-in;
    -o-transition: all .4s ease-in;
    -webkit-transition: all .4s ease-in;
    transition: all .4s ease-in;
}

.form-group.has-error .validation-error { 
    color: #b94a48;
    max-height: none;
}

/* Class to hide content of element but reserve appropriate space in the document */
.not-shown {
    visibility: hidden;
}

/* Override style of a datepicker btn input box to look a little more like traditional inputs */
#date-range-control .datepicker.btn {
    text-align: left;
    cursor: default;
    background: none;
}

span.highlight { border: 1px solid grey; }

.graph-legend span { display: none; }

.plot-title {
    padding: 10px;
    font-weight: bold;
}

svg .catchment {
    stroke:#000000;
    fill-opacity:1;
    fill-rule:evenodd;
    stroke-width:1.7px;
    stroke-linecap:square;
    stroke-linejoin:bevel;
    stroke-opacity:1;
    cursor: pointer;
}

svg .catchment.selected {
    stroke:#ffffff;
}

svg .blue-catchment {
    fill: #afc6e9;
}

svg .blue-catchment.selected {
    fill: #23477e;
}

svg .green-catchment {
    fill: #d7f4d7;
}

svg .green-catchment.selected {
    fill: #144814;
}

svg .red-catchment {
    fill: #ff8080;
}

svg .red-catchment.selected {
    fill: #800000;
}

svg .old-catchment {
    fill:url(#old-green);
	stroke:#000000;
	stroke-width:1.7px;
	stroke-linecap:square;
	stroke-linejoin:miter;
	stroke-miterlimit:4;
	stroke-dasharray:6.7px, 6.7px;
	stroke-dashoffset:4.8px;
}

svg .old-catchment.selected {
    fill:url(#old-green-selected);
}

svg .catchment-toggle {
    cursor: pointer;
}




.spinner {
    position: absolute;
   left: 17px;
   top: 17px;
   height:60px;
   width:60px;
   margin:0 auto;
   -webkit-animation: rotation .6s infinite linear;
   -moz-animation: rotation .6s infinite linear;
   -o-animation: rotation .6s infinite linear;
   -ms-animation: rotation .6s infinite linear;
   animation: rotation .6s infinite linear;
    border-left:6px solid #00aeef;
    border-left:6px solid rgba(0,174,239,.15);
    border-right:6px solid #00aeef;
    border-right:6px solid rgba(0,174,239,.15);
    border-bottom:6px solid #00aeef;
    border-bottom:6px solid rgba(0,174,239,.15);
    border-top:6px solid #00aeef;
    border-top:6px solid rgba(0,174,239,.8);
   border-radius:100%;
   z-index: 1000;
}

#dataMessageOverlay {
   position: absolute;
   left: 42%;
   top: 37%;
   height: 50px;
   margin:0 auto;
   visibility: visible;
   font-weight: bold;
}

@-webkit-keyframes rotation {
   from {-webkit-transform: rotate(0);}
   to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
   from {-moz-transform: rotate(0);}
   to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
   from {-o-transform: rotate(0);}
   to {-o-transform: rotate(359deg);}
}
@-ms-keyframes rotation {
   from {-ms-transform: rotate(0);}
   to {-ms-transform: rotate(359deg);}
}
@keyframes rotation {
   from {transform: rotate(0);}
   to {transform: rotate(359deg);}
}

.dygraph-ylabel {
    font-size: 10pt;   
}

#catchment-map-container {
    margin-top: 5px !important;
}

.no-close .ui-dialog-titlebar {
  display: none;
}

a.active-link:link {
    text-decoration: underline;
}