/**
 * tedQ.css - Consolidated styles for tedQ.php
 *
 * Includes all styles from css/ted_css.css plus inline styles from ted.php.
 * Class names preserved for AJAX endpoint HTML compatibility.
 */

/* ============================================
   PANEL / ACCORDION
   ============================================ */

.panel-group .panel {
    border-radius: 0px;
}

.tick {
    padding-right: 20px;
}

.panel-default, .panel-body {
    border: none;
    border-bottom-color: white;
}

.panel-heading {
    border-radius: 0px;
    padding-top: 20px;
    border: none;
}

.panel-title {
    margin-left: 10px;
    margin-bottom: 10px;
}

.panel-title a {
    display: block;
}

.panel-default > .panel-heading + .panel-collapse .panel-body {
    padding: 0;
    border-top-color: white;
}


/* ============================================
   BUTTON STYLES
   ============================================ */

.btn-group {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    margin-bottom: 8px;
}

.btn-byo-group,
.btn-byo-group-brand-usb,
.btn-byo-group-brand-frame,
.btn-byo-group-brand-box {
    background-color: white;
    border-color: #D1D1C4;
}

.btn-byo-group:hover,
.btn-byo-group:active {
    background-color: #f5f5f5;
}

.btn-byo-mounts-group-active,
.btn-byo-group-active,
.btn-byo-group-brand-usb-active,
.btn-byo-group-brand-frame-active,
.btn-byo-group-brand-box-active,
.btn-byo-group-prints-active {
    background-color: #349D77;
    color: white !important;
}

.btn-byo-group-active:hover,
.btn-byo-group-active:active {
    color: white;
}

.btn-byo-mounts-group-active:hover,
.btn-byo-mounts-group-active:active {
    color: white;
}

.btn-byo,
.btn-byo-branding {
    text-align: left;
    width: 100%;
    border: none;
    border-bottom: 1px solid #D1D1C4;
    padding: 10px 20px 10px 30px;
    background: none !important;
}

.btn-byo-active,
.btn-byo-branding-active {
    text-align: left;
    width: 100%;
    background-color: #349D77;
    color: white;
    padding: 10px 20px 10px 30px;
    border: none;
}

.usb-btn-byo {
    text-align: left;
    width: 100%;
    border: none;
    border-bottom: 1px solid #D1D1C4;
    padding: 10px 20px 10px 30px;
    background: none !important;
}

.usb-btn-byo-active {
    text-align: left;
    width: 100%;
    background-color: #349D77;
    color: white;
    padding: 10px 20px 10px 30px;
    border: none;
}

.frame-btn-byo {
    text-align: left;
    width: 100%;
    border: none;
    border-bottom: 1px solid #D1D1C4;
    padding: 10px 20px 10px 30px;
    background: none !important;
}

.frame-btn-byo-active {
    text-align: left;
    width: 100%;
    background-color: #349D77;
    color: white;
    padding: 10px 20px 10px 30px;
    border: none;
}

.insert-btn-byo {
    text-align: left;
    width: 100%;
    border: none;
    border-bottom: 1px solid #D1D1C4;
    padding: 10px 20px 10px 30px;
    background: none !important;
}

.insert-btn-byo-active {
    text-align: left;
    width: 100%;
    background-color: #349D77;
    color: white;
    padding: 10px 20px 10px 30px;
    border: none;
}

.capacity-btn-byo {
    text-align: left;
    width: 100%;
    border: none;
    border-bottom: 1px solid #D1D1C4;
    padding: 10px 20px 10px 30px;
    background: none !important;
}

.capacity-btn-byo-active {
    text-align: left;
    width: 100%;
    background-color: #349D77;
    color: white;
    padding: 10px 20px 10px 30px;
    border: none;
}

.overallsize-btn-byo {
    text-align: left;
    width: 100%;
    border: none;
    border-bottom: 1px solid #D1D1C4;
    padding: 10px 20px 10px 30px;
    background: none !important;
}

