/***********************************
        GLOBAL STYLES
**************************************/

.required-field {
  color: #f00;
}

input[type=text], input[type=email], input[type=date], input[type=tel], textarea, select {
  padding: 5px;
  border-radius: 6px;
  font-size: 18px;
  border: 1px solid grey;
}

input[type=text]:hover, input[type=email]:hover, input[type=date]:hover, input[type=tel]:hover, textarea:hover, select:hover {
    box-shadow: 0 0 5px #f00;
    cursor: pointer;
}


/******************************************************************
            ordertickets.php
******************************************************************/

.orderContainer {
  padding-left: 25px;
}

.orderTicketsSection .row {
  width: 100%;
  clear: both;
  min-height: 18px;
  line-height: 18px;
  display: inline-block;
}

.orderTicketsSection .label {
  width: 200px;
  float: left;
  margin: 5px;
}

.orderTicketsSection .control {
  float: left;
  margin: 5px;
}

.orderTicketsSection .control div {
  float: left;
  width: 315px;
  text-align: left;
}

.orderTicketsSection .control2 {
  float: left;
  margin: 5px;
}

.orderTicketsSection input[type=text], .orderTicketsSection input[type=email], .orderTicketsSection input[type=tel] {
  width: 315px;
}

.selectOne {
  text-align: center;
}

.orderTicketsSection .ticketTypeContainer {
  width: 300px;
  clear: both;
  white-space: nowrap;
}

.orderTicketsSection .ticketType {
  vertical-align: middle;
  line-height: 23px;
  margin: 0;
  padding: 0;
}

.orderTicketsSection input[type=radio], .orderTicketsSection input[type=checkbox] {
  min-width: unset;
}

.orderTicketsSection .ticketType img {
  width: 300px;
  cursor: pointer;
}

.orderTicketsSection .ticketDetailGeneral {
  font: 10px Verdana;
  position: absolute;
  left: 240px;
  top: 24px;
}

.orderTicketsSection .ticketDetailEvent {
  font: 12px Verdana;
  position: absolute;
  left: 145px;
  top: 105px;
}

.orderTicketsSection .ticketDetailNotes {
  font: 8px Verdana;
  position: absolute;
  left: 145px;
  top: 155px;
}

.orderTicketsSection .ticketDetailVenue {
  font: 10px Verdana;
  position: absolute;
  left: 145px;
  top: 170px;
}

.orderTicketsSection .ticketDetailStub {
  font: 9px Verdana;
  position: absolute;
  left: 410px;
  top: 140px;
  transform: rotate(90deg);
}

#hologramTicketDiv {
  position: absolute;
  width: 640px;
  height: 233px;
  background-image: url("/common/images/hologram_ticket_blank.jpg");
  background-size: contain;
  margin: 0;
  padding: 0;
  border: 1px solid white;
}

#hologramTicketDiv img {
  width: 32px;
  position: absolute;
  top: 0px;
  left: 608px;
  cursor: pointer;
}

#numEvents {
  margin-left: 10px;
}

#venue {
  min-height: 75px;
  display: inline-block;
  line-height: 25px;
}

.orderTicketsSection textarea {
  height: 75px;
  width: 315px;   
}

#notes_readonly, #notes_view {
  height: 125px;
  width: 315px;
}

.orderTicketsSection button {
  font-size: 15px;
  text-transform: uppercase;
  border-radius: 3px;
  color: #FFF;
  background-color: #666;
  border-color: #595959;
}

#controlView {
  display: block;
}

#printView {
  display: none;
}

@media only screen and (max-width: 768px) {
  #plainTicketDiv {
      width: 575px;
      height: 202px;
  }

  #plainTicketDiv img {
      left: 543px;
  }

  #hologramTicketDiv {
      width: 575px;
      height: 205px;
  }

  #hologramTicketDiv img {
      left: 543px;
  }

  .orderTicketsSection .ticketDetailGeneral {
      font-size: 6px;
      left: 210px;
      top: 14px;
  }
  
  .orderTicketsSection .ticketDetailEvent {
      font-size: 8px;
      left: 128px;
      top: 90px;
  }
  
  .orderTicketsSection .ticketDetailNotes {
      font-size: 4px;
      left: 128px;
      top: 125px;
  }
  
  .orderTicketsSection .ticketDetailVenue {
      font-size: 6px;
      left: 128px;
      top: 150px;
  }
  
  .orderTicketsSection .ticketDetailStub {
      font-size: 5px;
      left: 350px;
      top: 140px;
  }

  .orderTicketsSection select, input {
    max-width: 768px;
  } 
}

