body {
  color: #808080;
  font-family: 'Open Sans', sans-serif;
  background: #D9F7CF url('./images/potato-field.jpg') no-repeat fixed center; 
}

.myheader {
  display: block;
  position: relative;
  background-color: white;
  zoom: 1;
  filter: alpha(opacity=90); 
  opacity: 0.9;
}

.myheader h2{
  padding-top: 1em;
}

#pcLogo {
  z-index:99;
}

.pcBrand {
  font-size:4em;
  color: #cf4520;
  padding-top: 40px;
  line-height: 85%;
  font-family: Arial, sans-serif;
}

h1.fera-logo {
  border-left: solid 2px #898700;
  display: block;
  padding: 0 0 0 8px;
  font-size: 17px;
}
h1.pageTitle {
  font-size: 1.4em;
  background-color:  #cf4520;
  color:white;
  padding: 9px;
  border-radius: 7px;
  margin-top:0px;
}
.user-message {
  font-size: 1.2em;
  padding: 7px;
  border-radius: 4px;
}
.warning {
  background-color: #F2DEDE;
}
.information {
  background-color: #D9EDF7;
}


.progress-wrapper {
  margin: 30px 0;
  width: 300px;
}
.html5-progress-bar {
  background-color: #FFFFFF;
  border-radius: 3px 3px 3px 3px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  padding: 15px;
}
.html5-progress-bar progress {
  background-color: #F3F3F3;
  border: 0 none;
  border-radius: 9px 9px 9px 9px;
  height: 18px;
  width: 80%;
}
.html5-progress-bar progress::-moz-progress-bar {
  background: linear-gradient(to bottom, #CDEB8E 0%, #A5C956 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
  border-radius: 9px 9px 9px 9px;
}
.html5-progress-bar .progress-value {
  color: #555555;
  float: right;
  font-size: 0.8em;
  height: 18px;
  line-height: 20px;
  margin-left: 5px;
  padding: 0 5px;
}

#uploadedMessage {
  color: #808080;
  margin-top: 10px;
  background-color: #D9EDF7;
  min-width: 300px;
  border-radius: 9px 9px 9px 9px;
  height: auto;
  padding: 9px;
}

#fileDataWrapper {
  margin-top: 10px;
  display: none;
  background-color: #D9EDF7;
  width: 300px;
  border-radius: 9px 9px 9px 9px;
  height: auto;
  padding: 9px;
}
#selectAFile {
  margin-top: 10px;
  display: none;
  background-color: #F2DEDE;
  width: 300px;
  border-radius: 9px 9px 9px 9px;
  height: auto;
  padding: 9px;
}
.hidden {
  display: none;
}
.w300 {
  width: 300px;
}
.buttonWrapper {
  margin: 10px 0;
}
label {
  display: block;
}
table.data {
  font-size: 1em;
  border-collapse: collapse;
  border: 1px solid #aaa;
  width: 100%;
}

table.data th, td {
  padding: 3px;
  border: 1px solid #aaa;
}
td.alert {
  background-color: #FF545F;
  border-radius: 0;
  border: 1px solid #aaa;
  color: #808080;
    /* Fallback for web browsers that don't support RGBa */
  background-color: rgb(255, 84, 95);
  /* RGBa with 0.6 opacity */
  background-color: rgba(255, 84, 95, 0.6);
  /* For IE 5.5 - 7*/
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF545F, endColorstr=#FF545F);
  /* For IE 8*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF545F, endColorstr=#FF545F)";
  
}
.errorsFound {
   color: red;
   font-weight: bold;
}

.border {
  border-radius: 7px;
  padding: 15px;
  border:2px solid #cf4520;
  -moz-box-shadow:     5px 5px 6px #ccc;
  -webkit-box-shadow:  5px 5px 6px #ccc;
  box-shadow:          5px 5px 6px #ccc;
  margin: 0px 0;
  min-width: 220px;
  margin-bottom: 15px;

}
.borderTitle {
  padding: 0 0 3px 0;
  width: 100%;
  background-color: #EBF0E9;
  margin-top:0;
  border-bottom:dashed 1px  #cf4520;
  border-radius: 7px 7px 0 0;
}

.borderTab {
  display: inline-block;
  background-color: #EBF0E9;
  padding: 0 0 3px 0;
  width: 22%;
  margin-top:0;
  margin-bottom:0;
  margin-right:10px;
  margin-left:10px;
  border:dashed 1px  #cf4520;
  border-bottom:none;
  border-radius: 7px 7px 0 0;
}

.borderTabOff {
    background-color: #ffffff;
}

#regionalMap {
  position: relative;
  top: 0px;
  left: 0px;
}

#mapDiv {
 /* margin-left:0px;
  margin-bottom:15px;
  margin-top:15px;*/
}