.overallsize-btn-byo-active {
    text-align: left;
    width: 100%;
    background-color: #349D77;
    color: white;
    padding: 10px 20px 10px 30px;
    border: none;
}

.btn-byo-first {
    border-top: 1px solid #D1D1C4;
}

.btn-green {
    border-radius: 0px;
    background-color: #349D77;
    color: white;
}

.btn-green:hover {
    border-radius: 0px;
    background-color: #2eb383;
    color: white;
}

.btn-blue {
    border-radius: 0px;
    background-color: #5bc0de;
    color: white;
}

.btn-blue:hover {
    border-radius: 0px;
    background-color: #5bc0de;
    color: white;
}

.btn-black {
    border-radius: 0px;
    background-color: #000;
    color: white;
}

.btn-black:hover {
    border-radius: 0px;
    background-color: #7b7672;
    color: white;
}

.btn-primary {
    border-radius: 0;
}


/* ============================================
   COLOUR SWATCH STYLES
   ============================================ */

.usb_box-color-notselected {
    margin-right: 2px;
    margin-bottom: 4px;
    border: 1px solid #999999;
    width: 60px;
    height: 60px;
}

.usb_box-color-selected {
    margin-right: 2px;
    margin-bottom: 4px;
    border: 3px solid #349D77;
    width: 60px;
    height: 60px;
}

.frame_box-color-notselected {
    margin-right: 2px;
    margin-bottom: 4px;
    border: 1px solid #999999;
    width: 60px;
    height: 60px;
}

.frame_box-color-selected {
    margin-right: 2px;
    margin-bottom: 4px;
    border: 3px solid #349D77;
    width: 60px;
    height: 60px;
}

.color-notselected,
.box_branding_color-notselected,
.usb_branding_color-notselected,
.usb-color-notselected,
.frame_branding_color-notselected,
.frame-color-notselected,
.bag-color-notselected,
.lid-color-notselected,
.mount-color-notselected {
    margin-right: 2px;
    margin-bottom: 4px;
    border: 1px solid #999999;
    width: 60px;
    height: 60px;
}

.color-selected,
.box_branding_color-selected,
.usb_branding_color-selected,
.usb-color-selected,
.frame_branding_color-selected,
.frame-color-selected,
.mount-color-selected,
.lid-color-selected,
.bag-color-selected {
    margin-right: 2px;
    margin-bottom: 4px;
    border: 5px solid #349D77;
    width: 60px;
    height: 60px;
}

.selected-img {
    border: 3px solid #349D77;
}

.image-notselected {
    margin-right: 2px;
    margin-bottom: 4px;
    border: 1px solid #999999;
}

.image-selected {
    margin-right: 2px;
    margin-bottom: 4px;
    border: 3px solid #349D77;
}


/* ============================================
   PRODUCT PREVIEW
   ============================================ */

