/*
** https://domain/webapps/veclocator/
** ADEQ: Arizona Department of Environmental Quality
*/
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Lexend:wght@100..900&display=swap');

html, body, div#map
{
height: 100%;
width: 100%;
margin: 0px;
}

body, td
{
font-family: 'Archivo', sans-serif;
font-size: small;
}

.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }



@media (max-width: 767px){
  div#banner
  {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background-color: #369992;
  border-bottom: 2px solid #369992;
  overflow: hidden;
  }

  div#banner > a
  {
  width: 90%;
  }

  div#banner > a > img
  {
  width: 100%;
  }

  div#panel
  {
  background-color: #ffffff;
  border-bottom: 1px solid #cfcfcf
  }

  div#panel > div#title
  {
  font-family: 'Lexend', 'sans-serif';
  font-size: large;
  font-weight: bold;
  color: #CC6C20;
  text-align: center;
  padding: 3px;
  }

  div#panel > div#steps
  {
    padding: 10px;
  }

  div#panel > div#steps > div#step_county
  {
    display: block;
  }

  div#panel > div#steps > div#step_zipcode
  {
    display: none;
  }

  div#panel > div#steps > div#step_zipcode > input#zipcode
  {
    width: 50px;
  }

 #zipcode_go, #address_go{
    background-color:#369992;
    color:#FFF;
    font-weight: bold;
    height: 21px;
    border: 0;
 }

 #zipcode_go:active, #address_go:active {
    background-color:#369992;
    box-shadow: 0 2px #666;
    transform: translateY(2px);
  }

  #zipcode_go:hover, #address_go:hover{
    background:#CC6C20;
    border: 1px solid #CC6C20;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3), 0 2px 2px 0 rgba(0,0,0,0.25);
    transform:translateY(1px);
  }


  div#panel > div#steps > div#step_zipcode > img#back_county
  {
  vertical-align: middle;
  cursor: pointer;
  }

  div#panel > div#steps > div#step_zipcode > span#back-county:hover
  {
  text-decoration: underline;
  cursor: pointer;
  }

  div#panel > div#steps > div#step_address
  {
    display: none;
  }

  div#panel > div#steps > div#step_address > input#address
  {
  width: 252px;
  }

  div#panel > div#steps > div#step_address > img#back_zipcode
  {
  vertical-align: middle;
  cursor: pointer;
  }

  div#panel > div#steps > div#step_address > span#back-zipcode:hover
  {
  text-decoration: underline;
  cursor: pointer;
  }

  div#panel span.error
  {
  color: #F00;
  }

  div#panel span.comment
  {
  font-size: x-small;
  font-weight: normal;
  }

  div#panel > div#legend
  {
  padding: 10px;
  }

  div#panel > div#legend > span.title
  {
  font-family: 'Lexend', 'sans-serif';
  font-weight:bold;
  font-size: medium;
  }

  div#panel > div#legend td
  {
  padding-right: 10px;
  }

  div#panel > div#legend td img
  {
  width: 20px;
  height: 20px;
  }

  div#panel > div#results
  {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  }

  div#panel > div#results > span.title
  {
  font-family: 'Lexend', 'sans-serif';
  font-weight: bold;
  font-size: medium;
  }

  div#panel > div#results > span.area_ab
  {
  color: #F00;
  font-weight: bold;
  }

  div#panel > div#results > span.not_ab
  {
  color: #080;
  font-weight: bold;
  }

  div#map
  {
    position: relative;
    width: 100%;
    height: 75%;
  }

  .iconContainer{
    position: absolute;
    left: 0px;
    top: 0px;
  }

  .home, .homeBgnd{
    left: 47px;
    top: 15px;
    z-index: 2;
  }

  .help, .helpBgnd{
    left: 47px;
    top: 47px;
    z-index: 1;
  }

  img#home, .homeBgnd
  {
    width: 33px;
    height: 32px;
  }

  img#help, .helpBgnd
  {
    width: 33px;
    height: 32px;
  }

  .Bgnd{
    background-color: #666;
  }

  img#home:active, img#help:active,
  img#home:hover, img#help:hover {
    opacity: 0.925;
  }

  div#noscript
  {
  position: absolute;
  left: 380px;
  top: 95px;
  width: 400px;
  padding: 20px;
  text-align: center;
  color: #F00;
  border: 2px dashed #F00;
  }

  footer{
    display:flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    background-color: #ffffff;
  }

  footer > a{
    color:#369992;
  }
}

