body {
  background-color: #ededed;
}

#header {
  padding: 0.5em 1em;
  border-bottom: 3px solid #00549f;
  background: #fff;
}

.event-list-wrapper {
  /* Fixes IE 8 bug that (depending on what is rendered on the page) can cause divs to collapse, instead of wrapping around their elements */
  overflow: auto;
}

.columns.swap {
  float: right;
}

.container,
.fixed-container {
  padding: 1em 0;
  background: #fff;
  position: inherit;
}

#performance-details h1 {
  font-size: 1.4em;
}

.performance-name {
  margin: 0;
  font-weight: 400;
}

.performance-name a {
  text-decoration: underline;
  font-size: 18px;
}

.performance-location {
  margin: 0 0 0.5em;
  font-weight: 400;
  font-size: 1em;
  text-transform: none;
}

.performance-datetime {
  text-transform: none;
  margin: 0;
  font-weight: 400;
  font-size: 1em;
}

#performance-details .performance-datetime,
#venue-search .performance-datetime {
  margin-top: 10px;
}

#performance-details .buy.columns .buy,
#venue-search .buy.columns .buy {
  margin-bottom: 10px;
}

/* Keeps certain cobrands from aligning Get Tickets button left: */
@media screen and (max-width: 767px) {

  #venue-search .buy.columns .buy {
    margin-left: auto;
    margin-right: auto;
  }
}

#performance-details .buy.columns,
#venue-search .buy.columns {
  text-align: right;
  float: right;
}

#performance-details .image,
#venue-search .image {
  overflow: hidden;
  text-align: center;
  margin-top: 8px;
}

.performance h1 {
  font-size: 1.6em;
}

.performance .full-date {
  margin-bottom: 20px;
}

.pagination {
  padding-bottom: 10px;
}

.pagination .next-page,
.pagination .previous-page,
.pagination .first-page,
.pagination .last-page {
  display: inline-block;
  overflow: hidden;
  width: 20px;
  height: 20px;
  background: transparent url(/ticket/images/sprites/icons.png) no-repeat -29px -370px;
  text-indent: -999em;
}

.pagination .previous-page {
  background-position: -8px -370px;
}

.pagination .next-page {
  background-position: -8px -390px;
}

.pagination .last-page {
  background-position: -29px -390px;
}

.pagination .next-page,
.pagination .first-page,
.pagination .last-page,
.pagination .previous-page {
  margin-right: 5px;
  position: relative;
  top: 6px;
}

.pages {
  display: inline;
  list-style: none;
}

.pages li {
  display: inline;
}

.pages li a {
  display: inline-block;
  padding: 3px;
}

.pages .current {
  padding: 3px;
  background-color: #eee;
}

.performance {
  padding: 1em 0;
}

.show-divider {
  border-bottom: 1px solid #d0d0d0;

  /* Prevents cobrands with very wide headers from stretching the page in a way that puts CTAs way offscreen */
  max-width: 700px;

  /* Fixes IE 8 bug that (depending on what is rendered on the page) can cause divs to collapse, instead of wrapping around their elements */
  overflow: auto;
}

.calendar-day {
  margin: 5px 0;
  padding: 0.2em;
  text-align: center;
}

.calendar-day span {
  display: block;
  font-weight: bold;
  line-height: 1.2;
}

.calendar-day .date {
  font-size: 1.4em;
}

.calendar-day .backdrop {
  background-color: #ededed;
}

.ticket-price,
.available-seat {
  margin-top: 3px;
  font-weight: bold;
  font-size: 0.9em;
}

.venue-details {
  float: left;
  padding-right: 10px;
  width: 25%;
  color: #555;
}

.venue-name a,
.venue-address a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.venue-name a:after {
  position: absolute;
  bottom: -3px;
  display: block;
  width: 100%;
  height: 1px;
  background: #428bca;
  content: '';
  opacity: 0;
  transition: all 0.2s ease-in-out 0.1s;
}

.venue-name:hover a:after {
  opacity: 1;
}

.venue-address,
.venue-info {
  font-size: 0.9em;
}

.venue-address,
.venue-info,
.email-and-social {
  margin: 1em 0;
}

.email-and-social {
  display: flex;
  align-items: center;
  flex-direction: row;
  a {
    margin-left: 2px;
  }
  > .emailButton{
    margin-top: 5px;
  }
}

.street-address,
.venue-city,
.venue-state {
  display: block;
}

