@media screen and (max-width: 1000px) {
    /* responsive overrides for NO */
    * {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    img {
        max-width: 100%;
    }

    /* general page structure; small-screen */
    #container {
        width: 65%;
    }
    .navbar .brand svg {
        top: 3px;
    }
    body.standard #orderbodyContainer, #orderbodyContainer {
        width: 100%;
        float: left;
    }
    #orderbody, body.custom #orderbody {
        width: 100%;
        max-width: 700px;
        padding: 3%;
    }
    body.standard #orderbody {
        padding-top: 0;
    }
    body.standard #footer, body.custom #footer {
        padding: 0;
        width: 100%;
        margin: 0;
        font-size: 11px;
        line-height: 1.5em;
    }
    #footer {
        clear: both;
    }
    #footer p, body.custom #footer p {
        padding: 10px 15px;
        margin: 0;
    }
    h2 {
        font-size: 16px;
        line-height: 1.2em;
        margin-bottom: 10px;
    }
    #form {
        padding: 0;
    }

    /* event list, event status; used on the nosale and crossdomain event listing pages */
    .eventStatus {
        font-size: 20px;
        line-height: 1.5em;
        margin: 10px 0;
    }
    .eventList p, .eventList ul {
        margin: 0;
        line-height: 1.2em;
    }
    .eventList ul {
        margin: 20px 0 20px;
    }

    /* rework the pixel-perfect block structure */
    .blocks {
        margin: 0;
    }
    .blocks div {
        display: block;
        float: none;
        margin: 0;
    }
    .blocks .vertright {
        margin: 0;
        padding: 0;
        border: 0;
    }
    #orderbody .blocks .vertright hr {
        display: none;
    }
    .oneW, .twoW, .threeW, .fourW, .fiveW, .sixW, .sevenW, .eightW {
        width: 100%;
    }
    .blocks hr.tight {
        margin: 5px 0;
    }
    .blocks div.has-tracker div.submit-buttons {
        position: static;
    }
    .blocks #donation-tracker {
        margin-top: 20px;
    }
    /* sometimes blocks are used just to space things out; we don't do that anymore */
    .blocks div.spacer {
        display: none;
    }

    /* top event info */
    .top-event-info br {
        display: none;
    }
    .top-event-info p {
        margin: 5px 0;
    }
    .top-event-info h3 {
        margin: 0;
    }
    .top-event-info div {
        float: left;
    }
    .top-event-info .twoW {
        width: 25%;
    }
    .top-event-info .sixW {
        width: 75%;
    }
    #orderbody .order-section {
        margin-top: 10px;
        border-style: dotted;
        border-color: #DDD;
        border-width: 1px 0 0;
        padding-top: 10px;
        overflow: hidden;
    }
    #orderbody .order-section hr {
        display: none;
    }
    #orderbody .order-section h3 {
        margin: 0 0 2px;
    }

    /*-- order items page --*/
    .ticket_grouping {
        margin-bottom: 25px;
    }
    .item-headers {
        clear: both;
        overflow: hidden;
        padding-bottom: 10px;
        border-bottom: dotted 1px #999;
        margin-bottom: 10px;
    }
    #orderbody .item-headers hr {
        display: none;
    }
    .item-headers .item-header, .item-lines .item-line {
        float: left;
        text-transform: none;
    }
    .item-headers .thumb-header {
        display: none;
    }
    .blocks div.item-description {
        margin: 0;
        clear: none;
        width: 100%;
        float: left;
    }
    .with-thumbs div.item-description {
        width: 90%;
        float: right;
    }
    /* ticket thumbnail holder; hide by default (it acts as a spacer in normal view but we don't
       want it taking space in responsive) */
    .blocks .tickThumb {
        display: none;
    }
    .with-thumbs .tickThumb {
        display: block;
        float: left;
        width: 10%;
        padding-right: 8px;
        text-align: left;
    }
    .tickThumb a {
        display: block;
    }
    div.tickThumb img {
        padding: 0;
        float: right;
    }
    /* item header/line */
    .type-header, .type-line {
        width: 35%;
        padding-right: 5px;
    }
    .with-thumbs .type-header {
        padding-left: 10%;
    }
    .with-thumbs .type-line {
        width: 25%;
    }
    /* item qty header/line */
    .quantity-header, .quantity-line {
        width: 25%;
    }
    /* amount/subtotal header/line */
    .amount-header, .amount-line, .subtotal-header, .subtotal-line {
        width: 20%;
        text-align: right;
    }
    #orderbody .item-divider {
        display: none;
    }
    .blocks .promo-code-input {
        width: 35%;
        float: left;
    }
    .blocks .promo-code-input input {
        margin: 0;
        width: 100%;
    }
    .blocks .promo-code-button {
        margin-left: 2%;
        width: 10%;
        float: left;
    }
    #coupon_error, #password_error {
        margin-left: 2%;
        width: 51%;
        float: left;
    }
    #promoDescAll h3, #promoDescAll hr {
        display: none;
    }
    #promoDescripts {
        margin: 5px 0;
    }
    .order-referral input {
        width: 35%;
    }
    .blocks .order-totals {
        text-align: right;
    }
    .order-totals h3 {
        display: none;
    }
    .blocks .order-total-label {
        width: 65%;
        float: left;
        clear: left;
    }
    .blocks .order-total-item {
        width: 35%;
        float: left;
    }
    .blocks .order-total-discount-note {
        width: 100%;
        text-align: right;
    }
    .blocks .order-grand-total {
        font-size: 14px;
    }
    /*-- end order items page --*/

    /*-- seating page --*/
    .blocks div.currentSeats {
        float: left;
        width: 60%;
    }
    /*-- end seating page --*/

    /*-- item registration page --*/
    .registration .ticket {
        border-top: solid 3px #DDD;
    }
    .registration .ticket ul {
        width: 100%;
    }
    .registration .ticket strong {
        display: block;
        float: none;
        width: 100%;
        padding-bottom: 10px;
        border-bottom: dotted 1px #999;
        margin-bottom: 10px;
    }
    .registration .field {
        width: 100%;
        margin-bottom: 8px;
        overflow: hidden;
    }
    .registration .field label {
        width: 40%;
        padding: 0 7px 0 0;
        line-height: 1.2em;
        float: left;
        clear: left;
    }
    .registration .field input {
        margin: 0;
        width: 60%;
        float: right;
    }
    /*-- end item registration page --*/

    /*-- separate donation page --*/
    .separate-donation .donation-line {
        overflow: hidden;
    }
    .separate-donation .donation-description {
        width: 50%;
        float: left;
    }
    .separate-donation .donation-amount {
        width: 50%;
        float: right;
    }

    /*-- order payment page --*/
    .order-status {
        padding: 5px;
        border: dotted 1px #999;
    }
    #orderbody .order-status hr {
        display: none;
    }
    .order-status h3 {
        margin: 0;
        text-transform: none;
    }
    .blocks .order-status-items {
        padding-bottom: 5px;
        border-bottom: dotted 1px #999;
        margin-bottom: 5px;
    }
    .order-status-items .item-lines {
        margin-top: 5px;
    }
    .order-status-items .quantity-header, .order-status-items .quantity-line,
    .order-status-items .subtotal-header, .order-status-items .subtotal-line {
        padding-right: 10px;
    }
    .order-status-items .subtotal-header, .order-status-items .subtotal-line {
        padding-right: 2px;
    }
    .payment-login {
        overflow: hidden;
    }
    .blocks .payment-login-label {
        float: left;
        width: 15%;
    }
    .blocks .payment-login-input {
        float: left;
        margin-left: 2%;
        width: 23%;
    }
    .blocks .payment-login-submit,
    .blocks .giftcard-submit {
        float: left;
        width: 18%;
        margin-left: 2%;
        text-align: right;
    }
    .payment-login-input input,
    .giftcard-item input {
        width: 100%;
        margin: 0;
    }
    .payment-login-submit input,
    .giftcard-submit input {
        width: 100px;
    }
    .paytype .main {
        margin-bottom: 10px;
    }
    .blocks .payment-label,
    .blocks .giftcard-label {
        clear: left;
        float: left;
    }
    .blocks .payment-label {
        width: 32%;
    }
    .blocks .payment-item {
        float: left;
        margin-left: 2%;
        width: 66%;
    }
    .payment-credit input {
        width: 100%;
    }
    .blocks .giftcard-label {
        width: 16%;
    }
    .blocks .giftcard-item {
        float: left;
        margin-left: 2%;
        width: 23%;
    }
    #giftcard-form {
        border-bottom: none;
    }
    .giftcard-balance {
        width: 49%;
    }
    /* these images have hardcoded dimensions, along with borders; content-box ensures they
       display correctly */
    .payment-credit img {
        -mox-box-sizing: content-box;
        box-sizing: content-box;
    }
    ul.dtypeopts {
        margin: 0;
    }
    .address-fields {
        overflow: hidden;
    }
    .blocks .address-label {
        clear: left;
        float: left;
        width: 35%;
    }
    .blocks .address-label label {
        line-height: 1.2em;
        line-height: 25px;
    }
    .blocks .address-input {
        float: left;
        margin-left: 4%;
        width: 61%;
    }
    .blocks .address-input input, .blocks .address-input select {
        width: 100%;
        margin: 2px 0;
        vertical-align: middle;
    }
    .payment-note p {
        margin: 5px 0;
    }

    /* order approve pages */
    .approve-details {
        background: white;
    }
    .approve-details p {
        text-align: left;
    }
    .approve-details .num {
        text-align: right;
    }
    .approve-totals .order-total-label {
        text-align: left;
        width: 30%;
        font-weight: bold;
    }
    .approve-totals .order-total-item {
        text-align: left;
        margin-left: 2%;
        width: 68%;
    }
    .mobile-fields div {
        text-align: left;
    }
    .blocks .terms-conditions {
        float: none;
    }

    /* the "notify" form style, used on the eregister and "notify me" pages */
    .notifyForm {
        width: 100%;
        margin: 0;
        padding: 10px 0;
        border-color: #999;
        border-width: 1px 0 0;
        border-style: solid;
        font-size: 13px;
        line-height: 1.5em;
    }
    .signinForm {
        padding: 0;
        border: 0;
        margin: 0 0 15px;
    }
    .signinForm .buttons .submit {
        float: left;
    }
    .signinForm .buttons .forgot-password {
        float: right;
        font-size: 12px;
        line-height: 32px;
    }
    .signinForm .buttons {
        overflow: auto;
    }

    h2.signin-header {
      border: solid 1px #CCC;
      border-width: 0 0 1px;
      padding: 0 0 5px;
      margin: 0 0 8px;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      word-spacing: 0.1em;
      color: #444;
      font-size: 14px;
    }

    /* the presales notify form doesn't need a border at all */
    .presales {
        border: 0;
    }
}