@media (min-width: 768px){
  div#banner
  {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 80px;
  background-color: #369992;
  border-bottom: 2px solid #369992;
  overflow: hidden;
  }

  div#banner > a
  {
  position: absolute;
  height: 70px;
  top: 5px;
  }

  div#banner > a > img
  {
  height: 65px;
  }

  div#panel
  {
  position: absolute;
  left: 0px;
  top: 82px;
  width: 280px;
  height: calc(100% - 82px);
  background-color: #ffffff;
  border-right: 2px solid #cfcfcf;
  }

  div#panel > div#title
  {
  font-family: 'Lexend', 'sans-serif';
  font-size: x-large;
  font-weight: bold;
  color: #CC6C20;
  text-align: center;
  padding: 3px;
  }

  #zipcode_go, #address_go{
    background-color:#369992;
    color:#FFF;
    font-weight: bold;
    height: 21px;
    border: 0;
  }

  #zipcode_go:hover, #address_go:hover{
    background:#CC6C20;
    border: 1px solid #CC6C20;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3), 0 2px 2px 0 rgba(0,0,0,0.25);
    transform:translateY(1px);
  }

  div#panel > div#steps
  {
    height: 200px;
    padding: 10px;
  }

  div#panel > div#steps > div#step_county
  {
    display: block;
  }

  div#panel > div#steps > div#step_zipcode
  {
    display: none;
  }

  div#panel > div#steps > div#step_zipcode > input#zipcode
  {
  width: 50px;
  }

  div#panel > div#steps > div#step_zipcode > img#back_county
  {
  vertical-align: middle;
  cursor: pointer;
  }

  div#panel > div#steps > div#step_zipcode > span#back-county:hover
  {
  text-decoration: underline;
  cursor: pointer;
  }

  div#panel > div#steps > div#step_address
  {
    display: none;
  }

  div#panel > div#steps > div#step_address > input#address
  {
  width: 252px;
  }

  div#panel > div#steps > div#step_address > img#back_zipcode
  {
  vertical-align: middle;
  cursor: pointer;
  }

  div#panel > div#steps > div#step_address > span#back-zipcode:hover
  {
  text-decoration: underline;
  cursor: pointer;
  }

  div#panel span.error
  {
  color: #F00;
  }

  div#panel span.comment
  {
  font-size: x-small;
  font-weight: normal;
  }

  div#panel > div#legend
  {
  padding-left: 10px;
  }

  div#panel > div#legend > span.title
  {
  font-family: 'Lexend', 'sans-serif';
  font-weight: bold;
  font-size: medium;
  }

  div#panel > div#legend td
  {
  padding-right: 10px;
  }

  div#panel > div#legend td img
  {
  width: 20px;
  height: 20px;
  }

  div#panel > div#results
  {
  padding-left: 10px;
  padding-right: 10px;
  }

  div#panel > div#results > span.title
  {
  font-family: 'Lexend', 'sans-serif';
  font-weight: bold;
  font-size: medium;
  }

  div#panel > div#results > span.area_ab
  {
  color: #F00;
  font-weight: bold;
  }

  div#panel > div#results > span.not_ab
  {
  color: #080;
  font-weight: bold;
  }

  div#map
  {
    position: absolute;
    left: 282px;
    top: 82px;
    width: calc(100% - 282px);
    height: calc(100% - 82px);
  }

  img#home, .homeBgnd
  {
  position: absolute;
  left: 48px;
  top: 15px;
  width: 33px;
  height: 32px;
  z-index: 50;
  cursor: pointer;
  }

  img#help, .helpBgnd
  {
  position: absolute;
  left: 48px;
  top: 47px;
  width: 33px;
  height: 32px;
  z-index: 50;
  cursor: pointer;
  }

  .Bgnd{
    background-color: #666;
  }

  img#home:hover, img#help:hover{
    opacity: 0.925;
  }

  div#noscript
  {
  position: absolute;
  left: 380px;
  top: 95px;
  width: 400px;
  padding: 20px;
  text-align: center;
  color: #F00;
  border: 2px dashed #F00;
  }

  footer{
    display:none
  }
}