.regionalBorder {
  border-radius: 7px;
  border:1px solid #aaa;
  margin: 0;
  min-width: 220px;
}

#dataMap {
  position: relative;
  top: 22px;
  z-index:999;
}
#baseMap {
  z-index:1;
}
h3 {
  font-size: 1.3em;
  text-align: center;
  color:  #cf4520;
  padding-top:12px;
  margin-top:0px;
}
h3 a, h3 a:hover, h3 a:visited {
  color: #cf4520;
}


#slider, #yearSlider {
  margin: 5px 10px 0 10px;
}


.legendText {
  font-size: x-small;
  font-weight: normal;
}

#mapTitle {
  background-color: #cf4520;
  margin:0 0 10px 0;
  border-radius: 7px;
  width: 100%;
  padding: 5px;
  color: white;
  text-align: center;
}

.mapImage {
  text-align: center;
}

#aphmonHeadlines {
  max-height: 400px;
  overflow:auto;
}

.headlines ul {
  padding: 5px 5px 0px 18px;
}

.relatedLinks {
  font-size: 1.1em;
  background-color: #B4B5B2;
  color: white;
  padding: 9px;
  border-radius: 7px;
}
.alignCenter {
  text-align: center;
}
.fixedHeight {
  height: 320px;
}
img.roundedCorners {
  border-radius: 7px;
}
img.dropShadow {
  -moz-box-shadow:     5px 5px 6px #ccc;
  -webkit-box-shadow:  5px 5px 6px #ccc;
  box-shadow:          5px 5px 6px #ccc;
}

.carousel .item img {
  max-width: none; 
  min-width: 100%;
}
.alignRight {
  text-align: right;
}
.alignLeft {
  text-align: left;
}
.italics {
  font-style: italic;
}
.redText {
  color: red;
}
.alert {
  background-color: #ccc;
  color: #565656;
  min-height: 300px;
}
.ui-slider {
  text-align: center;
}
.ui-widget-content {
  text-align: center;
}
.alignCenter {
  text-align: center;
}
.sliderText {
  font-size: x-small;
  position: relative;
  top: -8px;
  left: 10px;
  color: #868686;
}
.highlighted, .table-striped  tbody  tr:nth-child(2n+1) td.highlighted {
  background-color: #FEDF76;
}
.greentext {
  color: #008000;
}
/* data tables can be quite big so make them scroll to keep inside the div element when on a medium screen*/
@media (min-width: 768px) and (max-width: 992px) {
  .table-responsive {
    border: 1px solid #DDDDDD;
    margin-bottom: 15px;
    overflow-x: scroll;
    overflow-y: hidden;
    width: 100%;
  }
}

.table-responsive {
  width: 95%;
  margin-left: 10px;
}
.caption {
  padding-top:7px;
}
.x-small {
  font-size: x-small;
  padding: 0 0 4px 4px;
}

.navbar-custom {
  background-color: #cf4520;
  border-color: #cf4520;
  /*
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#a4b89d), to(#89a37f));
  background-image: -webkit-linear-gradient(top, #a4b89d, 0%, #89a37f, 100%);
  background-image: -moz-linear-gradient(top, #a4b89d 0%, #89a37f 100%);
  background-image: linear-gradient(to bottom, #a4b89d 0%, #89a37f 100%);
  background-repeat: repeat-x;
  /* removed the line below as it prevented the rendering of the drop-down list of options in IE9 and earlier.*/
 /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa4b89d', endColorstr='#ff89a37f', GradientType=0);*/
}

