/* SHARED FILE — also injected onto the old Squarespace site via includes/js/edits.js, so edits here affect both (and Squarespace can't be previewed with dev tooling). */
/* specific to squarespace */
a {text-decoration:underline;}
.page-collection a {text-decoration:none;}

/* mobile specific styles */
@media only screen and (max-width: 480px) {
  .MobileSelect {font-size:11px;}
  .MobileList {width:160px;}
}

.castphoto {
    vertical-align: top;
    display: none; /* change to inline-block to display */
    /* To horizontally center images and caption */
    text-align: center;
    /* The width of the container also implies margin around the images. */
    width: 200px;}
.castphoto img {width:200px;}
.biodiv {width:100%;display:none;border: 2px solid #f8b61b;height:100%;}
.biophoto {float:left;margin:5px;width:300px;}
.biotext {text-align:left;}
.hide {display:none;}
.castcity {font-size:0.9em;color:#000000;border: 2px solid rgb(255, 255, 255); background: rgb(248, 182, 27);padding:7px;text-decoration:none;margin:4px;}
.castcity:hover {color:#000000;text-decoration:underline;}
h4 {color:#f8b61b;text-align:center;font-size:1.4em;line-height:2em;padding:0px;margin:0px;}

.selectcity {
  position: relative;
  /*Don't really need this just for demo styling*/
  float: center;
  min-width: 200px;
  margin: 0px 33%;
  /*margin: 0 auto;*/
}

/*.selectcity {border-radius:5px;padding:10px;padding-left:20px;padding-right:20px;border:1px solid red !important;}*/
/* dropdown divider + chevron: inline SVG on the select itself (see .selectcity select), so it tracks the box's own right edge on every viewport */

/* IE11 hide native button (thanks Matt!) */
select::-ms-expand {display: none;}

.selectcity select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Add some styling */  
  border-radius:10px;
  display: block;
  width: 100%;
  max-width: 320px;
  height: 50px;
  float: center;
  margin: 5px 0px;
  padding: 0px 46px 0px 24px;
  font-size: 1em;
  line-height: 1.75;
  color: #333;
  background-color: #ffffff;
  /* SVG data URI must URL-encode < and > — iOS Safari refuses the raw form, so the chevron silently failed to render on iPhone. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='50'%3E%3Cline x1='10' y1='0' x2='10' y2='50' stroke='black' stroke-width='1'/%3E%3Cpolyline points='20,22 27,29 34,22' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  border: 2px solid #000000;
  -ms-word-break: normal;
  word-break: normal;
}

/* mobile specific styles */
/* NOTE: requires 'viewport' meta tag to be set */
@media only screen and (max-width: 700px) {
  body,p {font-size:1.0em;}
  li {font-size:0.8em;} /* not sure why <li> is naturally larger than <p> on mobile? */
  .castphoto {width:80%;}
  .selectcity {margin: 0px 0%;}
}
@media only screen and (max-width: 850px) {
  .homescroller {display:none;} /* scroller doesn't fit after this point */
}