/* General Commerce Styles */ #commerce h1 { margin: 0% 0% 0.5em 0%; padding: 0.5em 0% 0% 0%; font-size: 2.25em; line-height: 1.25em; font-weight: 600; color: #333333; } #commerce h2 { margin: 0.5em 0% 0.5em 0%; padding: 0% 0% 0% 0%; font-size: 1em; line-height: 1.25em; font-weight: 600; color: #333333; } #commerce h3 { margin: 0.5em 0% 0.5em 0%; padding: 0% 0% 0% 0%; font-size: 1em; line-height: 1.25em; font-weight: 600; color: #333333; } #commerce h4 { margin: 0.5em 0% 0.5em 0%; padding: 0% 0% 0% 0%; font-size: 1em; line-height: 1.25em; font-weight: 600; color: #333333; } #commerce p { margin: 0.5em 0% 0.5em 0%; padding: 0% 0% 0% 0%; font-size: 1em; line-height: 1.25em; font-weight: 400; color: #000000; } #commerce table { margin: 0% 0% 0% 0%; width: 100%; font-size: 1em; border: 0px none; } #commerce table tr { margin: 0% 0% 0% 0%; padding: 0% 0% 0% 0%; font-size: 1em; border: 0px none; } #commerce table th { margin: 0% 0% 0% 0%; padding: 10px; font-size: 1em; border: 0px none; background-color:transparent; color:#333333; } #commerce table td { margin: 0% 0% 0% 0%; padding: 10px; font-size: 1em; border: 0px none; background-color:transparent; color:#333333; } #commerce .button, #commerce button { min-width:0px; } #commerce #basket-summary div.button, #commerce #basket-summary .button { margin: 0.5em 0% 0.5em 0%; } #commerce table td .item_description span.discount_label { color:#EC0000; } #commerce table tr.line_container { border-bottom: 1px solid #9A9A9A; } #commerce table tr.line_container .item_description .reference { display:inline-block; margin-left: 2%; font-size: 0.8em; } #commerce table tr.line_container:last-child { border-bottom: 0px none; } #commerce table td.qty { text-align: center; } #commerce table td.price { text-align: center; } #commerce table td.price .discounted_price { display:block; text-decoration: line-through; color:#EC0000; } #commerce table td.pricetotal { text-align: center; } #commerce table td.pricetotal .discounted_price { display:block; text-decoration: line-through; color:#EC0000; } #commerce label { display: block; } #commerce input, #commerce select, #commerce textarea { margin: 0% 0% 0% 0%; padding: 0.25em 0.25em 0.25em 0.25em; width: 90%; font-size: 1em; line-height: 1.25em; font-weight: 400; color: #000000; border: 1px solid #808080; } #commerce textarea { min-height: 5em; } #commerce input[type=checkbox], #commerce input[type=radio] { width: auto; } #commerce .disabled { opacity: 0.35; } #commerce #delivery-panel .disabled { opacity: 1; } /* Restore opacity for all elements, eg. edit delivery button */ #commerce #delivery-panel .disabled h3, #commerce #delivery-panel .disabled .existing_address, #commerce #delivery-panel .disabled .details { opacity: 0.35; } #commerce .button, #commerce button { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; display: inline-block; } #commerce .button a { display: block; } #commerce .button a, #commerce button { padding: 5px; font-size: 1em; line-height: initial; font-weight: bold; color: #FFFFFF; border: 0px none; text-align: center; } #commerce .color-1st { background-color: #FA7D23; } #commerce .color-1st:hover { background-color: #454545; } #commerce .color-2nd { background-color: #FA7D23; } #commerce .color-2nd:hover { background-color: #454545; } #commerce .color-3rd { background-color: #FA7D23; } #commerce .color-3rd:hover { background-color: #454545; } #commerce button.update { background-color: #808080; } #commerce button.update:hover { background-color: #909090; } #commerce button.remove { background-color: #FF0000; } #commerce button.remove:hover { background-color: #FF4040; } #commerce span.icon { width: auto; font-size: 1em; display: inline; position: relative; } #commerce span.icon:after { font-style: normal; font-weight: normal; line-height: 1em; text-align: center; } #commerce span.icon.update { font-size: 0.875em; } #commerce span.icon.update:after { content: '\f021'; } #commerce span.icon.delete:after { content: '\f00d'; } #commerce hr { margin: 0% 0% 0% 0%; border-color: #9A9A9A; } /* Basket Styles */ #commerce #basket-items { padding: 10px; width: 66%; background-color: #EFEFEF; float: left; } #commerce #basket-items #basket-count { margin: 4px 0%; width: 50%; font-size: 1.125em; float: left; } #commerce #basket-items #continue-shopping { margin: 4px 0%; width: 30%; text-align: center; float: left; } #commerce #basket-items #continue-shopping a { color: #676858; } #commerce #basket-items #continue-shopping a:hover { text-decoration: underline; } #commerce #basket-items #checkout { width: 20%; } #commerce #basket-items #empty-basket { margin: 10px 0% 0% 10px; } #commerce #basket-items #empty-basket a { font-size: 0.75em; color: #D3C199; } #commerce #basket-items #empty-basket a:hover { text-decoration: underline; } #commerce #basket-items table { margin: 0.625em 0% 0% 0%; border-bottom: 1px solid #9A9A9A; } #commerce #basket-items th { padding: 5px; font-size: 0.875em; border-bottom: 1px solid #9A9A9A; text-align: center; } #commerce #basket-items td { margin: 0% 0% 0% 0%; } #commerce #basket-items td.image { width: 15%; } #commerce #basket-items td.image .image_dimensions { border: 1px solid #9A9A9A; } #commerce #basket-items td.item { width: 40%; } #commerce #basket-items td.qty { width: 25%; } #commerce #basket-items td.price { width: 10%; } #commerce #basket-items td.pricetotal { width: 10%; } #commerce #basket-items td img { max-width: 100%; max-height: 100%; vertical-align: middle; } #commerce #basket-items td input, #commerce #basket-items td select, #commerce #basket-items td textarea { margin: 0% 0% 5px 0%; width: 100%; padding: 4px; font-size: 1em; } #commerce #basket-items .item_quantity { margin: 0 0 5px; } #commerce #basket-items .quantity-change { padding: 0.5em 0.25em; width: 30%; color: #FFFFFF; background-color: #808080; text-align: center; display: none; cursor: pointer; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } #commerce #basket-items .item_quantity input { margin: 0; width: 40%; max-width: 50px; text-align: center; } #commerce #basket-items table.recipient_assign { margin: 10px 0% 10px 0%; border: 0px none; } #commerce #basket-items table.recipient_assign .recipient { border-width: 10px 0px 30px 0px; border-style: solid; border-color: transparent; } #commerce #basket-items table.recipient_assign td { padding: 0% 0% 0% 0%; font-size: 0.9375em; vertical-align: baseline; } #commerce #basket-items table.recipient_assign td input, #commerce #basket-items table.recipient_assign td select, #commerce #basket-items table.recipient_assign td textarea { font-size: 1.07em; } #commerce #basket-items table.recipient_assign td.recipient_right { text-align: right; } #commerce .save-buttons button { margin: 0.5em 0 0.5em 0.5em; } #commerce .save-buttons button:first-child { margin-left: 0; } #commerce #basket-summary { padding: 10px; width: 27%; background-color: #EFEFEF; float: right; } #commerce #basket-summary #heading { margin: 4px 0%; font-size: 1.125em; } #commerce #basket-summary table { margin: 1em 0% 0% 0%; } #commerce #basket-summary table th { padding: 4px 10px; font-size: 0.875em; border-bottom: 1px solid #9A9A9A; text-align: left; vertical-align: middle; } #commerce #basket-summary table td { padding: 4px 10px; font-size: 1.125em; border-bottom: 1px solid #9A9A9A; text-align: right; vertical-align: middle; } #commerce #basket-summary p { padding: 5px; font-size: 0.75em; } #commerce .basket-footer-buttons { margin-top:1.5em; } /* Checkout Styles */ #commerce .checkout-left { width: 100%; float: left; } #commerce .checkout-right { width: 100%; float: right; } /* Checkout Basket Styles */ #commerce #checkout-details { padding: 2em 1.5em; } #commerce #checkout-details table { margin: 0% 0% 2em 0%; border-bottom: 0px none; } #commerce #checkout-details th { padding: 5px; font-size: 0.875em; border-bottom: 1px solid #9A9A9A; text-align: center; } #commerce #checkout-details td { width: 20%; vertical-align: middle; } #commerce #checkout-details td.adjusment_label { width: 100%; } #commerce #checkout-details td.product_label { width: 100%; } #commerce #checkout-details td.image { width: 15%; } #commerce #checkout-details td.image .image-container { width: 60%; padding-top: 60%; height: 0; position: relative; } #commerce #checkout-details td.image .image_container .image_dimensions { border: 1px solid #D0D0D0; } #commerce #checkout-details td.image .image-container .thumb { margin: 0em auto 0em auto; padding: 1px 1px 1px 1px; left: 0; right: 0; top: 0; bottom: 0; background-color: #FFFFFF; border: 1px solid #9A9A9A; text-align: center; vertical-align: middle; position: absolute; display: inline-block; } #commerce #checkout-details td.image .image-container .thumb:before { width: 0; height: 100%; content: ""; vertical-align: middle; display: inline-block; } #commerce #checkout-details td.image .image-container .thumb img { white-space: normal; display: inline; } #commerce #checkout-details td img { max-width: 100%; max-height: 100%; vertical-align: middle; } #commerce #checkout-details td.item { width: 40%; } #commerce #checkout-details td.price { width: 15%; } #commerce #checkout-details td.qty { width: 15%; } #commerce #checkout-details td.pricetotal { width: 15%; } #commerce #checkout-details tr:last-child { border-bottom: 0%; } #commerce #checkout-details td input { margin: 0% 0% 0% 0%; padding: 4px; width: 50px; font-size: 0.875em; text-align: center; } #commerce #checkout-details table.recipient_assign tr td input.fullwidth { width: 100px; text-align: left; } #commerce #checkout-details table.participant_assign { margin: 0.5rem 0 0; } #commerce #checkout-details table.participant_assign td { padding-left:0; width:100%; } #commerce #checkout-details table.participant_assign td.qty label { display: flex; align-items: center; } #commerce #checkout-details table.participant_assign td.qty label span.form-label { display: inline-block; font-size: 0.875rem; margin-right: 0.5rem; font-weight: 600;} #commerce #checkout-details table.participant_assign .participant_reference { font-size:0.9em; } #commerce #checkout-details table.participant_assign select { max-width:200px; margin-right:1em; font-size:0.9em; } #commerce #checkout-details table.participant_assign a { font-size:0.9em; } #commerce #checkout-details table.participant_assign button.participant-remove { background: transparent; margin-left: 1rem; padding: 0.25rem; color: #e53e3e; } #commerce #checkout-details table.participant_assign .participant-error { color: #e53e3e; font-size: 0.75rem; } #commerce #checkout-details button.add-participant { margin-top: 0.5rem; padding-left: 0; font-size: 0.75rem; color: #4299e1; font-weight: 400; background: transparent; border: 0; } #commerce #checkout-details h3 { margin-top: 0.25em; } #commerce #checkout-details textarea { width: 100%; } /* Checkout Addresses Styles */ #commerce .existing_address { width: 65%; float: left; } #commerce .existing_address select { width: 100%; } #commerce .add_address { margin: 0% 0% 0% 5%; width: 30%; float: left; } #commerce .add_address p { margin: 0% 0% 0% 0%; font-size: 1em; } #commerce .edit_address { margin: 0% 0% 0% 5%; width: 30%; float: left; } #commerce .edit_address p { margin: 0% 0% 0% 0%; font-size: 1em; } #commerce .add_address_button, #commerce .edit_address_button { padding: 5px 0.5em; font-size: 0.75em; } #commerce .add_address_button .mobile-text { display: none; } #commerce .add_address_button.delivery { margin: 0%; } #commerce .edit_address_button.delivery { margin: 0%; } #commerce .add_address_button.billing { margin: 0%; } /* Guest Checkout Styles */ #commerce .guest-checkout-panel { margin: 0% 0% 2em 0%; padding: 2em 1.5em; background-color: #ECECEC; border: none; border-radius: 6px; } #commerce .guest-checkout-panel h3 { font-size: 1.5em; font-weight: 800; text-transform: none; } #commerce .guest-checkout-panel p { margin: 1.5em 0% 0.5em 0%; } #commerce .guest-checkout-panel p.password-reset { font-size: 0.813em; } #commerce .guest-checkout-panel button { margin: 2em 0% 0% 0%; padding: 0.5em 2em; font-weight: 400; } #commerce .guest-checkout-panel label span.field_label { width: 30%; display: inline-block; vertical-align: middle; } #commerce .guest-checkout-panel label select { padding: 0.313em 0.5em; width: 62%; display: inline-block; vertical-align: middle; border: 1px solid #BBBBBB; } #commerce .guest-checkout-panel label input { padding: 0.438em 0.5em; width: 62%; display: inline-block; vertical-align: middle; border: 1px solid #BBBBBB; } #commerce .guest-checkout-panel label input[type=checkbox] { width: auto; } #commerce .guest-checkout-panel label input[type=radio] { width: auto; } #commerce .guest-checkout-panel #total-to-pay { border: 0px; } /* Guest Checkout Logged In Styles */ #commerce .guest-checkout-panel div.logged-in { text-align: center; } /* Guest Checkout Login Styles */ #commerce .guest-checkout-panel .login { width: 48%; display: inline-block; text-align: left; } #commerce .guest-checkout-panel .login label { margin: 0%; padding: 0.5em 0.25em; width: 100%; display: block; text-align: left; float: none; } #commerce .guest-checkout-panel .login.hidden { display: none; } /* Guest Checkout Password Reset Styles */ #commerce .guest-checkout-panel .reset-password-box { width: 48%; display: inline-block; text-align: left; } #commerce .guest-checkout-panel .reset-password-box.hidden { display: none; } #commerce .guest-checkout-panel .reset-password-box-complete { width: 48%; display: inline-block; text-align: left; } #commerce .guest-checkout-panel .reset-password-box-complete.hidden { display: none; } /* Guest Checkout Register Styles */ #commerce .guest-checkout-panel .register { padding: 2.5em 0% 0% 0%; width: 48%; display: inline-block; vertical-align: top; text-align: center; } #commerce .guest-checkout-panel .register button { margin: 1.5em auto; display: block; } #commerce .guest-checkout-panel .register.hidden { display: none; } /* Guest Checkout Your Details Styles */ #commerce .guest-checkout-panel #account-registration { text-align: center; } #commerce .guest-checkout-panel #account-registration h4 { margin: 1.5em 0% 0em 0%; font-size: 1.125em; font-weight: 700; } #commerce .guest-checkout-panel #account-registration p { margin: 1.5em 0% 2em 0%; } #commerce .guest-checkout-panel #account-registration label { margin: 0% 0% 0% 2%; padding: 0.5em 0.25em; width: 49%; display: block; text-align: left; float: left; } #commerce .guest-checkout-panel #account-registration label:nth-of-type(2n+1) { margin: 0%; clear: both; } #commerce .guest-checkout-panel #account-registration label.full_width { margin: 1em 0%; padding: 0.5em 0.25em; width: 100%; } #commerce .guest-checkout-panel #account-registration label.signup { text-align:center; } #commerce .guest-checkout-panel #account-registration label.registration_account_password { margin: 2em auto 0% auto; float: none; clear: both; } #commerce .guest-checkout-panel #account-registration label.registration_account_password.hidden { display: none; } #commerce .guest-checkout-panel #account-registration button { margin: 0% 0% 0% 1em; padding: 0.5em 1.5em; } #commerce .guest-checkout-panel #account-registration button.active { background-color: #888888; } #commerce .guest-checkout-panel #account-registration button.registration-proceed { margin: 4em 0% 0% 0%; } #commerce .guest-checkout-panel #account-registration button.registration-proceed.hidden { display: none; } #commerce .guest-checkout-panel #account-registration #create_password_no { margin: 0%; } #commerce .guest-checkout-panel #account-registration label.address-lookup { width: 100%; } #commerce .guest-checkout-panel #account-registration label.address-lookup span.field_label { padding: 0.625em 0; width: 14.7%; vertical-align: top; } #commerce .guest-checkout-panel #account-registration label.address-lookup input { width: 35.5%; } #commerce .guest-checkout-panel #postcode_lookup { width: 85.3%; display: inline-block; } #commerce .guest-checkout-panel #account-registration label.address-lookup + label { margin-left: 0; } #commerce .guest-checkout-panel #account-registration label.address-lookup p { margin: 0.5em 0; } #commerce .guest-checkout-panel #postcode_lookup button[name='lookup-error'] { margin: 0; color: inherit; padding: 0; background-color: transparent; } #commerce .guest-checkout-panel #postcode_lookup select { margin: 0.5em 0 0; width: 35.5%; display: block; } #commerce #getaddress_error_message { font-size: 0.875em; color: #E10000; } /* Guest Checkout Styles */ #commerce #guest-checkout { margin: 0%; padding: 0%; width: 50%; min-height: 115px; display: inline-block; vertical-align: top; } #commerce #guest-checkout h3 { font-size: 1em; font-weight: 600; } #commerce #guest-checkout label { margin: 1em 0em; } #commerce #guest-checkout input[type=text], #commerce #guest-checkout input[type=password] { margin-top: 5px; } #commerce #guest-checkout .login_email { width: 48%; float: left; } #commerce #guest-checkout .login_password { margin-top: 87px; width: 48%; float: right; } #commerce #guest-checkout .create_password { margin-top: 87px; width: 48%; float: right; } #commerce .guest-account { margin: 0%; padding: 0%; width: 50%; min-height: 115px; display: inline-block; vertical-align: top; } #commerce .guest-account.hidden { display:none; } #commerce .guest-account h3 { font-size: 1em; font-weight: 600; } #commerce .guest-account label { margin: 1em 0em; clear: both; } #commerce .guest-account .field_label { margin-top: 5px; padding: 6px 0 7px 0; width: 24%; text-align: left; float: left; } #commerce .guest-account input[type=text], #commerce .guest-account input[type=password], #commerce .guest-account select { margin-top: 5px; margin-left: 6%; width: 70%; float: right; } #commerce .guest-account #getaddress_button { margin: 8px 0 0 50px; font-size: 0.8em; } #commerce .guest-account #getaddress_error_message { margin-left: 282px; font-weight: bold; } #commerce #delivery-panel { margin: 0; padding: 30px 10px 20px 10px; width: 100%; min-height: 165px; border-bottom: 1px solid #9A9A9A; float: left; } #commerce #delivery-panel .disabled button { display: none; } #commerce #delivery-panel .disabled .edit_address button { display: block; opacity:1; } #commerce #delivery-address { padding-top: 0px; padding-right: 10px; width: 50%; float: left; } #commerce #delivery-address.hidden { display: none; } #commerce #delivery-address .details p { font-size: 0.875em; } #commerce #delivery-options { padding-left: 3%; width: 50%; border-left: 1px solid #9A9A9A; float: left; } #commerce #delivery-options table { border-bottom: 0px none; } #commerce #delivery-options td { padding: 5px 0%; vertical-align: middle; } #commerce #delivery-options .details p { font-size: 0.875em; } #commerce #delivery-options label { margin: 1em 0em; } #commerce #delivery-options input { margin-right: 1em; } #commerce #delivery-options input[type=text], #commerce #delivery-options input[type=password] { margin-top: 5px; } #commerce #delivery-options strong { font-size: 0.875em; line-height: 1.4375em; font-weight: bold; } #commerce #delivery-options small { margin-left: 1em; font-size: 0.75em; line-height: 1.5em; color: #9A9A9A; } #commerce #delivery-options label.collection_name { } #commerce #delivery-options label.collection_name.hidden { display: none; } #commerce #delivery-options label.error { color: #BBBBBB !important; background-color: transparent !important; } #commerce #delivery-options label.error small { font-style: italic; color: #000000; } #commerce #delivery-options .delivery-options-time { margin-left: 1.8125em; background-color: white; padding: 0.5rem 1rem; display: inline-block; } #commerce #delivery-options .delivery-options-time select { width: auto; } #commerce #delivery-options .delivery-options-title { font-size: 0.75rem; color: grey; font-weight: 600; } #commerce #delivery-options .slot-picker { display: inline-flex; } #commerce #delivery-options .time-picker { display: inline-block; margin-left: 1rem; } #commerce #delivery-options .slot-label { cursor: pointer; padding: 0.5rem; padding-left: 0; font-size: 0.875rem; margin-top: 0.125rem; } #commerce #delivery-options button[name=show_slotpicker] { background-color: transparent; padding: 0.5rem; margin: 0 0 0 -20px; color: grey; } #commerce #delivery-options .deliver-slot-picker { visibility: hidden; height: 0; width: 0; user-select: none; position: relative; top: 25px; left: -108px; } #commerce #billing-address { margin-top: 0em; padding: 20px 10px 20px 10px; width: 50%; min-height: 115px; float: left; } #commerce #billing-address h3 { font-size: 1em; font-weight: 600; } #commerce #billing-address .hidden { display: none; } #commerce #billing-address .details p { font-size: 0.875em; } #commerce #billing-address.fullwidth { width: 68%; } #commerce #billing-address label { margin: 1em 0em; clear: both; } #commerce #billing-address .field_label { margin-top: 5px; padding: 6px 0 7px 0; width: 24%; text-align: right; float: left; } #commerce #billing-address input[type=text], #commerce #billing-address input[type=password], #commerce #billing-address select { margin-top: 5px; /* margin-right: 1em; width: 70%; - see version update #1926 */ float: right; } #commerce #billing-address .billing-options table { border-bottom: 0px none; } #commerce #billing-address .billing-options td { padding: 5px 0%; vertical-align: middle; } #commerce #billing-address .billing-options .details p { font-size: 0.875em; } #commerce #billing-address .billing-options strong { font-size: 0.875em; line-height: 1.4375em; margin-left:0.5em; font-weight: bold; } /* Checkout Summary */ #commerce #discounts-panel { padding: 10px; width: 26%; float: right; } #commerce #discounts-panel .left { margin-right: 20px; } #commerce #discounts-panel input { } #commerce #discounts-panel .button { margin-top: -2px; font-size: 0.75em; float: right; } #commerce .gateway_panel { margin: 0 0 2% 2%; width: 32%; vertical-align: top; display: inline-block; } #commerce .gateway_panel:nth-of-type(3n+1) { margin-left: 0; } #commerce .gateway_panel button { margin-bottom:0.5em; } #commerce .payment-gateway-logo img.gateway_image { margin-bottom:0.5em; } #commerce #total-to-pay { margin: 0% 0% 0% 0%; padding: 30px 10px 20px 10px; border-top: 1px solid #9A9A9A; } #commerce #total-to-pay table { border: none; } #commerce #total-to-pay .promocode { padding-right: 3%; width: 50%; float: left; } #commerce #total-to-pay .promocode button { margin: 0%; } #commerce #total-to-pay .promocode input { margin: 0% 0% 5px 0%; padding: 6px 10px; width: 32%; float: left; display: block; } #commerce #total-to-pay .promocode .left { margin-left: 20px; width: 49%; max-width: 150px; float: left; } #commerce #total-to-pay .promocode .right { width: 49%; max-width: 150px; float: right; } #commerce #total-to-pay .rewardpoints { margin-top: 10px; padding-right: 3%; width: 50%; float: left; clear: left; } #commerce #total-to-pay .rewardpoints input { margin: 0% 0% 5px 0%; padding: 6px 10px; width: 32%; float: left; display: block; } #commerce #total-to-pay .rewardpoints .left { margin-left: 20px; width: 49%; max-width: 150px; float: left; margin-top: 0px; padding: 0.375em 1em; } #commerce #total-to-pay .rewardpoints .right { width: 49%; float: right; } #commerce #total-to-pay .summary { padding-left: 3%; padding-right: 5%; width: 50%; border-left: 1px solid #9A9A9A; float: right; } #commerce #terms { padding: 20px 0px 20px 10px; text-align: left; } #commerce table#invoice { background-color:#F3F3F3; } #commerce table#invoice th { background-color:#ADADAD; color:#333333; } .checkout_proceed_placeholder { position: absolute; } .checkout_proceed { /* display: none; */ } .cta-buttons { padding: 0% 0% 0% 10px; float: left; } .cta-buttons .checkout { max-width: 310px; } #commerce .cta-buttons .checkout-payinfull { color: #2C292C; background-color: #FDCB24; } #commerce p.booking_btn_text { font-size:0.85em !important; width:100%; text-align:center; } #terms div.terms-group { padding: 0.25em 0; } #terms div.terms-group:after { clear: both; content: ''; display: table; } #terms div.terms-group label { display: block; float: left; margin-left: 18px; } #terms div.terms-group input[type=checkbox] { margin-left: -18px; width: 18px; } /* Commerce confirmation page styles */ #commerce.confirm_payment .heading { display:inline-block; width:80%; } #commerce.confirm_payment .print { display:inline-block; width:20%; text-align:right; } #commerce.confirm_payment .print a { font-size:1.6em; } /* Popup Styles */ .popup-panel { max-width: 550px; color: #676858; background-color: #FFFFFF; border-radius: 10px 10px 10px 10px; } .popup-panel label { margin: 0.5em 0% 0.5em 0%; font-size: 1em; display: block; } .popup-panel input { padding: 0.25em 0.25em 0.25em 0.25em; width: 90%; font-size: 1em; line-height: 1.25em; } .popup-panel input[type=checkbox], .popup-panel input[type=radio] { width: auto; } .popup-panel textarea { padding: 0.25em 0.25em 0.25em 0.25em; width: 90%; font-size: 1em; line-height: 1.25em; } .popup-panel select { padding: 0.25em 0.25em 0.25em 0.25em; width: 90%; font-size: 1em; line-height: 1.25em; } .popup-panel .red-star { color: #FF0000; } .popup-panel .button-container { display: -webkit-box; display: -ms-flexbox; display: flex; } .popup-panel button { padding: 5px; width: 45%; color: #FFFFFF; background-color: #758918; border: 0px none; text-align: center; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .popup-panel.form button { float: right; } .popup-panel button:hover { background-color: #797979; } .popup-panel button.close { color: #6E6E6E; background-color: #D4D4D4; } .popup-panel.form button.close { float: left; } .popup-panel button.close:hover { background-color: #B6B6B6; } .popup-panel.form ul { list-style: none; margin: 0; padding: 0; } .popup-panel.form.checkout_participants div.clear { line-height: 0; } .popup-panel.form.checkout_address { max-height: 80%; max-width: 600px; padding: 2rem; } .popup-panel.form.checkout_address .address_fields { margin-top: 1rem } .popup-panel.form.checkout_participants { max-height: 80%; max-width: 600px; padding: 2rem; } #ifmobile { display: none; } #commerce #participant_popup { padding: 10px 15px; max-width: 580px; left: 50%; top: 50%; background-color: #CCCCCC; display: none; position: fixed; } #commerce #participant_popup .left { width: 46%; float: left; } #commerce #participant_popup .right { width: 46%; float: right; } #commerce #participant_popup li { list-style-type: none; } #commerce #participant_popup label { font-weight: bold; } #commerce #participant_popup input { width: 100%; display: block; } #commerce #participant_popup textarea { width: 100%; display: block; } #commerce #participant_popup .button { margin-top: 1em; } #commerce .payment_selection { margin: 20px auto 0; width: 100%; max-width: 400px; } #commerce .payment_selection .field { margin: 15px 0; } #commerce .payment_selection label { width: 80%; display: inline-block; } #commerce .payment_selection .help { width: 20%; font-size: 0.6875em; text-align: right; display: inline-block; } #commerce .payment_selection input, #commerce .payment_selection select { margin-top: 3px; width: 100%; } #commerce .payment_selection .card_date { width: 50%; } #commerce .payment_selection .card_date select { display: inline-block; } #commerce .payment_selection .card_date .month { width: 39%; } #commerce .payment_selection .card_date .year { margin-left: 1%; width: 60%; } #commerce .payment_selection button { margin-top: 1.25em; } /* 950px Resolution Specific Behaviour */ @media only screen and (min-width: 0px) and (max-width: 950px) { /* Checkout Styles */ #commerce #checkout-details table td.image .image-container { width: 75%; padding-top: 75%; } /* 800px Resolution Specific Behaviour */ } @media only screen and (min-width: 0px) and (max-width: 800px) { /* Button Styles */ #commerce button.remove { padding: 0.625em 0; font-size: 0.75em; font-weight: 400; color: #808080; background-color: transparent; } #commerce button.remove:hover { background-color: transparent; } /* Basket Styles */ #commerce #basket-items { width: 100%; float: none; } #commerce #basket-items #basket-count { width: auto; font-size: 1em; float: none; display: none; } #commerce #basket-items #continue-shopping { width: 100%; font-size: 1em; display: none; } #commerce #basket-items #checkout { margin: 0.25em 0% 0% 0%; width: 100%; font-size: 1em; display: none; } #commerce #basket-items table { border-bottom: 0; } #commerce #basket-items tr.basket_headings { display: none; } #commerce #basket-items th { display: none; } #commerce #basket-items tr { clear: both; } #commerce #basket-items td { padding: 20px 10px; display: block; } #commerce #basket-items td.noitems { padding: 0% 0% 0% 0%; width: 100%; float: left; } #commerce #basket-items td.image { padding-left: 0; padding-bottom: 10px; width: 30%; float: left; } #commerce #basket-items td.item { padding-right: 0; padding-bottom: 10px; width: 70%; float: right; } #commerce #basket-items td.qty { margin-left: 30%; padding-top: 10px; width: 40%; text-align: left; float: left; } #commerce #basket-items td.price { display: none; } #commerce #basket-items td.pricetotal { padding-top: 10px; padding-right: 0; width: 30%; font-size: 0.875em; text-align: right; float: right; } #commerce #basket-items .item_description { overflow: hidden; } #commerce #basket-items .image button.remove { margin-top: 20px; } #commerce #basket-items .item button.remove { margin-left: 20px; float: right; display: none; } #commerce #basket-items .item_quantity { width: 100%; max-width: 150px; display: table; } #commerce #basket-items .quantity-change, #commerce #basket-items .item_quantity input { padding: 0 0.25em; max-width: none; height: 100%; height: 36px; border: 1px solid #808080; vertical-align: middle; display: table-cell; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } #commerce #basket-items .no-images td.item { padding-left: 0; width: 100%; } #commerce #basket-items .no-images td.qty { padding-left: 0; margin-left: 0; width: 50%; } #commerce #basket-items .no-images td.pricetotal { width: 50%; } #commerce #basket-summary { margin-top: 10px; width: auto; float: none; } /* Checkout Styles */ #commerce .checkout-left { padding: 0% 0% 0% 0%; width: 100%; float: none; } #commerce .checkout-right { padding: 0% 0% 0% 0%; width: 100%; float: none; } #commerce #checkout-details { margin: 0% 0% 0% 0%; padding: 10px 0%; width: auto; float: none; } #commerce #checkout-details table { border-bottom: 0px none; } #commerce #checkout-details tr.basket_headings { display: none; } #commerce #checkout-details th { display: none; } #commerce #checkout-details td { display: block; } #commerce #checkout-details td.product_label { padding: 10px 0% 10px 0%; } #commerce #checkout-details td.image { width: 20%; float: left; } #commerce #checkout-details td.image .image-container { width: 100%; padding-top: 100%; } #commerce #checkout-details td.item { width: 60%; float: left; } #commerce #checkout-details td.qty { padding-right: 0%; width: 20%; text-align: right; float: left; } #commerce #checkout-details td.price { display: none; } #commerce #checkout-details td.pricetotal { padding-right: 0%; width: 80%; text-align: right; float: right; } /* Checkout Addresses Styles */ #commerce .add_address_button, #commerce .edit_address_button { font-size: 1em; } #commerce #guest-checkout .login_email { width: 100%; float: none; } #commerce #guest-checkout .login_password { margin-top: 30px; width: 100%; float: none; } #commerce #guest-checkout .create_password { margin-top: 30px; width: 100%; float: none; } #commerce .guest-account .field_label { width: 100%; text-align: left; float: none; } #commerce .guest-account input[type=text], #commerce .guest-account input[type=password], #commerce .guest-account select { margin-left: 0; width: 100%; float: none; } #commerce .guest-account #getaddress_button { margin: 8px 0 0; } #commerce #delivery-panel { padding: 10px 0px; width: auto; border-left: 0px none; float: none; } #commerce #delivery-address { width: 100%; float: none; } #commerce #delivery-address .details p { font-size: 1em; } #commerce #delivery-address select { width: 100%; font-size: 1em; } #commerce #delivery-options { padding-left: 0%; width: 100%; border-left: 0px none; float: none; } #commerce #delivery-options-time { padding-left: 0%; width: 100%; border-left: 0px none; float: none; } #commerce #billing-address { width: 100%; float: none; } #commerce #billing-address.fullwidth { width: 100%; } #commerce #billing-address .details p { font-size: 1em; } #commerce #billing-address select { width: 100%; font-size: 1em; } #commerce .gateway_panel { width: 49%; } #commerce .gateway_panel:nth-of-type(3n+1) { margin-left: 2%; } #commerce .gateway_panel:nth-of-type(2n+1) { margin-left: 0; } /* Guest Checkout Mobile Styles */ #commerce #checkout-details { margin: 0% 0% 2em 0%; padding: 1.5em 1em; } #commerce .guest-checkout-panel { margin: 0% 0% 2em 0%; padding: 1.5em 1em; } #commerce .guest-checkout-panel label span.field_label { width: 36%; } #commerce .guest-checkout-panel #postcode_lookup { margin: 0% auto; width: 100%; max-width: 320px; display: block; text-align: center; } #commerce .guest-checkout-panel #postcode_lookup #getaddress_button { margin: 0.5em 0% 0% 0%; } #commerce .guest-checkout-panel #postcode_lookup select { width: 100%; } #commerce .guest-checkout-panel #postcode_lookup input { text-align: center; } #commerce .guest-checkout-panel #postcode_lookup #getaddress_error_message { margin: 1.5em 0% 0% 0%; text-align: center; } #commerce .guest-checkout-panel #postcode_lookup #getaddress_error_message button { margin: 1em 0% 0% 0%; text-decoration: underline; } #commerce .guest-checkout-panel #account-registration label.address-lookup span.field_label { margin: 0.75em 0% 0% 0%; width: 100%; font-size: 1.125em; font-weight: 700; text-align: center; } #commerce .guest-checkout-panel #account-registration label.address-lookup input { width: 100%; } /* Guest Checkout Login Mobile Styles */ #commerce .guest-checkout-panel .login { width: 100%; display: block; text-align: center; } /* Guest Checkout Password Reset Mobile Styles */ #commerce .guest-checkout-panel .reset-password-box { width: 100%; display: block; text-align: center; } #commerce .guest-checkout-panel .reset-password-box-complete { width: 100%; display: block; text-align: center; } /* Guest Checkout Register Mobile Styles */ #commerce .guest-checkout-panel .register { padding: 2.5em 0% 0% 0%; width: 100%; display: block; } /* Guest Checkout Your Details Mobile Styles */ #commerce .guest-checkout-panel #account-registration label { margin: 0%; width: 100%; display: block; float: none; } /* Checkout Summary */ #commerce #sidebar { width: auto; float: none; } #commerce #total-to-pay .promocode { padding: 0px 0px 30px 0px; margin-bottom:30px; width: 100%; float: none; border-bottom:1px solid grey; } #commerce #total-to-pay .summary { padding-left: 0%; padding-right: 0%; width: 100%; border-left: 0px none; float: none; } .cta-buttons { padding: 0% 0% 0% 0%; } #commerce .payment_selection .card_date { width: 100%; } #commerce .payment_selection .card_expiry { margin-left: 0; } /* 600px Resolution Specific Behaviour */ } @media only screen and (min-width: 0px) and (max-width: 600px) { /* Guest Checkout Your Details Mobile Styles */ #commerce .guest-checkout-panel #account-registration button { margin: 1em 0%; padding: 0.5em 1.5em; width: 100%; display: block; text-align: center; } #commerce .guest-checkout-panel #account-registration button.switch-to-login { margin: 1em auto; width: auto; } #commerce .guest-checkout-panel .existing_address { width: 100%; float: none; } #commerce .guest-checkout-panel .add_address, #commerce .guest-checkout-panel .add_address_button, #commerce .guest-checkout-panel .edit_address { margin: 0.75em 0% 0% 0%; width: 100%; float: none; } #commerce .guest-checkout-panel .add_address button, #commerce .guest-checkout-panel .edit_address button { width: 100%; text-align: center; } #commerce #total-to-pay .promocode input { width: 100%; float: none; } #commerce #total-to-pay .promocode button.left { margin: 0.75em 0% 0% 0%; width: 100%; max-width: 100%; float: none; text-align: center; } } @media only screen and (min-width: 0px) and (max-width: 400px) { #commerce .gateway_panel { margin-left: 0; width: 100%; } #commerce #basket-items td.qty { margin-left: 0; width: 70%; clear: both; } }