/* ============================================================================ mobile-fix.css — site-wide mobile alignment and overflow fixes. Link this AFTER bootstrap.min.css and the page's own stylesheet in every view, so it can override the fixed widths and hard left margins those files apply. The problem it fixes -------------------- These views were written for a desktop viewport and use absolute geometry throughout: margin-left:54px / 58px / 11px, width:1140px, fixed-pixel column widths, and tables sized in pixels. On a phone that pushes content past both edges of the screen - text is clipped on the LEFT, panels run off to the RIGHT, and the whole document scrolls sideways. That is the misalignment seen on Promo, ProductInfo and the Request pages. Everything here is inside a max-width media query, so the desktop layout is left exactly as it is. ============================================================================ */ /* ---- CASCADE GUARD: never override ng-hide ------------------------------- This file has to use `display: ... !important` in a dozen places to beat the inline widths and float rules in style.css. That created a subtle, serious bug: those rules also beat AngularJS's own .ng-hide:not(.ng-hide-animate) { display: none !important; } Angular PREPENDS that stylesheet into , so it sits BEFORE this file in the cascade, and a rule like `.row:not(.promo-icon-row) { display:block !important }` has the same specificity (two classes) - a tie the later sheet wins. Result: below 991px ng-show / ng-hide silently stopped working for every .row on the site. Elements meant to be conditional were permanently visible - a "Processing, please wait..." indicator that stayed up after its request had finished, spinner and all, which reads exactly like a hang. Repeating the class three times gives specificity (0,3,0), which beats every two-class rule in this file no matter where it appears or which media query it is in. One line, and ng-hide always wins again. Do NOT remove this, and keep new rules below three classes. */ .ng-hide.ng-hide.ng-hide { display: none !important; } /* ---- Rounded cards (all viewports) --------------------------------------- The front store's product cards had square corners. A small radius is enough to soften them without changing the layout. */ .promo-card, .promo-card-image, .item, .items > .item { border-radius: 10px; } /* The image sits inside the card, so its top corners must match or the square image pokes through the rounded card. */ .promo-card-image { border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .promo-card { overflow: hidden; } /* ---- Safe at every width ------------------------------------------------- An image, video or table wider than its container is never intentional, and these were overflowing at tablet widths too (a 1000px image inside a 720px Bootstrap container at 768px). Applied globally rather than only on phones. */ img, video, iframe, canvas, svg, embed, object { max-width: 100%; } img, video { height: auto; } /* ========================================================================== Phones and tablets. The upper bound is 991px, not 767px. At 768px Bootstrap's .container is 720px wide, so the 960px tables and 1000px images in these views still overflowed - verified: the document measured 1039px inside a 768px viewport. ========================================================================== */ @media (max-width: 991px) { /* Nothing may cause the page to scroll sideways. This is the single most visible symptom and the root of the "misaligned" look. */ html, body { overflow-x: hidden; max-width: 100%; } /* Bootstrap 3 containers are fixed-width at desktop breakpoints; on a phone they must simply fill the screen. */ .container, .container-fluid, .content-wrapper, .main-content { width: auto !important; max-width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; margin-left: 0 !important; margin-right: 0 !important; } /* Hard-coded left margins are what clip text off the left edge. There are dozens of them across these views, all in the 10-60px range. */ [style*="margin-left:11px"], [style*="margin-left: 11px"], [style*="margin-left:54px"], [style*="margin-left: 54px"], [style*="margin-left:58px"], [style*="margin-left: 58px"], [style*="margin-left:35px"], [style*="margin-left: 35px"], [style*="margin-left:-41px"], [style*="margin-left: -41px"] { margin-left: 0 !important; } /* A Bootstrap .row uses negative side margins that assume a padded parent. Without that parent on a phone it overhangs both edges. */ .row { margin-left: 0 !important; margin-right: 0 !important; } /* Any element given an explicit pixel width in markup. Left alone these are what push panels off the right-hand side - the Personal Details panel on the booking form being the clearest case. */ [style*="width:1140px"], [style*="width: 1140px"], [style*="width:1000px"], [style*="width: 1000px"], [style*="width:960px"], [style*="width: 960px"], [style*="width:800px"], [style*="width: 800px"], [style*="width:700px"], [style*="width: 700px"], [style*="width:600px"], [style*="width: 600px"], [style*="width:500px"], [style*="width: 500px"] { width: 100% !important; max-width: 100% !important; } /* Media and form controls must never exceed their container. */ img, video, iframe, canvas, svg, embed, object { max-width: 100%; height: auto; } input, select, textarea, .form-control { max-width: 100%; box-sizing: border-box; } /* Panels, wells and cards: full width, modest padding. */ .panel, .well, .card, .jumbotron { margin-left: 0 !important; margin-right: 0 !important; border-radius: 10px; } .panel-body, .well { padding: 12px !important; } /* Tables get max-width only. An earlier version also set display:block + overflow-x:auto to give wide tables their own scroller. That is actively DANGEROUS here: these views use for LAYOUT - the "All Categories" sidebar is two nested tables - and display:block collapses a layout table completely. Measurement showed the scroller was not needed anyway (zero overflowing elements on Promo, ProductInfo and BookingRequest at 390px and 768px), so the risk buys nothing and the rule is gone. */ table { max-width: 100%; } /* Long unbroken strings (URLs, reference numbers) otherwise force the viewport wider than the screen. */ body, p, h1, h2, h3, h4, h5, h6, td, th, li, span, div { overflow-wrap: break-word; word-wrap: break-word; } /* Headings sized for a desktop hero are too large to fit a phone line. */ h1 { font-size: 22px; } h2 { font-size: 20px; } h3 { font-size: 18px; } /* Absolutely positioned decoration frequently sits outside the viewport. */ [style*="position:absolute"], [style*="position: absolute"] { max-width: 100%; } } /* ========================================================================== Very narrow phones ========================================================================== */ @media (max-width: 400px) { .container, .container-fluid { padding-left: 8px !important; padding-right: 8px !important; } h1 { font-size: 20px; } } /* ============================================================================ Material styling for the store header. Deliberately CSS-only. The search box carries the directive and the buttons carry ng-click handlers wired to the controller, so replacing them with md-input-container / md-button would risk breaking live search on a revenue page for a purely cosmetic gain. Applying Material's elevation, radii and motion to the existing elements gets the same look with no behavioural change. ============================================================================ */ /* ---- Category / destination tiles ---------------------------------------- */ .our, .promo-icon-tile { border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.20); transition: box-shadow .18s ease, transform .18s ease; } .our:hover, .promo-icon-tile:hover { /* Material's 8dp resting elevation on hover. */ box-shadow: 0 5px 12px rgba(0,0,0,.20), 0 2px 4px rgba(0,0,0,.14); transform: translateY(-2px); } .our a, .promo-icon-tile a { display: block; text-decoration: none; } .our img.top { display: block; border-radius: 10px 10px 0 0; } /* ---- "All Categories" sidebar -------------------------------------------- Still a layout table underneath, so only the wrapper is restyled - nothing here changes how the table lays out. */ .nav { border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.20); background: #fff; } .nav th { /* The existing orange header, given Material's typographic treatment. */ letter-spacing: .04em; text-transform: uppercase; font-size: 13px; } .nav td a { display: block; padding: 2px 0; transition: background-color .15s ease, padding-left .15s ease; } .nav td a:hover { background-color: rgba(0,0,0,.04); padding-left: 6px; /* a small nudge, in place of a ripple */ text-decoration: none; } /* ---- Search box and buttons ---------------------------------------------- Attribute selectors are used because these elements have inline styles and no classes of their own; this avoids editing markup that carries directives. */ input[placeholder*="destination"] { border-radius: 24px !important; border: 1px solid rgba(0,0,0,.16) !important; padding-left: 16px !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.06); transition: border-color .15s ease, box-shadow .15s ease; } input[placeholder*="destination"]:focus { outline: none !important; border-color: #1e6fd9 !important; box-shadow: 0 0 0 3px rgba(30,111,217,.16); } /* The Search / Advanced Search buttons keep their existing colours - only the shape, weight and elevation become Material. */ button[ng-click*="StartSearch"], button[ng-click*="SearchOverall"] { border: 0; border-radius: 4px; color: #fff; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 12.5px; padding: 8px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.20), 0 1px 2px rgba(0,0,0,.12); transition: box-shadow .18s ease, filter .18s ease; cursor: pointer; } button[ng-click*="StartSearch"]:hover, button[ng-click*="SearchOverall"]:hover { box-shadow: 0 4px 10px rgba(0,0,0,.24), 0 2px 4px rgba(0,0,0,.16); filter: brightness(1.06); } button[ng-click*="StartSearch"]:active, button[ng-click*="SearchOverall"]:active { box-shadow: 0 1px 2px rgba(0,0,0,.24); filter: brightness(.96); } /* ---- Promo banner / carousel imagery ------------------------------------- */ img.mySlides, img.top { border-radius: 10px; } /* ============================================================================ PAGE CENTRING (all viewports) style.css caps the document at max-width:1333px (product.css 1330px) with margin:0, so on any screen wider than that the whole store front sat hard against the left edge with a growing band of dead space on the right. Auto side margins centre the document box; nothing inside it moves relative to anything else, so no layout is disturbed. ============================================================================ */ html, body { margin-left: auto !important; margin-right: auto !important; } /* ============================================================================ LEGACY FIXED GEOMETRY - small screens Why this block exists, and why it is broad. These views predate responsive design and pin their layout in pixels in three different places at once: * inline styles in the markup - width:1080px, margin-left:120px, width:450px * class overrides of Bootstrap - product.css sets .col-sm-9 { width:930px } * id/class rules - #picture 500px, #pictures 320px, #line 450px, .col-sm-6.w li 430px style.css also declares three @media blocks and leaves all three EMPTY, so there is no existing mobile layer to extend - it has to be supplied here. The earlier version of this file tried to enumerate offending pixel values (1140/1000/960/800/700/600/500). That missed 1080px, 993px, 930px, 900px and 450px, which is exactly why BookingRequest was still broken. Worse, the overflow-x:hidden further up CLIPS the overflow instead of letting it scroll, so a scrollWidth-based check reports a clean page while content is being cut off. Hence: neutralise generically, and measure rendered right edges, not scrollWidth. ============================================================================ */ @media (max-width: 991px) { /* The document itself must never be wider than the screen, whatever the stylesheets cap it at. */ html, body { max-width: 100% !important; width: auto !important; } /* Any element carrying an inline pixel width shrinks to fit its container. max-width rather than width, so small elements (a 65px logo, a 30px icon button) are left exactly as they are - only things too wide to fit move. */ [style*="width"] { max-width: 100% !important; } /* Hard left margins are what push content off the left edge and clip text. There are dozens across these views, from 11px to 138px. */ [style*="margin-left"] { margin-left: 0 !important; } /* The same hard margins also arrive from CLASS rules, which the selector above cannot see because it only matches inline styles. .size is the costly one: product.css gives it margin-left:60px + margin-right:35px (style.css 24px/18px), and these pages nest TWO .size wrappers - so 190px of a 390px screen was margin, leaving a 200px content column and a 170px line of text. Measured chain: 390 -> 295 -> 200. */ .size, .nav, .topnav, .social, .scrollmenu, .header { margin-left: 0 !important; margin-right: 0 !important; } /* Form controls: full width and border-box, so a 2px border plus 5px padding cannot push a 100%-wide field past the edge. */ input[style], select[style], textarea[style], input[type="text"], input[type="email"], input[type="tel"], select, textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* ...but not the small controls, which must keep their intrinsic size. */ input[type="radio"], input[type="checkbox"], input[type="submit"], input[type="button"] { width: auto !important; } /* Legacy fixed widths applied by CLASS or ID rather than inline style. product.css overriding .col-sm-9 to 930px is the worst of these: it defeats Bootstrap's own responsive columns on every page that links it. max-width ONLY - deliberately no width:auto and no float:none here. An earlier version of this rule set width:auto and float:none on every col-sm-*, which stacked the category tiles one per row at 390px: those tiles are a legitimate floated grid, and removing the float turned eight side-by-side tiles into eight full-width rows. max-width caps whatever is too wide to fit and leaves the grid itself alone, because a declared width:930px still renders at min(930px, container). */ .size, #picture, #pictures, #line, #price, .content, .item, .items, .scrollmenu, .mySlides, footer, [class*="col-sm-"], [class*="col-md-"] { max-width: 100% !important; } /* Footer is the one element that genuinely needs its fixed width removed: product.css pins it to 1333px, so capping alone would still leave it wider than any phone once its own padding is added. */ footer { width: auto !important; } .col-sm-6.w li { width: auto !important; max-width: 100% !important; } /* Columns lose only their hard side margins, never their float. */ [class*="col-sm-"], [class*="col-md-"] { margin-left: 0 !important; margin-right: 0 !important; } /* Images scale; their captions and frames just must not overflow. */ #cap, #caption, .top { max-width: 100% !important; } img.top, img.mySlides, img.content { height: auto !important; } /* Bootstrap 3 rows are float-based, but this site's CSS turns .row into a FLEX container. Float-width columns then behave as shrinking flex items and collapse to a narrow strip - measured 184px of usable width inside a 674px viewport on BookingRequest. The obvious fix, .row { display:block }, is wrong here: the category icon tiles on the store front are plain divs that rely on their parent row being flex to sit side by side, so forcing block turned eight tiles into eight full-width rows. Instead let the flex row WRAP, and make only the Bootstrap columns full-width flex items. Nothing here affects a row that is still display:block - both properties are simply inert on a non-flex container - and non-column children such as the icon tiles keep their content width and stay in a line. */ /* Rows stack on phones. This site's CSS makes .row a FLEX container, so its children share the width instead of wrapping: on the booking form the label / colon / value cells are plain divs, and three of them in a 390px row wrap the text at about 150px. Block layout gives each the full width. Two approaches were measured and rejected before this one: * .row { display:block } applied to every row stacked the eight category tiles on the store front into eight full-width rows; * .row > * { flex: 1 1 100% } made every nested row demand 100% of its parent, and the bases accumulated - 67 elements ended up past the right edge of the booking form. So: stack every row EXCEPT one explicitly tagged .promo-icon-row in the view, which stays a wrapping flex line of fixed-size tiles. */ /* :not(.ng-hide) as well as the cascade guard at the top of the file - this is the rule that actually broke ng-show, so it says so at the point of use. */ .row:not(.promo-icon-row):not(.ng-hide) { display: block !important; } .promo-icon-row { display: flex !important; flex-wrap: wrap !important; } .promo-icon-row > * { flex: 0 0 auto !important; } /* A flex item will not shrink below its CONTENT's min-content width, however willing its flex-shrink is, because min-width defaults to auto. That is why a 450px input kept its plain wrapper div 478px wide inside a 390px screen even though the wrapper computed flex:0 1 auto - measured 30 elements hanging past the right edge on the booking form, none of which carried a width of its own. Setting min-width:0 lets the chain collapse to the space available. Applied without !important so any element that genuinely needs a minimum can still declare one. */ *, *::before, *::after { min-width: 0; } /* style.css gives every table cell 56px of side padding, which alone is wider than a third of a phone screen. */ table, th, td { padding-left: 8px !important; padding-right: 8px !important; } /* style.css sets h3,h4,h5,p { display:inline } site-wide, so on a narrow screen labels and their values run together into one ragged paragraph - this is the "Country : SINGAPORE, MALAYSIA City : SINGAPORE, KUALA LUMPUR" wrapping on the booking page. Restore block flow on small screens only. */ h3, h4, h5, p { display: block !important; margin-right: 0 !important; } /* Keep the price row itself on one line - it is a genuine inline group. */ .promo-price, .promo-price * { display: revert !important; } .promo-price { display: flex !important; } } /* ============================================================================ MATERIAL FORM CONTROLS (all viewports) Applied to the existing markup rather than replacing it with md-input-container / md-select / md-button. Those fields carry live ng-model bindings, a date-picker directive, and validation borders driven by {{request.CommentBorder[n]}} on the booking and special-request forms; swapping the elements would put all of that at risk on pages that take real bookings. Material's shape, elevation, focus states and typography can be applied to the existing inputs with no behavioural change at all. ============================================================================ */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea { border: 1px solid rgba(0,0,0,.20) !important; border-radius: 4px !important; padding: 10px 12px !important; font-size: 14px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; box-sizing: border-box; } input[type="text"]:hover, input[type="email"]:hover, input[type="tel"]:hover, select:hover, textarea:hover { border-color: rgba(0,0,0,.38) !important; } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, select:focus, textarea:focus { outline: none !important; border-color: #ff751a !important; box-shadow: 0 0 0 3px rgba(255,117,26,.18) !important; } ::placeholder { color: #9aa3ad; opacity: 1; } /* Material text buttons/raised buttons out of the site's orange buttons. */ button, input[type="submit"] { border-radius: 4px !important; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 1px 3px rgba(0,0,0,.20), 0 1px 2px rgba(0,0,0,.12); transition: box-shadow .18s ease, filter .18s ease; } button:hover, input[type="submit"]:hover { box-shadow: 0 4px 10px rgba(0,0,0,.24), 0 2px 4px rgba(0,0,0,.16); filter: brightness(1.06); } button:active, input[type="submit"]:active { box-shadow: 0 1px 2px rgba(0,0,0,.24); filter: brightness(.96); } /* ---- Mobile search bar --------------------------------------------------- On phones the controller sets the search container to 'margin-top:60px; width:90%; position:fixed' - so it is a floating overlay, not part of the flow. Two consequences worth correcting: * at 90% it left a dead band down the right-hand side (measured: a 235px input inside a 390px screen); * with no background of its own, cards scrolled underneath it and showed through the text. Full width plus a white surface and a 1dp shadow turns it into a proper Material search bar. Position and stacking are left exactly as the controller set them. */ @media (max-width: 991px) { .form-group[style*="position:fixed"] { width: 100% !important; left: 0 !important; padding-left: 10px !important; padding-right: 10px !important; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.12); } .promo-search-row { width: 100% !important; } } /* The magnifier in the mobile search row is an icon button INSIDE the field, not a raised button beside it. The rules below back up the inline styles in the view so the button cannot pick up the site's orange button styling or the Material elevation added further up this file. */ .promo-search-row { position: relative; } .promo-search-row .promo-search-btn, .promo-search-row button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; display: flex !important; align-items: center; justify-content: center; cursor: pointer; } .promo-search-row button:hover { box-shadow: none !important; background: rgba(0,0,0,.06) !important; } /* Room for the icon, so typed text never disappears underneath it. */ .promo-search-row .promo-search-input, .promo-search-row input[type="text"] { padding-right: 46px !important; width: 100% !important; box-sizing: border-box !important; } /* ============================================================================ MODERN PAGINATION The control is rendered by the Shared/PagesWP.html partial as a Bootstrap 3 pagination list with an inline style of font-size:10px and padding-left:50px - 10px type in 28px boxes, measured, which is well under the 44px minimum touch target and effectively unusable on a phone. Styled from here rather than from the partial itself: partial views are compiled and cached separately, and their recompile check shares a freshness timestamp with the main views, so an edit to a partial does not appear until the server restarts. A static stylesheet applies immediately. The markup, the links and the .active/.disabled classes the server sets are all left exactly as they are - !important is needed only to beat that inline font-size and padding. ============================================================================ */ ul.pagination { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; font-size: 14px !important; padding: 0 !important; margin: 28px 0 22px !important; border-radius: 0; list-style: none; } ul.pagination > li { display: block !important; } ul.pagination > li > a, ul.pagination > li > span { position: static !important; float: none !important; display: flex !important; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px !important; margin: 0 !important; border: 1px solid rgba(0,0,0,.10) !important; border-radius: 8px !important; background: #fff; color: #4a5560; font-weight: 600; line-height: 1; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: background-color .15s ease, color .15s ease, box-shadow .18s ease, transform .18s ease; } ul.pagination > li > a:hover, ul.pagination > li > a:focus { background: rgba(255,117,26,.10) !important; border-color: rgba(255,117,26,.45) !important; color: #ff751a !important; box-shadow: 0 3px 8px rgba(0,0,0,.14); transform: translateY(-1px); text-decoration: none; } /* Current page: filled and raised, and it should not look clickable. */ ul.pagination > .active > a, ul.pagination > .active > span, ul.pagination > .active > a:hover, ul.pagination > .active > a:focus { background: #ff751a !important; border-color: #ff751a !important; color: #fff !important; cursor: default; transform: none; box-shadow: 0 2px 6px rgba(255,117,26,.45); } /* The server puts .active on Previous and Next to mean ENABLED, not "this is the current page" - Bootstrap uses .disabled for the opposite state. Left alone they took the filled current-page treatment above, so on page 2 the pager showed THREE highlighted items: Previous, 2 and Next. They keep the ordinary look instead. */ ul.pagination > .prev.active > a, ul.pagination > .next.active > a { background: #fff !important; border-color: rgba(0,0,0,.10) !important; color: #4a5560 !important; box-shadow: 0 1px 2px rgba(0,0,0,.06); cursor: pointer; transform: none; } ul.pagination > .prev.active > a:hover, ul.pagination > .next.active > a:hover { background: rgba(255,117,26,.10) !important; border-color: rgba(255,117,26,.45) !important; color: #ff751a !important; } /* Previous / Next are words, not digits, so they get room and sit at the ends. */ ul.pagination > .prev > a, ul.pagination > .next > a { padding: 0 16px !important; text-transform: uppercase; letter-spacing: .04em; font-size: 12.5px; } ul.pagination > .prev { margin-right: auto !important; } ul.pagination > .next { margin-left: auto !important; } ul.pagination > .disabled > a, ul.pagination > .disabled > span { color: #b6bdc5 !important; background: #f5f6f8 !important; border-color: rgba(0,0,0,.06) !important; box-shadow: none; cursor: not-allowed; pointer-events: none; } @media (max-width: 767px) { ul.pagination { gap: 5px; margin: 20px 0 16px !important; padding: 0 8px !important; } ul.pagination > li > a, ul.pagination > li > span { min-width: 38px; height: 38px; padding: 0 9px !important; font-size: 13.5px; } /* auto margins would push Prev/Next onto lines of their own once wrapped */ ul.pagination > .prev { margin-right: 0 !important; } ul.pagination > .next { margin-left: 0 !important; } ul.pagination > .prev > a, ul.pagination > .next > a { padding: 0 12px !important; font-size: 12px; } } /* ============================================================================ MATERIAL SURFACES The bordered boxes on ProductInfo and the Request pages are drawn with 3px #e6e6e6 borders, which is what makes those pages look dated next to the promo cards. Replacing the border with a Material elevation and a radius lifts them without touching a single element's position. ============================================================================ */ #picture, #pictures, #cap, #caption, #price, .content, .item, #EntryWindowID, .panel, .well { border: 1px solid rgba(0,0,0,.08) !important; border-radius: 10px !important; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.20); background: #fff; } #picture, #pictures { overflow: hidden; padding: 0 !important; } #price { background: #fafbfc !important; } /* ---- Request forms (SpecialRequest / BookingRequest) --------------------- The form sections are .box1 tables drawn with `border: 1px solid #999` and a heavy `border-top: 2px solid`, which is what makes these pages look older than the rest of the site. A Material surface turns them into cards - and the coloured TOP border is deliberately left alone, because the views set it from {{requestsp.BorderTop}} and CommentBorder[n] to signal a section's validation state. Overriding it would throw that signal away. */ table.box1, .box1 { background: #fff; border-left: 1px solid rgba(0,0,0,.07) !important; border-right: 1px solid rgba(0,0,0,.07) !important; border-bottom: 1px solid rgba(0,0,0,.07) !important; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.16); padding: 12px !important; margin-bottom: 16px !important; } .box1 td { padding: 8px 10px !important; border: 0 !important; } /* Section headings on the request forms. */ .redleaf-box h3, .box1 h3 { font-size: 18px; font-weight: 600; color: #2e3133; margin-top: 4px; margin-bottom: 10px; } .redleaf-box h3 small { font-size: 13px; color: #8a95a1; font-weight: 400; } /* The full-width text inputs these forms use. The Material field styling above already applies; this only clears the legacy fixed widths so they fill their card. */ input.input-text.full-width, .box1 input[type="text"], .box1 select, .box1 textarea { width: 100% !important; box-sizing: border-box !important; margin-bottom: 6px; } /* "All Categories" sidebar. It is a layout TABLE (two nested tables), so only the surface, dividers and spacing are restyled - never its display. The 3px orange side borders that style.css puts on every table/th/td are what made it look like a 2005 web page. */ .nav { border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.20); background: #fff; border: 0 !important; } .nav table, .nav th, .nav td { border-left: 0 !important; border-right: 0 !important; padding-left: 16px !important; padding-right: 16px !important; } .nav td { border-bottom: 1px solid rgba(0,0,0,.06) !important; } .nav tr:last-child td { border-bottom: 0 !important; } .nav th { /* Material app-bar treatment for the existing orange header. */ border: 0 !important; padding-top: 12px !important; padding-bottom: 12px !important; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 1px 2px rgba(0,0,0,.14); } .nav td a { display: block; padding: 6px 0; color: #5b6672; transition: background-color .15s ease, padding-left .15s ease, color .15s ease; } .nav td a:hover { background-color: rgba(255,117,26,.08); padding-left: 6px; color: #ff751a; text-decoration: none; border-bottom: 0 !important; text-shadow: none !important; }