.venue-map {
  text-align: center;
}

.venue-email-signup-section {
  margin: 20px 0;
  background-color: #e0e0e0;
  color: #000;
}

#email-signup-field {
  margin-bottom: 5px;
}

#venue-search-calendar input[type="submit"] {
  font-size: 0.9em;
}

#performance-calendar {
  width: 100%;
}

#performance-calendar .day-name {
  padding: 0 5px;
}

#performance-calendar .row {
  margin-bottom: 0;
}

#performance-calendar .day {
  z-index: 100;
  overflow: hidden;
  padding: 0;
  border: 1px solid #999;
  background: #fff;
  vertical-align: top;
  font-size: 0.9em;
  line-height: 1.1;
}

/* HTML from Java class that can't be removed just yet, so hide it */
#performance-calendar .day > p {
  display: none;
}

#performance-calendar .day .reveal-panel {
  position: relative;
  overflow: hidden;
  padding: 5px;
  width: 84px;
  background-color: #fff;
}

#performance-calendar .day .relative-panel {
  position: relative;
  top: 0;
  left: 0;
  z-index: 800;
}

#performance-calendar .day.hovered .relative-panel {
  z-index: 1600;
}

#performance-calendar .day.hovered .reveal-panel {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  overflow: visible;
  width: 100%;
  height: auto;
  border: 1px solid #666;
  -webkit-box-shadow: 0 0 10px 1px #999;
  box-shadow: 0 0 10px 1px #999;
}

#performance-calendar .last-row .day {
  border-bottom: 1px solid #999;
}

#performance-calendar .reveal {
  height: auto;
}

/* .version-b represents "B" test with expanding/hiding panels via JS */
.version-b #performance-calendar {
  width: 700px;
  table-layout: fixed;
}

.version-b #performance-calendar .day {
  overflow: hidden;
}

.version-b #performance-calendar .day .reveal-panel {
  height: 100px;
  white-space: nowrap;
}

.version-b #performance-calendar .day.hovered {
  z-index: 500;
  overflow: visible;
  border-color: #fff;
}


/**
 * Cobrand styles (underscore naming scheme for backwards compatibility)
 */
.etix_cobrand_body_header {
  text-align: center;
}

.etix_cobrand_body_header .container {
  padding: 0;
  background: none;
}

.etix_cobrand_body_footer {
  clear: both;
}

.etix_cobrand_body_footer .container {
  padding: 5px;
  width: auto;
  border-top: 1px solid #d0d0d0;
  text-align: center;
}

.etix_cobrand_body_footer .container .noBgFooter a {
  display: block;
}

.etix_cobrand_body_footer #footer a {
  margin: 0 10px;
}

/**
 * Media queries, for various resolutions.
 * All styles preceded with .container class because only classes 
 * inside Skeleton's .container should run in a media query.
 * Our .fixed-container won't trigger the media query styles.
 */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
  .container h1 {
    font-size: 1.6em;
  }

  .container h2 {
    font-size: 1.4em;
  }

  .container h3 {
    font-size: 1.3em;
  }

  .container h4 {
    font-size: 1.2em;
  }

  .container h5 {
    font-size: 1.1em;
  }

  .container h6 {
    font-size: 1.0em;
  }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
  body {
    background: #fff;
  }

  body.full-width {
    /* reset color if forcing desktop version */
    background-color: #ededed;
  }

  .container {
    border: none;
  }

  /* shrink cobrand header images */
  .container .etix_cobrand_body_header img {
    max-width: 100%;
  }

  .container .reveal-for-mobile {
    display: inline;
  }

  .four.columns.omega,
  .eight.columns,
  .five.columns,
  .six.columns,
  .seven.columns {
    margin: 0 auto;
  }

  /* override inline style :( */
  .omega {
    padding: 0 !important;
  }

  #venue-search .buy.columns {
    text-align: center;
  }

  #venue-search .image {
    margin: 10px 0;
  }
}

@media screen and (max-width:690px) {
  .venue-details,
  .venue-map {
    width: 100%;
    float: none;
  }
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .buy, .reserve {
    margin-top: 10px;
    width: 350px;
    text-align: center;
  }

  .ticket-price {
    text-align: center;
  }
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
  .buy, .reserve {
    margin-top: 10px;
    width: 230px;
    text-align: center;
  }

  .ticket-price {
    text-align: center;
  }
}