/*------------------------------BODY/GRID STYLES*/
body{
    font-family: 'Montserrat', sans-serif;
    display:grid;
    grid-template-columns: 1fr 1fr 1.5fr;
    grid-template-rows: repeat(4, auto);
    grid-template-areas:
    "nav nav nav"
    "header header header"
    "map map sidebar"
    "footer footer footer";
    grid-gap:10px;
    background-image: linear-gradient(to left, rgba(119, 136, 153, 0.199), rgba(211, 211, 211, 0.068));
    margin-right: 20px;
}
/*------------------------------HEADER STYLES*/
header{
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 5px;
    padding-right: 5px;
    grid-area: nav;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 2fr;
    grid-template-areas:  "title navigation";
    border-bottom: 1px solid #474440;
    
}
#title{
    grid-area: title;
    text-align: right;
    padding:10px;
    border-radius: .3em;
    color: #474440;
    background-color: #968e856c;
    text-shadow: 1px 1px #FFCAB1;
    box-shadow:
      0 2.8px 2.2px rgba(0, 0, 0, 0.034),
      0 6.7px 5.3px rgba(0, 0, 0, 0.048),
      0 12.5px 10px rgba(0, 0, 0, 0.06),
      0 22.3px 17.9px rgba(0, 0, 0, 0.072);
}
/*------------------------------NAV STYLES*/
#navigation{
    grid-area: navigation;
    color: #474440;
}
ul{
    float:right;
    border-bottom: 1px solid #474440;
}
li{
   display: inline;
}
/*header*/
#description a{
  color:#474440;
}
#description a:link{
  text-decoration: underline;
}
#description a:visited{
  text-decoration: none;
}
#description a:hover{
  text-decoration: none;
  background-color:lightgrey;
  border-radius: .5em;
  padding: 2px;
}
#description a:active{
  text-decoration: none;
}
/*------------------------------LINK STYLES*/
.nonDrop a{
    color:#474440;
}
.nonDrop a:link{
    text-decoration: none;
}
.nonDrop a:visited{
    text-decoration: none;
}
.nonDrop a:hover{
    text-decoration: none;
    background-color:lightgrey;
    border-radius: .5em;
    padding: 1px;
}
.nonDrop a:active{
    text-decoration: none;
}
/*------------------------------DESCRIPTION*/
p{
    grid-area: header;
    color: #474440;
}
/*------------------------------MAP STYLES*/
#map{
    margin-left: 10px;
    border: 2px solid #474440;
    border-radius: .5em;
    height:60vh;
    grid-area: map;
    /* display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    grid-template-rows: repeat(3, minmax(0,1fr));
    align-items: center;
    justify-items: center; */
    box-shadow:
      0 2.8px 2.2px rgba(0, 0, 0, 0.034),
      0 6.7px 5.3px rgba(0, 0, 0, 0.048),
      0 12.5px 10px rgba(0, 0, 0, 0.06),
      0 22.3px 17.9px rgba(0, 0, 0, 0.072);
} 
/*------------------------------SIDEBAR STYLES*/
#sidebar{
    grid-area: sidebar;
    background-color: #968e856c;
    color: #474440;
    border: 2px solid #47444094;
    border-radius: .3em;
    box-shadow:
      0 2.8px 2.2px rgba(0, 0, 0, 0.034),
      0 6.7px 5.3px rgba(0, 0, 0, 0.048),
      0 12.5px 10px rgba(0, 0, 0, 0.06),
      0 22.3px 17.9px rgba(0, 0, 0, 0.072);
    height: 60vh;
    /* width:1fr; */
    max-width: 100%;
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    grid-template-areas: 
      "nav"
      "text";
    overflow:scroll
}
#sidebartext p{
  margin: 4px;
  grid-area: text;
}

#sidebartext div{
  max-width: 100%;
}
/*---------------------SIDE BAR NAV*/
    /* Add a black background color to the top navigation */
#sidebarnav{
    display: grid;
    grid-template-columns: repeat(4,auto);
    grid-area: nav;
    background-color: #ddd;
    /* overflow: hidden; */
  }
  
  /* Style the links inside the navigation bar */
  
  #sidebarnav button {
    color: #474440;
    background-color: rgba(255, 166, 0, 0.747);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    border-radius: .3em;
  }
  
  /* Change the color of links on hover */
  #sidebarnav button:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Add a color to the active/current link */
  #sidebarnav button.active {
    background-color: #474440;
    color: white;
  }
/*------------------------------FOOTER STYLES*/
footer{
    grid-area: footer;
    color: #474440;
}
/*------------------------------MODAL STYLES*/
/* The Modal (background) */
 .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
  }
  
  /* The Close Button */
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  } 

   /* Dropdown Button -------------------------*/
.dropbtn {
    padding: 16px;
    font-size: 16px;
    border: none;
    border-radius: .5em;
    margin: 5px;
  }
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 9999;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {background-color: #968e856c;}
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {display: block;}
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .dropdown:hover .dropbtn {background-color:#ffcab175;} 

  /* create classes for each tab */
  .harassmentContent{
    display:none
  }

  .securityContent{
    display:none
  }

  .resourcesContent{
    display:none
  }

  .notRentingContent{
    display:none
  }

  /*footer*/
footer a{
    color:#474440;
}
footer a:link{
    text-decoration:underline;
}
footer a:visited{
    text-decoration: none;
}
footer a:hover{
    text-decoration: none;
    background-color:lightgrey;
    border-radius: .5em;
    padding: 2px;
}
footer a:active{
    text-decoration: none;
}

  @media all and (max-width:700px){
    body{
      grid-template-areas:
      "nav"
      "header"
      "map"
      "sidebar"
      "footer";
      grid-template-columns: 1fr;
      grid-template-rows: repeat(5, auto);
    }
    header{
      grid-template-areas: 
      "title"
      "navigation";
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr;
    }
  }