.navbar-custom .navbar-brand {
  color: #ffffff;
}
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus {
  color: #e6e6e6;
  background-color: transparent;
}
.navbar-custom .navbar-text {
  color: #ffffff;
}
.navbar-custom .navbar-nav > li:last-child > a {
  border-right: 1px solid #cf4520;
}
.navbar-custom .navbar-nav > li > a {
  color: #ffffff;
  border-left: 1px solid #cf4520;
}
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
  color: #e2eeb8;
  background-color: transparent;
}
.navbar-custom .navbar-nav > .active > a,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus,
.navbar-custom .navbar-nav a:hover,
.navbar-custom .navbar-nav a:focus {
  color: #e2eeb8;
  background-color: #cf4520;
  /*
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#77956c), to(#93aa89));
  background-image: -webkit-linear-gradient(top, #77956c, 0%, #93aa89, 100%);
  background-image: -moz-linear-gradient(top, #77956c 0%, #93aa89 100%);
  background-image: linear-gradient(to bottom, #77956c 0%, #93aa89 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff77956c', endColorstr='#ff93aa89', GradientType=0);
  */
}
.navbar-custom .navbar-nav > .disabled > a,
.navbar-custom .navbar-nav > .disabled > a:hover,
.navbar-custom .navbar-nav > .disabled > a:focus {
  color: #cccccc;
  background-color: transparent;
}
.navbar-custom .navbar-toggle {
  border-color: #dddddd;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
  background-color: #dddddd;
}
.navbar-custom .navbar-toggle .icon-bar {
  background-color: #cccccc;
}
.navbar-custom .navbar-collapse,
.navbar-custom .navbar-form {
  border-color: #cf4520;
}
.navbar-custom .navbar-nav > .dropdown > a:hover .caret,
.navbar-custom .navbar-nav > .dropdown > a:focus .caret {
  border-top-color: #e2eeb8;
  border-bottom-color: #e2eeb8;
}
.navbar-custom .navbar-nav > .open > a,
.navbar-custom .navbar-nav > .open > a:hover,
.navbar-custom .navbar-nav > .open > a:focus {
  background-color: #cf4520;
  color: #e2eeb8;
}
.navbar-custom .navbar-nav > .open > a .caret,
.navbar-custom .navbar-nav > .open > a:hover .caret,
.navbar-custom .navbar-nav > .open > a:focus .caret {
  border-top-color: #e2eeb8;
  border-bottom-color: #e2eeb8;
}
.navbar-custom .navbar-nav > .dropdown > a .caret {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
}

@media (max-width: 767px) {
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a {
    color: #ffffff;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #e2eeb8;
    background-color: transparent;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #e2eeb8;
    background-color: #cf4520;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #cccccc;
    background-color: transparent;
  }

  .myheader {
    min-height: 110px;
  }
  body {
    /* On the smartphone sized display, we don't include the background image in order to keep the bandwidth down.*/
    background: #D9F7CF; 
  }
}

.navbar-custom .navbar-link {
  color: #ffffff;
}
.navbar-custom .navbar-link:hover {
  color: #e2eeb8;
}
.backgroundColor {
  background-color: white;
}
.dropdown-menu > li > a {
  background-color: white;
}
.dropdown-menu > li > a:hover {
  background-color: #cf4520;
  color: white;
}
p {
  padding: 7px;
}
form {
  padding: 10px;
}

.sampleCount {
  border:2px solid #cf4520;
  background-color: #EBF0E9;
  border-radius: 7px;
  color: #cf4520;
  padding:12px;
}

