/* Theme Name: Booking Author: Chris Collins */ /* #Base 1140 Grid ================================================== */ .container {position: relative;width: 90%; margin: 0 auto; padding: 0;} .column, .columns {float: left; display: inline;} #headerbar {height:100px;margin-bottom:40px;} /* Front */ .front .region-content .block {width: 50%;} /* Booking Form */ .field-name-field-choose-extras .form-type-checkbox {width: 32.33333333%;margin:0 0.5%;} .field-name-field-choose-a-service .form-type-checkboxes .form-item, .field-name-field-choose-a-package .form-type-checkboxes .form-item {width:19%;margin:0 0.5%;} .field-name-field-choose-a-service .form-type-checkboxes .form-item:nth-of-type(5n) {margin-right:0;} .field-name-field-choose-extras .form-type-checkboxes .form-item label {min-height: 200px;} #booking-form-entityform-edit-form .group-event, #booking-form-entityform-edit-form .group-venue, #booking-form-entityform-edit-form .group-your-details {width:32.66666%;margin:20px 0;min-height: 500px;} #booking-form-entityform-edit-form .group-venue {margin:20px 1%;} #booking-form-entityform-edit-form .group-account-details .form-wrapper {width:33.33%;float:left;} .field-name-field-choose-a-package .views-field-body {height: 110px;line-height:18px;} .field-name-field-choose-a-package .views-field-field-included-extras {line-height:19px;height:185px;} .field-name-field-choose-a-package .views-field-field-included-extras ul {overflow:hidden;} .field-name-field-choose-a-package .views-field-title .field-content, .field-name-field-choose-a-package .views-field-field-time-slot .field-content, .field-name-field-choose-a-package .views-field-field-included-extras li {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* Admin and Dashboard */ #block-block-14, #block-views-bookings-block-3, #block-user-online {width: 32%;margin-left: 2%;min-height:355px;} .cal-month {margin: 0px;width: 32%;margin-left: 2%;} .view-bookable-units td.views-field-title {width: 170px;} .add-availability-form {max-width:565px;} .add-availability-form .form-submit {} .add-availability-form input[type=text] {width: 100px} /* Admin Availability Calendar */ .view-bookable-units .cal-month td, .view-bookable-units .cal-month td div, .view-bookable-units .cal-month td.cal-pastdate, .view-bookable-units .cal .cal-pastdate div {width: 20px;} .view-bookable-units .views-row-first .cal-month td:before {display: block;} .view-bookable-units .cal-month caption, .view-bookable-units .cal-month thead {display: none;} .view-bookable-units .cal-month tr {float: left;} .view-bookable-units .views-row-first .cal-month tr {padding-top: 15px} /* Upcoming Bookings List */ .view-bookings .view-uc-orders td, .view-bookings .view-booking-pricing-table.view-display-id-block_3 td {text-align:right;padding-left:1px;} .view-bookings .booking-no {font-weight: 700;font-size: 22px;line-height: 26px;} .manual-payment-form.show .form-container {height:23px;} .manual-payment-form select.form-method {width:94px;-webkit-appearance:none;} .manual-payment-form input.form-amount {width:50px;} .manual-payment-form input.form-title {width:200px;width:calc(100% - 276px);} .view-bookings .view-uc-orders td:nth-child(2), .view-bookings .view-booking-pricing-table.view-display-id-block_3 td:nth-child(2) {width: 92px;} .view-bookings .view-uc-orders td:nth-child(3), .view-bookings .view-booking-pricing-table.view-display-id-block_3 td:nth-child(3) {width: 130px;text-align:center;} .view-bookings .view-uc-orders td:nth-child(4), .view-bookings .view-booking-pricing-table.view-display-id-block_3 td:nth-child(4) {width: 77px;} .view-bookings .view-uc-orders td:nth-child(5), .view-bookings .view-booking-pricing-table.view-display-id-block_3 td:nth-child(5), .view-bookings .view-booking-pricing-table.view-display-id-block_3 .view-footer .form-amount {width: 65px;} .page-bookings tbody tr .views-field-field-event-date:before {font-size:20px;line-height:24px;top:13px;} .page-bookings .views-align-right a {display:block;padding:5px 0!important;} /* try and sort table layouts to stop payments shrinking */ td.views-field-field-event-date {width:15%;} td.views-field-field-venue-postcode {width:15%;} td.views-field-field-telephone {width:15%;} td.views-field-view {width:60%;} ul.actions-list { margin-left:-95px; } td.views-field-nothing-2 {width:5%;} /* Manage Booking */ fieldset.order-details, fieldset.your-details {width: 49%;min-height:300px;margin-bottom:20px;} fieldset.order-details {margin-right:2%;} .special-offer {width:31%;margin:1%;} /* Base Grid */ .container .sixteen.columns {width: 100%;} /* #Medium Desktop ================================================== */ /* Note: Design for a width of 960px */ @media only screen and (min-width: 960px) and (max-width: 1300px) { /* Booking Form */ .field-name-field-choose-a-package .form-type-checkboxes .form-item {width:24%;margin:0 0.5%;} /* Admin and Dashboard */ #block-block-14, #block-views-bookings-block-3, #block-user-online {min-height: 355px;} .special-offer {width:48%;} } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 959px) { /* Booking Form */ .field-name-field-choose-extras .form-type-checkbox {width: 49%;} .field-name-field-choose-a-service .form-type-checkboxes .form-item, .field-name-field-choose-a-package .form-type-checkboxes .form-item {width:32.3333333%;} .field-name-field-choose-a-package .views-field-body {/* height: 150px; */} .view-bookable-units .views-field-title span.title {width: auto !important;} .view-bookable-units .views-row-first .cal-month td:before {display: none;} .view-bookable-units .cal-month caption {display: inline-block;width: 200px;text-align: left;} .view-bookable-units tr.views-row-first .cal-month caption {margin-bottom: 0px !important;} .view-bookable-units .cal-month tr {float: none;} .view-bookable-units .cal-month td, .view-bookable-units .cal-month td div, .view-bookable-units .cal-month td.cal-pastdate, .view-bookable-units .cal .cal-pastdate div {width: initial;} .view-bookings span.date-display-single {font-size: 14px!important;} .view-bookings table td {font-size: 11px; line-height: 13px!important;padding:2px!important} .view-bookings .remaining {margin-top:30px;font-size: 12px!important;} .manual-payment-form.show .form-container {height:auto;} .manual-payment-form input.form-title, .manual-payment-form input.form-amount {width:200px;width:calc(100% - 27px);margin-bottom:2px;} .manual-payment-form select.form-method {width:200px;width:calc(100% - 19px);margin-bottom:2px;} .manual-payment-form input.form-title, .manual-payment-form select.form-method {margin-left:9px!important} .manual-payment-form .form-submit {margin-left:9px!important;} .page-bookings .view-display-id-page_1 tbody tr .views-field-field-event-date {padding-top:50px!important;font-size:12px;line-height:14px;top:6px;} .page-bookings tbody tr .views-field-field-event-date:before {font-size: 14px;line-height: 16px;top:6px;} .view-bookings .editablefield-item select {max-width:100px} /* Admin and Dashboard */ .add-availability-form {float:left;} #block-block-14, #block-views-bookings-block-3, #block-user-online {min-height:400px;} .special-offer {width:98%;} /* quickstart */ .right-info, .left-info {float:none!important;width:100%!important} .info-inner {font-size:24px!important;line-height:30px!important;margin-bottom:40px;} } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 768px) { .container {width: 90%;padding: 0 1%;} /* Front */ .front .region-content .block {width: 100%;} .field-name-field-choose-a-service .form-type-checkboxes .form-item {width:49%;} .field-name-field-choose-a-package .form-type-checkboxes .form-item {width:100%;margin:0;} .front .region-content .block .content {border:none!important;} .front .region-content .block .ui-datepicker {width: auto !important;} .front .ui-datepicker td a, .front .ui-datepicker td span {line-height:26px!important;text-align:center;} /* Booking Form */ .field-name-field-choose-extras .form-type-checkbox {width: 100%;margin:0%;} .field-name-field-choose-extras .form-type-checkboxes .form-item label {min-height:0px;padding-bottom: 45px!important;} #booking-form-entityform-edit-form .group-event, #booking-form-entityform-edit-form .group-venue, #booking-form-entityform-edit-form .group-your-details {width:100%;margin:20px 0 0 0;min-height:0px;} #booking-form-entityform-edit-form .group-your-details {margin-bottom:20px;} #booking-form-entityform-edit-form .group-account-details .form-wrapper {width:100%;} .field-name-field-choose-a-package .views-field-body, .field-name-field-choose-a-package .views-field-field-included-extras {height:auto;} .field-name-field-choose-a-package .views-field-title .field-content, .field-name-field-choose-a-package .views-field-field-time-slot .field-content, .field-name-field-choose-a-package .views-field-field-included-extras li {white-space:normal;} .field-name-field-payment-options .form-type-radio .option {font-size:16px;} /* Turn admin menu into icons */ #admin-menu-account .admin-menu-action a, ul#admin-menu-menu li.admin-menu-toolbar-category > a, ul#admin-menu-menu li.admin-menu-toolbar-category > a:hover {background:url("../images/admin-icons.png");display:block;text-indent:-99999px;width:24px;height:24px;padding:0px!important;margin-left:10px;} ul#admin-menu-menu li.admin-menu-toolbar-category:nth-of-type(1) a {background-position:0px 0px;} ul#admin-menu-menu li.admin-menu-toolbar-category:nth-of-type(2) a {background-position:-24px 0px;} ul#admin-menu-menu li.admin-menu-toolbar-category:nth-of-type(3) a {background-position:48px 0px;} #admin-menu-account .admin-menu-action a {background-position:24px 0px;margin:0px;} .paid .views-field-field-event-date, .unpaid .views-field-field-event-date {border-left:none!important;} /* Admin and Dashboard */ #block-block-14, #block-views-bookings-block-3, #block-user-online {width: 100%;margin-left: 0;min-height:auto;} .add-availability-form {float:left;text-align:center;} .add-availability-form select {width: 100%;} .add-availability-form .form-submit {width:100%;margin: 10px 0px!important;} .add-availability-form input[type=text] {width:100%;width: calc(100% - 10px);} #block-webfroth-booking-confirm-bookings td:nth-child(1), #block-webfroth-booking-confirm-bookings td:nth-child(4), #block-webfroth-booking-confirm-bookings td:nth-child(6) {display:none} .cal-month {margin: 0px;width: 100%;margin-left: 0%;} .view-bookable-units .views-field-title span.title {width: auto !important;} .view-bookable-units .views-row-first .cal-month td:before {display: none;} .view-bookable-units .cal-month caption {display: inline-block;width: 200px;text-align: left;} .view-bookable-units tr.views-row-first .cal-month caption {margin-bottom: 0px !important;} .view-bookable-units .cal-month tr {float: none;} .view-bookable-units .cal-month td, .view-bookable-units .cal-month td div, .view-bookable-units .cal-month td.cal-pastdate, .view-bookable-units .cal-month .cal-pastdate div {width: initial;} .view-bookable-units .cal-month td.cal-pastdate {background: #e8e8e8;} .view-bookable-units td.views-field-title {width: 80px;} .manual-payment-form.show .form-container {height:auto;} .manual-payment-form input.form-title, .manual-payment-form input.form-amount {width:200px;width:calc(100% - 27px);margin-bottom:2px;} .manual-payment-form select.form-method {width:200px;width:calc(100% - 19px);margin-bottom:2px;} .manual-payment-form input.form-title, .manual-payment-form select.form-method {margin-left:9px!important} .manual-payment-form .form-submit {margin-left:9px!important;} .page-node-add-contract #content {padding:20px!important;} /* Bookings List Table - Mobile styles and block displays */ .view-bookings table, .view-bookings thead, .view-bookings tbody, .view-bookings th, .view-bookings td, .view-bookings tr {display: block;width:100%!important;} .view-bookings > .view-content > .views-form > form > div > table > tbody > tr {padding-top:10px!important} .view-bookings > .view-content > .views-form > form > div > table > tbody > tr > td {width:94%!important;padding:0 3%!important;} .view-bookings.view-display-id-page_1 thead tr {position: absolute;left:-9999px;} /* Hide header */ span.booking-no {font-size:20px!important;margin-top:-15px!important;margin-bottom:-15px;display:block;} .page-bookings tbody tr .views-field-field-event-date:before {font-size:17px;left:auto!important;right:10px!important;} .view-bookings.view-display-id-page_1 select, .view-bookings.view-display-id-page_1 .form-text {width: 100%;} .view-bookings .view-uc-orders.view-display-id-block_1 td, .view-booking-pricing-table td {padding-left:0%!important;display:inline-block;} .view-bookings .view-uc-orders.view-display-id-block_1 td {border:none;} .view-bookings .views-field-view .views-field-created, .view-bookings .view-uc-orders tbody td.views-field-order-total, .view-bookings .view-uc-orders td, .view-bookings .view-booking-pricing-table.view-display-id-block_3 td {text-align:left;} .view-bookings .view-uc-orders td {padding-left: 0!important;} .view-bookings .view-uc-orders td:before {display:none;} .view-bookings .view-uc-orders td:nth-child(2), .view-bookings .view-booking-pricing-table.view-display-id-block_3 td:nth-child(2), .view-bookings .view-uc-orders td:nth-child(3), .view-bookings .view-booking-pricing-table.view-display-id-block_3 td:nth-child(3), .view-bookings .view-uc-orders td:nth-child(4), .view-bookings .view-booking-pricing-table.view-display-id-block_3 td:nth-child(4), .view-bookings .view-uc-orders td:nth-child(5), .view-bookings .view-booking-pricing-table.view-display-id-block_3 td:nth-child(5), .view-bookings .view-booking-pricing-table.view-display-id-block_3 .view-footer .form-amount, .view-bookings .view-uc-orders tbody td.views-field-order-total {width:100%;text-align:left} .view-booking-pricing-table td {width:100%;} .view-bookings .reveal-payment-form-button, .view-bookings.view-display-id-page_1 .view-uc-orders, .view-bookings .artwork, .view-bookings .views-field-view span.travel, .view-bookings .actions-button.delete, .view-bookings a.invoice-link {display: none;} /* try and sort table layouts to stop payments shrinking */ td.views-field-field-event-date, td.views-field-field-venue-postcode {width: 25%;} td.views-field-field-telephone, td.views-field-view, td.views-field-nothing-2, .page-bookings tbody tr.unpaid .views-field-field-event-date:before, .page-bookings tbody tr.paid .views-field-field-event-date:before {width:auto;} /* Manage Booking */ fieldset.order-details, fieldset.your-details {width:100%;min-height:auto;} fieldset.order-details {margin-right:0%;} .view-id-booking_pricing_table.view-display-id-block_1 .views-field-title li {list-style-type:none;} /* Settings */ .view-admin-views-user .email-address, .view-admin-views-user .views-field-created, .view-admin-views-user .views-field-access, .view-packages.view-display-id-page_2 .views-field-body, .view-packages.view-display-id-page_2 .views-field-field-special-offer, .field-name-field-image fieldset .description, .view-manage fieldset .description {display:none;} .field-type-number-integer .form-text {max-width:40px} /* Make tables fit */ table * {padding:0px!important;font-size:12px!important;line-height:18px!important} table caption span {font-size:20px!important;} table caption {width:100%;display:block;margin:40px 0;} table td, table th {padding:2px!important;} .page-bookings .view-display-id-page_1 tbody tr .views-field-field-event-date {padding-top:25px!important} /* Footer */ #block-block-11 .content .phone {font-size: 20px !important; line-height: 24px !important;} #block-block-4 .content a {display: block;} #bottom {text-align: center;} #bottom ul.menu {text-align: center;} #bottom .block {margin-bottom: 0px;} #block-block-10 {margin-top: 10px;} .region-footer-first, .region-footer-second, .region-footer-third {width: 100%; padding: 0px !important; margin: 0px;} .credit {text-align:center!important;} .container .sixteen.columns { width: 100%; } .special-offer {width:98%;} .view-bookings > .view-content > .views-form > form > div > table > tbody > tr > td.views-field-entityform-id-3 { width:100%!important;box-sizing:border-box;padding:5px!important;display:block;border-radius:0 0 10px 10px} .expand-settings {margin:5px} .view-bookings tr.paid, .view-bookings tr.unpaid {border:2px solid #6b6666!important;border-bottom:5px solid #fff!important;border-radius:20px} ul.actions-list {margin-left:0px;bottom:55px;border:5px solid #6b6666;} ul.actions-list li a {padding:10px!important;} .task-list {right:5px!important;top:auto!important;bottom:0px;width:240px!important} .score-tally, .task-list li {padding:10px!important} /* quickstart */ .right-info, .left-info {float:none!important;width:100%!important} .info-inner {font-size:24px!important;line-height:30px!important;margin-bottom:40px;} .right-info .form-item {width:100%!important;margin:10px 0px!important} } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { /* Admin and Dashboard */ .add-availability-form select {width:auto;} .add-availability-form input[type=text] {width:87px!important;} .add-availability-form {float:left;} .add-availability-form .form-submit {width:auto;margin:5px 0 5px 5px!important;} }