#product-preview {
    background-color: grey;
    background: url(../images/byo-product-preview-bg-gradient.jpg);
    background-repeat: repeat-x;
    background: -webkit-linear-gradient(top, #d8d8d8, #ffffff);
    background: -moz-linear-gradient(top, #d8d8d8, #ffffff);
    background: -ms-linear-gradient(top, #d8d8d8, #ffffff);
    background: -o-linear-gradient(top, #d8d8d8, #ffffff);
    background: linear-gradient(to bottom, #d8d8d8, #ffffff);
    width: 100%;
    border: 1px solid white;
}

.planetimage {
    position: relative;
    border: 0px solid green;
}

.planetimage .base {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.planetimage .overlay {
    position: absolute;
    top: 0;
    left: 0;
}

.imgcomp {
    margin-top: 50px;
}


/* ============================================
   LAYOUT
   ============================================ */

.row {
    margin-right: 0px;
    margin-left: 0px;
}

.col-md-9 {
    padding-left: 0px;
    padding-right: 0px;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container-fluid {
    height: 100%;
    display: table;
    width: 100%;
    padding: 0;
}

img.centerme {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* ============================================
   TEXT & PRICING
   ============================================ */

.title-choose {
    font-size: 1em;
    font-weight: bold;
    padding: 10px;
}

.colours {
    padding: 0 16px 10px 16px;
    border: 0px solid yellow;
    min-height: 40px;
    margin-left: auto;
    margin-right: auto;
}

.productName {
    font-weight: bold;
    padding-top: 15px;
}

.priceTop {
    color: #349D77;
    text-align: center;
}

.greenPriceText {
    color: #349D77;
}

.right-info-box {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-bottom: 20px;
    font-size: 1.2em;
}

.table-striped {
    font-size: 1.2em;
}

#productHeader {
    text-align: center;
    font-size: 1.5em;
    padding-bottom: 10px;
}

#cartContent {
    margin: 20px;
}

.mobilePriceRange {
    font-size: 1.5em;
    text-align: center;
}


/* ============================================
   INSPIRATIONS
   ============================================ */

.inspirations {
    clear: both;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}

.hline {
    width: 95%;
    background: url('../images/bg-byo-inspirationline.png');
    background-repeat: repeat-x;
    background-position: center center;
    margin-right: auto;
    margin-left: auto;
}

.inspirationHeader {
    background-color: white;
    margin-right: auto;
    margin-left: auto;
    padding: 5px 15px;
    color: grey;
    display: inline-block;
    font-size: 1.2em;
}

.sliderDiv {
    width: 90%;
    border: 0px solid red;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.slick-prev:before,
.slick-next:before {
    color: #555;
}


/* ============================================
   MESSAGE BOXES (extracted from inline styles)
   ============================================ */

#added_to_cart_messagebox,
#updated_messagebox,
#save_messagebox {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 150px;
    margin-top: -75px;
    margin-left: -150px;
    z-index: 99999999;
    display: none;
    padding: 20px;
    text-align: center;
    background-color: #EEEEEE;
    border-radius: 10px;
    -moz-border-radius: 10px;
    box-shadow: 5px 5px 10px #888888;
    font-size: 20px;
}

#failed_to_add_to_cart_messagebox,
#save_fail_messagebox {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    margin-top: -75px;
    margin-left: -150px;
    z-index: 99999999;
    display: none;
    padding: 50px;
    text-align: center;
    background-color: #FFE1E1;
    color: #CC0000;
    border-radius: 10px;
    -moz-border-radius: 10px;
    box-shadow: 5px 5px 10px #888888;
    font-size: 20px;
}


/* ============================================
   DIGITAL SELECT (quantum/usb/none)
   ============================================ */

.digital-selected {
    border: 5px solid #349D77;
    border-radius: 15px;
}

.digital-notselected {
    border: 1px solid #ccc;
    border-radius: 15px;
}


/* ============================================
   MOUNT / MAT OPTIONS
   ============================================ */

.fully_loaded_selected {
    border: 4px solid #349D77;
}


/* ============================================
   BRANDING
   ============================================ */

.branding_swatch_disabled {
    opacity: 0.3;
}


/* ============================================
   TOOLTIPS
   ============================================ */

.tooltip.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-bottom-color: #ccc;
    border-width: 0 5px 5px;
}

.tooltip > .tooltip-inner {
    background-color: #ccc;
    color: black;
}

.tooltip > .tooltip-arrow {
    border-bottom-color: #ccc;
}


/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (min-width: 768px) {
    .inspirations {
        display: block;
    }

    .title-choose {
        font-size: 0.8em;
    }

    #productHeader {
        text-align: left;
        font-size: 1em;
    }

    .table-striped {
        font-size: 0.8em;
    }

    .right-info-box {
        font-size: 1em;
    }
}

@media (min-width: 800px) {
    #mobile-header-price {
        display: none;
    }

    #right-info-box {
        display: block;
    }

    #product-preview {
        border: 0px solid white;
    }
}

@media (min-width: 870px) and (orientation: landscape) {
    .imgcomp {
        margin-top: 0px;
    }
}

@media (min-width: 990px) and (max-width: 1353px) {
    #productHeader {
        font-size: 0.8em;
    }
}