@font-face {
    font-family: 'ralewayextrabold';
    src: url('ralewayextrabold-webfont.eot');
    src: url('ralewayextrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('ralewayextrabold-webfont.woff') format('woff'),
         url('ralewayextrabold-webfont.ttf') format('truetype'),
         url('ralewayextrabold-webfont.svg#ralewayextrabold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .pcBrand {
    font-size: 3.5em;
  }
  @font-face {
    font-family: 'ralewayextrabold-webfont';
    src: url('./fonts/ralewayextrabold-webfont.svg') format('svg');
  }
}

form.login label {
  clear:left; 
  display:block; 
  float:left; 
  width:150px; 
  text-align:right; 
  padding-right:10px; 
  margin-bottom:0.5em;
}

/* tipbox White Space Reset */
div.globalLoginTipBox *, div.globalLoginInfoBox * {
  margin: 0;
  padding: 0;
  font-size: 12px;
}

div.globalLoginTipBox {
   font-family: verdana;
   border: 2px solid #ffcc00;
   background: #ffff99;
   font-size: 100%;
   text-align: left;
   margin: 5px;
   padding: 2px;
   width: 420px;
   font-size: 12px;
 }
 
div.globalLoginTipBox div.caution {
   background: #ffff99 url(loginimages/caution.png) no-repeat;
   height: 60px;
   width: 70px;
   margin: 5px;
   position: absolute;
 }
 
div.globalLoginTipBox div.message {
   padding-top: 2px;
   padding-bottom: 2px; 
   padding-left: 75px;
 }
 
div.globalLoginTipBox ul.errorlist {
  margin: 10px 0px 16px 0px;
  font-weight: bold;
  color: red;
  padding: 2px;
  padding-left: 20px;
}

div.globalLoginTipBox ul.errorlist li { line-height: 16px; font-size: 12px; }

div.globalLoginInfoBox {
   font-family: verdana;
   border: 2px solid #99cccc;
   background: #ddffff;
   font-size: 100%;
   text-align: left;
   margin: 5px;
   padding: 2px;
   width: 420px; 
 }
 
div.globalLoginInfoBox div.infonote {
   background: #ffffcc url(loginimages/info.png) no-repeat;
   height: 32px;
   width: 32px;
   margin: 2px;
   margin-left: 20px;
   margin-top: 4px;
   position: absolute; 
 }
 
div.globalLoginInfoBox div.message {
   padding:8px 0 1px 65px;
 }

 
div.globalLoginInfoBox ul.infolist {
  font-weight: bold;
  color: #000099;
  padding-left: 20px;
}

div.globalLoginInfoBox ul.infolist li, { line-height: 16px; font-size: 12px; }

div.login p {
  color: #555;
  font-size: 15px;
  margin: 10px;
  padding: 0px;
}

form.login p {
  font-weight: bold;
  float: left;
  clear: left;
  margin: 5px;
  padding: 0px;
}

.sideBox {
  float:right;
  width: 35%;
}


.cookies-container {
  background-color: white;
  margin: auto;
  color: black;
  position: fixed;
  bottom: 0em;
  left: 0em;
  height: 100vh;
  width: 25vw;
  border: 2px solid #cf4520;
  z-index: 6000;
  display: none;
  padding: 1em;
}

.cookies-container-no-hide {
  background-color: white;
  margin: auto;
  color: black;
  position: fixed;
  bottom: 0em;
  left: 0em;
  height: 12vh;
  width: 65vw;
  border: 2px solid #cf4520;
  z-index: 6000;
  display: block;
  padding: 1em;
}

@media print, screen and (max-width: 64em) {
    .cookies-container {
      height: 60vh;
      width: 100vw;
    }
}

.nl-cookies{
  padding-top: 0px;
  color: black;
  font-size: 1.8em;
}

.cookies-text {

  color: black;

}

.mainCookieArea ul li {
    margin-bottom: 1em;
    padding: 0em;
    line-height: 0px;
    list-style: none;
}

.cookiesLabel {
  margin: 1em;
}

.cookiesLabel input {
    margin-right: 1em;
}

.cookies-accepted-container {
  background-color: white;
  margin: auto;
  color: black;
  position: fixed;
  bottom: 0em;
  left: 0em;
  height: 100vh;
  width: 25vw;
  border: 2px solid #32511c;
  z-index: 6000;
  display: none;
  padding: 1em;
}

@media print, screen and (max-width: 64em) {
    .cookies-accepted-container {
        height: 60vh;
        width: 100vw;
    }
}