@media screen and (max-width: 900px) {

    #container {
        width: 75%;
    }

}

@media screen and (max-width: 800px) {

    #container {
        width: 85%;
    }

    /* linearize login form */
    .blocks .payment-login-label,
    .blocks .giftcard-label {
        clear: left;
        width: 25%;
    }
    .blocks .payment-login-input {
        margin-left: 2%;
        width: 43%;
    }
    .blocks .giftcard-item {
        margin-left: 2%;
        width: 43%;
    }

    /* skip side-by-side at smaller widths */
    .top-event-info .twoW,
    .top-event-info .sixW {
        width: 100%;
        float: none;
        text-align: left;
    }

}

@media screen and (max-width: 398px) {
    .blocks .giftcard-label label {
        line-height: 16px;
    }
}

@media screen and (max-width: 550px) {
    #container {
        width: 95%;
    }

    #orderbody .order-section {
        border-style: solid;
        border-width: 3px 0 0;
    }
    .blocks .promo-code-input {
        width: 75%;
    }
    #coupon_error, #password_error {
        width: 100%;
        margin: 5px 0 0;
        clear: left;
    }
    .blocks .order-referral input {
        width: 75%;
    }
    .notifyForm .fields label {
        width: 100%;
        float: none;
    }
    .notifyForm .fields input {
        width: 100%;
        float: none;
    }

    .blocks div.currentSeats {
        float: none;
        width: 100%;
    }

}

