/* Map sidebar */
.sidebar-entry {
   text-decoration:none; 
   border:0px; 
   //solid silver;
}

a.sidebar-entry {
   color:#000000; 
   text-decoration: none; 
   text-align:center;
}
a.sidebar-entry:hover {
   color:#000000; 
   background-color:#eee; 
   border-radius: 6px;
   text-decoration: none
}
a.hilight-sidebar-entry{
   //background-color:#ccf;
   background-color: rgb(141,181,207);
   border-radius: 6px;
   text-decoration: none;
   cursor:pointer;
}
a.sidebar-entry:focus {
  // background-color:#ccf; 
   background-color: rgb(141,181,207);
   border-radius: 6px;
   border:0px; 
   text-decoration: none;
   color:#ffffff;
}

.sidebar-cat-header {
   background-color:#eee; 
   margin:1px; 
   cursor:pointer;
   text-align:center;
   border-radius: 6px;
   min-height:24px;
   line-height:24px;
   vertical-align: middle;
}
.map-col-header {
   background-color:#ffffff; 
  // padding-left:5px;
   font-weight:bold;
   text-decoration: underline;
   text-align:center;
}
.sidebar-cat-image {
   height: 15px;
}

.sidebar-cat-label {
   padding-left:0px;
   vertical-align: middle;
 //  font-weight:normal;
}
.hilight-cat-header {
   //background-color:#ccf;
   background-color: rgb(141,181,207);;
   cursor:pointer;
   font-weight:bold;
   
}

/* Map InfoWindow */
.iwWrapper { 
   width:220px;
   overflow: hidden; 
   overflow-y: hidden;
   overflow-x: hidden;
}
.iwWrapper:hover {
   background-color:#888888; 
   text-decoration: none;
   cursor:pointer;
   overflow: hidden; 
}

.iwImgCol { 
   float:left;
   border:0px;
   width:100px;
   overflow:hidden;
   vertical-align:text-bottom; 
} 
.iwTextCol { 
   float:right;
   width:110px;
   padding-top:5px;
   padding-left:5px;
   padding-right:15px;
   font-family: Verdana, Arial, sans serif; 
   font-size: 11px; 
   color: #ffffff; margin: 2px;
   overflow: hidden;
}

@media print {

  body * {
    visibility: hidden;
  }
   /*Get rid of spelling out URL on print, caused by bootstrap's CSS */
 a[href]:after {
    content: none !important;
  }
   #hike_body_wrapper {
      visibility: hidden;
   }
#hike_body_background {
      visibility: hidden;

}
  #hike_body, #hike_body * {
    visibility: visible;
  }
  #hike_body {
    position: absolute;
    left: 0;
    top: 0;
   font-family: Verdana, Arial, sans serif; 
   font-size: 12px; 
  }
   .embed-container-flickr { display: none; }
   .embed-container-trailmap  { display: none; }
  .btn { 
      visibility: hidden;

display: none; }
  .btn-default { 
      visibility: hidden;

display: none; }
}

/* LAYOUT */
@media only screen and (max-width: 767px) {
    #sidebar {
        max-height: 100px;
    }

    #map{
        max-height: 300px;
      border-width: 0px;
      border-right: 0px;
      border-left: 0px;
    }

    #mapfilter {
        max-height: 100px;
    }
   #header-row {
   }
}

body {
   background-image:url("https://www.hikingwithmybrother.com/images/bk_image.jpg");
   background-repeat:no-repeat;
   background-attachment:fixed;
   background-position:center top;
}

#header-row {
   padding: 25px 0px 25px 0px;
}

#footer-row {
   padding: 25px 0px 0px 0px;
}

#map-row {
   border-radius: 6px;
   border: 8px solid #ffffff;
  -webkit-box-shadow: 5px 5px 10px #111;
          box-shadow: 5px 5px 10px #111;  
   background-color: #ffffff;
}

#sidebar {
   height:455px; 
   overflow:scroll;
   overflow-x: hidden;
   padding: 0px;
   background-color: #ffffff;
}

#map {
   height:475px;
   border-right: 8px solid #ffffff;
   border-left: 8px solid #ffffff;
   background-color: #FFFFFF;
}

