#content { margin-right: 0; } .card>.card-header { background: #af2d1a; color: white; } /* Match the red modal-header convention used elsewhere on the site (e.g. FBN's #detailModal, city-legal-ad's #downloadPopModal). */ .modal-header { background-color: #af2d1a; } .modal-header .close { color: #fff; opacity: 0.9; text-shadow: none; } .modal-header .close:hover, .modal-header .close:focus { color: #fff; opacity: 1; } /* Step wizard: only one step visible at a time (toggled via JS through .show()/.hide()) */ #step_2, #step_3, #cheque-div, #cash-div { display: none; } /* #loading is display:block by default in /css/bootstrap_custom.css, so it must stay hidden until shown via JS, otherwise it covers the page on initial load. */ #loading { display: none; } /* -------- styling parity with city-legal-ad/index.php -------- */ .btn.focus, .btn:focus, .btn:hover { color: white; text-decoration: none; } a { color: inherit; text-decoration: none; } a:hover, a:focus { color: white !important; text-decoration: none; } .align-center{ text-align: center; } .padding-top-40{ padding-top: 40px; } .padding-top-20{ padding-top: 20px; } .big-red-button{ background-color: #af2d1a; border: 1px solid black; color: white; /* padding: 8px 56px; */ text-align: center; text-decoration: none; display: inline-block; font-size: 12px; border-radius: 0; } p{ margin-bottom:0; line-height: 1.15; } .red-text{ color: red; } .terms-ol{ line-height: 1.25; font-size: 15px; text-align: justify; } .grey-div{ border: 1px solid black; font-size: 14px; background: #e2dfdf; } select , input, textarea{ border-radius: 0px !important; border: 1px solid #aeaeae !important; font-size: 14px !important; } .margin-left-10{ margin-left: 10px; } .margin-top-20{ margin-top: 20px; } .btn-text-small { font-size: 12px; } .form-inline{ margin-bottom: 5px; } .error{ color: red; font-size: 12px; float: left; } .success_p{ margin-bottom: 10px; line-height: 1.25; font-size: 14px; } @media print { .printBtn, .homeBtn { display: none; } /* Hide page chrome with display:none (not visibility:hidden) so it doesn't reserve layout space above the confirmation content — confirmed via the live DOM these are all direct children of , siblings of #content. */ #fb-root, #banner, #menuBar, #menu, .cng-action-buttons, #scraperMenu, footer.site-footer { display: none !important; } /* Hide everything inside #content except #step_3 the same way, so #step_3 ends up at the top of the page in normal document flow — no repositioning needed, which also keeps it able to paginate normally if it runs long. */ #loading, .countdown-div, #content > .container > .row > .col-md-12 > h2, #content > .container > .row > .col-md-12 > p, #form_custom_legal_ad, #previewAdModal, #cookieModal { display: none !important; } /* Safety net for anything not explicitly listed above. */ body * { visibility: hidden; } /* css/basic_2.0/index.css forces #banner .login to visibility:visible unconditionally (not print-scoped) with higher selector specificity than the body * rule above, so it has to be overridden explicitly here. */ #banner .login { visibility: hidden !important; } #step_3, #step_3 * { visibility: visible; } #step_3 { width: 100%; } /* Chrome strips background colors/images (the grid lines, card headers) by default when "Background graphics" isn't checked in the print dialog. */ #step_3, #step_3 * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Compact spacing so the confirmation fits on one printed page: the grid is a 16in-tall visual aid (the actual placement is already stated as text above it and in the Publication Schedule table), so it's shrunk the most. */ #step_3 .text-center h1 { font-size: 20px; margin-bottom: 4px; } #step_3 .success_p { margin-bottom: 2px; font-size: 12px; } #step_3 .card { margin-bottom: 6px !important; } #step_3 .card-header { padding: 4px 10px !important; font-size: 13px; } #step_3 .card-body { padding: 8px 10px !important; } #step_3 .card-body p { margin-bottom: 4px; } #clad-readonly-grid-container { zoom: 0.35; } /* Ctrl+P while on step 1: body gets .print-step-1 from a beforeprint handler in index_common.js, and these override the step_3-only rules above so the Proof Prior to Publication / Insertion Order prints instead. */ body.print-step-1 #form_custom_legal_ad, body.print-step-1 #content > .container > .row > .col-md-12 > h2 { display: block !important; } body.print-step-1 #content > .container > .row > .col-md-12 > h2, body.print-step-1 #step_1, body.print-step-1 #step_1 * { visibility: visible; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Interactive-only controls that mean nothing on paper. */ body.print-step-1 #add-run-controls, body.print-step-1 #previewAdBtn, body.print-step-1 #insertions-list .btn-link, body.print-step-1 #dZUpload .dz-remove, body.print-step-1 #dZUpload .dz-message, body.print-step-1 .next_step_1, body.print-step-1 .print_step_1 { display: none !important; } /* Final Customer Authorization starts on its own page (page 2). */ body.print-step-1 .contract-card { page-break-before: always; break-before: page; } body.print-step-1 #clad-interactive-grid-container { zoom: 0.5; } } .modal { text-align: center; } @media screen and (min-width: 768px) { .modal:before { display: inline-block; vertical-align: middle; content: " "; height: 100%; } } .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; } .input-group-addon{ cursor: pointer; } .help-block{ font-size: 12px; font-weight: bold; } .italic-text{ font-style: italic; } .bold-text{ font-weight: bold; } .ad_details .headline{ background: black; font-weight: bold; color: white; font-size: 22px; word-wrap: break-word; padding: 5px; } .ad_details .description{ font-size: 16px; } .ad_details .description p{ word-wrap: break-word; } .border-danger{ border-color: red !important; } .navbar { position: initial; align-items: normal; justify-content: normal; min-height: inherit; border-radius: 0; } .navbar a:hover,.navbar a:focus { color: white !important; } body { margin: auto; line-height: inherit; } .input-group .form-control { z-index: 1; } .card-body{ background: #ffffff; } .card-default { border-color: black; } #pt_hpf_form div{ height: 100px; } .AVM.LB { display: none; } .img-responsive{ display: initial; } .more-details-panel .form-inline .form-control { display: block; } .more-details-panel, .more-details-panel .automotive-inputs, .more-details-panel .real-estate-inputs{ display: none; } .control-label{ font-size: 14px; font-weight: bold; margin-bottom: .15rem; } .addMoreName, .removeNameBtn{ cursor: pointer; } .heading-section{ font-size: 15px; font-weight: bold; } .information{ font-size: 14px; } .confirmation p{ font-size: 15px; margin-bottom: 10px; } .warning-note{ text-align: justify; color: black; } input.input-loading { background: url(/images/loading-input.gif) no-repeat right center; } .company-list{ float: left; list-style: none; padding: 0; position: absolute; z-index: 1; width: 98%; border: 1px solid; } .company-list li{ padding: 8px; background: #f0f0f0; border-bottom: 1px solid black; line-height: 0.75; cursor: pointer; font-size: 12px; } .company-list li:hover { background: #c3bebe; } .search-city{ cursor: pointer; } .text-muted{ color:black !important; } .small, small { font-size: 90%; } a.anchorLink, a.anchorLink:focus, a.anchorLink:hover{ color: #1a0dab !important; } .font-black{ color: black; } .bg-img.bg-cover{ background-image: url('/images/ts_banner.png'); background-size: contain; background-repeat: no-repeat; background-position: center; height:100%; width:100%; } .bg-img.bg-cover::before { content: ""; display: none; height: 100%; width: 100%; position: absolute; top: 0; left: 0; background-color: rgba(52, 73, 94, 0.75); } .bg-img.bg-cover .btn-outline-secondary{ background: #af2d1a; color: white; font-weight: bold; } .form-check-input{ margin-top: 0.12rem; } /* ==================== Placement Grid Styling (.clad-placement-*) ==================== */ /* Grid scale constant: 55px = 1 inch (visual), 506px = 9.2in wide, 880px = 16in tall */ /* Billing: each column counts as 1 "column inch" for pricing (not 0.92in) */ .clad-placement-modal .modal-body { padding: 20px; } .clad-placement-grid-wrapper { position: relative; margin-left: 65px; } /* Row Labels Column (integrated with grid structure) */ .clad-placement-row-labels { display: flex; flex-direction: column; background: #f9f9f9; border-right: 1px solid #ccc; font-size: 9px; color: #000000; line-height: 1; text-align: right; padding-right: 4px; } .clad-placement-row-label { height: 55px; display: flex; align-items: center; justify-content: flex-end; } /* Main grid container */ .clad-placement-grid { position: relative; width: 506px; background: white; border: 1px solid #333; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* Column headers (1-10) */ .clad-placement-column-headers { display: grid; grid-template-columns: repeat(10, 1fr); gap: 0; background: #e8e8e8; border: 1px solid #333; border-bottom: none; } .clad-placement-col-header { display: flex; align-items: center; justify-content: center; height: 35px; font-size: 13px; font-weight: bold; color: #333; border-right: 1px solid #ccc; user-select: none; } .clad-placement-col-header:last-child { border-right: none; } /* Grid content container with CSS-only gradient backdrop (no cell divs) */ .clad-placement-grid-content { position: relative; overflow: hidden; width: 506px; height: 880px; background-color: #fff; background-image: repeating-linear-gradient(to bottom, #bbb 0, #bbb 1px, transparent 1px, transparent 55px), repeating-linear-gradient(to bottom, #eee 0, #eee 1px, transparent 1px, transparent 27.5px), repeating-linear-gradient(to right, #ddd 0, #ddd 1px, transparent 1px, transparent 10%); border: 1px solid #333; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* Preview Ad modal: realistic newspaper page mockup (masthead + faux body-text columns), rendered by PlacementGrid.renderPagePreview(). Deliberately distinct from the numbered-column/inch-ruled grid above — no grid lines or numbers, just a page. */ .page-preview-masthead { width: 506px; padding: 10px 0; margin: 0 auto; border-bottom: 3px double #333; font-family: Georgia, 'Times New Roman', serif; font-weight: bold; font-size: 22px; letter-spacing: 1px; text-transform: uppercase; text-align: center; background: #fff; } /* Overrides .clad-placement-grid-content's gridline background (above) with a faux body-text texture — scoped to the modal container only, so the real interactive/ read-only grids elsewhere keep their own gridline look. */ #previewAdPageContainer .page-preview-body { background-color: #fff; background-image: repeating-linear-gradient(to right, #ddd 0, #ddd 1px, transparent 1px, transparent 50.6px), repeating-linear-gradient(to bottom, #ccc 0, #ccc 2px, transparent 2px, transparent 9px); border: 1px solid #999; box-shadow: none; margin: 0 auto; } /* Image wrapper (on-grid placement layer) */ .clad-placement-image-wrapper { position: absolute; box-sizing: border-box; border: 2px solid #3498db; cursor: move; touch-action: none; user-select: none; z-index: 10; } .clad-placement-image-wrapper.readonly { cursor: default; } .clad-placement-image-wrapper img { width: 100%; height: 100%; display: block; object-fit: fill; pointer-events: none; -webkit-user-drag: none; } /* Sidebar: creative preview + readout */ .clad-placement-sidebar { display: flex; flex-direction: column; gap: 20px; } /* Creative thumbnail box */ .clad-placement-thumbnail-box { padding: 12px; background: #f9f9f9; border: 1px solid #ddd; border-radius: 4px; } .clad-placement-thumbnail { width: 100%; height: 200px; background: #f0f0f0; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center; border-radius: 4px; overflow: auto; } .clad-placement-thumbnail img { max-width: 100%; max-height: 100%; object-fit: contain; } /* Readout box */ .clad-placement-readout-box { padding: 12px; background: #f9f9f9; border: 1px solid #ddd; border-radius: 4px; } .clad-placement-readout { font-size: 13px; line-height: 1.6; } .clad-placement-readout-item { margin-bottom: 8px; } .clad-placement-readout-item strong { display: inline-block; min-width: 80px; } .clad-placement-readout-item span { font-weight: bold; color: #333; } /* Dropzone preview styling - ensure previews display correctly even with form-inline class */ #dZUpload { position: relative; display: block !important; min-height: 150px; padding: 20px; background: #fafafa; border: 2px dashed #999; border-radius: 4px; } #dZUpload.dz-drag-hover { background: #f0f0f0; } #dZUpload .dz-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: 0; text-align: center; color: #999; font-size: 14px; pointer-events: none; } #dZUpload .dz-message span { display: block; } #dZUpload .dz-preview { display: inline-block; width: 150px; margin: 10px; padding: 10px; background: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); vertical-align: top; position: relative; } #dZUpload .dz-preview.dz-file-preview { display: inline-block; } #dZUpload .dz-preview .dz-image { width: 100%; height: 100px; background: #f9f9f9; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 8px; border-radius: 2px; } #dZUpload .dz-preview .dz-image img { max-width: 100%; max-height: 100%; object-fit: contain; } #dZUpload .dz-preview .dz-details { padding: 8px 0; text-align: center; /* dropzone.min.css's base .dz-details rule positions this absolutely with opacity:0 (its default theme reveals filename as a hover overlay on the thumbnail) — reset it here so it stays static and visible below the image as intended, instead of an invisible layer that can still intercept clicks (it was covering the new remove button on hover). */ position: static; opacity: 1; z-index: auto; } #dZUpload .dz-preview .dz-filename { font-size: 12px; font-weight: bold; color: #333; word-break: break-word; max-height: 30px; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; } #dZUpload .dz-preview .dz-filename span { display: block; } #dZUpload .dz-preview .dz-size { font-size: 11px; color: #999; } #dZUpload .dz-preview .dz-remove { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; line-height: 20px; text-align: center; background: #af2d1a; color: #fff; border-radius: 50%; font-size: 11px; text-decoration: none; cursor: pointer; z-index: 20; } #dZUpload .dz-preview .dz-remove:hover { background: #7a0001; color: #fff; text-decoration: none; } #dZUpload .dz-preview .dz-progress { width: 100%; height: 4px; background: #e8e8e8; border-radius: 2px; margin: 8px 0; overflow: hidden; display: none; } #dZUpload .dz-preview.dz-processing .dz-progress { display: block; } #dZUpload .dz-preview .dz-progress .dz-upload { display: block; height: 100%; background: #4CAF50; width: 0%; } #dZUpload .dz-preview .dz-error-message { display: none; font-size: 11px; color: #d9534f; margin: 4px 0; } #dZUpload .dz-preview.dz-error .dz-error-message { display: block; } #dZUpload .dz-preview .dz-success-mark, #dZUpload .dz-preview .dz-error-mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 40px; text-align: center; display: none; pointer-events: none; } #dZUpload .dz-preview .dz-success-mark span { color: #4CAF50; } #dZUpload .dz-preview .dz-error-mark span { color: #d9534f; } #dZUpload .dz-preview.dz-success .dz-success-mark { display: block; } #dZUpload .dz-preview.dz-error .dz-error-mark { display: block; }