/* NOTE - Code for Back To The Top Button are in the blog and shows-archive pages */

/* The following is for Nav buttons as seen in the Shows section - As of March 2025 not really used any more 
in favor of built-in buttons */
.btn-group button {
  border: 1px solid white; /* white border */
  font-weight: bold;
}

/* Clear floats (clearfix hack) */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

.btn-group button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: #ae512a;
} 

/*And sub nav buttons - child pages of the Shows section */

.subNav2 {
  font: bold 14px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  border-radius: 4px;
  line-height: 200%;
}

a.subNav2:link {
    text-decoration: none;
    white-space: nowrap;
    }
a.subNav2:hover {
    text-decoration: none;
    white-space: nowrap;
    }

.subNav2select {
  font: bold 14px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 2px solid #ec501c;
  border-left: 1px solid #CCCCCC;
  border-radius: 4px;
  line-height: 200%;
}

a.subNav2select:link {
    text-decoration: none;
    white-space: nowrap;
    }
a.subNav2select:hover {
    text-decoration: none;
    white-space: nowrap;
    }
    
/* The following is to make mobile menu social icons have an orange background */    
    .navContent .navSocialIcons li a.zocial {
background-color: #ec501c;
border-radius: 5px;
}
/* Add a background color on hover for mobile menu social icons */
.navContent .navSocialIcons li a.zocial:hover {
  background-color: #ae512a;
}

/* Add a background color on hover for default buttons */
 .button:hover {
  background-color: #ae512a;
}

/* Experiment to limit the width of the navigatino but it seems to break on vertical iPads */
/*
#navTopLevel {
    max-width: 800px;
    float: right;
}
*/

/* This is to make 2 divs go side by side on a tablet or computer - but one below the other on mobile */
.one {
  border: 0px;
  width: 49%;
  float: left;
}

.two {
  border: 0px;
  width: 49%;
  float: right;
}


@media (max-width: 767px) {
  .one {
    width: 100%;
  }
  .two {
    width: 100%;
  }

}

/* This is to make the items like bios that say MORE as a link to more information have a rollover color */
.moreLink:hover {color: #ec501c;}


/* The following is for Nav Donoate drop-down - NO LONGER USED
.navLabel {
    padding-right: 70px;
    background-color: black;
    color: white;
}
*/

/* This is to make the the arrow next to a drop-down orange */
.dropArrow {
	color: #ec501c;
}

/* Add a background color on hover for drop down menu itmes */
 .subNav li:hover a {
  background-color: #ec501c;
  opacity: 0.95;
}

/* Disable hover effect on mobile phones navigation (screen width 750px or less) */
@media only screen and (max-width: 750px) {
  .subNav li:hover a {
    background-color: transparent;
    opacity: 1;
  }
}

/* Keep logo and nav icon pinned at the top for mobile */
@media only screen and (max-width: 600px) {
  .headerAndNavContent {
    position: fixed;
    z-index: 1000;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom: 2px solid #219339;
    border-top: 2px solid #219339;
    margin-top: -2px;
  }
}

/* The above CSS (pin headerAndNavContent to the top on mobile) makes the body of the page move up on mobile - this CSS is a fix */
@media (max-width: 768px) {
  .primaryAndSecondaryContent {
    padding-top: 70px;
  }
}