@media screen and (max-width: 500px) {

    /* make the brand a bit smaller */
    /* we use the 2x image here along with background-size to always serve the retina-friendly
       image. The size difference is not enough to invoke a double download to only retina browsers, so we always serve it. */
    .navbar .brand {
        width: 200px;
        height: 28px;
    }
    .navbar .brand svg {
        height: 22px;
        width: auto;
    }
    .navbar .navbar-inner {
        padding: 5px 0 5px 10px;
    }
    .navbar .nav > li > a {
        padding: 7px;
    }
    .top {
        padding-top: 60px;
    }
    body.standard #container {
        margin-top: 10px;
    }

    .blocks .payment-login-input {
        width: 73%;
    }

    .blocks .payment-login-submit,
    .blocks .giftcard-submit {
        clear: left;
        width: 100%;
        margin: 5px 0 0;
    }
    .blocks .giftcard-label {
        width: 27%;
    }
    .blocks .giftcard-item {
        width: 71%;
    }
    .giftcard-balance {
        width: 73%;
    }

    .separate-donation .donation-description {
        width: 100%;
        float: none;
    }
    .separate-donation .donation-amount {
        width: 100%;
        float: none;
    }

}

/* remove side-by-side finalize order button and note */
@media screen and (max-width: 400px) {
    .finalize-order input {
        width: auto;
        float: none;
    }
    .finalize-order p {
        width: 100%;
        float: none;
        margin: 5px 0;
    }
}

/* support retina images for larger screens; specify width to avoid double download. We don't
   serve this @2x in the main CSS because IE < 9 doesn't support background-size, so we want to be
   a little more selective when serving up the normal image.
   https://gist.github.com/marcedwards/3446599 for an explanation of the query */
@media only screen and (min-width: 501px) and (-webkit-min-device-pixel-ratio: 1.3),
       only screen and (min-width: 501px) and (-o-min-device-pixel-ratio: 13/10),
       only screen and (min-width: 501px) and (min-resolution: 120dpi) {

}