@media only screen and (max-width: 640px) {
  #plainTicketDiv {
      width: 500px;
      height: 176px;
  }

  #plainTicketDiv img {
      left: 468px;
  }

  #hologramTicketDiv {
      width: 500px;
      height: 178px;
  }

  #hologramTicketDiv img {
      left: 468px;
  }

  .orderTicketsSection .ticketDetailGeneral {
      left: 185px;
      top: 9px;
  }
  
  .orderTicketsSection .ticketDetailEvent {
      left: 110px;
      top: 80px;
  }
  
  .orderTicketsSection .ticketDetailNotes {
      left: 110px;
      top: 105px;
  }
  
  .orderTicketsSection .ticketDetailVenue {
      left: 110px;
      top: 135px;
  }
  
  .orderTicketsSection .ticketDetailStub {
      left: 285px;
      top: 140px;
  }

  .orderTicketsSection select, input {
    max-width: 640px;
  } 
}

@media only screen and (max-width: 575px) {
  #plainTicketDiv {
      width: 480px;
      height: 169px;
  }

  #plainTicketDiv img {
      left: 448px;
  }

  #hologramTicketDiv {
      width: 480px;
      height: 171px;
  }

  #hologramTicketDiv img {
      left: 448px;
  }

  .orderTicketsSection .ticketDetailGeneral {
      left: 175px;
      top: 9px;
  }
  
  .orderTicketsSection .ticketDetailEvent {
      left: 105px;
      top: 75px;
  }
  
  .orderTicketsSection .ticketDetailNotes {
      left: 105px;
      top: 100px;
  }
  
  .orderTicketsSection .ticketDetailVenue {
      left: 105px;
      top: 130px;
  }
  
  .orderTicketsSection .ticketDetailStub {
      left: 267px;
      top: 140px;
  }

  .orderTicketsSection select, input {
    max-width: 575px;
  } 
}

@media only screen and (max-width: 480px) {
  #hologramTicketDiv {
      width: 320px;
      height: 114px;
  }

  #hologramTicketDiv img {
      left: 288px;
  }

  .orderTicketsSection .ticketDetailGeneral {
      left: 117px;
      top: 5px;
  }
  
  .orderTicketsSection .ticketDetailEvent {
      left: 70px;
      top: 50px;
  }
  
  .orderTicketsSection .ticketDetailNotes {
      left: 70px;
      top: 63px;
  }
  
  .orderTicketsSection .ticketDetailVenue {
      left: 70px;
      top: 82px;
  }
  
  .orderTicketsSection .ticketDetailStub {
      font-size: 3px;
      left: 110px;
      top: 145px;
  }

  .orderTicketsSection select, input {
    max-width: 480px;
  } 
}

@media only screen and (max-width: 320px) {
  .orderTicketsSection h2 {
      font-size: 18px;
      text-transform: uppercase;
      margin-top: 15px;
  }
  .orderTicketsSection select, input {
      min-width: 200px;
      font-size: 12px;
      max-width: 320px;
  }

  .orderTicketsSection textarea {
      width: 195px;  
      font-size: 12px; 
  }

  .orderTicketsSection button {
      font-size: 12px;
  }
  .orderTicketsSection .label {
      width: 125px;
  }

  #hologramTicketDiv {
      width: 240px;
      height: 86px;
  }

  #hologramTicketDiv img {
      left: 208px;
  }
}

.orderTicketsSection .priceTable {
  border-collapse: collapse;
  display: inline-block;
}

.orderTicketsSection .priceTable td, .orderTicketsSection .priceTable th {
  border: 1px solid black;
  padding: 5px;
}

.orderTicketsSection .priceTable th {
  text-align: left;
}

.orderTicketsSection .priceTable td.number {
  text-align: right;
}

.orderTicketsSection .priceTable input {
  min-width: 75px;
  width: 75px;
}

.orderTicketsSection .totalDiv {
  display: none;
}

.orderTicketsSection .error {
  display: none;
  color: red;
  font-weight: bold;
}

.orderTicketsSection .orderTable th {
  width: 200px;
}

.orderTicketsSection .active {
  display: block;
}

.orderTicketsSection .inactive {
  display: none;
}

@media print {
  #printButton, #updateButton, #backButton, #emailRow {
      display: none;
  }

  body {
      padding: 0;
      font-size: 10px;
      zoom: 80%;
  }

  .orderTicketsSection .orderTable th {
      width: 300px;
  }
  
  .orderTicketsSection h2 {
      font-size: 18px;
      margin: 0;
  }

  #controlView {
      display: none;
  }
  
  #printView {
      display: block;
  }
}