#mapfilter {
   height: 455px; 
   overflow:auto;
   overflow-x: hidden;
   padding: 0px;
   background-color: #FFFFFF;
}

/* Popup Hike */
#hike_body {
   border-radius: 6px;
   background-color:#ffffff;
}

#hike_body_container {
  -webkit-box-shadow: 5px 5px 10px #111;
          box-shadow: 5px 5px 10px #111;  
}

.popup_visible #hike_body {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
}

/* classes (div wrapper) for making iFrames Responsive */

.embed-container-trailmap {
    position: relative;
    padding-bottom: 75%; // 72% for map fits 4x3 aspect ratio of flickr for some reason.
 //  padding-top: 35px;
    height: auto;
    width: 100%
    overflow: hidden;
}

.embed-container-flickr {
    position: relative;
    padding-bottom: 75%; // 4x3 aspect ratio same ratio as photos
 //  padding-top: 35px;
    height: auto;
    width: 100%
    overflow: hidden;
    margin-bottom: 20px;
}

.embed-container-trailmap iframe {
   position: absolute;
   top:0;
   left: 0;
   width: 100%;
   height: 100%;
   border-style: none;
}

.embed-container-flickr iframe {
   position: absolute;
   top:0;
   left: 0;
   width: 100%;
   height: 100%;
   border-style: none;
}

/** Spinner for loading map **/
@keyframes spinner {
    to {transform: rotate(360deg);}
}
 
@-webkit-keyframes spinner {
    to {-webkit-transform: rotate(360deg);}
}
 
.spinner {
    min-width: 90px;
    min-height: 90px;
}
 
.spinner:before {
    content: 'Loading.';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90px;
    height: 90px;
    margin-top: -45px;
    margin-left: -45px;
}
 
.spinner:not(:required):before {
    content: '';
    border-radius: 50%;
    border: 8px solid rgba(0, 0, 0, .3);
    border-top-color: rgba(0, 0, 0, .6);
    animation: spinner .8s linear infinite;
    -webkit-animation: spinner .8s linear infinite;
}

.menu-button {
   height: 64px;

}
.social-div {
   height: 64px;
   width: 64px;
   border-radius: 6px;
   margin:auto;

  -webkit-box-shadow: 5px 5px 10px #111;
          box-shadow: 5px 5px 10px #111;  
   // line-height:127px; //The magic that allows vertical align
}

.social-img {  
   border-radius: 6px;
}

/*****************
 * Hike Styling */

.feature-icon {
  border-radius: 50px;
   margin-right: 5px; 
   margin-bottom: 5px; 
   height: 65px;
   width: 65px;
   -webkit-box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 1);
    -moz-box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 1);
    box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 1);
}

.directions {
   border:1px solid #eee;
   border-radius: 6px;
   padding: 10px;
   font-size: 12px;
}

.trail-data-label {
   color: #006bb3;
   font-family:Impact;
   font-size: 15px;

}

a.hike-link {
   color: #006bb3;
   //color: #408000;
   text-decoration: underline; 
}

a.hike-link:visited {
   color: #006bb3;
   text-decoration: underline; 
}

a.hike-link:hover {
   background-color:#eee; 
   text-decoration: none; 
   color: #006bb3;
   text-decoration: underline; 

}


/* Footer items */
.footer-img {
//   border-radius: 6px;

  -webkit-box-shadow: 5px 5px 10px #111;
         box-shadow: 5px 5px 10px #111;  

}

#footer-well {
   height:250px;
   width:300px;
   border-radius: 6px;

  -webkit-box-shadow: 5px 5px 10px #111;
          box-shadow: 5px 5px 10px #111;  
}

.footer-center {
   margin:auto;
   text-align: center;
}
.footer-text {
   color: #000000;
   background-color: #ffffff;
//   font-weight:bold;
  // font-family:Impact;
   opacity: 0.8;
   font-size: 20px;
   padding:5px;
   border-radius: 6px;

  -webkit-box-shadow: 5px 5px 10px #111;
          box-shadow: 5px 5px 10px #111;  

}